111 lines
3.0 KiB
Vue
Executable File
111 lines
3.0 KiB
Vue
Executable File
<template>
|
|
<div class="modal-media h-full">
|
|
<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-96 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-show="currentSong?.id === media.id">{{seek}}</div>
|
|
<div v-show="currentSong?.id !== media.id">{{media.time}}</div>
|
|
</div>
|
|
<music-add-count v-if="$page.props.auth.user" @addAudio="likeAudio" :media_id='media.id' :liked='media.liked' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { mapActions, mapState, mapGetters } from "vuex";
|
|
import { Inertia } from "@inertiajs/inertia";
|
|
import find from "lodash/find";
|
|
|
|
import FeedPreview from "@/Shared/Feed/FeedPreview.vue";
|
|
import TogglePlayButton from "@/Shared/Misc/TogglePlayButton.vue";
|
|
import MusicAddCount from "@/Shared/Misc/MusicAddCount.vue";
|
|
|
|
export default {
|
|
components: {
|
|
FeedPreview,
|
|
TogglePlayButton,
|
|
MusicAddCount,
|
|
},
|
|
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]);
|
|
},
|
|
|
|
likeAudio(media_id) {
|
|
Inertia.post(
|
|
route("feed.audio.like", media_id),
|
|
{},
|
|
{
|
|
preserveScroll: true,
|
|
preserveState: true,
|
|
}
|
|
);
|
|
let media = find(this.medias, (item) => item.id === media_id);
|
|
if(media){
|
|
media.liked = !media.liked;
|
|
}
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(["playing"]),
|
|
...mapState({
|
|
playlist_id: (state) => state.player.playlist_id,
|
|
seek: (state) => state.player.seek,
|
|
currentSong: (state) => state.player.currentSong,
|
|
}),
|
|
},
|
|
};
|
|
</script>
|