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

resources/js/Shared/FeedList/FeedMusicBody.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="">
+    <div class="flex items-center 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="preview"
+        />
+      </div>
+      <div class="flex flex-col">
+        <span class="text-base md:text-xl font-semibold text-gray">{{ title }}</span>
+      </div>
+    </div>
+    <div data-simplebar class="max-h-72 overflow-auto">
+      <div class="divide-y divide-indigo-100" @click.stop="">
+        <div
+          v-for="media in medias"
+          :key="media.id" :class="[currentSong?.id === media.id ?
+                                     'bg-indigo-300 bg-opacity-25' :
+                                     'hover:bg-indigo-300 hover:bg-opacity-25',
+                                   'p-4 flex items-center space-x-4']"
+          @click.prevent="startPlay(media)"
+        >
+          <div class="flex">
+            <toggle-play-button :media_id="media.id" />
+          </div>
+          <div class="flex-1 text-sm text-gray-light">
+            {{ media.name }}
+          </div>
+          <div class="text-sm text-gray-light">
+            <div v-show="currentSong?.id === media.id">
+              {{ seek }}
+            </div>
+            <div v-show="currentSong?.id !== media.id">
+              {{ media.time }}
+            </div>
+          </div>
+          <music-add-count v-if="$page.props.auth.user" :media_id="media.id"
+                           :liked="media.liked" @addAudio="likeAudio"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState, mapGetters } from 'vuex'
+import find from 'lodash/find'
+import { Inertia } from '@inertiajs/inertia'
+
+import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
+import TogglePlayButton from '@/Shared/Misc/TogglePlayButton.vue'
+import MusicAddCount from '@/Shared/Misc/MusicAddCount.vue'
+
+export default {
+    components: {
+        FeedPreview,
+        TogglePlayButton,
+        MusicAddCount,
+    },
+    props: {
+        medias: Array,
+        feed_id: Number,
+        title: String,
+        preview: String,
+    },
+    emits: ['trackClick'],
+    computed: {
+        ...mapGetters(['playing']),
+        ...mapState({
+            playlist_id: (state) => state.player.playlist_id,
+            seek: (state) => state.player.seek,
+            currentSong: (state) => state.player.currentSong,
+        }),
+    },
+
+    methods: {
+        likeAudio(media_id) {
+            Inertia.post(
+                route('feed.audio.like', media_id),
+                {},
+                {
+                    preserveScroll: true,
+                    preserveState: true,
+                }
+            )
+            let media = find(this.medias, (item) => item.id === media_id)
+            if(media){
+                media.liked = !media.liked
+            }
+        },
+        ...mapActions(['toggleAudio', 'newCurrentPlaylist', 'skipToIndexByMusic']),
+        startPlay(music) {
+            this.$emit('trackClick')
+            if (this.currentSong?.id === music.id) {
+                this.toggleAudio()
+                return
+            }
+            //   if (this.playlist_id === this.feed_id) {
+            //     this.skipToIndexByMusic(music);
+            //     return;
+            //   }
+            this.newCurrentPlaylist([music, this.medias, this.feed_id])
+
+        },
+    },
+
+}
+</script>