evilSpins v1

app/components/Player.vue

@@ -0,0 +1,45 @@
+<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">
+      <img
+        v-if="playerStore.getCurrentCoverUrl"
+        :src="playerStore.getCurrentCoverUrl as string"
+        alt="Current cover"
+        class="size-16 object-cover object-center rounded"
+      >
+      <toggleFavorite v-if="playerStore.currentTrack" :track="playerStore.currentTrack" />
+      <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>