85 lines
2.9 KiB
PHP
85 lines
2.9 KiB
PHP
<?php
|
|
|
|
function echoUrl($url)
|
|
{
|
|
echo "<a href=\"$url\">$url</a>";
|
|
}
|
|
|
|
?>
|
|
|
|
See <?php echoUrl('https://gitea.lemnoslife.com/Benjamin_Loison/YouTube_captions_search_engine'); ?> for more information.<br/>
|
|
|
|
<form id="form">
|
|
<input type="text" autofocus id="search" pattern="[A-Za-z0-9-_ ]+" placeholder="Your [A-Za-z0-9-_ ]+ search"></input>
|
|
<input type="submit" value="Search">
|
|
</form>
|
|
|
|
<ul id="channels">
|
|
</ul>
|
|
|
|
<script>
|
|
var firstRun = true;
|
|
var conn;
|
|
// Could parse DOM instead of using following variable.
|
|
var channels = [];
|
|
|
|
function createA(text, href) {
|
|
var a = document.createElement('a');
|
|
var text = document.createTextNode(text);
|
|
a.appendChild(text);
|
|
a.href = href;
|
|
return a;
|
|
}
|
|
|
|
function treatLine(line) {
|
|
console.log(line);
|
|
if (line.startsWith('alert:')) {
|
|
alert(line.replace('alert:', ''));
|
|
} else {
|
|
var channelsDom = document.getElementById('channels');
|
|
const channelFileParts = line.split('/');
|
|
const channel = channelFileParts[0];
|
|
const channelFile = channelFileParts[1];
|
|
const channelHref = `channels/${channel}`;
|
|
if (!channels.includes(channel)) {
|
|
channels.push(channel);
|
|
channelDom = document.createElement('li');
|
|
var a = createA(channel, channelHref);
|
|
channelDom.appendChild(a);
|
|
var channelFilesDom = document.createElement('ul');
|
|
channelDom.appendChild(channelFilesDom);
|
|
channelsDom.appendChild(channelDom);
|
|
}
|
|
var channelDom = channelsDom.lastChild;
|
|
var channelFilesDom = channelDom.lastChild;
|
|
var channelFileDom = document.createElement('li');
|
|
var a = createA(channelFile, `${channelHref}/${channelFile}`);
|
|
channelFileDom.appendChild(a);
|
|
channelFilesDom.appendChild(channelFileDom);
|
|
}
|
|
}
|
|
|
|
function search(event) {
|
|
// We don't want to refresh the webpage which is the default behavior.
|
|
event.preventDefault();
|
|
const query = document.getElementById('search').value;
|
|
if (firstRun) {
|
|
firstRun = false;
|
|
conn = new WebSocket('wss://crawler.yt.lemnoslife.com/websocket');
|
|
conn.onmessage = function(e) {
|
|
e.data.split('\n').forEach(treatLine);
|
|
};
|
|
// We can't directly proceed with `conn.send`, as the connection may not be already established.
|
|
conn.onopen = function(e) { conn.send(query); };
|
|
} else {
|
|
// We assume at this point that the connection is established.
|
|
channels = [];
|
|
document.getElementById('channels').innerHTML = '';
|
|
conn.send(query);
|
|
}
|
|
}
|
|
|
|
var form = document.getElementById('form');
|
|
form.addEventListener('submit', search);
|
|
</script>
|