byntangxyz/noctune-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add AddToPlaylistModal component for saving tracks to playlists

Browse Source
This commit is contained in:
Bintang Murtifandy
2026-05-26 20:38:06 +07:00
parent a109f5bab1
commit 9f4e5bc732
9 changed files with 192 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/LibraryPage.vue
+26 -3
View File
@@ -25,8 +25,15 @@
</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 class="flex items-center justify-between">
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-black truncate">{{ track.title }}</p>
<p class="text-xs text-gray-500 truncate">{{ track.artist }}</p>
</div>
<button @click.stop="openAddToPlaylist(track)" class="ml-2 flex-shrink-0 text-gray-400 hover:text-noctune-teal transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
</button>
</div>
</div>
</div>
</div>
@@ -71,13 +78,18 @@
</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 transition-colors">
<button @click.stop="toggleLike(track)" class="w-10 flex justify-center transition-colors">
<svg class="w-5 h-5" :class="isLiked(track) ? 'fill-red-400 text-red-400' : 'text-gray-400 hover: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>
<button @click.stop="openAddToPlaylist(track)" class="w-8 flex justify-center transition-colors text-gray-400 hover:text-noctune-teal">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
</button>
</div>
</div>
</div>
</section>
<AddToPlaylistModal :show="showAddModal" :track-id="trackToAdd?._id" @close="showAddModal = false" />
</div>
</template>
@@ -89,6 +101,7 @@ import { useAuthStore } from '../stores/authStore.js'
import api from '../lib/api.js'
import { formatUrl } from '../lib/utils.js'
import { useAuthGate } from '../composables/useAuthGate.js'
import AddToPlaylistModal from '../components/AddToPlaylistModal.vue'
const playerStore = usePlayerStore()
const queueStore = useQueueStore()
@@ -99,6 +112,16 @@ const likedTracks = ref([])
const allTracks = ref([])
const loading = ref(true)
const allLoading = ref(true)
const trackToAdd = ref(null)
const showAddModal = ref(false)
function openAddToPlaylist(track) {
trackToAdd.value = track
requireAuth({
redirectTo: '/login',
onAuthenticated: () => { showAddModal.value = true }
})
}
function isCurrentTrack(track) {
return playerStore.currentTrack?._id === track._id