commit e62c1744e4ca25b5ce9dc90a7a6c0637eac2f68a
parent 67d1eb889e25b11b9832a001c0ee8f6e7367dfa0
Author: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Date: Sat, 15 Mar 2025 23:35:06 +0900
Merge pull request #5 from minerva-jupiter/dev
Dev
Diffstat:
8 files changed, 77 insertions(+), 7 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
*.njsproj
*.sln
*.sw?
+bun.lock
diff --git a/bun.lock b/bun.lock
@@ -4,6 +4,7 @@
"": {
"name": "gs-player",
"dependencies": {
+ "@vue-youtube/component": "^0.0.6",
"@vue-youtube/core": "^0.0.6",
"vue": "3.5.13",
"vue-router": "^4.5.0",
@@ -126,6 +127,8 @@
"@volar/typescript": ["@volar/typescript@2.4.12", "", { "dependencies": { "@volar/language-core": "2.4.12", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } }, "sha512-HJB73OTJDgPc80K30wxi3if4fSsZZAOScbj2fcicMuOPoOkcf9NNAINb33o+DzhBdF9xTKC1gnPmIRDous5S0g=="],
+ "@vue-youtube/component": ["@vue-youtube/component@0.0.6", "", { "dependencies": { "@vue-youtube/core": "0.0.6", "@vue-youtube/shared": "0.0.6", "vue-demi": "*" }, "peerDependencies": { "@vue/composition-api": "^1.7.2", "vue": "^2.7.0 || >=3.0.0" }, "optionalPeers": ["@vue/composition-api"] }, "sha512-Ouv7VJy8r//F9gE8Y1H2M0d4IQmOtZh8I79ttgsAGge3a/AdtXzSBVJ7ijhCAH4ZNulkhsN3CO46V/ReW5mwKA=="],
+
"@vue-youtube/core": ["@vue-youtube/core@0.0.6", "", { "dependencies": { "@vue-youtube/shared": "0.0.6", "vue-demi": "latest" }, "peerDependencies": { "@vue/composition-api": "^1.7.2", "vue": "^2.7.0 || >=3.0.0" }, "optionalPeers": ["@vue/composition-api"] }, "sha512-3bqs41WCP1901vv7EXxYD0/mKhhjq6YA3r9Lhr0wyFV+UHPLyxcZZ50yUtkXn1cIr9Pz0DRzEGwi65Quj94Pmg=="],
"@vue-youtube/shared": ["@vue-youtube/shared@0.0.6", "", { "dependencies": { "vue-demi": "latest" }, "peerDependencies": { "@vue/composition-api": "^1.7.2", "vue": "^2.7.0 || >=3.0.0" }, "optionalPeers": ["@vue/composition-api"] }, "sha512-5GxwPkiHOhNpjBbRuL5UmE4EpX8hmTpA+UOiTNEZzeYyrGY6iSYwL8w3Ot+QJ8Koc3K0o9GHD8XywHrKDXbs3g=="],
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +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) => {
diff --git a/src/components/About.vue b/src/components/About.vue
@@ -1,3 +1,5 @@
<template>
- <h1>About</h1>
+ <div class="container">
+ <h1>About</h1>
+ </div>
</template>
\ No newline at end of file
diff --git a/src/components/Enquiries.vue b/src/components/Enquiries.vue
@@ -1,3 +1,5 @@
<template>
- <h1>お問い合わせ</h1>
+ <div class="container">
+ <h1>お問い合わせ</h1>
+ </div>
</template>
\ No newline at end of file
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -1,8 +1,9 @@
<script setup lang="ts">
import { YoutubeIframe } from '@vue-youtube/component';
import { ref, computed, onUnmounted } from 'vue';
+import queue from '../queue';
-const videoId = ref('1QkKDY1-NN0');
+let videoId = ref('1QkKDY1-NN0');
const player = ref<any>(null);
const nowTime = ref(0);
const endTime = ref(0);
@@ -10,7 +11,9 @@ const title = ref();
const titleName = ref();
const intervalId = ref<number | null>(null);
const isPlaying = ref(false);
+let albumTitle = queue.get_albumTitle();
+let next_song;
const togglePlay = async () => {
player.value?.togglePlay(); // change play-pause
};
@@ -24,18 +27,34 @@ const onReady = (event: { target: any }) => {
// 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 === 2 || event.data === 0) { // stop (2) or end (0)
+ } 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;
+ if(intervalId.value !== null) {
+ clearInterval(intervalId.value);
+ intervalId.value = null;
+ }
+ }else{
+ videoId = ref(next_song)
+ }
+ } else if (event.data === 2) { // stop (2)
+ console.log(2);
isPlaying.value = false; // play-pause-button
if (intervalId.value !== null) {
clearInterval(intervalId.value);
intervalId.value = null;
}
}
+ albumTitle = queue.get_albumTitle();
};
// Format to mm:ss
@@ -75,7 +94,7 @@ onUnmounted(() => {
@state-change="onStateChange" />
<div class="info_box">
<div class="title">{{ titleName }}</div>
- <div class="album">album name</div>
+ <div class="album">{{albumTitle}}</div>
<div class="time_container">
<div class="nowtime">{{ formattedNowTime }}</div>
<div class="endtime">{{ formattedEndTime }}</div>
diff --git a/src/components/Terms.vue b/src/components/Terms.vue
@@ -1,3 +1,5 @@
<template>
- <h1>利用規約</h1>
+ <div class="container">
+ <h1>利用規約</h1>
+ </div>
</template>
\ No newline at end of file
diff --git a/src/queue.ts b/src/queue.ts
@@ -0,0 +1,40 @@
+/*
+This Script manage the queue for play.
+*/
+
+
+let queue: string[] = [];
+let albumTitle: string = "Unknown Album";
+let nextSong;
+
+function get_albumTitle(): string {
+ return albumTitle;
+}
+
+function get_next(): (string|null) {
+ if(queue.length == 0){
+ console.log("queue was ended");
+ return null;
+ }else{
+ nextSong = queue[0];
+ queue.shift();
+ console.log("i will play" + nextSong);
+ return nextSong;
+ }
+};
+
+function add_album(VideoIdArray: string[]) {
+ queue = VideoIdArray;
+}
+
+function del_all() {
+ queue = [];
+ albumTitle = "Unknown Album";
+};
+
+function interrupt(VideoIdArray: string[]) {
+ queue = VideoIdArray;
+};
+
+
+export default {get_albumTitle, get_next, add_album, del_all, interrupt};+
\ No newline at end of file
