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

resources/js/Shared/Overlay/ModalFeedMediaMusics.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="modal-media h-full">
+    <div class="flex items-center border-b border-indigo-100">
+      <div class="flex-shrink-0 mr-5">
+        <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-96 overflow-auto">
+      <div class="divide-y divide-indigo-100">
+        <div
+          @click.prevent="startPlay(media)"
+          v-for="media in medias"
+          :key="media.id"
+          :class="[
+            currentSong?.id === media.id
+              ? 'bg-indigo-200 bg-opacity-25'
+              : 'hover:bg-indigo-200 hover:bg-opacity-25',
+            'p-4 flex items-center space-x-4',
+          ]"
+        >
+          <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" @addAudio="likeAudio" :media_id='media.id' :liked='media.liked' />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { mapActions, mapState, mapGetters } from "vuex";
+import { Inertia } from "@inertiajs/inertia";
+import find from "lodash/find";
+
+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,
+    title: String,
+    preview: String,
+    feed_id: Number,
+  },
+
+  methods: {
+    ...mapActions(["toggleAudio", "newCurrentPlaylist", "skipToIndexByMusic"]),
+    startPlay(music) {
+      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]);
+    },
+
+    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;
+      }
+    },
+
+  },
+
+  computed: {
+    ...mapGetters(["playing"]),
+    ...mapState({
+      playlist_id: (state) => state.player.playlist_id,
+      seek: (state) => state.player.seek,
+      currentSong: (state) => state.player.currentSong,
+    }),
+  },
+};
+</script>