implemented i18n on sidebar, added language setting in settings

package.json

@@ -38,6 +38,7 @@
     "electron-window-state": "^5.0.3",
     "express": "^4.17.2",
     "get-port": "^5.1.1",
+    "jsonc": "^2.0.0",
     "lastfmapi": "^0.1.1",
     "mdns-js": "github:bitfocus/node-mdns-js",
     "mpris-service": "^2.1.2",

src/i18n/en_GB.jsonc

@@ -0,0 +1,3 @@
+{
+    "home.friendsListeningTo": "Bruv's Listening To"
+}

src/i18n/en_US.jsonc

@@ -25,6 +25,9 @@
   "term.queue": "Queue",
   "term.search": "Search",
   "term.library": "Library",
+  "term.listenNow": "Listen Now",
+  "term.browse": "Browse",
+  "term.radio": "Radio",
   "term.recentlyAdded": "Recently Added",
   "term.songs": "Songs",
   "term.albums": "Albums",
@@ -171,5 +174,5 @@
   
   // Web Remote
   "remote.web.title": "Cider Remote",
-  "remote.web.description": "Scan the QR code to pair your phone up with this Cider instance",
+  "remote.web.description": "Scan the QR code to pair your phone up with this Cider instance"
 }

src/i18n/ja_JP.jsonc

@@ -170,5 +170,5 @@
   
   // Web Remote
   "remote.web.title": "Cider リモート",
-  "remote.web.description": "QR コードを使用して、Ciderとスマートフォンをペアリングする",
+  "remote.web.description": "QR コードを使用して、Ciderとスマートフォンをペアリングする"
 }

src/i18n/tr_TR.jsonc

@@ -91,5 +91,5 @@
   "settings.header.connectivity": "Diğer Servisler",
   "settings.header.connectivity.description": "Cider'i diğer servislere bağlayarak deneyiminizi zenginleştirin.",
   "settings.header.experimental": "Deneysel",
-  "settings.header.experimental.description": "Cider'deki deneysel özelliklere erişim sağlayın. (Not: Bazı özellikler düzgün çalışmayabilir.)",
+  "settings.header.experimental.description": "Cider'deki deneysel özelliklere erişim sağlayın. (Not: Bazı özellikler düzgün çalışmayabilir.)"
 }

src/i18n/zh_CN.jsonc

@@ -172,5 +172,5 @@
   
   // Web Remote
   "remote.web.title": "Cider 远程控制",
-  "remote.web.description": "扫描以下的二维码以控制 Cider",
+  "remote.web.description": "扫描以下的二维码以控制 Cider"
 }

src/i18n/zh_TW.jsonc

@@ -172,5 +172,5 @@
   
   // Web Remote
   "remote.web.title": "Cider 遠控",
-  "remote.web.description": "掃描以下的行動條碼以控制 Cider",
+  "remote.web.description": "掃描以下的行動條碼以控制 Cider"
 }

src/main/base/win.ts

@@ -12,6 +12,7 @@ import * as os from "os";
 import * as mm from 'music-metadata';
 import fetch from 'electron-fetch'
 import {wsapi} from "./wsapi";
+import * as jsonc from "jsonc";
 
 export class Win {
     win: any | undefined = null;
@@ -287,6 +288,24 @@ export class Win {
             event.returnValue = process.platform;
         });
 
+        console.warn(path.join(__dirname, "../../src/i18n/en_US.jsonc"))
+
+        electron.ipcMain.on("get-i18n", (event, key) => {
+            let i18nBase = fs.readFileSync(path.join(__dirname, "../../src/i18n/en_US.jsonc"), "utf8");
+            i18nBase = jsonc.parse(i18nBase)
+            try {
+                let i18n = fs.readFileSync(path.join(__dirname, `../../src/i18n/${key}.jsonc`), "utf8");
+                i18n = jsonc.parse(i18n)
+                Object.assign(i18nBase, i18n)
+            }catch(e) {
+                console.error(e);
+                event.returnValue = e;
+            }
+
+            event.returnValue = i18nBase;
+
+        });
+
         electron.ipcMain.on("get-gpu-mode", (event) => {
             event.returnValue = process.platform;
         });

src/renderer/index.js

