Merge branch 'ciderapp:develop' into develop

src/i18n/ja_JP.json

@@ -2,14 +2,16 @@
     "i18n.languageName": "日本語",
     "i18n.languageNameEnglish": "Japanese",
     "i18n.category": "main",
-  "i18n.authors": "@maikirakiwi",
+    "i18n.authors": "@maikirakiwi @aduki_0628",
     "app.name": "Cider",
     "date.format": "${y}年${m}月${d}日",
     "dialog.cancel": "キャンセル",
-  "dialog.ok": "OK",
+    "dialog.ok": "完了",
     "notification.updatingLibrarySongs": "ライブラリの更新中...",
     "notification.updatingLibraryAlbums": "ライブラリの更新中...",
     "notification.updatingLibraryArtists": "ライブラリの更新中...",
+    "term.variables": "Variables",
+    "term.appleInc": "Apple Inc.",
     "term.appleMusic": "Apple Music",
     "term.applePodcasts": "Apple Podcasts",
     "term.itunes": "iTunes",
@@ -19,9 +21,14 @@
     "term.accountSettings": "アカウント設定",
     "term.logout": "サインアウト",
     "term.login": "サインイン",
+    "term.cast": "Cast",
     "term.about": "Ciderについて",
     "term.privateSession": "プライベートセッション",   
+    "term.disablePrivateSession": "プライベートセッションを無効にする",
     "term.queue": "次はこちら",
+    "term.lyrics": "歌詞",
+    "term.miniplayer": "MiniPlayer",
+    "term.history": "History",
     "term.search": "検索",
     "term.library": "ライブラリ",
     "term.listenNow": "今すぐ聴く",
@@ -31,9 +38,14 @@
     "term.songs": "曲",
     "term.albums": "アルバム",
     "term.artists": "アーティスト",
-  "term.podcasts": "Podcast",
+    "term.podcasts": "Podcasts",
     "term.playlists": "プレイリスト",
     "term.playlist": "プレイリスト",
+    "term.newPlaylist": "New Playlist",
+    "term.newPlaylistFolder": "New Playlist Folder",
+    "term.createNewPlaylist": "Create New Playlist",
+    "term.createNewPlaylistFolder": "Create New Playlist Folder",
+    "term.deletePlaylist": "Are you sure you want to delete this playlist?",
     "term.play": "再生",
     "term.pause": "停止",
     "term.previous": "戻る",
@@ -63,10 +75,10 @@
     "term.size": "サイズ",
     "term.size.normal": "普通",
     "term.size.compact": "コンパクト",
-  "term.enable": "ON",
-  "term.disable": "OFF",
     "term.enabled": "ON",
+    "term.disable": "OFF",
     "term.disabled": "OFF",
+    "term.enable": "ON",
     "term.connect": "接続",
     "term.connecting": "接続中",
     "term.disconnect": "切断",
@@ -81,44 +93,96 @@
     "term.time.added": "追加日",
     "term.time.released": "配信開始日",
     "term.time.updated": "最終更新日",
+    "term.time.days": "日",
+    "term.time.day": {
+      "one": "日",
+      "other": "日"
+    },
     "term.time.hours": "時間",
-  "term.time.hour": "時間",
+    "term.time.hour": {
+      "one": "時間",
+      "other": "時間"
+    },
     "term.time.minutes": "分",
-  "term.time.minute": "分",
+    "term.time.minute": {
+      "one": "分",
+      "other": "分"
+    },
     "term.time.seconds": "秒",
-  "term.time.second": "秒",
+    "term.time.second": {
+      "one": "秒",
+      "other": "秒"
+    },
     "term.fullscreenView": "全画面表示",
     "term.defaultView": "ウィンドウ表示",
     "term.audioSettings": "オーディオ設定",
-  "term.spacializedAudioSetting": "オーディオ空間化設定",
+    "term.audioControls": "Volume Controls",
     "term.clearAll": "消去",
     "term.recentStations": "最近の再生",
     "term.language": "言語",
+    "term.funLanguages": "Fun",
     "term.noLyrics": "ローディング。。 / 歌詞が見つからない / 器楽曲.", 
-  "term.copyright": "著作権",
+    "term.copyright": "Copyright",
     "term.rightsReserved": "All Rights Reserved.",
     "term.sponsor": "スポンサーになりましょう",
     "term.ciderTeam": "Cider チーム",
     "term.developer": "開発者",
     "term.socialTeam": "ソーシャル チーム",
+    "term.socials": "Socials",
     "term.contributors": "貢献者",
     "term.equalizer": "イコライザー",
     "term.reset": "リセット",
+    "term.tracks": "曲",
     "term.track": {
       "one": "曲",
       "other": "曲"
     },
-  "term.tracks": "曲",
     "term.videos": "ビデオ",
     "term.menu": "メニュー",
     "term.check": "確認",
     "term.aboutArtist": "{{artistName}}について",
+    "term.topResult": "Top Result",
+    "term.sharedPlaylists": "プレイリストを共有",
+    "term.people": "ユーサ",
+    "term.newpreset.name": "名前を入力",
+    "term.addedpreset": "Added Preset",
+    "term.deletepreset.warn": "Are you sure you want to delete this preset?",
+    "term.deletedpreset": "Removed preset",
+    "term.defaultPresets": "Default Presets",
+    "term.userPresets": "User Presets",
+    "term.requestError": "There was a problem with the request.",
+    "term.song.link.generate": "Getting song.link share URL...",
+    "term.musicVideos": "ミュージックビデオ",
+    "term.stations": "ステーション",
+    "term.curators": "Curators",
+    "term.appleCurators": "Apple Curators",
+    "term.radioShows": "Radio Shows",
+    "term.recordLabels": "Record Labels",
+    "term.videoExtras": "Video Extras",
+    "term.top": "Top",
     "term.version": "バージョン",
+    "term.noVideos": "No videos found.",
+    "term.plugin": "Plug-in",
+    "term.pluginMenu": "Plug-in Menu",
+    "term.pluginMenu.none": "プラグインが見つかりませんでした",
+    "term.replay": "リプレイ",
+    "term.uniqueAlbums": "Unique Albums",
+    "term.uniqueArtists": "Unique Artists",
+    "term.uniqueSongs": "Unique Songs",
+    "term.topArtists": "Top Artists",
+    "term.listenedTo": "Listened to:",
+    "term.times": "times",
+    "term.topAlbums": "Top Albums",
+    "term.plays": "Plays",
+    "term.topGenres": "Top Genres",
+    "term.confirmLogout": "本当にログアウトしますか？",
+    "term.creditDesignedBy": "${authorUsername}によってデザインされました",
+    "term.discNumber": "Disc ${discNumber}",
     "home.title": "ホーム",
     "home.recentlyPlayed": "最近の再生",
     "home.recentlyAdded": "最近追加した項目",
     "home.artistsFeed": "アーティストのフィード",
-  "home.artistsFeed.noArtist": "自分の好きなアーティストをフォローしましょう・",
+    "home.artistsFeed.noArtist": "アーティストをフォローすると最新情報を手に入れられます",
     "home.madeForYou": "あなたにおすすめ",
     "home.friendsListeningTo": "友達が聴いている",
     "home.followedArtists": "フォローしているアーティスト",
@@ -129,11 +193,14 @@
     "podcast.followOnCider": "Ciderでフォロー",
     "podcast.followedOnCider": "フォロー中",
     "podcast.subscribeOnItunes": "iTunesで購読",
-  "podcast.subscribedOnItunes": "購読中",
+    "podcast.subscribedOnItunes": "Subscribed On iTunes",
     "podcast.itunesStore": "iTunes Store",
     "podcast.episodes": "番組",
     "podcast.playEpisode": "再生",
     "podcast.website": "Podcastウェブ",
+    "action.edit": "Edit",
+    "action.done": "Done",
+    "action.editTracklist": "Edit Tracklist",
     "action.addToLibrary": "ライブラリに追加",
     "action.addToLibrary.success": "ライブラリに追加されました",
     "action.addToLibrary.error": "ライブラリへの追加に失敗しました",
@@ -142,12 +209,13 @@
     "action.addToQueue": "「次はこちら」に項目を追加",
     "action.addToQueue.success": "「次はこちら」に項目を追加されました",
     "action.addToQueue.error": "操作を完了できませんでした",
-  "action.addToPlaylist": "プレイリストに追加",
-  "action.removeFromPlaylist": "プレイリストから削除",
-  "action.addToFavorites": "ラブに追加",
     "action.removeFromQueue": "「次はこちら」から項目を削除",
     "action.removeFromQueue.success": "「次はこちら」から項目を削除されました",
     "action.removeFromQueue.error": "操作を完了できませんでした",
+    "action.createPlaylist": "Create a New Playlist",
+    "action.addToPlaylist": "Add to Playlist",
+    "action.removeFromPlaylist": "Remove from Playlist",
+    "action.addToFavorites": "ラブに追加",
     "action.follow": "フォロー",
     "action.follow.success": "フォロー中",
     "action.follow.error": "操作を完了できませんでした",
@@ -163,33 +231,84 @@
     "action.share": "曲を共有",
     "action.rename": "名前の変更",
     "action.love": "ラブ",
-  "action.unlove": "ラブを解除",
+    "action.unlove": "ラブを解除する",
     "action.dislike": "これに似たものをすすめない",
     "action.undoDislike": "「これと似た曲のおすすめを減らす」を取り消す",
     "action.showWebRemoteQR": "WEBリモコンQRコードを表示",
     "action.playTracksNext": "${app.selectedMediaItems.length}曲が次に再生",
     "action.playTracksLater": "${app.selectedMediaItems.length}曲が最後に再生",
-  "action.removeTracks": "${self.selectedItems.length}曲が「次はこちら」から削除",
+    "action.removeTracks": "${self.selectedItems.length}をキューから除外する",
     "action.import": "インポート",
     "action.export": "エクスポート",
-  "action.showAlbum": "すべて見る",
+    "action.showAlbum": "アルバムを表示",
     "action.tray.minimize": "最小化",
     "action.tray.quit": "終了",
-
+    "action.tray.show": "Show Cider",
     "action.update": "アップデート",
+    "action.install": "インストール",
     "action.copy": "コピー",
-  "action.newpreset": "ニュープリセット",
+    "action.newpreset": "新しいプリセット",
     "action.deletepreset": "プリセットを削除",
+    "action.open": "開く",
+    "action.relaunch.confirm": "Ciderを再開しますか？",
+    "action.cast.chromecast": "Chromecast",
+    "action.cast.todevices": "Cast to Devices",
+    "action.cast.stop": "Stop casting to all devices",
+    "action.cast.airplay": "AirPlay",
+    "action.cast.airplay.underdevelopment": "AirPlay is still under development",
+    "action.cast.scan": "Scan",
+    "action.cast.scanning": "Scanning...",
+    "action.createNew": "Create New...",
+    "action.openArtworkInBrowser": "Open artwork in browser",
     "settings.header.general": "一般",
     "settings.header.general.description": "Ciderの一般設定",
+    "settings.option.general.language": "言語",
+    "settings.option.general.resumebehavior": "Resume behavior",
+    "settings.option.general.resumebehavior.description": "Resume behavior affects how Cider will resume your session when you return to the app.",
+    "settings.option.general.resumebehavior.locally": "Locally",
+    "settings.option.general.resumebehavior.locally.description": "このコンピューターでの最終セッションを復元",
+    "settings.option.general.resumebehavior.history": "History",
+    "settings.option.general.resumebehavior.history.description": "Apple Musicの履歴から曲を復元",
+    "settings.option.general.resumetabs" : "Open Tab on Launch",
+    "settings.option.general.resumetabs.description" : "You can choose what tab you want to open when you launch Cider.",
+    "settings.option.general.resumetabs.dynamic" : "Dynamic",
+    "settings.option.general.resumetabs.dynamic.description" : "Cider will open the tab that you last used.",
     "settings.option.general.language.main": "メイン",
     "settings.option.general.language.fun": "荒らし",
     "settings.option.general.language.unsorted": "未分類",
