Merge remote-tracking branch 'origin/develop' into develop

src/i18n/en_US.jsonc

@@ -143,6 +143,10 @@
   "term.recordLabels": "Record Labels",
   "term.videoExtras": "Video Extras",
   "term.top": "Top",
+  "term.lossless": "Lossless",
+  "term.lossless.description": "(up to 24-bit/48 kHz)",
+  "term.hireslossless": "Hi-Res Lossless",
+  "term.hireslossless.description": "(up to 24-bit/192 kHz)",
 
   // Home
   "home.title": "Home",
@@ -232,12 +236,18 @@
   "settings.header.audio": "Audio",
   "settings.header.audio.description": "Adjust the audio settings for Cider.",
   "settings.option.audio.quality": "Audio Quality", // Dropdown
+  "settings.header.audio.quality.hireslossless": "Hi-Res Lossless",
+  "settings.header.audio.quality.hireslossless.description": "(up to 24-bit/192 kHz)",
+  "settings.header.audio.quality.lossless": "Lossless",
+  "settings.header.audio.quality.lossless.description": "(up to 24-bit/48 kHz)",
   "settings.header.audio.quality.high": "High",
   "settings.header.audio.quality.low": "Low",
   "settings.header.audio.quality.auto": "Auto",
   "settings.option.audio.seamlessTransition": "Seamless Audio Transition", // Toggle
   "settings.option.audio.enableAdvancedFunctionality": "Enable Advanced Functionality", // Toggle
-  "settings.option.audio.enableAdvancedFunctionality.description": "Enabling AudioContext functionality will allow for extended audio features like Audio Normalization, Equalizers and Visualizers, however on some systems this may cause stuttering in audio tracks.",
+  "settings.option.audio.enableAdvancedFunctionality.description": "Enabling AudioContext functionality will allow for extended audio features like Audio Normalization , Equalizers and Visualizers, however on some systems this may cause stuttering in audio tracks.",
+  "settings.option.audio.enableAdvancedFunctionality.decryptLLPW": "Decrypt Lossless Playback Workflow", // Toggle
+  "settings.option.audio.enableAdvancedFunctionality.decryptLLPW.description": "Enables the ability for Cider to decrypt Lossless Audio Files. A minor performance hit will occur.",
   "settings.option.audio.enableAdvancedFunctionality.audioNormalization": "Audio Normalization", // Toggle
   "settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "Normalizes peak volume for individual tracks to create a more uniform listening experience.",
   "settings.option.audio.enableAdvancedFunctionality.audioSpatialization": "Audio Spatialization", // Toggle

src/i18n/ja_JP.jsonc

@@ -189,17 +189,26 @@
   "action.tray.quit": "終了",
   "action.tray.show": "表示",
   "action.update": "アップデート",
+  "action.copy": "コピー",
+  "action.newpreset": "ニュープリセット",  // Equalizer Preset
+  "action.deletepreset": "プリセットを削除",  // Equalizer Preset
 
   // Settings - Audio
   "settings.header.audio": "オーディオ",
   "settings.header.audio.description": "Ciderのオーディオ設定",
   "settings.option.audio.quality": "音質", // Dropdown
+  "settings.header.audio.quality.hireslossless": "ハイレゾロスレス",
+  "settings.header.audio.quality.hireslossless.description": "(最大解像度 24 ビット／192 kHz)",
+  "settings.header.audio.quality.lossless": "ロスレス",
+  "settings.header.audio.quality.lossless.description": "(最大解像度 24 ビット／48 kHz)",
   "settings.header.audio.quality.high": "高品質",
   "settings.header.audio.quality.low": "高効率",
   "settings.header.audio.quality.auto": "自動",
   "settings.option.audio.seamlessTransition": "曲間なしで再生", // Toggle
   "settings.option.audio.enableAdvancedFunctionality": "先進的な機能", // Toggle
   "settings.option.audio.enableAdvancedFunctionality.description": "AudioContext 機能を有効にすると、オーディオノーマライズ、空間オーディオ、イコライザーなどの機能を使用できますが、音が途切れるかもしれません。", // Toggle
+  "settings.option.audio.enableAdvancedFunctionality.decryptLLPW": "ロスレスオーディオ", // Toggle
+  "settings.option.audio.enableAdvancedFunctionality.decryptLLPW.description": "ロスレスオーディオを有効にする", // Toggle
   "settings.option.audio.enableAdvancedFunctionality.audioNormalization": "オーディオノーマライズ", // Toggle
   "settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "さまざまな曲の音量を均一にし、より整った音を楽しめるようにする機能です。",
   "settings.option.audio.enableAdvancedFunctionality.audioSpatialization": "オーディオ空間化", // Toggle

