2022-04-15 14:24:30 +00:00
|
|
|
<template>
|
2022-07-08 14:53:04 +00:00
|
|
|
<div
|
2022-06-10 10:47:46 +00:00
|
|
|
:class="{ active, available: matchedSong }"
|
|
|
|
:title="tooltip"
|
2024-04-23 21:01:27 +00:00
|
|
|
class="track-list-item flex flex-1 gap-1"
|
2022-06-10 10:47:46 +00:00
|
|
|
tabindex="0"
|
|
|
|
@click="play"
|
|
|
|
>
|
2024-04-04 22:20:42 +00:00
|
|
|
<span class="flex-1">{{ track.title }}</span>
|
2022-12-02 16:17:37 +00:00
|
|
|
<AppleMusicButton v-if="useAppleMusic && !matchedSong" :url="iTunesUrl" />
|
2024-04-04 22:20:42 +00:00
|
|
|
<span class="w-14 text-right opacity-50">{{ fmtLength }}</span>
|
2022-07-08 14:53:04 +00:00
|
|
|
</div>
|
2022-04-15 14:24:30 +00:00
|
|
|
</template>
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
<script lang="ts" setup>
|
2022-09-30 06:56:29 +00:00
|
|
|
import { computed, defineAsyncComponent, Ref, toRefs } from 'vue'
|
2022-04-30 14:05:02 +00:00
|
|
|
import { queueStore, songStore } from '@/stores'
|
2022-04-24 08:50:45 +00:00
|
|
|
import { authService, playbackService } from '@/services'
|
2022-04-30 14:05:02 +00:00
|
|
|
import { useThirdPartyServices } from '@/composables'
|
2022-10-31 16:16:09 +00:00
|
|
|
import { requireInjection, secondsToHis } from '@/utils'
|
2024-05-19 05:49:42 +00:00
|
|
|
import { PlayablesKey } from '@/symbols'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-05-06 08:44:10 +00:00
|
|
|
const AppleMusicButton = defineAsyncComponent(() => import('@/components/ui/AppleMusicButton.vue'))
|
|
|
|
|
2022-07-08 14:53:04 +00:00
|
|
|
const props = defineProps<{ album: Album, track: AlbumTrack }>()
|
|
|
|
const { album, track } = toRefs(props)
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-05-06 08:44:10 +00:00
|
|
|
const { useAppleMusic } = useThirdPartyServices()
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-05-19 05:49:42 +00:00
|
|
|
const songsToMatchAgainst = requireInjection<Ref<Song[]>>(PlayablesKey)
|
2022-06-10 10:47:46 +00:00
|
|
|
|
|
|
|
const matchedSong = computed(() => songStore.match(track.value.title, songsToMatchAgainst.value))
|
|
|
|
const tooltip = computed(() => matchedSong.value ? 'Click to play' : '')
|
2022-10-31 16:16:09 +00:00
|
|
|
const fmtLength = computed(() => secondsToHis(track.value.length))
|
2022-06-10 10:47:46 +00:00
|
|
|
|
|
|
|
const active = computed(() => matchedSong.value && matchedSong.value.playback_state !== 'Stopped')
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
const iTunesUrl = computed(() => {
|
2022-11-16 17:57:38 +00:00
|
|
|
return `${window.BASE_URL}itunes/song/${album.value.id}?q=${encodeURIComponent(track.value.title)}&api_token=${authService.getApiToken()}`
|
2022-04-15 17:00:08 +00:00
|
|
|
})
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-05-19 05:49:42 +00:00
|
|
|
const play = () => matchedSong.value && playbackService.play(matchedSong.value)
|
2022-04-15 14:24:30 +00:00
|
|
|
</script>
|
|
|
|
|
2024-04-04 20:13:35 +00:00
|
|
|
<style lang="postcss" scoped>
|
2022-07-08 14:53:04 +00:00
|
|
|
.track-list-item {
|
2022-06-10 10:47:46 +00:00
|
|
|
&:focus, &.active {
|
2022-04-15 14:24:30 +00:00
|
|
|
span.title {
|
2024-04-04 22:20:42 +00:00
|
|
|
@apply text-k-highlight;
|
2022-04-15 14:24:30 +00:00
|
|
|
}
|
|
|
|
}
|
2022-07-08 14:53:04 +00:00
|
|
|
|
|
|
|
&.available {
|
2024-04-04 22:20:42 +00:00
|
|
|
@apply cursor-pointer text-k-text-primary;
|
2022-07-08 14:53:04 +00:00
|
|
|
|
|
|
|
&:hover {
|
2024-04-04 22:20:42 +00:00
|
|
|
@apply text-k-highlight;
|
2022-07-08 14:53:04 +00:00
|
|
|
}
|
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
}
|
|
|
|
</style>
|