diff options
Diffstat (limited to 'app/ui/listing.php')
| -rw-r--r-- | app/ui/listing.php | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/app/ui/listing.php b/app/ui/listing.php new file mode 100644 index 0000000..9ad227f --- /dev/null +++ b/app/ui/listing.php @@ -0,0 +1,189 @@ +<?php header("X-Frame-Options: SAMEORIGIN"); require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php"; global $_PROFILE; global $library; + +if (isset($list)) { + $presetList = true; +} else { + $presetList = false; +} + +if (!$presetList) { + global $albums; global $songs; global $favorites; + + if (isset($_GET["a"]) && isset($albums[$_GET["a"]])) { + $hasAlbum = true; + $list = []; + + foreach ($albums[$_GET["a"]]["tracks"] as $id) { + $list[$id] = $songs[$id]; + } + } else { + $hasAlbum = false; + $list = $songs; + + foreach ($albums as $id => $album) { + foreach ($album["tracks"] as $track) { + $list[$track]["_albumID"] = $id; + } + } + + uasort($list, function ($a, $b) { + return strcmp($a["title"], $b["title"]); + }); + + $list = array_filter($list, function ($i) { + global $library; + return in_array($i["_albumID"], $library); + }); + } +} + +?> +<!doctype html> +<html lang="en"> +<head> + <script> + if (typeof window.parent.openModal === "undefined") { + location.href = "/app/#/songs"; + } + </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>listing</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/js/shortcuts.js"></script> + <script src="/assets/fuse.min.js"></script> + <link id="native-css" href="/assets/native.css" rel="stylesheet" disabled> +</head> +<body class="crossplatform"> + <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> + </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;"> + <?= $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 ?> + </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> + </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> + + <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; ?> + + 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"; + } + } + </script> + + <br><br> + </div> +</body> +</html>
\ No newline at end of file |