110 lines
3.4 KiB
Vue
Executable File
110 lines
3.4 KiB
Vue
Executable File
<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" @click.stop="">
|
|
<div
|
|
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']"
|
|
@click.prevent="startPlay(media)"
|
|
>
|
|
<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" :media_id="media.id"
|
|
:liked="media.liked" @addAudio="likeAudio"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState, mapGetters } from 'vuex'
|
|
import find from 'lodash/find'
|
|
import { Inertia } from '@inertiajs/inertia'
|
|
|
|
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,
|
|
feed_id: Number,
|
|
title: String,
|
|
preview: String,
|
|
},
|
|
emits: ['trackClick'],
|
|
computed: {
|
|
...mapGetters(['playing']),
|
|
...mapState({
|
|
playlist_id: (state) => state.player.playlist_id,
|
|
seek: (state) => state.player.seek,
|
|
currentSong: (state) => state.player.currentSong,
|
|
}),
|
|
},
|
|
|
|
methods: {
|
|
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
|
|
}
|
|
},
|
|
...mapActions(['toggleAudio', 'newCurrentPlaylist', 'skipToIndexByMusic']),
|
|
startPlay(music) {
|
|
this.$emit('trackClick')
|
|
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])
|
|
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|