-  "settings.option.general.updateCider": "Cider 更新",
+    "settings.option.general.updateCider": "アップデート",
+    "settings.option.general.updateCider.branch": "Cider Update Branch",
+    "settings.option.general.updateCider.branch.description": "Select the branch to update Cider to",
+    "settings.option.general.updateCider.branch.main": "Stable",
+    "settings.option.general.updateCider.branch.develop": "Development",
+    "settings.option.general.customizeSidebar": "Customize Sidebar Items",
+    "settings.option.general.customizeSidebar.customize": "Customize",
+    "settings.option.general.keybindings": "Keybindings",
+    "settings.notyf.general.keybindings.update.success": "Keybind updated successfully",
+    "settings.prompt.general.keybindings.update.success": "Keybind updated successfully. Press OK to relaunch Cider",
+    "settings.option.general.keybindings.open": "Open",
+    "settings.description.search": "Search",
+    "settings.description.albums": "Library Albums",
+    "settings.description.artists": "Library Artists",
+    "settings.description.browse": "Browse",
+    "settings.description.private": "Toggle Private Session",
+    "settings.description.remote": "Web Remote",
+    "settings.description.audio": "Audio Settings",
+    "settings.description.plugins": "Plugins Menu",
+    "settings.description.cast": "Cast to Devices",
+    "settings.description.settings": "Settings",
+    "settings.description.developer": "Developer Tools",
+    "settings.notyf.updateCider.update-not-available": "現在最新版です",
+    "settings.notyf.updateCider.update-downloaded": "アップデートは再起動後に適用されます",
+    "settings.notyf.updateCider.update-error": "アップデートに失敗しました",
+    "settings.notyf.updateCider.update-timeout": "アップデートはタイムアウトしました",
     "settings.header.audio": "オーディオ",
     "settings.header.audio.description": "Ciderのオーディオ設定",
     "settings.option.audio.volumeStep": "音量調整のステップ",
     "settings.option.audio.maxVolume": "最大音量",
+    "settings.option.audio.changePlaybackRate": "Change Playback Rate",
+    "settings.option.audio.playbackRate": "Playback Rate",
+    "settings.option.audio.playbackRate.change": "Change",
     "settings.option.audio.quality": "音質",
     "settings.header.audio.quality.hireslossless": "ハイレゾロスレス",
     "settings.header.audio.quality.hireslossless.description": "(最大解像度 24 ビット／192 kHz)",
@@ -198,25 +317,52 @@
     "settings.header.audio.quality.enhanced": "エンハンスド",
     "settings.header.audio.quality.high": "高品質",
     "settings.header.audio.quality.standard": "高効率",
-  "settings.header.audio.quality.auto": "自動",
     "settings.option.audio.seamlessTransition": "曲間なしで再生",
     "settings.option.audio.enableAdvancedFunctionality": "先進的な機能",
-  "settings.option.audio.enableAdvancedFunctionality.description": "AudioContext 機能を有効にすると、オーディオノーマライズ、空間オーディオ、イコライザーなどの機能を使用できますが、音が途切れるかもしれません。",
+    "settings.option.audio.enableAdvancedFunctionality.description": "AudioContextを有効にすると、オーディオノーマライズ、空間オーディオ、イコライザーなどの機能を使用できますが、音が途切れるかもしれません。",
+    "settings.warn.audio.enableAdvancedFunctionality.lowcores": "Cider thinks your PC can't handle these features. Are you sure you want to continue?",
+    "settings.option.audio.audioLab": "Cider Audio Lab",
+    "settings.option.audio.audioLab.description": "An assortment of in-house developed audio effects for Cider.",
+    "settings.warn.audioLab.withoutAF": "AudioContext (Advanced Functionality) is required to enable Cider Audio Laboratory.",
+    "settings.option.audio.enableAdvancedFunctionality.analogWarmth": "Analog Warmth",
+    "settings.option.audio.enableAdvancedFunctionality.analogWarmth.description": "Korg Nutube 6P1をモデルにしたオーディオをシミュレートします",
+    "settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity": "Analog Warmth intensity",
+    "settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.description": "Changes the intensity of the Analog Warmth Module processing.",
+    "settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.smooth": "Smooth",
+    "settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.warm": "Warm",
+    "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer": "Cider Atmosphere Realizer™️",
+    "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description": "Realizes a different musical atmosphere modelled after the state of the art audio setups.",
+    "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode": "Cider Atmosphere Realizer™️ Mode",
+    "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description": "Changes the mode of operation of the Atmosphere Realizer module.",
+    "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural1": "Natural (Standard)",
+    "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural2": "Natural (High)",
+    "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural3": "Natural (Plus)",
     "settings.option.audio.enableAdvancedFunctionality.ciderPPE": "Cider Adrenaline Processor™️",
-  
+    "settings.option.audio.enableAdvancedFunctionality.ciderPPE.description": "音楽をより豊かに、生き生きとさせます",
+    "settings.warn.audio.enableAdvancedFunctionality.ciderPPE.compatibility": "CAPはSpatializationと互換性がありません",
     "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength": "CAPの強さ",
-  "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.description": "Changes the strength of the processing done to the audio. (Aggressive may yield undesirable results)",
+    "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.description": "音に施す処理の強さを設定します (強くしすぎると望ましい結果が得られないかもしれません)",
     "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.standard": "標準",
     "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.aggressive": "高",
     "settings.option.audio.enableAdvancedFunctionality.audioNormalization": "オーディオノーマライズ",
   "settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "さまざまな曲の音量を均一にし、より整った音を楽しめるようにする機能です。",
+    "settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "Managed by Audio Lab",
     "settings.option.audio.enableAdvancedFunctionality.audioSpatialization": "オーディオ空間化",
-  "settings.option.audio.enableAdvancedFunctionality.audioSpatialization.description": "オーディオを空間に分散させる機能です。 (ドルビーアトモスではありません)",
+    "settings.option.audio.enableAdvancedFunctionality.audioSpatialization.description": "音声を空間化しすることで、より立体的にできます(Dolby Atmosではありません)",
+    "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization": "Cider Tuned Spatialization",
+    "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "開発チームがチューニングした設定を使用することができます。(オーディオ空間化を有効にする必要があります)",
+    "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile": "Cider Spatialization Profile",
+    "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description": "Changes the Tuning Profile of the Spatialization.",
+    "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard": "Standard",
+    "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile": "Audiophile",
+    "settings.warn.audio.enableAdvancedFunctionality.audioSpatialization.compatibility": "オーディオ空間化はCAPと互換性がありません",
     "settings.header.visual": "ビジュアル",
     "settings.header.visual.description": "Ciderのビジュアル設定",
-  "settings.option.visual.windowBackgroundStyle": "アプリウインドウの背景スタイル",
+    "settings.option.visual.windowStyle": "Window Style",
+    "settings.option.visual.windowBackgroundStyle": "背景の設定",
     "settings.header.visual.windowBackgroundStyle.none": "なし",
     "settings.header.visual.windowBackgroundStyle.artwork": "アートワーク",
+    "settings.header.visual.windowBackgroundStyle.image": "画像",
     "settings.option.visual.animatedArtwork": "アニメーションアートワーク",
     "settings.header.visual.animatedArtwork.always": "常に表示",
     "settings.header.visual.animatedArtwork.limited": "アーティストページのみ表示",
@@ -227,37 +373,83 @@
     "settings.header.visual.animatedArtworkQuality.high": "高",
     "settings.header.visual.animatedArtworkQuality.veryHigh": "超高",
     "settings.header.visual.animatedArtworkQuality.extreme": "最高",
-  "settings.option.visual.animatedWindowBackground": "アプリウィンドウの背景をアニメーション化",
+    "settings.option.visual.animatedWindowBackground": "背景のアニメーション",
     "settings.option.visual.hardwareAcceleration": "ハードウェアアクセラレーション",
-  "settings.option.visual.hardwareAcceleration.description": "アプリを再起動する必要があります",
+    "settings.option.visual.hardwareAcceleration.description": "再起動してください",
     "settings.header.visual.hardwareAcceleration.default": "既定",
     "settings.header.visual.hardwareAcceleration.webGPU": "WebGPU",
+    "settings.option.visual.uiscale": "UI Scale",
     "settings.header.visual.theme": "テーマ",
+    "settings.option.visual.theme.github.download": "GitHub URLからインストール",
+    "settings.option.visual.theme.github.openfolder": "Open Themes Folder",
+    "settings.option.visual.theme.github.explore": "GitHubで探す",
+    "settings.header.visual.theme.github.page": "GitHub",
+    "settings.option.visual.theme.github.install.confirm": "本当に {{ repo }} をインストールしますか？",
+    "settings.prompt.visual.theme.github.URL": "インストールしたいテーマのURLを入力してください",
+    "settings.notyf.visual.theme.install.success": "テーマのインストールが完了しました",
+    "settings.notyf.visual.theme.install.error": "テーマのインストールに失敗しました",
+    "settings.header.visual.plugin": "プラグイン",
+    "settings.option.visual.plugin.github.download": "GitHub URLからインストール",
+    "settings.option.visual.plugin.github.explore": "GitHubで探す",
+    "settings.header.visual.plugin.github.page": "GitHub",
+    "settings.option.visual.plugin.github.install.confirm": "本当に {{ repo }} をインストールしますか？",
+    "settings.prompt.visual.plugin.github.URL": "インストールしたいプラグインのURLを入力してください",
+    "settings.prompt.visual.plugin.github.success": "プラグインのインストールを完了させるには「完了」を押した後にCiderを再起動してください",
+    "settings.notyf.visual.plugin.install.success": "プラグインのインストールが完了しました",
+    "settings.notyf.visual.plugin.install.error": "プラグインのインストールに失敗しました",
     "settings.option.visual.theme.default": "Cider",
-  "settings.option.visual.theme.dark": "ダーク",
+    "settings.option.visual.theme.dark": "Dark",
-  "settings.option.visual.showPersonalInfo": "プロフィールを表示",
+    "settings.option.visual.showPersonalInfo": "個人情報を表示する",
+    "settings.header.window": "ウィンドウ",
+    "settings.header.window.description": "ウィンドウの設定",
+    "settings.option.window.openOnStartup": "Ciderをスタートアップに設定する",
+    "settings.option.window.openOnStartup.hidden": "パソコン起動時にCiderをトレイに最小化",
+    "settings.option.window.useNativeTitleBar": "Use Native Title Bar",
+    "settings.option.window.windowControlStyle": "Window Control Style",
+    "settings.option.window.windowControlStyle.right": "右側",
+    "settings.option.window.windowControlStyle.left": "左側",
     "settings.header.lyrics": "歌詞",
-  "settings.header.lyrics.description": "歌詞の表示設定",
+    "settings.header.lyrics.description": "Adjust the lyrics settings for Cider.",
-  "settings.option.lyrics.enableMusixmatch": "Musixmatchで歌詞を表示する",
+    "settings.option.lyrics.enableMusixmatch": "Musixmatchが提供する歌詞を表示する",
-  "settings.option.lyrics.enableMusixmatchKaraoke": "カラオケモードを有効にする (Musixmatchのみ)",
+    "settings.option.lyrics.enableMusixmatchKaraoke": "カラオケモードを有効にする (Musixmatchのみで利用できます)",
-  "settings.option.lyrics.musixmatchPreferredLanguage": "歌詞の優先言語",
+    "settings.option.lyrics.musixmatchPreferredLanguage": "Musixmatchで表示する歌詞の言語",
-  "settings.option.lyrics.enableYoutubeLyrics": "YouTubeの歌詞をミュージックビデオに使用する",
+    "settings.option.lyrics.enableYoutubeLyrics": "YouTubeの歌詞をミュージックビデオで使用する",
-  "settings.header.connectivity": "アプリと連携",
+    "settings.option.lyrics.enableQQLyrics": "Enable QQ Lyrics",
-  "settings.header.connectivity.description": "Ciderの連携設定",
+    "settings.header.connectivity": "接続",
+    "settings.header.connectivity.description": "Ciderの接続設定",
+    "settings.option.connectivity.playbackNotifications": "再生している曲を通知する",
     "settings.option.connectivity.discordRPC": "Discord Rich Presence",