src/i18n/zh_CN.jsonc

@@ -197,6 +197,10 @@
   "settings.header.audio": "音频",
   "settings.header.audio.description": "调整 Cider 的音频设置",
   "settings.option.audio.quality": "音质", // Dropdown
+  "settings.header.audio.quality.hireslossless": "高解析度无损",
+  "settings.header.audio.quality.hireslossless.description": "(最高 24 位/192 kHz)",
+  "settings.header.audio.quality.lossless": "无损",
+  "settings.header.audio.quality.lossless.description": "(最高 24 位/48 kHz)",
   "settings.header.audio.quality.high": "高音质",
   "settings.header.audio.quality.low": "高效率",
   "settings.header.audio.quality.auto": "自动",

src/i18n/zh_TW.jsonc

@@ -189,18 +189,27 @@
   "action.tray.quit": "退出",
   "action.tray.show": "顯示",
   "action.update": "更新",
+  "action.copy": "複製",
+  "action.newpreset": "新預設",  // Equalizer Preset
+  "action.deletepreset": "刪除預設",  // Equalizer Preset
 
   
   // Settings - Audio
   "settings.header.audio": "音訊",
   "settings.header.audio.description": "調整Cider的音訊設定",
   "settings.option.audio.quality": "音訊音質", // Dropdown
+  "settings.header.audio.quality.hireslossless": "高解析度保真壓縮",
+  "settings.header.audio.quality.hireslossless.description": "(最高 24 位元/192 kHz)",
+  "settings.header.audio.quality.lossless": "保真壓縮",
+  "settings.header.audio.quality.lossless.description": "(最高 24 位元/48 kHz)",
   "settings.header.audio.quality.high": "高品質",
   "settings.header.audio.quality.low": "高效率",
   "settings.header.audio.quality.auto": "自動",
   "settings.option.audio.seamlessTransition": "無間斷播放", // Toggle
   "settings.option.audio.enableAdvancedFunctionality": "進階機能", // Toggle
   "settings.option.audio.enableAdvancedFunctionality.description": "啟用 AudioContext 將解鎖類似音訊標準化和等化器的進階機能。但是會在一些電腦造成音樂卡頓。",
+  "settings.option.audio.enableAdvancedFunctionality.decryptLLPW": "保真壓縮解碼", // Toggle
+  "settings.option.audio.enableAdvancedFunctionality.decryptLLPW.description": "給予 Cider 解碼保真壓縮檔案的能力。相對的，這將會增加運算工作量。",
   "settings.option.audio.enableAdvancedFunctionality.audioNormalization": "音訊標準化", // Toggle
   "settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "將平衡輕柔和響亮的歌曲，建立更統一的聆聽體驗。",
   "settings.option.audio.enableAdvancedFunctionality.audioSpatialization": "音訊空間化", // Toggle

src/main/base/store.ts

