127 lines
4.3 KiB
Vue
Executable File
127 lines
4.3 KiB
Vue
Executable File
<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 class="col-span-1 flex mr-3 text-white" @click.stop>
|
|
<div class="inline-block transition-colors hover:text-orange" @click.prevent="startPlay(first_entity)">
|
|
<button :class="[ currentSong?.id === first_entity.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 !== first_entity.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 v-show="playlist_id === feed_id" class="col-span-6 flex flex-col text-white">
|
|
<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 v-show="playlist_id !== feed_id" class="col-span-6 flex flex-col text-white">
|
|
<span class="text-xs md:text-base text-gray font-semibold truncate">{{ first_entity.name }}</span>
|
|
<span class="text-xs md:text-sm text-gray-light truncate">{{ first_entity.time }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<feed-footer-misc
|
|
v-if="entity.status == 1"
|
|
:is_like="entity.liked"
|
|
:likes="entity.likes"
|
|
:comments="entity.comments"
|
|
:count="entity.views_count"
|
|
:ads="entity.is_ads"
|
|
@like-feed="likeFeed"
|
|
/>
|
|
<feed-footer-banned v-else />
|
|
|
|
<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.vue'
|
|
import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
|
|
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
|
|
import FeedFooterBanned from '@/Shared/Feed/FooterBanned.vue'
|
|
import axios from 'axios'
|
|
export default {
|
|
components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview, FeedFooterBanned },
|
|
props: {
|
|
entity: Object,
|
|
user: Object,
|
|
feed_id: Number,
|
|
},
|
|
emits: ['likeFeed'],
|
|
computed: {
|
|
first_entity() {
|
|
const media = this.entity.collection_medias
|
|
if (
|
|
this.playlist_id === this.feed_id &&
|
|
typeof media[this.indexPlaylist] !== 'undefined'
|
|
) {
|
|
return media[this.indexPlaylist]
|
|
}
|
|
return media[0]
|
|
},
|
|
...mapGetters(['playing']),
|
|
...mapState({
|
|
seek: (state) => state.player.seek,
|
|
indexPlaylist: (state) => state.player.index,
|
|
playlist_id: (state) => state.player.playlist_id,
|
|
currentSong: (state) => state.player.currentSong,
|
|
}),
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(['toggleAudio', 'newCurrentPlaylist']),
|
|
startPlay(music) {
|
|
this.addViewShow()
|
|
if (this.currentSong?.id === music.id) {
|
|
this.toggleAudio()
|
|
return
|
|
}
|
|
this.newCurrentPlaylist([
|
|
this.first_entity,
|
|
this.entity.collection_medias,
|
|
this.feed_id,
|
|
])
|
|
|
|
},
|
|
|
|
addViewShow() {
|
|
axios
|
|
.post(route('add.view.feed', this.feed_id))
|
|
.then(({ data }) => {
|
|
data && this.entity.views_count++
|
|
})
|
|
},
|
|
|
|
likeFeed() {
|
|
this.$emit('likeFeed')
|
|
},
|
|
},
|
|
}
|
|
</script>
|