-  "settings.header.connectivity.discordRPC.cider": "'Cider' を表示する",
+    "settings.option.connectivity.discordRPC.clientName": "Client Name",
-  "settings.header.connectivity.discordRPC.appleMusic": "'Apple Music' を表示する",
+    "settings.option.connectivity.discordRPC.clearOnPause": "Clear Discord Rich Presence on Pause",
-  "settings.option.connectivity.discordRPC.clearOnPause": "一時停止時にDiscord Rich Presenceをクリアする",
+    "settings.option.connectivity.discordRPC.hideButtons": "Hide buttons on Discord Rich Presence",
-  "settings.option.connectivity.lastfmScrobble": "LastFM Scrobbling",
+    "settings.option.connectivity.discordRPC.detailsFormat": "Details Format",
-  "settings.option.connectivity.lastfmScrobble.delay": "LastFM Scrobble Delay (%)",
+    "settings.option.connectivity.discordRPC.stateFormat": "State Format",
-  "settings.option.connectivity.lastfmScrobble.nowPlaying": "Enable LastFM Now Playing",
+    "settings.option.connectivity.lastfmScrobble": "Last.fm に接続する",
-  "settings.option.connectivity.lastfmScrobble.removeFeatured": "Remove featuring artists from song title (LastFM)",
+    "settings.option.connectivity.lastfmScrobble.delay": "遅延 (%)",
+    "settings.option.connectivity.lastfmScrobble.nowPlaying": "Last.fm Now Playingを有効化する",
+    "settings.option.connectivity.lastfmScrobble.removeFeatured": "曲名からフューチャリングいているアーティストの名前を削除する (Last.fm)",
+    "settings.option.connectivity.lastfmScrobble.filterLoop": "ループトラックのフィルター(Last.fm)",
+    "settings.header.debug": "デバッグ",
+    "settings.option.debug.copy_log": "Copy logs to clipboard",
+    "settings.option.debug.openAppData": "Open Cider Folder",
     "settings.header.experimental": "試験的な機能",
-  "settings.header.experimental.description": "開発中の実験的な機能は不完全で不安定である可能性があります",
+    "settings.header.experimental.description": "試験的な設定",
-  "settings.option.experimental.compactUI": "コンパクトインターフェース",
+    "settings.option.experimental.reinstallwidevine": "Reinstall WidevineCDM",
-  "settings.option.window.close_button_hide": "「閉じる」ボタンでアプリを隠します",
+    "settings.option.experimental.reinstallwidevine.confirm": "Are you sure you want to reinstall Widevine?",
-  "settings.option.experimental.copy_log": "ログをコピーする",
+    "settings.option.experimental.unknownPlugin": "未知のダウンロード元",
-  "settings.option.experimental.inline_playlists": "プレイリストをインラインで表示",
+    "settings.option.experimental.unknownPlugin.description": "外部からプラグインをインストールできるようにする",
+    "settings.option.experimental.compactUI": "コンパクトUI",
+    "settings.option.window.close_button_hide": "Ciderを閉じるとタスクに最小化する",
+    "settings.option.experimental.inline_playlists": "プレイリストをインラインに表示する",
+    "settings.option.advanced.playlistTrackMapping": "プレイリストをマッピング",
+    "settings.option.advanced.playlistTrackMapping.description": "プレイリストをスキャンすることで含まれる曲をより識別しやすくなります",
+    "settings.option.visual.transparent": "背景の透過",
+    "settings.option.visual.transparent.description": "(テーマがこの機能をサポートしている必要があります)",
+    "settings.header.advanced": "Advanced",
+    "settings.header.connect": "Sync",
+    "settings.option.connect.link_account": "Enable Sync with Cider Connect",
+    "settings.option.connect.link_account.description": "Linking your Discord account with Cider Connect allows you to store userdata including Settings, EQ's, and eventually more once finished. (Work In Progress)",
+    "spatial.notTurnedOn": "オーディオ空間化が無効になっています。この機能を使用するには有効にしてください！",
     "spatial.spatialProperties": "空間化のプロパティ",
     "spatial.width": "幅",
     "spatial.height": "高さ",
@@ -266,18 +458,29 @@
     "spatial.roomMaterials": "部屋のマテリアル",
     "spatial.roomDimensions": "部屋の大きさ",
     "spatial.roomPositions": "部屋の位置",
-  "spatial.setDimensions": "大きさを設定",
+    "spatial.setDimensions": "大きさを設定する",
-  "spatial.setPositions": "位置を設定",
+    "spatial.setPositions": "位置を設定する",
     "spatial.up": "上",
-  "spatial.front": "前",
+    "spatial.front": "手前",
     "spatial.left": "左",
     "spatial.right": "右",
-  "spatial.back": "後",
+    "spatial.back": "奥",
     "spatial.down": "下",
     "spatial.listener": "リスナー",
     "spatial.audioSource": "音源",
-  "settings.header.unfinished": "未完成",
+    "settings.header.unfinished": "未完了",
     "remote.web.title": "Cider リモート",
     "remote.web.description": "QRコードを使用して、Ciderとスマートフォンをペアリングする",
+    "share.platform.twitter.tweet": "{{song}}をApple Musicで聞いています\n\n{{url}}\n\n#AppleMusic #Cider",
+    "share.platform.twitter": "Twitter",
+    "share.platform.facebook": "Facebook",
+    "share.platform.reddit": "Reddit",
+    "share.platform.telegram": "Telegram",
+    "share.platform.whatsapp": "WhatsApp",
+    "share.platform.messenger": "Messenger",
+    "share.platform.email": "Email",
+    "share.platform.songLink": "song.linkのURLをコピーする",
+    "share.platform.clipboard": "URLをコピーする",
     "about.thanks": "Cider Collective とご協力いただいた貢献者様に感謝申し上げます。"
   }
+  

src/i18n/zh_HK.json

@@ -115,7 +115,7 @@
   "term.contributors": "貢獻者",
   "term.equalizer": "均衡器",
   "term.reset": "重設",
-  "term.tracks": "首歌曲",
+  "term.tracks": "歌曲",
   "term.videos": "MV",
   "term.menu": "選項",
   "term.check": "檢查",
@@ -225,6 +225,10 @@
   "settings.option.general.resumebehavior.locally.description": "Cider 將還原你在這台電腦上的最後一次操作。",
   "settings.option.general.resumebehavior.history": "歷史",
   "settings.option.general.resumebehavior.history.description": "Cider 將跨裝置將你的整個 Apple Music 歷史記錄中的最後一首歌曲排隊入列。",
+  "settings.option.general.resumetabs" : "啟動時打開的選項",
+  "settings.option.general.resumetabs.description" : "你可以選擇啟動 Cider 時要打開的選項。",
+  "settings.option.general.resumetabs.dynamic" : "動態",
+  "settings.option.general.resumetabs.dynamic.description" : "Cider 將打開你上次停留的選項。",
   "settings.option.general.language": "語言",
   "settings.option.general.language.main": "語言",
   "settings.option.general.language.fun": "惡搞語言",
@@ -236,6 +240,8 @@
   "settings.option.general.updateCider.branch.develop": "測試",
   "settings.option.general.customizeSidebar": "自訂側邊欄的功能",
   "settings.option.general.customizeSidebar.customize": "自訂",
+  "settings.option.general.keybindings": "快捷操作鍵",
+  "settings.option.general.keybindings.open": "開啟",
   "settings.notyf.updateCider.update-not-available": "沒有可用的更新",
   "settings.notyf.updateCider.update-downloaded": "更新已成功下載，重啟後進行更新",
   "settings.notyf.updateCider.update-error": "更新時，發生錯誤",
@@ -281,6 +287,7 @@
   "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard": "標準",
   "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile": "發燒友",
   "settings.warn.audio.enableAdvancedFunctionality.audioSpatialization.compatibility": "空間音訊無法與 CAP 相容，請關閉 CAP 再進行操作。",
+  "settings.option.visual.uiscale": "介面顯示大小",
   "settings.header.visual": "外觀",
   "settings.header.visual.description": "調整 Cider 的外觀",
   "settings.option.visual.windowBackgroundStyle": "視窗背景樣式",
@@ -335,14 +342,18 @@
   "settings.option.lyrics.enableMusixmatchKaraoke": "開啟卡拉OK模式（僅限Musixmatch）",
   "settings.option.lyrics.musixmatchPreferredLanguage": "Musixmatch 歌詞語言偏好",
   "settings.option.lyrics.enableYoutubeLyrics": "播放 MV 時，使用 YouTube 歌詞",
+  "settings.option.lyrics.enableQQLyrics": "開啟 QQ 音樂的歌詞",
   "settings.header.connectivity": "外部連結",
   "settings.header.connectivity.description": "調整 Cider 與外部的連結",
   "settings.option.connectivity.discordRPC": "Discord 狀態",
   "settings.option.connectivity.playbackNotifications": "播放通知",
+  "settings.option.connectivity.discordRPC.clientName": "應用程式名稱",
   "settings.header.connectivity.discordRPC.cider": "顯示為'Cider'",
   "settings.header.connectivity.discordRPC.appleMusic": "顯示為'Apple Music'",
   "settings.option.connectivity.discordRPC.clearOnPause": "暫停時清除 Discord 狀態",
   "settings.option.connectivity.discordRPC.hideButtons": "隱藏 Discord 狀態上的按鈕",
+  "settings.option.connectivity.discordRPC.detailsFormat": "詳細資訊格式",
+  "settings.option.connectivity.discordRPC.stateFormat": "狀態格式",
   "settings.option.connectivity.lastfmScrobble": "Last.fm Scrobbling 記錄",
   "settings.option.connectivity.lastfmScrobble.delay": "Last.fm Scrobble 延遲 (%)",
   "settings.option.connectivity.lastfmScrobble.nowPlaying": "開啟 Last.fm 正在播放",
@@ -366,6 +377,9 @@
   "settings.option.visual.transparent": "透明視窗框架",
   "settings.option.visual.transparent.description": "需主題有支援透明框架，且須重新啟動才會套用。",
   "settings.header.advanced": "進階",
+  "settings.header.connect": "同步",
+  "settings.option.connect.link_account": "開啟與 Cider Connect 同步",
+  "settings.option.connect.link_account.description": "將您的 Discord 帳戶與 Cider Connect 連接後，你可以儲存使用者資料，包括設定、等化器，並最終在完成後儲存更多資料。（正在進行中）",
   "spatial.notTurnedOn": "請先在設定中開啟空間音訊。",
   "spatial.spatialProperties": "空間音訊屬性",
   "spatial.width": "闊度",

src/i18n/zh_TW.json

@@ -119,7 +119,7 @@
     "one": "首歌曲",
     "other": "首歌曲"
   },
-  "term.tracks": "首歌曲",
+  "term.tracks": "歌曲",
   "term.videos": "音樂錄影帶",
   "term.menu": "選單",
   "term.check": "檢查",

src/main/base/store.ts

@@ -49,7 +49,7 @@ export class Store {
                 "tab": "home",
                 "dynamicData": ""
             },
