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

Added play/pause icon functionality with simple button style

pull/18/head
Nikan Dalvand 2019-07-25 22:43:13 +04:30
parent f4100bb105
commit bf101c1ea9
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,12 @@
<div class="visualizer"> <div class="visualizer">
<div id="visualizer"></div> <div id="visualizer"></div>
</div> </div>
<div class="control-buttons">
<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="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>
</div>
</div>
</section> </section>
</template> </template>
@ -29,9 +35,11 @@ export default {
responsive: true responsive: true
}) })
this.wavesurfer.load('/static/demo/music.mp3') this.wavesurfer.load('/static/demo/music.mp3')
this.wavesurfer.on('ready', function () { },
// wavesurfer.play() data () {
}) return {
isPlaying: false
}
}, },
methods: { methods: {
onArtworkLoad () { onArtworkLoad () {
@ -39,6 +47,14 @@ export default {
color(img.src, (_, color) => { color(img.src, (_, color) => {
this.wavesurfer.setProgressColor(`#${color}`) this.wavesurfer.setProgressColor(`#${color}`)
}) })
},
togglePlay () {
if (this.isPlaying) {
this.wavesurfer.pause()
} else {
this.wavesurfer.play()
}
this.isPlaying = typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
} }
} }
} }