Последняя версия с сервера прошлого разработчика

resources/js/Shared/FeedList/Videos.vue

@@ -0,0 +1,118 @@
+<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>