Commit 3b9e4267 authored by Alexandre Bailly's avatar Alexandre Bailly

Modifications côté recherche

Lorsqu'une vidéo est jouée, le chargement de la liste devrait être nettement plus rapide, vue que ça ne charge que les séries/song correspondant à la série en cours de lecture.
La recherche est désormais faite côté PHP et non plus côté JS.
La recherche est faite également sur le titre, l'artiste/chanteur et sur le créateur du kara.
Si rien n'est saisi dans la recherche, la liste restera vide (principale différence par rapport au comportement précédent).
Lors de la saisie dans le champ recherche, il faudra appuyer sur la touche Entrée (ou attendre 3 secondes) pour lancer la recherche.
parent b20640e9
Pipeline #8335 passed with stage
in 32 seconds
......@@ -3,11 +3,12 @@ let playlistBot;
let RegExEnabled = false;
let showR18 = (window.location.toString().indexOf('r18') >= 0);
// polyfill for noncompliant browsers
if (!(HTMLCollection.prototype[Symbol.iterator])) HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
addEventListener("load", setup);
addEventListener("pageshow", search);
//addEventListener("pageshow", search);
function setup() {
// get list of series elements and set their id
......@@ -16,15 +17,17 @@ function setup() {
series.id = series.childNodes[0].nodeValue.normalize("NFKD").replace(/[\u0300-\u036f]/g, "");
// set search box toggle RegEx event
document.getElementById("searchbox").addEventListener("keydown", toggleRegEx);
//document.getElementById("searchbox").addEventListener("keydown", toggleRegEx);
document.getElementById("searchbox").addEventListener("keydown", timerSearchBox);
// set search box search event
document.getElementById("searchbox").addEventListener("keyup", search);
//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));
*/
// add onclick(addVideoToPlaylist) to fa-plus elements
const addVideoButtons = document.getElementsByClassName("fa-plus");
for (let addVideoButton of addVideoButtons) {
......@@ -57,7 +60,7 @@ function setup() {
// set history state
history.replaceState("list", document.title);
}
/*
function toggleRegEx(event) {
if (event.keyCode == 9) {
RegExEnabled = !RegExEnabled;
......@@ -66,7 +69,8 @@ function toggleRegEx(event) {
return false;
}
}
*/
/*
function search() {
let sVal = document.getElementById("searchbox").value.trim();
const query = (sVal == "" ? location.pathname + (showR18 ? "?r18" : ""): (showR18 ? "?r18&" : "?") + "s=" + sVal);
......@@ -96,6 +100,19 @@ function search() {
if (anyResults) document.getElementById("NoResultsMessage").setAttribute("hidden","");
else document.getElementById("NoResultsMessage").removeAttribute("hidden");
}
*/
let timerVar;
/**
* Timer sur champ de saisie.
* Si aucune saisie pendant 3 secondes, on valide le formulaire.
*/
function timerSearchBox() {
clearTimeout(timerVar);
timerVar = setTimeout(function() { document.forms["fmSearch"].submit(); } , 3000);
}
function playlistAdd() {
let video;
......
......@@ -53,7 +53,7 @@
$identifier = $uid;
else
$identifier = filenameToIdentifier($filename);
$filename = rawurlencode($filename);
$songKnown = array_key_exists('song', $video);
......@@ -263,7 +263,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>
......
<?php
include_once '../backend/includes/helpers.php';
include_once '../names.php';
// Custom ETag Handling
$etag = '"' . md5_file(__FILE__) . (isset($_GET['frame']) ? 'F"' : '"');
if (array_key_exists('HTTP_IF_NONE_MATCH', $_SERVER) && trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) {
......@@ -8,6 +9,7 @@
}
header('ETag: ' . $etag);
?>
<!DOCTYPE html>
<html lang="en">
<head>
......@@ -44,10 +46,7 @@
</div>
<?php
// Load names.php and count videos/series
include_once '../names.php';
// Count videos/series
// Remove 18+ if they weren't requested.
if (!isset($_GET['r18'])) {
foreach ($names as $series => $video_array) {
......@@ -67,15 +66,65 @@
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">'); ?>
<?php if(isset($_GET['r18'])) echo('<input type="hidden" name="r18" 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
<div id="NoResultsMessage" hidden>
$hasResults = false;
if(isset($_GET['s'])) {
// 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;
// Skip r18 if not defined
if(!isset($_GET['r18']) && isset($data['r18'])) continue;
if((stripos($series, $_GET['s']) !== false)
|| (stripos(iconv('UTF-8', 'ASCII//TRANSLIT',$data['song']['title']), iconv('UTF-8', 'ASCII//TRANSLIT',$_GET['s'])) !== false)
|| (stripos(iconv('UTF-8', 'ASCII//TRANSLIT',$data['song']['artist']), iconv('UTF-8', 'ASCII//TRANSLIT',$_GET['s'])) !== false)
|| (stripos(iconv('UTF-8', 'ASCII//TRANSLIT',$data['subtitles']), iconv('UTF-8', 'ASCII//TRANSLIT',$_GET['s'])) !== 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']) . '"';
if ($USE_UID_AS_IDENTIFIER) $html .= ' data-uid="' . htmlspecialchars($data['uid']). '" ';
$html .= '></i>' . PHP_EOL;
if ($USE_UID_AS_IDENTIFIER)
$html .= ' <a href="../?video=' . filenameToIdentifier($data['uid']) . (isset($_GET['r18']) ? '&r18' : '') . '">' . $title . '</a>' . PHP_EOL;
else
$html .= ' <a href="../?video=' . filenameToIdentifier($data['file']) . (isset($_GET['r18']) ? '&r18' : '') . '">' . $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>
......@@ -84,37 +133,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']) . '"';
if ($USE_UID_AS_IDENTIFIER) $html .= ' data-uid="' . htmlspecialchars($data['uid']). '" ';
$html .= '></i>' . PHP_EOL;
if ($USE_UID_AS_IDENTIFIER)
$html .= ' <a href="../?video=' . filenameToIdentifier($data['uid']) . (isset($_GET['r18']) ? '&r18' : '') . '">' . $title . '</a>' . PHP_EOL;
else
$html .= ' <a href="../?video=' . filenameToIdentifier($data['file']) . (isset($_GET['r18']) ? '&r18' : '') . '">' . $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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment