Initial commit

2026-05-26 12:11:14 +07:00
commit 9fdd78e737
117 changed files with 10579 additions and 0 deletions
@@ -0,0 +1,134 @@
+<template>
+  <div class="p-8">
+    <section class="mb-12">
+      <h2 class="text-3xl font-black text-black mb-6">Liked Tracks</h2>
+      <div v-if="loading" class="text-center py-12 text-gray-500">Loading...</div>
+      <div v-else-if="likedTracks.length === 0" class="text-center py-12">
+        <p class="text-gray-500 mb-4">No liked tracks yet</p>
+        <router-link to="/home" class="bg-noctune-yellow border-2 border-black px-6 py-3 font-bold inline-block hover:bg-yellow-400 transition-colors rounded-lg">Discover Music</router-link>
+      </div>
+      <div v-else class="grid grid-cols-4 gap-6">
+        <div v-for="track in likedTracks" :key="track._id"
+          @click="playTrack(track)"
+          class="group cursor-pointer bg-white rounded-2xl border-2 border-black overflow-hidden hover:scale-[1.02] transition-transform"
+        >
+          <div class="aspect-square bg-gray-300 relative overflow-hidden">
+            <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+            <div class="absolute bottom-2 right-2 w-10 h-10 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity">
+              <svg class="w-5 h-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+            </div>
+          </div>
+          <div class="p-3">
+            <p class="text-sm font-bold text-black truncate">{{ track.title }}</p>
+            <p class="text-xs text-gray-500 truncate">{{ track.artist }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="text-2xl font-black text-black mb-6 flex items-center">
+        All Tracks
+        <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+      </h2>
+      <div v-if="allLoading" class="text-center py-8 text-gray-500">Loading...</div>
+      <div v-else class="bg-white rounded-2xl border-4 border-black overflow-hidden">
+        <div class="bg-noctune-teal px-6 py-3 flex items-center text-black font-bold border-b-4 border-black">
+          <span class="flex-1">TITLE</span>
+          <span class="w-40 text-center">ARTIST</span>
+          <span class="w-32 text-center">ALBUM</span>
+          <span class="w-12 text-center"></span>
+        </div>
+        <div class="divide-y divide-gray-200">
+          <div v-for="(track, index) in allTracks" :key="track._id"
+            @click="playTrack(track)"
+            class="px-6 py-3 flex items-center hover:bg-gray-50 transition-colors cursor-pointer"
+          >
+            <div class="flex-1 flex items-center gap-3">
+              <span class="text-sm text-gray-400 w-6">{{ index + 1 }}</span>
+              <div class="w-10 h-10 rounded-lg flex-shrink-0 overflow-hidden bg-gray-300 border border-black">
+                <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+              </div>
+              <span class="font-medium text-black text-sm truncate">{{ track.title }}</span>
+            </div>
+            <span class="w-40 text-center text-gray-600 text-sm truncate">{{ track.artist }}</span>
+            <span class="w-32 text-center text-gray-600 text-sm truncate">{{ track.album }}</span>
+            <button @click.stop="toggleLike(track)" class="w-12 flex justify-center text-gray-400 hover:text-red-400 transition-colors">
+              <svg class="w-5 h-5" :class="track._isLiked ? 'fill-red-400 text-red-400' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const likedTracks = ref([])
+const allTracks = ref([])
+const loading = ref(true)
+const allLoading = ref(true)
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function playTrack(track) {
+  const tracks = allTracks.value.length ? allTracks.value : likedTracks.value
+  const idx = tracks.findIndex((t) => t._id === track._id)
+  queueStore.setQueue(tracks, idx >= 0 ? idx : 0)
+  playerStore.setTrack(track)
+  playerStore.play()
+}
+
+async function toggleLike(track) {
+  try {
+    if (track._isLiked) {
+      await api.delete(`/tracks/${track._id}/like`)
+      track._isLiked = false
+      likedTracks.value = likedTracks.value.filter((t) => t._id !== track._id)
+    } else {
+      await api.post(`/tracks/${track._id}/like`)
+      track._isLiked = true
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onMounted(async () => {
+  try {
+    const { data: liked } = await api.get('/tracks/liked')
+    if (liked.success) {
+      likedTracks.value = liked.data.likedTracks || []
+      likedTracks.value.forEach((t) => (t._isLiked = true))
+    }
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false
+  }
+
+  try {
+    const { data: all } = await api.get('/tracks')
+    if (all.success) {
+      allTracks.value = all.data
+      const likedIds = new Set(likedTracks.value.map((t) => t._id))
+      allTracks.value.forEach((t) => (t._isLiked = likedIds.has(t._id)))
+    }
+  } catch {
+    // ignore
+  } finally {
+    allLoading.value = false
+  }
+})
+</script>