diff --git a/src/renderer/components/IconButton.vue b/src/renderer/components/IconButton.vue index 71ff1ad..8c329d0 100644 --- a/src/renderer/components/IconButton.vue +++ b/src/renderer/components/IconButton.vue @@ -25,6 +25,7 @@ export default { justify-content: center align-items: center width: 38px + cursor: pointer height: 38px text-decoration: none text-transform: capitalize diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue index 6979828..09cd312 100644 --- a/src/renderer/layouts/PlayerBar.vue +++ b/src/renderer/layouts/PlayerBar.vue @@ -14,15 +14,19 @@

{{duration}}

+ + + + - + - - + + - +
@@ -110,6 +114,7 @@ export default { data () { return { playingStatus: false, + isFavorited: false, duration: '00:00' } }, @@ -123,6 +128,23 @@ export default { this.wavesurfer.minimap.drawer.updateSize() for (let child in controlIcons) { if (typeof controlIcons[child] === 'object') { + if (controlIcons[child].className.includes('no-theme')) { + continue + } + if (controlIcons[child].className.includes('theme-icon')) { + let paths = controlIcons[child].getElementsByTagName('path') + for (let path in paths) { + if (typeof paths[path] === 'object') { + if (paths[path].getAttribute('class') === null) { + continue + } + if (paths[path].getAttribute('class').includes('colorable')) { + paths[path].style.fill = `#${color}` + } + } + } + continue + } controlIcons[child].style.backgroundColor = `#${color}` } } @@ -161,6 +183,9 @@ export default { togglePlay () { this.wavesurfer.playPause() this.playingStatus = this.isPlaying() + }, + toggleFavorite () { + this.isFavorited = !this.isFavorited } } }