From 9e70c6b073f8ca40c88b228eebf65f674b3e5f65 Mon Sep 17 00:00:00 2001
From: Chizu <chizu@youjo.love>
Date: Sun, 19 Mar 2023 05:22:17 +0900
Subject: [PATCH] clean up the music player widget a bit
Enjoy my untidy code
---
src/components/music_player/music_player.js | 38 ++++++++------
src/components/music_player/music_player.vue | 54 +++++++++++++-------
2 files changed, 58 insertions(+), 34 deletions(-)
diff --git a/src/components/music_player/music_player.js b/src/components/music_player/music_player.js
index f4b003dd..37564954 100644
--- a/src/components/music_player/music_player.js
+++ b/src/components/music_player/music_player.js
@@ -41,6 +41,12 @@ const musicPlayer = {
},
defaultVolume () {
return this.$store.getters.mergedConfig.defaultProfileMusicVolume
+ },
+ currentTime() {
+ const currentTime = Math.floor(this.progress * this.songDuration / 100)
+ const minutes = Math.floor(currentTime / 60)
+ const seconds = currentTime - minutes * 60
+ return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}
},
methods: {
@@ -73,23 +79,23 @@ const musicPlayer = {
clearQueue () {
this.$store.dispatch('setBackgroundMusic', null)
this.togglePanel()
- },
- created () {
- this.progress = 0
- this.volume = this.defaultVolume
- setInterval(() => {
- if (this.$store.getters.hasSong) {
- this.progress = this.$store.getters.songProgress
- if (this.progress === 100) {
- this.$store.dispatch('playlistNext')
- }
- }
- }, 1000)
- },
- beforeDestroy () {
- clearInterval()
}
+ },
+ created () {
+ this.progress = 0
+ this.volume = this.defaultVolume
+ setInterval(() => {
+ if (this.$store.getters.hasSong) {
+ this.progress = this.$store.getters.songProgress
+ if (this.progress === 100) {
+ this.$store.dispatch('playlistNext')
+ }
+ }
+ }, 1000)
+ },
+ beforeDestroy () {
+ clearInterval()
}
}
-export default musicPlayer
\ No newline at end of file
+export default musicPlayer
diff --git a/src/components/music_player/music_player.vue b/src/components/music_player/music_player.vue
index d7dea6b1..a4cfe176 100644
--- a/src/components/music_player/music_player.vue
+++ b/src/components/music_player/music_player.vue
@@ -19,6 +19,16 @@
</div>
</div>
<div class="shout-window">
+ <div class="music-player-timeline">
+ <input
+ class="seekbar"
+ type="range"
+ min="0"
+ max="100"
+ v-model="progress"
+ @change.stop.prevent="seekPosition"
+ />
+ </div>
<div class="music-player-controls">
<div
class="music-player-button"
@@ -51,7 +61,18 @@
class="music-player-button"
/>
</div>
- <div
+ <div>
+ <FAIcon
+ icon="times"
+ class="close-icon"
+ @click.stop.prevent="clearQueue"
+ />
+ </div>
+ </div>
+ </div>
+ <div>
+ <div class="music-player-volume">
+ <div
@click.stop.prevent="toggleMute"
>
<FAIcon
@@ -63,30 +84,18 @@
icon="volume-off"
/>
</div>
- </div>
<input
type="range"
+ class="music-player-volume-slider"
v-model="volume"
min="0"
max="100"
@change.stop.prevent="setVolume"
/>
- <FAIcon
- icon="times"
- class="close-icon"
- @click.stop.prevent="clearQueue"
- />
</div>
- <div class="music-player-timeline">
- <input
- class="seekbar"
- type="range"
- min="0"
- max="100"
- v-model="progress"
- @change.stop.prevent="seekPosition"
- />
</div>
+ <div>
+ </div>
</div>
</div>
</div>
@@ -158,16 +167,25 @@
column-gap: 1em;
.music-player-controls {
- display: inline-flex;
column-gap: 1em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
.music-player-button {
display: inline-flex;
column-gap: 2em;
}
}
+ .music-player-volume {
+ display: inline-flex;
+ column-gap: 1em;
+ padding-top: 1em;
+ }
+
+
.music-player-timeline {
- padding-top: 1em;
+ padding-bottom: 1em;
.seekbar {
width: 100%
}