mirrors/youjo-fe
mirrors/youjo-fe
1
0
Fork 0
mirror of https://git.youjo.love/youjo/youjo-fe.git synced 2025-01-18 18:36:01 +01:00
Code Issues Projects Releases Packages Wiki Activity

clean up the music player widget a bit

Browse source 
Enjoy my untidy code
This commit is contained in:
Chizu 2023-03-19 05:22:17 +09:00
parent 91c708ad17
commit 9e70c6b073
2 changed files with 58 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/music_player/music_player.js
View file

@ -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
export default musicPlayer

54
src/components/music_player/music_player.vue
View file

@ -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%
}