|
@@ -1,6 +1,9 @@
|
|
|
<template>
|
|
|
-<f7-link @click="onPlay" v-if="status != 'playing'">Play</f7-link>
|
|
|
-<f7-link @click="onPause" v-else>Pause</f7-link>
|
|
|
+<f7-toolbar v-if="status != 'empty'">
|
|
|
+ <f7-link @click="onPlay" v-if="status == 'pause'">Play</f7-link>
|
|
|
+ <f7-link @click="onPause" v-if="status == 'playing'">Pause</f7-link>
|
|
|
+{{title}}
|
|
|
+</f7-toolbar>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -13,7 +16,7 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
loading: true,
|
|
|
- status: 'pause',
|
|
|
+ status: 'empty',
|
|
|
volume: 100,
|
|
|
title: 'RadioBlackout > DIRETTA',
|
|
|
subtitle: '',
|
|
@@ -25,20 +28,22 @@ export default {
|
|
|
eventBus.$off('play:now')
|
|
|
},
|
|
|
mounted () {
|
|
|
+// XXX: should track events from this.player, instead of manually setting
|
|
|
const t = this
|
|
|
- eventBus.$on('play:now', function (url) {
|
|
|
- t.play(url)
|
|
|
+ eventBus.$on('play:now', function (url, metadata) {
|
|
|
+ t.play(url, metadata)
|
|
|
t.status = 'playing'
|
|
|
})
|
|
|
eventBus.$on('play:pause', function() {
|
|
|
if(t.player) {
|
|
|
t.player.pause()
|
|
|
+ t.status = 'pause'
|
|
|
}
|
|
|
- t.status = 'pause'
|
|
|
})
|
|
|
eventBus.$on('play:resume', function() {
|
|
|
if(t.player) {
|
|
|
t.player.play()
|
|
|
+ t.status = 'playing'
|
|
|
}
|
|
|
})
|
|
|
},
|
|
@@ -49,7 +54,7 @@ export default {
|
|
|
onPause() {
|
|
|
eventBus.$emit('play:pause')
|
|
|
},
|
|
|
- play (url) {
|
|
|
+ play (url, metadata) {
|
|
|
let newPlayer = new Howl({
|
|
|
autoSuspend: false,
|
|
|
html5: true,
|
|
@@ -61,6 +66,11 @@ export default {
|
|
|
this.player.stop()
|
|
|
}
|
|
|
this.player = newPlayer
|
|
|
+
|
|
|
+ if(metadata !== undefined) {
|
|
|
+ this.title = metadata.title
|
|
|
+ this.live = metadata.live
|
|
|
+ }
|
|
|
},
|
|
|
stop () {
|
|
|
if (this.player) {
|