mirror of
https://github.com/koel/koel
synced 2024-12-25 12:03:06 +00:00
47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<template>
|
|
<ContextMenuBase ref="base">
|
|
<template v-if="folder">
|
|
<template v-if="playable">
|
|
<li @click="play">Play All</li>
|
|
<li @click="shuffle">Shuffle All</li>
|
|
<li class="separator"/>
|
|
</template>
|
|
<li @click="rename">Rename</li>
|
|
<li @click="destroy">Delete</li>
|
|
</template>
|
|
</ContextMenuBase>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
import { eventBus } from '@/utils'
|
|
import { playlistStore, songStore } from '@/stores'
|
|
import { playbackService } from '@/services'
|
|
import { useContextMenu, useRouter } from '@/composables'
|
|
|
|
const { go } = useRouter()
|
|
const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
|
|
|
|
const folder = ref<PlaylistFolder>()
|
|
|
|
const playlistsInFolder = computed(() => folder.value ? playlistStore.byFolder(folder.value) : [])
|
|
const playable = computed(() => playlistsInFolder.value.length > 0)
|
|
|
|
const play = () => trigger(async () => {
|
|
playbackService.queueAndPlay(await songStore.fetchForPlaylistFolder(folder.value!))
|
|
go('queue')
|
|
})
|
|
|
|
const shuffle = () => trigger(async () => {
|
|
playbackService.queueAndPlay(await songStore.fetchForPlaylistFolder(folder.value!), true)
|
|
go('queue')
|
|
})
|
|
|
|
const rename = () => trigger(() => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FOLDER_FORM', folder.value))
|
|
const destroy = () => trigger(() => eventBus.emit('PLAYLIST_FOLDER_DELETE', folder.value))
|
|
|
|
eventBus.on('PLAYLIST_FOLDER_CONTEXT_MENU_REQUESTED', async (e, _folder) => {
|
|
folder.value = _folder
|
|
await open(e.pageY, e.pageX, { folder })
|
|
})
|
|
</script>
|