diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue index 977f276..ace7c3d 100644 --- a/src/renderer/layouts/PlayerBar.vue +++ b/src/renderer/layouts/PlayerBar.vue @@ -49,7 +49,6 @@ import color from 'dominant-color' import { formatSeconds } from '../utility/DateTime' import IconButton from '../components/IconButton' import { mapActions, mapGetters } from 'vuex' - export default { name: 'PlayerBar', components: { IconButton }, @@ -65,6 +64,9 @@ export default { mounted () { this.drawVisualizer() }, + updated () { + this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream) + }, methods: { drawVisualizer () { let progress = this.$el.getElementsByClassName('progress')[0] @@ -95,11 +97,17 @@ export default { ] }) this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream) + let readyCounter = 0 this.wavesurfer.on('ready', () => { + console.log('ready') + readyCounter += 1 this.duration = formatSeconds(this.getDuration()) - this.wavesurfer.container.style['height'] = '100%' let map = this.wavesurfer.minimap.drawer.container + this.wavesurfer.container.style['height'] = '100%' map.style['height'] = '100%' + if (readyCounter > 0) { + this.play() + } }) let currentWidth = 0 let hoverStatus = false @@ -168,21 +176,31 @@ export default { }) }, playNext () { - this.playQueueItem(this.currentlyPlaying + 1) - this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream) + this.wavesurfer.container.style['height'] = '0%' + let map = this.wavesurfer.minimap.drawer.container + map.style['height'] = '0%' + window.setTimeout(() => { + this.playQueueItem(this.currentlyPlaying + 1) + }, 500) }, playPrevious () { - this.playQueueItem(this.currentlyPlaying - 1) - this.wavesurfer.load(this.playerQueue[this.currentlyPlaying].stream) + this.wavesurfer.container.style['height'] = '0%' + let map = this.wavesurfer.minimap.drawer.container + map.style['height'] = '0%' + window.setTimeout(() => { + this.playQueueItem(this.currentlyPlaying - 1) + }, 500) }, play () { this.wavesurfer.play() }, pause () { this.wavesurfer.pause() + this.playingStatus = this.isPlaying() }, stop () { this.wavesurfer.stop() + this.playingStatus = this.isPlaying() }, toggleMute () { this.wavesurfer.toggleMute() @@ -206,7 +224,11 @@ export default { return this.wavesurfer.getDuration() }, togglePlay () { - this.wavesurfer.playPause() + if (this.isPlaying()) { + this.pause() + } else { + this.play() + } this.playingStatus = this.isPlaying() }, toggleFavorite () { @@ -249,7 +271,7 @@ section.player top: 0 bottom: 0 margin: auto - transition: height 500ms ease ease + transition: height 500ms ease height: 0px width: 100% z-index: @@ -272,7 +294,7 @@ section.fullscreen background-color: white z-index: 1400 transition: transform 500ms ease-out - transform: translate3d(0,+100vh,0) + transform: translate3d(0,+100%,0) &.active - transform: translate3d(0,0vh,0) + transform: translate3d(0,0%,0) diff --git a/src/renderer/store/modules/Player.js b/src/renderer/store/modules/Player.js index 9ee4184..8a87437 100644 --- a/src/renderer/store/modules/Player.js +++ b/src/renderer/store/modules/Player.js @@ -20,8 +20,8 @@ const state = { id: 8, title: 'Ali sorena', artist: 'Negar', - artwork: 'http://sakhamusic.ir/wp-content/uploads/2016/03/Ali-Sorena-%E2%80%93-Negar.jpg', - stream: 'http://dl.sakhamusic.ir/94/esfand/09/03%20Negar%20(Prod.%20Ehsan%20Ziya)_2.mp3' + artwork: '/static/demo/negar.jpg', + stream: '/static/demo/negar.mp3' } ] } diff --git a/static/demo/negar.jpg b/static/demo/negar.jpg new file mode 100644 index 0000000..9cf715d Binary files /dev/null and b/static/demo/negar.jpg differ diff --git a/static/demo/negar.mp3 b/static/demo/negar.mp3 new file mode 100644 index 0000000..f0a6c26 Binary files /dev/null and b/static/demo/negar.mp3 differ