|
@@ -1,9 +1,19 @@
|
|
|
<template>
|
|
|
-<f7-toolbar v-if="status != 'empty'">
|
|
|
-<f7-preloader v-if="loading" />
|
|
|
-<f7-link @click="onPlay" v-if="!loading && status == 'pause'">Play</f7-link>
|
|
|
-<f7-link @click="onPause" v-if="!loading && status == 'playing'">Pause</f7-link>
|
|
|
-<div slot="before-inner" v-if="!loading">{{title}}</div>
|
|
|
+<f7-toolbar style='position: fixed; height: 80px;' bottom v-if="status != 'empty'">
|
|
|
+ <!--
|
|
|
+ il player avra' due stati aperto e chiuso? non so quanto mi piace, mi sembra che
|
|
|
+ le informazioni utili possano stare benissimo in questa toolbar.
|
|
|
+ nel caso cmq bisogna fare una classe css per questi stati con l'altezza che varia.
|
|
|
+ -->
|
|
|
+ <f7-block>
|
|
|
+ <f7-icon class='cursor-pointer' to='#' size='52px' f7='play_circle' @click="onPlay" v-if="!loading && status == 'pause'" />
|
|
|
+ <f7-icon class='cursor-pointer' size='52px' f7='pause_circle' @click="onPause" v-if="!loading && status == 'playing'" />
|
|
|
+ <f7-preloader size='42px' color='white' v-if='loading'/>
|
|
|
+ </f7-block>
|
|
|
+ <f7-block>
|
|
|
+ <f7-link v-if='!loading'>{{title}}</f7-link>
|
|
|
+ </f7-block>
|
|
|
+
|
|
|
</f7-toolbar>
|
|
|
</template>
|
|
|
|