nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added general layer for wavesurfer

pull/18/head
Nikan Dalvand 2019-07-25 22:48:53 +04:30
parent bf101c1ea9
commit d41f96bfee
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/layouts/PlayerBar.vue
View File

@ -10,8 +10,8 @@
</div> </div>
<div class="control-buttons"> <div class="control-buttons">
<div class="play-pause-button" @click="togglePlay"> <div class="play-pause-button" @click="togglePlay">
<svg v-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg> <svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
<svg v-show="isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg> <svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
</div> </div>
</div> </div>
</section> </section>
@ -38,7 +38,7 @@ export default {
}, },
data () { data () {
return { return {
isPlaying: false playingStatus: false
} }
}, },
methods: { methods: {
@ -48,13 +48,27 @@ export default {
this.wavesurfer.setProgressColor(`#${color}`) this.wavesurfer.setProgressColor(`#${color}`)
}) })
}, },
play () {
this.wavesurfer.play()
},
pause () {
this.wavesurfer.pause()
},
stop () {
this.wavesurfer.stop()
},
toggleMute () {
this.wavesurfer.toggleMute()
},
setPlaybackRate (rate) {
this.wavesurfer.setPlaybackRate(rate)
},
isPlaying () {
return typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
},
togglePlay () { togglePlay () {
if (this.isPlaying) { this.wavesurfer.playPause()
this.wavesurfer.pause() this.playingStatus = this.isPlaying()
} else {
this.wavesurfer.play()
}
this.isPlaying = typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
} }
} }
} }