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

resources/js/Shared/Tabs/AudioTabNow.vue

@@ -0,0 +1,71 @@
+<template>
+  <div data-simplebar class="max-h-72 overflow-auto ">
+    <div class="mt-2 divide-y divide-indigo-100">
+      <div
+        v-for="listsMusic in listsMusics"
+        :key="listsMusic.id"
+        :class="[
+          currentSong?.id === listsMusic.id
+            ? 'bg-indigo-300 bg-opacity-25'
+            : 'hover:bg-indigo-300 hover:bg-opacity-25',
+          'p-4 flex items-center space-x-4',
+        ]"
+        @click="toggleAudioLocal(listsMusic)"
+      >
+        <div class="flex">
+          <toggle-play-button :media_id="listsMusic.id" />
+        </div>
+        <div class="flex flex-1 text-sm text-gray-light">
+          {{ listsMusic.name }}
+        </div>
+        <div class="text-sm text-gray-light">
+          <span v-show="!listsMusic.playing">{{ listsMusic.time }}</span>
+          <span v-show="listsMusic.playing">{{ seek }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+import TogglePlayButton from '@/Shared/Misc/TogglePlayButton.vue'
+
+export default {
+    components: {
+        TogglePlayButton
+    },
+
+    data() {
+        return {
+
+        }
+    },
+    created(){
+        //console.log('loaded - now');
+    },
+
+    computed: {
+    //...mapGetters(["playing"]),
+        ...mapState({
+            seek: (state) => state.player.seek,
+            currentSong: (state) => state.player.currentSong,
+            listsMusics: (state) => state.player.playlist,
+        }),
+    },
+
+    methods: {
+        ...mapActions([
+            'toggleAudio',
+            'skipToIndexByMusic',
+        ]),
+        toggleAudioLocal(music){
+            if (this.currentSong?.id === music.id) {
+                this.toggleAudio()
+                return
+            }
+            this.skipToIndexByMusic(music)
+        },
+    },
+}
+</script>