@@ -31,6 +31,7 @@ export class Store {
             "quality": "256",
             "seamless_audio": true,
             "normalization": false,
+            "decryptLLPW": false,
             "spatial": false,
             "maxVolume": 1,
             "volumePrecision": 0.1,

src/renderer/audio/audio.js

@@ -8,6 +8,8 @@ var CiderAudio = {
         audioBands : null,
         preampNode : null,
         vibrantbassNode: null,
+        llpw: null,
+        llpwEnabled: null
     },
     init: function (cb = function () { }) {
         //AudioOutputs.fInit = true;
@@ -29,6 +31,9 @@ var CiderAudio = {
         try{ CiderAudio.audioNodes.spatialNode.disconnect();} catch(e){}
         try{
             CiderAudio.audioNodes.preampNode.disconnect();
+            for (var i of CiderAudio.audioNodes.llpw){
+                i.disconnect();
+            }
             for (var i of CiderAudio.audioNodes.vibrantbassNode){
                 i.disconnect();
             }
@@ -121,7 +126,11 @@ var CiderAudio = {
         let VIBRANTBASSBANDS = app.cfg.audio.vibrantBass.frequencies;
         let VIBRANTBASSGAIN = app.cfg.audio.vibrantBass.gain;
         let VIBRANTBASSQ = app.cfg.audio.vibrantBass.Q;
+        LLPW_Q = [5, 1, 3.536, 1.25, 8.409, 1.25, 14.14, 7.071, 5, 0.625, 16.82, 20, 20, 20, 28.28, 28.28, 28.28, 20, 33.64, 33.64, 10, 28.28, 7.071, 3.856];
+        LLPW_GAIN = [0.38, -1.81, -0.23, -0.51, 0.4, 0.84, 0.36, -0.34, 0.27, -1.2, -0.42, -0.67, 0.81, 1.31, -0.71, 0.68, -1.04, 0.79, -0.73, -1.33, 1.17, 0.57, 0.35, 6.33];
+        LLPW_FREQUENCIES = [16.452, 24.636, 37.134, 74.483, 159.54, 308.18, 670.21, 915.81, 1200.7, 2766.4, 2930.6, 4050.6, 4409.1, 5395.2, 5901.6, 6455.5, 7164.1, 7724.1, 8449, 10573, 12368, 14198, 17910, 18916];
         CiderAudio.audioNodes.audioBands = []; CiderAudio.audioNodes.vibrantbassNode = []; 
+        CiderAudio.audioNodes.llpw = []; CiderAudio.audioNodes.llpwEnabled = 0;
 
         for (i = 0; i < BANDS.length; i++) {
             CiderAudio.audioNodes.audioBands[i] = CiderAudio.context.createBiquadFilter();
@@ -131,6 +140,14 @@ var CiderAudio = {
             CiderAudio.audioNodes.audioBands[i].gain.value = GAIN[i] * app.cfg.audio.equalizer.mix;
         }
         
+        for (i = 0; i < LLPW_FREQUENCIES.length; i++) {
+            CiderAudio.audioNodes.llpw[i] = CiderAudio.context.createBiquadFilter();
+            CiderAudio.audioNodes.llpw[i].type = 'peaking'; // 'peaking';
+            CiderAudio.audioNodes.llpw[i].frequency.value = LLPW_FREQUENCIES[i];
+            CiderAudio.audioNodes.llpw[i].Q.value = LLPW_Q[i];
+            CiderAudio.audioNodes.llpw[i].gain.value = LLPW_GAIN[i] * 0.5 * CiderAudio.audioNodes.llpwEnabled; 
+        }
+
         CiderAudio.audioNodes.preampNode = CiderAudio.context.createBiquadFilter();
         CiderAudio.audioNodes.preampNode.type = 'highshelf'; 
         CiderAudio.audioNodes.preampNode.frequency.value = 0; // allow all
@@ -147,13 +164,18 @@ var CiderAudio = {
         if (app.cfg.audio.spatial) {
             try{
             CiderAudio.audioNodes.spatialNode.output.disconnect(CiderAudio.context.destination); } catch(e){}
-            CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.preampNode);
+            CiderAudio.audioNodes.spatialNode.output.connect(CiderAudio.audioNodes.llpw[0]);
         } else {
             try{
             CiderAudio.audioNodes.gainNode.disconnect(CiderAudio.context.destination);} catch(e){}
-            CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.preampNode);
+            CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.llpw[0]);
         }
 
+        for (i = 1; i < LLPW_FREQUENCIES.length; i ++) {
+            CiderAudio.audioNodes.llpw[i-1].connect(CiderAudio.audioNodes.llpw[i]);
+        }
+        CiderAudio.audioNodes.llpw[LLPW_FREQUENCIES.length-1].connect(CiderAudio.audioNodes.preampNode);
+
         CiderAudio.audioNodes.preampNode.connect(CiderAudio.audioNodes.vibrantbassNode[0]);
 
         for (i = 1; i < VIBRANTBASSBANDS.length; i ++) {

src/renderer/index.js

@@ -748,12 +748,13 @@ const app = new Vue({
                 }
             })
 
-            ipcRenderer.on('play', function (_event, mode, id) {
+            ipcRenderer.on('play', function(_event, mode, id) {
-                if (mode !== 'url') {
+              if (mode !== 'url'){
-                    self.mk.setQueue({[mode]: id}).then(() => {
+                self.mk.setQueue({[mode]: id}).then(() => {
-                        app.mk.play()
+                    app.mk.play()
-                    })
+                })
-                } else {
+                
+              } else {
                     app.openAppleMusicURL(id)
                 }
             });
@@ -800,6 +801,7 @@ const app = new Vue({
                     }
                 }
                 
+
                 try {
                     a = a.item.attributes;
                 } catch (_) {
@@ -820,6 +822,7 @@ const app = new Vue({
                 // app.getNowPlayingArtwork(42); 
                 app.getNowPlayingArtworkBG(32);
                 app.loadLyrics();
+                app.losslessBadge();
 
                 // Playback Notifications
                 if (this.cfg.general.playbackNotifications && !document.hasFocus() && a.artistName && a.artwork && a.name) {
@@ -2345,6 +2348,22 @@ const app = new Vue({
             })
             notyf.success('Removed from library.')
         },
+        async losslessBadge() {
+            const songID = (this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem["_songId"] ?? -1 : -1;
+            if (app.cfg.audio.quality == 2304 && app.cfg.advanced.decryptLLPW && songID != -1) {
+                let extendedAssets = await app.mk.api.song(songID, {extend : 'extendedAssetUrls'})
+                if (extendedAssets.attributes.audioTraits.includes('lossless')) {
+                    app.mk.nowPlayingItem['attributes']['lossless'] = true
+                    CiderAudio.audioNodes.llpwEnabled = 1}
+                else {
+                    CiderAudio.audioNodes.llpwEnabled = 0
+                }    
+            }
+            
+            else {
+                CiderAudio.audioNodes.llpwEnabled = 0
+            }
+        },
         async loadYTLyrics() {
             const track = (this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.title ?? '' : '';
             const artist = (this.mk.nowPlayingItem != null) ? this.mk.nowPlayingItem.artistName ?? '' : '';

src/renderer/views/main.ejs

@@ -37,8 +37,555 @@
 <div id="app" :class="getAppClasses()">
     <transition name="fsModeSwitch">
         <div id="app-main" v-show="appMode == 'player'">
-            <%- include('app/chrome-top'); %>
+            <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
-            <%- include('app/app-navigation'); %>
+            <div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
+                <div class="app-chrome--left">
+                    <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left'">
+                        <div class="window-controls">
+                            <div class="close" @click="closeWindow()"></div>
+                            <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
+                            <div class="minmax restore" v-if="chrome.maximized"
+                                 @click="ipcRenderer.send('maximize')">
+                            </div>
+                            <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
+                        </div>
+                    </div>
+                    <div class="app-chrome-item full-height" v-else>
+                        <div class="app-title"></div>
+                    </div>
+                    <div class="app-chrome-item display--large">
+                        <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                                @click="mk.shuffleMode = 1"></button>
+                        <button class="playback-button--small shuffle active" v-else
+                                @click="mk.shuffleMode = 0"></button>
+                    </div>
+                    <div class="app-chrome-item display--large">
+                        <button class="playback-button previous" @click="prevButton()"></button>
+                    </div>
+                    <div class="app-chrome-item display--large">
+                        <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
+                        <button class="playback-button play" @click="mk.play()" v-else></button>
+                    </div>
+                    <div class="app-chrome-item display--large">
+                        <button class="playback-button next" @click="mk.skipToNextItem()"></button>
+                    </div>
+                    <div class="app-chrome-item display--large">
+                        <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                                @click="mk.repeatMode = 1"></button>
+                        <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+                                v-else-if="mk.repeatMode == 1"></button>
+                        <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+                                v-else-if="mk.repeatMode == 2"></button>
+                    </div>
+                </div>
+                <div class="app-chrome--center">
+                    <div class="app-chrome-item playback-controls">
+                        <template v-if="mkReady()">
+                            <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
+                                 @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
+                                <div class="artwork" @click="drawer.open = false; fullscreen(true)">
+                                    <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
+                                </div>
+                                <div class="playback-info">
+                                    <div class="song-name" style="-webkit-box-orient: horizontal;"
+                                        :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
+                                         :style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ] [mk.nowPlayingItem['attributes']['lossless'] == 'lossless' ? {'margin-left' : '23px'} : {'margin-left' : '0px'}]">
+                                        {{ mk.nowPlayingItem["attributes"]["name"] }}
+                                        <div class="explicit-icon"
+                                             v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
+                                             style="display: inline-block"></div>
+                                        <div class="lossless-badge"
+                                             v-if="mk.nowPlayingItem['attributes']['lossless']"
+                                             style="display: inline-block"></div>
+                                    </div>
+                                    <div class="song-artist-album">
+                                    <div class="song-artist-album-content"
+                                        :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
+                                         style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
+                                        <div class="item-navigate song-artist" style="display: inline-block"
+                                             @click="getNowPlayingItemDetailed(`artist`)">
+                                            {{ mk.nowPlayingItem["attributes"]["artistName"] }}
+                                        </div>
+                                        <div class="song-artist item-navigate" style="display: inline-block"
+                                             @click="getNowPlayingItemDetailed('album')"
+                                             v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
+                                            <div class="separator" style="display: inline-block;">{{"—"}}</div>
+                                            {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
+                                            (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                                        </div>
+                                    </div>
+                                    </div>
+
+                                    <div class="song-progress">
+                                        <div class="song-duration"
+                                             style="justify-content: space-between; height: 1px;"
+                                             :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
+                                            <p style="width: auto">{{ convertToMins(getSongProgress()) }}</p>
+                                            <p style="width: auto">{{ convertToMins(mk.currentPlaybackDuration) }}
+                                            </p>
+                                        </div>
+
+                                        <input type="range" step="0.01" min="0" :style="progressBarStyle()"
+                                               @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
+                                               @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
+                                               :max="mk.currentPlaybackDuration" :value="getSongProgress()">
+                                    </div>
+                                </div>
+                                <template v-if="mk.nowPlayingItem['attributes']['playParams']">
+                                    <div class="actions">
+                                        <button class="lcdMenu" @click="nowPlayingContextMenu">
+                                            <div class="svg-icon"></div>
+                                        </button>
+                                    </div>
+                                </template>
+
+                            </div>
+                        </template>
+
+                    </div>
+                </div>
+                <div class="app-chrome--right">
+                    <div class="app-chrome-item volume display--large">
+                        <button class="volume-button--small volume" @click="muteButtonPressed()"
+                                :class="{'active': this.cfg.audio.volume == 0}"></button>
+                        <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" :max="cfg.audio.maxVolume"
+                               v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()">
+                    </div>
+                    <div class="app-chrome-item generic" v-if="false">
+                        <button class="playback-button--small">
+                            <%- include("svg/cast.svg") %>
+                        </button>
+                    </div>
+                    <div class="app-chrome-item generic">
+                        <button class="playback-button--small miniplayer"
+                        @click="drawer.open = false; miniPlayer(true)"></button>
+                    </div>
+                    <div class="app-chrome-item generic">
+                        <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
+                                @click="invokeDrawer('queue')"></button>
+                    </div>
+                    <div class="app-chrome-item generic">
+                        <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
+                            <button class="playback-button--small lyrics"
+                                    :class="{'active': drawer.panel == 'lyrics'}"
+                                    @click="invokeDrawer('lyrics')"></button>
+                        </template>
+
+                    </div>
+                    <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'right'">
+                        <div class="window-controls">
+                            <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
+                            <div class="minmax restore" v-if="chrome.maximized"
+                                 @click="ipcRenderer.send('maximize')">
+                            </div>
+                            <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
+                            <div class="close" @click="closeWindow()"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="app-navigation" v-cloak>
+                <div id="app-sidebar">
+                    <div class="app-sidebar-header">
+                        <div class="search-input-container">
+                            <div class="search-input--icon"></div>
+                            <input type="search" spellcheck="false" @click="showSearch()"
+                                   @focus="search.showHints = true"
+                                   @blur="setTimeout(()=>{search.showHints = false}, 300)"
+                                   v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();"
+                                   @input="getSearchHints()" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term"
+                                   ref="searchInput" class="search-input">
+                        </div>
+                    </div>
+                    <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
+                        <div class="search-hints">
+                            <button class="search-hint" v-for="hint in search.hints"
+                                    @click="search.term = hint;search.showHints = false;searchQuery(hint)">
+                                {{ hint }}
+                            </button>
+                        </div>
+                    </div>
+                    <div class="app-sidebar-content">
+                        <div class="app-sidebar-header-text">
+                            Cider
+                        </div>
+                        <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">
+                            {{$root.getLz('term.appleMusic')}}
+                        </div>
+                        <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="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse">
+                        </sidebar-library-item>
+                        <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">
+                            {{$root.getLz('term.library')}}
+                        </div>
+                        <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="$root.getLz('term.songs')" svg-icon="./assets/feather/music.svg"
+                                              page="library-songs"></sidebar-library-item>
+                        <sidebar-library-item :name="$root.getLz('term.albums')" svg-icon="./assets/feather/disc.svg"
+                                              page="library-albums"></sidebar-library-item>
+                        <sidebar-library-item :name="$root.getLz('term.artists')" svg-icon="./assets/feather/user.svg"
+                                              page="library-artists"></sidebar-library-item>
+                        <sidebar-library-item :name="$root.getLz('term.videos')" svg-icon="./assets/feather/video.svg" page="library-videos"></sidebar-library-item>
+                        <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">
+                            {{ $root.getLz('term.playlists') }}
+                        </div>
+                        <sidebar-playlist v-for="item in getPlaylistFolderChildren('p.playlistsroot')" :item="item">
+                        </sidebar-playlist>
+                    </div>
+                    <transition name="wpfade">
+                        <div class="usermenu-container" v-if="chrome.menuOpened">
+                            <div class="usermenu-body">
+                                <button class="usermenu-item" @click="showWebRemoteQR()">
+                                    <div class="row nopadding">
+                                        <div class="col nopadding">
+                                            <span class="usermenu-item-icon"><%- include("./svg/smartphone.svg") %></span>
+                                            <span class="usermenu-item-name">{{$root.getLz('action.showWebRemoteQR')}}</span>
+                                        </div>
+                                    </div>
+                                </button>
+                                <button class="usermenu-item" v-if="cfg.advanced.AudioContext"
+                                        @click="modals.audioSettings = true">
+                                    <span class="usermenu-item-icon"><%- include("./svg/headphones.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.audioSettings')}}</span>
+                                </button>
+                                <button class="usermenu-item" @click="appRoute('about')">
+                                    <span class="usermenu-item-icon"><%- include("./svg/info.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.about')}}</span>
+                                </button>
+                                <button class="usermenu-item" @click="appRoute('settings')">
+                                    <span class="usermenu-item-icon"><%- include("./svg/settings.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.settings')}}</span>
+                                </button>
+                                <button class="usermenu-item" @click="unauthorize()">
+                                    <span class="usermenu-item-icon" style="right:2.5px;"><%- include("./svg/log-out.svg") %></span>
+                                    <span class="usermenu-item-name">{{$root.getLz('term.logout')}}</span>
+                                </button>
+                            </div>
+                        </div>
+                    </transition>
+                    <div class="app-sidebar-footer">
+
+                        <div class="app-playback-controls display--small" v-if="mkReady()"
+                             @contextmenu="nowPlayingContextMenu">
+                            <div class="control-buttons">
+                                <div class="app-chrome-item">
+                                    <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                                            @click="mk.shuffleMode = 1"></button>
+                                    <button class="playback-button--small shuffle active" v-else
+                                            @click="mk.shuffleMode = 0"></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button previous" @click="prevButton()"></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button pause" @click="mk.pause()"
+                                            v-if="mk.isPlaying"></button>
+                                    <button class="playback-button play" @click="mk.play()" v-else></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button next" @click="mk.skipToNextItem()"></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                                            @click="mk.repeatMode = 1"></button>
+                                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+                                            v-else-if="mk.repeatMode == 1"></button>
+                                    <button class="playback-button--small repeat active"
+                                            @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
+                                </div>
+                            </div>
+                            <div class="app-chrome-item volume">
+                                <div class="input-container">
+                                    <button class="volume-button--small volume" @click="muteButtonPressed()"
+                                            :class="{'active': this.cfg.audio.volume == 0}"></button>
+                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" :max="cfg.audio.maxVolume"
+                                           v-model="mk.volume" v-if="typeof mk.volume != 'undefined'"
+                                           @change="checkMuteChange()">
+                                </div>
+                            </div>
+                        </div>
+                        <button class="app-sidebar-button" style="width:100%" :class="{active: chrome.menuOpened}"
+                                @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
+                                @click="(chrome.userinfo.id) ? chrome.menuOpened = !chrome.menuOpened : false">
+
+                            <img class="sidebar-user-icon" loading="lazy"
+                                 :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"/>
+
+                            <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
+                                <template v-if="chrome.userinfo.id || mk.isAuthorized">
+                                    <div class="fullname text-overflow-elipsis">{{  (chrome.userinfo != null && chrome.userinfo.attributes != null) ? (chrome.userinfo.attributes.name ?? "") : ""
+                                        }}
+                                    </div>
+                                    <div class="handle-text text-overflow-elipsis">{{
+                                        (chrome.userinfo != null && chrome.userinfo.attributes != null)  ? (chrome.userinfo.attributes.handle ?? "") : ""
+                                        }}
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <div @click="mk.authorize()">
+                                        Sign In
+                                    </div>
+                                </template>
+                            </div>
+                            <div class="sidebar-user-text" v-else>
+                                Cider
+                            </div>
+                        </button>
+                    </div>
+                    <div class="app-sidebar-notification backgroundNotification"
+                         v-if="library.backgroundNotification.show">
+                        <div class="message">{{ library.backgroundNotification.message }} ({{
+                            library.backgroundNotification.progress }} / {{ library.backgroundNotification.total }})
+                        </div>
+                    </div>
+                </div>
+                <div id="app-content">
+                    <div id="navigation-bar">
+                        <button class="nav-item" @click="navigateBack()">
+                            <%- include('svg/chevron-left.svg') %>
+                        </button>
+                        <button class="nav-item" @click="navigateForward()">
+                            <%- include('svg/chevron-right.svg') %>
+                        </button>
+                    </div>
+
+                    <!--                    Podcasts -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'podcasts'">
+                            <apple-podcasts></apple-podcasts>
+                        </template>
+                    </transition>
+                    <!-- Library - Library Videos -->
+                    <transition name="wpfade" >
+                        <template v-if="page == 'library-videos'">                       
+                            <cider-library-videos></cider-library-videos>
+                        </template>
+                    </transition>
+
+                    <!-- Apple Setings Page -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'apple-account-settings'">
+                            <apple-account-settings></apple-account-settings>
+                        </template>
+                    </transition>
+                    <!-- About -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'about'">
+                            <about-page></about-page>
+                        </template>
+                    </transition>
+                    <!-- Artist Page -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'artist-page' && artistPage.data.attributes">
+                            <cider-artist :data="artistPage.data"></cider-artist>
+                        </template>
+                    </transition>
+                    <transition name="wpfade">
+                        <%- include('pages/zoo') %>
+                    </transition>
+                    <transition name="wpfade">
+                        <%- include('pages/webview') %>
+                    </transition>
+                    <!-- Collection List -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'collection-list'">
+                            <cider-collection-list :data="collectionList.response" :type="collectionList.type"
+                                                   :title="collectionList.title"></cider-collection-list>
+                        </template>
+                    </transition>
+                    <!-- Home -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'home'">
+                            <cider-home></cider-home>
+                        </template>
+                    </transition>
+                    <!-- Home -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'artist-feed'">
+                            <cider-artist-feed></cider-artist-feed>
+                        </template>
+                    </transition>
+                    <!-- Playlist / Album page-->
+                    <transition name="wpfade">
+                        <template v-if="page.includes('playlist_')">
+                            <cider-playlist :data="showingPlaylist"></cider-playlist>
+                        </template>
+                    </transition>
+                    <transition name="wpfade">
+                        <template v-if="page.includes('album_')">
+                            <cider-playlist :data="showingPlaylist"></cider-playlist>
+                        </template>
+                    </transition>
+                    <transition name="wpfade">
+                        <template v-if="page.includes('recordLabel_')">
+                            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
+                        </template>
+                    </transition>
+
+                    <transition name="wpfade">
+                        <template v-if="page.includes('curator_')">
+                            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
+                        </template>
+                    </transition>
+                    <!-- Browse -->
+                    <transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
+                        <template v-if="page == 'browse'">
+                            <!-- <div class="content-inner">
+
+                            <button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start
+                                MusicKit
+                            </button>
+                            <button id="apple-music-unauthorize" class="md-btn md-btn-primary"
+                                    @click="unauthorize()">
+                                Stop
+                                MusicKit
+                            </button>
+                            <br>
+                            <template v-if="mk.nowPlayingItem">
+                                currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
+                                <br>
+                                currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
+                            </template>
+                            <div><input type="text" v-model="quickPlayQuery">
+                                <button @click="quickPlay(quickPlayQuery)">Play</button>
+                            </div>
+                            <h1 class="header-text">{{$root.getLz('term.browse')}}</h1>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu
+                                tincidunt
+                                consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
+                            </p>
+                            <div class="media-item--small">
+                                <div class="artwork">
+
+                                </div>
+                                <div class="text">
+                                    Text
+                                </div>
+                                <div class="subtext">
+                                    Subtext
+                                </div>
+                            </div>
+                            <br>
+                            <br>
+                            <h1 class="header-text">{{$root.getLz('term.listenNow')}}</h1>
+                            <div class="winbox">
+                                <div class="fancy">990kbps</div>
+                                <div class="">
+                                    <button class="md-btn md-btn-primary">Audio Quality Settings</button>
+                                </div>
+                            </div>
+                            <button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
+                            <button class="md-btn">Button</button>
+                            <button class="md-btn md-btn-primary">Button</button>
+                        </div> -->
+                            <cider-browse :data="browsepage"></cider-browse>
+                        </template>
+                    </transition>
+                    <!-- Listen Now -->
+                    <transition v-on:enter="getListenNow()" name="wpfade">
+                        <template v-if="page == 'listen_now'" @created="console.log('listennow')">
+                            <cider-listen-now :data="listennow"></cider-listen-now>
+                        </template>
+                    </transition>
+                    <!-- Radio -->
+                    <transition v-on:enter="getRadioStations()" name="wpfade">
+                        <template v-if="page == 'radio'" @created="console.log('radio')">
+                            <div class="content-inner">
+                                <h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
+                                <h3>{{$root.getLz('term.recentStations')}}</h3>
+                                <mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
+                            </div>
+                        </template>
+                    </transition>
+                    <!-- Settings -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'settings'">
+                            <cider-settings></cider-settings>
+                        </template>
+                    </transition>
+                    <!-- Search -->
+                    <transition name="wpfade">
+                        <template v-if="page == 'search'">
+                            <cider-search :search="search"></cider-search>
+                        </template>
+                    </transition>
+                    <!-- Library - Recently Added -->
+                    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
+                        <%- include('pages/library-recentlyadded') %>');
+                    </transition>
+                    <!-- Library - Songs -->
+                    <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
+                        <template v-if="page == 'library-songs'">
+                            <cider-library-songs :data="library.songs"></cider-library-songs>
+                        </template>
+                    </transition>
+                    <!-- Library - Albums -->
+                    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
+                        <%- include('pages/library-albums') %>');
+                        %>
+                    </transition>
+                    <!-- Library - Made For You -->
+                    <transition name="wpfade" v-on:enter="getMadeForYou()">
+                        <template v-if="page == 'library-madeforyou'">
+                            <%- include('pages/madeforyou') %>');
+                            %>
+                        </template>
+                    </transition>
+                    <!-- Library - Artists-->
+                    <transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
+                        <template v-if="page == 'library-artists'">
+                            <%- include('pages/library-artists') %>');
+                            %>
+                        </template>
+                    </transition>
+                    <transition name="wpfade">
+                        <template v-if="page.includes('appleCurator')">
+                            <cider-applecurator :data="appleCurator"></cider-applecurator>
+                        </template>
+                    </transition>
+
+                </div>
+                <transition name="drawertransition">
+                    <div class="app-drawer"
+                         v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
+                        <div class="bgArtworkMaterial">
+                            <div class="bg-artwork-container">
+                                <img class="bg-artwork a" :src="$store.state.artwork.playerLCD">
+                                <img class="bg-artwork b" :src="$store.state.artwork.playerLCD">
+                            </div>
+                        </div>
+                        <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
+                                     :richlyrics="richlyrics"></lyrics-view>
+                        <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
+                            <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
+                                $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
+                            </button>
+                        </div>
+                    </div>
+                </transition>
+                <transition name="drawertransition">
+                    <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
+                        <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
+                    </div>
+                </transition>
+            </div>
+        </div>
+    </transition>
+    <cider-menu-panel v-if="menuPanel.visible">
+    </cider-menu-panel>
+    <transition name="fsModeSwitch">
+        <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
+            <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime"
+                             :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
         </div>
     </transition>
     <%- include('app/panels'); %>

src/renderer/views/pages/settings.ejs

@@ -35,7 +35,8 @@
                     <div class="md-option-segment md-option-segment_auto">
                         <select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality"
                                 v-on:change="changeAudioQuality">
-                            <option value="990">Extreme</option>
+                            <!-- // <option value="9216">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
+                            <option value="2304">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> 
                             <option value="256">{{$root.getLz('settings.header.audio.quality.high')}}</option>
                             <option value="64">{{$root.getLz('settings.header.audio.quality.low')}}</option>
                             <option value="auto">{{$root.getLz('settings.header.audio.quality.auto')}}</option>
@@ -61,6 +62,16 @@
                                switch/>
                     </div>
                 </div>
+                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
+                    <div class="md-option-segment">
+                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.decryptLLPW')}}
+                        <br>
+                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.decryptLLPW.description')}}</small>
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <input type="checkbox" v-model="app.cfg.advanced.decryptLLPW" switch/>
+                    </div>
+                </div>
                 <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                     <div class="md-option-segment">
                         {{$root.getLz('term.equalizer')}}
@@ -768,6 +779,7 @@
 						CiderAudio.spatialOn()
 					}
 				} else {
+                    app.cfg.advanced.decryptLLPW = false;
 					CiderAudio.off();
 				}
 			},

src/web-remote/style.css

@@ -193,6 +193,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .lossless-badge {
+    background-image: url("./assets/lossless.svg");
     background: rgb(150 150 150);
     border-radius: 6px;
     padding: 0px 6px;