Merge branch 'main' of https://github.com/ciderapp/Cider

package.json

@@ -2,7 +2,7 @@
   "name": "cider",
   "applicationId": "Cider",
   "productName": "Cider",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "A new cross-platform Apple Music experience based on Electron and Vue.js written from scratch with performance in mind.",
   "license": "AGPL-3.0",
   "main": "./build/index.js",

src/i18n/en_US.json

@@ -632,17 +632,5 @@
   "oobe.visual.subtitle": "",
   "oobe.visual.text": "",
   "oobe.visual.layout.text": "Cider features two window different layouts.\nMaverick is an iTunes like layout with the player at the top of the window.\nMojave is a new spin created by the Cider Collective.\n\nYou can change the layout any time in the settings.",
-  "oobe.visual.suggestingThemes": "Theming is a great way to personalize your experience. Here are a few we suggest: ",
-  "oobe.visual.suggestingThemes.subtext": "(These themes will be downloaded from GitHub)",
-  "oobe.visual.suggestingThemes.default": "Cider",
-  "oobe.visual.suggestingThemes.default.text": "The classic Cider theme.",
-  "oobe.visual.suggestingThemes.dark": "Dark",
-  "oobe.visual.suggestingThemes.dark.text": "Darkness.",
-  "oobe.visual.suggestingThemes.community1": "Groovy",
-  "oobe.visual.suggestingThemes.community1.text": "A WinUI influenced theme",
-  "oobe.visual.suggestingThemes.community2": "iTheme",
-  "oobe.visual.suggestingThemes.community2.text": "The classic big fruit layout.",
-  "oobe.visual.suggestingThemes.community3": "Dracula",
-  "oobe.visual.suggestingThemes.community3.text": "The iconic Dracula color scheme.",
   "oobe.amsignin.title": ""
 }

src/i18n/source/en_US.json

@@ -317,7 +317,7 @@
   "menubar.options.toggledevtools": "Toggle Developer Tools",
   "menubar.options.window": "Window",
   "menubar.options.minimize": "Minimize",
-  "menubar.options.plugins": "Plu-gins Menu",
+  "menubar.options.plugins": "Plugins Menu",
   "menubar.options.controls": "Controls",
   "menubar.options.volumeup": "Volume Up",
   "menubar.options.volumedown": "Volume Down",
@@ -361,6 +361,8 @@
   "settings.prompt.general.keybindings.update.success": "Keybind updated successfully. Press OK to relaunch Cider",
   "settings.option.general.themeUpdateNotification": "Automatically check for theme updates",
   "settings.option.general.showLovedTracksInline": "Show loved tracks inline",
+  "settings.option.general.pagination": "Items to show per page",
+  "settings.options.general.pagination.description": "This determines how many songs/albums to show initially for infinite scrolling, or how many songs/albums to show for a single page",
   "settings.description.search": "Search",
   "settings.description.albums": "Library Albums",
   "settings.description.artists": "Library Artists",
@@ -630,17 +632,5 @@
   "oobe.visual.subtitle": "",
   "oobe.visual.text": "",
   "oobe.visual.layout.text": "Cider features two window different layouts.\nMaverick is an iTunes like layout with the player at the top of the window.\nMojave is a new spin created by the Cider Collective.\n\nYou can change the layout any time in the settings.",
-  "oobe.visual.suggestingThemes": "Theming is a great way to personalize your experience. Here are a few we suggest: ",
-  "oobe.visual.suggestingThemes.subtext": "(These themes will be downloaded from GitHub)",
-  "oobe.visual.suggestingThemes.default": "Cider",
-  "oobe.visual.suggestingThemes.default.text": "The classic Cider theme.",
-  "oobe.visual.suggestingThemes.dark": "Dark",
-  "oobe.visual.suggestingThemes.dark.text": "Darkness.",
-  "oobe.visual.suggestingThemes.community1": "Groovy",
-  "oobe.visual.suggestingThemes.community1.text": "A WinUI influenced theme",
-  "oobe.visual.suggestingThemes.community2": "iTheme",
-  "oobe.visual.suggestingThemes.community2.text": "The classic big fruit layout.",
-  "oobe.visual.suggestingThemes.community3": "Dracula",
-  "oobe.visual.suggestingThemes.community3.text": "The iconic Dracula color scheme.",
   "oobe.amsignin.title": ""
 }

src/main/base/browserwindow.ts