-            "keybind": {
+            "keybindings": {
                 "search": [
                     process.platform == "darwin" ? "Command" : "Control",
                     "S"

src/main/base/utils.ts

@@ -6,6 +6,7 @@ import {app, dialog, ipcMain, Notification, shell } from "electron";
 import fetch from "electron-fetch";
 import {AppImageUpdater, NsisUpdater} from "electron-updater";
 import * as log from "electron-log";
+import ElectronStore from "electron-store";
 
 export class utils {
 
@@ -79,6 +80,14 @@ export class utils {
         return Store.cfg.store
     }
 
+    /**
+     * Get the store instance
+     * @returns {Store}
+     */
+    static getStoreInstance(): ElectronStore {
+        return Store.cfg
+    }
+
     /**
      * Sets a store value
      * @param key

src/main/plugins/menubar.ts

@@ -2,12 +2,6 @@ import {app, Menu, shell} from "electron";
 import {utils} from "../base/utils";
 
 export default class Thumbar {
-    /**
-     * Private variables for interaction in plugins
-     */
-    private _win: any;
-    private _app: any;
-    private _store: any;
 
     /**
      * Base Plugin Details (Eventually implemented into a GUI in settings)
@@ -15,52 +9,27 @@ export default class Thumbar {
     public name: string = 'Menubar Plugin';
     public description: string = 'Creates the menubar';
     public version: string = '1.0.0';
-    public author: string = 'Core / Quacksire';
+    public author: string = 'Core';
-
+    public contributors: string[] = ['Core', 'Qwack', 'Monochromish'];
-    /**
-     * Thumbnail Toolbar Assets
-     * NATIVE-IMAGE DOESN'T SUPPORT SVG
-     private icons: { [key: string]: Electron.NativeImage } = {
-        remoteIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/smartphone.svg')).toPNG(),
-        soundIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/headphones.svg')).toPNG(),
-        aboutIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/info.svg')).toPNG(),
-        settingsIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/settings.svg')).toPNG(),
-        logoutIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/log-out.svg')).toPNG(),
-        ciderIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'assets/logocute.png')).toPNG(),
-    }
-     */
 
     /**
      * Menubar Assets
      * @private
      */
     private isMac: boolean = process.platform === 'darwin';
-    private _menuTemplate: any;
+    private _menuTemplate: any = [
-
-    /*******************************************************************************************
-     * Public Methods
-     * ****************************************************************************************/
-
-    /**
-     * Runs on plugin load (Currently run on application start)
-     */
-    constructor(utils: { getApp: () => any; getStore: () => any; getWindow: () => any; }) {
-        this._app = utils.getApp();
-        this._store = utils.getStore();
-
-        this._menuTemplate = [
         {
             label: app.getName(),
             submenu: [
                 {
                     label: 'About',
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('about')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('about')`)
                 },
                 {type: 'separator'},
                 {
                     label: 'Settings',
-                        accelerator: this._store.general.keybind.settings.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.settings").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('settings')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('settings')`)
                 },
                 {type: 'separator'},
                 {role: 'services'},
@@ -117,25 +86,25 @@ export default class Thumbar {
                 {type: 'separator'},
                 {
                     label: 'Toggle Private Session',
-                        accelerator: this._store.general.keybind.togglePrivateSession.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.togglePrivateSession").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.cfg.general.privateEnabled = !app.cfg.general.privateEnabled`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.cfg.general.privateEnabled = !app.cfg.general.privateEnabled`)
                 },
                 {type: 'separator'},
                 {
                     label: 'Web Remote',
-                        accelerator: this._store.general.keybind.webRemote.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.webRemote").join('+'),
                     sublabel: 'Opens in external window',
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('remote-pair')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('remote-pair')`)
                 },
                 {
                     label: 'Audio Settings',
-                        accelerator: this._store.general.keybind.audioSettings.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.audioSettings").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.modals.audioSettings = true`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.audioSettings = true`)
                 },
                 {
                     label: 'Plug-in Menu',
-                        accelerator: this._store.general.keybind.pluginMenu.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.pluginMenu").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.modals.pluginMenu = true`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.pluginMenu = true`)
                 }
             ]
         },
@@ -145,56 +114,56 @@ export default class Thumbar {
                 {
                     label: 'Pause / Play',
                     accelerator: 'Space',
-                        click: () => this._win.webContents.executeJavaScript(`app.SpacePause()`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.SpacePause()`)
                 },
                 {
                     label: 'Next',
                     accelerator: 'CommandOrControl+Right',
-                        click: () => this._win.webContents.executeJavaScript(`MusicKitInterop.next()`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`MusicKitInterop.next()`)
                 },
                 {
                     label: 'Previous',
                     accelerator: 'CommandOrControl+Left',
-                        click: () => this._win.webContents.executeJavaScript(`MusicKitInterop.previous()`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`MusicKitInterop.previous()`)
                 },
                 {type: 'separator'},
                 {
                     label: 'Volume Up',
                     accelerator: 'CommandOrControl+Up',
-                        click: () => this._win.webContents.executeJavaScript(`app.volumeUp()`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.volumeUp()`)
                 },
                 {
                     label: 'Volume Down',
                     accelerator: 'CommandOrControl+Down',
-                        click: () => this._win.webContents.executeJavaScript(`app.volumeDown()`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.volumeDown()`)
                 },
                 {
                     label: 'Browse',
-                        accelerator: this._store.general.keybind.browse.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.browse").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('browse')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('browse')`)
                 },
                 {type: 'separator'},
                 {
                     label: 'Artists',
-                        accelerator: this._store.general.keybind.artists.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.artists").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('library-artists')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-artists')`)
                 },
                 {
                     label: 'Search',
-                        accelerator: this._store.general.keybind.search.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.search").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('search')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('search')`)
                 },
                 {type: 'separator'},
                 {
                     label: 'Album',
-                        accelerator: this._store.general.keybind.albums.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.albums").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('library-albums')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('library-albums')`)
                 },
                 {type: 'separator'},
                 {
                     label: 'Cast To Devices',
-                        accelerator: this._store.general.keybind.castToDevices.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.castToDevices").join('+'),
-                        click: () => this._win.webContents.executeJavaScript(`app.modals.castMenu = true`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.modals.castMenu = true`)
                 }
             ]
         },
@@ -203,11 +172,11 @@ export default class Thumbar {
             submenu: [
                 {
                     label: 'Account Settings',
-                        click: () => this._win.webContents.executeJavaScript(`app.appRoute('apple-account-settings')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('apple-account-settings')`)
                 },
                 {
                     label: 'Sign Out',
-                        click: () => this._win.webContents.executeJavaScript(`app.unauthorize()`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.unauthorize()`)
                 }
             ]
         },
@@ -249,25 +218,32 @@ export default class Thumbar {
                 {type: 'separator'},
                 {
                     label: 'Toggle Developer Tools',
-                        accelerator: this._store.general.keybind.openDeveloperTools.join('+'),
+                    accelerator: utils.getStoreValue("general.keybindings.openDeveloperTools").join('+'),
-                        click: () => this._win.webContents.openDevTools()
+                    click: () => utils.getWindow().webContents.openDevTools()
                 },
                 {
                     label: 'Open Configuration File in Editor',
-                        click: () => this._store.openInEditor()
+                    click: () => utils.getStoreInstance().openInEditor()
                 }
             ]
         }
     ];
 
+    /*******************************************************************************************
+     * Public Methods
+     * ****************************************************************************************/
+
+    /**
+     * Runs on plugin load (Currently run on application start)
+     */
+    constructor(_utils: utils) {
         console.debug(`[Plugin][${this.name}] Loading Complete.`);
     }
 
     /**
      * Runs on app ready
      */
-    onReady(win: Electron.BrowserWindow): void {
+    onReady(_win: Electron.BrowserWindow): void {
-        this._win = win;
         const menu = Menu.buildFromTemplate(this._menuTemplate);
         Menu.setApplicationMenu(menu)
     }

src/renderer/audio/audio.js

@@ -62,7 +62,7 @@ const CiderAudio = {
         if (app.cfg.audio.normalization) {
             CiderAudio.normalizerOn()
         }
-        if (app.cfg.audio.spatial) {
+        if (app.cfg.audio.maikiwiAudio.spatial) {
             CiderAudio.spatialOn()
         }
         CiderAudio.hierarchical_loading();
@@ -127,7 +127,6 @@ const CiderAudio = {
     ],
     spatialOn: function () {
         CiderAudio.audioNodes.spatialNode = null;
-        if (app.cfg.audio.maikiwiAudio.spatial === true) {
         CiderAudio.audioNodes.spatialNode = CiderAudio.context.createConvolver();
         CiderAudio.audioNodes.spatialNode.normalize = false;
 
@@ -142,27 +141,6 @@ const CiderAudio = {
             let bufferedImpulse = await impulseData.arrayBuffer();
             CiderAudio.audioNodes.spatialNode.buffer = await CiderAudio.context.decodeAudioData(bufferedImpulse);
         });
-
-        }
-        else {
-            CiderAudio.audioNodes.spatialNode = new ResonanceAudio(CiderAudio.context);
-            let roomDimensions = {
-                width: 32,
-                height: 12,
-                depth: 32,
-            };
-            let roomMaterials = {
-                // Room wall materials
-                left: 'metal',
-                right: 'metal',
-                front: 'brick-bare',
-                back: 'brick-bare',
-                down: 'acoustic-ceiling-tiles',
-                up: 'acoustic-ceiling-tiles',
-            };
-            CiderAudio.audioNodes.spatialNode.setRoomProperties(roomDimensions, roomMaterials);
-            CiderAudio.audioNodes.spatialInput = CiderAudio.audioNodes.spatialNode.createSource();
-        }
     },
     spatialOff: function () {
         CiderAudio.hierarchical_loading();
@@ -185,7 +163,8 @@ const CiderAudio = {
                 if (spatialProfile === undefined) {
                     spatialProfile = CiderAudio.spatialProfiles[0];
                 }
-                filterlessGain = filterlessGain * spatialProfile.gainComp}
+                filterlessGain = filterlessGain * spatialProfile.gainComp
+            }
             filterlessGain = Math.pow(10, (-1 * (20 * Math.log10(filterlessGain))) / 20).toFixed(4);
             filterlessGain > 1.0 ? CiderAudio.audioNodes.intelliGainComp.gain.exponentialRampToValueAtTime(1.0, CiderAudio.context.currentTime + 0.3) : CiderAudio.audioNodes.intelliGainComp.gain.exponentialRampToValueAtTime(filterlessGain, CiderAudio.context.currentTime + 0.3);
             console.debug(`[Cider][Audio] IntelliGainComp: ${filterlessGain > 1.0 ? 0 : (20 * Math.log10(filterlessGain)).toFixed(2)} dB (${filterlessGain > 1.0 ? 1 : filterlessGain})`)
@@ -230,7 +209,8 @@ const CiderAudio = {
             if (spatialProfile === undefined) {
                 spatialProfile = CiderAudio.spatialProfiles[0];
             }
-            maxGain = maxGain * spatialProfile.gainComp}
+            maxGain = maxGain * spatialProfile.gainComp
+        }
         maxGain = Math.pow(10, (-1 * (20 * Math.log10(maxGain))) / 20).toFixed(4);
         maxGain > 1.0 ? CiderAudio.audioNodes.intelliGainComp.gain.exponentialRampToValueAtTime(1.0, CiderAudio.context.currentTime + 0.3) : CiderAudio.audioNodes.intelliGainComp.gain.exponentialRampToValueAtTime(maxGain, CiderAudio.context.currentTime + 0.3);
         console.debug(`[Cider][Audio] IntelliGainComp: ${maxGain > 1.0 ? 0 : (20 * Math.log10(maxGain)).toFixed(2)} dB (${maxGain > 1.0 ? 1 : maxGain})`);
@@ -431,6 +411,15 @@ const CiderAudio = {
                         CiderAudio.audioNodes.atmosphereRealizer.buffer = await CiderAudio.context.decodeAudioData(bufferedImpulse);
                     });
                     break;
+                case "CRYPTO":
+                    CiderAudio.audioNodes.atmosphereRealizer = CiderAudio.context.createConvolver();
+                    CiderAudio.audioNodes.atmosphereRealizer.normalize = false;
+
+                    fetch('./audio/impulses/AtmosphereRealizer_Cryptofyre.wav').then(async (impulseData) => {
+                        let bufferedImpulse = await impulseData.arrayBuffer();
+                        CiderAudio.audioNodes.atmosphereRealizer.buffer = await CiderAudio.context.decodeAudioData(bufferedImpulse);
+                    });
+                    break;
 
                 default:
                     CiderAudio.audioNodes.atmosphereRealizer = CiderAudio.context.createConvolver();
@@ -719,7 +708,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {  // Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial                              
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -741,7 +730,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {  // Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial                              
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -766,7 +755,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 3)
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -787,7 +776,7 @@ const CiderAudio = {
                             }
                         }
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -816,7 +805,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4)
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -838,7 +827,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -862,7 +851,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 2)
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -884,7 +873,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -918,7 +907,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -941,7 +930,7 @@ const CiderAudio = {
 
                         else {
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -966,7 +955,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 3);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -988,7 +977,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1017,7 +1006,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1039,7 +1028,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1063,7 +1052,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 1);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1085,7 +1074,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1121,7 +1110,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {  // Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1143,7 +1132,7 @@ const CiderAudio = {
 
                         }
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {  // Vibrant Bass, CAP, Analog Warmth, Maikiwi Spatial
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1168,7 +1157,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 3);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1190,7 +1179,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1219,7 +1208,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1241,7 +1230,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1267,7 +1256,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 2);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1289,7 +1278,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1322,7 +1311,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1344,7 +1333,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1369,7 +1358,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 3);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1391,7 +1380,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1420,7 +1409,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 4);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1442,7 +1431,7 @@ const CiderAudio = {
                         }
 
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1467,7 +1456,7 @@ const CiderAudio = {
                         if (app.cfg.audio.maikiwiAudio.atmosphereRealizer === true) {
                             CiderAudio.atmosphereRealizer_h2_4(true, 0);
 
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);
@@ -1488,7 +1477,7 @@ const CiderAudio = {
                             }
                         }
                         else {
-                            if (app.cfg.audio.spatial === true) {
+                            if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                 if (app.cfg.audio.maikiwiAudio.spatial === true) {
                                     app.cfg.audio.normalization = true;
                                     CiderAudio.audioNodes.gainNode.connect(CiderAudio.audioNodes.spatialNode);

src/renderer/less/elements.less

@@ -891,6 +891,10 @@
       margin: 6px;
       cursor: pointer;
 
+      .mediaitem-artwork {
+        box-shadow: unset;
+      }
+
       &.round {
         border-radius: var(--mediaItemRadiusRound);
       }

src/renderer/less/helpers.less

@@ -64,8 +64,7 @@
       overflow-y: overlay;
     }
 
-    .modal-footer {
+    .modal-footer {}
-    }
   }
 }
 
