koel/resources/assets/js/components/playlist/PlaylistContextMenu.vue

77 lines
2.4 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<ContextMenuBase ref="base">
<li @click="play">Play</li>
<li @click="shuffle">Shuffle</li>
<li @click="addToQueue">Add to Queue</li>
2024-01-24 22:39:47 +00:00
<template v-if="canShowCollaboration">
2024-03-19 22:48:12 +00:00
<li class="separator" />
2024-01-24 22:39:47 +00:00
<li @click="showCollaborationModal">Collaborate</li>
2024-03-19 22:48:12 +00:00
<li class="separator" />
2024-01-18 11:13:05 +00:00
</template>
2024-04-04 22:20:42 +00:00
<li v-if="canEditPlaylist" @click="edit">Edit</li>
<li v-if="canEditPlaylist" @click="destroy">Delete</li>
2022-04-24 08:29:14 +00:00
</ContextMenuBase>
2022-04-15 14:24:30 +00:00
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2024-01-18 11:13:05 +00:00
import { computed, ref } from 'vue'
2024-04-04 22:20:42 +00:00
import { eventBus } from '@/utils'
2024-04-23 21:01:27 +00:00
import { useContextMenu, useKoelPlus, useMessageToaster, usePolicies, useRouter } from '@/composables'
2024-04-04 22:20:42 +00:00
import { playbackService } from '@/services'
2024-04-23 21:01:27 +00:00
import { queueStore, songStore } from '@/stores'
2022-04-15 14:24:30 +00:00
2022-12-02 16:17:37 +00:00
const { base, ContextMenuBase, open, trigger } = useContextMenu()
const { go } = useRouter()
const { toastWarning, toastSuccess } = useMessageToaster()
2024-01-18 11:13:05 +00:00
const { isPlus } = useKoelPlus()
2024-04-04 22:20:42 +00:00
const { currentUserCan } = usePolicies()
const playlist = ref<Playlist>()
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
const canEditPlaylist = computed(() => currentUserCan.editPlaylist(playlist.value!))
2024-01-24 22:39:47 +00:00
const canShowCollaboration = computed(() => isPlus.value && !playlist.value?.is_smart)
2024-01-18 11:13:05 +00:00
const edit = () => trigger(() => eventBus.emit('MODAL_SHOW_EDIT_PLAYLIST_FORM', playlist.value!))
const destroy = () => trigger(() => eventBus.emit('PLAYLIST_DELETE', playlist.value!))
const play = () => trigger(async () => {
const songs = await songStore.fetchForPlaylist(playlist.value!)
if (songs.length) {
playbackService.queueAndPlay(songs)
go('queue')
} else {
toastWarning('The playlist is empty.')
}
})
const shuffle = () => trigger(async () => {
const songs = await songStore.fetchForPlaylist(playlist.value!)
if (songs.length) {
playbackService.queueAndPlay(songs, true)
go('queue')
} else {
toastWarning('The playlist is empty.')
}
})
const addToQueue = () => trigger(async () => {
const songs = await songStore.fetchForPlaylist(playlist.value!)
if (songs.length) {
queueStore.queueAfterCurrent(songs)
toastSuccess('Playlist added to queue.')
} else {
toastWarning('The playlist is empty.')
}
})
2024-01-24 22:39:47 +00:00
const showCollaborationModal = () => trigger(() => eventBus.emit('MODAL_SHOW_PLAYLIST_COLLABORATION', playlist.value!))
2024-01-18 11:13:05 +00:00
2024-01-24 22:39:47 +00:00
eventBus.on('PLAYLIST_CONTEXT_MENU_REQUESTED', async ({ pageX, pageY }, _playlist) => {
playlist.value = _playlist
2024-01-24 22:39:47 +00:00
await open(pageY, pageX)
})
2022-04-15 14:24:30 +00:00
</script>