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

resources/js/Shared/Feed/Musics.vue

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