From 62042c20876077eeefdba80c39a11689503626bc Mon Sep 17 00:00:00 2001 From: Guillaume Lebigot Date: Sun, 1 Sep 2019 16:47:31 +0200 Subject: [PATCH] Make search faster when there are a lot of songs With a lot of songs (7000+) JS struggles to load the whole list, making the search much less pleasant to use. This patch includes : - Make search server-side and not client-side (with 7000 songs it's like a 3Mb file to load for the browser, it's painful especially on low-memory mobile devices) - Search also looks into song titles and artists, not just series name --- JS/list.js | 57 +++++--------------------- index.php | 2 +- list/index.php | 107 +++++++++++++++++++++++++++++++------------------ 3 files changed, 80 insertions(+), 86 deletions(-) diff --git a/JS/list.js b/JS/list.js index 593b1c66..7215d768 100755 --- a/JS/list.js +++ b/JS/list.js @@ -6,7 +6,6 @@ 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 @@ -14,15 +13,7 @@ function setup() { 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"); @@ -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() { diff --git a/index.php b/index.php index b84ff26f..1cd1cf12 100755 --- a/index.php +++ b/index.php @@ -244,7 +244,7 @@ - + diff --git a/list/index.php b/list/index.php index 86e05d88..f96a4ce7 100755 --- a/list/index.php +++ b/list/index.php @@ -1,7 +1,9 @@ '; ?> +
@@ -34,26 +42,73 @@ We currently serve ' . $videosnumber . ' videos from ' . $seriesnumber . ' series.

'; ?> - -
-

(press tab while typing to enable RegEx in search)

-
+ +
+

(Press Enter or wait 3 seconds to start the search)

+
+ + 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 .= ' ' . $title . '' . PHP_EOL; + $html .= '
' . PHP_EOL; + } + } + + // If any video data HTML was generated, output the series name and the HTML + if ($html) { + echo '
' . $series . '
' . PHP_EOL; + echo $html; + echo '
' . PHP_EOL; + $hasResults = true; + } + } + } + + if($hasResults === false) { + ?> +

We could not find any shows matching your search query.

  1. Is it spelled correctly?
    2. @@ -62,33 +117,7 @@

If you still can't find the video you are looking for, we probably don't have it yet.

- $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 .= ' ' . $title . '' . PHP_EOL; - $html .= '
' . PHP_EOL; - } - - // If any video data HTML was generated, output the series name and the HTML - if ($html) { - echo '
' . $series . '
' . PHP_EOL; - echo $html; - echo '
' . PHP_EOL; - } } ?>