yeah

appOLDD/components/Player.vue

@@ -0,0 +1,40 @@
+<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>