Refactor player store and add music player functionality

.vscode/settings.json

@@ -5,7 +5,7 @@
 
   // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
 

assets/playlist.ts

@@ -0,0 +1,21 @@
+const playlist = [{
+	title: 'Gone For Good [NCS Release]',
+	artist: 'Rival x Jim Yosef',
+	album: 'Gone For Good',
+	image: 'https://i1.sndcdn.com/artworks-NYilj4SeVtXHzrSH-fV9V5A-t500x500.jpg',
+	src: '/music/1.mp3',
+},
+{
+	title: 'Never Have I Felt This (VIP) [NCS Release]',
+	artist: 'Koven',
+	album: 'Gone For Good',
+	src: '/music/2.mp3',
+},
+{
+	title: 'RPM [NCS Release]',
+	artist: 'Joxion',
+	album: 'Gone For Good',
+	image: 'https://ncsmusic.s3.eu-west-1.amazonaws.com/tracks/000/001/562/325x325/rpm-1699405250-z0QO0QBzzN.jpg',
+	src: '/music/3.mp3',
+}];
+export default playlist;

components/common/PlayerControls.vue

@@ -8,7 +8,7 @@
     </button>
     <button
       :class="`PlayerControls-centerButton ${compact? 'compact':''}`"
-      @click="toggle"
+      @click="togglePlayer(player)"
     >
       <img
         v-if="!isPlaying"
@@ -29,25 +29,25 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {usePlayerStore} from '../../stores/playerStore';
 
 defineProps({
 	compact: {
 		type: Boolean,
 		default: false,
 	},
+	player: {
+		type: Object,
+		required: true,
+	},
 });
 
 const store = usePlayerStore();
 
 const {isPlaying} = storeToRefs(store);
 
-const {forward, backward} = store;
-
-const toggle = () => {
-	isPlaying.value = !isPlaying.value;
-};
+const {forward, backward, togglePlayer} = store;
 </script>
 
 <style scoped lang="postcss">

components/common/ProgressControl.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    ref="control"
+    class="progressControl"
+    @click="handleClick"
+  >
+    <div
+      class="progressControl-bar"
+      :style="`width: ${progress}%`"
+    >
+      <div
+        class="progressControl-bar-dot"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {usePlayerStore} from '#imports';
+
+const {player, progress} = storeToRefs(usePlayerStore());
+const control = ref<HTMLElement>();
+
+function handleClick(e:MouseEvent) {
+	const distance = control.value ? e.pageX - control.value.offsetLeft : 0;
+	const seekWidth = control.value?.offsetWidth;
+	// @ts-ignore
+	progress.value = (distance / seekWidth) * 100;
+	if (player.value) {
+		player.value.currentTime = player.value.duration * progress.value / 100;
+	}
+}
+</script>
+
+<style scoped lang="postcss">
+.progressControl {
+  @apply h-1.5 w-80 rounded-full bg-gray-600 mt-10 m-auto;
+
+  .progressControl-bar {
+    @apply h-full w-20 bg-gray-300 rounded-full flex flex-row justify-end items-center;
+  }
+
+  @media(hover: hover) {
+    &:hover {
+      .progressControl-bar {
+        @apply bg-teal-500;
+
+        .progressControl-bar-dot {
+          @apply h-2.5 w-2.5 bg-white rounded-full;
+        }
+      }
+    }
+  }
+}
+</style>

package.json

@@ -28,6 +28,10 @@
   },
   "dependencies": {
     "@vue/eslint-config-typescript": "^12.0.0",
+    "id3-parser": "^3.0.0",
+    "jsmediatags": "^3.9.7",
+    "musicmetadata": "^2.0.5",
+    "mutag": "^2.0.7",
     "sass": "^1.69.5"
   }
 }

pages/player.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="player">
+    <span class="player-header">Currently playing</span>
+    <div class="player-body">
+      <img
+        class="player-body-cover"
+        :src="track.image? track.image : '/album.png'"
+      >
+      <div class="player-body-text">
+        <h3>{{ track.title }}</h3>
+        <h5>{{ track.artist }}</h5>
+      </div>
+      <PlayerControls
+        class="player-body-controls"
+        :player="(player as HTMLAudioElement)"
+      />
+      <ProgressControl :player="(player as HTMLAudioElement)" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PlayerControls from '~/components/common/PlayerControls.vue';
+import ProgressControl from '~/components/common/ProgressControl.vue';
+
+const {track, player} = storeToRefs(usePlayerStore());
+onMounted(() => {
+	player.value = new Audio(track.value.src);
+});
+
+</script>
+
+<style scoped lang="postcss">
+  .player-header {
+    font-family: 'Roboto', sans-serif;
+    @apply font-bold text-center m-auto block pt-4
+  }
+
+  .player-body-cover {
+    @media (max-width: 425px) {
+      @apply !w-72 !h-72 block m-auto !mt-9;
+    }
+    @apply w-3/12 h-1/4 block m-auto mt-48;
+  }
+
+  .player-body-text {
+    @apply flex flex-col m-auto w-3/12 mt-6;
+    @media (max-width: 425px) {
+      @apply gap-2 mt-4 w-80;
+      }
+  }
+
+  .player-body-controls {
+    @apply mt-10
+  }
+</style>