SongList.vue (1234B)
1 <script setup lang="ts"> 2 import albums from '../assets/albums.json'; 3 import player from '../player'; 4 import type { Queue } from '../player'; 5 import { useRoute } from 'vue-router'; 6 const route = useRoute(); 7 8 const play_song = (index: number) => { 9 let songs: Queue[] = []; 10 for (let i = 0; i < albums[Number(route.params.artist_id)].Albums[Number(route.params.album_id)].items.length; i++) { 11 if (i >= index) { 12 const song: Queue = {title: albums[Number(route.params.artist_id)].Albums[Number(route.params.album_id)].items[i].snippet.title, video_id: albums[Number(route.params.artist_id)].Albums[Number(route.params.album_id)].items[i].snippet.resourceId.videoId}; 13 songs.push(song); 14 } 15 } 16 player.add_to_queue(songs); 17 } 18 </script> 19 20 <template> 21 <h2>{{ albums[Number($route.params.artist_id)].Albums[Number($route.params.album_id)].AlbumTitle }}</h2> 22 <div> 23 <ul class="list-group"> 24 <li v-for="(song, index) in albums[Number($route.params.artist_id)].Albums[Number($route.params.album_id)].items" class="list-group-item" @click="() => play_song(index)"> 25 {{ song.snippet.title }} 26 </li> 27 </ul> 28 </div> 29 </template>