74 lines
2.5 KiB
Vue
74 lines
2.5 KiB
Vue
<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>
|