95 lines
3.4 KiB
Vue
95 lines
3.4 KiB
Vue
<template>
|
|
<div
|
|
class="card-block contain group cursor-pointer relative overflow-hidden"
|
|
>
|
|
<feed-header-misc
|
|
:count="entity.collection_medias.length"
|
|
type="musics"
|
|
/>
|
|
|
|
<div :class="[playlist_id === feed_id ? '' : 'transition-opacity ease-out opacity-0 group-hover:opacity-100' , ' absolute inset-0 z-10 flex items-center justify-center']">
|
|
<div class="w-full grid grid-cols-7 items-center p-1 md:p-3 bg-indigo-300 bg-opacity-75">
|
|
<div @click.stop="" class="col-span-1 flex mr-3 text-white">
|
|
<div @click.prevent="startPlay(entity.collection_medias[0])" class="inline-block transition-colors hover:text-orange">
|
|
<button :class="[ currentSong?.id === entity.collection_medias[0].id ? '' : 'hidden', 'default' ]">
|
|
<svg :class="[ playing ? 'hidden' : 'block', 'w-4 h-4 md:w-6 md:h-6' ]">
|
|
<use xlink:href="#play"></use>
|
|
</svg>
|
|
<svg :class="[ playing ? 'block' : 'hidden', 'w-4 h-4 md:w-6 md:h-6' ]">
|
|
<use xlink:href="#pause"></use>
|
|
</svg>
|
|
</button>
|
|
<button :class="[ currentSong?.id !== entity.collection_medias[0].id ? '' : 'hidden', 'default' ]">
|
|
<svg class="w-4 h-4 md:w-6 md:h-6">
|
|
<use xlink:href="#play"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-6 flex flex-col text-white" v-show="playlist_id === feed_id">
|
|
<span class="text-xs md:text-base text-gray font-semibold truncate">{{ currentSong.name }}</span>
|
|
<span class="text-xs md:text-sm text-gray-light truncate">{{ seek }}</span>
|
|
</div>
|
|
<div class="col-span-6 flex flex-col text-white" v-show="playlist_id !== feed_id">
|
|
<span class="text-xs md:text-base text-gray font-semibold truncate">{{entity.collection_medias[0].name}}</span>
|
|
<span class="text-xs md:text-sm text-gray-light truncate">{{entity.collection_medias[0].time}}</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<feed-footer-misc
|
|
:is_like="entity.liked"
|
|
:likes="entity.likes"
|
|
:comments="entity.comments"
|
|
@like-feed="likeFeed"
|
|
/>
|
|
|
|
<div class="relative overflow-hidden">
|
|
<feed-preview class="w-full h-36 md:h-72 object-cover" type="music" :source='entity.preview' />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { mapActions, mapState, mapGetters } from "vuex";
|
|
import FeedFooterMisc from "@/Shared/Feed/FooterMisc";
|
|
import FeedHeaderMisc from "@/Shared/Feed/HeaderMisc";
|
|
import FeedPreview from "@/Shared/Feed/FeedPreview";
|
|
export default {
|
|
components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview },
|
|
emits: ["likeFeed"],
|
|
props: {
|
|
entity: Object,
|
|
user: Object,
|
|
feed_id: Number,
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(["playing"]),
|
|
...mapState({
|
|
seek: (state) => state.player.seek,
|
|
playlist_id: (state) => state.player.playlist_id,
|
|
currentSong: (state) => state.player.currentSong,
|
|
}),
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(["toggleAudio", "newCurrentPlaylist"]),
|
|
startPlay(music) {
|
|
if (this.currentSong?.id === music.id) {
|
|
this.toggleAudio();
|
|
return;
|
|
}
|
|
this.newCurrentPlaylist([this.entity.collection_medias[0], this.entity.collection_medias, this.feed_id]);
|
|
},
|
|
|
|
likeFeed() {
|
|
this.$emit("likeFeed");
|
|
},
|
|
},
|
|
};
|
|
</script>
|