@@ -120,6 +120,11 @@ export class BrowserWindow {
         "components/settings-plugins-github",
       ],
       appRoutes: [
+        {
+          page: "lzedit",
+          component: `<i18n-editor></i18n-editor>`,
+          condition: "$root.page == 'lzedit'",
+        },
         {
           page: "library-recentlyadded",
           component: `<cider-recentlyadded></cider-recentlyadded>`,

src/main/base/store.ts

@@ -189,7 +189,7 @@ export class Store {
       transparent: false,
       miniplayer_top_toggle: true,
       directives: {
-        windowLayout: "default",
+        windowLayout: "twopanel",
       },
       windowControlPosition: 0, // 0 default right
       nativeTitleBar: false,

src/renderer/audio/audio.js

@@ -367,7 +367,7 @@ const CiderAudio = {
     if (!CiderAudio.ccON) {
       CiderAudio.ccON = true;
       let searchInt = setInterval(async function () {
-        if (CiderAudio.context != null && CiderAudio.audioNodes.gainNode != null) {
+        if (CiderAudio.context != null && CiderAudio.audioNodes.intelliGainComp != null) {
           // var options = {
           //     mimeType: 'audio/webm; codecs=opus'
           // };

src/renderer/index.js

@@ -228,7 +228,6 @@ function isJson(item) {
 webGPU().then();
 
 function showOobe() {
-  return false;
   if (localStorage.getItem("music.ampwebplay.media-user-token") && localStorage.getItem("seenOOBE")) {
     return false;
   } else {

src/renderer/less/elements.less

@@ -908,7 +908,7 @@
 }
 
 .cd-mediaitem-mvview .artwork {
-  height: 172px;
+  height: auto;
   width: 300px;
   background: blue;
   border-top-left-radius: 6px;
@@ -918,6 +918,7 @@
   flex: 0 0 auto;
   margin: 6px;
   margin-top: 0px;
+  aspect-ratio: 1.7435897435897436;
 }
 
 .cd-mediaitem-mvview-overlay {

src/renderer/less/pages.less

@@ -1480,6 +1480,22 @@
   }
 }
 
+.i18n-page {
+  textarea {
+    background: black;
+    color: #eee;
+    font-weight: bold;
+    font-size: 1em;
+    font-family: system-ui, "Pretendard Variable";
+    padding: 0.5em;
+  }
+
+  .selectCol {
+    display: flex;
+    align-items: center;
+  }
+}
+
 // AudioLabs page
 .audiolabs-page {
   padding: 0px;

src/renderer/main/app.js

@@ -10,6 +10,7 @@ import { MusicKitTools } from "./musickittools.js";
 import { spawnMica } from "./mica.js";
 import { svgIcon } from "./components/svg-icon.js";
 import { sidebarLibraryItem } from "./components/sidebar-library-item.js";
+import { i18nEditor } from "./components/i18n-editor.js";
 
 // Define window objects
 window.app = app;

src/renderer/main/components/i18n-editor.js

@@ -0,0 +1,78 @@
+import { html } from "../html.js";
+
+export const i18nEditor = Vue.component("i18n-editor", {
+  // language=HTML
+  template: html`
+    <div class="content-inner i18n-page">
+      <div class="row nopadding">
+        <div class="col nopadding">
+          <h1>i18n Editor</h1>
+        </div>
+        <div class="col-auto nopadding selectCol">
+          <select class="md-select" @change="$root.setLz('');$root.setLzManual()" v-model="$root.cfg.general.language">
+            <optgroup :label="index" v-for="(categories, index) in getLanguages()">
+              <option v-for="lang in categories" :value="lang.code">{{lang.nameNative}} ({{lang.nameEnglish }})</option>
+            </optgroup>
+          </select>
+          <button class="md-btn" @click="exportLz">Export</button>
+        </div>
+      </div>
+      <hr />
+      <div class="md-option-container">
+        <template v-for="(val, key) in baseLz">
+          <div class="md-option-line" v-if="$root.lz[key]">
+            <div class="md-option-segment">{{ key }}</div>
+            <div class="md-option-segment">
+              <template v-if='typeof $root.lz[key] == "object"'>
+                <div v-for="(variant, vkey) in $root.lz[key]">
+                  {{variant}}
+                  <input type="text" v-model="$root.lz[key][vkey]" />
+                </div>
+              </template>
+              <textarea type="text" v-model="$root.lz[key]" v-else></textarea>
+            </div>
+          </div>
+          <div class="md-option-line" v-else>
+            <div class="md-option-segment">
+              <b>{{ key }}</b>
+            </div>
+            <div class="md-option-segment">
+              <textarea type="text" v-model="$root.lz[key]" :placeholder="val"></textarea>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  `,
+  data() {
+    return {
+      listing: ipcRenderer.sendSync("get-i18n-listing"),
+      baseLz: ipcRenderer.sendSync("get-i18n", "en_US"),
+    };
+  },
+  methods: {
+    exportLz() {
+      bootbox.alert(`<textarea spellcheck='false' style="width:100%;height: 300px;">${JSON.stringify(app.lz, true, " ")}</textarea>`);
+      notyf.success("Copied to clipboard");
+      navigator.clipboard.writeText(JSON.stringify(app.lz, true, " ")).then((r) => console.debug("Copied to clipboard."));
+    },
+    getLanguages: function () {
+      let langs = this.$root.lzListing;
+      let categories = {
+        main: [],
+        fun: [],
+        unsorted: [],
+      };
+      // sort by category if category is undefined or empty put it in "unsorted"
+      for (let i = 0; i < langs.length; i++) {
+        if (langs[i].category === undefined || langs[i].category === "") {
+          categories.unsorted.push(langs[i]);
+        } else {
+          categories[langs[i].category].push(langs[i]);
+        }
+      }
+      // return
+      return categories;
+    },
+  },
+});

src/renderer/main/events.js

@@ -50,6 +50,7 @@ const Events = {
         });
         app.showCollection(hist.data, app.getLz("term.history"));
       }
+      // CTRL+F10
       if (event.ctrlKey && event.keyCode == 121) {
         try {
           app.mk._services.mediaItemPlayback._currentPlayer.stop();
@@ -57,7 +58,19 @@ const Events = {
         try {
           app.mk._services.mediaItemPlayback._currentPlayer.destroy();
         } catch (e) {}
+        try {
+          let searchInt = setInterval(function () {
+            if (document.getElementById("apple-music-player")) {
+              //AudioOutputs.eqReady = true;
+              document.getElementById("apple-music-player").crossOrigin = "anonymous";
+              CiderAudio.source = CiderAudio.context.createMediaElementSource(document.getElementById("apple-music-player"));
+              CiderAudio.source.connect(CiderAudio.audioNodes.intelliGainComp);
+              clearInterval(searchInt);
+            }
+          }, 1000);
+        } catch (e) {}
       }
+      // CTRL+F11
       if (event.ctrlKey && event.keyCode == 122) {
         try {
           ipcRenderer.send("detachDT", "");

src/renderer/main/vueapp.js

@@ -22,6 +22,7 @@ const app = new Vue({
     lzListing: ipcRenderer.sendSync("get-i18n-listing"),
     search: {
       term: "",
+      cursor: -1,
       hints: [],
       showHints: false,
       results: {},
@@ -3875,6 +3876,17 @@ const app = new Vue({
           break;
       }
     },
+    searchCursor(e) {
+      if (e.keyCode == "40") {
+        if (this.search.hints.length - 1 < this.search.cursor + 1) return;
+        this.search.cursor++;
+        this.search.term = this.search.hints[this.search.cursor];
+      } else if (e.keyCode == "38") {
+        if (this.search.cursor == 0) return;
+        this.search.cursor--;
+        this.search.term = this.search.hints[this.search.cursor];
+      }
+    },
     async searchQuery(term = this.search.term) {
       let self = this;
       if (term == "") {

src/renderer/style.less

@@ -724,6 +724,7 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
 
 .search-hints-container {
   top: 44px;
+  background: rgb(30 30 30);
   #cmenu.container();
 
   .search-hints {
@@ -731,6 +732,10 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
 
     .search-hint {
       #cmenu.item();
+
+      &.active {
+        background: var(--keyColor);
+      }
     }
   }
 }

src/renderer/views/app/chrome-top.ejs

@@ -280,15 +280,16 @@
                     <input type="search" spellcheck="false" @click="$root.appRoute('search');"
                            @focus="search.showHints = true"
                            @blur="setTimeout(()=>{search.showHints = false}, 300)"
-                           v-on:keyup.enter="searchQuery();search.showHints = false" @change="$root.appRoute('search');"
+                           v-on:keyup.enter="searchQuery();search.showHints = false;search.cursor = -1" @change="$root.appRoute('search');"
+                           v-on:keyup="searchCursor"
                            @input="getSearchHints()"
                            :placeholder="$root.getLz('term.search') + '...'" v-model="search.term" ref="searchInput"
                            class="search-input" />
 
                     <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
                         <div class="search-hints">
-                            <button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
+                            <button class="search-hint text-overflow-elipsis" :class="{active: (search.cursor == index)}" v-for="(hint, index) in search.hints"
-                                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                                    @click="search.term = hint;search.showHints = false;searchQuery(hint);search.cursor = -1">
                                 {{ hint }}
                             </button>
                         </div>

src/renderer/views/components/mediaitem-mvview-sp.ejs

@@ -15,7 +15,7 @@
             </div>
             <div class="artwork">
                 <mediaitem-artwork
-                        :url="item.attributes?.artwork ? item.attributes?.artwork?.url : ''"
+                        :url="item.attributes?.editorialArtwork.subscriptionHero.url ?? item.attributes?.artwork"
                         :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="516" :width="900"
                 ></mediaitem-artwork>

src/renderer/views/components/sidebar.ejs

@@ -10,7 +10,8 @@
                             @click="$root.appRoute('search');"
                             @focus="$root.search.showHints = true"
                             @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
-                            v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false"
+                            v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false;$root.search.cursor = -1"
+                            v-on:keyup="$root.searchCursor"
                             @change="$root.appRoute('search');"
                             @input="$root.getSearchHints()"
                             :placeholder="$root.getLz('term.search') + '...'"
@@ -27,7 +28,7 @@
                             <button
                                     class="search-hint text-overflow-elipsis"
                                     v-for="hint in $root.search.hints"
-                                    @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)"
+                                    @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint);$root.search.cursor = -1"
                             >
                                 {{ hint }}
                             </button>

src/renderer/views/pages/oobe.ejs

@@ -6,10 +6,32 @@
             <div class="oobe-header">
                 {{ getLz("oobe.amupsell.title") }}
             </div>
-            <div class="oobe-body text">{{ getLz("oobe.amupsell.text") }}</div>
+            <div class="oobe-body text">{{ getLz("oobe.amupsell.text") }}
+
+              <div class="md-option-line">
+                <div class="md-option-segment">
+                    {{$root.getLz('term.language')}}
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <label>
+                        <select class="md-select" @change="$root.setLz('');$root.setLzManual()"
+                                v-model="$root.cfg.general.language">
+                            <optgroup :label="index" v-for="(categories, index) in getLanguages()">
+                                <option v-for="lang in categories" :value="lang.code">
+                                    {{lang.nameNative}}
+                                    ({{
+                                    lang.nameEnglish }})
+                                </option>
+                            </optgroup>
+                        </select>
+                    </label>
+                </div>
+              </div>
+
+            </div>
             <div class="oobe-footer">
                 <div class="btn-group">
-                    <div class="md-btn" @click="screen = 'welcome'">{{ getLz("oobe.next") }}</div>
+                    <div class="md-btn md-btn-primary" @click="screen = 'welcome'">{{ getLz("oobe.next") }}</div>
                 </div>
             </div>
         </div>
@@ -25,7 +47,7 @@
             <div class="oobe-footer">
                 <div class="btn-group">
                     <div class="md-btn" @click="screen = 'before_we_start'">{{ getLz("oobe.previous") }}</div>
-                    <div class="md-btn" @click="screen = 'general'">{{ getLz("oobe.next") }}</div>
+                    <div class="md-btn md-btn-primary" @click="screen = 'visual'">{{ getLz("oobe.next") }}</div>
                 </div>
             </div>
         </div>
@@ -37,11 +59,11 @@
             <div class="oobe-header">
                 {{ getLz("oobe.general.title") }}
             </div>
-            <div class="oobe-body text">{{ getLz("oobe.general.text") }}</div>
+            <div class="oobe-body text"></div>
             <div class="oobe-footer">
                 <div class="btn-group">
                     <div class="md-btn" @click="screen = 'welcome'">{{ getLz("oobe.previous") }}</div>
-                    <div class="md-btn" @click="screen = 'visual'">{{ getLz("oobe.next") }}</div>
+                    <div class="md-btn md-btn-primary" @click="screen = 'visual'">{{ getLz("oobe.next") }}</div>
                 </div>
             </div>
         </div>
@@ -84,8 +106,8 @@
             </div>
             <div class="oobe-footer">
                 <div class="btn-group">
-                    <div class="md-btn" @click="screen = 'general'">{{ getLz("oobe.previous") }}</div>
+                    <div class="md-btn" @click="screen = 'welcome'">{{ getLz("oobe.previous") }}</div>
-                    <div class="md-btn" @click="screen = 'audio'">{{ getLz("oobe.next") }}</div>
+                    <div class="md-btn md-btn-primary" @click="screen = 'audio'">{{ getLz("oobe.next") }}</div>
                 </div>
             </div>
         </div>
@@ -118,7 +140,7 @@
             <div class="oobe-footer">
                 <div class="btn-group">
                     <div class="md-btn" @click="screen = 'visual'">{{ getLz("oobe.previous") }}</div>
-                    <div class="md-btn" @click="signIn()">{{ getLz("oobe.next") }}</div>
+                    <div class="md-btn md-btn-primary" @click="signIn()">{{ getLz("oobe.next") }}</div>
                 </div>
             </div>
         </div>
@@ -164,6 +186,24 @@
       },
       getLz() {
         return this.$root.getLz.apply(this.$root, arguments);
+      },
+      getLanguages: function() {
+        let langs = this.$root.lzListing
+        let categories = {
+          "main": [],
+          "fun": [],
+          "unsorted": []
+        }
+        // sort by category if category is undefined or empty put it in "unsorted"
+        for (let i = 0; i < langs.length; i++) {
+          if (langs[i].category === undefined || langs[i].category === "") {
+            categories.unsorted.push(langs[i])
+          } else {
+            categories[langs[i].category].push(langs[i])
+          }
+        }
+        // return
+        return categories
       }
     }
   });