koel/resources/assets/js/components/song/context-menu.vue
2022-04-19 21:26:06 +02:00

123 lines
3.6 KiB
Vue

<template>
<BaseContextMenu extra-class="song-menu" ref="base" data-testid="song-context-menu">
<template v-if="onlyOneSongSelected">
<li class="playback" @click.stop.prevent="doPlayback">
<span v-if="firstSongPlaying">Pause</span>
<span v-else>Play</span>
</li>
<li class="go-to-album" @click="viewAlbumDetails(songs[0].album)">Go to Album</li>
<li class="go-to-artist" @click="viewArtistDetails(songs[0].artist)">Go to Artist</li>
</template>
<li class="has-sub">
Add To
<ul class="menu submenu menu-add-to">
<li class="after-current" @click="queueSongsAfterCurrent">After Current Song</li>
<li class="bottom-queue" @click="queueSongsToBottom">Bottom of Queue</li>
<li class="top-queue" @click="queueSongsToTop">Top of Queue</li>
<li class="separator"></li>
<li class="favorite" @click="addSongsToFavorite">Favorites</li>
<li class="separator" v-if="normalPlaylists.length"></li>
<li
class="playlist"
v-for="p in normalPlaylists"
:key="p.id"
@click="addSongsToExistingPlaylist(p)"
>{{ p.name }}
</li>
</ul>
</li>
<li class="open-edit-form" v-if="isAdmin" @click="openEditForm">Edit</li>
<li class="download" v-if="sharedState.allowDownload" @click="download">Download</li>
<li
class="copy-url"
v-if="copyable && onlyOneSongSelected"
@click="copyUrl"
>
Copy Shareable URL
</li>
</BaseContextMenu>
</template>
<script lang="ts" setup>
import { computed, reactive, toRefs } from 'vue'
import { copyText, eventBus, isClipboardSupported as copyable } from '@/utils'
import { playlistStore, queueStore, sharedStore, songStore, userStore } from '@/stores'
import { download as downloadService, playback } from '@/services'
import router from '@/router'
import { useContextMenu, useSongMenuMethods } from '@/composables'
const props = defineProps<{ songs: Song[] }>()
const { songs } = toRefs(props)
const {
base,
BaseContextMenu,
open,
close
} = useContextMenu()
const {
queueSongsAfterCurrent,
queueSongsToBottom,
queueSongsToTop,
addSongsToFavorite,
addSongsToExistingPlaylist
} = useSongMenuMethods(songs.value, close)
const playlistState = reactive(playlistStore.state)
const sharedState = reactive(sharedStore.state)
const userState = reactive(userStore.state)
const onlyOneSongSelected = computed(() => songs.value.length === 1)
const firstSongPlaying = computed(() => songs.value.length ? songs.value[0].playbackState === 'Playing' : false)
const normalPlaylists = computed(() => playlistState.playlists.filter(playlist => !playlist.is_smart))
const isAdmin = computed(() => userState.current.is_admin)
const doPlayback = () => {
if (!songs.value.length) return
switch (songs.value[0].playbackState) {
case 'Playing':
playback.pause()
break
case 'Paused':
playback.resume()
break
default:
queueStore.contains(songs.value[0]) || queueStore.queueAfterCurrent(songs.value[0])
playback.play(songs.value[0])
break
}
close()
}
const openEditForm = () => {
songs.value.length && eventBus.emit('MODAL_SHOW_EDIT_SONG_FORM', songs)
close()
}
const viewAlbumDetails = (album: Album) => {
router.go(`album/${album.id}`)
close()
}
const viewArtistDetails = (artist: Artist) => {
router.go(`artist/${artist.id}`)
close()
}
const download = () => {
downloadService.fromSongs(songs.value)
close()
}
const copyUrl = () => {
copyText(songStore.getShareableUrl(songs.value[0]))
close()
}
defineExpose({ open, close })
</script>