2022-04-15 14:24:30 +00:00
|
|
|
<template>
|
2022-07-19 08:19:57 +00:00
|
|
|
<ContextMenuBase ref="base" data-testid="album-context-menu" extra-class="album-menu">
|
2022-04-15 14:24:30 +00:00
|
|
|
<template v-if="album">
|
2022-05-10 23:01:48 +00:00
|
|
|
<li data-testid="play" @click="play">Play All</li>
|
|
|
|
<li data-testid="shuffle" @click="shuffle">Shuffle All</li>
|
2022-04-15 14:24:30 +00:00
|
|
|
<li class="separator"></li>
|
2022-05-10 23:01:48 +00:00
|
|
|
<li data-testid="view-album" @click="viewAlbumDetails" v-if="isStandardAlbum">Go to Album</li>
|
|
|
|
<li data-testid="view-artist" @click="viewArtistDetails" v-if="isStandardArtist">Go to Artist</li>
|
2022-04-25 16:13:18 +00:00
|
|
|
<template v-if="isStandardAlbum && allowDownload">
|
2022-04-15 14:24:30 +00:00
|
|
|
<li class="separator"></li>
|
2022-05-10 23:01:48 +00:00
|
|
|
<li data-testid="download" @click="download">Download</li>
|
2022-04-15 14:24:30 +00:00
|
|
|
</template>
|
|
|
|
</template>
|
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>
|
2022-07-08 10:32:44 +00:00
|
|
|
import { computed, ref, toRef } from 'vue'
|
2022-06-10 10:47:46 +00:00
|
|
|
import { albumStore, artistStore, commonStore, songStore } from '@/stores'
|
2022-04-24 08:50:45 +00:00
|
|
|
import { downloadService, playbackService } from '@/services'
|
2022-04-15 17:00:08 +00:00
|
|
|
import { useContextMenu } from '@/composables'
|
2022-04-15 14:24:30 +00:00
|
|
|
import router from '@/router'
|
2022-07-08 10:32:44 +00:00
|
|
|
import { eventBus } from '@/utils'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-06-10 10:47:46 +00:00
|
|
|
const { context, base, ContextMenuBase, open, trigger } = useContextMenu()
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-07-08 10:32:44 +00:00
|
|
|
const album = ref<Album>()
|
2022-06-10 10:47:46 +00:00
|
|
|
const allowDownload = toRef(commonStore.state, 'allow_download')
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-06-10 10:47:46 +00:00
|
|
|
const isStandardAlbum = computed(() => !albumStore.isUnknown(album.value))
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
const isStandardArtist = computed(() => {
|
2022-06-10 10:47:46 +00:00
|
|
|
return !artistStore.isUnknown(album.value.artist_id) && !artistStore.isVarious(album.value.artist_id)
|
2022-04-15 17:00:08 +00:00
|
|
|
})
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-06-10 10:47:46 +00:00
|
|
|
const play = () => trigger(async () => playbackService.queueAndPlay(await songStore.fetchForAlbum(album.value)))
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-06-10 10:47:46 +00:00
|
|
|
const shuffle = () => {
|
|
|
|
trigger(async () => playbackService.queueAndPlay(await songStore.fetchForAlbum(album.value), true))
|
2022-04-15 17:00:08 +00:00
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-06-10 10:47:46 +00:00
|
|
|
const viewAlbumDetails = () => trigger(() => router.go(`album/${album.value.id}`))
|
|
|
|
const viewArtistDetails = () => trigger(() => router.go(`artist/${album.value.artist_id}`))
|
|
|
|
const download = () => trigger(() => downloadService.fromAlbum(album.value))
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-07-08 10:32:44 +00:00
|
|
|
eventBus.on('ALBUM_CONTEXT_MENU_REQUESTED', async (e: MouseEvent, _album: Album) => {
|
|
|
|
album.value = _album
|
|
|
|
open(e.pageY, e.pageX, { album })
|
|
|
|
})
|
2022-04-15 14:24:30 +00:00
|
|
|
</script>
|