commit 516474422228855a0315b63bc445aac07c4dbb83
parent 9d520c4228c5a9602b96896a435eb6019d16ef1b
Author: Minerva_juppiter <94231606+minerva-jupiter@users.noreply.github.com>
Date: Mon, 17 Mar 2025 23:30:59 +0900
Dev (#11)
* deploy album list & bind player for queue.
* use interval!!!
* routerを本番仕様に変更
* router /player was deleted
* make queue can control player
* install roop button
* deploy queue in player
Diffstat:
6 files changed, 74 insertions(+), 65 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
+import Player from "./components/Player.vue";
const MenuButton = ref(false);
const closeMenu = (event: Event) => {
@@ -34,7 +35,6 @@ onBeforeUnmount(() => {
<!-- 将来的には多言語対応する．中，韓ではそれぞれNoto sans C，Kを用いる -->
<li><router-link to="/" @click="MenuButton = false">Top</router-link></li>
<li><router-link to="/" @click="MenuButton = false">My List</router-link></li>
- <li><router-link to="/player" @click="MenuButton = false">Player(仮置き)</router-link></li>
<hr>
<li><router-link to="/about" @click="MenuButton = false">About</router-link></li>
<li><router-link to="/terms" @click="MenuButton = false">利用規約</router-link></li>
@@ -46,4 +46,5 @@ onBeforeUnmount(() => {
</nav>
</header>
<router-view />
+ <Player/>
</template>
diff --git a/src/assets/AlbumsList.json b/src/assets/AlbumsList.json
@@ -4,11 +4,11 @@
"songs": [
{
"title": { "ja": "曲1", "en": "Song 1" },
- "videoId": "dQw4w9WgXcQ"
+ "videoId": "QcrxntJERRs"
},
{
"title": { "ja": "曲2", "en": "Song 2" },
- "videoId": "3JZ_D3ELwOQ"
+ "videoId": "BrpIRBW4g0A"
}
]
},
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
@@ -1,9 +1,11 @@
<script setup lang="ts">
import AlbumList from '../assets/AlbumsList.json';
-import queue from '../queue';
+import queue, { type 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)
+ console.log("The Album will play! The Album index is " + albumIndex);
+ const albumSongList: Queue[] = AlbumList[albumIndex].songs.map((songs) => {
+ const queueinter: Queue = {videoId: songs.videoId, SongName: songs.title.ja}
+ return queueinter;});
queue.add_album(albumSongList,AlbumList[albumIndex].albumTitle.ja);// *.ja will change depends on using languare
}
</script>
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -3,12 +3,12 @@ import { YoutubeIframe } from '@vue-youtube/component';
import { ref, computed, onUnmounted, nextTick } from 'vue';
import queue from '../queue';
-let videoId = ref('zxt-_P_WXtM'); // example of long titleName
+//let videoId = ref('zxt-_P_WXtM'); // example of long titleName
// let videoId = ref('XAwXaGQwoZ0'); // example of short titleName
const player = ref<any>(null);
const nowTime = ref(0);
const endTime = ref(0);
-const title = ref();
+let title = ref();
let titleName = ref();
const intervalId = ref<number | null>(null);
const isPlaying = ref(false);
@@ -22,7 +22,6 @@ const isAnimating = ref(false);
const SCROLL_SPEED = 40; // px/s
const WAIT_TIME = 2000; // ms
-let next_song;
const togglePlay = async () => {
player.value?.togglePlay(); // Change play-pause
};
@@ -66,17 +65,7 @@ const onStateChange = (event: { target: any; data: number }) => {
nowTime.value = Math.floor(event.target.getCurrentTime());
}, 250);
} else if (event.data === 0) { // end(0)
- next_song = queue.get_next();
- if(next_song == null){ //check queue whather exist next song
- isPlaying.value = false;
- if(intervalId.value !== null) {
- clearInterval(intervalId.value);
- intervalId.value = null;
- }
- }else{
- videoId = ref(next_song)
- console.log("Playing song is updated");
- }
+ queue.get_next();
} else if (event.data === 2) { // stop (2)
isPlaying.value = false; // play-pause-button
if (intervalId.value !== null) {
@@ -105,29 +94,17 @@ onUnmounted(() => {
}
});
-//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!
- }
- }else if(false){
- clearInterval(interval);
- }
-}, 100);
+const renderKey = queue.get_playerRenderKey();
</script>
<template>
- <div class="container">
- <youtube-iframe
- :video-id="videoId"
+ <div class="container" :key="renderKey">
+ <youtube-iframe
+ :video-id=queue.get_nowSong()
:player-vars="{
autoplay: 1,
iv_load_policy: 3,
loop: 1,
- playlist: videoId,
controls: 0,
playsinline: 1,
rel: 0
@@ -161,6 +138,13 @@ const interval = setInterval(() => {
<div class="bar bar-right"></div>
</div>
</button>
+ <button @click="queue.onLoopButton()">
+ LoopButton
+ </button>
+ Queue
+ <div v-for="(SongName, index) in queue.get_queueTitleList()">
+ {{ index }} : {{ SongName }}
+ </div>
</div>
</template>
diff --git a/src/queue.ts b/src/queue.ts
@@ -2,48 +2,72 @@
This Script manage the queue for play.
*/
+export interface Queue {
+ videoId: string;
+ SongName: string;
+}
+
+import { ref } from "vue";
+
-let queue: string[] = [];
+let queue: Queue[] = [];
let albumTitle: string = "Unknown Album";
let nextSong;
+let playerRenderKey = ref(0);
+let isLoop: boolean = false;
function get_albumTitle(): string {
return albumTitle;
}
-function get_next(): (string|null) {
- if(queue.length == 1){
- console.log("queue was ended");
- return null;
- }else{
- nextSong = queue[1];
- queue.shift();
- console.log("i will play" + nextSong);
- return nextSong;
- }
+function get_next(): (string | null) {
+ console.log("get_next was called");
+ if (isLoop) {
+ playerRenderKey.value += 1;
+ return queue[0].videoId;
+ } else {
+ if (queue.length == 1) {
+ console.log("queue was ended");
+ return null;
+ } else {
+ nextSong = queue[1].videoId;
+ queue.shift();
+ console.log("i will play" + nextSong);
+ playerRenderKey.value += 1;
+ return nextSong;
+ }
+ };
};
-function get_nowSong(): (string|null) {
- if(queue.length == 0){
- console.log("Queue is empty now.");
- return null;
- }else{
- return queue[0];
- }
+function get_nowSong(): (string) {
+ return queue[0].videoId;
}
-function add_album(VideoIdArray: string[],AlbumTitle: string) {
- queue = VideoIdArray;
+function add_album(Album: Queue[], AlbumTitle: string) {
+ queue = Album;
albumTitle = AlbumTitle;
+ console.log(queue.map((queue) => queue.SongName));
+ playerRenderKey.value += 1;
}
function del_all() {
- queue = [];
- albumTitle = "Unknown Album";
+ queue = [];
+ albumTitle = "Unknown Album";
};
-function interrupt(VideoIdArray: string[]) {
- queue = VideoIdArray;
-};
+function get_playerRenderKey() {
+ return playerRenderKey;
+}
+
+function onLoopButton() {
+ isLoop = !isLoop;
+ console.log("loop is " + isLoop);
+}
+
+function get_queueTitleList(): (string[]) {
+ console.log("get_queueTitleList was called")
+ console.log(queue.map((queue) => queue.SongName));
+ return queue.map((map) => map.SongName);
+}
-export default {get_albumTitle, get_next, get_nowSong, add_album, del_all, interrupt};-
\ No newline at end of file
+export default {get_albumTitle, get_next, get_nowSong, add_album, del_all, get_playerRenderKey, onLoopButton, get_queueTitleList };+
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
@@ -3,7 +3,6 @@ import Top from "./components/AlbumList.vue";
import About from "./components/About.vue";
import Enquiries from './components/Enquiries.vue';
import Info from './components/Info.vue';
-import Player from './components/Player.vue';
import Policy from './components/Policy.vue';
import Terms from './components/Terms.vue';
@@ -12,7 +11,6 @@ const routes = [
{ path: '/about', name: 'about', component: About },
{ path: '/enquiries', name: 'enquiries', component: Enquiries },
{ path: '/info', name: 'info', component: Info },
- { path: '/player', name: 'player', component: Player },
{ path: '/policy', name: 'policy', component: Policy },
{ path: '/terms', name: 'terms', component: Terms },
]
