commit 4cf6dcd3b7f5e3ffe90b98416ef2f098203c585d
parent 05f4a82d09766ef293f4f26abff30ab9dc930a96
Author: Sunny <kajimalu10@gmail.com>
Date: Fri, 28 Mar 2025 23:46:29 +0900
load queue dynamically
Diffstat:
2 files changed, 49 insertions(+), 47 deletions(-)
diff --git a/src/components/TrackList.vue b/src/components/TrackList.vue
@@ -1,6 +1,8 @@
<script setup lang="ts">
+import { computed } from "vue";
import queue from '../queue';
-const queueTitleList = queue.get_queueTitleList();
+
+const queueTitleList = computed(() => queue.get_queueTitleList());
</script>
<template>
@@ -8,12 +10,10 @@ const queueTitleList = queue.get_queueTitleList();
<h1>Tracklist</h1>
<table>
<tbody>
- <div v-for="(Title,index) in queueTitleList">
- <tr>
- <td>{{ index }}</td>
- <td>{{ Title }}</td>
- </tr>
- </div>
+ <tr v-for="(Title, index) in queueTitleList" :key="index">
+ <td>{{ index }}</td>
+ <td>{{ Title }}</td>
+ </tr>
</tbody>
</table>
</div>
@@ -25,13 +25,13 @@ const queueTitleList = queue.get_queueTitleList();
/* 2column style (PC) */
@media (min-aspect-ratio: 1/1) {
.fstracklist-container .page {
- position: block;
- top: 0;
- padding: 30px;
- z-index: 30;
- width: calc(50vw - 60px);
- height: calc(100% - 60px);
- background: #000000;
-}
+ position: block;
+ top: 0;
+ padding: 30px;
+ z-index: 30;
+ width: calc(50vw - 60px);
+ height: calc(100% - 60px);
+ background: #000000;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/queue.ts b/src/queue.ts
@@ -2,39 +2,39 @@
This Script manages the queue for play.
*/
+import { ref } from "vue";
+
export interface Queue {
videoId: string;
SongName: string;
}
-import { ref } from "vue";
-
-let queue: Queue[] = [];
-let albumTitle: string = "Unknown Album";
-let nextSong: string = "";
-let playerRenderKey = ref(0);
-let isLoop = ref(false);
-let isFavorite = ref(false);
+const queue = ref<Queue[]>([]);
+const albumTitle = ref<string>("Unknown Album");
+const nextSong = ref<string>("");
+const playerRenderKey = ref(0);
+const isLoop = ref(false);
+const isFavorite = ref(false);
function get_albumTitle(): string {
- return albumTitle;
+ return albumTitle.value;
}
function get_next(): string | null {
console.log("get_next was called");
if (isLoop.value) {
playerRenderKey.value += 1;
- return queue[0]?.videoId || null;
+ return queue.value[0]?.videoId || null;
} else {
- if (queue.length === 1) {
+ if (queue.value.length === 1) {
console.log("queue was ended");
return null;
} else {
- nextSong = queue[1].videoId;
- queue.shift();
- console.log("i will play " + nextSong);
+ nextSong.value = queue.value[1].videoId;
+ queue.value.shift();
+ console.log("i will play " + nextSong.value);
playerRenderKey.value += 1;
- return nextSong;
+ return nextSong.value;
}
}
}
@@ -42,25 +42,25 @@ function get_next(): string | null {
function get_nowSong(): Queue {
const favoriteList: Queue[] = JSON.parse(localStorage.getItem("favorite") || "[]");
for (let i = 0; i < favoriteList.length; i++) {
- if (favoriteList[i].videoId === queue[0].videoId) {
+ if (favoriteList[i].videoId === queue.value[0]?.videoId) {
isFavorite.value = true;
break;
}
}
console.log("isFavorite is " + isFavorite.value);
- return queue.length > 0 ? queue[0] : { videoId: "", SongName: "" };
+ return queue.value.length > 0 ? queue.value[0] : { videoId: "", SongName: "" };
}
function add_album(Album: Queue[], AlbumTitle: string) {
- queue = Album;
- albumTitle = AlbumTitle;
- console.log(queue.map((queue) => queue.SongName));
+ queue.value = [...Album];
+ albumTitle.value = AlbumTitle;
+ console.log(queue.value.map((queue) => queue.SongName));
playerRenderKey.value += 1;
}
function del_all() {
- queue = [];
- albumTitle = "Unknown Album";
+ queue.value = [];
+ albumTitle.value = "Unknown Album";
}
function get_playerRenderKey() {
@@ -74,9 +74,10 @@ function onLoopButton() {
function get_queueTitleList(): string[] {
console.log("get_queueTitleList was called");
- console.log(queue.map((queue) => queue.SongName));
- return queue.map((map) => map.SongName);
+ console.log(queue.value.map((queue) => queue.SongName));
+ return queue.value.map((map) => map.SongName);
}
+
function event_favorite(song: Queue | undefined) {
console.log("event_favorite was called");
if (song === undefined) {
@@ -85,22 +86,21 @@ function event_favorite(song: Queue | undefined) {
}
if (!isFavorite.value) {
- console.log("this sons is already favorite");
- if(localStorage.getItem("favorite") === null){
+ console.log("this song is already favorite");
+ if (localStorage.getItem("favorite") === null) {
console.log("favorite is null");
localStorage.setItem("favorite", JSON.stringify([song]));
- }else{
- console.log("favorite is "+ localStorage.getItem("favorite"));
+ } else {
+ console.log("favorite is " + localStorage.getItem("favorite"));
let favoriteList = JSON.parse(localStorage.getItem("favorite") || "[]");
favoriteList.push(song);
localStorage.setItem("favorite", JSON.stringify(favoriteList));
}
isFavorite.value = true;
- }
- else {
+ } else {
console.log("this song is not favorite");
let favoriteList: Queue[] = JSON.parse(localStorage.getItem("favorite") || "[]");
- for (let i = 0; i < JSON.parse(localStorage.getItem("favorite") || "[]").length; i++) {
+ for (let i = 0; i < favoriteList.length; i++) {
if (favoriteList[i].videoId === song.videoId) {
favoriteList.splice(i, 1);
localStorage.setItem("favorite", JSON.stringify(favoriteList));
@@ -123,4 +123,5 @@ export default {
event_favorite,
isLoop,
isFavorite,
-};
+ queue,
+};+
\ No newline at end of file
