114 lines
4.1 KiB
Vue
Executable File
114 lines
4.1 KiB
Vue
Executable File
<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
|
|
v-for="listsMusic in listsLoadedMusicsState"
|
|
:ref="el => { if (el && listsMusic.id === lastElementIDGet) loadMore = el }"
|
|
:key="listsMusic.id"
|
|
class="
|
|
hover:bg-indigo-300 hover:bg-opacity-25 p-4 flex items-center space-x-4" @click="toggleAudioLocal(listsMusic)"
|
|
>
|
|
<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">{{ seekState }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { useStore } from 'vuex'
|
|
|
|
export default {
|
|
setup() {
|
|
const store = useStore()
|
|
const containerRef = ref(null)
|
|
let observer = null
|
|
|
|
const playingGet = computed(() => store.getters['playing'])
|
|
const lastElementIDGet = computed(() => store.getters['lastLoadedID'])
|
|
|
|
const seekState = computed(() => store.state.player.seek)
|
|
const currentSongState = computed(() => store.state.player.currentSong)
|
|
const listsLoadedMusicsState = computed(
|
|
() => store.state.player.my_playlist
|
|
)
|
|
|
|
const toggleAudioLocal = (music) => {
|
|
if (playingGet.value || currentSongState.value?.id === music.id) {
|
|
store.dispatch('toggleAudio')
|
|
return
|
|
}
|
|
store.dispatch('skipToIndexByMusic', music)
|
|
}
|
|
onMounted(() => {
|
|
store.dispatch('initLoadedPlaylist').then(() => {
|
|
createObserver()
|
|
})
|
|
})
|
|
|
|
const createObserver = () => {
|
|
if (containerRef.value) {
|
|
const intersectionCallback = (entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
observer.unobserve(entry.target)
|
|
store.dispatch('paginationLoadedPlaylist').then((exist) => {
|
|
if (exist) {
|
|
observer?.disconnect()
|
|
createObserver()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
observer = new IntersectionObserver(intersectionCallback, {})
|
|
observer.observe(containerRef.value)
|
|
}
|
|
}
|
|
|
|
onUnmounted(() => {
|
|
observer?.disconnect()
|
|
})
|
|
|
|
return {
|
|
loadMore: containerRef,
|
|
toggleAudioLocal,
|
|
listsLoadedMusicsState,
|
|
seekState,
|
|
lastElementIDGet,
|
|
}
|
|
},
|
|
}
|
|
</script>
|