Player now consumes the state data

pull/41/head
Nikan Dalvand 2019-07-31 23:56:26 +04:30
parent f31484d322
commit bd8ddc94fd
1 changed files with 5 additions and 5 deletions

View File

@ -1,10 +1,10 @@
<template> <template>
<section> <section>
<section class="player"> <section class="player">
<img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" /> <img @load="onArtworkLoad" class="artwork" :src="currentlyPlaying.artwork" />
<div> <div>
<p class="title">Yellow</p> <p class="title">{{currentlyPlaying.title}}</p>
<p class="artist">Rich Brian</p> <p class="artist">{{currentlyPlaying.artist}}</p>
</div> </div>
<div class="visualizer"> <div class="visualizer">
<div id="visualizer"></div> <div id="visualizer"></div>
@ -61,7 +61,7 @@ export default {
isFullscreen: false isFullscreen: false
} }
}, },
computed: mapGetters(['fullscreenStatus']), computed: mapGetters(['fullscreenStatus', 'currentlyPlaying']),
mounted () { mounted () {
let progress = this.$el.getElementsByClassName('progress')[0] let progress = this.$el.getElementsByClassName('progress')[0]
this.wavesurfer = WaveSurfer.create({ this.wavesurfer = WaveSurfer.create({
@ -90,7 +90,7 @@ export default {
}) })
] ]
}) })
this.wavesurfer.load('/static/demo/music.mp3') this.wavesurfer.load(this.currentlyPlaying.stream)
this.wavesurfer.on('ready', () => { this.wavesurfer.on('ready', () => {
this.duration = formatSeconds(this.getDuration()) this.duration = formatSeconds(this.getDuration())
this.wavesurfer.container.style['height'] = '100%' this.wavesurfer.container.style['height'] = '100%'