feat: i18n ( #4 ).

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v1.0.5
+- i18n ( [#4](https://github.com/Vincent-the-gamer/Nemassler/issues/4) )
+
 # v1.0.4
 - Typescriptify
-- Filter non-mp3 files in mp3 folder( #3 )
+- Filter non-mp3 files in mp3 folder( [#3](https://github.com/Vincent-the-gamer/Nemassler/issues/3) )

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "serve": "vite",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@vincent-the-gamer/utils": "^0.1.5",
     "axios": "^1.5.0",
+    "svelte-i18n": "^4.0.0",
     "svelte-spa-router": "^3.3.0"
   }
 }

frontend/src/i18n/en.json

@@ -0,0 +1,21 @@
+{
+    "other-func": "Other function",
+    "anime-pics": "Anime Pics",
+    "ncm2mp3": "ncm to mp3",
+    "description": "Put .ncm files into ncm folder, then click the button",
+    "ncmInput": "ncm input directory",
+    "mp3Output": "mp3 output directory",
+    "songcoverOutput": "songcover output directory",
+    "convertAll": "Convert All",
+    "filterNonMp3": "Filter out non-mp3 files",
+    "calcBPM": "Calculate BPM",
+    "bpmDescription": "Choose existing mp3 file (xxx.mp3) in your custom mp3 folder to calculate BPM",
+    "bpmNoFile": "No mp3 file to calculate!",
+    "bpmRefresh": "Refresh",
+    "audioHandler": "Audio Handler",
+    "hentaiMode": "Hentai Mode",
+    "howMany": "How many pics do you want",
+    "getPic": "Fetch pic",
+    "empty": "Empty piclist",
+    "picShowArea": "Pic Show Area"
+}

frontend/src/i18n/index.ts

@@ -0,0 +1,26 @@
+import { addMessages, init, locale } from "svelte-i18n"
+
+import en from "./en.json"
+import zh from "./zh.json"
+
+export default function i18n(){
+    const storageLocale = localStorage.getItem("initLocale")
+    addMessages("zh", zh)
+    addMessages("en", en)
+
+    let initialLocale = "en"
+
+    if(storageLocale) {
+        initialLocale = storageLocale
+    }
+
+    // on locale change
+    locale.subscribe(value => {
+        localStorage.setItem("initLocale", value!)
+    })
+
+    init({
+        fallbackLocale: "zh",
+        initialLocale
+    })
+}

frontend/src/i18n/zh.json

@@ -0,0 +1,21 @@
+{
+    "other-func": "其他功能",
+    "anime-pics": "妹子图片",
+    "ncm2mp3": "ncm转mp3",
+    "description": "将.ncm后缀文件放入ncm文件夹，然后点击以下按钮即可批量转mp3",
+    "ncmInput": "ncm输入路径",
+    "mp3Output": "mp3输出路径",
+    "songcoverOutput": "歌曲封面输出路径",
+    "convertAll": "批量转mp3",
+    "filterNonMp3": "删除mp3文件夹中非mp3后缀文件",
+    "calcBPM": "计算BPM",
+    "bpmDescription": "选择文件夹里面已有的mp3文件 (xxx.mp3), 计算BPM",
+    "bpmNoFile": "没有待检测bpm的mp3文件",
+    "bpmRefresh": "刷新",
+    "audioHandler": "音频处理",
+    "hentaiMode": "绅士(Hentai)模式",
+    "howMany": "你要几张图片",
+    "getPic": "获取图片",
+    "empty": "清空图片列表",
+    "picShowArea": "图片展示区"
+}

frontend/src/lib/Header.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
     import Icon from "@/assets/icon.png";
     import useElectronHref from "@/hooks/useElectronHref";
-    import { language } from "@/store/languageStore";
+    import { get } from "svelte/store";
+    import { _, locale } from "svelte-i18n"
 
     const electronHref = useElectronHref("https://github.com/Vincent-the-gamer/Nemassler")
-
-    function changeLocalStorageLanguage() {
-        localStorage.setItem("language", $language);
-    }
 </script>
 
 <header>
@@ -17,16 +14,10 @@
     </span>
 
     <span class="right">
-        <div class="text">
-            {#if $language === "zh"}
-                <span id="zh">语言:</span>
-            {:else}
-                <span id="en">Language:</span>
-            {/if}
-        </div>
-        <select bind:value={$language} on:change={changeLocalStorageLanguage}>
-            <option value="zh">简体中文</option>
+        <span class="text">Language:</span>
+        <select bind:value={$locale}>
             <option value="en">English</option>
+            <option value="zh">简体中文</option>
         </select>
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -88,24 +79,14 @@ header
           right: 100px
         
 
-    .text
-        & #zh
-            position absolute
-            top 11px
-            height 35px
-            right 150px
-            width 100px
-            border-radius 5px
-        
-        & #en
+        .text
             position absolute
             top 10px
             height 35px
             right 200px
             width 100px
             border-radius 5px
         
-        
     select
         position absolute
         top 5px