Skip to content

Make search faster when there are a lot of songs #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AxelTerizaki wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Make search faster when there are a lot of songs #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 11 additions & 46 deletions JS/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,14 @@ let RegExEnabled = false;
if (!(HTMLCollection.prototype[Symbol.iterator])) HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

addEventListener("load", setup);
addEventListener("pageshow", search);

function setup() {
// get list of series elements and set their id
list = document.getElementsByClassName("series");
for (let series of list)
series.id = series.childNodes[0].nodeValue.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");

// set search box toggle RegEx event
document.getElementById("searchbox").addEventListener("keydown", toggleRegEx);

// set search box search event
document.getElementById("searchbox").addEventListener("keyup", search);

// get search string from url
if (location.search.indexOf("=") > -1)
document.getElementById("searchbox").value = decodeURIComponent(location.search.substring(location.search.indexOf("=")+1));
document.getElementById("searchbox").addEventListener("keydown", timerSearchBox);

// add onclick(addVideoToPlaylist) to fa-plus elements
const addVideoButtons = document.getElementsByClassName("fa-plus");
Expand Down Expand Up @@ -55,45 +46,19 @@ function setup() {

// set history state
history.replaceState("list", document.title);
}

function toggleRegEx(event) {
if (event.keyCode == 9) {
RegExEnabled = !RegExEnabled;
document.getElementById("regex").children[0].innerHTML = "(press tab while typing to " + (RegExEnabled ? "disable" : "enable") + " RegEx in search)";
if (event.preventDefault) event.preventDefault();
return false;
}
//fix for text input focus
document.getElementById("searchbox").focus();
let val = document.getElementById("searchbox").value; //store the value of the element
document.getElementById("searchbox").value = ''; //clear the value of the element
document.getElementById("searchbox").value = val; //set that value back.
}

function search() {
let sVal = document.getElementById("searchbox").value.trim();
const query = (sVal == "" ? location.pathname : "?s=" + sVal);
sVal = sVal.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
document.getElementById("searchURL").href = query;
history.replaceState("list", document.title, query);

let UseRegEx = RegExEnabled, toFind;

if (UseRegEx) {
try { toFind = new RegExp(sVal, "i");
} catch (e) { UseRegEx = false; }
}

if (!UseRegEx)
toFind = new RegExp("^(?=.*" + sVal.split(" ").map(str => str.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")).join(")(?=.*") + ").*$", "i");

let anyResults = false;

for (let series of list) {
if (toFind.test(series.id)) {
series.removeAttribute("hidden");
anyResults = true;
} else series.setAttribute("hidden", "");
}

if (anyResults) document.getElementById("NoResultsMessage").setAttribute("hidden","");
else document.getElementById("NoResultsMessage").removeAttribute("hidden");
let timerVar;
// if no entry is made in the search box for 3 seconds, we submit it.
function timerSearchBox() {
clearTimeout(timerVar);
timerVar = setTimeout(function() { document.forms["fmSearch"].submit(); } , 3000);
}

function playlistAdd() {
Expand Down
2 changes: 1 addition & 1 deletion index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@
<div id="tooltip" class="is-hidden"></div>

<span id="title-popup"></span>
<div id="modal" class="overlay"><iframe></iframe></div>
<div id="modal" class="overlay"><iframe name="_ifSearch"></iframe></div>

<?php include_once 'backend/includes/botnet.html'; ?>
</body>
Expand Down
107 changes: 68 additions & 39 deletions list/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<?php
include_once '../backend/includes/helpers.php';
include_once '../names.php';
// Custom ETag Handling
$etag = '"' . md5_file(__FILE__) . (isset($_GET['frame']) ? 'F"' : '"');
if (trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) {
if (array_key_exists('HTTP_IF_NONE_MATCH', $_SERVER) && trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) {
header('HTTP/1.1 304 Not Modified');
die();
}
Expand All @@ -19,6 +21,12 @@
<?php if(isset($_GET['frame'])) echo ' <link rel="stylesheet" type="text/css" href="../CSS/frame.css">'; ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../JS/list.js"></script>
<script type="text/javascript">
// Set config values from PHP into JavaScript.
window.config = {
USE_FILENAME_AS_IDENTIFIER: <?php echo $USE_FILENAME_AS_IDENTIFIER ? 'true' : 'false'; ?>,
};
</script>
</head>
<body>
<header>
Expand All @@ -34,26 +42,73 @@
</div>

<?php
// Load names.php and count videos/series

include_once '../names.php';

// Count videos/series
$videosnumber = 0;
foreach ($names as $videos) $videosnumber += count($videos);

$seriesnumber = count($names);

echo '<p>We currently serve <span class="count">' . $videosnumber . '</span> videos from <span class="count">' . $seriesnumber . '</span> series.</p>';
?>

<label>
<a id="searchURL" href="">Search:</a>
<input id="searchbox" type="text" placeholder="Series name..." autofocus>
</label>
<br>
<p id="regex"><span>(press tab while typing to enable RegEx in search)</span></p>
<br>
<label>
<a id="searchURL" href="">Search:</a>
<form name="fmSearch" action="" method="get" target="<?php if(isset($_GET['frame'])) echo('_ifSearch'); else echo('_self'); ?>">
<?php if(isset($_GET['frame'])) echo('<input type="hidden" name="frame" value="true">'); ?>
<input name="s" id="searchbox" type="text" placeholder="Series or titles name..." value="<?php if(isset($_GET['s'])) echo($_GET['s']) ?>" autofocus>
</form>
</label>
<br>
<p id="regex"><span>(Press Enter or wait 3 seconds to start the search)</span></p>
<br>
<?php

$hasResults = false;
$searchCriteria = '';

if(!isset($_GET['frame']))
$searchCriteria = '§*§'; //We have some titles with one or more'*' in them.
if(isset($_GET['s']) && $_GET['s'] !== '')
$searchCriteria = iconv('UTF-8', 'ASCII//TRANSLIT',$_GET['s']);

<div id="NoResultsMessage" hidden>
if($showall || $searchCriteria !== '') {
// Output list of videos
foreach ($names as $series => $video_array) {

$html = '';
foreach ($video_array as $title => $data) {
// Skip Easter Eggs
if (isset($data['egg']) && $data['egg']) continue;

if ($searchCriteria === '§*§'
|| (stripos(iconv('UTF-8', 'ASCII//TRANSLIT',$series), $searchCriteria) !== false)
|| (stripos(iconv('UTF-8', 'ASCII//TRANSLIT',$data['song']['title']), $searchCriteria) !== false)
|| (stripos(iconv('UTF-8', 'ASCII//TRANSLIT',$data['song']['artist']), $searchCriteria) !== false)
) {
// Generate HTML for each video
$html .= ' <i class="fa fa-plus" data-file="' . htmlspecialchars($data['file']) . '" data-mime="' . htmlspecialchars(json_encode($data['mime'])) . '"';
if (array_key_exists('song', $data)) $html .= ' data-songtitle="' . htmlspecialchars($data['song']['title']) . '" data-songartist="' . htmlspecialchars($data['song']['artist']) . '"';

if (array_key_exists('subtitles', $data)) $html .= ' data-subtitles="' . htmlspecialchars($data['subtitles']) . '"';
$html .= '></i>' . PHP_EOL;
$html .= ' <a href="../?video=' . filenameToIdentifier($data['file']) . '">' . $title . '</a>' . PHP_EOL;
$html .= ' <br>' . PHP_EOL;
}
}

// If any video data HTML was generated, output the series name and the HTML
if ($html) {
echo '<div class="series">' . $series . '<div>' . PHP_EOL;
echo $html;
echo '</div></div>' . PHP_EOL;
$hasResults = true;
}
}
}

if($hasResults === false) {
?>
<div id="NoResultsMessage">
<p>We could not find any shows matching your search query.</p>
<ol>
<li>Is it spelled correctly?</li>
Expand All @@ -62,33 +117,7 @@
</ol>
<p>If you still can't find the video you are looking for, we probably don't have it yet.</p>
</div>

<?php
include_once '../backend/includes/helpers.php';

// Output list of videos
foreach ($names as $series => $video_array) {

$html = '';
foreach ($video_array as $title => $data) {
// Skip Easter Eggs
if (isset($data['egg']) && $data['egg']) continue;

// Generate HTML for each video
$html .= ' <i class="fa fa-plus" data-file="' . htmlspecialchars($data['file']) . '" data-mime="' . htmlspecialchars(json_encode($data['mime'])) . '"';
if (array_key_exists('song', $data)) $html .= ' data-songtitle="' . htmlspecialchars($data['song']['title']) . '" data-songartist="' . htmlspecialchars($data['song']['artist']) . '"';
if (array_key_exists('subtitles', $data)) $html .= ' data-subtitles="' . htmlspecialchars($data['subtitles']) . '"';
$html .= '></i>' . PHP_EOL;
$html .= ' <a href="../?video=' . filenameToIdentifier($data['file']) . '">' . $title . '</a>' . PHP_EOL;
$html .= ' <br>' . PHP_EOL;
}

// If any video data HTML was generated, output the series name and the HTML
if ($html) {
echo '<div class="series">' . $series . '<div>' . PHP_EOL;
echo $html;
echo '</div></div>' . PHP_EOL;
}
}
?>
</main>
Expand Down