Updated 35 files and added 28 files (automated)

1 files changed, 46 insertions, 4 deletions

diff --git a/app/ui/settings.php b/app/ui/settings.php
index e6dc9ba..34cd095 100644
--- a/app/ui/settings.php
+++ b/app/ui/settings.php
@@ -11,7 +11,7 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>settings</title>
+    <title>Settings</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="/assets/dark.css" rel="stylesheet">
     <link href="/assets/styles.css" rel="stylesheet">
@@ -25,12 +25,12 @@
     <script src="/assets/js/common.js"></script>
     <div class="container">
         <br>
-        <h2 style="margin-top: 10px; margin-bottom: 20px; margin-left: 10px;">Settings</h2>
+        <h2 class="desktop-title" style="margin-top: 10px; margin-bottom: 20px; margin-left: 10px;">Settings</h2>
         <div style="margin-left: 10px;">
             <div class="form-check form-switch">
                 <input onchange="saveDS();" class="form-check-input" type="checkbox" role="switch" id="data-saving">
                 <label class="form-check-label" for="data-saving">Enable data saving</label>
-                <div class="text-muted small">Data saving disables playing lossless and high-resolution audio. Instead, you will get 256 kbps AAC-encoded audio, which is high efficient. If you use Bluetooth headphones, the difference should be unnoticeable.</div>
+                <div class="text-muted small">Data saving disables playing lossless and high-resolution audio. Instead, you will get 256 kbps AAC-encoded audio, which is highly efficient. If you use Bluetooth headphones, the difference should be unnoticeable.</div>
             </div>
             <script>
                 if (localStorage.getItem("data-saving") === "true") document.getElementById("data-saving").checked = true;
@@ -40,6 +40,35 @@
                 }
             </script>
 
+            <div class="form-check form-switch" style="margin-top: 10px;">
+                <input onchange="saveN();" class="form-check-input" type="checkbox" role="switch" id="normalize">
+                <label class="form-check-label" for="normalize">Normalize loudness</label>
+                <div class="text-muted small">Normalizing adjusts the volume each song is played at to be the same level for every song. This will avoid you having to change your device's volume between each track, and should typically not be turned off. Powered by ReplayGain.</div>
+            </div>
+            <script>
+                if (localStorage.getItem("normalize") === "true") document.getElementById("normalize").checked = true;
+                function saveN() {
+                    localStorage.setItem("normalize", document.getElementById("normalize").checked ? "true" : "false");
+                    window.parent.location.reload();
+                }
+            </script>
+
+            <div class="form-check form-switch" id="stella" style="display: none;margin-top: 10px;">
+                <input onchange="saveST();" class="form-check-input" type="checkbox" role="switch" id="enable-stella">
+                <label class="form-check-label" for="enable-stella">Mist Stella</label>
+                <div class="text-muted small">Enjoy your music is a unique way thanks to the Mist Stella spatial audio technology. Stella makes your music feel like it's coming from all around you, giving you a concert-like experience. Note that Stella uses slightly more bandwidth than lossless streaming.</div>
+            </div>
+            <script>
+                if (localStorage.getItem("show-stella-settings") === "true") document.getElementById("stella").style.display = "";
+
+                if (localStorage.getItem("enable-stella") === "true") document.getElementById("enable-stella").checked = true;
+                function saveST() {
+                    localStorage.setItem("enable-stella", document.getElementById("enable-stella").checked ? "true" : "false");
+                    localStorage.setItem("show-stella-settings", "true");
+                    window.parent.location.reload();
+                }
+            </script>
+
             <?php if (str_contains($_SERVER['HTTP_USER_AGENT'], "MistNative/")): ?>
                 <div class="form-check form-switch" style="margin-top: 10px;">
                     <input onchange="saveDN();" class="form-check-input" type="checkbox" role="switch" id="desktop-notification">
@@ -82,8 +111,21 @@
             <?php else: ?>
             <div class="text-muted">
                 <img class="icon" src="/assets/logo-transparent.svg" style="vertical-align: middle; filter: grayscale(1) invert(1); width: 32px; height: 32px;" alt="">
-                <span style="vertical-align: middle;">Mist version <?= str_replace("|", " ", file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/version")) ?> (build <?= trim(file_exists("/opt/spotify/build.txt") ? file_get_contents("/opt/spotify/build.txt") : "trunk") ?>) · © <?= date('Y') ?> Equestria.dev</span>
+                <span style="vertical-align: middle;">Mist version <?= str_replace("|", " ", file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/version")) ?> (build <?= trim(file_exists("/opt/spotify/build.txt") ? file_get_contents("/opt/spotify/build.txt") : "trunk") ?>)<span id="copyright-separator-desktop"> · </span><span id="copyright-separator-mobile"><br></span>© <?= date('Y') ?> Equestria.dev</span>
             </div>
+            <style>
+                @media (min-width: 768px) {
+                    #copyright-separator-mobile {
+                        display: none;
+                    }
+                }
+
+                @media (max-width: 767px) {
+                    #copyright-separator-desktop {
+                        display: none;
+                    }
+                }
+            </style>
             <?php endif; ?>
         </div>
 </body>