@@ -134,9 +134,7 @@ const app = new Vue({
         platform: "",
         mk: {},
         quickPlayQuery: "",
-        lz: {
+        lz: ipcRenderer.sendSync("get-i18n", "en_US"),
-
-        },
         search: {
             term: "",
             hints: [],
@@ -339,6 +337,12 @@ const app = new Vue({
         },
     },
     methods: {
+        setLz(lang) {
+            if(lang == "") {
+                lang = this.cfg.general.language
+            }
+            this.lz = ipcRenderer.sendSync("get-i18n", lang)
+        },
         getLz(message) {
             if(this.lz[message]) {
                 return this.lz[message]
@@ -499,6 +503,7 @@ const app = new Vue({
         },
         async init() {
             let self = this
+            this.setLz(this.cfg.general.language)
             clearTimeout(this.hangtimer)
             this.mk = MusicKit.getInstance()
             let needsReload = (typeof localStorage["music.ampwebplay.media-user-token"] == "undefined")

src/renderer/views/main.ejs

@@ -204,32 +204,32 @@
                         <div class="app-sidebar-header-text">
                             Cider
                         </div>
-                        <sidebar-library-item name="Home" svg-icon="./assets/feather/home.svg" page="home">
+                        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
                         </sidebar-library-item>
                         <div class="app-sidebar-header-text">
                             Apple Music
                         </div>
-                        <sidebar-library-item name="Listen Now" svg-icon="./assets/feather/play-circle.svg"
+                        <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
                                               page="listen_now"></sidebar-library-item>
-                        <sidebar-library-item name="Browse" svg-icon="./assets/feather/globe.svg" page="browse">
+                        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse">
                         </sidebar-library-item>
-                        <sidebar-library-item name="Radio" svg-icon="./assets/feather/radio.svg" page="radio">
+                        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
                         </sidebar-library-item>
                         <div class="app-sidebar-header-text">
                             Library
                         </div>
-                        <sidebar-library-item name="Recently Added" svg-icon="./assets/feather/plus-circle.svg"
+                        <sidebar-library-item :name="$root.getLz('term.recentlyAdded')" svg-icon="./assets/feather/plus-circle.svg"
                                               page="library-recentlyadded"></sidebar-library-item>
-                        <sidebar-library-item name="Songs" svg-icon="./assets/feather/music.svg"
+                        <sidebar-library-item :name="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
                                               page="library-songs"></sidebar-library-item>
-                        <sidebar-library-item name="Albums" svg-icon="./assets/feather/disc.svg"
+                        <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
                                               page="library-albums"></sidebar-library-item>
-                        <sidebar-library-item name="Artists" svg-icon="./assets/feather/user.svg"
+                        <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
                                               page="library-artists"></sidebar-library-item>
-                        <sidebar-library-item name="Podcasts" svg-icon="./assets/feather/mic.svg" page="podcasts">
+                        <sidebar-library-item :name="$root.getLz('term.podcasts')" svg-icon="./assets/feather/mic.svg" page="podcasts">
                         </sidebar-library-item>
                         <div class="app-sidebar-header-text" @contextmenu="playlistHeaderContextMenu">
-                            Playlists
+                            {{ $root.getLz('term.playlists') }}
                         </div>
                         <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
                         </sidebar-playlist>
@@ -240,7 +240,7 @@
                                 <button class="usermenu-item" @click="showWebRemoteQR()">
                                     <div class="row nopadding">
                                         <div class="col nopadding">
-                                            Show Web Remote QR
+                                            {{$root.getLz('action.showWebRemoteQR')}}
                                         </div>
                                     </div>
                                 </button>

src/renderer/views/pages/settings.ejs

@@ -508,6 +508,22 @@
                     </button>
                 </div>
             </div>
+
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Language
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" @change="$root.setLz('')" v-model="app.cfg.general.language">
+                        <option value="en_US">en_US</option>
+                        <option value="el_GR">el_GR</option>
+                        <option value="ja_JP">ja_JP</option>
+                        <option value="tr_TR">tr_TR</option>
+                        <option value="zh_CN">zh_CN</option>
+                        <option value="zh_TW">zh_TW</option>
+                    </select>
+                </div>
+            </div>
         </div>
             <div style="opacity: 0.5; pointer-events: none">
                 <div class="md-option-header">