diff options
Diffstat (limited to 'app/explore.php')
| -rw-r--r-- | app/explore.php | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/app/explore.php b/app/explore.php new file mode 100644 index 0000000..a51731b --- /dev/null +++ b/app/explore.php @@ -0,0 +1,118 @@ +<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php"; ?> +<!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<input placeholder="Filter" id="filter" class="form-control" style="width: 256px; float: right;" onchange="updateFilter();" onkeyup="updateFilter();"></h2> + <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 |