2024-04-04 22:20:42 +00:00
|
|
|
<template>
|
|
|
|
<aside
|
|
|
|
:class="{ 'showing-pane': activeTab }"
|
|
|
|
class="fixed sm:relative top-0 w-screen md:w-auto flex flex-col md:flex-row-reverse z-[2] text-k-text-secondary"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
class="controls flex md:flex-col justify-between items-center md:w-[64px] md:py-6 tw:px-0
|
|
|
|
bg-black/5 md:border-l border-solid md:border-l-white/5 md:border-b-0 md:shadow-none
|
|
|
|
z-[2] w-screen flex-row border-b border-b-white/5 border-l-0 shadow-xl
|
|
|
|
py-0 px-6 h-k-header-height"
|
|
|
|
>
|
|
|
|
<div class="btn-group">
|
|
|
|
<SidebarMenuToggleButton />
|
2024-05-19 05:49:42 +00:00
|
|
|
<ExtraDrawerTabHeader v-if="songPlaying" v-model="activeTab" />
|
2024-04-04 22:20:42 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group">
|
|
|
|
<AboutKoelButton />
|
|
|
|
<LogoutButton />
|
|
|
|
<ProfileAvatar @click="onProfileLinkClick" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2024-05-19 05:49:42 +00:00
|
|
|
<div v-if="songPlaying" v-show="activeTab" class="panes py-8 px-6 overflow-auto bg-k-bg-secondary">
|
2024-04-04 22:20:42 +00:00
|
|
|
<div
|
|
|
|
v-show="activeTab === 'Lyrics'"
|
|
|
|
id="extraPanelLyrics"
|
|
|
|
aria-labelledby="extraTabLyrics"
|
|
|
|
role="tabpanel"
|
|
|
|
tabindex="0"
|
|
|
|
>
|
2024-06-07 12:22:36 +00:00
|
|
|
<LyricsPane v-if="playable" :song="playable" />
|
2024-04-04 22:20:42 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
v-show="activeTab === 'Artist'"
|
|
|
|
id="extraPanelArtist"
|
|
|
|
aria-labelledby="extraTabArtist"
|
|
|
|
role="tabpanel"
|
|
|
|
tabindex="0"
|
|
|
|
>
|
|
|
|
<ArtistInfo v-if="artist" :artist="artist" mode="aside" />
|
|
|
|
<span v-else>Loading…</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
v-show="activeTab === 'Album'"
|
|
|
|
id="extraPanelAlbum"
|
|
|
|
aria-labelledby="extraTabAlbum"
|
|
|
|
role="tabpanel"
|
|
|
|
tabindex="0"
|
|
|
|
>
|
|
|
|
<AlbumInfo v-if="album" :album="album" mode="aside" />
|
|
|
|
<span v-else>Loading…</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
v-show="activeTab === 'YouTube'"
|
|
|
|
id="extraPanelYouTube"
|
|
|
|
aria-labelledby="extraTabYouTube"
|
2024-04-23 21:01:27 +00:00
|
|
|
data-testid="extra-drawer-youtube"
|
2024-04-04 22:20:42 +00:00
|
|
|
role="tabpanel"
|
|
|
|
tabindex="0"
|
|
|
|
>
|
2024-06-07 12:22:36 +00:00
|
|
|
<YouTubeVideoList v-if="shouldShowYouTubeTab && playable" :song="playable" />
|
2024-04-04 22:20:42 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import isMobile from 'ismobilejs'
|
2024-06-02 17:15:31 +00:00
|
|
|
import { computed, defineAsyncComponent, onMounted, ref, Ref, watch } from 'vue'
|
2024-04-04 22:20:42 +00:00
|
|
|
import { albumStore, artistStore, preferenceStore } from '@/stores'
|
2024-04-23 11:24:29 +00:00
|
|
|
import { useErrorHandler, useThirdPartyServices } from '@/composables'
|
2024-05-19 05:49:42 +00:00
|
|
|
import { isSong, requireInjection } from '@/utils'
|
|
|
|
import { CurrentPlayableKey } from '@/symbols'
|
2024-04-04 22:20:42 +00:00
|
|
|
|
|
|
|
import ProfileAvatar from '@/components/ui/ProfileAvatar.vue'
|
|
|
|
import SidebarMenuToggleButton from '@/components/ui/SidebarMenuToggleButton.vue'
|
|
|
|
import AboutKoelButton from '@/components/layout/main-wrapper/extra-drawer/AboutKoelButton.vue'
|
|
|
|
import LogoutButton from '@/components/layout/main-wrapper/extra-drawer/LogoutButton.vue'
|
|
|
|
|
|
|
|
const LyricsPane = defineAsyncComponent(() => import('@/components/ui/LyricsPane.vue'))
|
|
|
|
const ArtistInfo = defineAsyncComponent(() => import('@/components/artist/ArtistInfo.vue'))
|
|
|
|
const AlbumInfo = defineAsyncComponent(() => import('@/components/album/AlbumInfo.vue'))
|
|
|
|
const YouTubeVideoList = defineAsyncComponent(() => import('@/components/ui/youtube/YouTubeVideoList.vue'))
|
|
|
|
const ExtraDrawerTabHeader = defineAsyncComponent(() => import('./ExtraDrawerTabHeader.vue'))
|
|
|
|
|
|
|
|
const { useYouTube } = useThirdPartyServices()
|
|
|
|
|
2024-06-02 17:15:31 +00:00
|
|
|
const playable = requireInjection(CurrentPlayableKey, ref(undefined)) as Ref<Song | undefined>
|
2024-04-04 22:20:42 +00:00
|
|
|
const activeTab = ref<ExtraPanelTab | null>(null)
|
|
|
|
|
|
|
|
const artist = ref<Artist>()
|
|
|
|
const album = ref<Album>()
|
|
|
|
|
2024-05-19 05:49:42 +00:00
|
|
|
const songPlaying = computed(() => playable.value && isSong(playable.value))
|
|
|
|
const shouldShowYouTubeTab = computed(() => useYouTube && songPlaying.value)
|
|
|
|
|
|
|
|
const fetchSongInfo = async (song: Song) => {
|
|
|
|
playable.value = song
|
2024-04-04 22:20:42 +00:00
|
|
|
artist.value = undefined
|
|
|
|
album.value = undefined
|
|
|
|
|
|
|
|
try {
|
2024-05-19 05:49:42 +00:00
|
|
|
artist.value = await artistStore.resolve(song.artist_id)
|
|
|
|
album.value = await albumStore.resolve(song.album_id)
|
2024-04-23 11:24:29 +00:00
|
|
|
} catch (error: unknown) {
|
|
|
|
useErrorHandler().handleHttpError(error)
|
2024-04-04 22:20:42 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-05-19 05:49:42 +00:00
|
|
|
watch(playable, song => {
|
|
|
|
if (!song || !isSong(song)) return
|
|
|
|
fetchSongInfo(song)
|
|
|
|
}, { immediate: true })
|
|
|
|
|
2024-04-04 22:20:42 +00:00
|
|
|
watch(activeTab, tab => (preferenceStore.active_extra_panel_tab = tab))
|
|
|
|
|
|
|
|
const onProfileLinkClick = () => isMobile.any && (activeTab.value = null)
|
|
|
|
|
|
|
|
onMounted(() => isMobile.any || (activeTab.value = preferenceStore.active_extra_panel_tab))
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="postcss" scoped>
|
|
|
|
@import '@/../css/partials/mixins.pcss';
|
|
|
|
|
|
|
|
@tailwind utilities;
|
|
|
|
|
|
|
|
@layer utilities {
|
|
|
|
.btn-group {
|
|
|
|
@apply flex md:flex-col justify-between items-center gap-1 md:gap-3
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
aside {
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
@mixin themed-background;
|
|
|
|
|
|
|
|
&.showing-pane {
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.panes {
|
|
|
|
@apply no-hover:overflow-y-auto w-k-extra-drawer-width;
|
|
|
|
|
|
|
|
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
width: 100%;
|
|
|
|
height: calc(100vh - var(--header-height) - var(--footer-height));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|