72 lines
1.8 KiB
Vue
Executable File
72 lines
1.8 KiB
Vue
Executable File
<template>
|
|
<div data-simplebar class="max-h-72 overflow-auto ">
|
|
<div class="mt-2 divide-y divide-indigo-100">
|
|
<div
|
|
v-for="listsMusic in listsMusics"
|
|
:key="listsMusic.id"
|
|
:class="[
|
|
currentSong?.id === listsMusic.id
|
|
? 'bg-indigo-300 bg-opacity-25'
|
|
: 'hover:bg-indigo-300 hover:bg-opacity-25',
|
|
'p-4 flex items-center space-x-4',
|
|
]"
|
|
@click="toggleAudioLocal(listsMusic)"
|
|
>
|
|
<div class="flex">
|
|
<toggle-play-button :media_id="listsMusic.id" />
|
|
</div>
|
|
<div class="flex flex-1 text-sm text-gray-light">
|
|
{{ listsMusic.name }}
|
|
</div>
|
|
<div class="text-sm text-gray-light">
|
|
<span v-show="!listsMusic.playing">{{ listsMusic.time }}</span>
|
|
<span v-show="listsMusic.playing">{{ seek }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState } from 'vuex'
|
|
import TogglePlayButton from '@/Shared/Misc/TogglePlayButton.vue'
|
|
|
|
export default {
|
|
components: {
|
|
TogglePlayButton
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
created(){
|
|
//console.log('loaded - now');
|
|
},
|
|
|
|
computed: {
|
|
//...mapGetters(["playing"]),
|
|
...mapState({
|
|
seek: (state) => state.player.seek,
|
|
currentSong: (state) => state.player.currentSong,
|
|
listsMusics: (state) => state.player.playlist,
|
|
}),
|
|
},
|
|
|
|
methods: {
|
|
...mapActions([
|
|
'toggleAudio',
|
|
'skipToIndexByMusic',
|
|
]),
|
|
toggleAudioLocal(music){
|
|
if (this.currentSong?.id === music.id) {
|
|
this.toggleAudio()
|
|
return
|
|
}
|
|
this.skipToIndexByMusic(music)
|
|
},
|
|
},
|
|
}
|
|
</script>
|