diff options
Diffstat (limited to 'app/explore.php')
| -rw-r--r-- | app/explore.php | 137 |
1 files changed, 0 insertions, 137 deletions
diff --git a/app/explore.php b/app/explore.php deleted file mode 100644 index 4887022..0000000 --- a/app/explore.php +++ /dev/null @@ -1,137 +0,0 @@ -<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php"; global $songs; global $albums; ?> -<!doctype html> -<html lang="en"> -<head> - <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>explore</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/shortcuts.js"></script> - <link id="native-css" href="/assets/native.css" rel="stylesheet" disabled> -</head> -<body class="crossplatform"> - <script> - if (navigator.userAgent.includes("MistNative/darwin") || navigator.userAgent.includes("MistNative/win32")) { - document.getElementById("native-css").disabled = false; - document.body.classList.remove("crossplatform"); - } - </script> - <div class="container"> - <br> - <h2 style="margin-top: 10px; margin-bottom: 20px; margin-left: 10px;">Explore</h2> - - <form action="search.php"> - <div style="margin-left: 10px;" class="input-group mb-3"> - <input name="q" type="text" id="search" class="form-control" placeholder="Search on Mist"> - <button class="btn btn-outline-secondary" type="submit" id="btn-search">Search</button> - </div> - </form> - - <hr style="margin-left: 10px;"> - - <?php if (count($songs) === 0 && count($albums) === 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;">Upload music to this server</h4> - <p style="max-width: 300px; margin-left: auto; margin-right: auto;">Add millions of songs and let your users play them whenever they want.</p> - </div> - </div> - <?php endif; ?> - <div id="album-grid" style="display: grid; grid-template-columns: repeat(5, 1fr);"> - <?php global $albums; - - uasort($albums, function ($a, $b) { - return strcmp($a["title"], $b["title"]); - }); - - uasort($albums, function ($a, $b) { - return strcmp($a["artist"], $b["artist"]); - }); - - foreach ($albums as $id => $album): ?> - <a id="album-<?= $id ?>" data-item-track="<?= $album["title"] ?>" data-item-artist="<?= $album["artist"] ?>" href="listing.php?a=<?= $id ?>" style="padding: 10px; color: inherit; text-decoration: inherit;" class="album"> - <img class="album-list-art" alt="" src="/assets/content/<?= $id ?>.jpg" style="width: 100%; aspect-ratio: 1; border-radius: 5px; margin-bottom: 5px;"> - <div class="album-list-item" style="max-width: calc(80vw / 5); white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;"><?= $album["title"] ?></div> - <div class="album-list-item" style="max-width: calc(80vw / 5); opacity: .5; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;"><?= $album["artist"] ?></div> - </a> - <?php endforeach; ?> - </div> - <div id="search-results" style="display: none; grid-template-columns: repeat(5, 1fr);"></div> - <?php global $songs; displayList($songs); ?> - <div class="list-group" style="margin-left: 10px; margin-top: 20px; display: none;" id="search-results-2"></div> - </div> - - <script> - let items = Array.from(document.getElementsByClassName("album")).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 - } - ] - }); - - let items2 = Array.from(document.getElementsByClassName("track")).map(i => { return { title: i.getAttribute("data-item-track"), artist: i.getAttribute("data-item-artist"), id: i.id } }); - - const fuse2 = new Fuse(items2, { - 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 = "grid"; - document.getElementById("album-grid").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; - } - - document.getElementById("search-results-2").style.display = "flex"; - document.getElementById("main-list").style.display = "none"; - - let results2 = fuse2.search(query); - document.getElementById("search-results-2").innerHTML = ""; - - for (let result of results2) { - document.getElementById("search-results-2").innerHTML += document.getElementById(result.item.id).outerHTML; - } - } else { - document.getElementById("search-results").style.display = "none"; - document.getElementById("album-grid").style.display = "grid"; - document.getElementById("search-results-2").style.display = "none"; - document.getElementById("main-list").style.display = "flex"; - } - } - </script> - - <br><br> -</body> -</html>
\ No newline at end of file |