119 lines
3.5 KiB
Vue
Executable File
119 lines
3.5 KiB
Vue
Executable File
<template>
|
|
<div class="shadow-classic rounded-md bg-indigo-200 p-3 md:px-5 md:py-7">
|
|
<feed-header :entity="entity" :feed_id="feed_id"
|
|
:created_at="entity.created_at_humans" :user="user"
|
|
@onRemoveFeed="onRemoveFeed"
|
|
/>
|
|
<div class="mt-3 md:mt-6 feed-body" @click.stop="">
|
|
<div class="mb-3 md:mb-6 text-gray text-sm md:text-base">
|
|
<div @click.stop="">
|
|
<div class="flex items-start 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="entity.preview"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="text-base md:text-xl font-semibold text-gray pb-1">
|
|
{{ entity.title }}
|
|
</div>
|
|
<div v-if="entity.is_ads" class="prose-content"
|
|
v-html="entity.body"
|
|
>
|
|
</div>
|
|
<template v-else>
|
|
<feed-tags v-if="entity.tags.length" class="mb-1"
|
|
:tags="entity.tags"
|
|
/>
|
|
<div class="pb-2">
|
|
{{ entity.body }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<feed-paid-block
|
|
:is_paid="entity.is_paid"
|
|
:user_id="user.id"
|
|
:price="entity.price"
|
|
:feed_id="feed_id"
|
|
:paid_open="entity.paid_open"
|
|
@onReplaceFeed="onReplaceFeed"
|
|
/>
|
|
</div>
|
|
<div :class="[{
|
|
'grid-cols-2': countMediaContent > 1
|
|
}]" class="grid gap-1 md:gap-3 md:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]"
|
|
@click="addViewShow"
|
|
>
|
|
<div v-for="media in entity.collection_medias" :key="media.id"
|
|
class="aspect-w-16 aspect-h-9"
|
|
>
|
|
<video :src="media.url" :poster="entity.preview"
|
|
controls
|
|
></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<feed-footer
|
|
:likes="entity.likes"
|
|
:liked="entity.liked"
|
|
:comments="entity.comments"
|
|
:count="entity.views_count"
|
|
:ads="entity.is_ads"
|
|
@likeFeed="likeFeed"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FeedHeader from '@/Shared/FeedList/FeedHeader.vue'
|
|
import FeedFooter from '@/Shared/FeedList/FeedFooter.vue'
|
|
import FeedPaidBlock from '@/Shared/FeedList/FeedPaidBlock.vue'
|
|
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
|
|
import FeedTags from '@/Shared/Misc/FeedTags.vue'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
components: {
|
|
FeedHeader,
|
|
FeedFooter,
|
|
FeedPaidBlock,
|
|
FeedTags,
|
|
FeedPreview,
|
|
},
|
|
props: {
|
|
entity: Object,
|
|
user: Object,
|
|
feed_id: Number,
|
|
},
|
|
emits: ['likeFeed', 'onRemoveFeed'],
|
|
computed: {
|
|
countMediaContent() {
|
|
return this.entity.collection_medias.length
|
|
}
|
|
},
|
|
methods: {
|
|
addViewShow(){
|
|
axios
|
|
.post(route('add.view.feed', this.feed_id))
|
|
.then(({ data }) => {
|
|
data && this.entity.views_count++
|
|
})
|
|
},
|
|
onReplaceFeed(data) {
|
|
this.entity.collection_medias = data.collection
|
|
this.entity.preview = data.preview
|
|
this.entity.paid_open = 1
|
|
},
|
|
onRemoveFeed() {
|
|
this.$emit('onRemoveFeed', this.feed_id)
|
|
},
|
|
|
|
likeFeed() {
|
|
this.$emit('likeFeed')
|
|
},
|
|
},
|
|
}
|
|
</script>
|