Astrian/msr-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(TrackItem): add favourites functionality to track item component

Browse Source
This commit is contained in:
Astrian Zheng 2025-05-27 22:07:43 +10:00
parent 6a5d6369fa
commit ede6eef00f
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/TrackItem.vue
View File

@ -3,9 +3,11 @@ import { artistsOrganize } from '../utils'
import { ref } from 'vue' import { ref } from 'vue'
import { usePlayQueueStore } from '../stores/usePlayQueueStore' import { usePlayQueueStore } from '../stores/usePlayQueueStore'
import { useToast } from 'vue-toast-notification' import { useToast } from 'vue-toast-notification'
import { useFavourites } from '../stores/useFavourites'
import QueueAddIcon from '../assets/icons/queueadd.vue' import QueueAddIcon from '../assets/icons/queueadd.vue'
import StarEmptyIcon from '../assets/icons/starempty.vue' import StarEmptyIcon from '../assets/icons/starempty.vue'
import StarFilledIcon from '../assets/icons/starfilled.vue'
const props = defineProps<{ const props = defineProps<{
album?: Album, album?: Album,
@ -18,6 +20,7 @@ const hover = ref(false)
const playQueueStore = usePlayQueueStore() const playQueueStore = usePlayQueueStore()
const toast = useToast() const toast = useToast()
const favourites = useFavourites()
function appendToQueue() { function appendToQueue() {
console.log('aaa') console.log('aaa')
@ -55,9 +58,12 @@ function appendToQueue() {
class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95"> class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95">
<QueueAddIcon :size="4" /> <QueueAddIcon :size="4" />
</button> </button>
<button @click.stop="" <button @click.stop="favourites.toggleFavourite({
class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95"> song: track,
<StarEmptyIcon :size="4" /> album: album,
})" class="hover:scale-110 transition-all text-white/50 hover:text-white active:text-white/40 active:scale-95">
<StarFilledIcon v-if="favourites.isFavourite(track.cid)" :size="4" />
<StarEmptyIcon v-else :size="4" />
</button> </button>
</div> </div>