Astrian Zheng
dcf13b2f07
Replace passive resource checking on playlist item mount with active checking during playback and preload operations. This improves performance by reducing unnecessary network requests and ensures resources are validated only when needed. Changes: - Create songResourceChecker utility for centralized resource validation - Remove resource checking from PlayListItem component - Add resource validation in Player component before playback - Add resource validation in usePlayQueueStore before preload - Maintain data consistency between play queue and favorites 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { artistsOrganize } from '../utils'
|
|
import { ref } from 'vue'
|
|
import { useFavourites } from '../stores/useFavourites'
|
|
|
|
import StarSlashIcon from '../assets/icons/starslash.vue'
|
|
|
|
const favourites = useFavourites()
|
|
|
|
const hover = ref(false)
|
|
|
|
const props = defineProps<{
|
|
item: QueueItem
|
|
index: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'play', index: number): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<button class="text-left flex p-2 hover:bg-neutral-400/10 odd:bg-neutral-400/5 rounded-md transition-all"
|
|
@mouseenter="hover = true" @mouseleave="hover = false">
|
|
<div class="items-center flex flex-auto w-0" @click="emit('play', index)">
|
|
<img :src="item.album?.coverUrl" class="w-12 h-12 rounded-md object-cover inline-block mr-2" />
|
|
<div>
|
|
<div class="text-white text-base font-medium">{{ item.song.name }}</div>
|
|
<div class="text-white/50 text-sm">{{ item.album?.name }} - {{ artistsOrganize(item.song.artists ?? []) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex" v-if="hover">
|
|
<button @click.stop="() => {
|
|
favourites.toggleFavourite(item)
|
|
}">
|
|
<StarSlashIcon
|
|
class="text-white/80 hover:text-white active:text-white/75 hover:scale-110 active:scale-95 transition-all"
|
|
:size="4" />
|
|
</button>
|
|
</div>
|
|
</button>
|
|
</template> |