@@ -320,28 +319,55 @@
     overflow       : hidden;
     font-size      : 13px;
 
+
     .menu-option {
       text-align: left;
       display   : flex;
-      width: calc(100% - 4px);
-      padding: 8px 10px;
       appearance: none;
       border    : 0px;
       font      : inherit;
       background: transparent;
       color     : inherit;
       margin    : 0 auto;
-      border-radius: 5px;
+      position  : relative;
+      width     : 100%;
+      padding   : 9px 14px;
+
+      &::before {
+        background   : var(--hover);
+        border-radius: 6px;
+        content      : "";
+        --sizeY      : 3px;
+        --sizeX      : 4px;
+        top          : var(--sizeY);
+        left         : var(--sizeX);
+        bottom       : var(--sizeY);
+        right        : var(--sizeX);
+        position     : absolute;
+        opacity      : 0;
+        transform    : scale(0.98);
+        z-index      : -1;
+        transition   : transform .25s ease-out, opacity .25s ease-out;
+      }
 
       &:hover {
-        background: var(--selected);
+        &::before {
+          transition: transform .1s ease-in, opacity .1s ease-in;
+          opacity   : 1;
+          transform : scale(1);
+        }
       }
 
       &:active {
+        &::before {
+          transition: transform .1s ease-in-out, opacity .1s ease-in-out;
+          opacity   : 1;
+          transform : scale(0.98);
           background: var(--selected-click);
         }
       }
     }
+  }
 
 
   .menu-header-text {
@@ -372,8 +398,9 @@
     height   : 100%;
     display  : flex;
     flex-flow: column;
-    gap: 4px;
+    gap      : 0px;
-    padding: 6px 4px;
+    padding  : 0px;
+    position : relative;
   }
 
   .menu-footer {
@@ -429,21 +456,28 @@
     overflow   : hidden;
     line-height: 1.25;
   }
+
   .modal-content {
     padding  : 1em;
     font-size: 0.8rem;
+
     br {
-      display: block; /* makes it have a width */
+      display      : block;
-      content: ""; /* clears default height */
+      /* makes it have a width */
+      content      : "";
+      /* clears default height */
       margin       : 2em;
       margin-bottom: -0.6rem;
     }
   }
