commit 459bf6511157afc99dae346908df1017406caefb
parent 5782acfab141c06f0e0714e016de34a1445f9e0c
Author: Minerva_juppiter <94231606+minerva-jupiter@users.noreply.github.com>
Date: Mon, 17 Mar 2025 12:21:23 +0900
deploy album list & bind player for queue. (#9)
Diffstat:
6 files changed, 88 insertions(+), 12 deletions(-)
diff --git a/src/assets/AlbumList.d.ts b/src/assets/AlbumList.d.ts
@@ -0,0 +1,21 @@
+export type Root = Root2[]
+
+export interface Root2 {
+ albumTitle: AlbumTitle
+ songs: Song[]
+}
+
+export interface AlbumTitle {
+ ja: string
+ en: string
+}
+
+export interface Song {
+ title: Title
+ videoId: string
+}
+
+export interface Title {
+ ja: string
+ en: string
+}
diff --git a/src/assets/AlbumsList.json b/src/assets/AlbumsList.json
@@ -0,0 +1,24 @@
+[
+ {
+ "albumTitle": {"ja":"アルバム1", "en": "Album1"},
+ "songs": [
+ {
+ "title": { "ja": "曲1", "en": "Song 1" },
+ "videoId": "dQw4w9WgXcQ"
+ },
+ {
+ "title": { "ja": "曲2", "en": "Song 2" },
+ "videoId": "3JZ_D3ELwOQ"
+ }
+ ]
+ },
+ {
+ "albumTitle": {"ja":"アルバム2", "en": "Album2"},
+ "songs": [
+ {
+ "title": { "ja": "曲A", "en": "Song A" },
+ "videoId": "L_jWHffIx5E"
+ }
+ ]
+ }
+]+
\ No newline at end of file
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
@@ -1,9 +1,22 @@
<script setup lang="ts">
+import AlbumList from '../assets/AlbumsList.json';
+import queue from '../queue';
+function add_play_album(albumIndex: number) {
+ console.log("The Album will play! The Album index is" + albumIndex);
+ const albumSongList = AlbumList[albumIndex].songs.map((songs) => songs.videoId)
+ queue.add_album(albumSongList,AlbumList[albumIndex].albumTitle.ja);// *.ja will change depends on using languare
+}
</script>
<template>
<div class="container">
<h1>Album List</h1>
+ <div v-for="(AlbumList, index) in AlbumList">
+ <button
+ v-on:click="add_play_album(index)">
+ AlbumTitle: {{ AlbumList.albumTitle.ja }}
+ </button>
+ </div>
</div>
</template>
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -9,7 +9,7 @@ const player = ref<any>(null);
const nowTime = ref(0);
const endTime = ref(0);
const title = ref();
-const titleName = ref();
+let titleName = ref();
const intervalId = ref<number | null>(null);
const isPlaying = ref(false);
let albumTitle = queue.get_albumTitle();
@@ -60,15 +60,12 @@ const startScrolling = async () => {
// When the playback state is changed
const onStateChange = (event: { target: any; data: number }) => {
- console.log("onStateChange");
if (event.data === 1) { // start
- console.log("start(1)");
isPlaying.value = true; // play-pause-button
intervalId.value = window.setInterval(() => { // Get current time per 250ms
nowTime.value = Math.floor(event.target.getCurrentTime());
}, 250);
} else if (event.data === 0) { // end(0)
- console.log("end(0)");
next_song = queue.get_next();
if(next_song == null){ //check queue whather exist next song
isPlaying.value = false;
@@ -78,9 +75,9 @@ const onStateChange = (event: { target: any; data: number }) => {
}
}else{
videoId = ref(next_song)
+ console.log("Playing song is updated");
}
} else if (event.data === 2) { // stop (2)
- console.log(2);
isPlaying.value = false; // play-pause-button
if (intervalId.value !== null) {
clearInterval(intervalId.value);
@@ -107,6 +104,17 @@ onUnmounted(() => {
clearInterval(intervalId.value);
}
});
+
+//it might be caused in updating playing album.
+const interval = setInterval(() => {
+ const nowSong = queue.get_nowSong();
+ if(nowSong != null){
+ if(nowSong != videoId.value){
+ videoId = ref(nowSong);
+ //if not playing, i will play!
+ }
+ }
+}, 100);
</script>
<template>
diff --git a/src/queue.ts b/src/queue.ts
@@ -12,19 +12,29 @@ function get_albumTitle(): string {
}
function get_next(): (string|null) {
- if(queue.length == 0){
+ if(queue.length == 1){
console.log("queue was ended");
return null;
}else{
- nextSong = queue[0];
+ nextSong = queue[1];
queue.shift();
console.log("i will play" + nextSong);
return nextSong;
}
};
-function add_album(VideoIdArray: string[]) {
+function get_nowSong(): (string|null) {
+ if(queue.length == 0){
+ console.log("Queue is empty now.");
+ return null;
+ }else{
+ return queue[0];
+ }
+}
+
+function add_album(VideoIdArray: string[],AlbumTitle: string) {
queue = VideoIdArray;
+ albumTitle = AlbumTitle;
}
function del_all() {
@@ -36,5 +46,4 @@ function interrupt(VideoIdArray: string[]) {
queue = VideoIdArray;
};
-
-export default {get_albumTitle, get_next, add_album, del_all, interrupt};-
\ No newline at end of file
+export default {get_albumTitle, get_next, get_nowSong, add_album, del_all, interrupt};+
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,5 +3,5 @@
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
- ]
+ ],
}
