Merge branch 'upcoming' into upcoming

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",
@@ -135,12 +136,12 @@
       "backgroundColor": "transparent",
       "setBuildNumber": true
     },
-		"nsis": {
+    "nsis": {
       "oneClick": false,
       "perMachine": false,
       "allowToChangeInstallationDirectory": true,
-			"license": "LICENSE",
+      "license": "LICENSE",
-			"deleteAppDataOnUninstall": true
+      "deleteAppDataOnUninstall": true
     },
     "win": {
       "target": [

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

@@ -171,4 +171,5 @@
   // Web Remote
   "remote.web.title": "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/components/mediaitem-artwork.ejs

@@ -3,6 +3,7 @@
          v-observe-visibility="{callback: visibilityChanged}">
         <img :src="app.getMediaItemArtwork(url, size, width)"
              decoding="async" loading="lazy"
+             :style="{background: bgcolor}"
              class="mediaitem-artwork--img">
         <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
             <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
@@ -22,6 +23,10 @@
                 type: [String, Number],
                 required: false
             },
+            bgcolor: {
+                type: String,
+                default: ''
+            },
             url: {
                 type: String,
                 default: ''

src/renderer/views/components/mediaitem-list-item.ejs

@@ -28,6 +28,7 @@
                 <mediaitem-artwork
                         :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                         :size="48"
+                        :bgcolor="getBgColor()"
                         :type="item.type"></mediaitem-artwork>
                 <button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
             </div>
@@ -102,6 +103,10 @@
             this.getClasses()
         },
         methods: {
+            getBgColor() {
+                let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
+                return color
+            },
             async checkLibrary() {
                 if(this.addedToLibrary) {return this.addedToLibrary}
                 if(this.item.type.includes("library-playlists") || this.item.type.includes("station")) {

src/renderer/views/components/mediaitem-square.ejs

@@ -11,6 +11,7 @@
                             :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                             :size="size"
                             shadow="subtle"
+                            :bgcolor="getBgColor()"
                             :type="item.type"></mediaitem-artwork>
                 </div>
                 <button class="menu-btn" v-if="!nomenu.includes(item.type)"
@@ -75,22 +76,8 @@
         },
         methods: {
             getBgColor() {
-                let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : `333333`}`
+                let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
-                let c = color.substring(1);      // strip #
+                return color
-                var rgb = parseInt(c, 16);   // convert rrggbb to decimal
-                var r = (rgb >> 16) & 0xff;  // extract red
-                var g = (rgb >>  8) & 0xff;  // extract green
-                var b = (rgb >>  0) & 0xff;  // extract blue
-
-                var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
-
-                if (luma > 140) {
-                    return "#aaaaaa"
-                }else{
-                    return color
-                }
-
-
             },
             getSubtitle() {
                 if(this.kind == 'card') {

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">