Updated playerbar and player state

pull/44/head
Nikan Dalvand 2019-08-01 23:59:05 +04:30
parent b9ff59c712
commit 341b284d66
2 changed files with 13 additions and 23 deletions

View File

@ -1,10 +1,10 @@
<template> <template>
<section> <section>
<section class="player"> <section class="player">
<img @load="onArtworkLoad" class="artwork" :src="playerQueue[this.currentlyPlaying].artwork" /> <img @load="onArtworkLoad" class="artwork" :src="currentlyPlaying.artwork" />
<div> <div>
<p class="title">{{playerQueue[this.currentlyPlaying].title}}</p> <p class="title">{{currentlyPlaying.title}}</p>
<p class="artist">{{playerQueue[this.currentlyPlaying].artist}}</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', 'currentlyPlaying', 'playerQueue']), 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(this.playerQueue[this.currentlyPlaying].stream) 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%'

View File

@ -1,38 +1,28 @@
const state = { const state = {
fullscreen_mode: false, fullscreen_mode: false,
currently_playing: 0, currently_playing: {
queue: [
{
id: 8, id: 8,
title: 'Yellow', title: 'Yellow',
artist: 'Rich Brian', artist: 'Rich Brian',
artwork: '/static/demo/yellow.jpeg', artwork: '/static/demo/yellow.jpeg',
stream: '/static/demo/music.mp3' stream: '/static/demo/music.mp3'
} }
]
} }
const getters = { const getters = {
fullscreenStatus: (state) => state.fullscreen_mode, fullscreenStatus: (state) => state.fullscreen_mode,
currentlyPlaying: (state) => state.currently_playing, currentlyPlaying: (state) => state.currently_playing
playerQueue: (state) => state.queue
} }
const mutations = { const mutations = {
TOGGLE_FULLSCREEN (state) { TOGGLE_FULLSCREEN (state) {
state.fullscreen_mode = !state.fullscreen_mode state.fullscreen_mode = !state.fullscreen_mode
},
PLAY_QUEUE_ITEM (state, index) {
state.currently_playing = index
} }
} }
const actions = { const actions = {
toggleFullscreenStatus ({ commit }) { toggleFullscreenStatus ({ commit }) {
commit('TOGGLE_FULLSCREEN') commit('TOGGLE_FULLSCREEN')
},
playQueueItem ({ commit }, index) {
commit('PLAY_QUEUE_ITEM', index)
} }
} }