Initial commit

resources/js/Shared/Tabs/AudioTabLoaded.vue

@@ -0,0 +1,73 @@
+<template>
+<div class="mt-2 p-2 lg:p-4">
+    <div class="relative">
+        <div class="absolute inset-y-0 left-3 flex items-center z-10">
+            <svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" > <path fill-rule="evenodd" clip-rule="evenodd" d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"/> </svg>
+        </div>
+        <input class=" relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 " placeholder="Поиск музыки" type="search"/>
+    </div>
+</div>
+
+<div data-simplebar class="max-h-72 overflow-auto">
+<div class="mt-2 divide-y divide-indigo-100">
+    <div
+    @click="toggleAudioLocal(listsMusic)"
+        v-for="listsMusic in listsMusics"
+        :key="listsMusic.id" class="
+        hover:bg-indigo-300 hover:bg-opacity-25 p-4 flex items-center space-x-4"
+    >
+        <div class="flex">
+            <button class="default">
+                <svg class="w-6 h-6">
+                    <use v-show="!listsMusic.playing" xlink:href="#play"></use>
+                    <use v-show="listsMusic.playing" xlink:href="#pause"></use>
+                </svg>
+            </button>
+        </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, mapGetters, mapState } from "vuex";
+export default {
+  components: {},
+
+  data() {
+    return {};
+  },
+  mounted() {
+    this.initLoadedPlaylist();
+  },
+
+  computed: {
+    ...mapGetters(["tab_now"]),
+    ...mapState({
+      seek: (state) => state.player.seek,
+      currentSong: (state) => state.player.currentSong,
+      listsMusics: (state) => state.player.playlist,
+    }),
+  },
+
+  methods: {
+    ...mapActions(["initLoadedPlaylist", "toggleAudio", "skipToIndexByMusic"]),
+    toggleAudioLocal(music) {
+      if (this.tab_now && this.currentSong?.id === music.id) {
+        this.toggleAudio();
+        return;
+      }
+      this.skipToIndexByMusic(music);
+    },
+  },
+};
+</script>