76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
Vue
<template>
|
|
<div class="">
|
|
<div class="flex items-center border-b border-indigo-100">
|
|
<div class="flex-shrink-0 mr-5 w-28 md:w-56">
|
|
<feed-preview class="h-28 w-28 md:w-56 md:h-56 object-cover" type="music" :source='preview' />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-base md:text-xl font-semibold text-gray">{{title}}</span>
|
|
</div>
|
|
</div>
|
|
<div data-simplebar class="max-h-72 overflow-auto">
|
|
<div class="divide-y divide-indigo-100">
|
|
|
|
<div
|
|
@click.prevent="startPlay(media)"
|
|
v-for="media in medias" :key="media.id"
|
|
:class="[currentSong?.id === media.id ? 'bg-indigo-300 bg-opacity-25' : 'hover:bg-indigo-300 hover:bg-opacity-25', 'p-4 flex items-center space-x-4']">
|
|
|
|
<div class="flex">
|
|
<toggle-play-button :media_id="media.id" />
|
|
</div>
|
|
<div class="flex-1 text-sm text-gray-light">
|
|
{{media.name}}
|
|
</div>
|
|
<div class="text-sm text-gray-light">
|
|
<div v-if="currentSong?.id === media.id">{{seek}}</div>
|
|
<span v-else>{{media.time}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState, mapGetters } from "vuex";
|
|
import FeedPreview from "@/Shared/Feed/FeedPreview";
|
|
import TogglePlayButton from "@/Shared/Misc/TogglePlayButton";
|
|
export default {
|
|
components: {
|
|
FeedPreview,
|
|
TogglePlayButton,
|
|
},
|
|
props: {
|
|
medias: Array,
|
|
feed_id: Number,
|
|
title: String,
|
|
preview: String,
|
|
},
|
|
methods: {
|
|
...mapActions(["toggleAudio", "newCurrentPlaylist", "skipToIndexByMusic"]),
|
|
startPlay(music) {
|
|
if (this.currentSong?.id === music.id) {
|
|
this.toggleAudio();
|
|
return;
|
|
}
|
|
// if (this.playlist_id === this.feed_id) {
|
|
// this.skipToIndexByMusic(music);
|
|
// return;
|
|
// }
|
|
this.newCurrentPlaylist([music, this.medias, this.feed_id]);
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters(["playing"]),
|
|
...mapState({
|
|
playlist_id: (state) => state.player.playlist_id,
|
|
seek: (state) => state.player.seek,
|
|
currentSong: (state) => state.player.currentSong,
|
|
}),
|
|
},
|
|
|
|
};
|
|
</script>
|