AlbumList.vue (1624B)
1 <script setup lang="ts"> 2 import AlbumList from '../assets/AlbumsList.json'; 3 import queue, { type Queue } from '../queue'; 4 import { useI18n } from 'vue-i18n'; 5 6 const { t } = useI18n(); 7 8 function add_play_album(albumIndex: number) { 9 console.log("The Album will play! The Album index is " + albumIndex); 10 const albumSongList: Queue[] = AlbumList[albumIndex].songs.map((song) => { 11 const queueinter: Queue = { videoId: song.videoId, SongName: t(song.titleKey) }; 12 return queueinter; 13 }); 14 queue.add_album(albumSongList, t(AlbumList[albumIndex].albumTitleKey)); 15 } 16 </script> 17 18 <template> 19 <div class="page"> 20 <div class="album-container"> 21 <div v-for="(Album, index) in AlbumList" :key="index"> 22 <button @click="add_play_album(index)" class="button_album"> 23 <img :src="Album.albumArt" alt="" /> 24 <div class="album-title">{{ t(Album.albumTitleKey) }}</div> 25 </button> 26 </div> 27 </div> 28 </div> 29 </template> 30 31 <style scoped> 32 .album-container { 33 display: flex; 34 flex-wrap: wrap; 35 justify-content: center; 36 gap: clamp(1px, 1vw, 10px); 37 } 38 39 .button_album { 40 font-family: "Poppins", "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; 41 font-size: clamp(1.5px, calc(3vw - 1px), 15px); 42 background: #000000; 43 color: #ffffff; 44 border: #404040 solid 2px; 45 padding: 5px; 46 width: 30vw; 47 max-width: 200px; 48 cursor: pointer; 49 display: flex; 50 flex-direction: column; 51 align-items: center; 52 } 53 54 .button_album img { 55 width: 100%; 56 height: auto; 57 } 58 59 .album-title { 60 margin-top: 5px; 61 text-align: center; 62 } 63 </style>