summaryrefslogtreecommitdiff
path: root/app/ui/settings.php
blob: 34cd095d33f43042aff3c19142f6b4e0c17a3fd5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<?php header("X-Frame-Options: SAMEORIGIN"); require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php"; ?>
<!doctype html>
<html lang="en">
<head>
    <script>
        if (typeof window.parent.openModal === "undefined") {
            location.href = "/app/#/settings";
        }
    </script>
    <meta charset="UTF-8">
    <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>
    <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">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/localforage.min.js"></script>
    <script src="/assets/fuse.min.js"></script>
    <script src="/assets/js/shortcuts.js"></script>
    <link id="native-css" href="/assets/native.css" rel="stylesheet" disabled>
</head>
<body class="crossplatform">
    <script src="/assets/js/common.js"></script>
    <div class="container">
        <br>
        <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 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;
                function saveDS() {
                    localStorage.setItem("data-saving", document.getElementById("data-saving").checked ? "true" : "false");
                    window.parent.location.reload();
                }
            </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">
                    <label class="form-check-label" for="desktop-notification">Display notification when song changes</label>
                    <div class="text-muted small">If this is enabled, a desktop notification will be shown when the song being played changes, containing information about the new song. This requires having notifications enabled in your system settings.</div>
                </div>
                <script>
                    if (localStorage.getItem("desktop-notification") === "true") document.getElementById("desktop-notification").checked = true;
                    function saveDN() {
                        localStorage.setItem("desktop-notification", document.getElementById("desktop-notification").checked ? "true" : "false");
                    }
                </script>
            <?php endif; ?>

            <?php if (str_contains($_SERVER['HTTP_USER_AGENT'], "MistNative/")): ?>
                <div class="form-check form-switch" style="margin-top: 10px;">
                    <input onchange="saveRP();" class="form-check-input" type="checkbox" role="switch" id="rich-presence">
                    <label class="form-check-label" for="desktop-notification">Show the song you are listening to on Discord</label>
                    <div class="text-muted small">Using Discord Rich Presence, Mist can display on Discord the song you are currently listening to. You need to have the Discord desktop app installed and running on your computer for this to work.</div>
                </div>
                <script>
                    if (localStorage.getItem("rich-presence") === "true") document.getElementById("rich-presence").checked = true;
                    function saveRP() {
                        localStorage.setItem("rich-presence", document.getElementById("rich-presence").checked ? "true" : "false");

                        if (localStorage.getItem("rich-presence") === "false") {
                            window.parent.discordRichPresenceData = null;
                        } else {
                            window.parent.discordRichPresenceData = {
                                largeImageKey: "logo"
                            };
                        }
                    }
                </script>
            <?php endif; ?>

            <hr>
            <?php if (str_contains($_SERVER['HTTP_USER_AGENT'], "MistNative/")): ?>
            <a onclick="window.parent.MistNative.about();" href="#">About Mist</a>
            <?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") ?>)<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>
</html>