diff options
Diffstat (limited to 'app/ui/listing.php')
| -rw-r--r-- | app/ui/listing.php | 244 |
1 files changed, 139 insertions, 105 deletions
diff --git a/app/ui/listing.php b/app/ui/listing.php index 9ad227f..d32525b 100644 --- a/app/ui/listing.php +++ b/app/ui/listing.php @@ -50,7 +50,15 @@ if (!$presetList) { <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>listing</title> + <title> + <?php if (isset($favoritesList) && !$hasAlbum): ?> + Favorites + <?php elseif ($hasAlbum): ?> + <?= $albums[$_GET["a"]]["title"] ?> + <?php else: ?> + Songs + <?php endif; ?> + </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"> @@ -60,130 +68,156 @@ if (!$presetList) { <script src="/assets/fuse.min.js"></script> <link id="native-css" href="/assets/native.css" rel="stylesheet" disabled> </head> -<body class="crossplatform"> +<body class="crossplatform has-navigation"> + <div id="ui-navigation" style="z-index: 999; background-color: rgba(255, 255, 255, .75); position: fixed; top: 0; left: 0; right: 0; height: 32px; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);"> + <div style="display: grid; grid-template-columns: max-content 1fr max-content; height: 100%;" class="container"> + <div id="ui-back-button" onclick="history.back();" style="display: flex; align-items: center; justify-content: center; text-align: center;<?php if (!$hasAlbum): ?>pointer-events: none; opacity: 0;<?php endif; ?>"> + <img src="/assets/icons/back.svg" alt="Back" class="icon"> + </div> + <div style="display: flex; align-items: center; justify-content: center; text-align: center;"><b><?php if (!$hasAlbum && !isset($favoritesList)): ?>Songs<?php endif; ?></b></div> + <?php if (!$hasAlbum): ?> + <div> + <input placeholder="Filter" id="filter" class="form-control" style="width: 256px;height: 32px;border-top: none;" onchange="updateFilter();" onkeyup="updateFilter();"> + </div> + <?php endif; ?> + </div> + </div> <script src="/assets/js/common.js"></script> <?php if ($hasAlbum): ?> <script> window.parent.location.hash = "#/albums/<?= $_GET["a"] ?>"; </script> <?php endif; ?> - <div id="content" style="position: fixed; inset: 0; z-index: 10; overflow: auto; backdrop-filter: blur(50vw); -webkit-backdrop-filter: blur(50vw);"> - <div class="container"> - <br> - <?php if (!$hasAlbum && !isset($favoritesList)): ?> - <h2 style="margin-top: 10px; margin-bottom: 20px; margin-left: 10px;">Songs<input placeholder="Filter" id="filter" class="form-control" style="width: 256px; float: right;" onchange="updateFilter();" onkeyup="updateFilter();"></h2> - <?php elseif (isset($favoritesList)): ?> - <div id="album-info" style="display: grid; grid-template-columns: 20vw 1fr; margin-top: 10px; margin-left: 10px; grid-gap: 30px;"> - <img id="album-info-art" alt="" src="/assets/favorites.svg" style="height: 20vw; width: 20vw; border-radius: .75vw;"> - <div id="album-info-text" style="padding: 30px 0; display: grid; grid-template-rows: 1fr max-content;"> - <div><h2>Favorites</h2> - <h2 style="opacity: .5;"><?= $_PROFILE["name"] ?></h2> - <div style="opacity: .5;"> - Click on the heart icon near a song to add it to this list. - </div> - </div> - <div id="album-info-buttons"> - <a class="btn btn-primary <?= count(array_keys($list)) <= 0 ? "disabled" : "" ?>" onclick="window.parent.playSong('<?= array_keys($list)[0] ?? '' ?>', 'favorites');" style="width: 100px;">Play</a> - <a class="btn btn-outline-primary <?= count(array_keys($list)) <= 0 ? "disabled" : "" ?>" style="width: 100px;" onclick="window.parent.shuffleList('favorites');">Shuffle</a> - <input placeholder="Filter" id="filter" class="form-control" style="width: 256px; float: right;" onchange="updateFilter();" onkeyup="updateFilter();"> + <div class="container"> + <br> + <?php if (isset($favoritesList) && !$hasAlbum): ?> + <div id="album-info" style="display: grid; grid-template-columns: 20vw 1fr; margin-top: 10px; margin-left: 10px; grid-gap: 30px;"> + <img id="album-info-art" alt="" src="/assets/favorites.svg" style="height: 20vw; width: 20vw; border-radius: .75vw;"> + <div id="album-info-text" style="padding: 30px 0; display: grid; grid-template-rows: 1fr max-content;"> + <div><h2>Favorites</h2> + <h2 style="opacity: .5;"><?= $_PROFILE["name"] ?></h2> + <div style="opacity: .5;"> + Click on the heart icon near a song to add it to this list. </div> </div> + <div id="album-info-buttons"> + <a class="btn btn-primary <?= count(array_keys($list)) <= 0 ? "disabled" : "" ?>" onclick="window.parent.playSong('<?= array_keys($list)[0] ?? '' ?>', 'favorites');" style="width: 100px;">Play</a> + <a class="btn btn-outline-primary <?= count(array_keys($list)) <= 0 ? "disabled" : "" ?>" style="width: 100px;" onclick="window.parent.shuffleList('favorites');">Shuffle</a> + </div> </div> - <?php else: ?> - <div id="album-info" style="display: grid; grid-template-columns: 20vw 1fr; margin-top: 10px; margin-left: 10px; grid-gap: 30px;"> - <img id="album-info-art" alt="" src="/assets/content/<?= $_GET["a"] ?>.jpg" style="height: 20vw; width: 20vw; border-radius: .75vw;"> - <div id="album-info-text" style="padding: 30px 0; display: grid; grid-template-rows: 1fr max-content;"> - <div><h2><?= $albums[$_GET["a"]]["title"] ?></h2> - <h2 style="opacity: .5;"><?= $albums[$_GET["a"]]["artist"] ?></h2> - <div style="opacity: .5;"> + </div> + <?php elseif ($hasAlbum): + + $albums[$_GET["a"]]["stella"] = false; + + foreach ($albums[$_GET["a"]]["tracks"] as $track) { + if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/assets/content/" . $track . ".stella")) { + $albums[$_GET["a"]]["stella"] = true; + } + } + + ?> + <div id="album-info" style="display: grid; grid-template-columns: 20vw 1fr; margin-top: 10px; margin-left: 10px; grid-gap: 30px;"> + <img id="album-info-art" alt="" src="/assets/content/<?= $_GET["a"] ?>.jpg" style="height: 20vw; width: 20vw; border-radius: .75vw;"> + <div id="album-info-text" style="padding: 30px 0; display: grid; grid-template-rows: 1fr max-content;"> + <div><h2><?= $albums[$_GET["a"]]["title"] ?></h2> + <h2 style="opacity: .5;"><?= $albums[$_GET["a"]]["artist"] ?></h2> + <div style="opacity: .5;"> + <?php if (isset($albums[$_GET["a"]]["date"]) && $albums[$_GET["a"]]["date"] > 0): ?> <?= $albums[$_GET["a"]]["date"] ?> - <?php if ($albums[$_GET["a"]]["hiRes"]): ?> - · <img src='/assets/icons/lossless.svg' alt='' class='icon player-badge-icon'>Hi-Res Lossless - <?php endif; ?> - </div> - </div> - <div id="album-info-buttons" <?php if (!in_array($_GET["a"], $library)): ?>class="nolibrary"<?php endif; ?>> - <?php if (in_array($_GET["a"], $library)): ?> - <a class="btn btn-primary" onclick="window.parent.playSong('<?= array_keys($list)[0] ?>', 'album:<?= $_GET["a"] ?>');" style="width: 100px;">Play</a> - <a class="btn btn-outline-primary" style="width: 100px;" onclick="window.parent.shuffleList('album:<?= $_GET["a"] ?>');">Shuffle</a> - <?php else: ?> - <a class="btn btn-primary" onclick="window.addToLibrary();" id="library-button" style="width: 200px;">Add to library</a> - <?php endif ?> + <?php if ($albums[$_GET["a"]]["hiRes"] || $albums[$_GET["a"]]["stella"]): ?> · <?php endif; ?> + <?php endif; if ($albums[$_GET["a"]]["hiRes"]): ?> + <img src='/assets/icons/lossless.svg' alt='' class='icon player-badge-icon'>Hi-Res Lossless + <?php if ($albums[$_GET["a"]]["stella"]): ?><span class="mist-stella"> · </span><?php endif; ?> + <?php endif; if ($albums[$_GET["a"]]["stella"]): ?> + <span class="mist-stella"><img src='/assets/icons/stella.svg' alt='' style="height: 14.4px !important; width: 14.4px !important;" class='icon player-badge-icon'>Mist Stella</span> + <?php endif; ?> </div> </div> - </div> - <?php endif; ?> - <?php displayList($list, $hasAlbum); ?> - <div class="list-group" style="margin-left: 10px; margin-top: 20px; display: none;" id="search-results"></div> - <?php if (count($list) === 0): ?> - <div class="text-muted" style="position: fixed; display: flex; inset: 0; align-items: center; justify-content: center;"> - <div style="text-align: center;"> - <img class="icon" src="/assets/logo-transparent.svg" style="filter: grayscale(1) invert(1); width: 96px; height: 96px;" alt=""> - <h4 style="opacity: .75;">Add music to your library</h4> - <p style="max-width: 300px; margin-left: auto; margin-right: auto;">Browse millions of songs and collect your favorites here.</p> - <div class="btn btn-primary" onclick="window.parent.openUI('explore');">Browse Mist</div> + <div id="album-info-buttons" <?php if (!in_array($_GET["a"], $library)): ?>class="nolibrary"<?php endif; ?>> + <?php if (in_array($_GET["a"], $library)): ?> + <a class="btn btn-primary" onclick="window.parent.playSong('<?= array_keys($list)[0] ?>', 'album:<?= $_GET["a"] ?>');" style="width: 100px;">Play</a> + <a class="btn btn-outline-primary" style="width: 100px;" onclick="window.parent.shuffleList('album:<?= $_GET["a"] ?>');">Shuffle</a> + <?php else: ?> + <a class="btn btn-primary" onclick="window.addToLibrary();" id="library-button" style="width: 200px;">Add to library</a> + <?php endif ?> </div> </div> - <?php endif; ?> - <?php if ($hasAlbum && in_array($_GET["a"], $library)): ?> - <br> - <div><a class="link" id="library-button" href="#" onclick="removeFromLibrary();">Remove from library</a></div> - <?php endif; ?> + </div> + <?php endif; ?> + <?php displayList($list, $hasAlbum); ?> + <div class="list-group" style="margin-left: 10px; margin-top: 20px; display: none;" id="search-results"></div> + <?php if (count($list) === 0 && !isset($favoritesList)): ?> + <div class="text-muted" style="position: fixed; display: flex; inset: 0; align-items: center; justify-content: center;"> + <div style="text-align: center;"> + <img class="icon" src="/assets/logo-transparent.svg" style="filter: grayscale(1) invert(1); width: 96px; height: 96px;" alt=""> + <h4 style="opacity: .75;">Add music to your library</h4> + <p style="max-width: 300px; margin-left: auto; margin-right: auto;">Browse millions of songs and collect your favorites here.</p> + <div class="btn btn-primary" onclick="window.parent.openUI('explore');">Browse Mist</div> + </div> + </div> + <?php endif; ?> + <br> + <div style="margin-left: 10px;"> + <?php if ($hasAlbum && trim($albums[$_GET["a"]]["copyright"]) !== ""): ?> + <div class="text-muted"><?= $albums[$_GET["a"]]["copyright"] ?></div> + <?php endif; if ($hasAlbum && in_array($_GET["a"], $library)): ?><a class="link" id="library-button" href="#" onclick="removeFromLibrary();">Remove from library</a> + <?php endif; ?> </div> + </div> - <script> - <?php if ($hasAlbum): ?> - async function addToLibrary() { - document.getElementById("library-button").classList.add("disabled"); - await fetch("/api/addLibrary.php?i=<?= $_GET["a"] ?>"); - window.parent.redownloadLibrary(); - location.reload(); - } + <script> + <?php if ($hasAlbum): ?> + async function addToLibrary() { + document.getElementById("library-button").classList.add("disabled"); + await fetch("/api/addLibrary.php?i=<?= $_GET["a"] ?>"); + window.parent.redownloadLibrary(); + location.reload(); + } - async function removeFromLibrary() { - document.getElementById("library-button").classList.add("disabled"); - await fetch("/api/removeLibrary.php?i=<?= $_GET["a"] ?>"); - window.parent.redownloadLibrary(); - location.reload(); - } - <?php endif; ?> + async function removeFromLibrary() { + document.getElementById("library-button").classList.add("disabled"); + await fetch("/api/removeLibrary.php?i=<?= $_GET["a"] ?>"); + window.parent.redownloadLibrary(); + location.reload(); + } + <?php endif; ?> + + let items = Array.from(document.getElementsByClassName("track")).map(i => { return { title: i.getAttribute("data-item-track"), artist: i.getAttribute("data-item-artist"), id: i.id } }); + + const fuse = new Fuse(items, { + keys: [ + { + name: 'title', + weight: 1 + }, + { + name: 'artist', + weight: .5 + } + ] + }); + + function updateFilter() { + let query = document.getElementById("filter").value.trim(); + + if (query !== "") { + document.getElementById("search-results").style.display = "flex"; + document.getElementById("main-list").style.display = "none"; + + let results = items.filter(i => i.title.toLowerCase().replace(/[^a-z\d ]/mg, " ").replace(/ +/mg, " ").includes(query.toLowerCase().replace(/[^a-z\d ]/mg, " ").replace(/ +/mg, " ")) || i.artist.toLowerCase().replace(/[^a-z\d ]/mg, " ").replace(/ +/mg, " ").includes(query.toLowerCase().replace(/[^a-z\d ]/mg, " ").replace(/ +/mg, " "))); + document.getElementById("search-results").innerHTML = ""; - let items = Array.from(document.getElementsByClassName("track")).map(i => { return { title: i.getAttribute("data-item-track"), artist: i.getAttribute("data-item-artist"), id: i.id } }); - - const fuse = new Fuse(items, { - keys: [ - { - name: 'title', - weight: 1 - }, - { - name: 'artist', - weight: .5 - } - ] - }); - - function updateFilter() { - let query = document.getElementById("filter").value.trim(); - - if (query !== "") { - document.getElementById("search-results").style.display = "flex"; - document.getElementById("main-list").style.display = "none"; - - let results = fuse.search(query); - document.getElementById("search-results").innerHTML = ""; - - for (let result of results) { - document.getElementById("search-results").innerHTML += document.getElementById(result.item.id).outerHTML; - } - } else { - document.getElementById("search-results").style.display = "none"; - document.getElementById("main-list").style.display = "flex"; + for (let result of results) { + document.getElementById("search-results").innerHTML += document.getElementById(result.id).outerHTML; } + } else { + document.getElementById("search-results").style.display = "none"; + document.getElementById("main-list").style.display = "flex"; } - </script> + } + </script> - <br><br> - </div> + <br><br> </body> </html>
\ No newline at end of file |