commit effe3a91f89b0f9622e34b269329c9cd2570fca3
parent 79a99bf91b5824729bc9010bda109385b826527d
Author: Minerva_juppiter <94231606+minerva-jupiter@users.noreply.github.com>
Date: Sat, 22 Mar 2025 12:35:23 +0900
deploy favoritelist (#21)
* deploy favoritelist
* cancel compile error
* looking build error
* cancel null error
* get_nowSong cannot return undefinded
* Dev 8 (#20)
* adjust loop icon
* add i18n
* update dependents and delete cookies
* update bun i
* Revert "update bun i"
This reverts commit 4e8355e4e7a20fbd79dba4a6bf84b35d2e5a1f33.
* Revert "update dependents and delete cookies"
This reverts commit 5fe25e1b556b51a736c9df82603d61227b7ddc0a.
* update dependences
---------
Co-authored-by: Sunny <122193933+Sunny-JP@users.noreply.github.com>
Diffstat:
7 files changed, 110 insertions(+), 23 deletions(-)
diff --git a/bun.lock b/bun.lock
@@ -4,14 +4,17 @@
"": {
"name": "gs-player",
"dependencies": {
- "@vue-youtube/component": "^0.0.6",
- "@vue-youtube/core": "^0.0.6",
+ "@jamescoyle/vue-icon": "0.1.2",
+ "@mdi/js": "7.4.47",
+ "@vue-youtube/component": "0.0.6",
+ "@vue-youtube/core": "0.0.6",
"vue": "3.5.13",
- "vue-router": "^4.5.0",
- "vue3-cookies": "^1.0.6",
+ "vue-i18n": "11.1.2",
+ "vue-router": "4.5.0",
+ "vue3-flag-icons": "0.0.3",
},
"devDependencies": {
- "@vitejs/plugin-vue": "5.2.1",
+ "@vitejs/plugin-vue": "5.2.3",
"@vue/tsconfig": "0.7.0",
"typescript": "5.8.2",
"vite": "6.2.2",
@@ -78,8 +81,18 @@
"@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.1", "", { "os": "win32", "cpu": "x64" }, "sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg=="],
+ "@intlify/core-base": ["@intlify/core-base@11.1.2", "", { "dependencies": { "@intlify/message-compiler": "11.1.2", "@intlify/shared": "11.1.2" } }, "sha512-nmG512G8QOABsserleechwHGZxzKSAlggGf9hQX0nltvSwyKNVuB/4o6iFeG2OnjXK253r8p8eSDOZf8PgFdWw=="],
+
+ "@intlify/message-compiler": ["@intlify/message-compiler@11.1.2", "", { "dependencies": { "@intlify/shared": "11.1.2", "source-map-js": "^1.0.2" } }, "sha512-T/xbNDzi+Yv0Qn2Dfz2CWCAJiwNgU5d95EhhAEf4YmOgjCKktpfpiUSmLcBvK1CtLpPQ85AMMQk/2NCcXnNj1g=="],
+
+ "@intlify/shared": ["@intlify/shared@11.1.2", "", {}, "sha512-dF2iMMy8P9uKVHV/20LA1ulFLL+MKSbfMiixSmn6fpwqzvix38OIc7ebgnFbBqElvghZCW9ACtzKTGKsTGTWGA=="],
+
+ "@jamescoyle/vue-icon": ["@jamescoyle/vue-icon@0.1.2", "", {}, "sha512-KFrImXx5TKIi6iQXlnyLEBl4rNosNKbTeRnr70ucTdUaciVmd9qK9d/pZAaKt1Ob/8xNnX2GMp8LisyHdKtEgw=="],
+
"@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+ "@mdi/js": ["@mdi/js@7.4.47", "", {}, "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ=="],
+
"@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.35.0", "", { "os": "android", "cpu": "arm" }, "sha512-uYQ2WfPaqz5QtVgMxfN6NpLD+no0MYHDBywl7itPYd3K5TjjSghNKmX8ic9S8NU8w81NVhJv/XojcHptRly7qQ=="],
"@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.35.0", "", { "os": "android", "cpu": "arm64" }, "sha512-FtKddj9XZudurLhdJnBl9fl6BwCJ3ky8riCXjEw3/UIbjmIY58ppWwPEvU3fNu+W7FUsAsB1CdH+7EQE6CXAPA=="],
@@ -120,7 +133,7 @@
"@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
- "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.1", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ=="],
+ "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.3", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-IYSLEQj4LgZZuoVpdSUCw3dIynTWQgPlaRP6iAvMle4My0HdYwr5g5wQAfwOeHQBmYwEkqF70nRpSilr6PoUDg=="],
"@volar/language-core": ["@volar/language-core@2.4.12", "", { "dependencies": { "@volar/source-map": "2.4.12" } }, "sha512-RLrFdXEaQBWfSnYGVxvR2WrO6Bub0unkdHYIdC31HzIEqATIuuhRRzYu76iGPZ6OtA4Au1SnW0ZwIqPP217YhA=="],
@@ -176,6 +189,8 @@
"estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+ "flag-icons": ["flag-icons@7.3.2", "", {}, "sha512-QkaZ6Zvai8LIjx+UNAHUJ5Dhz9OLZpBDwCRWxF6YErxIcR16jTkIFm3bFu54EkvKQy4+wicW+Gm7/0631wVQyQ=="],
+
"fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
"he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
@@ -208,10 +223,12 @@
"vue-demi": ["vue-demi@0.14.10", "", { "peerDependencies": { "@vue/composition-api": "^1.0.0-rc.1", "vue": "^3.0.0-0 || ^2.6.0" }, "optionalPeers": ["@vue/composition-api"], "bin": { "vue-demi-fix": "bin/vue-demi-fix.js", "vue-demi-switch": "bin/vue-demi-switch.js" } }, "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg=="],
+ "vue-i18n": ["vue-i18n@11.1.2", "", { "dependencies": { "@intlify/core-base": "11.1.2", "@intlify/shared": "11.1.2", "@vue/devtools-api": "^6.5.0" }, "peerDependencies": { "vue": "^3.0.0" } }, "sha512-MfdkdKGUHN+jkkaMT5Zbl4FpRmN7kfelJIwKoUpJ32ONIxdFhzxZiLTVaAXkAwvH3y9GmWpoiwjDqbPIkPIMFA=="],
+
"vue-router": ["vue-router@4.5.0", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.2.0" } }, "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w=="],
"vue-tsc": ["vue-tsc@2.2.8", "", { "dependencies": { "@volar/typescript": "~2.4.11", "@vue/language-core": "2.2.8" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ=="],
- "vue3-cookies": ["vue3-cookies@1.0.6", "", { "dependencies": { "vue": "^3.0.0" } }, "sha512-a1UvVD0qIgxyOqjlSOwnLnqAnz8ASltugEv8yX+96i/WGZAN9fEDci7xO4HIWZE1uToUnRq9JnFhvfDCSo45OA=="],
+ "vue3-flag-icons": ["vue3-flag-icons@0.0.3", "", { "dependencies": { "flag-icons": "^7.2.3" }, "peerDependencies": { "vue": "^3.3.4" } }, "sha512-DtRMzdn6iFTwdOazJLMIZNMcJmNzgTOfZY88y9kfPJ6o3gJFkIJJKsBaUmynv0/rkOIX8sHnmwx3f4GgtKjy5A=="],
}
}
diff --git a/package.json b/package.json
@@ -9,18 +9,17 @@
"preview": "vite preview"
},
"dependencies": {
- "@jamescoyle/vue-icon": "^0.1.2",
- "@mdi/js": "^7.4.47",
- "@vue-youtube/component": "^0.0.6",
- "@vue-youtube/core": "^0.0.6",
+ "@jamescoyle/vue-icon": "0.1.2",
+ "@mdi/js": "7.4.47",
+ "@vue-youtube/component": "0.0.6",
+ "@vue-youtube/core": "0.0.6",
"vue": "3.5.13",
- "vue-i18n": "^11.1.2",
- "vue-router": "^4.5.0",
- "vue3-cookies": "^1.0.6",
- "vue3-flag-icons": "^0.0.3"
+ "vue-i18n": "11.1.2",
+ "vue-router": "4.5.0",
+ "vue3-flag-icons": "0.0.3"
},
"devDependencies": {
- "@vitejs/plugin-vue": "5.2.1",
+ "@vitejs/plugin-vue": "5.2.3",
"@vue/tsconfig": "0.7.0",
"typescript": "5.8.2",
"vite": "6.2.2",
diff --git a/src/App.vue b/src/App.vue
@@ -55,6 +55,7 @@ onBeforeUnmount(() => {
<ul>
<li><router-link to="/" @click="MenuButton = false">{{ $t('menu.top') }}</router-link></li>
<li><router-link to="/about" @click="MenuButton = false">{{ $t('menu.about') }}</router-link></li>
+ <li><router-link to="/favorite" @click="MenuButton = false">Favorite</router-link></li>
<li><router-link to="/terms" @click="MenuButton = false">{{ $t('menu.terms') }}</router-link></li>
<li><router-link to="/policy" @click="MenuButton = false">{{ $t('menu.policy') }}</router-link></li>
<li><router-link to="/enquiries" @click="MenuButton = false">{{ $t('menu.enquiries') }}</router-link></li>
diff --git a/src/components/FavoriteList.vue b/src/components/FavoriteList.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+ import type { Queue } from "../queue";
+ let favorite_list: Queue[] = [];
+ if (localStorage.getItem("favorite") === null) {
+ favorite_list = [{SongName: "Favotite List is Empty", videoId: ""}];
+ console.log("Favorite List is Empty");
+ }else
+ {
+ favorite_list = JSON.parse(localStorage.getItem("favorite") || "");
+ }
+</script>
+
+<template>
+ <div class="page">
+ <h1>Favorite List</h1>
+ <ul>
+ <li v-for="item in favorite_list">
+ {{ item.SongName }}
+ </li>
+ </ul>
+ </div>
+</template>+
\ No newline at end of file
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -95,6 +95,7 @@ onUnmounted(() => {
});
const renderKey = queue.get_playerRenderKey();
+
</script>
<template>
@@ -106,7 +107,7 @@ const renderKey = queue.get_playerRenderKey();
:key="renderKey"
>
<youtube-iframe
- :video-id="queue.get_nowSong()"
+ :video-id="queue.get_nowSong().videoId"
:player-vars="{
autoplay: 1,
iv_load_policy: 3,
@@ -138,8 +139,8 @@ const renderKey = queue.get_playerRenderKey();
<div class="fs_loop" @click="queue.onLoopButton()">
<SvgIcon type="mdi" :path="queue.isLoop.value ? mdiRepeatOnce : mdiRepeatOff" />
</div>
- <div class="fs_fav" @click="queue.onLoopButton()">
- <SvgIcon type="mdi" :path="queue.isLoop.value ? mdiStarCheck : mdiStarPlusOutline" />
+ <div class="fs_fav" @click="queue.event_favorite(queue.get_nowSong())">
+ <SvgIcon type="mdi" :path="queue.isFavorite.value ? mdiStarCheck : mdiStarPlusOutline" />
</div>
</div>
diff --git a/src/queue.ts b/src/queue.ts
@@ -11,9 +11,10 @@ import { ref } from "vue";
let queue: Queue[] = [];
let albumTitle: string = "Unknown Album";
-let nextSong;
+let nextSong: string = "";
let playerRenderKey = ref(0);
let isLoop = ref(false);
+let isFavorite = ref(false);
function get_albumTitle(): string {
return albumTitle;
@@ -38,8 +39,16 @@ function get_next(): string | null {
}
}
-function get_nowSong(): string | undefined {
- return queue.length > 0 ? queue[0].videoId : undefined;
+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) {
+ isFavorite.value = true;
+ break;
+ }
+ }
+ console.log("isFavorite is " + isFavorite.value);
+ return queue.length > 0 ? queue[0] : { videoId: "", SongName: "" };
}
function add_album(Album: Queue[], AlbumTitle: string) {
@@ -68,6 +77,39 @@ function get_queueTitleList(): string[] {
console.log(queue.map((queue) => queue.SongName));
return queue.map((map) => map.SongName);
}
+function event_favorite(song: Queue | undefined) {
+ console.log("event_favorite was called");
+ if (song === undefined) {
+ console.log("song is undefined");
+ return;
+ }
+
+ if (!isFavorite.value) {
+ console.log("this sons 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"));
+ let favoriteList = JSON.parse(localStorage.getItem("favorite") || "[]");
+ favoriteList.push(song);
+ localStorage.setItem("favorite", JSON.stringify(favoriteList));
+ }
+ isFavorite.value = true;
+ }
+ 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++) {
+ if (favoriteList[i].videoId === song.videoId) {
+ favoriteList.splice(i, 1);
+ localStorage.setItem("favorite", JSON.stringify(favoriteList));
+ break;
+ }
+ }
+ isFavorite.value = false;
+ }
+}
export default {
get_albumTitle,
@@ -78,5 +120,7 @@ export default {
get_playerRenderKey,
onLoopButton,
get_queueTitleList,
- isLoop
+ event_favorite,
+ isLoop,
+ isFavorite,
};
diff --git a/src/router.ts b/src/router.ts
@@ -5,6 +5,7 @@ import Enquiries from './components/Enquiries.vue';
import Info from './components/Info.vue';
import Policy from './components/Policy.vue';
import Terms from './components/Terms.vue';
+import FavoriteList from './components/FavoriteList.vue';
const routes = [
{ path: '/', name: 'top', component: Top },
@@ -13,6 +14,7 @@ const routes = [
{ path: '/info', name: 'info', component: Info },
{ path: '/policy', name: 'policy', component: Policy },
{ path: '/terms', name: 'terms', component: Terms },
+ {path: '/favorite', name: 'favorite', component: FavoriteList},
]
const router = createRouter({
