diff --git a/README.md b/README.md
index f6cfbb0b..d0515b36 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
- A new cross-platform Apple Music experience based on Electron and Vue.js written from scratch with performance in mind. 🚀
+ A new cross-platform Apple Music experience based on Electron and Vue.js written from scratch with performance & visuals in mind. 🚀
diff --git a/appx/Square150x150Logo.PNG b/appx/Square150x150Logo.PNG
index 7ec9fb93..673996b9 100644
Binary files a/appx/Square150x150Logo.PNG and b/appx/Square150x150Logo.PNG differ
diff --git a/appx/Square44x44Logo.PNG b/appx/Square44x44Logo.PNG
index 7374d271..342f6441 100644
Binary files a/appx/Square44x44Logo.PNG and b/appx/Square44x44Logo.PNG differ
diff --git a/appx/Square44x44Logo.targetsize-44_altform-unplated.PNG b/appx/Square44x44Logo.targetsize-44_altform-unplated.PNG
index 7374d271..342f6441 100644
Binary files a/appx/Square44x44Logo.targetsize-44_altform-unplated.PNG and b/appx/Square44x44Logo.targetsize-44_altform-unplated.PNG differ
diff --git a/appx/StoreLogo.PNG b/appx/StoreLogo.PNG
index c9ff7a22..5fdd980e 100644
Binary files a/appx/StoreLogo.PNG and b/appx/StoreLogo.PNG differ
diff --git a/msft-test.json b/msft-test.json
index ddcf14f9..d7cdc2cd 100644
--- a/msft-test.json
+++ b/msft-test.json
@@ -39,7 +39,7 @@
"appx": {
"applicationId": "CiderAlpha",
"publisher": "CN=CiderCollective, OID.2.25.311729368913984317654407730594956997722=1",
- "displayName": "Cider (Alpha)",
+ "displayName": "Cider",
"identityName": "CiderCollective.CiderAlpha",
"backgroundColor": "transparent",
"setBuildNumber": true
diff --git a/package.json b/package.json
index 21b55cd3..5b44edf8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "cider",
"applicationId": "Cider",
"productName": "Cider",
- "version": "1.4.7",
+ "version": "1.5.0",
"description": "A new cross-platform Apple Music experience based on Electron and Vue.js written from scratch with performance in mind.",
"license": "AGPL-3.0",
"main": "./build/index.js",
@@ -40,7 +40,7 @@
"@sentry/electron": "^3.0.7",
"@sentry/integrations": "^6.19.6",
"adm-zip": "0.4.10",
- "airtunes2": "git+https://github.com/vapormusic/node_airtunes2.git#hap",
+ "airtunes2": "git+https://github.com/ciderapp/node_airtunes2",
"castv2-client": "^1.2.0",
"chokidar": "^3.5.3",
"discord-auto-rpc": "^1.0.16",
@@ -54,6 +54,7 @@
"electron-window-state": "^5.0.3",
"express": "^4.17.3",
"get-port": "^5.1.1",
+ "jimp": "^0.16.1",
"jsonc": "^2.0.0",
"lastfmapi": "^0.1.1",
"mdns-js": "git+https://github.com/ciderapp/node-mdns-js.git",
@@ -110,9 +111,9 @@
}
],
"build": {
- "electronVersion": "18.3.0",
+ "electronVersion": "19.0.1",
"electronDownload": {
- "version": "18.3.0+wvcus",
+ "version": "19.0.1+wvcus",
"mirror": "https://github.com/castlabs/electron-releases/releases/download/v"
},
"appId": "cider",
diff --git a/resources/icons/thumbar/dark_next.png b/resources/icons/thumbar/dark_next.png
index f56fefd4..6ec98abb 100644
Binary files a/resources/icons/thumbar/dark_next.png and b/resources/icons/thumbar/dark_next.png differ
diff --git a/resources/icons/thumbar/dark_pause.png b/resources/icons/thumbar/dark_pause.png
index a71ca9a9..8df81694 100644
Binary files a/resources/icons/thumbar/dark_pause.png and b/resources/icons/thumbar/dark_pause.png differ
diff --git a/resources/icons/thumbar/dark_play.png b/resources/icons/thumbar/dark_play.png
index af1d3bd5..3cb0bfa5 100644
Binary files a/resources/icons/thumbar/dark_play.png and b/resources/icons/thumbar/dark_play.png differ
diff --git a/resources/icons/thumbar/dark_previous.png b/resources/icons/thumbar/dark_previous.png
index 52b66d8f..c7dbd401 100644
Binary files a/resources/icons/thumbar/dark_previous.png and b/resources/icons/thumbar/dark_previous.png differ
diff --git a/resources/icons/thumbar/light_next.png b/resources/icons/thumbar/light_next.png
index 3de644f9..cb2261f0 100644
Binary files a/resources/icons/thumbar/light_next.png and b/resources/icons/thumbar/light_next.png differ
diff --git a/resources/icons/thumbar/light_pause.png b/resources/icons/thumbar/light_pause.png
index 428b380a..f528b33d 100644
Binary files a/resources/icons/thumbar/light_pause.png and b/resources/icons/thumbar/light_pause.png differ
diff --git a/resources/icons/thumbar/light_play.png b/resources/icons/thumbar/light_play.png
index 8ece27c0..128df4d3 100644
Binary files a/resources/icons/thumbar/light_play.png and b/resources/icons/thumbar/light_play.png differ
diff --git a/resources/icons/thumbar/light_previous.png b/resources/icons/thumbar/light_previous.png
index 4c99640c..6068befe 100644
Binary files a/resources/icons/thumbar/light_previous.png and b/resources/icons/thumbar/light_previous.png differ
diff --git a/src/i18n/README.md b/src/i18n/README.md
index 14616ed5..dee896d0 100644
--- a/src/i18n/README.md
+++ b/src/i18n/README.md
@@ -427,3 +427,12 @@ Update 24/05/2022 21:15 UTC
* `settings.option.general.updateCider.branch.main`: Deleted for all language files
* `settings.option.general.updateCider.branch.develop`: Deleted for all language files
* `settings.notyf.updateCider.update-error`: Deleted for all language files
+
+Update 30/5/2022 05:35 UTC
+
+* `settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.BSCBM`: Added to `en_US`
+* `settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.CUDDLE`: Added to `en_US`
+* `settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.bplk`: Added to `en_US`
+* `settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.hw2k`: Added to `en_US`
+* `settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.adaptive`: Added to `en_US`
+* `settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.legacy`: Added to `en_US`
diff --git a/src/i18n/de_DE.json b/src/i18n/de_DE.json
index c261fe64..dfbd55be 100644
--- a/src/i18n/de_DE.json
+++ b/src/i18n/de_DE.json
@@ -7,7 +7,7 @@
"date.format": "${d}.${m}.${y}",
"dialog.cancel": "Abbrechen",
"dialog.ok": "OK",
- "notification.updatingLibrarySongs": "Aktualisiere Songs...",
+ "notification.updatingLibrarySongs": "Aktualisiere Titel...",
"notification.updatingLibraryAlbums": "Aktualisiere Alben...",
"notification.updatingLibraryArtists": "Aktualisiere Künstler...",
"term.appleInc": "Apple Inc.",
@@ -24,13 +24,13 @@
"term.privateSession": "Private Sitzung",
"term.queue": "Warteschlange",
"term.history": "Verlauf",
- "term.search": "Suche",
+ "term.search": "Suchen",
"term.library": "Mediathek",
"term.listenNow": "Jetzt hören",
"term.browse": "Entdecken",
"term.radio": "Radio",
"term.recentlyAdded": "Zuletzt hinzugefügt",
- "term.songs": "Songs",
+ "term.songs": "Titel",
"term.albums": "Alben",
"term.artists": "Künstler",
"term.podcasts": "Podcasts",
@@ -282,6 +282,44 @@
"settings.option.experimental.compactUI": "Kompaktes UI",
"settings.option.window.close_button_hide": "Schließtaste soll die App verbergen",
"settings.option.experimental.inline_playlists": "Inline Playlists und Alben",
+ "settings.header.advanced": "Erweitert",
+ "settings.option.debug.openAppData": "Öffne Cider-Ordner",
+ "settings.option.visual.theme.github.explore": "Durchsuche GitHub Themes",
+ "settings.option.visual.plugin.github.explore": "Durchsuche GitHub Plugins",
+ "settings.option.experimental.reinstallwidevine": "WidevineCDM neu installieren",
+ "settings.option.experimental.reinstallwidevine.confirm": "Möchtest du wirklich Widevine neu installieren?",
+ "settings.option.visual.theme.checkForUpdates": "Nach Updates suchen",
+ "settings.option.visual.theme.manageStyles": "Styles verwalten",
+ "settings.option.window.useNativeTitleBar": "Native Fenster-Titelleiste verwenden",
+ "settings.option.window.windowControlStyle": "Fenstersteuerungs-Stil",
+ "settings.option.window.windowControlStyle.right": "Rechts",
+ "settings.option.experimental.unknownPlugin": "Unbekannte Quellen",
+ "settings.option.experimental.unknownPlugin.description": "Erlaube Installation von Plugins von anderen Quellen als der Cider-Plugin-Quelle",
+ "settings.option.window.windowControlStyle.left": "Links",
+ "settings.option.visual.windowStyle": "Fenster-Style",
+ "settings.option.general.resumebehavior": "Fortsetzungs-Verhalten",
+ "settings.option.general.resumebehavior.description": "Fortsetzungs-Verhalten beeinflusst, wie Cider die Sitzung fortsetzt, wenn man zur App zurückkehrt.",
+ "settings.option.general.resumebehavior.locally": "Lokal",
+ "settings.option.general.resumebehavior.locally.description": "Cider wird die letzte Sitzung auf diesem Rechner fortsetzen.",
+ "settings.option.general.resumebehavior.history": "Verlauf",
+ "settings.option.general.resumebehavior.history.description": "Cider wird den letzten Song aus dem geräteübergreifenden Apple-Music-Verlauf in die Warteschlange stellen.",
+ "settings.option.general.resumetabs" : "Tab beim Start öffnen",
+ "settings.option.general.resumetabs.description" : "Wähle welcher Tab beim Starten von Cider geöffnet werden soll.",
+ "settings.option.general.resumetabs.dynamic" : "Dynamisch",
+ "settings.option.general.resumetabs.dynamic.description" : "Cider wird den zuletzt genutzten Tab öffnen.",
+ "settings.option.general.keybindings": "Tastenkombinationen",
+ "settings.option.general.keybindings.pressCombination": "Drücke eine Kombination aus zwei Tasten um die Tastenkombination zu aktualisieren.",
+ "settings.option.general.keybindings.pressEscape": "Drücke Escape um zurückzukehren.",
+ "settings.notyf.general.keybindings.update.success": "Tastenkombination erfolgreich aktualisiert",
+ "settings.prompt.general.keybindings.update.success": "Tastenkombination erfolgreich aktualisiert. Drücke OK um Cider neuzustarten.",
+ "settings.option.general.keybindings.open": "Öffnen",
+ "settings.option.general.themeUpdateNotification": "Automatisch nach Theme-Updates suchen",
+ "settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "Verwaltet vom Audio Lab",
+ "settings.option.advanced.playlistTrackMapping.description": "Ermöglicht tiefes Scannen von Wiedergabelisten, um festzustellen, welche Titel sich in welchen Wiedergabelisten befinden. Die Erstellungszeiten für den Wiedergabelisten-Cache können sich erheblich verlängern.",
+ "settings.option.visual.transparent": "Transparentes Fenster",
+ "settings.option.visual.transparent.description": "Benötigt Theme Support, Neustart erforderlich",
+ "action.cast.todevices": "An Geräte streamen",
+ "action.cast.stop": "Streamen an alle Geräte beenden",
"spatial.notTurnedOn": "Die Audio-Spatialisierung ist deaktiviert. Um sie zu verwenden, musst du diese zuerst aktivieren.",
"spatial.spatialProperties": "Räumliche Einstellungen",
"spatial.width": "Breite",
@@ -299,10 +337,39 @@
"spatial.right": "Rechts",
"spatial.back": "Hinten",
"spatial.down": "Unten",
- "spatial.listener": "Hörer*in",
+ "spatial.listener": "Hörer",
"spatial.audioSource": "Audioquelle",
"settings.header.unfinished": "Unvollendet",
+ "settings.option.window.openOnStartup": "Öffne Cider beim Start",
+ "settings.option.window.openOnStartup.hidden": "Öffne Cider minimiert",
+ "term.audioControls": "Lautstärkeregelung",
+ "term.variables": "Variablen",
+ "settings.option.audio.volumeStep": "Lautstärke-Schritt",
+ "settings.option.audio.maxVolume": "Max. Lautstärke",
+ "settings.option.audio.changePlaybackRate": "Wiedergabegeschwindigkeit ändern",
+ "settings.option.audio.playbackRate": "Wiedergabegeschwindigkeit",
+ "settings.option.audio.playbackRate.change": "Ändern",
+ "settings.option.audio.dbspl.display": "dB SPL Anzeige",
+ "settings.option.audio.dbspl.description": "(Nur für erfahrene Benutzer) Zeigt dB SPL anstelle von dBFS am Lautstärkeregler.",
+ "settings.option.audio.dbfs.calibration": "0 dBFS Kalibration",
+ "settings.option.audio.dbfs.description": "Geb den Spitzenwert des Z-gewichteten dB SPL an, wenn Cider auf 0 dBFS steht.",
+ "settings.option.connectivity.discordRPC.hideButtons": "Buttons im Discord Rich Presence ausblenden",
+ "settings.option.connectivity.discordRPC.hideTimestamp": "Zeitstempel im Discord Rich Presence ausblenden",
+ "settings.option.general.showLovedTracksInline": "Zeige geliebte Titel inline",
+ "settings.option.audio.advanced": "Erweiterte Lautstärkeregelung",
"remote.web.title": "Cider Remote",
"remote.web.description": "Scanne den QR-Code um dein Handy mit dieser Cider-Instanz zu verbinden",
- "about.thanks": "Vielen lieben Dank an das Cider Collective Team und an alle Mithelfer."
+ "about.thanks": "Vielen lieben Dank an das Cider Collective Team und an alle Mithelfer.",
+ "term.navigateBack": "Zurück",
+ "term.navigateForward": "Weiter",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPE.description": "Verbessert die wahrgenommene Audioqualität von AAC-kodierten Audiodaten durch die Verwendung eines Echtzeit-Algorithmus, der sowohl psychoakustische Modelle des menschlichen Gehörs als auch AAC-Kodierungsmerkmale nutzt.",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description": "Verwirklicht eine andere musikalische Atmosphäre, die nach dem Stand der Technik von Audio-Setups modelliert ist.",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description": "Ändert die Betriebsart des Atmosphere Realizer-Moduls.",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "Vorabgestimmter Spatialisierungseffekt. Deaktiviert die anpassbaren Einstellungen der Audio-Spatialisierung.",
+ "settings.option.audio.audioLab.description": "Eine Auswahl an selbst entwickelten Audioeffekten für Cider.",
+ "action.open": "Öffnen",
+ "settings.option.visual.theme.github.openfolder": "Öffne Themes Ordner",
+ "settings.option.debug.copy_log": "Logs in die Zwischenablage kopieren",
+ "settings.header.visual.theme.github.page": "Themes von GitHub",
+ "settings.header.visual.plugin.github.page": "Plugins von GitHub"
}
diff --git a/src/i18n/en_OWO.json b/src/i18n/en_OWO.json
index eb9848ac..288e3381 100644
--- a/src/i18n/en_OWO.json
+++ b/src/i18n/en_OWO.json
@@ -131,6 +131,8 @@
"term.audioControls": "Vowume Contwows",
"term.clearAll": "Cweaw Aww",
"term.recentStations": "Wecent Stations",
+ "term.personalStations": "Pewsonyaw Stations",
+ "term.amLive": "Appwe Music Wive",
"term.language": "Wanguage",
"term.funLanguages": "Fun",
"term.noLyrics": "Woading... / Wywics nyot found./ Instwumentaw.",
@@ -556,4 +558,4 @@
"share.platform.songLink": "Copy with song.wink",
"share.platform.clipboard": "Copy Wink",
"about.thanks": "Majow thanks to the Cidew Cowwective Team and aww of ouw contwibutows."
-}
+}
\ No newline at end of file
diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index db9a03f7..0bf14f90 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -2,7 +2,7 @@
"i18n.languageName": "English (US)",
"i18n.languageNameEnglish": "English (US)",
"i18n.category": "main",
- "i18n.authors": "@maikirakiwi @kyw504100 @nosh118",
+ "i18n.authors": "@notmaikiwi @kyw504100 @nosh118 @cryptofyre",
"app.name": "Cider",
"date.format": "${m} ${d}, ${y}",
"dialog.cancel": "Cancel",
@@ -212,6 +212,12 @@
"podcast.episodes": "Episodes",
"podcast.playEpisode": "Play Episode",
"podcast.website": "Podcast Website",
+ "action.hideLibrary": "Hide Library",
+ "action.showLibrary": "Show Library",
+ "action.cut": "Cut",
+ "action.paste": "Paste",
+ "action.selectAll": "Select All",
+ "action.delete": "Delete",
"action.edit": "Edit",
"action.done": "Done",
"action.editTracklist": "Edit Tracklist",
@@ -367,6 +373,7 @@
"settings.header.audio": "Audio",
"settings.header.audio.description": "Adjust the audio settings for Cider.",
"settings.option.audio.volumeStep": "Volume Step",
+ "settings.option.audio.advanced": "Advanced Volume Control",
"settings.option.audio.maxVolume": "Max Volume",
"settings.option.audio.changePlaybackRate": "Change Playback Rate",
"settings.option.audio.playbackRate": "Playback Rate",
@@ -406,18 +413,22 @@
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.E168_1": "Jasmine Macchiato",
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.Z3600": "Hokkaido Milk Tea",
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.Z8500": "Moonlight Softcake",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.BSCBM": "Brown Sugar Creme Brûlée Milk",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.CUDDLE": "Cuddle Warmth",
"settings.option.audio.enableAdvancedFunctionality.ciderPPE": "Cider Adrenaline Processor™️",
"settings.option.audio.enableAdvancedFunctionality.ciderPPE.description": "Enhances the perceived audio quality of AAC encoded audio by using a real-time algorithm that takes advantage of both psychoacoustic models of human hearing and AAC encoding characteristics.",
"settings.warn.audio.enableAdvancedFunctionality.ciderPPE.compatibility": "CAP is not compatible with Spatialization. Please disable Spatialization to continue.",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength": "CAP Strength",
"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.standard": "Standard",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.adaptive": "Adaptive",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.legacy": "Legacy",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.aggressive": "Aggressive",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization": "Audio Normalization",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "Normalizes peak volume for individual tracks to create a more uniform listening experience. (Does not work on user uploaded tracks)",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "Managed by Audio Lab",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization": "Cider Tuned Spatialization",
- "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "Pre-tuned Spatializing Effect, disables the customizable settings of Audio Spatialization. Spatialization must be enabled as a prerequisite.",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "Pre-tuned Spatializing Effect, disables the customizable settings of Audio Spatialization.",
"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",
@@ -426,6 +437,8 @@
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.minimal": "Minimal",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile": "Audiophile",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.diffused": "Diffused",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.bplk": "Encore",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.hw2k": "Expanded Encore",
"settings.warn.audio.enableAdvancedFunctionality.audioSpatialization.compatibility": "Spatialization is not compatible with CAP. Please disable CAP to continue.",
"settings.option.audio.dbspl.display": "dB SPL Display",
"settings.option.audio.dbspl.description": "(Advanced users only) Display dB SPL instead of dBFS on the volume slider.",
@@ -564,5 +577,44 @@
"share.platform.email": "Email",
"share.platform.songLink": "Copy with song.link",
"share.platform.clipboard": "Copy Link",
- "about.thanks": "Major thanks to the Cider Collective Team and all of our contributors."
+ "about.thanks": "Major thanks to the Cider Collective Team and all of our contributors.",
+ "oobe.yes": "Yes",
+ "oobe.no": "No",
+ "oobe.next": "Next",
+ "oobe.previous": "Previous",
+ "oobe.done": "Done",
+ "oobe.amupsell.title": "Before we start",
+ "oobe.amupsell.text": "Cider requires an active, paid Apple Music subscription\nCider will not work with Apple Music Voice Plan or some promotional trial subscriptions. If you already have a qualified Apple Music subscription click Next to continue.",
+ "oobe.amupsell.subscribeBtn": "Subscribe to Apple Music",
+ "oobe.amupsell.explainBtn": "Explain",
+ "oobe.amupsell.subscribeUrl": "https://apple.co/3MdqJVQ",
+ "oobe.amupsell.amWebUrl": "https://beta.music.apple.com/",
+ "oobe.amupsell.promoExplained": "Some promotional and non US Apple Music trial subscriptions do not have access to the required Apple Music Web Player API's needed for Cider to function. To verify if your active trial will work with Cider go to {{ amWebUrl }} log in and try to play some music. If it works, great! You're ready to use Cider, however if it does not consider subscribing to Apple Music here: {{ subscribeUrl }} ",
+ "oobe.intro.title": "Welcome to Cider",
+ "oobe.intro.subtitle": "",
+ "oobe.intro.text": "Let's get a few things set up so you can use Cider, how you'd like. You can always change these settings later.",
+ "oobe.general.title": "General",
+ "oobe.general.subtitle": "",
+ "oobe.general.text": "",
+ "oobe.audio.title": "Audio",
+ "oobe.audio.subtitle": "",
+ "oobe.audio.text": "Cider features a custom tuned and designed audio stack that delivers a rich high quality audio experience.\nFeaturing Cider Adrenaline, Atmosphere Realizer, and Spatialized Audio.\nTo enable this functionality \"Advanced Audio Functionality\" must be enabled.\nEnabling Advanced Audio Functionality will give you access to these enhancements in the Cider Audio Labs, found in the app settings.",
+ "oobe.audio.advancedFunctionality": "",
+ "oobe.visual.title": "Visual",
+ "oobe.visual.subtitle": "",
+ "oobe.visual.text": "",
+ "oobe.visual.layout.text": "Cider features two window different layouts.\nMaverick is an iTunes like layout with the player at the top of the window.\nMojave is a new spin created by the Cider Collective.\n\nYou can change the layout any time in the settings.",
+ "oobe.visual.suggestingThemes": "Theming is a great way to personalize your experience. Here are a few we suggest: ",
+ "oobe.visual.suggestingThemes.subtext": "(These themes will be downloaded from GitHub)",
+ "oobe.visual.suggestingThemes.default": "Cider",
+ "oobe.visual.suggestingThemes.default.text": "The classic Cider theme.",
+ "oobe.visual.suggestingThemes.dark": "Dark",
+ "oobe.visual.suggestingThemes.dark.text": "Darkness.",
+ "oobe.visual.suggestingThemes.community1": "Groovy",
+ "oobe.visual.suggestingThemes.community1.text": "A WinUI influenced theme",
+ "oobe.visual.suggestingThemes.community2": "iTheme",
+ "oobe.visual.suggestingThemes.community2.text": "The classic big fruit layout.",
+ "oobe.visual.suggestingThemes.community3": "Dracula",
+ "oobe.visual.suggestingThemes.community3.text": "The iconic Dracula color scheme.",
+ "oobe.amsignin.title": ""
}
diff --git a/src/i18n/hi_IN.json b/src/i18n/hi_IN.json
index f3186db3..d941bf5d 100644
--- a/src/i18n/hi_IN.json
+++ b/src/i18n/hi_IN.json
@@ -2,7 +2,7 @@
"i18n.languageName": "हिन्दी",
"i18n.languageNameEnglish": "Hindi",
"i18n.category": "main",
- "i18n.authors": "@maikirakiwi @vringster",
+ "i18n.authors": "@notmaikiwi @vringster",
"app.name": "Cider",
"date.format": "${m} ${d}, ${y}",
"dialog.cancel": "रोकें",
diff --git a/src/i18n/ja_JP.json b/src/i18n/ja_JP.json
index b7f427ac..7e7b0ad1 100644
--- a/src/i18n/ja_JP.json
+++ b/src/i18n/ja_JP.json
@@ -2,7 +2,7 @@
"i18n.languageName": "日本語",
"i18n.languageNameEnglish": "Japanese",
"i18n.category": "main",
- "i18n.authors": "@maikirakiwi @tanaka_kakuel",
+ "i18n.authors": "@notmaikiwi @tanaka_kakuel",
"app.name": "Cider",
"date.format": "${y}年${m}月${d}日",
"dialog.cancel": "キャンセル",
@@ -334,22 +334,31 @@
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.E168_1": "春毫ジャスミンマキアート",
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.Z3600": "北海道のロイヤルミルクティー",
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.Z8500": "ムーンライトソフトケーキ",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.BSCBM": "黒糖クレームブリュレミルク",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.CUDDLE": "布団はやわらかいなー",
"settings.option.audio.enableAdvancedFunctionality.ciderPPE": "Cider Adrenaline Processor™️",
- "settings.option.audio.enableAdvancedFunctionality.ciderPPE.description": "音楽をより豊かに、生き生きとさせます",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPE.description": "人の聴覚心理モデルとAAC符号化の特徴を活用したリアルタイムアルゴリズムにより、AACの認知音質を向上させます。",
"settings.warn.audio.enableAdvancedFunctionality.ciderPPE.compatibility": "CAPはSpatializationと互換性がありません",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength": "CAPの強さ",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.description": "音に施す処理の強さを設定します (強くしすぎると望ましい結果が得られないかもしれません)",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.standard": "標準",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.aggressive": "高",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.adaptive": "アダプティブ",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.legacy": "レガシー",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization": "オーディオノーマライズ",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "さまざまな曲の音量を均一にし、より整った音を楽しめるようにする機能です。",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "Audio Labの設定",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization": "Cider Tuned Spatialization",
- "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "開発チームがチューニングした設定を使用することができます。(オーディオ空間化を有効にする必要があります)",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "開発チームがチューニングした設定を使用することができます。",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile": "Cider Spatialization Profile",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description": "プロファイルをSpatializationに変更します",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard": "スタンダード",
- "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile": "Audiophile",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.soundstage": "音場",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.separation": "分離感",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.minimal": "ミニマル",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.diffused": "拡散",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.bplk": "アンコール",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.hw2k": "拡張アンコール",
"settings.warn.audio.enableAdvancedFunctionality.audioSpatialization.compatibility": "オーディオ空間化はCAPと互換性がありません",
"settings.header.visual": "ビジュアル",
"settings.header.visual.description": "Ciderのビジュアル設定",
diff --git a/src/i18n/source/en_US.json b/src/i18n/source/en_US.json
index 645309e9..0bf14f90 100644
--- a/src/i18n/source/en_US.json
+++ b/src/i18n/source/en_US.json
@@ -2,7 +2,7 @@
"i18n.languageName": "English (US)",
"i18n.languageNameEnglish": "English (US)",
"i18n.category": "main",
- "i18n.authors": "@maikirakiwi @kyw504100 @nosh118",
+ "i18n.authors": "@notmaikiwi @kyw504100 @nosh118 @cryptofyre",
"app.name": "Cider",
"date.format": "${m} ${d}, ${y}",
"dialog.cancel": "Cancel",
@@ -212,6 +212,12 @@
"podcast.episodes": "Episodes",
"podcast.playEpisode": "Play Episode",
"podcast.website": "Podcast Website",
+ "action.hideLibrary": "Hide Library",
+ "action.showLibrary": "Show Library",
+ "action.cut": "Cut",
+ "action.paste": "Paste",
+ "action.selectAll": "Select All",
+ "action.delete": "Delete",
"action.edit": "Edit",
"action.done": "Done",
"action.editTracklist": "Edit Tracklist",
@@ -263,6 +269,7 @@
"action.tray.playpause": "Play/Pause",
"action.tray.next": "Next",
"action.tray.previous": "Previous",
+ "action.tray.listento": "Listen To:",
"action.update": "Update",
"action.install": "Install",
"action.copy": "Copy",
@@ -366,6 +373,7 @@
"settings.header.audio": "Audio",
"settings.header.audio.description": "Adjust the audio settings for Cider.",
"settings.option.audio.volumeStep": "Volume Step",
+ "settings.option.audio.advanced": "Advanced Volume Control",
"settings.option.audio.maxVolume": "Max Volume",
"settings.option.audio.changePlaybackRate": "Change Playback Rate",
"settings.option.audio.playbackRate": "Playback Rate",
@@ -398,20 +406,29 @@
"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.NATURAL_STANDARD": "Natural (Standard)",
- "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.NATURAL_PLUS": "Natural (Plus)",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.NATURAL_STANDARD": "Hōjicha Cheese Foam Tea",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.NATURAL_PLUS": "Genmaicha Tapioca Milk Tea",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.E68_1": "Rock Salt Cheese Foam Tea",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.E68_2": "Uji Matcha Milk Tea",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.E168_1": "Jasmine Macchiato",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.Z3600": "Hokkaido Milk Tea",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.Z8500": "Moonlight Softcake",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.BSCBM": "Brown Sugar Creme Brûlée Milk",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.CUDDLE": "Cuddle Warmth",
"settings.option.audio.enableAdvancedFunctionality.ciderPPE": "Cider Adrenaline Processor™️",
- "settings.option.audio.enableAdvancedFunctionality.ciderPPE.description": "Enhances the perceived audio quality of 256 kbps AAC audio by using a real-time algorithm that takes advantage of both psychoacoustic models of human hearing and AAC encoding characteristics.",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPE.description": "Enhances the perceived audio quality of AAC encoded audio by using a real-time algorithm that takes advantage of both psychoacoustic models of human hearing and AAC encoding characteristics.",
"settings.warn.audio.enableAdvancedFunctionality.ciderPPE.compatibility": "CAP is not compatible with Spatialization. Please disable Spatialization to continue.",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength": "CAP Strength",
"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.standard": "Standard",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.adaptive": "Adaptive",
+ "settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.legacy": "Legacy",
"settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.aggressive": "Aggressive",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization": "Audio Normalization",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "Normalizes peak volume for individual tracks to create a more uniform listening experience. (Does not work on user uploaded tracks)",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "Managed by Audio Lab",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization": "Cider Tuned Spatialization",
- "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "Pre-tuned Spatializing Effect, disables the customizable settings of Audio Spatialization. Spatialization must be enabled as a prerequisite.",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "Pre-tuned Spatializing Effect, disables the customizable settings of Audio Spatialization.",
"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",
@@ -419,6 +436,9 @@
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.separation": "Separation",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.minimal": "Minimal",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.audiophile": "Audiophile",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.diffused": "Diffused",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.bplk": "Encore",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.hw2k": "Expanded Encore",
"settings.warn.audio.enableAdvancedFunctionality.audioSpatialization.compatibility": "Spatialization is not compatible with CAP. Please disable CAP to continue.",
"settings.option.audio.dbspl.display": "dB SPL Display",
"settings.option.audio.dbspl.description": "(Advanced users only) Display dB SPL instead of dBFS on the volume slider.",
@@ -557,5 +577,44 @@
"share.platform.email": "Email",
"share.platform.songLink": "Copy with song.link",
"share.platform.clipboard": "Copy Link",
- "about.thanks": "Major thanks to the Cider Collective Team and all of our contributors."
+ "about.thanks": "Major thanks to the Cider Collective Team and all of our contributors.",
+ "oobe.yes": "Yes",
+ "oobe.no": "No",
+ "oobe.next": "Next",
+ "oobe.previous": "Previous",
+ "oobe.done": "Done",
+ "oobe.amupsell.title": "Before we start",
+ "oobe.amupsell.text": "Cider requires an active, paid Apple Music subscription\nCider will not work with Apple Music Voice Plan or some promotional trial subscriptions. If you already have a qualified Apple Music subscription click Next to continue.",
+ "oobe.amupsell.subscribeBtn": "Subscribe to Apple Music",
+ "oobe.amupsell.explainBtn": "Explain",
+ "oobe.amupsell.subscribeUrl": "https://apple.co/3MdqJVQ",
+ "oobe.amupsell.amWebUrl": "https://beta.music.apple.com/",
+ "oobe.amupsell.promoExplained": "Some promotional and non US Apple Music trial subscriptions do not have access to the required Apple Music Web Player API's needed for Cider to function. To verify if your active trial will work with Cider go to {{ amWebUrl }} log in and try to play some music. If it works, great! You're ready to use Cider, however if it does not consider subscribing to Apple Music here: {{ subscribeUrl }} ",
+ "oobe.intro.title": "Welcome to Cider",
+ "oobe.intro.subtitle": "",
+ "oobe.intro.text": "Let's get a few things set up so you can use Cider, how you'd like. You can always change these settings later.",
+ "oobe.general.title": "General",
+ "oobe.general.subtitle": "",
+ "oobe.general.text": "",
+ "oobe.audio.title": "Audio",
+ "oobe.audio.subtitle": "",
+ "oobe.audio.text": "Cider features a custom tuned and designed audio stack that delivers a rich high quality audio experience.\nFeaturing Cider Adrenaline, Atmosphere Realizer, and Spatialized Audio.\nTo enable this functionality \"Advanced Audio Functionality\" must be enabled.\nEnabling Advanced Audio Functionality will give you access to these enhancements in the Cider Audio Labs, found in the app settings.",
+ "oobe.audio.advancedFunctionality": "",
+ "oobe.visual.title": "Visual",
+ "oobe.visual.subtitle": "",
+ "oobe.visual.text": "",
+ "oobe.visual.layout.text": "Cider features two window different layouts.\nMaverick is an iTunes like layout with the player at the top of the window.\nMojave is a new spin created by the Cider Collective.\n\nYou can change the layout any time in the settings.",
+ "oobe.visual.suggestingThemes": "Theming is a great way to personalize your experience. Here are a few we suggest: ",
+ "oobe.visual.suggestingThemes.subtext": "(These themes will be downloaded from GitHub)",
+ "oobe.visual.suggestingThemes.default": "Cider",
+ "oobe.visual.suggestingThemes.default.text": "The classic Cider theme.",
+ "oobe.visual.suggestingThemes.dark": "Dark",
+ "oobe.visual.suggestingThemes.dark.text": "Darkness.",
+ "oobe.visual.suggestingThemes.community1": "Groovy",
+ "oobe.visual.suggestingThemes.community1.text": "A WinUI influenced theme",
+ "oobe.visual.suggestingThemes.community2": "iTheme",
+ "oobe.visual.suggestingThemes.community2.text": "The classic big fruit layout.",
+ "oobe.visual.suggestingThemes.community3": "Dracula",
+ "oobe.visual.suggestingThemes.community3.text": "The iconic Dracula color scheme.",
+ "oobe.amsignin.title": ""
}
diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json
index e949dc0c..23b853c3 100644
--- a/src/i18n/zh_CN.json
+++ b/src/i18n/zh_CN.json
@@ -2,7 +2,7 @@
"i18n.languageName": "简体中文(中国)",
"i18n.languageNameEnglish": "Simp. Chinese (China)",
"i18n.category": "main",
- "i18n.authors": "@maikirakiwi @BillKerman @jay900604",
+ "i18n.authors": "@notmaikiwi @BillKerman @jay900604",
"app.name": "Cider",
"date.format": "${y}年${m}月${d}日",
"dialog.cancel": "取消",
@@ -290,7 +290,7 @@
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "自动将歌曲播放音量调整到相同水平,享受更舒适的聆听体验。",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "此功能由音频实验室管理",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization": "Cider 空间音频效果",
- "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "预先调整音频空间效果,关闭空间音讯可自订设置。但必须先打开音频空间才可以做设置。",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "预先调整音频空间效果,关闭空间音讯可自订设置。",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile": "Cider 音频空间配置档",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description": "变更音频空间的配置档,需重新启动应用程序。",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard": "标准",
diff --git a/src/i18n/zh_HK.json b/src/i18n/zh_HK.json
index 44fcc7ce..ae29b457 100644
--- a/src/i18n/zh_HK.json
+++ b/src/i18n/zh_HK.json
@@ -2,7 +2,7 @@
"i18n.languageName": "繁體中文(香港)",
"i18n.languageNameEnglish": "Trad. Chinese (Hong Kong)",
"i18n.category": "main",
- "i18n.authors": "@kyw504100 @maikirakiwi @BillKerman @jay900604",
+ "i18n.authors": "@kyw504100 @notmaikiwi @BillKerman @jay900604",
"app.name": "Cider",
"date.format": "${y} 年 ${m} 月 ${d} 日",
"dialog.cancel": "取消",
@@ -399,7 +399,7 @@
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "自動將歌曲播放音量調整至相同水平,建立更統一的聆聽體驗。",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "由音訊實驗室管理",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization": "Cider 空間音訊效果",
- "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "預先調整空間音訊效果,關閉空間音訊可自訂設定。但必須先開啟空間音訊才可以做設定。",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "預先調整空間音訊效果,關閉空間音訊可自訂設定。",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile": "Cider 空間音訊配置檔案",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description": "變更空間音訊的配置檔案,需要重新啟動應用程式。",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.minimal": "Minimal",
diff --git a/src/i18n/zh_TW.json b/src/i18n/zh_TW.json
index d6795ff5..745bb613 100644
--- a/src/i18n/zh_TW.json
+++ b/src/i18n/zh_TW.json
@@ -2,7 +2,7 @@
"i18n.languageName": "繁體中文(臺灣)",
"i18n.languageNameEnglish": "Trad. Chinese (Taiwan)",
"i18n.category": "main",
- "i18n.authors": "@maikirakiwi @jay900604 @kyw504100 @BillKerman",
+ "i18n.authors": "@notmaikiwi @jay900604 @kyw504100 @BillKerman",
"app.name": "Cider",
"date.format": "${y}年${m}月${d}日",
"dialog.cancel": "取消",
@@ -42,12 +42,19 @@
"term.createNewPlaylist": "新增播放列表",
"term.createNewPlaylistFolder": "新增播放列表檔案夾",
"term.deletePlaylist": "你確定要刪除此播放列表嗎?",
+ "term.navigateBack": "回上一頁",
+ "term.navigateForward": "到下一頁",
"term.play": "播放",
"term.pause": "暫停",
+ "term.stop": "停止",
"term.previous": "上一首",
"term.next": "下一首",
"term.shuffle": "隨機播放",
"term.repeat": "重複播放",
+ "term.enableShuffle": "開啟隨機播放",
+ "term.disableShuffle": "取消隨機播放",
+ "term.repeat": "開啟單曲循環",
+ "term.enableRepeatOne": "取消單曲循環",
"term.volume": "音量",
"term.mute": "靜音",
"term.unmute": "取消靜音",
@@ -264,10 +271,10 @@
"settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.description": "改變模擬溫暖模組處理的強度。",
"settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.smooth": "溫和",
"settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.warm": "溫暖",
- "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer": "Cider 音樂氣氛實現器™️",
- "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description": "以最先進的音訊設定為設計,實現不同的音樂氣氛。",
- "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode": "Cider 音樂氣氛™️模式",
- "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description": "更改氣氛實現器模塊的操作模式。",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer": "Cider 臨場音效™️",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description": "以業界頂尖的算法,實現擁有臨場感的音樂體驗。",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode": "Cider 臨場音效™️模式",
+ "settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description": "更改臨場音效感的模式。",
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.NATURAL_STANDARD": "自然(標準)",
"settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.NATURAL_PLUS": "自然(增強)",
"settings.option.audio.enableAdvancedFunctionality.ciderPPE": "Cider 數位增強音訊處理™️",
@@ -280,7 +287,7 @@
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.description": "自動將歌曲播放音量調整至相同位準,享受更舒適的聆聽體驗。",
"settings.option.audio.enableAdvancedFunctionality.audioNormalization.disabled": "此功能由音訊實驗室管理",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization": "Cider 空間音訊效果",
- "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "預先調整空間音訊效果,關閉空間音訊可自訂設定。但必須先開啟空間音訊才可以做設定。",
+ "settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.description": "預先調整空間音訊效果,關閉空間音訊可自訂設定。",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile": "Cider 空間音訊配置檔案",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.description": "變更空間音訊的配置檔案,需要重新啟動應用程式。",
"settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.standard": "標準",
diff --git a/src/main/base/app.ts b/src/main/base/app.ts
index dad4d4a9..73fefd9c 100644
--- a/src/main/base/app.ts
+++ b/src/main/base/app.ts
@@ -55,6 +55,9 @@ export class AppEvents {
app.exit()
}
+ // Try limiting JS memory to 350MB.
+ app.commandLine.appendSwitch('js-flags', '--max-old-space-size=350');
+
// Expose GC
app.commandLine.appendSwitch('js-flags', '--expose_gc')
diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts
index 87aaea9b..86ba10da 100644
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@@ -1,5 +1,5 @@
import {join} from "path";
-import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell} from "electron";
+import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen} from "electron";
import * as windowStateKeeper from "electron-window-state";
import * as express from "express";
import * as getPort from "get-port";
@@ -28,6 +28,7 @@ import * as os from "os";
import wallpaper from "wallpaper";
import * as AdmZip from "adm-zip";
+
/**
* @file Creates the BrowserWindow
* @author CiderCollective
@@ -55,6 +56,7 @@ export class BrowserWindow {
"pages/library-songs",
"pages/library-albums",
"pages/library-artists",
+ "pages/library-recentlyadded",
"pages/browse",
"pages/groupings",
"pages/settings",
@@ -81,11 +83,11 @@ export class BrowserWindow {
"pages/zoo",
"pages/plugin-renderer",
"pages/keybinds",
+ "pages/oobe",
"components/mediaitem-artwork",
"components/artwork-material",
"components/menu-panel",
"components/sidebar-playlist",
- "components/spatial-properties",
"components/audio-settings",
"components/plugin-menu",
"components/audio-controls",
@@ -118,6 +120,11 @@ export class BrowserWindow {
"components/inline-collection-list",
],
appRoutes: [
+ {
+ page: "library-recentlyadded",
+ component: ` `,
+ condition: "page == 'library-recentlyadded'"
+ },
{
page: "plugin-renderer",
component: ` `,
@@ -479,7 +486,7 @@ export class BrowserWindow {
const impulseExternals = join(utils.getPath("externals"), "/impulses/")
const impulseFile = join(impulseExternals, req.params.file)
if(existsSync(impulseFile)) {
- res.sendFile(impulseFile)
+ res.sendFile(impulseFile)
}else{
res.sendFile(join(utils.getPath('srcPath'), "./renderer/audio/impulses/" + req.params.file))
}
@@ -738,15 +745,28 @@ export class BrowserWindow {
return json;
})
- ipcMain.on("get-wallpaper", async (event) => {
+ ipcMain.on("get-wallpaper", async (event, args) => {
const wpPath: string = await wallpaper.get();
- // get the wallpaper and encode it to base64 then return
- const wpBase64: string = await readFileSync(wpPath, 'base64')
- // add the data:image properties
- const wpData: string = `data:image/png;base64,${wpBase64}`
+ const Jimp = require("jimp")
+ const img = await Jimp.read(wpPath)
+ const blurAmount = args.blurAmount ?? 256
+ if(blurAmount) {
+ img.blur(blurAmount)
+ }
+ const screens = await screen.getAllDisplays()
+ const width = screens.reduce((a, b) => a + b.size.width, 0)
+ const height = screens.reduce((a, b) => a + b.size.height, 0)
+
+ img.cover(width, height, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_MIDDLE)
+ const result = await img.getBase64Async(Jimp.MIME_PNG)
+
event.returnValue = {
path: wpPath,
- data: wpData
+ data: result,
+ res: {
+ width: width,
+ height: height
+ }
};
})
@@ -1489,4 +1509,3 @@ export class BrowserWindow {
console.log('remote broadcasted')
}
}
-
diff --git a/src/main/base/store.ts b/src/main/base/store.ts
index 97635911..9241a57b 100644
--- a/src/main/base/store.ts
+++ b/src/main/base/store.ts
@@ -13,7 +13,7 @@ export class Store {
"general": {
"close_button_hide": false,
"discordrpc": {
- "enabled": false,
+ "enabled": true,
"client": "Cider",
"clear_on_pause": true,
"hide_buttons": false,
@@ -87,14 +87,17 @@ export class Store {
"W"
],
"audioSettings": [
+ "CommandOrControl",
process.platform == "darwin" ? "Option" : "Shift",
"A"
],
"pluginMenu": [
+ "CommandOrControl",
process.platform == "darwin" ? "Option" : "Shift",
"P"
],
"castToDevices": [
+ "CommandOrControl",
process.platform == "darwin" ? "Option" : "Shift",
"C"
],
diff --git a/src/main/base/vcomponents.json b/src/main/base/vcomponents.json
new file mode 100644
index 00000000..42f86c68
--- /dev/null
+++ b/src/main/base/vcomponents.json
@@ -0,0 +1,67 @@
+[
+ "pages/podcasts",
+ "pages/apple-account-settings",
+ "pages/library-songs",
+ "pages/library-albums",
+ "pages/library-artists",
+ "pages/browse",
+ "pages/groupings",
+ "pages/settings",
+ "pages/installed-themes",
+ "pages/listen_now",
+ "pages/radio",
+ "pages/home",
+ "pages/artist-feed",
+ "pages/cider-playlist",
+ "pages/playlist-inline",
+ "pages/recordLabel",
+ "pages/cider-multiroom",
+ "pages/collection-list",
+ "pages/apple-curator",
+ "pages/artist",
+ "pages/search",
+ "pages/about",
+ "pages/library-videos",
+ "pages/remote-pair",
+ "pages/themes-github",
+ "pages/plugins-github",
+ "pages/replay",
+ "pages/audiolabs",
+ "pages/zoo",
+ "pages/plugin-renderer",
+ "pages/keybinds",
+ "pages/oobe",
+ "components/mediaitem-artwork",
+ "components/artwork-material",
+ "components/menu-panel",
+ "components/sidebar-playlist",
+ "components/audio-settings",
+ "components/plugin-menu",
+ "components/audio-controls",
+ "components/audio-playbackrate",
+ "components/qrcode-modal",
+ "components/moreinfo-modal",
+ "components/equalizer",
+ "components/add-to-playlist",
+ "components/queue",
+ "components/mediaitem-scroller-horizontal",
+ "components/mediaitem-scroller-horizontal-large",
+ "components/mediaitem-scroller-horizontal-sp",
+ "components/mediaitem-scroller-horizontal-mvview",
+ "components/mediaitem-list-item",
+ "components/mediaitem-hrect",
+ "components/mediaitem-square",
+ "components/mediaitem-mvview",
+ "components/listennow-child",
+ "components/mediaitem-mvview-sp",
+ "components/animatedartwork-view",
+ "components/listitem-horizontal",
+ "components/lyrics-view",
+ "components/fullscreen",
+ "components/miniplayer",
+ "components/castmenu",
+ "components/airplay-modal",
+ "components/artist-chip",
+ "components/hello-world",
+ "components/inline-collection-list"
+]
\ No newline at end of file
diff --git a/src/main/base/vrouting.json b/src/main/base/vrouting.json
new file mode 100644
index 00000000..71a43c7b
--- /dev/null
+++ b/src/main/base/vrouting.json
@@ -0,0 +1,174 @@
+[
+ {
+ "page": "plugin-renderer",
+ "component": " ",
+ "condition": "page == 'plugin-renderer'"
+ },
+ {
+ "page": "zoo",
+ "component": " ",
+ "condition": "page == 'zoo'"
+ },
+ {
+ "page": "podcasts",
+ "component": " ",
+ "condition": "page == 'podcasts'"
+ },
+ {
+ "page": "library-videos",
+ "component": " ",
+ "condition": "page == 'library-videos'"
+ },
+ {
+ "page": "apple-account-settings",
+ "component": " ",
+ "condition": "page == 'apple-account-settings'"
+ },
+ {
+ "page": "about",
+ "component": " ",
+ "condition": "page == 'about'"
+ },
+ {
+ "page": "cider-artist",
+ "component": " ",
+ "condition": "page == 'artist-page' && artistPage.data.attributes"
+ },
+ {
+ "page": "collection-list",
+ "component": " ",
+ "condition": "page == 'collection-list'"
+ },
+ {
+ "page": "home",
+ "component": " ",
+ "condition": "page == 'home'"
+ },
+ {
+ "page": "artist-feed",
+ "component": " ",
+ "condition": "page == 'artist-feed'"
+ },
+ {
+ "page": "playlist-inline",
+ "component": " ",
+ "condition": "modals.showPlaylist"
+ },
+ {
+ "page": "playlist_",
+ "component": " ",
+ "condition": "page.includes('playlist_')"
+ },
+ {
+ "page": "oobe",
+ "component": " ",
+ "condition": "page == 'oobe'"
+ },
+ {
+ "page": "album_",
+ "component": " ",
+ "condition": "page.includes('album_')"
+ },
+ {
+ "page": "recordLabel_",
+ "component": " ",
+ "condition": "page.includes('recordLabel_')"
+ },
+ {
+ "page": "multiroom",
+ "component": " ",
+ "condition": "page.includes('multiroom')"
+ },
+ {
+ "page": "curator_",
+ "component": " ",
+ "condition": "page.includes('curator_')"
+ },
+ {
+ "page": "browsepage",
+ "component": " ",
+ "condition": "page == 'browse'",
+ "onEnter": ""
+ },
+ {
+ "page": "groupings",
+ "component": " ",
+ "condition": "page == 'groupings'",
+ "onEnter": ""
+ },
+ {
+ "page": "listen_now",
+ "component": " ",
+ "condition": "page == 'listen_now'",
+ "onEnter": ""
+ },
+ {
+ "page": "radio",
+ "component": " ",
+ "condition": "page == 'radio'",
+ "onEnter": ""
+ },
+ {
+ "page": "settings",
+ "component": " ",
+ "condition": "page == 'settings'"
+ },
+ {
+ "page": "installed-themes",
+ "component": " ",
+ "condition": "page == 'installed-themes'"
+ },
+ {
+ "page": "search",
+ "component": " ",
+ "condition": "page == 'search'"
+ },
+ {
+ "page": "library-songs",
+ "component": " ",
+ "condition": "page == 'library-songs'",
+ "onEnter": ""
+ },
+ {
+ "page": "library-albums",
+ "component": " ",
+ "condition": "page == 'library-albums'",
+ "onEnter": ""
+ },
+ {
+ "page": "library-artists",
+ "component": " ",
+ "condition": "page == 'library-artists'",
+ "onEnter": ""
+ },
+ {
+ "page": "appleCurator",
+ "component": " ",
+ "condition": "page.includes('appleCurator')"
+ },
+ {
+ "page": "themes-github",
+ "component": " ",
+ "condition": "page == 'themes-github'"
+ },
+ {
+ "page": "plugins-github",
+ "component": " ",
+ "condition": "page == 'plugins-github'"
+ },
+ {
+ "page": "remote-pair",
+ "component": " ",
+ "condition": "page == 'remote-pair'"
+ },
+ {
+ "page": "audiolabs",
+ "component": " ",
+ "condition": "page == 'audiolabs'"
+ },
+ {
+ "page": "replay",
+ "component": " ",
+ "condition": "page == 'replay'"
+ }
+]
\ No newline at end of file
diff --git a/src/renderer/assets/hamborgar.svg b/src/renderer/assets/hamborgar.svg
new file mode 100644
index 00000000..b8dbaf40
--- /dev/null
+++ b/src/renderer/assets/hamborgar.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/renderer/assets/oobe/ss1.png b/src/renderer/assets/oobe/ss1.png
new file mode 100644
index 00000000..afb41b43
Binary files /dev/null and b/src/renderer/assets/oobe/ss1.png differ
diff --git a/src/renderer/assets/oobe/ss2.png b/src/renderer/assets/oobe/ss2.png
new file mode 100644
index 00000000..fac18955
Binary files /dev/null and b/src/renderer/assets/oobe/ss2.png differ
diff --git a/src/renderer/audio/audio.js b/src/renderer/audio/audio.js
index 36126e7b..52ccc4c3 100644
--- a/src/renderer/audio/audio.js
+++ b/src/renderer/audio/audio.js
@@ -158,9 +158,6 @@ const CiderAudio = {
CiderAudio.audioNodes.spatialNode.buffer = await CiderAudio.context.decodeAudioData(bufferedImpulse);
});
},
- spatialOff: function () {
- CiderAudio.hierarchical_loading();
- },
intelliGainComp_h0_0: function () {
let filters = []; const precisionHz = 12;
if (CiderAudio.audioNodes.audioBands !== null) { filters = filters.concat(CiderAudio.audioNodes.audioBands) }
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 6f83b9b1..12a5e538 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1,294 +1,346 @@
var notyf = new Notyf();
const MusicKitObjects = {
- LibraryPlaylist: function () {
- this.id = ""
- this.type = "library-playlist-folders"
- this.href = ""
- this.attributes = {
- dateAdded: "",
- name: ""
- }
- this.playlists = []
- }
-}
+ LibraryPlaylist: function () {
+ this.id = "";
+ this.type = "library-playlist-folders";
+ this.href = "";
+ this.attributes = {
+ dateAdded: "",
+ name: "",
+ };
+ this.playlists = [];
+ },
+};
// limit an array to a certain number of items
Array.prototype.limit = function (n) {
- return this.slice(0, n);
+ return this.slice(0, n);
};
-Vue.component('animated-number', {
+Vue.component("animated-number", {
+ template: "
{{ displayNumber }}
",
+ props: { number: { default: 0 } },
- template: "{{ displayNumber }}
",
- props: { 'number': { default: 0 } },
+ data() {
+ return {
+ displayNumber: 0,
+ interval: false,
+ };
+ },
- data() {
- return {
- displayNumber: 0,
- interval: false
+ ready() {
+ this.displayNumber = this.number ? this.number : 0;
+ },
+
+ watch: {
+ number() {
+ clearInterval(this.interval);
+
+ if (this.number == this.displayNumber) {
+ return;
+ }
+
+ this.interval = window.setInterval(() => {
+ if (this.displayNumber != this.number) {
+ var change = (this.number - this.displayNumber) / 10;
+ change = change >= 0 ? Math.ceil(change) : Math.floor(change);
+ this.displayNumber = this.displayNumber + change;
}
+ }, 20);
},
+ },
+});
- ready() {
- this.displayNumber = this.number ? this.number : 0;
+Vue.component("sidebar-library-item", {
+ template: "#sidebar-library-item",
+ props: {
+ name: {
+ type: String,
+ required: true,
},
-
- watch: {
- number() {
- clearInterval(this.interval);
-
- if (this.number == this.displayNumber) {
- return;
- }
-
- this.interval = window.setInterval(() => {
- if (this.displayNumber != this.number) {
- var change = (this.number - this.displayNumber) / 10;
- change = change >= 0 ? Math.ceil(change) : Math.floor(change);
- this.displayNumber = this.displayNumber + change;
- }
- }, 20);
- }
+ page: {
+ type: String,
+ required: true,
+ },
+ svgIcon: {
+ type: String,
+ required: false,
+ default: "",
+ },
+ cdClick: {
+ type: Function,
+ required: false,
+ },
+ },
+ data: function () {
+ return {
+ app: app,
+ svgIconData: "",
+ };
+ },
+ async mounted() {
+ if (this.svgIcon) {
+ this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
}
-})
-
-Vue.component('sidebar-library-item', {
- template: '#sidebar-library-item',
- props: {
- name: {
- type: String,
- required: true
- },
- page: {
- type: String,
- required: true
- },
- svgIcon: {
- type: String,
- required: false,
- default: ''
- },
- cdClick: {
- type: Function,
- required: false
- }
- },
- data: function () {
- return {
- app: app,
- svgIconData: ""
- }
- },
- async mounted() {
- if (this.svgIcon) {
- this.svgIconData = await this.app.getSvgIcon(this.svgIcon)
- }
- },
- methods: {}
+ },
+ methods: {},
});
function fallbackinitMusicKit() {
- const request = new XMLHttpRequest();
+ const request = new XMLHttpRequest();
- function loadAlternateKey() {
- let parsedJson = JSON.parse(this.responseText)
- MusicKit.configure({
- developerToken: parsedJson.developerToken,
- app: {
- name: 'Apple Music',
- build: '1978.4.1',
- version: "1.0"
- },
- sourceType: 24,
- suppressErrorDialog: true
- })
- setTimeout(() => {
- app.init()
- if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
- app.spawnMica()
- }
- }, 1000)
- }
-
- request.addEventListener("load", loadAlternateKey);
- request.open("GET", "https://raw.githubusercontent.com/lujjjh/LitoMusic/main/token.json");
- request.send();
-}
-
-document.addEventListener('musickitloaded', function () {
- console.log('MusicKit loaded')
- // MusicKit global is now defined
- function initMusicKit() {
- let parsedJson = JSON.parse(this.responseText)
- MusicKit.configure({
- developerToken: parsedJson.token,
- app: {
- name: 'Apple Music',
- build: '1978.4.1',
- version: "1.0"
- },
- sourceType: 24,
- suppressErrorDialog: true
- }).then(() => {
- function waitForApp() {
- if (typeof app.init !== "undefined") {
- app.init()
- if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
- app.spawnMica()
- }
- }
- else {
- setTimeout(waitForApp, 250);
- }
- }
- waitForApp()
- })
- }
-
-
- const request = new XMLHttpRequest();
- request.timeout = 5000;
- request.addEventListener("load", initMusicKit);
- request.onreadystatechange = function (aEvt) {
- if (request.readyState == 4) {
- if (request.status != 200)
- fallbackinitMusicKit()
- }
- };
- request.open("GET", "https://api.cider.sh/v1/");
- request.send();
-
- // check for widevine failure and reconfigure the instance.
- window.addEventListener("drmUnsupported", function () {
- initMusicKit()
+ function loadAlternateKey() {
+ let parsedJson = JSON.parse(this.responseText);
+ MusicKit.configure({
+ developerToken: parsedJson.developerToken,
+ app: {
+ name: "Apple Music",
+ build: "1978.4.1",
+ version: "1.0",
+ },
+ sourceType: 24,
+ suppressErrorDialog: true,
});
+ setTimeout(() => {
+ app.init();
+ if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
+ app.spawnMica();
+ }
+ }, 1000);
+ }
+
+ request.addEventListener("load", loadAlternateKey);
+ request.open(
+ "GET",
+ "https://raw.githubusercontent.com/lujjjh/LitoMusic/main/token.json"
+ );
+ request.send();
+}
+document.addEventListener("musickitloaded", function () {
+ console.log("MusicKit loaded");
+ // MusicKit global is now defined
+ function initMusicKit() {
+ let parsedJson = JSON.parse(this.responseText);
+ MusicKit.configure({
+ developerToken: parsedJson.token,
+ app: {
+ name: "Apple Music",
+ build: "1978.4.1",
+ version: "1.0",
+ },
+ sourceType: 24,
+ suppressErrorDialog: true,
+ }).then(() => {
+ function waitForApp() {
+ if (typeof app.init !== "undefined") {
+ app.init();
+ if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
+ app.spawnMica();
+ }
+ } else {
+ setTimeout(waitForApp, 250);
+ }
+ }
+ waitForApp();
+ });
+ }
+
+ const request = new XMLHttpRequest();
+ request.timeout = 5000;
+ request.addEventListener("load", initMusicKit);
+ request.onreadystatechange = function (aEvt) {
+ if (request.readyState == 4) {
+ if (request.status != 200) fallbackinitMusicKit();
+ }
+ };
+ request.open("GET", "https://api.cider.sh/v1/");
+ request.send();
+
+ // check for widevine failure and reconfigure the instance.
+ window.addEventListener("drmUnsupported", function () {
+ initMusicKit();
+ });
});
-
-
-
-if ('serviceWorker' in navigator) {
- // Use the window load event to keep the page load performant
- window.addEventListener('load', () => {
- navigator.serviceWorker.register('sw.js?v=1');
- });
+if ("serviceWorker" in navigator) {
+ // Use the window load event to keep the page load performant
+ window.addEventListener("load", () => {
+ navigator.serviceWorker.register("sw.js?v=1");
+ });
}
const getBase64FromUrl = async (url) => {
- const data = await fetch(url);
- const blob = await data.blob();
- return new Promise((resolve) => {
- const reader = new FileReader();
- reader.readAsDataURL(blob);
- reader.onloadend = () => {
- const base64data = reader.result;
- resolve(base64data);
- }
- });
-}
+ const data = await fetch(url);
+ const blob = await data.blob();
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(blob);
+ reader.onloadend = () => {
+ const base64data = reader.result;
+ resolve(base64data);
+ };
+ });
+};
function Clone(obj) {
- return JSON.parse(JSON.stringify(obj));
+ return JSON.parse(JSON.stringify(obj));
}
function uuidv4() {
- return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
- (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
- );
+ return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+ (
+ c ^
+ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+ ).toString(16)
+ );
}
function xmlToJson(xml) {
+ // Create the return object
+ let obj = {};
- // Create the return object
- let obj = {};
-
- if (xml.nodeType == 1) { // element
- // do attributes
- if (xml.attributes.length > 0) {
- obj["@attributes"] = {};
- for (var j = 0; j < xml.attributes.length; j++) {
- let attribute = xml.attributes.item(j);
- obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
- }
- }
- } else if (xml.nodeType == 3) { // text
- obj = xml.nodeValue;
+ if (xml.nodeType == 1) {
+ // element
+ // do attributes
+ if (xml.attributes.length > 0) {
+ obj["@attributes"] = {};
+ for (var j = 0; j < xml.attributes.length; j++) {
+ let attribute = xml.attributes.item(j);
+ obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
+ }
}
+ } else if (xml.nodeType == 3) {
+ // text
+ obj = xml.nodeValue;
+ }
- // do children
- if (xml.hasChildNodes()) {
- for (var i = 0; i < xml.childNodes.length; i++) {
- var item = xml.childNodes.item(i);
- var nodeName = item.nodeName;
- if (typeof (obj[nodeName]) == "undefined") {
- obj[nodeName] = xmlToJson(item);
- } else {
- if (typeof (obj[nodeName].push) == "undefined") {
- var old = obj[nodeName];
- obj[nodeName] = [];
- obj[nodeName].push(old);
- }
- obj[nodeName].push(xmlToJson(item));
- }
+ // do children
+ if (xml.hasChildNodes()) {
+ for (var i = 0; i < xml.childNodes.length; i++) {
+ var item = xml.childNodes.item(i);
+ var nodeName = item.nodeName;
+ if (typeof obj[nodeName] == "undefined") {
+ obj[nodeName] = xmlToJson(item);
+ } else {
+ if (typeof obj[nodeName].push == "undefined") {
+ var old = obj[nodeName];
+ obj[nodeName] = [];
+ obj[nodeName].push(old);
}
+ obj[nodeName].push(xmlToJson(item));
+ }
}
- console.log(obj);
- return obj;
-};
+ }
+ console.log(obj);
+ return obj;
+}
async function asyncForEach(array, callback) {
- for (let index = 0; index < array.length; index++) {
- await callback(array[index], index, array);
- }
+ for (let index = 0; index < array.length; index++) {
+ await callback(array[index], index, array);
+ }
}
var checkIfScrollIsStatic = setInterval(() => {
- try {
- if (position === document.getElementsByClassName('lyric-body')[0].scrollTop) {
- clearInterval(checkIfScrollIsStatic)
- // do something
- }
- position = document.getElementsByClassName('lyric-body')[0].scrollTop
- } catch (e) {
+ try {
+ if (
+ position === document.getElementsByClassName("lyric-body")[0].scrollTop
+ ) {
+ clearInterval(checkIfScrollIsStatic);
+ // do something
}
-
+ position = document.getElementsByClassName("lyric-body")[0].scrollTop;
+ } catch (e) {}
}, 50);
// WebGPU Console Notification
async function webGPU() {
- try {
- const currentGPU = await navigator.gpu.requestAdapter()
- console.log("WebGPU enabled on", currentGPU.name, "with feature ID", currentGPU.features.size)
- } catch (e) {
- console.log("WebGPU disabled / WebGPU initialization failed")
- }
+ try {
+ const currentGPU = await navigator.gpu.requestAdapter();
+ console.log(
+ "WebGPU enabled on",
+ currentGPU.name,
+ "with feature ID",
+ currentGPU.features.size
+ );
+ } catch (e) {
+ console.log("WebGPU disabled / WebGPU initialization failed");
+ }
}
function isJson(item) {
- item = typeof item !== "string"
- ? JSON.stringify(item)
- : item;
-
- try {
- item = JSON.parse(item);
- } catch (e) {
- return false;
- }
-
- if (typeof item === "object" && item !== null) {
- return true;
- }
+ item = typeof item !== "string" ? JSON.stringify(item) : item;
+ try {
+ item = JSON.parse(item);
+ } catch (e) {
return false;
+ }
+
+ if (typeof item === "object" && item !== null) {
+ return true;
+ }
+
+ return false;
}
-webGPU().then()
+webGPU().then();
let screenWidth = screen.width;
let screenHeight = screen.height;
-window.onerror = function (error) {
- console.log(error)
- bootbox.alert("Error occurred: " + error)
-};
+document.addEventListener("DOMContentLoaded", async function () {
+ // app.oobeInit()
+});
+
+document.addEventListener(
+ "contextmenu",
+ function (e) {
+ if (
+ e.target.tagName.toLowerCase() == "textarea" ||
+ (e.target.tagName.toLowerCase() == "input" &&
+ e.target.type != "checkbox" &&
+ e.target.type != "radio" &&
+ e.target.disabled == false)
+ ) {
+ e.preventDefault();
+ const menuPanel = {
+ items: {
+ cut: {
+ name: app.getLz("action.cut"),
+ action: function () {
+ document.execCommand("cut");
+ },
+ },
+ copy: {
+ name: app.getLz("action.copy"),
+ action: function () {
+ document.execCommand("copy");
+ },
+ },
+ paste: {
+ name: app.getLz("action.paste"),
+ action: function () {
+ document.execCommand("paste");
+ },
+ },
+ delete: {
+ name: app.getLz("action.delete"),
+ action: function () {
+ document.execCommand("delete");
+ },
+ },
+ selectAll: {
+ name: app.getLz("action.selectAll"),
+ action: function () {
+ document.execCommand("selectAll");
+ },
+ },
+ },
+ };
+ app.showMenuPanel(menuPanel, e);
+ }
+ },
+ false
+);
diff --git a/src/renderer/less/appvars.less b/src/renderer/less/appvars.less
new file mode 100644
index 00000000..6c08e323
--- /dev/null
+++ b/src/renderer/less/appvars.less
@@ -0,0 +1,20 @@
+@colorMixRate: 1%;
+@transparencyRate: 50%;
+
+@keyColor : #fc3c44;
+@ciderColor: #ff2654;
+@baseColor: #1e1e1e;
+@baseColorMix: mix(@baseColor, transparent, @transparencyRate);
+@sidebarColor: #2e2e2e;
+@sidebarColorMix: mix(@sidebarColor, transparent, @transparencyRate);
+@appOpacity: 0.15;
+
+:root {
+ --baseColor: @baseColor;
+ --baseColorMix: @baseColorMix;
+ --sidebarColor: @sidebarColor;
+ --sidebarColorMix: @sidebarColorMix;
+ --ciderColor: @ciderColor;
+ --appOpacity: @appOpacity;
+ --transparencyRate: @transparencyRate;
+}
\ No newline at end of file
diff --git a/src/renderer/less/bootstrap.less b/src/renderer/less/bootstrap.less
index 870d5e81..a392294e 100644
--- a/src/renderer/less/bootstrap.less
+++ b/src/renderer/less/bootstrap.less
@@ -845,6 +845,7 @@
padding : 0.5rem 1rem;
background-color: rgba(0, 0, 0, 0.03);
border-top : 1px solid rgba(0, 0, 0, 0.125);
+ text-align : center;
}
.card-footer:last-child {
diff --git a/src/renderer/less/codicon.css b/src/renderer/less/codicon.css
index bd00654c..7fd1da83 100644
--- a/src/renderer/less/codicon.css
+++ b/src/renderer/less/codicon.css
@@ -6,7 +6,7 @@
@font-face {
font-family: "codicon";
font-display: block;
- src: url("codicon.ttf") format("truetype");
+ src: url("./codicon.ttf?f06865699f1720ee6ca6e0a4aa084d76") format("truetype");
}
.codicon[class*='codicon-'] {
@@ -43,6 +43,10 @@
opacity: 0.5;
}
+.codicon-modifier-hidden {
+ opacity: 0;
+}
+
/* custom speed & easing for loading icon */
.codicon-loading {
animation-duration: 1s !important;
@@ -551,3 +555,7 @@
.codicon-arrow-circle-left:before { content: "\ebfd" }
.codicon-arrow-circle-right:before { content: "\ebfe" }
.codicon-arrow-circle-up:before { content: "\ebff" }
+.codicon-layout-sidebar-right-off:before { content: "\ec00" }
+.codicon-layout-panel-off:before { content: "\ec01" }
+.codicon-layout-sidebar-left-off:before { content: "\ec02" }
+.codicon-blank:before { content: "\ec03" }
diff --git a/src/renderer/less/codicon.ttf b/src/renderer/less/codicon.ttf
index 47dffef7..3cc92070 100644
Binary files a/src/renderer/less/codicon.ttf and b/src/renderer/less/codicon.ttf differ
diff --git a/src/renderer/less/compact.less b/src/renderer/less/compact.less
index e29673c9..bdf734f5 100644
--- a/src/renderer/less/compact.less
+++ b/src/renderer/less/compact.less
@@ -46,7 +46,7 @@
@media (max-width: 951px) {
#app-content {
- zoom: 0.8;
+ // zoom: 0.8;
}
}
}
@@ -54,6 +54,6 @@
// if page width is less than 951px
@media (max-width: 951px) {
#app-content {
- zoom: 0.8;
+ // zoom: 0.8;
}
}
\ No newline at end of file
diff --git a/src/renderer/less/directives.less b/src/renderer/less/directives.less
index b8de2888..978c0707 100644
--- a/src/renderer/less/directives.less
+++ b/src/renderer/less/directives.less
@@ -5,26 +5,103 @@
#app.twopanel {
--chromeHeight1: 46px;
--chromeHeight2: 90px;
- --chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
+ --chromeHeight : calc(var(--chromeHeight1) + var(--chromeHeight2));
+
+ .modular-fs .app-drawer .lyric-footer {
+ bottom: var(--chromeHeight2);
+ }
.app-chrome {
+
+ &:not(.chrome-bottom) {
+ .app-chrome--center {
+ flex: 1;
+
+ .top-nav-group {
+ background : #1e1e1e99;
+ border : 1px solid lighten(@baseColor, 8);
+ border-radius: 12px;
+ display : flex;
+ height : 32px;
+
+ .app-sidebar-item {
+ background-color: #1e1e1e00;
+ border-radius : 10px !important;
+ border : 0px;
+ min-width : 120px;
+ padding : 6px;
+ justify-content : center;
+ align-items : center;
+ margin : 0px;
+ height : 100%;
+ position : relative;
+
+ &:before {
+ --dist : 1px;
+ content : '';
+ position : absolute;
+ top : var(--dist);
+ left : var(--dist);
+ right : var(--dist);
+ bottom : var(--dist);
+ background-color: #fff;
+ opacity : 0;
+ border-radius : 10px;
+ transform : scale(0.5);
+ transition : transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+ }
+
+ &:after {
+ display: none;
+ }
+
+ &:hover {
+ background-color: transparent;
+
+ &:before {
+ transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
+ opacity : .1;
+ transform : scale(1);
+ }
+ }
+
+ &.active {
+ background-color: transparent;
+
+ &:before {
+ opacity : .2;
+ transform: scale(1);
+ }
+ }
+
+ &.md-btn-primary {
+ box-shadow : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
+ background-color: lighten(@baseColor, @colorMixRate * 5);
+ z-index : 1;
+ }
+ }
+ }
+ }
+ }
+
.app-mainmenu {
- width: 30px;
+ width : 30px;
height: 30px;
}
.search-input {
- width: 300px;
+ width: 180px;
}
height: var(--chromeHeight1);
&.chrome-bottom {
- background: var(--color2);
+ background : var(--color2);
-webkit-app-region: no-drag;
- height: var(--chromeHeight2);
- box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
- z-index: 1;
+ height : var(--chromeHeight2);
+ box-shadow : 0px -2px 6px rgb(20 20 20 / 12%),
+ 0px -1px 0px 0px rgb(200 200 200 / 12%);
+ z-index: 4;
.app-chrome-playback-duration-bottom {
width: 100%;
@@ -34,33 +111,33 @@
}
.col-sm-auto {
- width: 4em;
- display: flex;
+ width : 4em;
+ display : flex;
justify-content: center;
- align-items: center;
- font-size: 0.8em;
+ align-items : center;
+ font-size : 0.8em;
}
input[type=range] {
- appearance: none;
- width: 100%;
- height: 5px;
+ appearance : none;
+ width : 100%;
+ height : 5px;
background-color: rgb(200 200 200 / 10%);
- border-radius: 6px;
- box-shadow: 0px 0px 0px 1px rgba(0 0 0 / 10%);
- align-self: center;
+ border-radius : 6px;
+ box-shadow : 0px 0px 0px 1px rgba(0 0 0 / 10%);
+ align-self : center;
&::-webkit-slider-thumb {
- opacity: 0;
- transform: scale(1);
+ opacity : 0;
+ transform : scale(1);
-webkit-appearance: none;
- appearance: none;
- width: 16px;
- height: 16px;
- border-radius: 100%;
- background: var(--keyColor);
- cursor: default;
- transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+ appearance : none;
+ width : 16px;
+ height : 16px;
+ border-radius : 100%;
+ background : var(--keyColor);
+ cursor : default;
+ transition : opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
&:hover {
@@ -86,38 +163,38 @@
.playback-button.play,
.playback-button.pause,
- .playback-button.stop{
- width: 42px;
- height: 42px;
+ .playback-button.stop {
+ width : 42px;
+ height : 42px;
border-radius: 50%;
- margin: 6px;
+ margin : 6px;
}
.app-chrome--center {
- display: flex;
+ display : flex;
flex-direction: column;
.app-chrome-playback-controls {
- display: flex;
- z-index: 1;
+ display : flex;
+ z-index : 1;
// margin-bottom: 12px;
}
.app-chrome-playback-duration {
- position: relative;
- width: 80%;
+ position : relative;
+ width : 80%;
-webkit-app-region: no-drag;
- height: 16px;
+ height : 16px;
.song-progress {
- @bgColor: transparent;
- height: 16px;
- position: absolute;
- bottom: 4px;
- left: 0px;
- right: 4px;
+ @bgColor : transparent;
+ height : 16px;
+ position : absolute;
+ bottom : 4px;
+ left : 0px;
+ right : 4px;
background: @bgColor;
- z-index: 0;
+ z-index : 0;
.song-duration {
@@ -126,41 +203,41 @@
.song-duration p {
font-weight: 400;
- font-size: 10px;
- height: 1.2em;
+ font-size : 10px;
+ height : 1.2em;
line-height: 1.3em;
- overflow: hidden;
- margin: 0 0 0 0.25em;
+ overflow : hidden;
+ margin : 0 0 0 0.25em;
}
&:hover {
- > input[type=range] {
+ >input[type=range] {
&::-webkit-slider-thumb {
- opacity: 1;
+ opacity : 1;
transform: scale(1);
- z-index: 1;
+ z-index : 1;
}
}
}
input[type=range] {
- appearance: none;
- width: 100%;
- height: 4px;
+ appearance : none;
+ width : 100%;
+ height : 4px;
background-color: rgb(200 200 200 / 10%);
- border-radius: 2px;
+ border-radius : 2px;
&::-webkit-slider-thumb {
- opacity: 0;
- transform: scale(0.5);
+ opacity : 0;
+ transform : scale(0.5);
-webkit-appearance: none;
- appearance: none;
- width: 12px;
- height: 12px;
- border-radius: 100%;
- background: var(--keyColor);
- cursor: default;
- transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+ appearance : none;
+ width : 12px;
+ height : 12px;
+ border-radius : 100%;
+ background : var(--keyColor);
+ cursor : default;
+ transition : opacity .10s var(--appleEase), transform .10s var(--appleEase);
}
}
}
@@ -169,21 +246,21 @@
}
.app-chrome--left {
- width: 30%;
- justify-content: flex-start;
- align-items: flex-start;
+ width : 30%;
+ justify-content : flex-start;
+ align-items : flex-start;
-webkit-app-region: no-drag !important;
.playback-controls {
-webkit-app-region: no-drag !important;
.artwork {
- --offset: 20px;
+ --offset : 20px;
--marginOffset: 2;
- --size: calc(var(--chromeHeight2) - var(--offset));
- width: var(--size);
- height: var(--size);
- margin: 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
+ --size : calc(var(--chromeHeight2) - var(--offset));
+ width : var(--size);
+ height : var(--size);
+ margin : 0 calc(var(--offset) / var(--marginOffset)) 0 calc(var(--offset) / var(--marginOffset));
.mediaitem-artwork,
img {
@@ -193,20 +270,25 @@
.playback-info {
align-items: flex-start;
- margin: 6px;
+ margin : 6px;
.song-name {
- text-align: left;
- font-size: 0.98em;
- font-weight: 500;
- width: 100%;
+ text-align : left;
+ font-size : 0.8em;
+ font-weight : 500;
+ width : 100%;
-webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
}
- .song-artist, .song-album {
+ .song-artist,
+ .song-album {
font-size: 0.75em;
opacity: 0.8;
cursor: pointer;
+ white-space: nowrap;
+ max-width: 360px;
+ -webkit-mask-image: linear-gradient(-90deg, transparent 0%, transparent 10%, black 20%);
+ width: 100%;
&:hover {
text-decoration: underline;
@@ -219,23 +301,23 @@
.song-artist-album-content {
text-align: left;
- font-size: 12px;
+ font-size : 12px;
}
}
- width: 100%;
- height: 100%;
+ width : 100%;
+ height : 100%;
max-width: 100%;
- border: 0px;
+ border : 0px;
}
flex: 0 0 auto;
}
.app-chrome--right {
- width: 30%;
- flex: 0 0 auto;
+ width : 30%;
+ flex : 0 0 auto;
padding-right: 8px;
}
}
@@ -245,4 +327,36 @@
bottom: 96px;
}
}
-}
\ No newline at end of file
+}
+
+
+// screen width is less than 768px
+@media (max-width: 1100px) {
+ #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center {
+ flex: unset;
+ }
+
+ #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
+ min-width: 110px;
+ font-size: 0em;
+
+ .sidebar-icon {
+ margin: 0px;
+ }
+ }
+}
+
+@media (max-width: 1000px) {
+ #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center {
+ flex: unset;
+ }
+
+ #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
+ min-width: 60px;
+ font-size: 0em;
+
+ .sidebar-icon {
+ margin: 0px;
+ }
+ }
+}
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 66aa9aab..4b127989 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1,20 +1,20 @@
// Form
.md-select {
- padding: 6px;
+ padding : 6px;
border-radius: 6px;
- border: 1px solid rgba(200, 200, 200, 0.1);
- border-top: 1px solid rgba(100, 100, 100, 0.5);
- font-family: inherit;
- font-size: 14px;
- background: rgba(100, 100, 100, 0.25);
- color: #eee;
+ border : 1px solid rgba(200, 200, 200, 0.1);
+ border-top : 1px solid rgba(100, 100, 100, 0.5);
+ font-family : inherit;
+ font-size : 14px;
+ background : rgba(100, 100, 100, 0.25);
+ color : #eee;
option {
- font-size: 1em;
+ font-size : 1em;
font-family: inherit;
- padding: 8px 16px;
- background: #404040;
+ padding : 8px 16px;
+ background : #404040;
}
optgroup {
@@ -29,38 +29,38 @@
// Buttons
.md-btn {
- font-family: inherit;
- background: rgb(100 100 100 / 25%);
- padding: 8px 14px;
+ font-family : inherit;
+ background : rgb(100 100 100 / 25%);
+ padding : 8px 14px;
border-radius: 6px;
- font-size: 14px;
- border: 1px solid rgba(100, 100, 100, 0.35);
- border-top: 1px solid rgba(100, 100, 100, 0.5);
- color: #eee;
- white-space: nowrap;
- transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase);
+ font-size : 14px;
+ border : 1px solid rgba(100, 100, 100, 0.35);
+ border-top : 1px solid rgba(100, 100, 100, 0.5);
+ color : #eee;
+ white-space : nowrap;
+ transition : transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase);
&.md-btn-block {
display: block;
- width: 100%;
+ width : 100%;
}
&.md-btn-glyph {
- display: flex;
- align-items: center;
+ display : flex;
+ align-items : center;
justify-content: center;
- width: 100%;
+ width : 100%;
}
&.md-btn-primary {
background: #ff2b52a6;
- color: white;
- border: 1px solid rgb(220 53 69 / 25%);
+ color : white;
+ border : 1px solid rgb(220 53 69 / 25%);
border-top: 1px solid rgb(220 53 69 / 50%);
}
&.md-btn-small {
- padding: 6px 8px;
+ padding : 6px 8px;
font-size: 13px;
}
@@ -69,144 +69,144 @@
}
&:active {
- filter: brightness(75%);
- transform: scale(0.98);
+ filter : brightness(75%);
+ transform : scale(0.98);
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
}
&.md-btn-icon {
- display: inline-flex;
- vertical-align: middle;
+ display : inline-flex;
+ vertical-align : middle;
justify-content: center;
- > img {
- margin: 0px 16px 0px 0px;
+ >img {
+ margin : 0px 16px 0px 0px;
pointer-events: none;
}
- > .md-btn-text {
+ >.md-btn-text {
margin: 0px;
}
}
}
.btn-group {
- display: inline-flex;
+ display : inline-flex;
justify-content: center;
- align-items: center;
+ align-items : center;
- > .md-btn {
+ >.md-btn {
border-radius: 0px;
- width: 100%;
+ width : 100%;
}
- > .md-btn:first-child {
- border-top-left-radius: 6px;
+ >.md-btn:first-child {
+ border-top-left-radius : 6px;
border-bottom-left-radius: 6px;
}
- > .md-btn:last-child {
- border-top-right-radius: 6px;
+ >.md-btn:last-child {
+ border-top-right-radius : 6px;
border-bottom-right-radius: 6px;
}
- > .md-btn:not(:first-child):not(:last-child) {
+ >.md-btn:not(:first-child):not(:last-child) {
border-radius: 0px;
}
}
.md-close-btn {
- -webkit-mask-image: url("ameres://icons/webui/close.svg");
- -webkit-mask-repeat: no-repeat;
+ -webkit-mask-image : url("ameres://icons/webui/close.svg");
+ -webkit-mask-repeat : no-repeat;
-webkit-mask-position: center;
- background-color: white;
- opacity: 0.75;
- -webkit-mask-size: contain;
- height: 18px;
- width: 18px;
+ background-color : white;
+ opacity : 0.75;
+ -webkit-mask-size : contain;
+ height : 18px;
+ width : 18px;
}
.md-ico-play {
- content: url("./assets/play.svg");
- width: 10px;
- height: 12px;
+ content : url("./assets/play.svg");
+ width : 10px;
+ height : 12px;
margin-right: 1px;
- align-self: center;
+ align-self : center;
}
.md-ico-shuffle {
- content: url("./assets/shuffle.svg");
- width: 1em;
- height: 1em;
- margin-right: 1px;
+ content : url("./assets/shuffle.svg");
+ width : 1em;
+ height : 1em;
+ margin-right : 1px;
margin-bottom: -2px;
- align-self: center;
+ align-self : center;
}
.md-ico-remove {
- content: url("./assets/feather/x-circle-white.svg");
- width: 16px;
- height: 16px;
- margin-right: 1px;
+ content : url("./assets/feather/x-circle-white.svg");
+ width : 16px;
+ height : 16px;
+ margin-right : 1px;
margin-bottom: -1.5px;
- align-self: center;
+ align-self : center;
}
.md-ico-add {
- content: url("./assets/feather/plus-circle-white.svg");
- width: 1em;
- height: 1em;
- margin-right: 1px;
+ content : url("./assets/feather/plus-circle-white.svg");
+ width : 1em;
+ height : 1em;
+ margin-right : 1px;
margin-bottom: -1.5px;
- align-self: center;
+ align-self : center;
}
.reload-btn {
- background: rgb(86 86 86 / 52%);
- border-radius: 100%;
- width: 32px;
- height: 32px;
- border: 0px;
- appearance: none;
- display: flex;
+ background : rgb(86 86 86 / 52%);
+ border-radius : 100%;
+ width : 32px;
+ height : 32px;
+ border : 0px;
+ appearance : none;
+ display : flex;
justify-content: center;
- align-items: center;
+ align-items : center;
}
.reload-btn:hover {
background: rgb(86 86 86 / 80%);
- cursor: pointer;
+ cursor : pointer;
}
-.reload-btn > svg {
+.reload-btn>svg {
height: 50%;
- color: #eee;
+ color : #eee;
}
.wr-btn {
- font-family: inherit;
- appearance: none;
- border: 0px;
+ font-family : inherit;
+ appearance : none;
+ border : 0px;
border-radius: 6px;
- padding: 8px;
- font-weight: 600;
- background: rgb(80 80 80 / 70%);
- color: white;
+ padding : 8px;
+ font-weight : 600;
+ background : rgb(80 80 80 / 70%);
+ color : white;
}
.cd-btn-seeall {
- background: transparent;
- border: 0px;
- color: var(--keyColor);
- font-family: inherit;
- font-weight: 500;
- font-size: 16px;
+ background : transparent;
+ border : 0px;
+ color : var(--keyColor);
+ font-family : inherit;
+ font-weight : 500;
+ font-size : 16px;
border-radius: 4px;
- padding: 6px;
+ padding : 6px;
&:hover {
- cursor: pointer;
+ cursor : pointer;
background: rgb(200 200 200 / 10%)
}
}
@@ -215,30 +215,30 @@
// Media Item Elements
.mediaitem-artwork {
- border-radius: var(--mediaItemRadius);
- overflow: hidden;
- flex: 0 0 auto;
- position: relative;
- width: 100%;
- height: 100%;
- background-image: url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg");
- background-size: cover;
+ border-radius : var(--mediaItemRadius);
+ overflow : hidden;
+ flex : 0 0 auto;
+ position : relative;
+ width : 100%;
+ height : 100%;
+ background-image : url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg");
+ background-size : cover;
background-position: center;
.animatedartwork-view-box {
position: absolute;
- top: 0px;
- width: 100%;
- height: 100%;
+ top : 0px;
+ width : 100%;
+ height : 100%;
.animated {
position: absolute;
- top: 0px;
- width: 100%;
- height: 100%;
+ top : 0px;
+ width : 100%;
+ height : 100%;
video {
- width: 100%;
+ width : 100%;
height: 100%;
}
}
@@ -253,23 +253,23 @@
}
&::after {
- content: "";
- box-shadow: var(--mediaItemShadow);
- z-index: 1;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
+ content : "";
+ box-shadow : var(--mediaItemShadow);
+ z-index : 1;
+ width : 100%;
+ height : 100%;
+ position : absolute;
+ top : 0;
+ left : 0;
border-radius: inherit;
}
img {
- width: 100%;
- height: 100%;
- object-fit: cover;
+ width : 100%;
+ height : 100%;
+ object-fit : cover;
image-rendering: -webkit-optimize-contrast;
- pointer-events: none;
+ pointer-events : none;
}
&.no-shadow {
@@ -291,19 +291,21 @@
/* queue item */
.cd-queue-item {
- border-bottom: 1px solid rgb(200 200 200 / 10%);
- padding: 8px;
+ border-bottom : 0px solid rgb(200 200 200 / 10%);
+ padding : 1px;
+ padding-bottom: 9px;
+ padding-top : 9px;
.row,
.col {
padding: 0px;
- margin: 0px;
+ margin : 0px;
}
.artwork {
- width: 32px;
- height: 32px;
- flex: 0 0 auto;
+ width : 42px;
+ height: 42px;
+ flex : 0 0 auto;
}
&:hover {
@@ -316,22 +318,50 @@
&:active {
background: var(--selected-click);
- color: #eee;
+ color : #eee;
}
.queue-info {
- display: flex;
- flex-direction: column;
+ justify-content: center;
+ display : flex;
+ flex-direction : column;
+ flex-grow : 1;
.queue-title {
font-size: 14px;
}
.queue-subtitle {
- font-size: 13px;
- opacity: 0.85;
+ font-size: 0.7em;
+ opacity : 0.7;
}
}
+
+ .queue-duration-info {
+ display : flex;
+ flex-grow: 0;
+ }
+
+ .queue-duration {
+ font-size : 14px;
+ justify-content: center;
+ min-width : 60px;
+ height : 100%;
+ }
+
+ .queue-explicit-icon {
+ display: flex;
+ width : 24px;
+ padding: 0px;
+ }
+
+ .explicit-icon {
+ background-image : url("./assets/explicit.svg");
+ height : 12px;
+ width : 36px;
+ filter : contrast(0);
+ background-repeat: no-repeat;
+ }
}
/* horizontal media scroller */
@@ -353,58 +383,60 @@
/* mediaitem-list-item */
.cd-mediaitem-list-item {
- width: 100%;
- height: 60px;
- display: flex;
- flex: 0 0 auto;
- flex-direction: row;
- font-size: 14px;
+ width : 100%;
+ height : 60px;
+ display : flex;
+ flex : 0 0 auto;
+ flex-direction : row;
+ font-size : 14px;
justify-content: center-between;
- align-items: center;
- border-radius: var(--mediaItemRadius);
- position: relative;
- &:hover{
- .heart-icon{
+ align-items : center;
+ border-radius : var(--mediaItemRadius);
+ position : relative;
+
+ &:hover {
+ .heart-icon {
display: none;
}
}
+
.popular {
- background-image: url(assets/star.svg);
+ background-image : url(assets/star.svg);
background-repeat: no-repeat;
- background-size: 10px;
- width: 10px;
- height: 10px;
- position: absolute;
- left: 3px;
+ background-size : 10px;
+ width : 10px;
+ height : 10px;
+ position : absolute;
+ left : 3px;
}
.artwork {
- height: 42px;
- width: 42px;
- border-radius: var(--mediaItemRadius);
- object-fit: cover;
- object-position: center;
- flex: 0 0 auto;
+ height : 42px;
+ width : 42px;
+ border-radius : var(--mediaItemRadius);
+ object-fit : cover;
+ object-position : center;
+ flex : 0 0 auto;
background-repeat: no-repeat;
- margin: 12px;
- border: 0px;
- outline: none;
- position: relative;
- overflow: hidden;
+ margin : 12px;
+ border : 0px;
+ outline : none;
+ position : relative;
+ overflow : hidden;
.overlay-play {
background: rgba(0, 0, 0, 0.5);
- opacity: 0;
+ opacity : 0;
appearance: none;
- border: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- padding: 0px;
- z-index: 5;
- cursor: pointer;
+ border : 0;
+ position : absolute;
+ top : 0;
+ left : 0;
+ width : 100%;
+ height : 100%;
+ padding : 0px;
+ z-index : 5;
+ cursor : pointer;
&:hover {
opacity: 1;
@@ -421,11 +453,11 @@
}
.info-rect {
- height: 100%;
- display: flex;
- flex-flow: column;
+ height : 100%;
+ display : flex;
+ flex-flow : column;
justify-content: center;
- flex-grow: 1;
+ flex-grow : 1;
}
.title {
@@ -433,57 +465,57 @@
}
.subtitle {
- width: 90%;
+ width : 90%;
font-size: .8em;
- opacity: 0.7;
+ opacity : 0.7;
}
.duration {
- min-width: 60px;
- text-align: center;
- height: 100%;
- display: flex;
- align-items: center;
+ min-width : 60px;
+ text-align : center;
+ height : 100%;
+ display : flex;
+ align-items : center;
justify-content: center;
}
.metainfo {
- min-width: 145px;
- text-align: center;
- height: 100%;
- display: flex;
- align-items: center;
+ min-width : 145px;
+ text-align : center;
+ height : 100%;
+ display : flex;
+ align-items : center;
justify-content: center;
}
.heart-unfilled {
-webkit-mask-image: url("assets/feather/heart.svg");
- height: 12px;
- width: 12px;
- background-repeat: no-repeat;
- background-color: #999;
+ height : 12px;
+ width : 12px;
+ background-repeat : no-repeat;
+ background-color : #999;
}
.heart-filled {
-webkit-mask-image: url("assets/feather/heart-fill.svg");
- height: 12px;
- width: 12px;
- background-repeat: no-repeat;
- background-color: #999;
+ height : 12px;
+ width : 12px;
+ background-repeat : no-repeat;
+ background-color : #999;
}
.explicit-icon {
- background-image: url("./assets/explicit.svg");
- height: 12px;
- width: 36px;
- filter: contrast(0);
+ background-image : url("./assets/explicit.svg");
+ height : 12px;
+ width : 36px;
+ filter : contrast(0);
background-repeat: no-repeat;
}
.heart-icon {
- display: flex;
+ display : flex;
position: absolute;
- left: 20px;
+ left : 20px;
}
/* CSS.gg
@@ -492,27 +524,35 @@
10% {
box-shadow: inset 0 -4px 0
}
+
20% {
box-shadow: inset 0 -10px 0
}
+
30% {
box-shadow: inset 0 -12px 0
}
+
40% {
box-shadow: inset 0 -8px 0
}
+
50% {
box-shadow: inset 0 -4px 0
}
+
60% {
box-shadow: inset 0 -6px 0
}
+
80% {
box-shadow: inset 0 -12px 0
}
+
90% {
box-shadow: inset 0 -6px 0
}
+
to {
box-shadow: inset 0 -2px 0
}
@@ -521,50 +561,50 @@
.loadbar-sound,
.loadbar-sound::after,
.loadbar-sound::before {
- animation: load-bar 1.3s ease infinite alternate;
+ animation : load-bar 1.3s ease infinite alternate;
box-sizing: border-box;
- width: 3px;
- height: 28px;
+ width : 3px;
+ height : 28px;
box-shadow: inset 0 -12px 0;
}
.loadbar-sound {
margin-left: 22px;
- margin-top: -16px;
- position: relative;
- transform: scale(var(--load-bar, 1));
- color: var(--keyColor);
- display: block;
+ margin-top : -16px;
+ position : relative;
+ transform : scale(var(--load-bar, 1));
+ color : var(--keyColor);
+ display : block;
}
.loadbar-sound::after,
.loadbar-sound::before {
- content: "";
+ content : "";
position: absolute;
- bottom: 0
+ bottom : 0
}
.loadbar-sound::before {
- left: -4.5px;
+ left : -4.5px;
animation-delay: -2.4s
}
.loadbar-sound::after {
- right: -4.2px;
+ right : -4.2px;
animation-delay: -3.7s
}
.isLibrary {
- flex: 0 0 auto;
- width: 40px;
+ flex : 0 0 auto;
+ width : 40px;
text-align: center;
button {
appearance: none;
- border: 0px;
+ border : 0px;
background: transparent;
- cursor: pointer;
- filter: contrast(0.8);
+ cursor : pointer;
+ filter : contrast(0.8);
}
}
@@ -586,17 +626,17 @@
&:active {
background: var(--selected-click);
box-shadow: var(--mediaItemShadow);
- color: #eee;
+ color : #eee;
}
&.disabled {
- opacity: 0.5;
+ opacity : 0.5;
pointer-events: none;
}
// list item compact
&.compact {
- height: 40px;
+ height : 40px;
font-size: 13px;
.artwork {
@@ -611,28 +651,28 @@
/* mediaitem-hrect */
.cd-mediaitem-hrect {
- background: rgb(255 255 255 / 18%);
- width: 264px;
- height: 100px;
- display: inline-flex;
- flex: 0 0 auto;
- flex-direction: row;
- font-size: 14px;
+ background : rgb(255 255 255 / 18%);
+ width : 264px;
+ height : 100px;
+ display : inline-flex;
+ flex : 0 0 auto;
+ flex-direction : row;
+ font-size : 14px;
justify-content: center;
- align-items: center;
- border-radius: 6px;
- cursor: pointer;
+ align-items : center;
+ border-radius : 6px;
+ cursor : pointer;
.artwork {
- height: 70px;
- width: 70px;
- background: blue;
- border-radius: var(--mediaItemRadius);
- background: var(--artwork);
- background-size: contain;
- flex: 0 0 auto;
+ height : 70px;
+ width : 70px;
+ background : blue;
+ border-radius : var(--mediaItemRadius);
+ background : var(--artwork);
+ background-size : contain;
+ flex : 0 0 auto;
background-repeat: no-repeat;
- margin: 18px;
+ margin : 18px;
}
.artwork.round {
@@ -644,44 +684,44 @@
}
.title {
- width: 100%;
+ width : 100%;
text-align: center;
}
.subtitle {
- width: 100%;
+ width : 100%;
text-align: center;
- font-size: 12px;
+ font-size : 12px;
}
}
/* mediaitem-square-sp */
.cd-mediaitem-square-sp {
- --spcolor: var("");
- width: 190px;
- height: 245px;
- display: inline-flex;
- flex: 0 0 auto;
- flex-direction: column;
- font-size: 14px;
- justify-content: flex-start;
- align-items: center;
- border-radius: 6px;
- margin-left: 10px;
- cursor: pointer;
+ --spcolor : var("");
+ width : 190px;
+ height : 245px;
+ display : inline-flex;
+ flex : 0 0 auto;
+ flex-direction : column;
+ font-size : 14px;
+ justify-content : flex-start;
+ align-items : center;
+ border-radius : 6px;
+ margin-left : 10px;
+ cursor : pointer;
background-color: var(--spcolor);
.artwork {
- height: 190px;
- width: 190px;
- background: blue;
- border-top-left-radius: 6px;
+ height : 190px;
+ width : 190px;
+ background : blue;
+ border-top-left-radius : 6px;
border-top-right-radius: 6px;
- background: var(--artwork);
- background-size: cover;
- flex: 0 0 auto;
- margin: 6px;
- margin-top: 0px;
+ background : var(--artwork);
+ background-size : cover;
+ flex : 0 0 auto;
+ margin : 6px;
+ margin-top : 0px;
&.round {
border-radius: var(--mediaItemRadiusRound);
@@ -693,17 +733,17 @@
}
.title {
- width: 90%;
+ width : 90%;
text-align: center;
}
.subtitle {
- width: 100%;
+ width : 100%;
text-align: center;
- font-size: 12px;
+ font-size : 12px;
}
- > .cd-mediaitem-square-large-overlay {
+ >.cd-mediaitem-square-large-overlay {
z-index: 3;
&:hover {
@@ -711,11 +751,11 @@
}
}
- + .cd-mediaitem-square-large-overlay {
+ +.cd-mediaitem-square-large-overlay {
pointer-events: none;
}
- &:hover + .cd-mediaitem-square-large-overlay {
+ &:hover+.cd-mediaitem-square-large-overlay {
opacity: 1;
}
@@ -728,67 +768,67 @@
/* mediaitem-square-large */
.cd-mediaitem-square-large {
- width: 190px;
- height: 250px;
- display: inline-flex;
- flex: 0 0 auto;
- flex-direction: column;
- font-size: 14px;
+ width : 190px;
+ height : 250px;
+ display : inline-flex;
+ flex : 0 0 auto;
+ flex-direction : column;
+ font-size : 14px;
justify-content: flex-start;
- align-items: center;
- border-radius: 6px;
- margin-left: 10px;
- cursor: pointer;
+ align-items : center;
+ border-radius : 6px;
+ margin-left : 10px;
+ cursor : pointer;
- > * {
+ >* {
z-index: inherit;
}
}
.cd-mediaitem-square-large .artwork {
- height: 190px;
- width: 190px;
- background: blue;
- border-top-left-radius: 6px;
+ height : 190px;
+ width : 190px;
+ background : blue;
+ border-top-left-radius : 6px;
border-top-right-radius: 6px;
- background: var(--artwork);
- background-size: cover;
- flex: 0 0 auto;
- margin: 6px;
- margin-top: 0px;
+ background : var(--artwork);
+ background-size : cover;
+ flex : 0 0 auto;
+ margin : 6px;
+ margin-top : 0px;
}
.cd-mediaitem-square-large-overlay {
- position: absolute;
- width: 190px;
- float: right;
- height: 250px;
- top: 0px;
- margin: 10px;
+ position : absolute;
+ width : 190px;
+ float : right;
+ height : 250px;
+ top : 0px;
+ margin : 10px;
margin-top: 0px;
- opacity: 0;
+ opacity : 0;
}
-.cd-mediaitem-square-large-overlay > * {
+.cd-mediaitem-square-large-overlay>* {
pointer-events: auto;
}
-.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
+.cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay {
z-index: 3;
}
-.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
+.cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay:hover {
opacity: 1;
}
-.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
+.cd-mediaitem-square-large+.cd-mediaitem-square-large-overlay {
pointer-events: none;
}
-.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
+.cd-mediaitem-square-large:hover+.cd-mediaitem-square-large-overlay {
opacity: 1;
}
@@ -799,81 +839,81 @@
}
.cd-mediaitem-square-large .title {
- width: 90%;
+ width : 90%;
text-align: center;
}
.cd-mediaitem-square-large .subtitle {
- width: 100%;
+ width : 100%;
text-align: center;
- font-size: 12px;
+ font-size : 12px;
}
/* mediaitem-mvview */
/* mediaitem-mvview */
.cd-mediaitem-mvview {
- width: 300px;
- height: 250px;
- display: inline-flex;
- flex: 0 0 auto;
- flex-direction: column;
- font-size: 14px;
+ width : 300px;
+ height : 250px;
+ display : inline-flex;
+ flex : 0 0 auto;
+ flex-direction : column;
+ font-size : 14px;
justify-content: flex-start;
- align-items: center;
- border-radius: 6px;
- margin-left: 10px;
- cursor: pointer;
+ align-items : center;
+ border-radius : 6px;
+ margin-left : 10px;
+ cursor : pointer;
- > * {
+ >* {
z-index: inherit;
}
}
.cd-mediaitem-mvview .artwork {
- height: 172px;
- width: 300px;
- background: blue;
- border-top-left-radius: 6px;
+ height : 172px;
+ width : 300px;
+ background : blue;
+ border-top-left-radius : 6px;
border-top-right-radius: 6px;
- background: var(--artwork);
- background-size: cover;
- flex: 0 0 auto;
- margin: 6px;
- margin-top: 0px;
+ background : var(--artwork);
+ background-size : cover;
+ flex : 0 0 auto;
+ margin : 6px;
+ margin-top : 0px;
}
.cd-mediaitem-mvview-overlay {
- position: absolute;
- width: 300px;
- float: right;
- height: 250px;
- top: 0px;
- margin: 10px;
+ position : absolute;
+ width : 300px;
+ float : right;
+ height : 250px;
+ top : 0px;
+ margin : 10px;
margin-top: 0px;
- opacity: 0;
+ opacity : 0;
}
-.cd-mediaitem-mvview-overlay > * {
+.cd-mediaitem-mvview-overlay>* {
pointer-events: auto;
}
-.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay {
+.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay {
z-index: 3;
}
-.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover {
+.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay:hover {
opacity: 1;
}
-.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay {
+.cd-mediaitem-mvview+.cd-mediaitem-mvview-overlay {
pointer-events: none;
}
-.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay {
+.cd-mediaitem-mvview:hover+.cd-mediaitem-mvview-overlay {
opacity: 1;
}
@@ -884,44 +924,45 @@
}
.cd-mediaitem-mvview .title {
- width: 90%;
+ width : 90%;
text-align: center;
}
.cd-mediaitem-mvview .subtitle {
- width: 100%;
+ width : 100%;
text-align: center;
- font-size: 12px;
+ font-size : 12px;
}
/* mediaitem-square */
.cd-mediaitem-square {
- --scaleRate: 1.25;
+ --scaleRate : 1.25;
--scaleRateArtwork: 1;
- width: 200px;
- height: 200px;
- display: inline-flex;
- flex: 0 0 auto;
- flex-direction: column;
- font-size: 14px;
- justify-content: center;
- align-items: center;
- border-radius: 6px;
+ width : 200px;
+ height : 200px;
+ display : inline-flex;
+ flex : 0 0 auto;
+ flex-direction : column;
+ font-size : 14px;
+ justify-content : center;
+ align-items : center;
+ border-radius : 6px;
.artwork-container {
position: relative;
.artwork {
- height: 150px;
- width: 150px;
- background: blue;
- border-radius: var(--mediaItemRadius);
- background: var(--artwork);
+ height : 150px;
+ width : 150px;
+ background : blue;
+ border-radius : var(--mediaItemRadius);
+ background : var(--artwork);
background-size: cover;
- flex: 0 0 auto;
- margin: 6px;
- cursor: pointer;
+ flex : 0 0 auto;
+ margin : 6px;
+ cursor : pointer;
+
.mediaitem-artwork {
box-shadow: unset;
}
@@ -933,168 +974,181 @@
.badge-container {
transition: opacity 0.1s var(--appleEase);
- opacity: 1;
+ opacity : 1;
.socialBadge {
- width: 32px;
- height: 32px;
- position: absolute;
- right: 14px;
- bottom: 14px;
- border-radius: 100%;
- overflow: hidden;
- z-index: 2;
+ width : 32px;
+ height : 32px;
+ position : absolute;
+ right : 14px;
+ bottom : 14px;
+ border-radius : 100%;
+ overflow : hidden;
+ z-index : 2;
pointer-events: none;
}
}
- > .play-btn,
- > .menu-btn {
- opacity: 0;
- appearance: none;
- padding: 0px;
- border: 0px;
- width: 30px;
- height: 30px;
+ >.play-btn,
+ >.menu-btn {
+ opacity : 0;
+ appearance : none;
+ padding : 0px;
+ border : 0px;
+ width : 30px;
+ height : 30px;
border-radius: 50%;
- background: rgba(50, 50, 50, 0.7);
- cursor: pointer;
- transition: opacity 0.1s var(--appleEase);
+ background : rgba(50, 50, 50, 0.7);
+ cursor : pointer;
+ transition : opacity 0.1s var(--appleEase);
:hover {
border-radius: 50%;
- background: rgba(250, 0, 0, 0.7);
+ background : rgba(250, 0, 0, 0.7);
}
}
- > .play-btn {
+ >.play-btn {
position: absolute;
- bottom: 14px;
- left: 14px;
- z-index: 2;
+ bottom : 14px;
+ left : 14px;
+ z-index : 2;
}
- > .menu-btn {
+ >.menu-btn {
position: absolute;
- bottom: 14px;
- right: 14px;
- z-index: 2;
+ bottom : 14px;
+ right : 14px;
+ z-index : 2;
}
&:hover {
- > .badge-container {
+ >.badge-container {
opacity: 0;
}
- > .play-btn,
- > .menu-btn {
+ >.play-btn,
+ >.menu-btn {
opacity: 1;
}
}
}
@media (min-width: 1600px) {
- width: calc(200px * var(--scaleRate));
+ width : calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
+
.artwork-container>.artwork {
- width: calc(190px * var(--scaleRateArtwork));
+ width : calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
.info-rect {
- width: 90%;
- height: 100%;
- display: flex;
+ width : 90%;
+ height : 100%;
+ display : flex;
flex-direction: column;
- align-items: center;
+ align-items : center;
}
.title {
- width: 100%;
- text-align: center;
- display: flex;
- align-content: center;
+ width : 100%;
+ text-align : center;
+ display : flex;
+ align-content : center;
justify-content: center;
}
.subtitle {
- width: 100%;
+ width : 100%;
text-align: center;
- font-size: 12px;
+ font-size : 12px;
}
.unavailable-overlay {
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 0;
- right: 0;
- display: flex;
- flex-direction: column;
- align-items: center;
+ position : absolute;
+ top : 0px;
+ left : 0px;
+ bottom : 0;
+ right : 0;
+ display : flex;
+ flex-direction : column;
+ align-items : center;
justify-content: center;
- z-index: 2;
- pointer-events: none;
- background: rgb(0 0 0 / 40%);
- margin: 2em;
- border-radius: 10px;
+ z-index : 2;
+ pointer-events : none;
+ background : rgb(0 0 0 / 40%);
+ margin : 2em;
+ border-radius : 10px;
>.codicon {
- font-size: 4em;
+ font-size : 4em;
font-weight: bold;
- opacity: 0.5;
+ opacity : 0.5;
}
}
&.mediaitem-video {
- height: 200px;
- width: 240px;
+ --scaleRate : 1.25;
+ --scaleRateArtwork: 1.25;
+ height : 200px;
+ width : 240px;
.artwork {
height: 120px;
- width: 212px;
+ width : 212px;
+ }
+
+ @media (min-width: 1600px) {
+ width : calc(240px * var(--scaleRate));
+ height: calc(200px * var(--scaleRate));
+
+ .artwork-container>.artwork {
+ width : calc(212px * var(--scaleRateArtwork));
+ height: calc(120px * var(--scaleRateArtwork));
+ }
}
}
&.mediaitem-brick {
height: 200px;
- width: 240px;
+ width : 240px;
.artwork {
height: 123px;
- width: 220px;
+ width : 220px;
}
}
&.mediaitem-small {
- width: 140px;
+ width : 140px;
height: 180px;
.artwork {
height: 128px;
- width: 128px;
+ width : 128px;
}
}
&.mediaitem-card {
- background: #ccc;
- background: var(--spcolor);
- height: 298px;
- width: 230px;
- overflow: hidden;
- position: relative;
+ background : #ccc;
+ background : var(--spcolor);
+ height : 298px;
+ width : 230px;
+ overflow : hidden;
+ position : relative;
border-radius: calc(var(--mediaItemRadius) * 2);
- box-shadow: var(--mediaItemShadow-ShadowSubtle);
+ box-shadow : var(--mediaItemShadow-ShadowSubtle);
.artwork {
- width: 230px;
- height: 230px;
- overflow: hidden;
+ width : 230px;
+ height : 230px;
+ overflow : hidden;
border-radius: 0px;
- margin: 0;
+ margin : 0;
.mediaitem-artwork {
border-radius: 0px;
@@ -1106,64 +1160,65 @@
}
.info-rect-card {
- padding: 10px 10px 14px;
+ padding : 10px 10px 14px;
position: relative;
- width: 100%;
+ width : 100%;
&::before {
- background: var(--bgartwork);
- content: "";
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- position: absolute;
- background-size: cover;
+ background : var(--bgartwork);
+ content : "";
+ top : 0;
+ left : 0;
+ bottom : 0;
+ right : 0;
+ position : absolute;
+ background-size : cover;
background-position: bottom;
- z-index: 0;
- opacity: 1;
- filter: brightness(0.5) blur(50px) saturate(180%);
+ z-index : 0;
+ opacity : 1;
+ filter : brightness(0.5) blur(50px) saturate(180%);
}
}
.title {
- height: 100%;
- display: flex;
+ height : 100%;
+ display : flex;
justify-content: center;
- align-items: center;
- font-size: 0.9em;
- font-weight: 500;
- z-index: 1;
- &+ .subtitle {
+ align-items : center;
+ font-size : 0.9em;
+ font-weight : 500;
+ z-index : 1;
+
+ &+.subtitle {
max-height: none !important;
margin-top: -0.5em;
}
}
.subtitle {
- height: 100%;
- justify-content: center;
- align-items: center;
- font-size: 0.75em;
- width: 100%;
- display: -webkit-box;
+ height : 100%;
+ justify-content : center;
+ align-items : center;
+ font-size : 0.75em;
+ width : 100%;
+ display : -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
- overflow: hidden;
- max-height: 3.8em;
- z-index: 1;
+ overflow : hidden;
+ max-height : 3.8em;
+ z-index : 1;
}
&::after {
- box-shadow: var(--mediaItemShadow);
- content: "";
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
+ box-shadow : var(--mediaItemShadow);
+ content : "";
+ width : 100%;
+ height : 100%;
+ position : absolute;
+ top : 0;
+ left : 0;
pointer-events: none;
- border-radius: inherit;
+ border-radius : inherit;
}
//@media (min-width: 1600px) {
@@ -1178,70 +1233,70 @@
}
/* mediaitem-square */
-.albums-square-containeru > * > .cd-mediaitem-square {
- --frame: max(220px, 15vw);
- width: var(--frame);
- height: calc(var(--frame) * 13 / 11);
- display: inline-flex;
- flex: 0 0 auto;
- flex-direction: column;
- font-size: calc(var(--frame) / 220 * 14);
+.albums-square-containeru>*>.cd-mediaitem-square {
+ --frame : max(220px, 15vw);
+ width : var(--frame);
+ height : calc(var(--frame) * 13 / 11);
+ display : inline-flex;
+ flex : 0 0 auto;
+ flex-direction : column;
+ font-size : calc(var(--frame) / 220 * 14);
justify-content: center;
- align-items: center;
- border-radius: calc(var(--frame) / 220 * 6);
+ align-items : center;
+ border-radius : calc(var(--frame) / 220 * 6);
.artwork-container {
position: relative;
.artwork {
- height: calc(var(--frame) * 19 / 22);
- width: calc(var(--frame) * 19 / 22);
- background: blue;
- border-radius: var(--mediaItemRadius);
- background: var(--artwork);
+ height : calc(var(--frame) * 19 / 22);
+ width : calc(var(--frame) * 19 / 22);
+ background : blue;
+ border-radius : var(--mediaItemRadius);
+ background : var(--artwork);
background-size: cover;
- flex: 0 0 auto;
- margin: calc(var(--frame) / 220 * 6);
- cursor: pointer;
+ flex : 0 0 auto;
+ margin : calc(var(--frame) / 220 * 6);
+ cursor : pointer;
&.round {
border-radius: var(--mediaItemRadiusRound);
}
}
- > .play-btn,
- > .menu-btn {
- opacity: 0;
- appearance: none;
- padding: 0px;
- border: 0px;
- width: calc(var(--frame) / 220 * 30);
- height: calc(var(--frame) / 220 * 30);
- border-radius: 50%;
- background: rgba(50, 50, 50, 0.7);
- cursor: pointer;
+ >.play-btn,
+ >.menu-btn {
+ opacity : 0;
+ appearance : none;
+ padding : 0px;
+ border : 0px;
+ width : calc(var(--frame) / 220 * 30);
+ height : calc(var(--frame) / 220 * 30);
+ border-radius : 50%;
+ background : rgba(50, 50, 50, 0.7);
+ cursor : pointer;
backdrop-filter: blur(32px) saturate(180%);
- transition: opacity 0.1s var(--appleEase);
+ transition : opacity 0.1s var(--appleEase);
}
- > .play-btn {
+ >.play-btn {
position: absolute;
- bottom: calc(var(--frame) / 220 * 14);
- left: calc(var(--frame) / 220 * 14);
- z-index: 2;
+ bottom : calc(var(--frame) / 220 * 14);
+ left : calc(var(--frame) / 220 * 14);
+ z-index : 2;
}
- > .menu-btn {
+ >.menu-btn {
position: absolute;
- bottom: calc(var(--frame) / 220 * 14);
- right: calc(var(--frame) / 220 * 14);
- z-index: 2;
+ bottom : calc(var(--frame) / 220 * 14);
+ right : calc(var(--frame) / 220 * 14);
+ z-index : 2;
}
&:hover {
- > .play-btn,
- > .menu-btn {
+ >.play-btn,
+ >.menu-btn {
opacity: 1;
}
}
@@ -1249,33 +1304,33 @@
.title {
- width: 90%;
+ width : 90%;
text-align: center;
}
.subtitle {
- width: 100%;
+ width : 100%;
text-align: center;
- font-size: calc(var(--frame) / 220 * 12);
+ font-size : calc(var(--frame) / 220 * 12);
}
&.mediaitem-video {
height: calc(var(--frame) / 220 * 200);
- width: calc(var(--frame) / 220 * 240);
+ width : calc(var(--frame) / 220 * 240);
.artwork {
height: calc(var(--frame) / 220 * 120);
- width: calc(var(--frame) / 220 * 212);
+ width : calc(var(--frame) / 220 * 212);
}
}
&.mediaitem-brick {
height: calc(var(--frame) / 220 * 200);
- width: calc(var(--frame) / 220 * 240);
+ width : calc(var(--frame) / 220 * 240);
.artwork {
height: calc(var(--frame) / 220 * 123);
- width: calc(var(--frame));
+ width : calc(var(--frame));
}
}
}
@@ -1283,20 +1338,20 @@
.listitem-horizontal {
.cd-mediaitem-list-item {
- width: 350px;
+ width : 350px;
height: 60px;
}
}
.mediaitem-list-item__grid {
- background: rgba(200, 200, 200, 0.05);
+ background : rgba(200, 200, 200, 0.05);
border-radius: 10px;
- padding: var(--contentInnerPadding);
- box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
- width: 100%;
+ padding : var(--contentInnerPadding);
+ box-shadow : rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+ width : 100%;
.cd-mediaitem-list-item {
- width: 350px;
+ width : 350px;
height: 60px;
}
@@ -1314,13 +1369,13 @@
// sidebar icon
.svg-icon {
- --color: #aaa;
- --url: url("./assets/feather/share.svg");
+ --color : #aaa;
+ --url : url("./assets/feather/share.svg");
-webkit-mask-image: var(--url);
- -webkit-mask-size: cover;
- height: 18px;
- width: 18px;
- background: var(--color);
+ -webkit-mask-size : cover;
+ height : 18px;
+ width : 18px;
+ background : var(--color);
&.inline {
display: inline-block;
@@ -1328,39 +1383,39 @@
}
.sidebar-icon {
- width: 18px;
- height: 18px;
+ width : 18px;
+ height : 18px;
margin-right: 8px;
- > .svg-icon {
- width: 100%;
- height: 100%;
+ >.svg-icon {
+ width : 100%;
+ height : 100%;
--color: #aaa;
}
- > svg {
- width: 100%;
+ >svg {
+ width : 100%;
height: 100%;
- color: #aaa;
+ color : #aaa;
}
}
/* Switch Checkbox */
input[type=checkbox][switch] {
- width: 38px;
- appearance: none;
+ width : 38px;
+ appearance : none;
border-radius: 32px;
- height: 24px;
- zoom: 1;
- top: 0;
- cursor: pointer;
- left: 0;
- position: relative;
- transform: scale(1);
- background: rgb(142 142 147 / 100%);
- padding: 0;
- margin: 0;
+ height : 24px;
+ zoom : 1;
+ top : 0;
+ cursor : pointer;
+ left : 0;
+ position : relative;
+ transform : scale(1);
+ background : rgb(142 142 147 / 100%);
+ padding : 0;
+ margin : 0;
}
input[type=checkbox][switch]:focus,
@@ -1369,8 +1424,8 @@ input[type=checkbox][switch]:active {
}
input[type=checkbox][switch]:checked {
- background: var(--keyColor);
- border: 0 solid var(--keyColor);
+ background : var(--keyColor);
+ border : 0 solid var(--keyColor);
mix-blend-mode: unset;
&:hover {
@@ -1383,25 +1438,25 @@ input[type=checkbox][switch]:checked {
}
input[type=checkbox][switch]::before {
- background: white;
- width: 26px;
- height: 26px;
- top: -1px;
- left: -1px;
- position: absolute;
- content: ' ';
+ background : white;
+ width : 26px;
+ height : 26px;
+ top : -1px;
+ left : -1px;
+ position : absolute;
+ content : ' ';
border-radius: 32px;
- transition: .10s left var(--appleEase);
- transform: scale(.75);
+ transition : .10s left var(--appleEase);
+ transform : scale(.75);
}
input[type=checkbox][switch]:checked::before {
background: white;
- top: -1px;
- left: 13px;
+ top : -1px;
+ left : 13px;
transition: .10s left var(--appleEase);
- transform: scale(.75);
+ transform : scale(.75);
}
input[type=checkbox][switch]:disabled::before {
@@ -1425,41 +1480,41 @@ input[type=checkbox][switch]:checked:active::before {
}
.media-item--small {
- background: rgb(0 0 0 / 25%);
- height: 162px;
- width: 132px;
- display: inline-flex;
- flex-direction: column;
+ background : rgb(0 0 0 / 25%);
+ height : 162px;
+ width : 132px;
+ display : inline-flex;
+ flex-direction : column;
justify-content: center;
- align-items: center;
- border-radius: 10px;
+ align-items : center;
+ border-radius : 10px;
}
.media-item--small .artwork {
- background: red;
- margin: 6px;
+ background : red;
+ margin : 6px;
border-radius: 100%;
- width: 90px;
- height: 90px;
- box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
+ width : 90px;
+ height : 90px;
+ box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 30%);
}
.playlist-artwork {
- height: 190px;
- width: 190px;
- background: blue;
- border-radius: 6px;
- background: var(--artwork);
+ height : 190px;
+ width : 190px;
+ background : blue;
+ border-radius : 6px;
+ background : var(--artwork);
background-size: cover;
- box-shadow: var(--mediaItemShadow);
- flex: 0 0 auto;
- margin: 6px;
- margin-top: 0px;
+ box-shadow : var(--mediaItemShadow);
+ flex : 0 0 auto;
+ margin : 6px;
+ margin-top : 0px;
}
.media-item--small .text {
font-weight: 600;
- font-size: 0.90em;
+ font-size : 0.90em;
}
.media-item--small .subtext {
@@ -1471,35 +1526,35 @@ input[type=checkbox][switch]:checked:active::before {
}
.player-artwork-container {
- display: flex;
- align-items: center;
+ display : flex;
+ align-items : center;
justify-content: center;
}
.player-duration-container {
- font-size: 0.85em;
+ font-size : 0.85em;
font-weight: 500;
}
.media-artwork {
- --artwork: url("");
- width: 80vw;
- height: 80vw;
- max-height: 500px;
- max-width: 500px;
- background: black;
- background-image: var(--artwork);
- background-size: cover;
+ --artwork : url("");
+ width : 80vw;
+ height : 80vw;
+ max-height : 500px;
+ max-width : 500px;
+ background : black;
+ background-image : var(--artwork);
+ background-size : cover;
background-position: center;
- background-repeat: no-repeat;
- border-radius: 8px;
- box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
- transition: transform .10s var(--appleEase);
+ background-repeat : no-repeat;
+ border-radius : 8px;
+ box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
+ transition : transform .10s var(--appleEase);
}
.media-artwork.paused {
transition: transform .35s var(--appleEase);
- transform: scale(0.85);
+ transform : scale(0.85);
}
.playback-slider {
@@ -1511,67 +1566,105 @@ input[type=checkbox][switch]:checked:active::before {
}
.volume-slider-container {
- width: 90%;
- margin: 0 auto;
+ width : 90%;
+ margin : 0 auto;
padding: 0px;
}
.volume-slider-container .col-auto,
.volume-slider-container .col {
- display: flex;
- align-items: center;
+ display : flex;
+ align-items : center;
justify-self: center;
- padding: 0px;
- margin: 0px;
+ padding : 0px;
+ margin : 0px;
}
.playback-button {
- font-size: 2em;
- width: 40px;
- height: 36px;
- padding: 0px;
- background: transparent;
- border: 0px;
- border-radius: 0px;
- box-shadow: unset;
- background-size: 12px;
+ font-size : 2em;
+ width : 40px;
+ height : 36px;
+ padding : 0px;
+ background : transparent;
+ border : 0px;
+ border-radius : 0px;
+ box-shadow : unset;
+ background-size : 12px;
background-position: center;
- background-repeat: no-repeat;
- opacity: 0.70;
- border-radius: 6px;
-}
+ background-repeat : no-repeat;
+ opacity : 0.70;
+ border-radius : 6px;
+ position: relative;
-.playback-button:active {
- transform: scale(0.95);
+ &:before {
+ content: "";
+ display: block;
+ top:0;left:0;right:0;bottom:0;
+ background: var(--selected);
+ border-radius: inherit;
+ position: absolute;
+ opacity: 0;
+ z-index: -1;
+ transform: scale(0.5);
+ pointer-events: none;
+ transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+ }
+
+ &:hover {
+ &:before {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
}
.playback-button--small {
- border-radius: 6px;
- font-size: 1em;
- color: inherit;
- background-size: 0.98em;
- background-repeat: no-repeat;
+ border-radius : 6px;
+ font-size : 1em;
+ color : inherit;
+ background-size : 0.98em;
+ background-repeat : no-repeat;
background-position: center;
- background-color: transparent;
- width: 40px;
- height: 32px;
- border: 0px;
- box-shadow: unset;
- opacity: 0.70;
-}
+ background-color : transparent;
+ width : 40px;
+ height : 32px;
+ border : 0px;
+ box-shadow : unset;
+ opacity : 0.70;
+ position: relative;
+ &:before {
+ content: "";
+ display: block;
+ top:0;left:0;right:0;bottom:0;
+ background: var(--selected);
+ border-radius: inherit;
+ position: absolute;
+ opacity: 0;
+ z-index: -1;
+ transform: scale(0.5);
+ pointer-events: none;
+ transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+ }
+
+ &:hover {
+ &:before {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+}
+.playback-button--small.active {
+ background-color: rgb(200 200 200 / 25%);
+}
.playback-button:hover,
.playback-button--small:hover {
- background-color: rgb(200 200 200 / 10%);
+ // background-color: var(--selected);
}
.playback-button:active,
.playback-button--small:active {
- transform: scale(0.9);
-}
-
-.playback-button--small.active {
- background-color: rgb(200 200 200 / 25%);
+ background-color: var(--selected-click);
}
.playback-button--small.search {
@@ -1580,7 +1673,7 @@ input[type=checkbox][switch]:checked:active::before {
.playback-button--small.cast {
background-image: url("./assets/cast_white.svg");
- background-size: 1.25em;
+ background-size : 1.25em;
}
.playback-button--small.miniplayer {
@@ -1609,178 +1702,193 @@ input[type=checkbox][switch]:checked:active::before {
}
.playback-button.stop {
- background-image: url('./assets/cider-icons/stop.svg');
- background-size: 38px;
+ background-image : url('./assets/cider-icons/stop.svg');
+ background-size : 38px;
background-position: center;
}
+.playback-button.collapseLibrary {
+ font-family: "codicon";
+ font-size : 1em;
+ color: var(--textColor);
+ display: grid;
+ place-items: center;
+ span {
+ position: absolute;
+ }
+}
+
.playback-button.pause {
- background-image: url('./assets/cider-icons/pause.svg');
- background-size: 38px;
+ background-image : url('./assets/cider-icons/pause.svg');
+ background-size : 38px;
background-position: center;
}
.playback-button.play {
- background-image: url('./assets/cider-icons/play.svg');
- background-size: 38px;
+ background-image : url('./assets/cider-icons/play.svg');
+ background-size : 38px;
background-position: center;
}
.playback-button.next {
- background-image: url('./assets/cider-icons/forward.svg');
- background-size: 60%;
+ background-image : url('./assets/cider-icons/forward.svg');
+ background-size : 60%;
background-position: center;
}
.playback-button.previous {
- background-image: url('./assets/cider-icons/backward.svg');
- background-size: 60%;
+ background-image : url('./assets/cider-icons/backward.svg');
+ background-size : 60%;
background-position: center;
}
-.playback-button.disabled, .playback-button--small.disabled {
- opacity: 0.25 !important;
+
+.playback-button.disabled,
+.playback-button--small.disabled {
+ opacity : 0.25 !important;
pointer-events: none;
- transform: none !important;
- &:hover{
+ transform : none !important;
+
+ &:hover {
background-color: transparent !important;
- transform: none !important;
+ transform : none !important;
}
}
.playback-button {
&.navigation {
- display: flex;
+ display : flex;
justify-content: center;
- align-items: center;
- color: white;
+ align-items : center;
+ color : white;
+
>svg {
- height:16px;
- width:16px;
- pointer-events: none;
+ height : 16px;
+ width : 16px;
+ pointer-events: none;
}
}
}
.playback-buttons {
- display: flex;
- align-items: center;
+ display : flex;
+ align-items : center;
justify-content: center;
}
.player-volume-glyph {
- width: 32px;
- height: 16px;
- background-repeat: no-repeat;
- background-size: contain;
+ width : 32px;
+ height : 16px;
+ background-repeat : no-repeat;
+ background-size : contain;
background-position: center;
}
.player-volume-glyph.decrease {
background-image: url("./assets/volume.svg");
- opacity: 0.5;
+ opacity : 0.5;
}
.player-volume-glyph.increase {
background-image: url("./assets/volume-2.svg");
- opacity: 0.5;
+ opacity : 0.5;
}
.player-track-info {
- width: 90%;
+ width : 90%;
margin: 0 auto;
}
.player-song-title {
- font-size: 1.25em;
- text-align: left;
- margin: 0 auto;
+ font-size : 1.25em;
+ text-align : left;
+ margin : 0 auto;
font-weight: 500;
}
.player-song-artist {
- font-size: 1.0em;
- text-align: left;
- margin: 0 auto;
- color: var(--keyColor);
+ font-size : 1.0em;
+ text-align : left;
+ margin : 0 auto;
+ color : var(--keyColor);
font-weight: 400;
}
.player-song-artist:hover {
- cursor: pointer;
+ cursor : pointer;
text-decoration: underline;
}
.player-more-container {
- display: flex;
- align-items: center;
+ display : flex;
+ align-items : center;
justify-content: center;
}
.player-more-button {
- appearance: none;
- width: 32px;
- height: 32px;
+ appearance : none;
+ width : 32px;
+ height : 32px;
border-radius: 50%;
- border: 0px;
- background: var(--keyColor);
- cursor: pointer;
- box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
- color: white;
- font-weight: bold;
- padding: 0px;
- font-size: 16px;
+ border : 0px;
+ background : var(--keyColor);
+ cursor : pointer;
+ box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
+ color : white;
+ font-weight : bold;
+ padding : 0px;
+ font-size : 16px;
}
.back-button {
- width: 40px;
- height: 40px;
- background-color: transparent;
- background-size: 16px;
+ width : 40px;
+ height : 40px;
+ background-color : transparent;
+ background-size : 16px;
background-position: center;
- background-repeat: no-repeat;
- background-image: url("./assets/arrow-left.svg");
- border: 0px;
- border-radius: 0px;
+ background-repeat : no-repeat;
+ background-image : url("./assets/arrow-left.svg");
+ border : 0px;
+ border-radius : 0px;
}
.header-text {
- height: 40px;
- display: flex;
+ height : 40px;
+ display : flex;
align-items: center;
}
.list-entry-header {
- display: flex;
- align-items: center;
+ display : flex;
+ align-items : center;
justify-content: space-between;
- padding: 12px;
- font-size: 1em;
- font-family: inherit;
+ padding : 12px;
+ font-size : 1em;
+ font-family : inherit;
}
.list-entry {
- display: flex;
- align-items: center;
+ display : flex;
+ align-items : center;
/* justify-content: space-between; */
- padding: 12px;
- font-size: 1em;
- font-family: inherit;
- border-bottom: 1px solid rgba(255 255 255 / 0.1);
- cursor: pointer;
+ padding : 12px;
+ font-size : 1em;
+ font-family : inherit;
+ border-bottom : 1px solid rgba(255 255 255 / 0.1);
+ cursor : pointer;
}
.list-entry-image {
- --artwork: url("");
- width: 64px;
- height: 64px;
- background: var(--artwork);
- background-size: cover;
+ --artwork : url("");
+ width : 64px;
+ height : 64px;
+ background : var(--artwork);
+ background-size : cover;
background-position: center;
- background-repeat: no-repeat;
- border-radius: 8px;
- box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
+ background-repeat : no-repeat;
+ border-radius : 8px;
+ box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
}
.list-entry-image.artist {
@@ -1788,62 +1896,62 @@ input[type=checkbox][switch]:checked:active::before {
}
.list-entry-body {
- display: flex;
- flex-direction: column;
+ display : flex;
+ flex-direction : column;
justify-content: center;
- align-items: flex-start;
- margin-left: 12px;
+ align-items : flex-start;
+ margin-left : 12px;
}
.list-entry-name {
- font-size: 14px;
+ font-size : 14px;
font-weight: 500;
- overflow: hidden;
- width: 100%;
+ overflow : hidden;
+ width : 100%;
}
.list-entry-artist {
font-size: 12px;
- overflow: hidden;
- width: 100%;
+ overflow : hidden;
+ width : 100%;
}
.list-entry .handle {
- height: 100%;
- width: 28px;
- background: var(--keyColor);
- display: flex;
+ height : 100%;
+ width : 28px;
+ background : var(--keyColor);
+ display : flex;
justify-content: center;
- align-items: center;
+ align-items : center;
}
.artist-chip {
- display: inline-flex;
- align-items: center;
+ display : inline-flex;
+ align-items : center;
justify-content: center;
- margin: 12px 12px 12px 0px;
- border-radius: 4px;
- color: white;
- font-size: 1em;
- font-weight: 500;
- cursor: pointer;
+ margin : 12px 12px 12px 0px;
+ border-radius : 4px;
+ color : white;
+ font-size : 1em;
+ font-weight : 500;
+ cursor : pointer;
.artist-chip__follow {
- appearance: none;
- border: 0;
- height: 32px;
- width: 32px;
- background: #ffffff0f;
- margin: 0px 0px 0px 10px;
- font-weight: bold;
- color: white;
- border-radius: 100%;
- display: flex;
+ appearance : none;
+ border : 0;
+ height : 32px;
+ width : 32px;
+ background : #ffffff0f;
+ margin : 0px 0px 0px 10px;
+ font-weight : bold;
+ color : white;
+ border-radius : 100%;
+ display : flex;
justify-content: center;
- align-items: center;
- font-size: 12px;
- cursor: pointer;
- flex: 0 0 32px;
+ align-items : center;
+ font-size : 12px;
+ cursor : pointer;
+ flex : 0 0 32px;
&:hover {
background: var(--selected);
@@ -1851,21 +1959,22 @@ input[type=checkbox][switch]:checked:active::before {
}
.artist-chip__image {
- width: 32px;
- height: 32px;
- background-size: contain;
+ width : 32px;
+ height : 32px;
+ background-size : contain;
background-position: center;
- background-repeat: no-repeat;
- border-radius: 100%;
- overflow: hidden;
- margin: 0px 12px 0px 0px;
- pointer-events: none;
- flex: 0 0 32px;
+ background-repeat : no-repeat;
+ border-radius : 100%;
+ overflow : hidden;
+ margin : 0px 12px 0px 0px;
+ pointer-events : none;
+ flex : 0 0 32px;
.mediaitem-artwork {
border-radius: inherit;
}
}
+
.artist-chip__name {
pointer-events: none;
}
@@ -1876,12 +1985,12 @@ input[type=checkbox][switch]:checked:active::before {
}
.search-header {
- position: absolute;
- width: 100%;
- z-index: 1;
- backdrop-filter: blur(16px);
+ position : absolute;
+ width : 100%;
+ z-index : 1;
+ backdrop-filter : blur(16px);
-webkit-backdrop-filter: blur(16px);
- border-bottom: 1px solid rgb(200 200 200 / 8%);
+ border-bottom : 1px solid rgb(200 200 200 / 8%);
}
.connection-error-panel {
@@ -1893,17 +2002,17 @@ input[type=checkbox][switch]:checked:active::before {
}
.search-type-button {
- background: rgb(20 20 20 / 0.85);
+ background : rgb(20 20 20 / 0.85);
border-radius: 50px;
- color: white;
- border: 0px;
- box-shadow: unset;
- font-family: inherit;
- padding: 8px 16px;
- font-size: 14px;
- font-weight: 500;
- margin: 8px;
- margin-top: 0px;
+ color : white;
+ border : 0px;
+ box-shadow : unset;
+ font-family : inherit;
+ padding : 8px 16px;
+ font-size : 14px;
+ font-weight : 500;
+ margin : 8px;
+ margin-top : 0px;
margin-bottom: 0px;
}
@@ -1912,34 +2021,34 @@ input[type=checkbox][switch]:checked:active::before {
}
.search-tab-container {
- overflow: auto;
+ overflow : auto;
white-space: nowrap;
- overflow-y: hidden;
+ overflow-y : hidden;
}
.search-body-container {
position: relative;
- width: 100%;
- height: 100%;
+ width : 100%;
+ height : 100%;
}
.search-body {
- position: absolute;
- width: 100%;
- height: 100%;
+ position : absolute;
+ width : 100%;
+ height : 100%;
padding-top: 220px;
}
.search-tab {
- background: rgb(20 20 20 / 0.85);
+ background : rgb(20 20 20 / 0.85);
border-radius: 50px;
- color: white;
- border: 0px;
- box-shadow: unset;
- font-family: inherit;
- padding: 8px 16px;
- font-size: 14px;
- font-weight: 500;
+ color : white;
+ border : 0px;
+ box-shadow : unset;
+ font-family : inherit;
+ padding : 8px 16px;
+ font-size : 14px;
+ font-weight : 500;
}
.search-tab.active {
@@ -1948,27 +2057,28 @@ input[type=checkbox][switch]:checked:active::before {
// fancy pills
.nav-pills {
- position : relative;
+ position: relative;
+
.nav-link {
transition: transform .3s var(--appleEase);
position : relative;
&:after {
- --dist: 1px;
+ --dist : 1px;
content : "";
position : absolute;
- top : var(--dist);
- bottom : var(--dist);
- left : var(--dist);
- right : var(--dist);
+ top : var(--dist);
+ bottom : var(--dist);
+ left : var(--dist);
+ right : var(--dist);
// width : 100%;
// height : 100%;
background-color: transparent;
border-radius : 50px;
z-index : -1;
opacity : 0;
- transition: background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
+ transition : background-color .5s var(--appleEase), opacity 0.25s var(--appleEase), border-radius .32s var(--appleEase);
}
@@ -1980,12 +2090,12 @@ input[type=checkbox][switch]:checked:active::before {
color : #333;
&:after {
- opacity: 1;
+ opacity : 1;
background-color: #eee;
- transition: background-color .25s var(--appleEase),
- border-radius .25s var(--appleEase),
- color .0s var(--appleEase),
- opacity 0.0s var(--appleEase);
+ transition : background-color .25s var(--appleEase),
+ border-radius .25s var(--appleEase),
+ color .0s var(--appleEase),
+ opacity 0.0s var(--appleEase);
}
}
@@ -1995,10 +2105,10 @@ input[type=checkbox][switch]:checked:active::before {
// background: #eee;
background : transparent;
color : #333;
- font-weight: 600;
+ font-weight : 600;
&:after {
- opacity: 1;
+ opacity : 1;
background-color: #eee;
}
}
@@ -2011,26 +2121,26 @@ input[type=checkbox][switch]:checked:active::before {
outline : none;
transform : scale(1.0);
background: transparent;
- color: #eee;
+ color : #eee;
transform : scale(1.0);
&:after {
- background : rgb(200 200 200 / 15%);
- opacity : 1;
- transition: color 0s;
+ background : rgb(200 200 200 / 15%);
+ opacity : 1;
+ transition : color 0s;
// border-radius: 5px;
- --dist: 4px;
+ --dist : 4px;
}
&:hover {
- transform : scale(1.1);
- z-index : 1;
- color : #333;
+ transform: scale(1.1);
+ z-index : 1;
+ color : #333;
&:after {
- background: #eee;
+ background : #eee;
border-radius: inherit;
- --dist: 1px;
+ --dist : 1px;
}
}
}
@@ -2051,36 +2161,70 @@ input[type=checkbox][switch]:checked:active::before {
}
.grouping-container {
- display: grid;
+ display : grid;
grid-template-columns: repeat(3, 1fr);
- gap: 16px;
+ gap : 16px;
+
.grouping-btn {
- padding: 16px;
- appearance: none;
- border: 0px;
+ padding : 16px;
+ appearance : none;
+ border : 0px;
border-radius: 10px;
- background: var(--color1);
- color: var(--keyColor);
- width: 100%;
- text-align: left;
- font-family: inherit;
- cursor: pointer;
- flex: 1 0 21%;
- position: relative;
+ background : var(--color1);
+ color : var(--keyColor);
+ width : 100%;
+ text-align : left;
+ font-family : inherit;
+ cursor : pointer;
+ flex : 1 0 21%;
+ position : relative;
&:after {
- content: "";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- font-family: "codicon";
- display: flex;
- align-items: center;
- width: 28px;
- font-weight: bold;
- font-size: 1.2em;
+ content : "";
+ position : absolute;
+ top : 0;
+ right : 0;
+ bottom : 0;
+ font-family : "codicon";
+ display : flex;
+ align-items : center;
+ width : 28px;
+ font-weight : bold;
+ font-size : 1.2em;
pointer-events: none;
}
}
+}
+
+.app-sidebar-header .search-input-container .search-hints-container {
+ top : 38px;
+ padding: 3px;
+}
+
+.content-inner {
+ &.library-page {
+ .heart-icon {
+ left: 7px;
+ }
+
+ .cd-mediaitem-list-item {
+ padding-left: 25px;
+ }
+ }
+
+ &.library-artists-page {
+ .inner-container .list-container .podcasts-list {
+ background : rgba(27, 27, 27);
+ padding-top: 14px;
+ width : 272px;
+
+ .cd-mediaitem-list-item {
+ margin-left: 10px;
+ }
+
+ .cd-mediaitem-list-item:hover {
+ width: 96%;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 1ccaa34d..a10cbd80 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -1,48 +1,48 @@
// Helpers
.content-inner {
- position : absolute;
- top : var(--navigationBarHeight);
- left : 0;
- padding : 32px;
- width : 100%;
+ position: absolute;
+ top: var(--navigationBarHeight);
+ left: 0;
+ padding: 32px;
+ width: 100%;
transition: zoom 1s;
- zoom : 1;
+ zoom: 1;
}
.content-inner.centered {
- height : 100%;
- display : flex;
- flex-flow : column;
+ height: 100%;
+ display: flex;
+ flex-flow: column;
justify-content: center;
- align-items : center;
+ align-items: center;
}
// End Helpers
// GitHub Themes
.github-themes-page {
- display : flex;
+ display: flex;
flex-direction: column;
- padding : 0px;
- height : calc(100% - var(--navigationBarHeight));
+ padding: 0px;
+ height: calc(100% - var(--navigationBarHeight));
.github-avatar {
- height : 42px;
- width : 42px;
- margin : 6px;
+ height: 42px;
+ width: 42px;
+ margin: 6px;
border-radius: 32px;
}
.repo-name {
- margin : 0px;
- font-weight : 500;
- overflow : hidden;
+ margin: 0px;
+ font-weight: 500;
+ overflow: hidden;
text-overflow: ellipsis;
- white-space : break-spaces;
+ white-space: break-spaces;
}
.repo-url {
- color : var(--textColor);
+ color: var(--textColor);
font-size: 0.8em;
}
@@ -51,12 +51,12 @@
}
.repos-list {
- height : 100%;
+ height: 100%;
overflow-y: overlay;
- width : 320px;
- font-size : 14px;
+ width: 320px;
+ font-size: 14px;
- >.list-group {
+ > .list-group {
margin: 0px;
}
@@ -74,18 +74,18 @@
}
.github-preview {
- height : 100%;
- flex : 1;
+ height: 100%;
+ flex: 1;
background: var(--color2);
- padding : 16px 32px;
+ padding: 16px 32px;
overflow-y: overlay;
}
.gh-content {
- display : flex;
+ display: flex;
flex-direction: row;
- flex : 1;
- overflow : hidden;
+ flex: 1;
+ overflow: hidden;
}
.gh-header {
@@ -98,46 +98,58 @@
padding: 0px;
.library-header {
- position : sticky;
- top : 0;
- left : 0;
- border-bottom : 1px solid rgba(200, 200, 200, 0.05);
- z-index : 6;
- background : black;
- padding : 0px 2em;
+ position: sticky;
+ top: 0;
+ left: 0;
+ border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+ z-index: 6;
+ background: black;
+ padding: 0px 2em;
backdrop-filter: blur(32px);
- background : rgba(0, 0, 0, 0.25);
- top : var(--navigationBarHeight);
+ background: rgba(0, 0, 0, 0.25);
+ top: var(--navigationBarHeight);
}
.well {
margin: 2em;
}
}
+
// Search Page
&.search-page {
+
+ .searchToggle {
+ float: right;
+
+ > button {
+ min-width: 120px;
+ }
+ }
+
.cd-mediaitem-square.mediaitem-brick {
- width: 530px !important;
- .artwork-container .artwork{
- height:168px !important;
- width:507px !important;
- z-index: 1;
- }
- .title{
- font-weight: bold;
- justify-content: left;
- font-size: 18px;
- margin-top: -40px;
- z-index: 5;
- pointer-events: none;
- }
+ width: 530px !important;
+
+ .artwork-container .artwork {
+ height: 168px !important;
+ width: 507px !important;
+ z-index: 1;
+ }
+
+ .title {
+ font-weight: bold;
+ justify-content: left;
+ font-size: 18px;
+ margin-top: -40px;
+ z-index: 5;
+ pointer-events: none;
+ }
}
}
// Podcast Page
.content-inner.podcasts-page {
display: flex;
- height : calc(100% - var(--navigationBarHeight));
+ height: calc(100% - var(--navigationBarHeight));
padding: 0px;
.list-flat {
@@ -145,45 +157,45 @@
}
.podcast-artwork {
- width : 200px;
+ width: 200px;
margin: 16px auto;
height: 200px;
}
.podcasts-list {
- height : 100%;
- width : 280px;
- background : rgb(200 200 200 / 10%);
- overflow-y : overlay;
+ height: 100%;
+ width: 280px;
+ background: rgb(200 200 200 / 10%);
+ overflow-y: overlay;
border-right: 1px solid var(--color2);
- flex : none;
- overflow-x : hidden;
+ flex: none;
+ overflow-x: hidden;
.podcast-list-header {
- border-bottom : 1px solid var(--color2);
- font-size : 0.7em;
- padding : 6px;
- background : #ffffff17;
+ border-bottom: 1px solid var(--color2);
+ font-size: 0.7em;
+ padding: 6px;
+ background: #ffffff17;
text-transform: uppercase;
- font-weight : 600;
- opacity : 0.5;
+ font-weight: 600;
+ opacity: 0.5;
}
.podcasts-search {
- padding : 10px;
- position : sticky;
- top : 0;
- left : 0;
- width : 100%;
+ padding: 10px;
+ position: sticky;
+ top: 0;
+ left: 0;
+ width: 100%;
border-bottom: 1px solid var(--color2);
- z-index : 2;
- background : #303030;
+ z-index: 2;
+ background: #303030;
}
}
.episodes-list {
- height : 100%;
- width : 100%;
+ height: 100%;
+ width: 100%;
background: rgb(200 200 200 / 6%);
overflow-y: overlay;
overflow-x: hidden;
@@ -192,20 +204,20 @@
padding: 14px 14px 0px 14px;
.podcast-show-info {
- display : flex;
+ display: flex;
justify-content: center;
- flex-direction : column;
+ flex-direction: column;
}
.podcast-show-description {
- margin : 32px 6px;
- font-size : 0.8rem;
+ margin: 32px 6px;
+ font-size: 0.8rem;
white-space: pre-wrap;
- display : block;
+ display: block;
}
.podcast-artwork {
- width : 120px;
+ width: 120px;
margin: 0px auto;
height: 120px;
}
@@ -218,14 +230,14 @@
}
.podcasts-details {
- width : 300px;
- flex : none;
- background : rgb(255 255 255 / 5%);
- overflow-y : overlay;
- overflow-x : hidden;
- top : 2%;
- z-index : 2;
- border-left : 1px solid var(--color2);
+ width: 300px;
+ flex: none;
+ background: rgb(255 255 255 / 5%);
+ overflow-y: overlay;
+ overflow-x: hidden;
+ top: 2%;
+ z-index: 2;
+ border-left: 1px solid var(--color2);
padding-bottom: 1em;
.meta-btn {
@@ -233,27 +245,27 @@
}
.podcasts-details-header {
- display : flex;
+ display: flex;
justify-content: end;
- align-items : center;
- position : sticky;
- top : 0;
- z-index : 2;
+ align-items: center;
+ position: sticky;
+ top: 0;
+ z-index: 2;
}
.close-btn {
- width : 50px;
- height : 42px;
- background-image : var(--gfx-closeBtn);
+ width: 50px;
+ height: 42px;
+ background-image: var(--gfx-closeBtn);
background-position: center;
- background-repeat : no-repeat;
- -webkit-app-region : no-drag;
- appearance : none;
- border : 0;
- background-color : transparent;
- position : absolute;
- top : 0;
- right : 0;
+ background-repeat: no-repeat;
+ -webkit-app-region: no-drag;
+ appearance: none;
+ border: 0;
+ background-color: transparent;
+ position: absolute;
+ top: 0;
+ right: 0;
&:hover {
background-color: rgb(196, 43, 28)
@@ -261,17 +273,17 @@
}
.podcast-genre {
- text-align : center;
- margin : 6px;
- font-size : 0.8em;
+ text-align: center;
+ margin: 6px;
+ font-size: 0.8em;
font-weight: 500;
- opacity : 0.8;
+ opacity: 0.8;
}
.podcast-metainfo {
text-align: center;
- font-size : 0.7em;
- opacity : 0.8;
+ font-size: 0.7em;
+ opacity: 0.8;
}
.podcast-header {
@@ -279,17 +291,17 @@
}
.podcast-play-btn {
- width : 50%;
+ width: 50%;
display: block;
- margin : 0 auto;
+ margin: 0 auto;
}
.podcast-description {
- margin : 12px;
- font-size : 0.75em;
+ margin: 12px;
+ font-size: 0.75em;
white-space: pre-wrap;
- display : block;
- line-break : anywhere;
+ display: block;
+ line-break: anywhere;
}
@@ -300,59 +312,59 @@
// Podcast Page
.content-inner.library-artists-page {
// top: 0;
- height : calc(100% - 60px - var(--navigationBarHeight));
+ height: calc(100% - 60px - var(--navigationBarHeight));
padding: 0px;
.inner-container {
display: flex;
- height : calc(100% - var(--navigationBarHeight));
+ height: calc(100% - var(--navigationBarHeight));
padding: 0px;
- height : 100%;
+ height: 100%;
.list-flat {
border-radius: 0px;
}
.podcast-artwork {
- width : 200px;
+ width: 200px;
margin: 16px auto;
height: 200px;
}
.podcasts-list {
- height : 100%;
- width : 280px;
- background : rgb(200 200 200 / 10%);
- overflow-y : overlay;
+ height: 100%;
+ width: 280px;
+ background: rgb(200 200 200 / 10%);
+ overflow-y: overlay;
border-right: 1px solid var(--color2);
- flex : none;
- overflow-x : hidden;
+ flex: none;
+ overflow-x: hidden;
.podcast-list-header {
- border-bottom : 1px solid var(--color2);
- font-size : 0.7em;
- padding : 6px;
- background : #ffffff17;
+ border-bottom: 1px solid var(--color2);
+ font-size: 0.7em;
+ padding: 6px;
+ background: #ffffff17;
text-transform: uppercase;
- font-weight : 600;
- opacity : 0.5;
+ font-weight: 600;
+ opacity: 0.5;
}
.podcasts-search {
- padding : 10px;
- position : sticky;
- top : 0;
- left : 0;
- width : 100%;
+ padding: 10px;
+ position: sticky;
+ top: 0;
+ left: 0;
+ width: 100%;
border-bottom: 1px solid var(--color2);
- z-index : 2;
- background : #303030;
+ z-index: 2;
+ background: #303030;
}
}
.episodes-list {
- height : calc(100% + 60px);
- width : 100%;
+ height: calc(100% + 60px);
+ width: 100%;
background: rgb(200 200 200 / 6%);
overflow-y: overlay;
overflow-x: hidden;
@@ -361,20 +373,20 @@
padding: 14px 14px 0px 14px;
.podcast-show-info {
- display : flex;
+ display: flex;
justify-content: center;
- flex-direction : column;
+ flex-direction: column;
}
.podcast-show-description {
- margin : 32px 6px;
- font-size : 0.8rem;
+ margin: 32px 6px;
+ font-size: 0.8rem;
white-space: pre-wrap;
- display : block;
+ display: block;
}
.podcast-artwork {
- width : 120px;
+ width: 120px;
margin: 0px auto;
height: 120px;
}
@@ -387,14 +399,14 @@
}
.podcasts-details {
- width : 300px;
- flex : none;
- background : rgb(255 255 255 / 5%);
- overflow-y : overlay;
- overflow-x : hidden;
- top : 2%;
- z-index : 2;
- border-left : 1px solid var(--color2);
+ width: 300px;
+ flex: none;
+ background: rgb(255 255 255 / 5%);
+ overflow-y: overlay;
+ overflow-x: hidden;
+ top: 2%;
+ z-index: 2;
+ border-left: 1px solid var(--color2);
padding-bottom: 1em;
.meta-btn {
@@ -402,27 +414,27 @@
}
.podcasts-details-header {
- display : flex;
+ display: flex;
justify-content: end;
- align-items : center;
- position : sticky;
- top : 0;
- z-index : 2;
+ align-items: center;
+ position: sticky;
+ top: 0;
+ z-index: 2;
}
.close-btn {
- width : 50px;
- height : 42px;
- background-image : var(--gfx-closeBtn);
+ width: 50px;
+ height: 42px;
+ background-image: var(--gfx-closeBtn);
background-position: center;
- background-repeat : no-repeat;
- -webkit-app-region : no-drag;
- appearance : none;
- border : 0;
- background-color : transparent;
- position : absolute;
- top : 0;
- right : 0;
+ background-repeat: no-repeat;
+ -webkit-app-region: no-drag;
+ appearance: none;
+ border: 0;
+ background-color: transparent;
+ position: absolute;
+ top: 0;
+ right: 0;
&:hover {
background-color: rgb(196, 43, 28)
@@ -430,17 +442,17 @@
}
.podcast-genre {
- text-align : center;
- margin : 6px;
- font-size : 0.8em;
+ text-align: center;
+ margin: 6px;
+ font-size: 0.8em;
font-weight: 500;
- opacity : 0.8;
+ opacity: 0.8;
}
.podcast-metainfo {
text-align: center;
- font-size : 0.7em;
- opacity : 0.8;
+ font-size: 0.7em;
+ opacity: 0.8;
}
.podcast-header {
@@ -448,17 +460,17 @@
}
.podcast-play-btn {
- width : 50%;
+ width: 50%;
display: block;
- margin : 0 auto;
+ margin: 0 auto;
}
.podcast-description {
- margin : 12px;
- font-size : 0.75em;
+ margin: 12px;
+ font-size: 0.75em;
white-space: pre-wrap;
- display : block;
- line-break : anywhere;
+ display: block;
+ line-break: anywhere;
}
@@ -469,18 +481,18 @@
@media only screen and (max-width: 1230px) {
.content-inner.podcasts-page {
.podcasts-details {
- height : 96%;
- width : 300px;
- flex : none;
- background : rgb(20 20 20 / 97%);
- overflow-y : overlay;
- overflow-x : hidden;
- position : absolute;
- right : 2%;
- top : 2%;
+ height: 96%;
+ width: 300px;
+ flex: none;
+ background: rgb(20 20 20 / 97%);
+ overflow-y: overlay;
+ overflow-x: hidden;
+ position: absolute;
+ right: 2%;
+ top: 2%;
border-radius: 10px;
- box-shadow : var(--ciderShadow-Generic);
- z-index : 2;
+ box-shadow: var(--ciderShadow-Generic);
+ z-index: 2;
}
}
}
@@ -489,33 +501,33 @@
@media only screen and (max-width: 1230px) {
.content-inner.podcasts-page {
.podcasts-details {
- height : 96%;
- width : 300px;
- flex : none;
- background : rgb(20 20 20 / 97%);
- overflow-y : overlay;
- overflow-x : hidden;
- position : absolute;
- right : 2%;
- top : 2%;
+ height: 96%;
+ width: 300px;
+ flex: none;
+ background: rgb(20 20 20 / 97%);
+ overflow-y: overlay;
+ overflow-x: hidden;
+ position: absolute;
+ right: 2%;
+ top: 2%;
border-radius: 10px;
- box-shadow : var(--ciderShadow-Generic);
- z-index : 2;
+ box-shadow: var(--ciderShadow-Generic);
+ z-index: 2;
}
}
}
/* Album / Playlist Page */
.playlist-page {
- --bgColor : transparent;
- padding : 0px;
+ --bgColor: transparent;
+ padding: 0px;
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
- top : 0;
- padding-top : var(--navigationBarHeight);
- display : flex;
+ top: 0;
+ padding-top: var(--navigationBarHeight);
+ display: flex;
flex-direction: column;
- height : 100%;
- overflow : hidden;
+ height: 100%;
+ overflow: hidden;
.cd-mediaitem-list-item {
&:hover {
@@ -531,51 +543,51 @@
.editTracksBtn {
position: absolute;
- top : 20px;
- right : 20px;
- z-index : 1;
+ top: 20px;
+ right: 20px;
+ z-index: 1;
- >span {
+ > span {
display: flex;
- gap : 8px;
+ gap: 8px;
}
}
.mediaContainer {
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
- width : 260px;
- height : 260px;
+ width: 260px;
+ height: 260px;
}
.playlist-body {
- padding : 32px;
+ padding: 32px;
// margin-top: -75px;
- overflow-y : overlay;
- height : 100%;
- padding : 0px;
+ overflow-y: overlay;
+ height: 100%;
+ padding: 0px;
background-color: var(--color1);
&.scrollbody {
.tabs {
- display : flex;
+ display: flex;
flex-flow: column;
- height : 100%;
+ height: 100%;
.nav-link {
text-transform: capitalize;
}
.tab-content {
- height : 100%;
+ height: 100%;
overflow: hidden;
- margin : 0px;
+ margin: 0px;
.tab-pane {
- height : 100%;
- overflow-y : overlay;
- overflow-x : hidden;
- padding : var(--contentInnerPadding);
- padding-inline : 40px;
+ height: 100%;
+ overflow-y: overlay;
+ overflow-x: hidden;
+ padding: var(--contentInnerPadding);
+ padding-inline: 40px;
-webkit-mask-image: linear-gradient(180deg, transparent, white 20px);
.well {
@@ -588,164 +600,172 @@
}
.floating-header {
- position : sticky;
- top : 0;
- left : 0;
- border-bottom : 1px solid rgba(200, 200, 200, 0.05);
- z-index : 6;
- padding : 0px 1em;
+ position: sticky;
+ top: 0;
+ left: 0;
+ border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+ z-index: 6;
+ padding: 0px 1em;
backdrop-filter: blur(32px);
- background : rgba(0, 0, 0, 0.25);
- top : var(--navigationBarHeight);
- transition : opacity 0.1s var(--appleEase);
- display : none;
+ background: rgba(0, 0, 0, 0.25);
+ top: var(--navigationBarHeight);
+ transition: opacity 0.1s var(--appleEase);
+ display: none;
}
.playlist-display {
- padding : var(--contentInnerPadding);
+ padding: var(--contentInnerPadding);
min-height: 300px;
- position : relative;
+ position: relative;
box-shadow: 0px 4px 6px 3px rgb(0 0 0 / 10%);
transition: min-height 0.5s ease-in-out;
.artworkContainer {
- position : absolute;
- top : 0;
- left : 0;
- bottom : 0;
- right : 0;
- margin : 0;
- margin-top : calc(var(--navigationBarHeight) * -1);
- margin-bottom : -10px;
- padding : 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: 0;
+ margin-top: calc(var(--navigationBarHeight) * -1);
+ margin-bottom: -10px;
+ padding: 0;
-webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
- opacity : .7;
- animation : playlistArtworkFadeIn 1s var(--appleEase);
+ opacity: .7;
+ animation: playlistArtworkFadeIn 1s var(--appleEase);
- .artworkMaterial>img {
- filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
+ .artworkMaterial > img {
+ filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
object-position: center;
- object-fit : cover;
- width : 100%;
- height : 100%;
- transform : unset;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ transform: unset;
}
}
.playlistInfo {
- z-index : 1;
- position : absolute;
- bottom : 0;
- left : 0;
- right : 0;
- top : 0;
- display : flex;
+ z-index: 1;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ display: flex;
justify-content: center;
- align-items : center;
- width : 100%;
- height : 100%;
+ align-items: center;
+ width: 100%;
+ height: 100%;
- >.row {
+ > .row {
width: calc(100% - 32px);
}
.playlist-info {
- flex-shrink : unset;
- display : flex;
- flex-flow : column;
+ flex-shrink: unset;
+ display: flex;
+ flex-flow: column;
justify-content: flex-end;
.playlist-name {
- font-weight : 700;
- font-size : 1.6rem;
+ font-weight: 700;
+ font-size: 1.6rem;
//margin-bottom: 6px;
- margin-right : 6px;
- margin-bottom : 6px;
- flex-shrink : unset;
+ margin-right: 6px;
+ margin-bottom: 6px;
+ flex-shrink: unset;
}
.nameEdit {
- font-weight : 700;
- font-size : 1.6rem;
- margin-bottom: 6px;
- margin-right : 6px;
- flex-shrink : unset;
- background : transparent;
- border : 0px;
- color : inherit;
- font-family : inherit;
+ font-weight: 700;
+ font-size: 1.6rem;
+ flex-shrink: unset;
+ background: transparent;
+ border: 0px;
+ color: inherit;
+ font-family: inherit;
+ }
+
+ .descriptionEdit {
+ font-size: 14px;
+ flex-shrink: unset;
+ background: transparent;
+ border: 0px;
+ color: inherit;
+ font-family: inherit;
+ width: 60vw;
}
.playlist-artist {
- font-size : 20px;
+ font-size: 20px;
margin-bottom: 6px;
- margin-right : 6px;
- flex-shrink : unset;
+ margin-right: 6px;
+ flex-shrink: unset;
}
.playlist-desc {
- transition : height .2s ease-in-out, opacity .2s ease-in-out;
- box-sizing : border-box;
- font-size : 14px;
- flex-shrink : unset;
+ transition: height .2s ease-in-out, opacity .2s ease-in-out;
+ box-sizing: border-box;
+ font-size: 14px;
+ flex-shrink: unset;
margin-right: 5px;
- max-height : 100px;
- position : relative;
- height : 4vh;
+ max-height: 100px;
+ position: relative;
+ height: 4vh;
.content {
- height : 4vh;
+ height: 4vh;
-webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.more-btn {
- appearance : none;
- position : absolute;
- right : 0;
- bottom : 0;
- padding : 0 5px;
- font-size : 14px;
- color : var(--keyColor);
+ appearance: none;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 0 5px;
+ font-size: 14px;
+ color: var(--keyColor);
background-color: transparent;
- border : 0px;
- cursor : pointer;
- width : 100%;
- height : 100%;
- overflow : hidden;
- display : flex;
- justify-content : flex-end;
- align-items : flex-end;
- font-weight : 600;
- font-family : inherit;
- text-transform : uppercase;
+ border: 0px;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ font-weight: 600;
+ font-family: inherit;
+ text-transform: uppercase;
}
}
.playlist-desc-expanded {
box-sizing: border-box;
- font-size : 14px;
- position : relative;
+ font-size: 14px;
+ position: relative;
.more-btn {
- appearance : none;
- position : absolute;
- right : 0;
- bottom : 0;
- padding : 0 5px;
- font-size : 14px;
- color : var(--keyColor);
+ appearance: none;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ padding: 0 5px;
+ font-size: 14px;
+ color: var(--keyColor);
background-color: transparent;
- border : 0px;
- cursor : pointer;
- width : 100%;
- height : 100%;
- overflow : hidden;
- display : flex;
- justify-content : flex-end;
- align-items : flex-end;
- font-weight : 600;
- font-family : inherit;
- text-transform : uppercase;
+ border: 0px;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ font-weight: 600;
+ font-family: inherit;
+ text-transform: uppercase;
}
}
}
@@ -755,21 +775,21 @@
}
.friends-info {
- display : flex;
+ display: flex;
flex-flow: column;
.badge-container {
- display : flex;
+ display: flex;
flex-flow: wrap;
.socialBadge {
- width : 40px;
- height : 40px;
+ width: 40px;
+ height: 40px;
border-radius: 100%;
- overflow : hidden;
- box-shadow : var(--mediaItemShadow-ShadowSubtle);
- transition : transform .2s var(--appleEase);
- margin : 6px;
+ overflow: hidden;
+ box-shadow: var(--mediaItemShadow-ShadowSubtle);
+ transition: transform .2s var(--appleEase);
+ margin: 6px;
&:hover {
transform: scale(1.2);
@@ -779,38 +799,38 @@
.friends-name {
text-align: center;
- font-size : 0.9em;
- margin : 8px;
+ font-size: 0.9em;
+ margin: 8px;
}
}
.playlist-time {
- font-size : 0.9em;
- margin : 6px;
- opacity : 0.7;
+ font-size: 0.9em;
+ margin: 6px;
+ opacity: 0.7;
transition: height .2s ease-in-out, opacity .2s ease-in-out;
- height : 0.9em;
+ height: 0.9em;
}
&.inline-playlist {
- overflow : hidden;
- width : 100%;
- height : 100%;
- background : rgba(0, 0, 0, 0.5);
- display : flex;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
justify-content: center;
- align-items : center;
- z-index : 10;
- position : sticky;
- margin-top : calc(var(--navigationBarHeight) * -1);
+ align-items: center;
+ z-index: 10;
+ position: sticky;
+ margin-top: calc(var(--navigationBarHeight) * -1);
.floating-header {
- opacity : 1;
- top : 0px;
- z-index : 6;
- padding : 1em;
+ opacity: 1;
+ top: 0px;
+ z-index: 6;
+ padding: 1em;
backdrop-filter: unset;
- background : black;
+ background: black;
h3 {
display: none;
@@ -818,27 +838,27 @@
}
.playlist-inner {
- background : black;
- width : 80%;
- height : 100%;
- overflow : overlay;
- box-shadow : var(--ciderShadow-Generic);
+ background: black;
+ width: 80%;
+ height: 100%;
+ overflow: overlay;
+ box-shadow: var(--ciderShadow-Generic);
border-radius: var(--mediaItemRadius) var(--mediaItemRadius) 0px 0px;
.close-btn {
- position : sticky;
- top : 16px;
- left : 16px;
+ position: sticky;
+ top: 16px;
+ left: 16px;
margin-left: 16px;
- z-index : 7;
+ z-index: 7;
}
}
}
.pilldim {
.nav-pills {
- width : max-content;
- margin : 0 auto;
+ width: max-content;
+ margin: 0 auto;
margin-top: 16px;
}
}
@@ -848,24 +868,25 @@
transition: min-height 0.5s ease-in-out;
min-height: 200px;
- .playlistInfo {}
+ .playlistInfo {
+ }
.mediaContainer {
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
- width : 128px !important;
- height : 128px !important;
+ width: 128px !important;
+ height: 128px !important;
}
.playlist-time {
transition: height .2s ease-in-out, opacity .2s ease-in-out;
- height : 0px;
- opacity : 0;
+ height: 0px;
+ opacity: 0;
}
.playlist-desc {
transition: height .2s ease-in-out, opacity .2s ease-in-out;
- height : 0px !important;
- opacity : 0;
+ height: 0px !important;
+ opacity: 0;
}
}
}
@@ -886,20 +907,20 @@
padding-bottom: 128px;
.top-fab {
- height : 52px;
- width : 52px;
- position : fixed;
- bottom : 32px;
- right : 32px;
+ height: 52px;
+ width: 52px;
+ position: fixed;
+ bottom: 32px;
+ right: 32px;
border-radius: 100%;
- background : rgb(60 60 60);
- border : 0px;
- appearance : none;
- box-shadow : var(--ciderShadow-Generic);
+ background: rgb(60 60 60);
+ border: 0px;
+ appearance: none;
+ box-shadow: var(--ciderShadow-Generic);
- >svg {
- height : 50%;
- color : #eee;
+ > svg {
+ height: 50%;
+ color: #eee;
pointer-events: none;
}
@@ -921,88 +942,88 @@
.artist-page {
padding: 0px;
- top : 0;
+ top: 0;
.floating-header {
- position : sticky;
- top : 0;
- left : 0;
- border-bottom : 1px solid rgba(200, 200, 200, 0.05);
- z-index : 6;
- padding : 0px 1em;
+ position: sticky;
+ top: 0;
+ left: 0;
+ border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+ z-index: 6;
+ padding: 0px 1em;
backdrop-filter: blur(32px);
- background : rgba(0, 0, 0, 0.25);
- top : var(--navigationBarHeight);
- transition : opacity 0.1s var(--appleEase);
+ background: rgba(0, 0, 0, 0.25);
+ top: var(--navigationBarHeight);
+ transition: opacity 0.1s var(--appleEase);
}
&.animated .artist-header .more-btn-round {
position: absolute;
- bottom : 22px !important;
- right : 28px;
+ bottom: 22px !important;
+ right: 28px;
}
.artist-header {
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
- color : white;
- display : flex;
- align-items : center;
+ color: white;
+ display: flex;
+ align-items: center;
justify-content: space-between;
- min-height : 400px;
- position : relative;
- pointer-events : none;
+ min-height: 400px;
+ position: relative;
+ pointer-events: none;
.header-content {
- z-index : 1;
+ z-index: 1;
// margin-top: -16px;
}
.artworkContainer {
- position : absolute;
- top : 0;
- left : 0;
- bottom : 0;
- right : 0;
- margin : 0;
- padding : 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: 0;
+ padding: 0;
-webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
- opacity : .7;
- animation : playlistArtworkFadeIn 1s var(--appleEase);
+ opacity: .7;
+ animation: playlistArtworkFadeIn 1s var(--appleEase);
- .artworkMaterial>img {
- filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
+ .artworkMaterial > img {
+ filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
object-position: center;
- object-fit : cover;
- width : 100%;
- height : 100%;
- transform : unset;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ transform: unset;
}
}
.more-btn-round {
position: absolute;
- bottom : 82px;
- right : 28px;
+ bottom: 82px;
+ right: 28px;
}
.animated {
- width : 100%;
- height : 100%;
+ width: 100%;
+ height: 100%;
align-self: center;
- position : absolute;
- overflow : hidden;
+ position: absolute;
+ overflow: hidden;
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
video {
- overflow : hidden;
- height : 100%;
- width : 100%;
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
min-height: 56.25vw;
- position : absolute;
- top : 50%;
- left : 50%;
- transform : translate(-50%, -50%);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
}
@@ -1012,29 +1033,29 @@
}
.artist-image {
- width : 200px;
- height : 200px;
- margin : 32px;
+ width: 200px;
+ height: 200px;
+ margin: 32px;
position: relative;
.overlay-play {
- position : absolute;
- top : 0;
- left : 0;
- width : 100%;
- height : 100%;
- opacity : 0;
- background : rgb(0 0 0 / 50%);
- transition : opacity 0.1s var(--appleEase);
- border-radius : 100%;
- z-index : 1;
- display : flex;
- align-items : center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ background: rgb(0 0 0 / 50%);
+ transition: opacity 0.1s var(--appleEase);
+ border-radius: 100%;
+ z-index: 1;
+ display: flex;
+ align-items: center;
justify-content: center;
- cursor : pointer;
- appearance : none;
- border : 0px;
- padding : 0px;
+ cursor: pointer;
+ appearance: none;
+ border: 0px;
+ padding: 0px;
&:hover {
opacity: 1;
@@ -1044,32 +1065,32 @@
background: var(--selected-click);
}
- >svg {
+ > svg {
width: 70%;
}
}
}
.artist-play {
- width : 32px;
- height : 32px;
- background : rgba(100, 100, 100, 0.5);
- box-shadow : var(--ciderShadow-Generic);
+ width: 32px;
+ height: 32px;
+ background: rgba(100, 100, 100, 0.5);
+ box-shadow: var(--ciderShadow-Generic);
border-radius: 100%;
- box-shadow : var(--mediaItemShadow);
- display : none;
- cursor : pointer;
- appearance : none;
- border : 0px;
- padding : 0px;
+ box-shadow: var(--mediaItemShadow);
+ display: none;
+ cursor: pointer;
+ appearance: none;
+ border: 0px;
+ padding: 0px;
&:hover {
filter: brightness(125%);
}
&:active {
- filter : brightness(75%);
- transform : scale(0.98);
+ filter: brightness(75%);
+ transform: scale(0.98);
transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
}
}
@@ -1078,16 +1099,16 @@
.artist-play {
transform: translateY(3px);
- margin : 14px;
+ margin: 14px;
}
&.artist-animation-on {
- width : 100%;
- flex : unset;
+ width: 100%;
+ flex: unset;
margin-left: 0.5em;
- color : whitesmoke;
- position : absolute;
- bottom : 0;
+ color: whitesmoke;
+ position: absolute;
+ bottom: 0;
.artist-play {
display: block;
@@ -1097,45 +1118,45 @@
.artist-body {
padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
- margin : -64px 20px;
+ margin: -64px 20px;
.arow {
- display : flex;
+ display: flex;
overflow: hidden;
- padding : 16px 32px;
+ padding: 16px 32px;
- >.latestRelease {
+ > .latestRelease {
width: 250px;
}
- >.topSongs {
+ > .topSongs {
width: calc(100% - 250px);
}
- &.arowb>.topSongs {
+ &.arowb > .topSongs {
width: 100%;
}
}
}
- &.animated>.artist-body {
- padding : 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
+ &.animated > .artist-body {
+ padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
margin-top: -57px;
}
.showmoreless {
- font-family : inherit;
- font-size : 16px;
- font-weight : 500;
- background : transparent;
- border : 0px;
+ font-family: inherit;
+ font-size: 16px;
+ font-weight: 500;
+ background: transparent;
+ border: 0px;
border-radius: 6px;
- appearance : none;
- color : var(--keyColor);
- padding : 8px 12px;
- cursor : pointer;
- margin-top : 12px;
- float : right;
+ appearance: none;
+ color: var(--keyColor);
+ padding: 8px 12px;
+ cursor: pointer;
+ margin-top: 12px;
+ float: right;
}
.showmoreless:hover {
@@ -1150,14 +1171,15 @@
.themeContextMenu {
background: transparent;
- color : var(--keyColor);
- border : 0px;
+ color: var(--keyColor);
+ border: 0px;
}
.list-group-item {
&.addon {
background: rgb(86 86 86 / 20%);
}
+
&.applied {
background: var(--keyColor-disabled);
pointer-events: none;
@@ -1165,29 +1187,29 @@
}
.repo-header {
- font-size : 16px;
- position : sticky;
- top : 0;
- left : 0;
- right : 0;
- width : 100%;
- height : 50px;
- z-index : 1;
- background : rgba(36, 36, 36, 0.5);
- display : flex;
+ font-size: 16px;
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 50px;
+ z-index: 1;
+ background: rgba(36, 36, 36, 0.5);
+ display: flex;
justify-content: center;
- align-items : center;
+ align-items: center;
backdrop-filter: var(--glassFilter);
- overflow : hidden;
- border-bottom : 1px solid rgb(0 0 0 / 18%);
- border-top : 1px solid rgb(135 135 135 / 18%);
+ overflow: hidden;
+ border-bottom: 1px solid rgb(0 0 0 / 18%);
+ border-top: 1px solid rgb(135 135 135 / 18%);
}
.style-editor-container {
- height : 100%;
- flex : 1;
+ height: 100%;
+ flex: 1;
background: var(--color2);
- padding : 0px;
+ padding: 0px;
overflow-y: overlay;
.list-group-item {
@@ -1205,7 +1227,7 @@
}
.themeLabel {
- display : flex;
+ display: flex;
align-items: center;
}
@@ -1221,23 +1243,24 @@
&:hover {
cursor: grab;
}
+
&:active {
cursor: grabbing;
}
}
.removeItem {
- border : 0px;
- background : transparent;
- height : 32px;
+ border: 0px;
+ background: transparent;
+ height: 32px;
font-weight: bold;
- color : var(--textColor);
- cursor : pointer;
+ color: var(--textColor);
+ cursor: pointer;
}
.stylesDropdown {
- >.dropdown-menu {
- height : 300px;
+ > .dropdown-menu {
+ height: 300px;
overflow-y: overlay;
}
}
@@ -1249,22 +1272,22 @@
padding: 0px;
.nav {
- width : 90%;
+ width: 90%;
margin: 16px auto 0px;
}
.md-option-header {
- padding : 0px 26px;
+ padding: 0px 26px;
border-bottom: unset;
- border-top : unset;
- font-weight : 600;
- background : rgb(255 255 255 / 0%);
- font-size : 2em;
+ border-top: unset;
+ font-weight: 600;
+ background: rgb(255 255 255 / 0%);
+ font-size: 2em;
}
.settings-option-body-webview {
height: 100%;
- width : 100%;
+ width: 100%;
}
.settings-option-body {
@@ -1277,48 +1300,48 @@
padding: 0px;
.md-option-header {
- padding : 1.25em 1.25em;
+ padding: 1.25em 1.25em;
border-bottom: unset;
- border-top : unset;
- font-weight : 600;
- font-size : 1.0em;
- background : rgb(255 255 255 / 3%);
+ border-top: unset;
+ font-weight: 600;
+ font-size: 1.0em;
+ background: rgb(255 255 255 / 3%);
}
- .carousel-item>img {
+ .carousel-item > img {
object-fit: cover;
- width : 100%;
+ width: 100%;
}
.spprofile-line {
- height : 300px;
- width : 100%;
+ height: 300px;
+ width: 100%;
max-width: 1024px;
- padding : 16px;
- margin : 0 auto;
+ padding: 16px;
+ margin: 0 auto;
.spprofile-viewport {
- height : 100%;
- position : relative;
+ height: 100%;
+ position: relative;
border-radius: var(--mediaItemRadius);
- overflow : hidden;
- box-shadow : var(--mediaItemShadow-Shadow);
- background : black;
+ overflow: hidden;
+ box-shadow: var(--mediaItemShadow-Shadow);
+ background: black;
.spprev,
.nextprev {
- position : absolute;
- height : 100%;
- width : 64px;
- top : 0;
+ position: absolute;
+ height: 100%;
+ width: 64px;
+ top: 0;
background: rgb(0 0 0 / 20%);
- z-index : 1;
- border : 0px;
+ z-index: 1;
+ border: 0px;
transition: background 0.2s var(--appleEase), transform 0.2s var(--appleEase);
&:hover {
background: var(--selected);
- transform : scale(1.1);
+ transform: scale(1.1);
}
&:active {
@@ -1327,17 +1350,17 @@
}
&:before {
- content : '';
- position : absolute;
- top : 0;
- left : 0;
- width : 100%;
- height : 100%;
- background : #eee;
- opacity : 1;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #eee;
+ opacity: 1;
-webkit-mask-position: center;
- -webkit-mask-repeat : no-repeat;
- -webkit-mask-size : 1em;
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-size: 1em;
}
}
@@ -1360,25 +1383,25 @@
}
.spslide {
- position : absolute;
- width : 100%;
- height : 100%;
- overflow : hidden;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
background: black;
- >img {
- WIDTH : 100%;
- height : 100%;
+ > img {
+ WIDTH: 100%;
+ height: 100%;
object-fit: cover;
}
.sptitle {
- position : absolute;
- bottom : 0px;
- left : 0;
- width : 100%;
- text-align : center;
- font-size : 18px;
+ position: absolute;
+ bottom: 0px;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ font-size: 18px;
text-shadow: 0px 2px 4px #00000033;
}
}
@@ -1386,19 +1409,19 @@
.spfade-enter-active,
.spfade-leave-active {
--transitionTime: 0.2s;
- transition : opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
- will-change : opacity, transform;
+ transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
+ will-change: opacity, transform;
}
.spfade-enter {
- opacity : 0;
- transform : scale(1.2) translate3d(0, 0, 0);
+ opacity: 0;
+ transform: scale(1.2) translate3d(0, 0, 0);
will-change: opacity, transform;
}
.spfade-leave-to {
- opacity : 1;
- transform : scale(1) translate3d(0, 0, 0);
+ opacity: 1;
+ transform: scale(1) translate3d(0, 0, 0);
will-change: opacity, transform;
}
}
@@ -1425,84 +1448,82 @@
//Home
.home-page {
- top : 0;
- //padding-top: var(--navbarHeight);
.md-btn-replay {
background-image: linear-gradient(-45deg, #2e2173, #925042);
- animation : gradient-animation 5s ease-in-out infinite;
- background-size : 400% 400%;
- border : 0px;
- box-shadow : inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
- text-transform : uppercase;
- font-weight : bold;
+ animation: gradient-animation 5s ease-in-out infinite;
+ background-size: 400% 400%;
+ border: 0px;
+ box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
+ text-transform: uppercase;
+ font-weight: bold;
}
.md-btn-replay--hero {
- font-size : 1em;
- padding : 16px;
+ font-size: 1em;
+ padding: 16px;
background-image: linear-gradient(-45deg, #2e2173, #925042);
- animation : gradient-animation 5s ease-in-out infinite;
- background-size : 400% 400%;
- border : 0px;
- box-shadow : inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
- margin-top : 1em;
- font-size : 0.9em;
- text-transform : uppercase;
- font-weight : bold;
+ animation: gradient-animation 5s ease-in-out infinite;
+ background-size: 400% 400%;
+ border: 0px;
+ box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
+ margin-top: 1em;
+ font-size: 0.9em;
+ text-transform: uppercase;
+ font-weight: bold;
}
.artist-feed-card {
- position : absolute;
- bottom : 0;
- left : 10%;
- z-index : 1;
- background : black;
- width : 80%;
- height : 96%;
- overflow : scroll;
+ position: absolute;
+ bottom: 0;
+ left: 10%;
+ z-index: 1;
+ background: black;
+ width: 80%;
+ height: 96%;
+ overflow: scroll;
border-radius: 10px;
}
.col.madeforyou-col {
- width : 420px;
+ width: 420px;
min-width: 0px;
max-width: 420px;
}
.well.artistfeed-well {
- margin-top : 0px;
- height : 392px;
+ margin-top: 0px;
+ height: 392px;
align-content: flex-start;
}
.hint-text {
font-size: 0.9rem;
- color : rgb(200 200 200 / 70%);
+ color: rgb(200 200 200 / 70%);
}
.user-icon {
border-radius: 100%;
- width : 128px;
- height : 128px;
- overflow : hidden;
- box-shadow : var(--mediaItemShadow-Shadow);
- margin : 16px;
+ width: 128px;
+ height: 128px;
+ overflow: hidden;
+ box-shadow: var(--mediaItemShadow-Shadow);
+ margin: 16px;
}
.well.profile-well {
- flex-direction : column;
+ flex-direction: column;
justify-content: center;
- align-items : center;
+ align-items: center;
.name {
- margin : 4px;
+ margin: 4px;
font-weight: 500;
}
.handle {
- margin : 4px;
- opacity : 0.7;
+ margin: 4px;
+ opacity: 0.7;
font-weight: 500;
}
}
@@ -1513,31 +1534,31 @@
--replayTextShadow: 0px 3px 2px #6f3f52;
.replay-period {
- height : 200px;
- width : 200px;
- margin : 6px;
- border-radius : var(--mediaItemRadius);
- overflow : hidden;
- cursor : pointer;
- transition : transform .2s var(--appleEase);
+ height: 200px;
+ width: 200px;
+ margin: 6px;
+ border-radius: var(--mediaItemRadius);
+ overflow: hidden;
+ cursor: pointer;
+ transition: transform .2s var(--appleEase);
transition-delay: .1s;
- align-self : center;
+ align-self: center;
&:hover {
- transform : translateY(-6px);
+ transform: translateY(-6px);
transition-delay: 0s;
}
.artwork-container {
height: 200px;
- width : 200px;
+ width: 200px;
}
}
.replay-playlist-container {
.cd-mediaitem-square {
height: 230px;
- width : 230px;
+ width: 230px;
.info-rect {
display: none;
@@ -1547,12 +1568,12 @@
.replay-video {
max-height: 300px;
- max-width : 800px;
- margin : 0 auto;
+ max-width: 800px;
+ margin: 0 auto;
.mediaitem-artwork {
max-height: 300px;
- max-width : 800px;
+ max-width: 800px;
}
.mediaitem-artwork .animatedartwork-view-box .animated video {
@@ -1563,28 +1584,28 @@
.top-genres-container {
.genre-name {
- font-size : 0.9em;
- margin : 6px 0px;
+ font-size: 0.9em;
+ margin: 6px 0px;
font-weight: 500;
}
.genre-count {
- width : 100%;
- height : 32px;
- background : #ffffff14;
+ width: 100%;
+ height: 32px;
+ background: #ffffff14;
border-radius: 10px;
- overflow : hidden;
+ overflow: hidden;
.genre-count-bar {
- height : 100%;
- width : 0%;
- background : var(--keyColor);
- display : flex;
+ height: 100%;
+ width: 0%;
+ background: var(--keyColor);
+ display: flex;
justify-content: center;
- align-items : center;
- min-width : 32px;
- font-size : 0.9em;
- font-weight : 500;
+ align-items: center;
+ min-width: 32px;
+ font-size: 0.9em;
+ font-weight: 500;
}
}
}
@@ -1594,11 +1615,11 @@
animation: replayFadeIn .5s var(--appleEase);
}
- transition : transform .2s var(--appleEase);
+ transition: transform .2s var(--appleEase);
transition-delay: .1s;
&:hover {
- transform : scale(1.1);
+ transform: scale(1.1);
transition-delay: 0s;
}
}
@@ -1607,58 +1628,165 @@
0% {
//border-radius: 100%;
transform: translateY(10px) scale(0.9);
- opacity : 0;
+ opacity: 0;
}
100% {
//border-radius: var(--mediaItemRadius);
transform: scale(1);
- opacity : 1;
+ opacity: 1;
}
}
.replay-viewport {
background-image: linear-gradient(-45deg, #2e2173, #925042);
- animation : gradient-animation 5s ease-in-out infinite;
- background-size : 400% 400%;
- padding : 16px 40px;
- border-radius : 10px;
- box-shadow : var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
- color : rgb(238 238 238 / 86%);
+ animation: gradient-animation 5s ease-in-out infinite;
+ background-size: 400% 400%;
+ padding: 16px 40px;
+ border-radius: 10px;
+ box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
+ color: rgb(238 238 238 / 86%);
.replay-header {
- text-align : center;
- font-size : 3em;
+ text-align: center;
+ font-size: 3em;
text-shadow: var(--replayTextShadow);
}
}
.replay-card {
background: transparent;
- border : 0px;
+ border: 0px;
}
}
-.content-inner.cider-multiroom{
+.content-inner.oobe {
+ position: absolute;
+ overflow: hidden;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ display: grid;
+ place-items: center;
+ width: 100%;
+ background: #1e1e1e;
+
+ .oobe-view {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 32px;
+ max-width: 1280px;
+ max-height: 720px;
+ align-self: center;
+ justify-self: center;
+ height: 100%;
+ width: 100%;
+
+
+ .oobe-header {
+ font-size: 3em;
+ text-shadow: var(--replayTextShadow);
+ font-weight: 600;
+ }
+
+ .oobe-body {
+ flex: 1;
+ width: 100%;
+ background: #ffffff0d;
+ border-radius: 20px;
+ padding: 3em;
+
+ &.text {
+ white-space: pre-wrap;
+ }
+
+ .blurb {
+ white-space: pre-wrap;
+ margin: 16px;
+ line-height: 1.5em;
+ }
+
+ &.visual {
+ padding: 1em;
+
+ .stylePicker {
+ border-radius: 10px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: .25s all;
+ box-shadow: 0px 2px 6px rgb(0 0 0 / 25%);
+
+ .visualPreview {
+ pointer-events: none;
+ transition: .25s all;
+ width: 100%;
+ filter: drop-shadow(0px 8px 6px rgb(0 0 0 / 30%));
+ }
+
+ .card-footer {
+ font-size: 1.25em;
+ font-weight: 500;
+ }
+
+
+
+ &:hover {
+ transform: scale(1.10) translateZ(-1px);
+ z-index: 1;
+ box-shadow: 0px 12px 16px rgb(0 0 0 / 25%);
+
+ .visualPreview {
+ transform: scale(1.5) translateZ(-1px);
+ }
+ }
+ }
+ }
+ }
+
+ .oobe-footer {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding: 16px;
+
+ .md-btn {
+ font-size: 18px;
+ min-width: 128px;
+ text-align: center;
+ }
+ }
+ }
+}
+
+.content-inner.cider-multiroom {
padding: 0px;
- .detail{
+
+ .detail {
padding: 32px;
}
- .header-desc{
+
+ .header-desc {
font-size: 1em;
font-weight: 400;
}
- .artworkContainer{
+
+ .artworkContainer {
height: 300px;
- width : 100%;
- img{
+ width: 100%;
+
+ img {
height: 100%;
width: 100%;
overflow: hidden;
object-fit: cover;
filter: unset;
- &:last-child{
- transform: unset;
+
+ &:last-child {
+ transform: unset;
}
}
}
diff --git a/src/renderer/main/mica.js b/src/renderer/main/mica.js
index 189c9cee..cbd346bc 100644
--- a/src/renderer/main/mica.js
+++ b/src/renderer/main/mica.js
@@ -1,107 +1,91 @@
-import { CiderCache } from "./cidercache.js"
+import { CiderCache } from "./cidercache.js";
async function spawnMica() {
- if (typeof window.micaSpawned !== "undefined") {
- return
+ if (typeof window.micaSpawned !== "undefined") {
+ return;
+ } else {
+ window.micaSpawned = true;
+ }
+ const micaDiv = document.createElement("div");
+ const blurIterations = 6;
+ micaDiv.id = "micaEffect";
+ micaDiv.style.position = "fixed";
+ micaDiv.style.top = "0";
+ micaDiv.style.left = "0";
+ micaDiv.style.right = "0";
+ micaDiv.style.bottom = "0";
+ micaDiv.style.zIndex = -1;
+
+ let lastScreenX;
+ let lastScreenY;
+ let lastScreenWidth;
+ let lastScreenHeight;
+
+ let regen = true;
+ let imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
+ blurAmount: 256
+ });
+
+// let micaCache = await CiderCache.getCache("mica-cache");
+// if (!micaCache) {
+// micaCache = {
+// path: "",
+// data: "",
+// };
+// }
+// if (micaCache.path == imgSrc.path) {
+// regen = false;
+// imgSrc = micaCache;
+// }
+ let canvas = document.createElement("canvas");
+ let ctx = canvas.getContext("2d");
+ let img = new Image();
+ micaDiv.style.backgroundImage = `url(${imgSrc.data})`;
+ document.body.appendChild(micaDiv);
+
+ function onScreenMove(cb) {
+ function detectScreenMove() {
+ if (lastScreenY !== window.screenY || lastScreenX !== window.screenX) {
+ lastScreenY = window.screenY;
+ lastScreenX = window.screenX;
+ cb();
+ }
+ // window size change
+ if (
+ lastScreenWidth !== window.innerWidth ||
+ lastScreenHeight !== window.innerHeight
+ ) {
+ lastScreenWidth = window.innerWidth;
+ lastScreenHeight = window.innerHeight;
+ cb();
+ }
+ if (true) {
+ requestAnimationFrame(detectScreenMove);
+ }
+ }
+
+ if (true) {
+ requestAnimationFrame(detectScreenMove);
+ }
+ }
+
+ onScreenMove(function () {
+ const screenHeight = window.screen.height;
+ const screenWidth = window.screen.width;
+ const windowHeight = window.innerHeight;
+ const windowWidth = window.innerWidth;
+ const ratio = windowWidth / windowHeight;
+ const x = window.screenX;
+ const y = window.screenY;
+ micaDiv.style.backgroundSize = `${screenWidth}px ${screenHeight}px`;
+ // micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
+ if (x < 0) {
+ micaDiv.style.backgroundPosition = `${screenWidth + x}px -${y}px`;
} else {
- window.micaSpawned = true
+ micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
}
- const micaDiv = document.createElement('div');
- const blurIterations = 6
- micaDiv.id = 'micaEffect';
- micaDiv.style.position = "fixed"
- micaDiv.style.top = "0"
- micaDiv.style.left = "0"
- micaDiv.style.right = "0"
- micaDiv.style.bottom = "0"
- micaDiv.style.zIndex = -1
-
- let lastScreenX;
- let lastScreenY;
- let lastScreenWidth;
- let lastScreenHeight;
-
- let regen = true
- let imgSrc = await ipcRenderer.sendSync("get-wallpaper")
-
- let micaCache = await CiderCache.getCache("mica-cache")
- if (!micaCache) {
- micaCache = {
- path: "",
- data: ""
- }
- }
- if (micaCache.path == imgSrc.path) {
- regen = false
- imgSrc = micaCache
- }
- let canvas = document.createElement('canvas');
- let ctx = canvas.getContext('2d');
- let img = new Image();
- img.src = imgSrc.data;
- img.onload = function () {
- canvas.width = img.width;
- canvas.height = img.height;
- ctx.drawImage(img, 0, 0);
- if (regen) {
- for (let i = 0; i < blurIterations; i++) {
- StackBlur.canvasRGB(canvas, 0, 0, img.width, img.height, 128);
- }
- micaCache.path = imgSrc.path
- micaCache.data = canvas.toDataURL()
- CiderCache.putCache("mica-cache", micaCache)
- }
- let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- micaDiv.style.backgroundImage = `url(${micaCache.data})`;
- document.body.appendChild(micaDiv);
- // on animation finished set animation to unset
- micaDiv.addEventListener('animationend', function () {
- micaDiv.style.opacity = '1';
- micaDiv.style.animation = 'unset';
- })
- }
-
-
- function onScreenMove(cb) {
- function detectScreenMove() {
- if (lastScreenY !== window.screenY || lastScreenX !== window.screenX) {
- lastScreenY = window.screenY;
- lastScreenX = window.screenX;
- cb();
- }
- // window size change
- if (lastScreenWidth !== window.innerWidth || lastScreenHeight !== window.innerHeight) {
- lastScreenWidth = window.innerWidth;
- lastScreenHeight = window.innerHeight;
- cb();
- }
- if (true) {
- requestAnimationFrame(detectScreenMove);
- }
- }
-
- if (true) {
- requestAnimationFrame(detectScreenMove);
- }
- }
-
- onScreenMove(function () {
- const screenHeight = window.screen.height;
- const screenWidth = window.screen.width;
- const windowHeight = window.innerHeight;
- const windowWidth = window.innerWidth;
- const ratio = windowWidth / windowHeight;
- const x = window.screenX;
- const y = window.screenY;
- micaDiv.style.backgroundSize = `${screenWidth}px ${screenHeight}px`;
- // micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
- if (x < 0) {
- micaDiv.style.backgroundPosition = `${screenWidth + x}px -${y}px`;
- } else {
- micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
- }
- });
- return true
+ });
+ return true;
}
-export { spawnMica }
\ No newline at end of file
+export { spawnMica };
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 0522a0d9..06cdedd8 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1,4 +1,4 @@
-import { store } from './vuex-store.js';
+import {store} from './vuex-store.js';
Vue.use(VueHorizontal);
Vue.use(VueObserveVisibility);
@@ -26,6 +26,7 @@ const app = new Vue({
showHints: false,
results: {},
resultsSocial: {},
+ resultsLibrary: {},
limit: 10
},
fullscreenLyrics: false,
@@ -79,7 +80,7 @@ const app = new Vue({
sorting: "name",
sortOrder: "asc",
listing: [],
- meta: { total: 0, progress: 0 },
+ meta: {total: 0, progress: 0},
search: "",
displayListing: [],
downloadState: 0 // 0 = not started, 1 = in progress, 2 = complete, 3 = empty library
@@ -95,7 +96,7 @@ const app = new Vue({
sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page
sortOrder: ["desc", "asc"], // [0] = recentlyadded page, [1] = albums page
listing: [],
- meta: { total: 0, progress: 0 },
+ meta: {total: 0, progress: 0},
search: "",
displayListing: [],
downloadState: 0 // 0 = not started, 1 = in progress, 2 = complete, 3 = empty library
@@ -111,7 +112,7 @@ const app = new Vue({
sorting: ["dateAdded", "name"], // [0] = recentlyadded page, [1] = albums page
sortOrder: ["desc", "asc"], // [0] = recentlyadded page, [1] = albums page
listing: [],
- meta: { total: 0, progress: 0 },
+ meta: {total: 0, progress: 0},
search: "",
displayListing: [],
downloadState: 0 // 0 = not started, 1 = in progress, 2 = complete, 3 = empty library
@@ -159,6 +160,7 @@ const app = new Vue({
tmpVar: [],
notification: false,
chrome: {
+ sidebarCollapsed: false,
nativeControls: false,
contentScrollPosY: 0,
appliedTheme: {
@@ -173,12 +175,10 @@ const app = new Vue({
"attributes": {
"name": "Cider User",
"handle": "CiderUser",
- "artwork": { "url": "./assets/logocut.png" }
+ "artwork": {"url": "./assets/logocut.png"}
}
},
- forceDirectives: {
-
- },
+ forceDirectives: {},
menuOpened: false,
maximized: false,
drawerOpened: false,
@@ -240,8 +240,8 @@ const app = new Vue({
},
moreinfodata: [],
notyf: notyf,
- idleTimer : null,
- idleState : false,
+ idleTimer: null,
+ idleState: false,
},
watch: {
cfg: {
@@ -273,11 +273,20 @@ const app = new Vue({
}, false)
},
methods: {
+ async oobeInit() {
+ this.appMode = "oobe"
+ this.setLz(this.cfg.general.language)
+ this.setLzManual()
+ clearTimeout(this.hangtimer)
+ document.body.removeAttribute("loading")
+ ipcRenderer.invoke("renderer-ready", true)
+ document.querySelector("#LOADER").remove()
+ },
setTimeout(func, time) {
return setTimeout(func, time);
},
songLinkShare(amUrl) {
- notyf.open({ type: "info", className: "notyf-info", message: app.getLz('term.song.link.generate') })
+ notyf.open({type: "info", className: "notyf-info", message: app.getLz('term.song.link.generate')})
let self = this
let httpRequest = new XMLHttpRequest();
httpRequest.open('GET', `https://api.song.link/v1-alpha.1/links?url=${amUrl}&userCountry=US`, true);
@@ -296,9 +305,14 @@ const app = new Vue({
}
},
formatVolumeTooltip() {
- return this.cfg.audio.dBSPL ? (Number(this.cfg.audio.dBSPLcalibration) + (Math.log10(this.mk.volume) * 20)).toFixed(2) + ' dB SPL' : (Math.log10(this.mk.volume) * 20).toFixed(2) + ' dBFS'
+ let advancedTooltip = this.cfg.audio.dBSPL ? (Number(this.cfg.audio.dBSPLcalibration) + (Math.log10(this.mk.volume) * 20)).toFixed(2) + ' dB SPL' : (Math.log10(this.mk.volume) * 20).toFixed(2) + ' dBFS'
+ return this.cfg.audio.advanced ? advancedTooltip : (this.mk.volume * 100).toFixed(0) + '%'
},
- mainMenuVisibility(val) {
+ mainMenuVisibility(val, isContextMenu) {
+ if (this.chrome.sidebarCollapsed && !isContextMenu) {
+ this.chrome.sidebarCollapsed = false
+ return
+ }
if (val) {
(this.mk.isAuthorized) ? this.chrome.menuOpened = !this.chrome.menuOpened : false;
if (!this.mk.isAuthorized) {
@@ -329,7 +343,8 @@ const app = new Vue({
this.listennow.timestamp = 0;
this.browsepage.timestamp = 0;
this.radio.timestamp = 0;
- } catch (e) { }
+ } catch (e) {
+ }
},
/**
* Grabs translation for localization.
@@ -387,7 +402,7 @@ const app = new Vue({
},
async showSocialListeningTo() {
let contentIds = Object.keys(app.socialBadges.badgeMap)
- app.showCollection({ data: this.socialBadges.mediaItems }, "Friends Listening To", "albums")
+ app.showCollection({data: this.socialBadges.mediaItems}, "Friends Listening To", "albums")
if (this.socialBadges.mediaItemDLState == 1 || this.socialBadges.mediaItemDLState == 2) {
return
}
@@ -492,11 +507,9 @@ const app = new Vue({
history.forward()
},
getHTMLStyle() {
- if (app.cfg.visual.uiScale != 1) {
- document.querySelector("#app").style.zoom = app.cfg.visual.uiScale
- } else {
- document.querySelector("#app").style.zoom = ""
- }
+
+ ipcRenderer.send("setScreenScale", app.cfg.visual.uiScale);
+
},
resetState() {
this.menuPanel.visible = false;
@@ -530,7 +543,7 @@ const app = new Vue({
self.selectedMediaItems[i].kind = "albums"
let res = await self.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/albums/${self.selectedMediaItems[i].id}/tracks`);
let ids = res.data.data.map(function (i) {
- return { id: i.id, type: i.type }
+ return {id: i.id, type: i.type}
})
pl_items = pl_items.concat(ids)
} else if (self.selectedMediaItems[i].kind == "library-song" || self.selectedMediaItems[i].kind == "library-songs") {
@@ -543,7 +556,7 @@ const app = new Vue({
self.selectedMediaItems[i].kind = "library-albums"
let res = await self.mk.api.v3.music(`/v1/me/library/albums/${self.selectedMediaItems[i].id}/tracks`);
let ids = res.data.data.map(function (i) {
- return { id: i.id, type: i.type }
+ return {id: i.id, type: i.type}
})
pl_items = pl_items.concat(ids)
} else {
@@ -570,7 +583,7 @@ const app = new Vue({
self.selectedMediaItems[i].kind = "albums"
let res = await self.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/albums/${self.selectedMediaItems[i].id}/tracks`);
let ids = res.data.data.map(function (i) {
- return { id: i.id, type: i.type }
+ return {id: i.id, type: i.type}
})
pl_items = pl_items.concat(ids)
} else if (self.selectedMediaItems[i].kind == "library-song" || self.selectedMediaItems[i].kind == "library-songs") {
@@ -583,7 +596,7 @@ const app = new Vue({
self.selectedMediaItems[i].kind = "library-albums"
let res = await self.mk.api.v3.music(`/v1/me/library/albums/${self.selectedMediaItems[i].id}/tracks`);
let ids = res.data.data.map(function (i) {
- return { id: i.id, type: i.type }
+ return {id: i.id, type: i.type}
})
pl_items = pl_items.concat(ids)
} else {
@@ -597,13 +610,13 @@ const app = new Vue({
this.modals.addToPlaylist = false
await app.mk.api.v3.music(
`/v1/me/library/playlists/${playlist_id}/tracks`, {}, {
- fetchOptions: {
- method: "POST",
- body: JSON.stringify({
- data: pl_items
- })
+ fetchOptions: {
+ method: "POST",
+ body: JSON.stringify({
+ data: pl_items
+ })
+ }
}
- }
).then(() => {
if (this.page == 'playlist_' + this.showingPlaylist.id) {
this.getPlaylistFromID(this.showingPlaylist.id, true)
@@ -674,7 +687,7 @@ const app = new Vue({
"attributes": {
"name": "Cider User",
"handle": "CiderUser",
- "artwork": { "url": "./assets/logocut.png" }
+ "artwork": {"url": "./assets/logocut.png"}
}
}
}
@@ -728,7 +741,7 @@ const app = new Vue({
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.setQueue({
[truekind]: [lastItem.attributes.playParams.id],
- parameters: { l: app.mklang }
+ parameters: {l: app.mklang}
})
app.mk.mute()
setTimeout(() => {
@@ -747,7 +760,7 @@ const app = new Vue({
for (let id of ids) {
if (!(i == 0 && ids[0] == lastItem.attributes.playParams.id)) {
try {
- app.mk.playLater({ songs: [id] })
+ app.mk.playLater({songs: [id]})
} catch (err) {
}
}
@@ -769,14 +782,14 @@ const app = new Vue({
}
break;
case "history":
- let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, { l: app.mklang })
+ let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, {l: app.mklang})
if (history.data.data.length > 0) {
let lastItem = history.data.data[0]
let kind = lastItem.attributes.playParams.kind;
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
app.mk.setQueue({
[truekind]: [lastItem.attributes.playParams.id],
- parameters: { l: app.mklang }
+ parameters: {l: app.mklang}
})
app.mk.mute()
setTimeout(() => {
@@ -809,8 +822,7 @@ const app = new Vue({
try {
if (app.mk.nowPlayingItem.type !== 'song') {
CiderAudio.audioNodes.gainNode.gain.value = 0.70794578438;
- }
- else {
+ } else {
let soundcheck = tag.split(" ")
let numbers = []
for (let item of soundcheck) {
@@ -819,25 +831,30 @@ const app = new Vue({
}
numbers.shift()
let peak = Math.max(numbers[6], numbers[7]) / 32768.0
- let gain = Math.pow(10, ((-1.3 - (Math.log10(peak) * 20)) / 20))// EBU R 128 Compliant
+ let gain = Math.pow(10, ((-1.7 - (Math.log10(peak) * 20)) / 20))// EBU R 128 Compliant
console.debug(`[Cider][MaikiwiSoundCheck] Peak Gain: '${(Math.log10(peak) * 20).toFixed(2)}' dB | Adjusting '${(Math.log10(gain) * 20).toFixed(2)}' dB`)
try {
//CiderAudio.audioNodes.gainNode.gain.value = (Math.min(Math.pow(10, (replaygain.gain / 20)), (1 / replaygain.peak)))
CiderAudio.audioNodes.gainNode.gain.value = gain
- } catch (e) { }
+ } catch (e) {
+ }
}
- } catch (e) {
- try { ipcRenderer.send('SoundCheckTag', event, tag); }
- catch (e) {
- try {ipcRenderer.send('SoundCheckTag', event, tag);}
- catch (e) {console.log("[Cider][MaikiwiSoundCheck] Error [Gave up after 3 consecutive attempts]: " + e)}
+ } catch (e) {
+ try {
+ ipcRenderer.send('SoundCheckTag', event, tag);
+ } catch (e) {
+ try {
+ ipcRenderer.send('SoundCheckTag', event, tag);
+ } catch (e) {
+ console.log("[Cider][MaikiwiSoundCheck] Error [Gave up after 3 consecutive attempts]: " + e)
+ }
}
} // brute force until it works
})
ipcRenderer.on('play', function (_event, mode, id) {
if (mode !== 'url') {
- self.mk.setQueue({ [mode]: id, parameters: { l: self.mklang } }).then(() => {
+ self.mk.setQueue({[mode]: id, parameters: {l: self.mklang}}).then(() => {
app.mk.play()
})
@@ -859,9 +876,9 @@ const app = new Vue({
ipcRenderer.send('wsapi-updatePlaybackState', wsapi.getAttributes());
})
- this.mk.addEventListener(MusicKit.Events.queueItemsDidChange, ()=>{
+ this.mk.addEventListener(MusicKit.Events.queueItemsDidChange, () => {
if (self.$refs.queue) {
- setTimeout(()=>{
+ setTimeout(() => {
self.$refs.queue.updateQueue();
}, 100)
}
@@ -872,29 +889,27 @@ const app = new Vue({
self.$refs.queue.updateQueue();
}
this.currentSongInfo = a
-
- try {
+
+ try {
if (app.mk.nowPlayingItem.flavor.includes("64")) {
if (localStorage.getItem("playingBitrate") !== "64") {
localStorage.setItem("playingBitrate", "64")
CiderAudio.hierarchical_loading();
}
- }
- else if (app.mk.nowPlayingItem.flavor.includes("256")) {
+ } else if (app.mk.nowPlayingItem.flavor.includes("256")) {
if (localStorage.getItem("playingBitrate") !== "256") {
localStorage.setItem("playingBitrate", "256")
CiderAudio.hierarchical_loading();
}
- }
- else {
+ } else {
localStorage.setItem("playingBitrate", "256")
CiderAudio.hierarchical_loading();
}
- } catch(e) {
+ } catch (e) {
localStorage.setItem("playingBitrate", "256")
CiderAudio.hierarchical_loading();
}
-
+
if (app.cfg.audio.normalization) {
// get unencrypted audio previews to get SoundCheck's normalization tag
try {
@@ -955,7 +970,7 @@ const app = new Vue({
}
setTimeout(() => {
let i = (document.querySelector('#apple-music-player')?.src ?? "")
- if (i.endsWith(".m3u8") || i.endsWith(".m3u")){
+ if (i.endsWith(".m3u8") || i.endsWith(".m3u")) {
this._playRadioStream(i)
}
}, 1500)
@@ -972,7 +987,7 @@ const app = new Vue({
this.appRoute(window.location.hash)
}
- if(this.page != "home") {
+ if (this.page != "home") {
this.resumeTabs()
}
this.mediaKeyFixes()
@@ -983,7 +998,7 @@ const app = new Vue({
this.$forceUpdate()
}, 500)
document.querySelector('#apple-music-video-player-controls').addEventListener('mousemove', () => {
- this.showFoo('.music-player-info',2000);
+ this.showFoo('.music-player-info', 2000);
})
ipcRenderer.invoke("renderer-ready", true)
document.querySelector("#LOADER").remove()
@@ -991,7 +1006,7 @@ const app = new Vue({
this.checkForThemeUpdates()
}
},
- showFoo(querySelector,time) {
+ showFoo(querySelector, time) {
clearTimeout(this.idleTimer);
if (this.idleState == true) {
document.querySelector(querySelector).classList.remove("inactive");
@@ -1014,7 +1029,11 @@ const app = new Vue({
.then(res => res.json())
.then(res => {
if (res[0].sha != theme.commit) {
- const notify = notyf.open({ className: "notyf-info", type: "info", message: `[Themes] ${theme.name} has an update available.` })
+ const notify = notyf.open({
+ className: "notyf-info",
+ type: "info",
+ message: `[Themes] ${theme.name} has an update available.`
+ })
notify.on("click", () => {
app.appRoute("themes-github")
notyf.dismiss(notify)
@@ -1202,7 +1221,7 @@ const app = new Vue({
let trackMap = this.cfg.advanced.playlistTrackMapping
let newListing = []
let trackMapping = {}
-
+
if (useCachedPlaylists) {
const cachedPlaylist = await CiderCache.getCache("library-playlists")
const cachedTrackMapping = await CiderCache.getCache("library-playlists-tracks")
@@ -1262,10 +1281,12 @@ const app = new Vue({
}
})
}
- } catch (e) { }
+ } catch (e) {
+ }
if (playlist.type == "library-playlist-folders") {
try {
- await deepScan(playlist.id).catch(e => { })
+ await deepScan(playlist.id).catch(e => {
+ })
} catch (e) {
}
@@ -1304,12 +1325,12 @@ const app = new Vue({
this.newPlaylist()
}
},
- {
- name: app.getLz('term.createNewPlaylistFolder'),
- action: () => {
- this.newPlaylistFolder()
+ {
+ name: app.getLz('term.createNewPlaylistFolder'),
+ action: () => {
+ this.newPlaylistFolder()
+ }
}
- }
]
}
this.showMenuPanel(menu, event)
@@ -1318,13 +1339,13 @@ const app = new Vue({
let self = this
this.mk.api.v3.music(
`/v1/me/library/playlist-folders/${id}`, {}, {
- fetchOptions: {
- method: "PATCH",
- body: JSON.stringify({
- attributes: { name: name }
- })
+ fetchOptions: {
+ method: "PATCH",
+ body: JSON.stringify({
+ attributes: {name: name}
+ })
+ }
}
- }
).then(res => {
self.refreshPlaylists(false, false)
})
@@ -1333,13 +1354,28 @@ const app = new Vue({
let self = this
this.mk.api.v3.music(
`/v1/me/library/playlists/${id}`, {}, {
- fetchOptions: {
- method: "PATCH",
- body: JSON.stringify({
- attributes: { name: name }
- })
+ fetchOptions: {
+ method: "PATCH",
+ body: JSON.stringify({
+ attributes: {name: name}
+ })
+ }
+ }
+ ).then(res => {
+ self.refreshPlaylists(false, false)
+ })
+ },
+ async editPlaylistDescription(id, name = app.getLz('term.newPlaylist')) {
+ let self = this
+ this.mk.api.v3.music(
+ `/v1/me/library/playlists/${id}`, {}, {
+ fetchOptions: {
+ method: "PATCH",
+ body: JSON.stringify({
+ attributes: {description: name}
+ })
+ }
}
- }
).then(res => {
self.refreshPlaylists(false, false)
})
@@ -1364,9 +1400,9 @@ const app = new Vue({
fetchOptions: {
method: "POST",
body: JSON.stringify({
- "attributes": { "name": name },
+ "attributes": {"name": name},
"relationships": {
- "tracks": { "data": tracks },
+ "tracks": {"data": tracks},
}
})
}
@@ -1408,10 +1444,10 @@ const app = new Vue({
})
}
},
- /**
+ /**
* @param {string} url, href for the initial request
* @memberof app
- */
+ */
async showRoom(url) {
let self = this
const response = await this.mk.api.v3.music(url)
@@ -1429,7 +1465,7 @@ const app = new Vue({
app.appRoute("collection-list")
},
async showArtistView(artist, title, view) {
- let response = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artist}/view/${view}?l=${this.mklang}`, {}, { includeResponseMeta: !0 })).data
+ let response = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artist}/view/${view}?l=${this.mklang}`, {}, {includeResponseMeta: !0})).data
console.debug(response)
await this.showCollection(response, title, "artists")
},
@@ -1546,7 +1582,7 @@ const app = new Vue({
"limit[artists:top-songs]": 20,
"art[url]": "f",
l: this.mklang
- }, { includeResponseMeta: !0 })
+ }, {includeResponseMeta: !0})
console.debug(artistData.data.data[0])
this.artistPage.data = artistData.data.data[0]
this.page = "artist-page"
@@ -1629,13 +1665,12 @@ const app = new Vue({
const m = Math.floor(seconds % 3600 / 60);
const s = Math.floor(seconds % 60);
- const dDisplay = d > 0 ? `${d} ${app.getLz("term.time.day", { "count": d })}` : "";
- const hDisplay = h > 0 ? `${h} ${app.getLz("term.time.hour", { "count": h })}` : "";
- const mDisplay = m > 0 ? `${m} ${app.getLz("term.time.minute", { "count": m })}` : "";
+ const dDisplay = d > 0 ? `${d} ${app.getLz("term.time.day", {"count": d})}` : "";
+ const hDisplay = h > 0 ? `${h} ${app.getLz("term.time.hour", {"count": h})}` : "";
+ const mDisplay = m > 0 ? `${m} ${app.getLz("term.time.minute", {"count": m})}` : "";
return dDisplay + (dDisplay && hDisplay ? ", " : "") + hDisplay + (hDisplay && mDisplay ? ", " : "") + mDisplay;
- }
- else {
+ } else {
let returnTime = datetime.toISOString().substring(11, 19);
const timeGates = {
@@ -1704,7 +1739,7 @@ const app = new Vue({
kind: page,
id: id,
attributes: {
- playParams: { kind: page, id: id, isLibrary: isLibrary }
+ playParams: {kind: page, id: id, isLibrary: isLibrary}
}
})
},
@@ -1733,27 +1768,28 @@ const app = new Vue({
if (item.attributes.link.url.includes("viewMultiRoom")) {
const params = new Proxy(new URLSearchParams(item.attributes.link.url), {
get: (searchParams, prop) => searchParams.get(prop),
- });
+ });
id = params.fcId
app.getTypeFromID("multiroom", id, false, {
platform: "web",
extend: "editorialArtwork,uber,lockupStyle"
- }).then(()=> {
+ }).then(() => {
kind = "multiroom"
window.location.hash = `${kind}/${id}`
document.querySelector("#app-content").scrollTop = 0
})
-
+
return;
} else {
- window.open(item.attributes.link.url)}
+ window.open(item.attributes.link.url)
+ }
}
- } else if (kind == "multirooms"){
+ } else if (kind == "multirooms") {
app.getTypeFromID("multiroom", id, false, {
platform: "web",
extend: "editorialArtwork,uber,lockupStyle"
- }).then(()=> {
+ }).then(() => {
kind = "multiroom"
window.location.hash = `${kind}/${id}`
document.querySelector("#app-content").scrollTop = 0
@@ -1792,7 +1828,7 @@ const app = new Vue({
params["meta[albums:tracks]"] = 'popularity'
params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
}
- if (kind.includes("playlist") || kind.includes("album")){
+ if (kind.includes("playlist") || kind.includes("album")) {
app.page = (kind) + "_" + (id);
window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
app.getTypeFromID((kind), (id), (isLibrary), params);
@@ -1827,30 +1863,30 @@ const app = new Vue({
}
},
isDisabled() {
- if(!app.mk.nowPlayingItem || app.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation') {
+ if (!app.mk.nowPlayingItem || app.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation') {
return true;
}
return false;
},
isPrevDisabled() {
- if(this.isDisabled() || (app.mk.queue._position == 0 && app.mk.currentPlaybackTime <= 2)) {
+ if (this.isDisabled() || (app.mk.queue._position == 0 && app.mk.currentPlaybackTime <= 2)) {
return true;
}
return false;
},
isNextDisabled() {
- if(this.isDisabled() || app.mk.queue._position + 1 == app.mk.queue.length) {
+ if (this.isDisabled() || app.mk.queue._position + 1 == app.mk.queue.length) {
return true;
}
return false;
},
-
+
async getNowPlayingItemDetailed(target) {
try {
let u = await app.mkapi(app.mk.nowPlayingItem.playParams.kind,
(app.mk.nowPlayingItem.songId == -1),
(app.mk.nowPlayingItem.songId != -1) ? app.mk.nowPlayingItem.songId : app.mk.nowPlayingItem["id"],
- { "include[songs]": "albums,artists", l: app.mklang });
+ {"include[songs]": "albums,artists", l: app.mklang});
app.searchAndNavigate(u.data.data[0], target)
} catch (e) {
app.searchAndNavigate(app.mk.nowPlayingItem, target)
@@ -1954,7 +1990,7 @@ const app = new Vue({
}
if (labelId != "") {
app.showingPlaylist = []
- await app.getTypeFromID("recordLabel", labelId, false, { views: 'top-releases,latest-releases,top-artists' });
+ await app.getTypeFromID("recordLabel", labelId, false, {views: 'top-releases,latest-releases,top-artists'});
app.page = "recordLabel_" + labelId;
}
@@ -1992,11 +2028,10 @@ const app = new Vue({
// console.log(kind, id, isLibrary)
app.mk.stop().then(() => {
if (kind.includes("artist")) {
- app.mk.setStationQueue({ artist: 'a-' + id }).then(() => {
+ app.mk.setStationQueue({artist: 'a-' + id}).then(() => {
app.mk.play()
})
- }
- else {
+ } else {
app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
}
})
@@ -2019,7 +2054,7 @@ const app = new Vue({
} finally {
if (kind == "appleCurator") {
app.appleCurator = a.data.data[0]
- } else if (kind == "multiroom"){
+ } else if (kind == "multiroom") {
app.multiroom = a.data.data[0]
} else {
this.getPlaylistContinuous(a, true)
@@ -2028,7 +2063,7 @@ const app = new Vue({
} finally {
if (kind == "appleCurator") {
app.appleCurator = a.data.data[0]
- } else if (kind == "multiroom"){
+ } else if (kind == "multiroom") {
app.multiroom = a.data.data[0]
} else {
this.getPlaylistContinuous(a, true)
@@ -2040,7 +2075,7 @@ const app = new Vue({
let self = this
let prefs = this.cfg.libraryPrefs.songs
let albumAdded = self.library?.albums?.listing?.map(function (i) {
- return { [i.id]: i.attributes?.dateAdded }
+ return {[i.id]: i.attributes?.dateAdded}
})
let startTime = new Date().getTime()
@@ -2272,8 +2307,7 @@ const app = new Vue({
try {
if (method.includes(`multiroom`)) {
return await this.mk.api.v3.music(`v1/editorial/${app.mk.storefrontId}/${truemethod}/${term.toString()}`, params, params2)
- }
- else if (library) {
+ } else if (library) {
return await this.mk.api.v3.music(`v1/me/library/${truemethod}/${term.toString()}`, params, params2)
} else {
return await this.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${truemethod}/${term.toString()}`, params, params2)
@@ -2448,7 +2482,7 @@ const app = new Vue({
}
if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
console.debug(`downloading next chunk - ${library.length
- } albums so far`)
+ } albums so far`)
downloadChunk()
} else {
self.library.albums.listing = library
@@ -2557,7 +2591,7 @@ const app = new Vue({
}
if (downloaded.meta.total > library.length || typeof downloaded.meta.next != "undefined") {
console.log(`downloading next chunk - ${library.length
- } artists so far`)
+ } artists so far`)
downloadChunk()
} else {
self.library.artists.listing = library
@@ -2580,19 +2614,19 @@ const app = new Vue({
getTotalTime() {
try {
if (app.showingPlaylist.relationships.tracks.data.length === 0) return ""
- const timeInSeconds = Math.round([].concat(...app.showingPlaylist.relationships.tracks.data).reduce((a, { attributes: { durationInMillis } }) => a + durationInMillis, 0) / 1000);
- return `${app.showingPlaylist.relationships.tracks.data.length} ${app.getLz("term.track", { "count": app.showingPlaylist.relationships.tracks.data.length })}, ${app.convertTime(timeInSeconds, 'long')}`
+ const timeInSeconds = Math.round([].concat(...app.showingPlaylist.relationships.tracks.data).reduce((a, {attributes: {durationInMillis}}) => a + durationInMillis, 0) / 1000);
+ return `${app.showingPlaylist.relationships.tracks.data.length} ${app.getLz("term.track", {"count": app.showingPlaylist.relationships.tracks.data.length})}, ${app.convertTime(timeInSeconds, 'long')}`
} catch (err) {
return ""
}
},
async getLibrarySongs() {
- let response = await this.mkapi("songs", true, "", { limit: 100, l: this.mklang }, { includeResponseMeta: !0 })
+ let response = await this.mkapi("songs", true, "", {limit: 100, l: this.mklang}, {includeResponseMeta: !0})
this.library.songs.listing = response.data.data
this.library.songs.meta = response.data.meta
},
async getLibraryAlbums() {
- let response = await this.mkapi("albums", true, "", { limit: 100, l: this.mklang }, { includeResponseMeta: !0 })
+ let response = await this.mkapi("albums", true, "", {limit: 100, l: this.mklang}, {includeResponseMeta: !0})
this.library.albums.listing = response.data.data
this.library.albums.meta = response.data.meta
},
@@ -2683,13 +2717,13 @@ const app = new Vue({
let self = this
this.mk.api.v3.music(
"/v1/me/library/playlist-folders/", {}, {
- fetchOptions: {
- method: "POST",
- body: JSON.stringify({
- attributes: { name: name }
- })
+ fetchOptions: {
+ method: "POST",
+ body: JSON.stringify({
+ attributes: {name: name}
+ })
+ }
}
- }
).then((res) => {
let playlist = (res.data.data[0])
self.playlists.listing.push({
@@ -3022,7 +3056,8 @@ const app = new Vue({
} else { //4xx rejected
getToken(2, '', '', id, lang, '');
}
- } catch (e) { }
+ } catch (e) {
+ }
}
req2.send();
}
@@ -3080,8 +3115,7 @@ const app = new Vue({
translation: ''
});
app.lyrics = preLrc.reverse();
- }
- catch (e) {
+ } catch (e) {
app.lyrics = "";
}
};
@@ -3123,6 +3157,7 @@ const app = new Vue({
function b64_to_utf8(str) {
return decodeURIComponent(escape(window.atob(str)));
}
+
const htmlDecode = (input) => {
const doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
@@ -3153,8 +3188,7 @@ const app = new Vue({
translation: ''
});
app.lyrics = preLrc.reverse();
- }
- catch (e) {
+ } catch (e) {
console.log(e)
app.loadNeteaseLyrics();
app.lyrics = "";
@@ -3205,15 +3239,15 @@ const app = new Vue({
line: "lrcInstrumental"
});
}
- preLrc.push({ startTime: start, endTime: end, line: element.textContent });
+ preLrc.push({startTime: start, endTime: end, line: element.textContent});
endTimes.push(end);
}
// first line dot
if (preLrc.length > 0)
- preLrc.unshift({ startTime: 0, endTime: preLrc[0].startTime, line: "lrcInstrumental" });
+ preLrc.unshift({startTime: 0, endTime: preLrc[0].startTime, line: "lrcInstrumental"});
} else {
for (let element of lyricsLines) {
- preLrc.push({ startTime: 9999999, endTime: 9999999, line: element.textContent });
+ preLrc.push({startTime: 9999999, endTime: 9999999, line: element.textContent});
}
}
this.lyrics = preLrc;
@@ -3281,17 +3315,17 @@ const app = new Vue({
console.debug(id, truekind, isLibrary)
try {
if (truekind.includes("artist")) {
- app.mk.setStationQueue({ artist: 'a-' + id }).then(() => {
+ app.mk.setStationQueue({artist: 'a-' + id}).then(() => {
app.mk.play()
})
} else if (truekind == "radioStations") {
- this.mk.setStationQueue({ url: raurl }).then(function (queue) {
+ this.mk.setStationQueue({url: raurl}).then(function (queue) {
MusicKit.getInstance().play()
});
} else {
this.mk.setQueue({
[truekind]: [id],
- parameters: { l: this.mklang }
+ parameters: {l: this.mklang}
}).then(function (queue) {
MusicKit.getInstance().play()
})
@@ -3332,7 +3366,7 @@ const app = new Vue({
if (item) {
app.mk.setQueue({
[item.attributes.playParams.kind ?? item.type]: item.attributes.playParams.id ?? item.id,
- parameters: { l: app.mklang }
+ parameters: {l: app.mklang}
}).then(function () {
app.mk.play().then(() => {
if (app.mk.shuffleMode == 1) {
@@ -3389,7 +3423,7 @@ const app = new Vue({
for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind]
if (ids.length > 0) {
- app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
+ app.mk.playLater({[kind + "s"]: itemsToPlay[kind]})
}
}
})
@@ -3410,22 +3444,22 @@ const app = new Vue({
let ids = itemsToPlay[kind]
if (ids.length > 0) {
if (app.mk.queue._itemIDs.length > 0) {
- app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] }).then(function () {
- ind += 1;
- console.log(ind, Object.keys(itemsToPlay).length)
- if (ind >= Object.keys(itemsToPlay).length) {
- app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id))
+ app.mk.playLater({[kind + "s"]: itemsToPlay[kind]}).then(function () {
+ ind += 1;
+ console.log(ind, Object.keys(itemsToPlay).length)
+ if (ind >= Object.keys(itemsToPlay).length) {
+ app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id))
+ }
}
- }
)
} else {
- app.mk.setQueue({ [kind + "s"]: itemsToPlay[kind] }).then(function () {
- ind += 1;
- console.log(ind, Object.keys(itemsToPlay).length)
- if (ind >= Object.keys(itemsToPlay).length) {
- app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id))
+ app.mk.setQueue({[kind + "s"]: itemsToPlay[kind]}).then(function () {
+ ind += 1;
+ console.log(ind, Object.keys(itemsToPlay).length)
+ if (ind >= Object.keys(itemsToPlay).length) {
+ app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.attributes.playParams.id ?? item.id))
+ }
}
- }
)
}
}
@@ -3438,7 +3472,7 @@ const app = new Vue({
if (truekind == "playlists" && (id.startsWith("p.") || id.startsWith("pl.u"))) {
app.mk.setQueue({
[item.attributes.playParams.kind ?? item.type]: item.attributes.playParams.id ?? item.id,
- parameters: { l: app.mklang }
+ parameters: {l: app.mklang}
}).then(function () {
app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(item.id) ?? 1).then(function () {
if ((app.showingPlaylist && app.showingPlaylist.id == id)) {
@@ -3478,7 +3512,7 @@ const app = new Vue({
} else {
this.mk.setQueue({
[truekind]: [id],
- parameters: { l: this.mklang }
+ parameters: {l: this.mklang}
}).then(function (queue) {
if (item && ((queue._itemIDs[childIndex] != item.id))) {
childIndex = queue._itemIDs.indexOf(item.id)
@@ -3512,6 +3546,18 @@ const app = new Vue({
friendlyTypes(type) {
// use switch statement to return friendly name for media types "songs,artists,albums,playlists,music-videos,stations,apple-curators,curators"
switch (type) {
+ case "library-songs":
+ return app.getLz('term.songs')
+ break;
+ case "library-artists":
+ return app.getLz('term.artists')
+ break;
+ case "library-albums":
+ return app.getLz('term.albums')
+ break;
+ case "library-playlists":
+ return app.getLz('term.playlists')
+ break;
case "song":
return app.getLz('term.songs')
break;
@@ -3590,10 +3636,17 @@ const app = new Vue({
with: ["serverBubbles", "lyricSnippet"],
"art[url]": "f",
"art[social-profiles:url]": "c"
- }, { includeResponseMeta: !0 }).then(function (results) {
+ }, {includeResponseMeta: !0}).then(function (results) {
results.data.results["meta"] = results.data.meta
self.search.resultsSocial = results.data.results
})
+
+ this.search.resultsLibrary = await app.mk.api.library.search(app.search.term, {
+ types: 'library-songs,library-albums,library-playlists,library-artists',
+ limit: 25,
+ offset: 0
+ })
+
},
async inLibrary(items = []) {
let types = []
@@ -3610,7 +3663,7 @@ const app = new Vue({
return type.type == this
}, type)
if (index == -1) {
- types.push({ type: type, id: [id] })
+ types.push({type: type, id: [id]})
} else {
types[index].id.push(id)
}
@@ -3746,6 +3799,9 @@ const app = new Vue({
if (app.mk.nowPlayingItem != null && app.mk.nowPlayingItem.attributes != null && app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url != '') {
this.currentArtUrlRaw = (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"] ?? '')
this.currentArtUrl = (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"] ?? '').replace('{w}', artworkSize).replace('{h}', artworkSize);
+ if (this.mk.nowPlayingItem._assets[0].artworkURL) {
+ this.currentArtUrl = this.mk.nowPlayingItem._assets[0].artworkURL
+ }
try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
} catch (e) {
@@ -3756,6 +3812,9 @@ const app = new Vue({
if (data != null && data !== "" && data.attributes != null && data.attributes.artwork != null) {
this.currentArtUrlRaw = (data["attributes"]["artwork"]["url"] ?? '')
this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', artworkSize).replace('{h}', artworkSize);
+ if (this.mk.nowPlayingItem._assets[0].artworkURL) {
+ this.currentArtUrl = this.mk.nowPlayingItem._assets[0].artworkURL
+ }
ipcRenderer.send('updateRPCImage', this.currentArtUrl ?? '');
try {
document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${this.currentArtUrl}")`);
@@ -3808,10 +3867,10 @@ const app = new Vue({
},
quickPlay(query) {
let self = this
- MusicKit.getInstance().api.search(query, { limit: 2, types: 'songs' }).then(function (data) {
+ MusicKit.getInstance().api.search(query, {limit: 2, types: 'songs'}).then(function (data) {
MusicKit.getInstance().setQueue({
song: data["songs"]['data'][0]["id"],
- parameters: { l: app.mklang }
+ parameters: {l: app.mklang}
}).then(function (queue) {
MusicKit.getInstance().play()
setTimeout(() => {
@@ -3968,10 +4027,10 @@ const app = new Vue({
setAirPlayCodeUI() {
this.modals.airplayPW = true
},
- sendAirPlaySuccess(){
+ sendAirPlaySuccess() {
notyf.success('Device paired successfully!');
},
- sendAirPlayFailed(){
+ sendAirPlayFailed() {
notyf.error('Device paring failed!');
},
windowFocus(val) {
@@ -3996,7 +4055,7 @@ const app = new Vue({
let data_type = this.mk.nowPlayingItem.playParams.kind
let item_id = this.mk.nowPlayingItem.attributes.playParams.id ?? this.mk.nowPlayingItem.id
let isLibrary = this.mk.nowPlayingItem.attributes.playParams.isLibrary ?? false
- let params = { "fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "t": "1" }
+ let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library", "t": "1"}
app.selectedMediaItems = []
app.select_selectMediaItem(item_id, data_type, 0, '12344', isLibrary)
let useMenu = "normal"
@@ -4015,36 +4074,36 @@ const app = new Vue({
app.love(app.mk.nowPlayingItem)
}
},
- {
- "icon": "./assets/feather/heart.svg",
- "id": "unlove",
- "active": true,
- "name": app.getLz('action.unlove'),
- "hidden": true,
- "action": function () {
- app.unlove(app.mk.nowPlayingItem)
- }
- },
- {
- "icon": "./assets/feather/thumbs-down.svg",
- "id": "dislike",
- "name": app.getLz('action.dislike'),
- "hidden": false,
- "disabled": true,
- "action": function () {
- app.dislike(app.mk.nowPlayingItem)
- }
- },
- {
- "icon": "./assets/feather/thumbs-down.svg",
- "id": "undo_dislike",
- "name": app.getLz('action.undoDislike'),
- "active": true,
- "hidden": true,
- "action": function () {
- app.unlove(app.mk.nowPlayingItem)
- }
- },
+ {
+ "icon": "./assets/feather/heart.svg",
+ "id": "unlove",
+ "active": true,
+ "name": app.getLz('action.unlove'),
+ "hidden": true,
+ "action": function () {
+ app.unlove(app.mk.nowPlayingItem)
+ }
+ },
+ {
+ "icon": "./assets/feather/thumbs-down.svg",
+ "id": "dislike",
+ "name": app.getLz('action.dislike'),
+ "hidden": false,
+ "disabled": true,
+ "action": function () {
+ app.dislike(app.mk.nowPlayingItem)
+ }
+ },
+ {
+ "icon": "./assets/feather/thumbs-down.svg",
+ "id": "undo_dislike",
+ "name": app.getLz('action.undoDislike'),
+ "active": true,
+ "hidden": true,
+ "action": function () {
+ app.unlove(app.mk.nowPlayingItem)
+ }
+ },
],
items: [
{
@@ -4076,7 +4135,7 @@ const app = new Vue({
"icon": "./assets/feather/radio.svg",
"name": app.getLz('action.startRadio'),
"action": function () {
- app.mk.setStationQueue({ song: app.mk.nowPlayingItem.id }).then(() => {
+ app.mk.setStationQueue({song: app.mk.nowPlayingItem.id}).then(() => {
app.mk.play()
app.selectedMediaItems = []
})
@@ -4222,7 +4281,7 @@ const app = new Vue({
});
},
fullscreen(flag) {
- this.fullscreenState = flag;
+ this.fullscreenState = flag;
if (flag) {
ipcRenderer.send('setFullScreen', true);
app.appMode = 'fullscreen';
@@ -4237,7 +4296,7 @@ const app = new Vue({
app.appMode = 'player';
}
},
- pip(){
+ pip() {
document.querySelector('video#apple-music-video-player').requestPictureInPicture()
// .then(pictureInPictureWindow => {
// pictureInPictureWindow.addEventListener("resize", () => {
@@ -4418,20 +4477,23 @@ const app = new Vue({
_playRadioStream(e) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = process;
- xhr.open("GET", e , true);
+ xhr.open("GET", e, true);
xhr.send();
let self = this
+
function process() {
- if (xhr.readyState == 4) {
- let sources = xhr.responseText.match(/^(?!#)(?!\s).*$/mg).filter(function(element){return (element);});
- // Load first source
- let src = sources[0];
- app.mk._services.mediaItemPlayback._currentPlayer._playAssetURL(src, false)
- }
+ if (xhr.readyState == 4) {
+ let sources = xhr.responseText.match(/^(?!#)(?!\s).*$/mg).filter(function (element) {
+ return (element);
+ });
+ // Load first source
+ let src = sources[0];
+ app.mk._services.mediaItemPlayback._currentPlayer._playAssetURL(src, false)
+ }
}
}
}
})
-export { app }
+export {app}
diff --git a/src/renderer/main/vuex-store.js b/src/renderer/main/vuex-store.js
index fb2b774f..bb608759 100644
--- a/src/renderer/main/vuex-store.js
+++ b/src/renderer/main/vuex-store.js
@@ -6,6 +6,14 @@ const store = new Vuex.Store({
// recentlyAdded: ipcRenderer.sendSync("get-library-recentlyAdded"),
// playlists: ipcRenderer.sendSync("get-library-playlists")
},
+ pageState: {
+ recentlyAdded: {
+ loaded: false,
+ nextUrl: null,
+ items: [],
+ size: "normal"
+ }
+ },
artwork: {
playerLCD: ""
}
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 676e93dc..93b6d60f 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -4,6 +4,7 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
+@import url("less/appvars.less");
@import url("less/bootstrap-vue.min.less");
@import url("less/ameframework.less");
@import url("less/codicon.css");
@@ -29,7 +30,8 @@
--selected: rgb(130 130 130 / 30%);
--selected-click: rgb(80 80 80 / 30%);
--hover: rgb(200 200 200 / 10%);
- --keyColor: #fa586a;
+ // --keyColor: #fa586a;
+ --keyColor: @keyColor;
--keyColor-rgb: 250, 88, 106;
--keyColor-rollover: #ff8a9c;
--keyColor-rollover-rgb: 255, 138, 156;
@@ -46,6 +48,7 @@
--textColor: #eee;
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
--glassFilter: blur(16px) saturate(180%);
+ --sidebarWidth: 260px;
}
*:focus-visible {
@@ -164,7 +167,7 @@ body.notransparency::before {
--chromeHeight: calc(var(--chromeHeight1) + var(--chromeHeight2));
width: 100%;
height: 100%;
- background: var(--color1);
+ background: transparent;
color: var(--textColor);
user-select: none;
margin: 0 auto;
@@ -174,23 +177,7 @@ body.notransparency::before {
&.simplebg {
background: #0e0e0e;
-
- &::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 0.5;
- z-index: 0;
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}
-
- .app-chrome {
- z-index: 1;
- }
- }
}
.bgGradientMaterial-base {
@@ -383,16 +370,19 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex-direction: column;
opacity: 1;
overflow: hidden;
+ background-color: rgba(20 20 20 / .7);
}
#app-sidebar {
- /* background-color: var(--color1); */
height: 100%;
- width: 260px;
+ width: var(--sidebarWidth);
display: flex;
flex-direction: column;
flex: 0 0 auto;
position: relative;
+ background: linear-gradient(180deg, var(--baseColorMix) calc(var(--chromeHeight1) + 1px), var(--sidebarColorMix) calc(var(--chromeHeight1) + 1px));
+ max-width: var(--sidebarWidth);
+ padding-top: var(--chromeHeight1);
}
#app-navbar {
@@ -407,16 +397,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
#app-content {
- background-color: var(--color3);
+ --navigationBarHeight: var(--chromeHeight1);
+ background-color: var(--baseColorMix);
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-y: overlay;
overflow-x: hidden;
- border-radius: 10px 0px 0px 0px;
- border-left: 1px solid rgb(0 0 0 / 25%);
- border-top: 1px solid rgb(0 0 0 / 25%);
+ border-radius: 0;
+ border-left: 1px solid var(--baseColorMix);
+ // border-top: 1px solid rgb(0 0 0 / 25%);
position: relative;
+
+ &::-webkit-scrollbar-track-piece {
+ margin-top: var(--chromeHeight1);
+ }
}
.app-drawer {
@@ -424,14 +419,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex: 0 0 auto;
position: absolute;
right: 16px;
- top: 3%;
background: var(--color2);
border-radius: 12px;
z-index: 10;
- height: 94%;
backdrop-filter: blur(40px) saturate(180%);
box-shadow: var(--ciderShadow-Generic);
overflow: hidden;
+ height: calc(calc(100% - 6%) - var(--chromeHeight1));
+ top: calc(var(--chromeHeight1) + 3%);
.bgArtworkMaterial {
display: none;
@@ -453,15 +448,16 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
width: 100%;
padding: 6px;
border-radius: 6px;
- border: 1px solid rgb(200 200 200 / 10%);
+ border: 1px solid rgba(100, 100, 100, 0.35);
+ border-top: 1px solid rgba(100, 100, 100, 0.5);
+ border-bottom: 1px solid rgb(60 60 60 / 62%);
font-family: inherit;
font-size: 14px;
- background: rgb(100 100 100 / 25%);
- color: rgb(200 200 200);
+ background: #1e1e1e99;
+ color: #c8c8c8;
font-weight: 500;
padding-left: 32px;
position: relative;
- filter: contrast(0.1);
}
.search-input:focus {
@@ -531,6 +527,40 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
display: flex;
}
}
+
+ &.collapseTab {
+ display:flex;
+ padding:6px;
+ border:0;
+ >button {
+ appearance: none;
+ width: 100%;
+ position: relative;
+ padding-left: 40px;
+ text-align: left;
+ font-family: inherit;
+ &:hover {
+ background-color: var(--selected);
+ }
+ &:active {
+ background-color: var(--selected-click);
+ }
+ &:after {
+ content: '';
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 46px;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ font-weight: bold;
+ font-size: 1em;
+ font-family: "codicon";
+ }
+ }
+ }
}
.app-sidebar-button {
@@ -633,7 +663,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
#cmenu() {
.container {
position: absolute;
- width: 100%;
+ left: 0px;
+ width: var(--sidebarWidth);
+ max-width: var(--sidebarWidth);
padding: 10px;
z-index: 1;
}
@@ -690,7 +722,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.usermenu-container {
- top: 0px;
+ top: var(--chromeHeight1);
z-index: 200001 !important;
#cmenu.container();
@@ -874,36 +906,61 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
cursor: default;
}
-.app-sidebar-item.active::after {
- content: '';
- width: 4px;
- height: 16px;
- display: block;
- position: absolute;
- top: calc(100% - 72%);
- border-radius: 10px;
- left: 0px;
- background: var(--keyColor);
- // animation: expandIndicator .2s cubic-bezier(0.25, 1, 0.5, 1);
-
- // @keyframes expandIndicator {
- // 0% {
- // transform: scaleY(0);
- // }
-
- // 100% {
- // transform: scaleY(1);
- // }
- // }
-}
-
.app-chrome {
- background: var(--color1);
+ background-color: var(--baseColorMix);
+ box-shadow: 0px 3px 6px rgb(20 20 20 / 12%),
+ 0px 1px 0px 0px rgb(200 200 200 / 12%);
width: 100%;
height: var(--chromeHeight1);
display: flex;
flex-direction: row;
-webkit-app-region: drag;
+ z-index: 4;
+
+ &:not(.chrome-bottom) {
+ // box-shadow: 0px 0px
+ z-index: 16;
+ position: fixed;
+ backdrop-filter: var(--glassFilter);
+
+ .app-chrome--center {
+ flex:1;
+ }
+}
+
+.top-nav-group {
+ background: var(--baseColor);
+ border: 1px solid lighten(@baseColor, 8);
+ border-radius: 10px;
+ display: flex;
+ height: 32px;
+
+ .app-sidebar-item {
+ background-color: var(--baseColor);
+ border-radius: 10px!important;
+ border:0px;
+ min-width: 120px;
+ padding:6px;
+ justify-content: center;
+ align-items: center;
+ margin: 0px;
+ height: 100%;
+
+ &:hover {
+ background-color: lighten(@baseColor, @colorMixRate * 5);
+ }
+
+ &.active {
+ background-color: lighten(@baseColor, @colorMixRate * 5);
+ }
+
+ &.md-btn-primary {
+ box-shadow: 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
+ background-color: lighten(@baseColor, @colorMixRate * 5);
+ z-index: 1;
+ }
+ }
+}
.vdiv {
width: 1px;
@@ -959,16 +1016,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
align-items: center;
-webkit-app-region: no-drag;
height: auto;
-}
-.app-chrome .app-chrome-item.generic {
- width: 50px;
- opacity: 0.70;
-}
-.app-chrome .app-chrome-item.volume {
- width: 100px;
- margin-right: 6px;
+ &.generic {
+ width: 50px;
+ opacity: 0.70;
+ }
+
+ &.volume {
+ width: 100px;
+ margin-right: 6px;
+ }
+
+ &.search {
+ margin-right: 6px;
+ }
}
.volume-button {
@@ -1442,8 +1504,11 @@ div[data-type="musicVideo"] .info-rect .title::before {
}
.app-navigation {
+ background : transparent;
+ align-items : center;
+ justify-content: center;
background: var(--color1);
- height: calc(100% - var(--chromeHeight));
+ height: calc(100% - var(--chromeHeight2));
width: 100%;
display: flex;
position: relative;
@@ -1579,7 +1644,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow-x: hidden;
display: flex;
flex-flow: column;
- font-family: 'Inter', 'Noto Sans JP', 'Source Han Sans SC', 'Source Han Sans HK', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
+ font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.lyric-body .no-lyrics {
@@ -1613,6 +1678,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.lyric-line.active .verse.verse-active {
opacity: 1;
+ transition: opacity 0.35s var(--appleEase);
}
.lyric-line:hover {
@@ -1638,7 +1704,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
opacity: 1;
transform: scale(1);
/*background: var(--keyColor);*/
- transition: transform 0.2s var(--appleEase);
+ transition: transform 0.2s var(--appleEase), opacity 0.35s var(--appleEase);
}
.lyric-line:not(.active) {
@@ -1683,7 +1749,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.lyrics-translation {
font-size: 1.6rem;
font-weight: 450;
- font-family: 'Inter', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans HK', 'Noto Sans KR', sans-serif;
+ font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
filter: contrast(0.5);
}
@@ -1909,7 +1975,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: rgba(200, 200, 200, 0.05);
border-radius: 10px;
padding: var(--contentInnerPadding);
- box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
margin-top: 16px;
@@ -1917,6 +1982,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: flex;
flex-flow: wrap;
justify-content: center;
+ .cd-mediaitem-square-container{
+ align-items: center;
+ }
.cd-mediaitem-square {
width: 220px;
height: 260px;
@@ -1930,12 +1998,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
max-width: 240px;
flex-grow: 1;
}
+
+ &.collection-list-square {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(200px, 1fr));
+
+ // screen size > 1200px
+ @media screen and (min-width: 1500px) {
+ grid-template-columns: repeat(6, minmax(200px, 1fr));
+ }
+ // less than 1100px
+ @media screen and (max-width: 1150px) {
+ grid-template-columns: repeat(3, minmax(200px, 1fr));
+ }
+ }
}
}
.cd-mediaitem-square-container{
display: inline-flex;
flex-direction: column;
+ justify-content: center;
}
.reasonSP{
@@ -2755,7 +2838,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
#micaEffect {
opacity:1;
// animation: micaEnter 1s ease-in-out forwards;
- filter: brightness(0.5);
+ filter: brightness(1) saturate(320%);
@keyframes micaEnter {
0% {
opacity: 0;
@@ -2781,6 +2864,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
// Modular
.modular-fs {
+ .app-chrome.chrome-bottom {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ z-index: 14!important;
+ backdrop-filter: var(--glassFilter);
+ }
+ .app-navigation {
+ height: 100%;
+ }
.app-drawer {
width: 100%;
right: 0px;
@@ -2862,6 +2955,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
transform: translateY(20px);
}
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity .15s var(--appleEase);
+}
+
+.fade-enter,
+.fade-leave-to {
+ opacity: 0;
+}
+
.modal-enter-active,
.modal-leave-active {
transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
@@ -2943,6 +3046,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
opacity: 0;
}
+.sidebartransition-enter-active,
+.sidebartransition-leave-active {
+ transition: margin-left .35s var(--appleEase);
+}
+
+.sidebartransition-enter,
+.sidebartransition-leave-to {
+ margin-left: calc(var(--sidebarWidth) * -1);
+}
.drawertransition-enter-active,
.drawertransition-leave-active {
@@ -3056,7 +3168,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
}
#app.twopanel #apple-music-video-container {
- top: var(--chromeHeight1);
+ top:0;
bottom: unset;
}
.inactive {
@@ -3503,4 +3615,4 @@ body[platform='darwin'] {
@import url("less/linux.less");
@import url("less/compact.less");
@import url("less/directives.less");
-@import url("less/macosemu.less");
\ No newline at end of file
+@import url("less/macosemu.less");
diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
index c0e1046f..ed10c736 100644
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@@ -1,4 +1,4 @@
-
+
<%- include('../svg/chevron-left.svg') %>
@@ -24,11 +24,6 @@
<% } %>
-
-
-
- <%- include('../pages/library-recentlyadded') %>');
-
diff --git a/src/renderer/views/app/app-navigation.ejs b/src/renderer/views/app/app-navigation.ejs
index 58833a1c..e937bc99 100644
--- a/src/renderer/views/app/app-navigation.ejs
+++ b/src/renderer/views/app/app-navigation.ejs
@@ -1,5 +1,132 @@
- <%- include("sidebar") %>
+
+
+
+
+ <%- include("sidebar") %>
+
<%- include("app-content") %>
-
-
-
-
-
-
-
-
-
- <%- include('../svg/chevron-left.svg') %>
+
+
+
+
+
+
+
+
+
+
+ <%- include('../svg/chevron-left.svg') %>
+
+
+
+
+ <%- include('../svg/chevron-right.svg') %>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ mk.nowPlayingItem["attributes"]["name"] }}
+
+
+ {{ mk.nowPlayingItem["attributes"]["artistName"] }}
+
+
+ {{
+ mk.nowPlayingItem["attributes"]["albumName"]
+ ? mk.nowPlayingItem["attributes"]["albumName"]
+ : ""
+ }}
+
+
+
+
+ {{ $root.getLz("term.miniplayer") }}
-
-
-
- <%- include('../svg/chevron-right.svg') %>
+
+ {{ $root.getLz("term.fullscreenView") }}
+
-
-
-
-
-
-
+
+
+
-
-
+
+ {{ mk.nowPlayingItem["attributes"]["name"] }}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ mk.nowPlayingItem["attributes"]["name"] }}
-
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
-
- {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
- (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
-
-
-
- {{ $root.getLz("term.miniplayer") }}
- {{ $root.getLz("term.fullscreenView") }}
-
-
-
-
-
-
- {{ mk.nowPlayingItem["attributes"]["name"] }}
-
-
-
-
-
- {{ mk.nowPlayingItem["attributes"]["artistName"] }}
-
-
-
{{"—"}}
- {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
- (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
-
-
-
-
-
-
-
{{ convertTime(getSongProgress()) }}
-
{{ convertTime(mk.currentPlaybackDuration) }}
-
-
-
-
{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
- @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
- :max="mk.currentPlaybackDuration" :value="getSongProgress()">
-
-
-
-
-
-
-
-
+
+
+
+ {{ mk.nowPlayingItem["attributes"]["artistName"] }}
-
-
-
-
-
+
+
+
+
{{ convertTime(getSongProgress()) }}
+
+ {{ convertTime(mk.currentPlaybackDuration) }}
+
+
+
+
{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+ @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+ :max="mk.currentPlaybackDuration"
+ :value="getSongProgress()"
+ />
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/views/app/panels.ejs b/src/renderer/views/app/panels.ejs
index a9bc17b5..972d0546 100644
--- a/src/renderer/views/app/panels.ejs
+++ b/src/renderer/views/app/panels.ejs
@@ -13,9 +13,6 @@
-
-
-
diff --git a/src/renderer/views/app/sidebar.ejs b/src/renderer/views/app/sidebar.ejs
index 2f7d013d..dacff2c8 100644
--- a/src/renderer/views/app/sidebar.ejs
+++ b/src/renderer/views/app/sidebar.ejs
@@ -1,245 +1,303 @@
-
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index b059aed1..16bfbffc 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -8,7 +8,7 @@
{{item?.meta?.reason?.stringForDisplay ?? ''}}
diff --git a/src/renderer/views/pages/audiolabs.ejs b/src/renderer/views/pages/audiolabs.ejs
index 7ef077b5..18ff72f9 100644
--- a/src/renderer/views/pages/audiolabs.ejs
+++ b/src/renderer/views/pages/audiolabs.ejs
@@ -198,14 +198,6 @@
return name;
}
},
- toggleSpatial: function () {
- if (app.cfg.audio.maikiwiAudio.spatial) {
- CiderAudio.spatialOn()
- CiderAudio.hierarchical_loading();
- } else {
- CiderAudio.spatialOff()
- }
- },
toggleMaikiwiSpatial: function () {
if (app.cfg.audio.maikiwiAudio.spatial === true) {
CiderAudio.spatialOn()
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 2fe6faf2..cb21bba6 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -54,9 +54,16 @@
class="content"
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
@click="openInfoModal()">
-
+ {{data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard}}
+
+
+
+
+
{{ getLz("oobe.amupsell.text") }}
+
+
+
+
+
+
+
+
+
{{ getLz("oobe.intro.text") }}
+
+
+
+
+
+
+
+
+
{{ getLz("oobe.general.text") }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{getLz("oobe.visual.layout.text")}}
+
+
+
+
+
+
+
+
+
+
+
{{ getLz("oobe.audio.text") }}
+
+
+
+
+ {{getLz('settings.option.audio.enableAdvancedFunctionality')}}
+
+ {{getLz('settings.option.audio.enableAdvancedFunctionality.description')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index 292f1a62..966404e8 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -1,82 +1,105 @@