commit 73045e76812235aeb63d929c74a8c2bd6ae1d81b
parent 85375fa55bf501401d7894089ac762c0902320a8
Author: Sunny <kajimalu10@gmail.com>
Date: Sat, 29 Mar 2025 20:40:34 +0900
songs translation
Diffstat:
6 files changed, 85 insertions(+), 97 deletions(-)
diff --git a/src/assets/AlbumsList.json b/src/assets/AlbumsList.json
@@ -1,82 +1,52 @@
[
{
- "albumTitle": {
- "ja": "アルバム1",
- "en": "Album1"
- },
+ "albumTitleKey": "album.album1",
"songs": [
{
- "title": {
- "ja": "曲1",
- "en": "Song 1"
- },
+ "titleKey": "song.song1",
"videoId": "QcrxntJERRs"
},
{
- "title": {
- "ja": "曲2",
- "en": "Song 2"
- },
+ "titleKey": "song.song2",
"videoId": "BrpIRBW4g0A"
}
]
},
{
- "albumTitle": {
- "ja": "アルバム2",
- "en": "Album2"
- },
+ "albumTitleKey": "album.album2",
"songs": [
{
- "title": {
- "ja": "曲A",
- "en": "Song A"
- },
+ "titleKey": "song.songA",
"videoId": "L_jWHffIx5E"
}
]
},
{
"albumArt": "/AlbumArts/Featured_Original_Soundtrack.png",
- "albumTitle": {
- "ja": "原神OST(公式)あああああああああああああああああああああああ",
- "en": "Genshin-OST(Official)"
- },
+ "albumTitleKey": "album.genshinOST",
"songs": [
{
- "title": {
- "ja": "スペシャルEP「幽谷の舟唄」"
- },
+ "titleKey": "song.specialEP",
"videoId": "QK7ZG2JXYB4"
},
{
- "title": {
- "ja": "輝く星星Vol.5"
- },
+ "titleKey": "song.shiningStarsVol5",
"videoId": "rnQvbUSf1TM"
},
{
- "title": {
- "ja": "流星の奇跡Vol.3"
- },
+ "titleKey": "song.meteorMiracleVol3",
"videoId": "q6V8_s7F-1A"
},
{
- "title": {
- "ja": "真珠の歌4 集う光彩"
- },
+ "titleKey": "song.pearlSong4Light",
"videoId": "a657IulU7g0"
},
{
- "title": {
- "ja": "真珠の歌4 言葉なき歌"
- },
+ "titleKey": "song.pearlSong4Silent",
"videoId": "8Is8VZ7kXCc"
},
{
- "title": {
- "ja": "真珠の歌 真夏の歌"
- },
+ "titleKey": "song.pearlSongSummer",
"videoId": "5Xj4cxvNxkk"
}
]
diff --git a/src/components/AlbumList.vue b/src/components/AlbumList.vue
@@ -1,47 +1,27 @@
<script setup lang="ts">
import AlbumList from '../assets/AlbumsList.json';
import queue, { type Queue } from '../queue';
+import { useI18n } from 'vue-i18n';
-let Albums = AlbumList;
-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") || "");
-}
-interface Songs {
- title:{ja: string,en: string};
- videoId: string
-}
-let songs_from_favoriteList: Songs[] = [];
-favorite_list.map((song, ) => {
- songs_from_favoriteList.push({title:{ja:song.SongName,en:song.SongName},videoId:song.videoId});
-})
-
-if(Albums[Albums.length -1].albumTitle.en == "FavoriteList"){
- Albums.pop();
-}
-Albums.push({albumTitle:{en:"FavoriteList",ja:"お気に入り"}, songs:songs_from_favoriteList})
+const { t } = useI18n();
function add_play_album(albumIndex: number) {
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
+ const albumSongList: Queue[] = AlbumList[albumIndex].songs.map((song) => {
+ const queueinter: Queue = { videoId: song.videoId, SongName: t(song.titleKey) };
+ return queueinter;
+ });
+ queue.add_album(albumSongList, t(AlbumList[albumIndex].albumTitleKey));
}
</script>
<template>
<div class="page">
<div class="album-container">
- <div v-for="(AlbumList, index) in AlbumList">
- <button
- v-on:click="add_play_album(index)" class="button_album">
- <img :src=AlbumList.albumArt alt="" sizes="" srcset="">
- <div class="album-title">{{ AlbumList.albumTitle.ja }}</div>
+ <div v-for="(Album, index) in AlbumList" :key="index">
+ <button @click="add_play_album(index)" class="button_album">
+ <img :src="Album.albumArt" alt="" />
+ <div class="album-title">{{ t(Album.albumTitleKey) }}</div>
</button>
</div>
</div>
diff --git a/src/components/Player.vue b/src/components/Player.vue
@@ -1,10 +1,11 @@
<script setup lang="ts">
import { YoutubeIframe } from '@vue-youtube/component';
-import { ref, computed, onMounted, onUnmounted, watch, nextTick} from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
import queue from '../queue';
import Tracklist from './TrackList.vue';
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiRepeatOnce, mdiRepeatOff, mdiStarCheck, mdiStarPlusOutline, mdiSkipPrevious, mdiSkipNext } from '@mdi/js';
+import { useI18n } from 'vue-i18n';
// define Emit event
const emit = defineEmits(["update:isFullscreen"]);
@@ -18,12 +19,20 @@ const endTime = ref(0);
const intervalId = ref<number | null>(null);
const isPlaying = ref(false);
-// Video title
-const title = ref();
-const titleName = ref();
+// Album and song info
+const { t, locale } = useI18n();
+const albumTitle = ref(t(queue.get_albumTitle())); // 初期値を翻訳キーで設定
-// Album info
-let albumTitle = queue.get_albumTitle();
+// 現在の曲名をリアクティブに取得
+const songTitle = computed(() => {
+ const nowSong = queue.get_nowSong();
+ return t(nowSong.SongName); // 翻訳キーを使用して曲名を取得
+});
+
+// 言語変更時にアルバムタイトルを更新
+watch(locale, () => {
+ albumTitle.value = t(queue.get_albumTitle());
+});
// Fullscreen mode
const isFullscreen = ref(false);
@@ -40,7 +49,7 @@ const toggleFullscreen = () => {
watch(isFullscreen, (newVal, oldVal) => {
if (newVal !== oldVal) {
animationClass.value = newVal ? "slide-up" : "slide-down";
-
+
// Remove animation class after transition
setTimeout(() => {
animationClass.value = "";
@@ -57,8 +66,6 @@ const togglePlay = async () => {
// When player is ready
const onReady = (event: { target: any }) => {
endTime.value = Math.floor(event.target.getDuration());
- title.value = event.target.getVideoData();
- titleName.value = title.value['title'];
};
// Handle video state changes
@@ -80,7 +87,7 @@ const onStateChange = (event: { target: any; data: number }) => {
isPlaying.value = false;
}
- albumTitle = queue.get_albumTitle();
+ albumTitle.value = t(queue.get_albumTitle()); // 言語変更時にアルバムタイトルを更新
};
// Format time as mm:ss
@@ -117,7 +124,7 @@ const adjustScale = async () => {
// Add event listeners for resize and orientation change
onMounted(() => {
window.addEventListener("resize", adjustScale); // Recalculate scale when resizing window
- window.addEventListener("orientationchange", adjustScale); // R-s-w changing screen orientation
+ window.addEventListener("orientationchange", adjustScale); // Recalculate scale when changing screen orientation
adjustScale();
});
@@ -138,10 +145,7 @@ const renderKey = queue.get_playerRenderKey();
<div class="layout">
<div
ref="fscontainer"
- :class="[
- isFullscreen ? 'fscontainer' : 'container',
- animationClass
- ]"
+ :class="[isFullscreen ? 'fscontainer' : 'container', animationClass]"
:key="renderKey"
>
<youtube-iframe
@@ -162,7 +166,7 @@ const renderKey = queue.get_playerRenderKey();
<div class="info_box">
<!-- Video title -->
<div class="title" @click="toggleFullscreen">
- {{ titleName }}
+ {{ songTitle }}
</div>
<!-- Time and album info -->
@@ -210,10 +214,7 @@ const renderKey = queue.get_playerRenderKey();
</div>
<div
- :class="[
- isFullscreen ? 'fstracklist-container' : 'tracklist-container',
- animationClass
- ]"
+ :class="[isFullscreen ? 'fstracklist-container' : 'tracklist-container', animationClass]"
>
<Tracklist />
</div>
@@ -222,4 +223,4 @@ const renderKey = queue.get_playerRenderKey();
<style scoped>
@import '../player-style.css';
-</style>
+</style>+
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -12,6 +12,20 @@
"info": "Operator Info"
},
"album": {
- "favorite": "Favorite"
+ "favorite": "Favorite",
+ "album1": "Album 1",
+ "album2": "Album 2",
+ "genshinOST": "Genshin-OST (Official)"
+ },
+ "song": {
+ "song1": "Song 1",
+ "song2": "Song 2",
+ "songA": "Song A",
+ "specialEP": "Special EP 'Song of the Valley'",
+ "shiningStarsVol5": "Shining Stars Vol.5",
+ "meteorMiracleVol3": "Meteor Miracle Vol.3",
+ "pearlSong4Light": "Pearl Song 4: Gathering Light",
+ "pearlSong4Silent": "Pearl Song 4: Silent Song",
+ "pearlSongSummer": "Pearl Song: Summer Song"
}
}
\ No newline at end of file
diff --git a/src/locales/ja.json b/src/locales/ja.json
@@ -12,6 +12,20 @@
"info": "運営者情報"
},
"album": {
- "favorite": "お気に入り"
+ "favorite": "お気に入り",
+ "album1": "アルバム1",
+ "album2": "アルバム2",
+ "genshinOST": "原神OST (公式)"
+ },
+ "song": {
+ "song1": "曲1",
+ "song2": "曲2",
+ "songA": "曲A",
+ "specialEP": "スペシャルEP「幽谷の舟唄」",
+ "shiningStarsVol5": "輝く星星Vol.5",
+ "meteorMiracleVol3": "流星の奇跡Vol.3",
+ "pearlSong4Light": "真珠の歌4 集う光彩",
+ "pearlSong4Silent": "真珠の歌4 言葉なき歌",
+ "pearlSongSummer": "真珠の歌 真夏の歌"
}
}
\ No newline at end of file
diff --git a/src/queue.ts b/src/queue.ts
@@ -3,6 +3,7 @@ This Script manages the queue for play.
*/
import { ref } from "vue";
+import { useI18n } from "vue-i18n";
export interface Queue {
videoId: string;
@@ -40,6 +41,8 @@ function get_next(): string | null {
}
function get_nowSong(): Queue {
+ const { t } = useI18n();
+
const favoriteList: Queue[] = JSON.parse(localStorage.getItem("favorite") || "[]");
for (let i = 0; i < favoriteList.length; i++) {
if (favoriteList[i].videoId === queue.value[0]?.videoId) {
@@ -48,7 +51,12 @@ function get_nowSong(): Queue {
}
}
console.log("isFavorite is " + isFavorite.value);
- return queue.value.length > 0 ? queue.value[0] : { videoId: "", SongName: "" };
+
+ const currentSong = queue.value.length > 0 ? queue.value[0] : { videoId: "", SongName: "" };
+ return {
+ ...currentSong,
+ SongName: t(currentSong.SongName),
+ };
}
function add_album(Album: Queue[], AlbumTitle: string) {
