41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<template>
|
|
<div class="player fixed left-0 z-50 w-full h-20"
|
|
:class="playerStore.currentTrack ? '-bottom-0 opacity-100' : '-bottom-32 opacity-0'">
|
|
<div class="flex items-center gap-3 p-2">
|
|
<NuxtLink v-if="playerStore.currentTrack" :to="`/track/${playerStore.currentTrack.id}`">
|
|
<img v-if="playerStore.getCurrentCoverUrl" :src="playerStore.getCurrentCoverUrl as string" alt="Current cover"
|
|
class="size-16 object-cover object-center rounded">
|
|
</NuxtLink>
|
|
<audio ref="audioRef" class="flex-1" controls />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import { usePlayerStore } from '~/store/player'
|
|
|
|
const playerStore = usePlayerStore()
|
|
const audioRef = ref<HTMLAudioElement | null>(null)
|
|
|
|
onMounted(() => {
|
|
if (audioRef.value) {
|
|
playerStore.attachAudio(audioRef.value)
|
|
audioRef.value.addEventListener('timeupdate', playerStore.updateTime)
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (audioRef.value) {
|
|
audioRef.value.removeEventListener('timeupdate', playerStore.updateTime)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.player {
|
|
transition: all 1s ease-in-out;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
</style>
|