+
   .modal-header {
     flex-direction: column;
+
     .modal-title {
       text-align: unset !important;
       width     : 100%;
+
       &:not(.modal-subtitle) {
         font-size: 25px;
       }

src/renderer/main/vueapp.js

@@ -1255,12 +1255,12 @@ const app = new Vue({
             })
         },
         copyToClipboard(str) {
-            if (navigator.userAgent.includes('Darwin') || navigator.appVersion.indexOf("Mac") != -1) {
+            // if (navigator.userAgent.includes('Darwin') || navigator.appVersion.indexOf("Mac") != -1) {
-                this.darwinShare(str)
+            // this.darwinShare(str)
-            } else {
+            // } else {
             notyf.success(app.getLz('term.share.success'))
             navigator.clipboard.writeText(str).then(r => console.log("Copied to clipboard."))
-            }
+            // }
         },
         newPlaylist(name = app.getLz('term.newPlaylist'), tracks = []) {
             let self = this
@@ -2936,7 +2936,8 @@ const app = new Vue({
                                         endTime: end,
                                         line: xline[2],
                                         translation: ''
-                                })}
+                                    })
+                                }
                             }
                             if (preLrc.length > 0)
                                 preLrc.push({
@@ -3008,7 +3009,8 @@ const app = new Vue({
                                         endTime: end,
                                         line: xline[2],
                                         translation: ''
-                                })}
+                                    })
+                                }
                             }
                             if (preLrc.length > 0)
                                 preLrc.push({

src/renderer/themes/sweetener.less

@@ -5,11 +5,18 @@
     .menu-panel-body {
         background-color: @panelColors;
         backdrop-filter : blur(32px) saturate(180%);
-        animation: menuIn .10s var(--appleEase);
+
+        &.menu-panel-body-down {
+            animation: menuInDown .10s var(--appleEase);
         }
 
+        &.menu-panel-body-up {
+            animation: menuInUp .10s var(--appleEase);
+        }
         
-    @keyframes menuIn {
+    }
+
+    @keyframes menuInUp {
         0% {
             opacity   : 0;
             transform : translateY(-10px) translate3d(0,0,0);
@@ -23,6 +30,20 @@
         }
     }
 
+    @keyframes menuInDown {
+        0% {
+            opacity   : 0;
+            transform : translateY(10px) translate3d(0,0,0);
+            background: @panelColorsFallback;
+        }
+
+        100% {
+            opacity   : 1;
+            transform : translateY(0);
+            background: @panelColors;
+        }
+    }
+
 }
 
 

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

@@ -23,7 +23,7 @@
                     <button @click="addToLibrary()" v-if="!addedToLibrary && (showIndex == false ||(showIndex == true && showIndexPlaylist != false))">
                         <div class="svg-icon addIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
                     </button>
-                    <button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()" style="width: 44px;margin-left: -11px;">
+                    <button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()" style="width: 44px;margin-left: -5px;">
                         <div class="svg-icon playIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/play.svg)'}"></div>
                     </button>
                 </div>

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

@@ -2,12 +2,12 @@
     <div tabindex="0" class="cd-mediaitem-square-container"
     @click.self="app.routeView(item)"
     @controller-click="app.routeView(item)"
-    @contextmenu.self="getContextMenu(item)"
+    @contextmenu.self="getContextMenu"
     v-observe-visibility="{callback: visibilityChanged}"
    >
     <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
     <div style="{'--spcolor': getBgColor()}"
-         class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu(item)">
+         class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
         <template>           
             <div class="artwork-container">
                 <div class="unavailable-overlay" v-if="unavailable">
@@ -24,7 +24,7 @@
                             :type="item.type"></mediaitem-artwork>
                 </div>
                 <button class="menu-btn" v-if="!nomenu.includes(item.type)"
-                        @click="getContextMenu(item)"><%- include("../svg/more.svg") %></button>
+                        @click="getContextMenu"><%- include("../svg/more.svg") %></button>
                 <button class="play-btn" v-if="!noplay.includes(item.type)"
                         @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
                 <div class="badge-container" v-if="itemBadges.length != 0">
@@ -108,12 +108,11 @@
                 let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
                 return color
             },
-            getContextMenu(item) {
+            getContextMenu(event) {
-                console.log(item)
+                if (this.item.type == "artists") {
-                if (item.type == "artists") {
+                    return this.artistMenu(event)
-                    return this.artistMenu(item)
                 } else {
-                    return this.contextMenu(item)
+                    return this.contextMenu(event)
                 }
             },
             getSubtitle() {
@@ -509,6 +508,7 @@
                 }
             },
             async artistMenu (event) {
+                console.debug(this.item)
                 let self = this
                 let followAction = "follow"
                 let followActions = {
@@ -516,21 +516,21 @@
                         icon: "./assets/feather/plus-circle.svg",
                         name: app.getLz('action.follow'),
                         action: ()=>{
-                            self.app.cfg.home.followedArtists.push(event.id)
+                            self.app.cfg.home.followedArtists.push(this.item.id)
                         }
                     },
                     unfollow: {
                         icon: "./assets/feather/x-circle.svg",
                         name: app.getLz('action.unfollow'),
                         action: ()=>{
-                            let index = self.app.cfg.home.followedArtists.indexOf(event.id)
+                            let index = self.app.cfg.home.followedArtists.indexOf(this.item.id)
                             if (index > -1) {
                                 self.app.cfg.home.followedArtists.splice(index, 1)
                             }
                         }
                     }
                 }
-                if(self.app.cfg.home.followedArtists.includes(event.id)) {
+                if(self.app.cfg.home.followedArtists.includes(this.item.id)) {
                     followAction = "unfollow"
                 }
                 app.showMenuPanel({
@@ -539,7 +539,7 @@
                             icon: "./assets/feather/play.svg",
                             name: app.getLz('action.startRadio'),
                             action: ()=>{
-                                app.mk.setStationQueue({artist:event.id}).then(()=>{
+                                app.mk.setStationQueue({artist:this.item.id}).then(()=>{
                                     app.mk.play()
                                 })
                             }
@@ -549,7 +549,7 @@
                             icon: "./assets/feather/share.svg",
                             name: app.getLz('term.share'),
                             action: ()=>{
-                                self.app.copyToClipboard(event.attributes.url)
+                                self.app.copyToClipboard(this.item.id.attributes.url)
                             }
                         },
                         {

src/renderer/views/components/menu-panel.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="cider-menu-panel">
     <div class="menu-panel" @click.self="menuPanel.visible = false" @contextmenu.self="menuPanel.visible = false">
 
-        <div class="menu-panel-body" :style="getStyle()">
+        <div class="menu-panel-body" ref="menubody" :style="elStyle" :class="getBodyClasses()">
             <div class="menu-header-text" v-if="content.name != ''">
                 <div class="row">
                     <div class="col">
@@ -46,18 +46,34 @@
                 getSvgIcon: this.$root.getSvgIcon,
                 position: [0, 0],
                 size: [0, 0],
-                event: this.$root.menuPanel.event
+                event: this.$root.menuPanel.event,
+                direction: "down",
+                elStyle: {
+                    opacity: 0
+                }
             }
         },
         mounted() {
+            console.log("MOUNTED")
             if (this.event) {
                 this.position = [this.event.clientX, this.event.clientY];
             }
             this.$nextTick(() => {
-                this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
+                // this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
+                // ugly hack
+                setTimeout(this.getStyle, 1)
             });
         },
         methods: {
+            getBodyClasses() {
+                if (this.direction == "down") {
+                    return ["menu-panel-body-down"]
+                } else if (this.direction == "up") {
+                    return ["menu-panel-body-up"]
+                } else {
+                    return ["foo"]
+                }
+            },
             getClasses(item) {
                 if (item["active"]) {
                     return "active";
@@ -65,7 +81,8 @@
             },
             getStyle() {
                 let style = {}
-
+                console.debug(this.$refs.menubody)
+                this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
                 if (this.event) {
                     style["position"] = "absolute";
                     style["left"] = this.event.clientX + "px";
@@ -77,8 +94,22 @@
                     if (this.event.clientY + this.size[1] > window.innerHeight) {
                         style["top"] = (this.event.clientY - this.size[1]) + "px";
                     }
+
+
+                    // if the panel is above the mouse, set the direction to up
+                    if (this.event.clientY < this.size[1]) {
+                        this.direction = "up";
+                    } else {
+                        this.direction = "down";
                     }
-                return style
+                    // check if the panel is too long and goes off the screen vertically,
+                    // if so move it upwards
+                    if (this.event.clientY + this.size[1] > window.innerHeight) {
+                        style["top"] = (this.event.clientY - this.size[1]) + "px";
+                    }
+                }
+                style["opacity"] = 1
+                this.elStyle = style;
             },
             getItemStyle(item) {
                 let style = {}

src/renderer/views/pages/audiolabs.ejs

@@ -4,7 +4,7 @@
             <div class="settings-option-body">
                 <div class="md-option-line">
                     <b-jumbotron :header="$root.getLz('settings.option.audio.audioLab')"
-                                 :lead="$root.getLz('settings.option.audio.audioLab.subheader')"></b-jumbotron>
+                                 lead="Designed by Cider Acoustic Technologies in California"></b-jumbotron>
                 </div>
                 <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === false">
                     <div class="md-option-segment">
@@ -100,21 +100,10 @@
                             <option value="NATURAL_STANDARD">{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural1')}}</option>
                             <option value="NATURAL_HIGH">{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural2')}}</option>
                             <option value="NATURAL_PLUS">{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural3')}}</option>
+                            <option value="CRYPTO">Cryptofyre</option>
                         </select>
                     </div>
                 </div>
-                <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
-                    <div class="md-option-segment">
-                        {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}
-                        <br>
-                        <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization.description')}}</small>
-                    </div>
-                    <div class="md-option-segment md-option-segment_auto">
-                        <input type="checkbox" v-model="app.cfg.audio.spatial"
-                               :disabled="app.cfg.audio.maikiwiAudio.spatial === true" v-on:change="toggleSpatial"
-                               switch/>
-                    </div>
-                </div>
                 <div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
                     <div class="md-option-segment">
                         {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization')}}
@@ -123,11 +112,11 @@
                     </div>
                     <div class="md-option-segment md-option-segment_auto">
                         <input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.spatial"
-                               :disabled="app.cfg.audio.spatial === false" v-on:change="toggleMaikiwiSpatial" switch/>
+                               v-on:change="toggleMaikiwiSpatial" switch/>
                     </div>
                 </div>
                 <div class="md-option-line"
-                     v-show="app.cfg.audio.maikiwiAudio.spatial === true && app.cfg.audio.spatial === true">
+                     v-show="app.cfg.audio.maikiwiAudio.spatial === true">
                     <div class="md-option-segment">
                         {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile')}}
                         <br>
@@ -141,7 +130,7 @@
                         </select>
                     </div>
                 </div>
-                <div class="spprofile-line" v-show="app.cfg.audio.maikiwiAudio.spatial === true && app.cfg.audio.spatial === true">
+                <div class="spprofile-line" v-show="app.cfg.audio.maikiwiAudio.spatial === true">
                     <div class="spprofile-viewport">
                         <button class="spprev" @click="profilePrev"></button>
                         <button class="nextprev" @click="profileNext"></button>
@@ -239,7 +228,7 @@
                 this.toggleMaikiwiSpatial()
             },
             toggleSpatial: function () {
-                if (app.cfg.audio.spatial) {
+                if (app.cfg.audio.maikiwiAudio.spatial) {
                     CiderAudio.spatialOn()
                     CiderAudio.hierarchical_loading();
                 } else {

src/renderer/views/pages/settings.ejs

@@ -23,7 +23,11 @@
                                 {{$root.getLz('term.privateSession')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="$root.cfg.general.privateEnabled" v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled" switch/>
+                                <label>
+                                    <input type="checkbox" v-model="$root.cfg.general.privateEnabled"
+                                           v-on:change="$root.mk.privateEnabled = $root.cfg.general.privateEnabled"
+                                           switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.platform !== 'linux'">
@@ -31,7 +35,9 @@
                                 {{$root.getLz('settings.option.window.openOnStartup')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.general.onStartup.enabled" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.cfg.general.onStartup.enabled">
@@ -39,7 +45,9 @@
                                 {{$root.getLz('settings.option.window.openOnStartup.hidden')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.general.onStartup.hidden" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -54,11 +62,18 @@
                                 </small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <select class="md-select" style="width:180px;" v-model="$root.cfg.general.resumeOnStartupBehavior">
+                                <label>
+                                    <select class="md-select" style="width:180px;"
+                                            v-model="$root.cfg.general.resumeOnStartupBehavior">
                                         <option value="disabled">{{$root.getLz('term.disabled')}}</option>
-                                    <option value="local">{{$root.getLz('settings.option.general.resumebehavior.locally')}}</option>
+                                        <option value="local">
-                                    <option value="history">{{$root.getLz('settings.option.general.resumebehavior.history')}}</option>
+                                            {{$root.getLz('settings.option.general.resumebehavior.locally')}}
+                                        </option>
+                                        <option value="history">
+                                            {{$root.getLz('settings.option.general.resumebehavior.history')}}
+                                        </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -71,7 +86,9 @@
                                 </small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <select class="md-select" style="width:180px;" v-model="$root.cfg.general.resumeTabs.tab">
+                                <label>
+                                    <select class="md-select" style="width:180px;"
+                                            v-model="$root.cfg.general.resumeTabs.tab">
                                         <option value="home">{{$root.getLz('home.title')}}</option>
                                         <option value="library-recentlyadded">{{$root.getLz('term.recentlyAdded')}}</option>
                                         <option value="library-songs">{{$root.getLz('term.songs')}}</option>
@@ -79,8 +96,11 @@
                                         <option value="library-artists">{{$root.getLz('term.artists')}}</option>
                                         <option value="library-videos">{{$root.getLz('term.videos')}}</option>
                                         <option value="podcasts">{{$root.getLz('term.podcasts')}}</option>
-                                    <option value="dynamic">{{$root.getLz('settings.option.general.resumetabs.dynamic')}}</option>
+                                        <option value="dynamic">
+                                            {{$root.getLz('settings.option.general.resumetabs.dynamic')}}
+                                        </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -92,14 +112,18 @@
                                     {{$root.getLz('settings.option.general.customizeSidebar.customize')}}
                                 </button>
                             </div>
-                            <b-modal id="modal-1" centered  size="lg" :title="$root.getLz('settings.option.general.customizeSidebar')">
+                            <b-modal id="modal-1" centered size="lg"
+                                     :title="$root.getLz('settings.option.general.customizeSidebar')">
                                 <div class="settings-option-body">
                                     <div class="md-option-line">
                                         <div class="md-option-segment">
                                             {{ $root.getLz('term.recentlyAdded') }}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <input type="checkbox" v-model="app.cfg.general.sidebarItems.recentlyAdded" switch/>
+                                            <label>
+                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.recentlyAdded"
+                                                       switch/>
+                                            </label>
                                         </div>
                                     </div>
                                     <div class="md-option-line">
@@ -107,7 +131,9 @@
                                             {{ $root.getLz('term.songs') }}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
+                                            <label>
                                                 <input type="checkbox" v-model="app.cfg.general.sidebarItems.songs" switch/>
+                                            </label>
                                         </div>
                                     </div>
                                     <div class="md-option-line">
@@ -115,7 +141,10 @@
                                             {{ $root.getLz('term.albums') }}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <input type="checkbox" v-model="app.cfg.general.sidebarItems.albums" switch/>
+                                            <label>
+                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.albums"
+                                                       switch/>
+                                            </label>
                                         </div>
                                     </div>
                                     <div class="md-option-line">
@@ -123,7 +152,10 @@
                                             {{ $root.getLz('term.artists') }}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <input type="checkbox" v-model="app.cfg.general.sidebarItems.artists" switch/>
+                                            <label>
+                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.artists"
+                                                       switch/>
+                                            </label>
                                         </div>
                                     </div>
                                     <div class="md-option-line">
@@ -131,7 +163,10 @@
                                             {{ $root.getLz('term.videos') }}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <input type="checkbox" v-model="app.cfg.general.sidebarItems.videos" switch/>
+                                            <label>
+                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.videos"
+                                                       switch/>
+                                            </label>
                                         </div>
                                     </div>
                                     <div class="md-option-line">
@@ -139,7 +174,10 @@
                                             {{ $root.getLz('term.podcasts') }}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <input type="checkbox" v-model="app.cfg.general.sidebarItems.podcasts" switch/>
+                                            <label>
+                                                <input type="checkbox" v-model="app.cfg.general.sidebarItems.podcasts"
+                                                       switch/>
+                                            </label>
                                         </div>
                                     </div>
                                 </div>
@@ -154,15 +192,17 @@
                                     {{$root.getLz('settings.option.general.keybindings.open')}}
                                 </button>
                             </div>
-                            <b-modal id="modal-2" centered  size="lg" :title="$root.getLz('settings.option.general.keybindings')" ok-only>
+                            <b-modal id="modal-2" centered size="lg"
+                                     :title="$root.getLz('settings.option.general.keybindings')" ok-only>
                                 <div class="settings-option-body">
                                     <div class="md-option-line">
                                         <div class="md-option-segment">
                                             {{$root.getLz('settings.description.search')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('search')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.search.join(' + ')}}
+                                                    @click="keyBindUpdate('search')">
+                                                {{app.cfg.general.keybindings.search.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -171,8 +211,9 @@
                                             {{$root.getLz('settings.description.albums')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('albums')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.albums.join(' + ')}}
+                                                    @click="keyBindUpdate('albums')">
+                                                {{app.cfg.general.keybindings.albums.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -181,8 +222,9 @@
                                             {{$root.getLz('settings.description.artists')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('artists')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.artists.join(' + ')}}
+                                                    @click="keyBindUpdate('artists')">
+                                                {{app.cfg.general.keybindings.artists.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -191,8 +233,9 @@
                                             {{$root.getLz('settings.description.browse')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('browse')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.browse.join(' + ')}}
+                                                    @click="keyBindUpdate('browse')">
+                                                {{app.cfg.general.keybindings.browse.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -201,8 +244,9 @@
                                             {{$root.getLz('settings.description.private')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('togglePrivateSession')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.togglePrivateSession.join(' + ')}}
+                                                    @click="keyBindUpdate('togglePrivateSession')">
+                                                {{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -211,8 +255,9 @@
                                             {{$root.getLz('settings.description.remote')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('webRemote')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.webRemote.join(' + ')}}
+                                                    @click="keyBindUpdate('webRemote')">
+                                                {{app.cfg.general.keybindings.webRemote.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -221,8 +266,9 @@
                                             {{$root.getLz('settings.description.audio')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('audioSettings')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.audioSettings.join(' + ')}}
+                                                    @click="keyBindUpdate('audioSettings')">
+                                                {{app.cfg.general.keybindings.audioSettings.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -231,8 +277,9 @@
                                             {{$root.getLz('settings.description.plugins')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('pluginMenu')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.pluginMenu.join(' + ')}}
+                                                    @click="keyBindUpdate('pluginMenu')">
+                                                {{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -241,8 +288,9 @@
                                             {{$root.getLz('settings.description.cast')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('castToDevices')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.castToDevices.join(' + ')}}
+                                                    @click="keyBindUpdate('castToDevices')">
+                                                {{app.cfg.general.keybindings.castToDevices.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -251,8 +299,9 @@
                                             {{$root.getLz('settings.description.settings')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('settings')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.settings.join(' + ')}}
+                                                    @click="keyBindUpdate('settings')">
+                                                {{app.cfg.general.keybindings.settings.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -261,8 +310,9 @@
                                             {{$root.getLz('settings.description.developer')}}
                                         </div>
                                         <div class="md-option-segment md-option-segment_auto">
-                                            <button class="md-btn md-btn-small md-btn-block" @click="keyBindUpdate('openDeveloperTools')">
+                                            <button class="md-btn md-btn-small md-btn-block"
-                                                {{app.cfg.general.keybind.openDeveloperTools.join(' + ')}}
+                                                    @click="keyBindUpdate('openDeveloperTools')">
+                                                {{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
                                             </button>
                                         </div>
                                     </div>
@@ -287,13 +337,19 @@
                                 {{$root.getLz('settings.option.audio.quality')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" style="width:180px;" v-model="app.cfg.audio.quality"
                                             v-on:change="changeAudioQuality">
                                         <!-- // <option value="">{{$root.getLz('settings.header.audio.quality.hireslossless')}}</option> -->
                                         <!-- <option value="">{{$root.getLz('settings.header.audio.quality.lossless')}}</option> -->
-                                    <option value="HIGH">{{$root.getLz('settings.header.audio.quality.high')}} ({{$root.getLz('settings.header.audio.quality.high.description')}})</option>
+                                        <option value="HIGH">{{$root.getLz('settings.header.audio.quality.high')}}
-                                    <option value="STANDARD">{{$root.getLz('settings.header.audio.quality.standard')}} ({{$root.getLz('settings.header.audio.quality.standard.description')}})</option>
+                                            ({{$root.getLz('settings.header.audio.quality.high.description')}})
+                                        </option>
+                                        <option value="STANDARD">{{$root.getLz('settings.header.audio.quality.standard')}}
+                                            ({{$root.getLz('settings.header.audio.quality.standard.description')}})
+                                        </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -321,7 +377,11 @@
                                 {{$root.getLz('settings.option.audio.seamlessTransition')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.audio.seamless_audio" v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio" switch/>
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.audio.seamless_audio"
+                                           v-on:change="app.mk._bag.features['seamless-audio-transitions'] = app.cfg.audio.seamless_audio"
+                                           switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -331,8 +391,11 @@
                                 <small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.description')}}</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.advanced.AudioContext" v-on:change="toggleAudioContext"
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.advanced.AudioContext"
+                                           v-on:change="toggleAudioContext"
                                            switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
@@ -360,11 +423,19 @@
                         <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
                             <div class="md-option-segment" style="white-space: pre-line;">
                                 {{$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization')}}
-                                <small>{{app.cfg.audio.equalizer.vibrantBass != 0 || app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true ? `${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}` : $root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}}</small>
+                                <small>{{app.cfg.audio.equalizer.vibrantBass != 0 || app.cfg.audio.maikiwiAudio.spatial
+                                    === true || app.cfg.audio.maikiwiAudio.ciderPPE === true ?
+                                    `${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}\n${$root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled')}`
+                                    :
+                                    $root.getLz('settings.option.audio.enableAdvancedFunctionality.audioNormalization.description')}}</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.audio.normalization" v-on:change="toggleNormalization"
+                                <label>
-                                :disabled="app.cfg.audio.spatial === true || app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer === true" switch/>
+                                    <input type="checkbox" v-model="app.cfg.audio.normalization"
+                                           v-on:change="toggleNormalization"
+                                           :disabled="app.cfg.audio.spatial === true || app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer === true"
+                                           switch/>
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -382,12 +453,19 @@
                                 {{$root.getLz('settings.header.visual.theme')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)" v-model="$root.cfg.visual.theme">
+                                <label>
-                                    <option value="default.less">{{$root.getLz('settings.option.visual.theme.default')}}</option>
+                                    <select class="md-select" @change="$root.setTheme($root.cfg.visual.theme)"
-                                    <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}</option>
+                                            v-model="$root.cfg.visual.theme">
+                                        <option value="default.less">
+                                            {{$root.getLz('settings.option.visual.theme.default')}}
+                                        </option>
+                                        <option value="dark.less">{{$root.getLz('settings.option.visual.theme.dark')}}
+                                        </option>
                                         <option v-for="theme in themes" :value="theme.file">{{ theme.name }}</option>
                                     </select>
-                                <button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()" style="margin-top: 8px">
+                                </label>
+                                <button class="md-btn md-btn-small md-btn-block" @click="gitHubExplore()"
+                                        style="margin-top: 8px">
                                     {{$root.getLz('settings.option.visual.theme.github.explore')}}
                                 </button>
                             </div>
@@ -397,10 +475,12 @@
                                 {{$root.getLz("settings.option.visual.windowStyle")}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" v-model="$root.cfg.visual.directives.windowLayout">
                                         <option value="default">Cupertino</option>
                                         <option value="twopanel">Redmond</option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -408,9 +488,11 @@
                                 {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" @change="windowBgStyleChange"
                                             v-model="app.cfg.visual.window_background_style">
-                                    <option value="none">{{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
+                                        <option value="none">
+                                            {{$root.getLz('settings.header.visual.windowBackgroundStyle.none')}}
                                         </option>
                                         <option value="artwork">
                                             {{$root.getLz('settings.header.visual.windowBackgroundStyle.artwork')}}
@@ -422,6 +504,7 @@
                                             Mica (Beta)
                                         </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -429,14 +512,19 @@
                                 {{$root.getLz('settings.option.visual.animatedArtwork')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" v-model="app.cfg.visual.animated_artwork">
-                                    <option value="always">{{$root.getLz('settings.header.visual.animatedArtwork.always')}}
+                                        <option value="always">
+                                            {{$root.getLz('settings.header.visual.animatedArtwork.always')}}
                                         </option>
-                                    <option value="limited">{{$root.getLz('settings.header.visual.animatedArtwork.limited')}}
+                                        <option value="limited">
+                                            {{$root.getLz('settings.header.visual.animatedArtwork.limited')}}
                                         </option>
-                                    <option value="disabled">{{$root.getLz('settings.header.visual.animatedArtwork.disable')}}
+                                        <option value="disabled">
+                                            {{$root.getLz('settings.header.visual.animatedArtwork.disable')}}
                                         </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line"
@@ -445,19 +533,25 @@
                                 {{$root.getLz('settings.option.visual.animatedArtworkQuality')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" v-model="app.cfg.visual.animated_artwork_qualityLevel">
-                                    <option value="0">{{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
+                                        <option value="0">
+                                            {{$root.getLz('settings.header.visual.animatedArtworkQuality.low')}}
                                         </option>
-                                    <option value="1">{{$root.getLz('settings.header.visual.animatedArtworkQuality.medium')}}
+                                        <option value="1">
+                                            {{$root.getLz('settings.header.visual.animatedArtworkQuality.medium')}}
                                         </option>
-                                    <option value="2">{{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
+                                        <option value="2">
+                                            {{$root.getLz('settings.header.visual.animatedArtworkQuality.high')}}
                                         </option>
                                         <option value="3">
                                             {{$root.getLz('settings.header.visual.animatedArtworkQuality.veryHigh')}}
                                         </option>
-                                    <option value="4">{{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
+                                        <option value="4">
+                                            {{$root.getLz('settings.header.visual.animatedArtworkQuality.extreme')}}
                                         </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -465,7 +559,9 @@
                                 {{$root.getLz('settings.option.visual.animatedWindowBackground')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" switch v-model="app.cfg.visual.bg_artwork_rotation"/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -473,7 +569,10 @@
                                 {{$root.getLz('settings.option.visual.uiscale')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="number" min="0.5" max="4.0" step="0.25" @change="$root.getHTMLStyle()" v-model="app.cfg.visual.uiScale"/>
+                                <label>
+                                    <input type="number" min="0.5" max="4.0" step="0.25" @change="$root.getHTMLStyle()"
+                                           v-model="app.cfg.visual.uiScale"/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -482,6 +581,7 @@
                                 <small>({{$root.getLz('settings.option.visual.hardwareAcceleration.description')}})</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration">
                                         <option value="default">
                                             {{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
@@ -491,6 +591,7 @@
                                         </option>
                                         <option value="disabled">{{$root.getLz('term.disabled')}}</option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -498,8 +599,11 @@
                                 {{$root.getLz('settings.option.visual.showPersonalInfo')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.visual.showuserinfo" v-on:change="toggleUserInfo"
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.visual.showuserinfo"
+                                           v-on:change="toggleUserInfo"
                                            switch/>
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -513,7 +617,9 @@
                                 {{$root.getLz("settings.option.window.close_button_hide")}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.general.close_button_hide" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.platform !== 'darwin'">
@@ -522,7 +628,9 @@
                                 <small>({{$root.getLz("settings.option.visual.hardwareAcceleration.description")}})</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.platform !== 'darwin'">
@@ -530,10 +638,16 @@
                                 {{$root.getLz("settings.option.window.windowControlStyle")}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" v-model="app.cfg.visual.windowControlPosition">
-                                    <option value="0">{{$root.getLz("settings.option.window.windowControlStyle.right")}}</option>
+                                        <option value="0">
-                                    <option value="1">{{$root.getLz("settings.option.window.windowControlStyle.left")}}</option>
+                                            {{$root.getLz("settings.option.window.windowControlStyle.right")}}
+                                        </option>
+                                        <option value="1">
+                                            {{$root.getLz("settings.option.window.windowControlStyle.left")}}
+                                        </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -552,7 +666,9 @@
                                     {{$root.getLz('settings.option.lyrics.enableMusixmatch')}}
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
+                                    <label>
                                         <input type="checkbox" switch checked/>
+                                    </label>
                                     <!-- <input type="checkbox" v-model="app.cfg.lyrics.enable_mxm" switch /> -->
                                 </div>
                             </div>
@@ -563,7 +679,9 @@
                                 {{$root.getLz('settings.option.lyrics.enableMusixmatchKaraoke')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.lyrics.mxm_karaoke" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -571,6 +689,7 @@
                                 {{$root.getLz('settings.option.lyrics.musixmatchPreferredLanguage')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" v-model="app.cfg.lyrics.mxm_language">
                                         <option value='disabled'>Disabled</option>
                                         <option value='ab'>Abkhazian</option>
@@ -839,6 +958,7 @@
                                         <option value='za'>Zhuang</option>
                                         <option value='zu'>Zulu</option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -846,7 +966,9 @@
                                 {{$root.getLz('settings.option.lyrics.enableYoutubeLyrics')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.lyrics.enable_yt" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line">
@@ -854,7 +976,9 @@
                                 {{$root.getLz('settings.option.lyrics.enableQQLyrics')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.lyrics.enable_qq" switch/>
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -873,7 +997,9 @@
                                 {{$root.getLz('settings.option.connectivity.playbackNotifications')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.general.playbackNotifications" switch/>
+                                </label>
                             </div>
                         </div>
 
@@ -883,7 +1009,9 @@
                                 {{$root.getLz('settings.option.connectivity.discordRPC')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.general.discord_rpc.enabled" switch/>
+                                </label>
                             </div>
                         </div>
 
@@ -892,11 +1020,13 @@
                                 {{$root.getLz('settings.option.connectivity.discordRPC.clientName')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" v-model="app.cfg.general.discord_rpc.client">
                                         <option value="Cider">{{$root.getLz('app.name')}}</option>
                                         <option value="AppleMusic">{{$root.getLz('term.appleMusic')}}
                                         </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
 
@@ -905,7 +1035,9 @@
                                 {{$root.getLz('settings.option.connectivity.discordRPC.clearOnPause')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.general.discord_rpc.clear_on_pause" switch/>
+                                </label>
                             </div>
                         </div>
 
@@ -914,27 +1046,35 @@
                                 {{$root.getLz('settings.option.connectivity.discordRPC.hideButtons')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.general.discord_rpc.hide_buttons" switch/>
+                                </label>
                             </div>
                         </div>
 
                         <div class="md-option-line" v-show="app.cfg.general.discord_rpc.enabled != false">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br/>
-                                <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album}, {trackNumber}</small>
+                                <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album},
+                                    {trackNumber}</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="text" v-model="app.cfg.general.discord_rpc.details_format"/>
+                                </label>
                             </div>
                         </div>
 
                         <div class="md-option-line" v-show="app.cfg.general.discord_rpc.enabled != false">
                             <div class="md-option-segment">
                                 {{$root.getLz('settings.option.connectivity.discordRPC.stateFormat')}}
-                                <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album}, {trackNumber}</small>
+                                <small>{{$root.getLz('term.variables')}}: {artist}, {composer}, {title}, {album},
+                                    {trackNumber}</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="text" v-model="app.cfg.general.discord_rpc.state_format"/>
+                                </label>
                             </div>
                         </div>
 
@@ -955,7 +1095,9 @@
                                 {{$root.getLz('settings.option.connectivity.lastfmScrobble.delay')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="number" min="50" max="100" v-model="app.cfg.lastfm.scrobble_after"/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
@@ -963,7 +1105,9 @@
                                 {{$root.getLz('settings.option.connectivity.lastfmScrobble.nowPlaying')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.lastfm.NowPlaying" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
@@ -971,7 +1115,9 @@
                                 {{$root.getLz('settings.option.connectivity.lastfmScrobble.removeFeatured')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.lastfm.enabledRemoveFeaturingArtists" switch/>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line" v-show="app.cfg.lastfm.enabled">
@@ -979,7 +1125,9 @@
                                 {{$root.getLz('settings.option.connectivity.lastfmScrobble.filterLoop')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.lastfm.filterLoop" switch/>
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -1025,7 +1173,9 @@
                                 {{$root.getLz('settings.option.visual.plugin.github.explore')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn" @click="$root.appRoute('plugins-github')">{{ $root.getLz("settings.option.visual.plugin.github.explore") }}</button>
+                                <button class="md-btn" @click="$root.appRoute('plugins-github')">{{
+                                    $root.getLz("settings.option.visual.plugin.github.explore") }}
+                                </button>
                             </div>
                         </div>
 
@@ -1034,7 +1184,9 @@
                                 {{$root.getLz('settings.option.experimental.reinstallwidevine')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn" @click="reinstallWidevineCDM">{{$root.getLz('settings.option.experimental.reinstallwidevine')}}</button>
+                                <button class="md-btn" @click="reinstallWidevineCDM">
+                                    {{$root.getLz('settings.option.experimental.reinstallwidevine')}}
+                                </button>
                             </div>
                         </div>
 
@@ -1042,7 +1194,8 @@
                             <!-- Do not translate -->
                             <div class="md-option-segment">
                                 Style Editor<br>
-                                <small>Mix and match various theme components to get Cider looking exactly how you want.</small>
+                                <small>Mix and match various theme components to get Cider looking exactly how you
+                                    want.</small>
                             </div>
                             <div class="md-option-segment">
                                 <stylestack-editor :themes="themes"/>
@@ -1056,7 +1209,12 @@
                                 <small>{{$root.getLz('settings.option.experimental.unknownPlugin.description')}}</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('unknown-sources')" @click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')" switch/>
+                                <label>
+                                    <input type="checkbox"
+                                           v-model="app.cfg.advanced.experiments.includes('unknown-sources')"
+                                           @click="app.cfg.advanced.experiments.includes('unknown-sources') ? removeExperiment('unknown-sources') : addExperiment('unknown-sources')"
+                                           switch/>
+                                </label>
                             </div>
                         </div>
 
@@ -1067,7 +1225,9 @@
                                 <small>{{$root.getLz('settings.option.advanced.playlistTrackMapping.description')}}</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <input type="checkbox" v-model="app.cfg.advanced.playlistTrackMapping" switch/>
+                                </label>
                             </div>
                         </div>
 
@@ -1077,7 +1237,11 @@
                                 {{$root.getLz('settings.option.experimental.compactUI')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('compactui')" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')" switch/>
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.advanced.experiments.includes('compactui')"
+                                           @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
+                                           switch/>
+                                </label>
                             </div>
                         </div>
 
@@ -1086,7 +1250,12 @@
                                 {{$root.getLz('settings.option.experimental.inline_playlists')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" disabled v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/>
+                                <label>
+                                    <input type="checkbox" disabled
+                                           v-model="app.cfg.advanced.experiments.includes('inline-playlists')"
+                                           @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')"
+                                           switch/>
+                                </label>
                             </div>
                         </div>
 
@@ -1095,6 +1264,7 @@
                                 {{$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="app.cfg.general.language">
                                         <optgroup :label="index" v-for="(categories, index) in getLanguages()">
@@ -1103,6 +1273,7 @@
                                             </option>
                                         </optgroup>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line update-check">
@@ -1110,7 +1281,8 @@
                                 {{$root.getLz('settings.option.general.updateCider')}}
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <button class="md-btn" id='settings.option.general.updateCider.check' @click="app.checkForUpdate()">
+                                <button class="md-btn" id='settings.option.general.updateCider.check'
+                                        @click="app.checkForUpdate()">
                                     {{$root.getLz('term.check')}}
                                 </button>
                             </div>
@@ -1121,6 +1293,7 @@
                                 <small>({{$root.getLz('settings.option.general.updateCider.branch.description')}})</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
+                                <label>
                                     <select class="md-select" style="width:180px;" v-model="app.cfg.general.update_branch">
                                         <option value="main">
                                             {{$root.getLz('settings.option.general.updateCider.branch.main')}}
@@ -1129,6 +1302,7 @@
                                             {{$root.getLz('settings.option.general.updateCider.branch.develop')}}
                                         </option>
                                     </select>
+                                </label>
                             </div>
                         </div>
                         <div class="md-option-line update-check" v-if="app.platform === 'win32'">
@@ -1137,7 +1311,10 @@
                                 <small>({{$root.getLz('settings.option.visual.transparent.description')}})</small>
                             </div>
                             <div class="md-option-segment md-option-segment_auto">
-                                <input type="checkbox" v-model="app.cfg.visual.transparent" switch @change="promptForRelaunch()"/>
+                                <label>
+                                    <input type="checkbox" v-model="app.cfg.visual.transparent" switch
+                                           @change="promptForRelaunch()"/>
+                                </label>
                             </div>
                         </div>
                     </div>
@@ -1172,7 +1349,8 @@
                                     <br>
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
-                                    <button class="md-btn" id='settings.option.general.updateCider.check' @click="logoutCC()" style="display: flex;align-items: center;gap: 0.4em;">
+                                    <button class="md-btn" id='settings.option.general.updateCider.check'
+                                            @click="logoutCC()" style="display: flex;align-items: center;gap: 0.4em;">
                                         <%- include("../svg/check.svg") %>
                                         <div v>Connected</div>
                                     </button>
@@ -1180,7 +1358,8 @@
                             </div>
                             <div class="md-option-header" style="margin-left: -0.55em;">
                                 <span>{{app.cfg.connectUser.username}}</span>
-                                <img :src="'https://cdn.discordapp.com/avatars/' + app.cfg.connectUser.id + '/' + app.cfg.connectUser.avatar + '.png?size=32'"></img>
+                                <img :src="'https://cdn.discordapp.com/avatars/' + app.cfg.connectUser.id + '/' + app.cfg.connectUser.avatar + '.png?size=32'"
+                                     alt="Discord Avatar"></img>
                             </div>
 
                             <div class="md-option-line">
@@ -1188,7 +1367,11 @@
                                     Sync Settings
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
-                                    <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.settings" @click="app.cfg.connectUser.sync.settings = !app.cfg.connectUser.sync.settings" switch/>
+                                    <label>
+                                        <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.settings"
+                                               @click="app.cfg.connectUser.sync.settings = !app.cfg.connectUser.sync.settings"
+                                               switch/>
+                                    </label>
                                 </div>
                             </div>
 
@@ -1197,7 +1380,11 @@
                                     Sync Themes
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
-                                    <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.themes" @click="app.cfg.connectUser.sync.themes = !app.cfg.connectUser.sync.themes" switch/>
+                                    <label>
+                                        <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.themes"
+                                               @click="app.cfg.connectUser.sync.themes = !app.cfg.connectUser.sync.themes"
+                                               switch/>
+                                    </label>
                                 </div>
                             </div>
 
@@ -1206,7 +1393,11 @@
                                     Sync Plugins
                                 </div>
                                 <div class="md-option-segment md-option-segment_auto">
-                                    <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.plugins" @click="app.cfg.connectUser.sync.plugins = !app.cfg.connectUser.sync.plugins" switch/>
+                                    <label>
+                                        <input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.plugins"
+                                               @click="app.cfg.connectUser.sync.plugins = !app.cfg.connectUser.sync.plugins"
+                                               switch/>
+                                    </label>
                                 </div>
                             </div>
 
@@ -1346,7 +1537,7 @@
 		methods: {
 			windowBgStyleChange() {
 				this.$root.getNowPlayingArtworkBG(undefined, true)
-                if (this.$root.cfg.visual.window_background_style == "mica") {
+				if (this.$root.cfg.visual.window_background_style === "mica") {
 					this.$root.spawnMica()
 				}
 			},
@@ -1358,7 +1549,7 @@
 				})
 			},
 			keyBindUpdate: function (action) {
-                var blur = document.createElement('div');
+				const blur = document.createElement('div');
 				blur.className = 'blur';
 				blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
 				blur.style.position = 'fixed';
@@ -1372,15 +1563,15 @@
 				blur.style.justifyContent = 'center';
 				blur.style.fontSize = '2em';
 				blur.style.color = 'white';
-                blur.innerHTML = 'Press a combination of two keys to update keybind. Press Escape key to go back.'
+				blur.innerHTML = 'Press a combination of two keys to update keybinding. Press Escape key to go back.'
 				document.body.appendChild(blur);
 
-                var keyBind = [];
+				let keyBind = [];
-                var keyBindTimeout = setTimeout(function () {
+				const keyBindTimeout = setTimeout(function () {
 					keyBind = [];
 					document.body.removeChild(blur);
 				}, 30000);
-                var keyBindUpdate = function (e) {
+				const keyBindUpdate = function (e) {
 					if (document.body.contains(blur)) {
 						if (e.key == 'Escape') {
 							document.body.removeChild(blur);
@@ -1392,9 +1583,9 @@
 							} else {
 								keyBind.push(e.key);
 							}
-                        if (keyBind.length == 2) {
+							if (keyBind.length === 2) {
-                            if (keyBind[0] != keyBind[1]) {
+								if (keyBind[0] !== keyBind[1]) {
-                                    app.cfg.general.keybind[action] = keyBind
+									app.cfg.general.keybindings[action] = keyBind
 									document.body.removeChild(blur);
 									clearTimeout(keyBindTimeout);
 									notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
@@ -1406,22 +1597,22 @@
 								}
 							}
 						}
-                } else return;
 					}
+				};
 				document.addEventListener('keydown', keyBindUpdate);
 			},
 			keyBindReset: function () {
-                app.cfg.general.keybind.search = [app.platform == "darwin" ? "Command" : "Control","S"];
+				app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "S"];
-                app.cfg.general.keybind.albums = [app.platform == "darwin" ? "Command" : "Control","F"];
+				app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "F"];
-                app.cfg.general.keybind.artists = [app.platform == "darwin" ? "Command" : "Control","D"];
+				app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
-                app.cfg.general.keybind.browse = [app.platform == "darwin" ? "Command" : "Control","B"];
+				app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
-                app.cfg.general.keybind.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control","P"];
+				app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
-                app.cfg.general.keybind.webRemote = [app.platform == "darwin" ? "Command" : "Control","W"];
+				app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", "W"];
-                app.cfg.general.keybind.audioSettings = [app.platform == "darwin" ? "Option" : "Shift","A"];
+				app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Option" : "Shift", "A"];
-                app.cfg.general.keybind.pluginMenu = [app.platform == "darwin" ? "Option" : "Shift","P"];
+				app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Shift", "P"];
-                app.cfg.general.keybind.castToDevices = [app.platform == "darwin" ? "Option" : "Shift","C"];
+				app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Shift", "C"];
-                app.cfg.general.keybind.settings = [app.platform == "darwin" ? "Option" : "Shift","S"];
+				app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Shift", "S"];
-                app.cfg.general.keybind.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control",app.platform == "darwin" ? "Option" : "Shift","I"];
+				app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
 				notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
 				bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
 					if (ok) ipcRenderer.invoke("relaunchApp")
@@ -1476,8 +1667,7 @@
 								}
 							}
 						})
-                    }
+					} else {
-                    else {
 						CiderAudio.init();
 						if (app.cfg.audio.normalization === true) {
 							CiderAudio.normalizerOn()