88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<template>
|
|
<div class="modal-media h-full border-r border-indigo-100">
|
|
<div class="flex items-center border-b border-indigo-100">
|
|
<div class="flex-shrink-0 mr-5">
|
|
<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-200 bg-opacity-25'
|
|
: 'hover:bg-indigo-200 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,
|
|
title: String,
|
|
preview: String,
|
|
feed_id: Number,
|
|
},
|
|
|
|
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>
|