#!/bin/sh
# reinhard@finalmedia.de
# Fri 05 Apr 2024 06:44:06 PM CEST

echo "scanning..."

(
cat << ::EOF::
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<style>
        a { float:left; clear:both; }
        video { display:block; width:480px; height:auto; margin-bottom:1em; }
        input { display:block; margin-bottom:1em; }
        @media (prefers-color-scheme: dark) { html { background:#000; color:#FFF; } a { color:#CCC; }}
</style>
<h1>video</h1>
<input type="text" id="searchInput" placeholder="Suchbegriff">
<div id="video-container"></div>
::EOF::
find -type f -regex ".*\(mp4\|.webm\)$" -printf "<a href=\"%p\">%p</a>\n" | sort
cat << ::EOF::
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const links = document.querySelectorAll('a');
    function filterLinks() {
        const searchValue = searchInput.value.replace(/_/g, ' ').toLowerCase();
        if (searchValue.length<2) { return 0; }
        links.forEach(link => {
            const isMatch = link.getAttribute('href').toLowerCase().includes(searchValue);
            link.style.display = isMatch ? '' : 'none';
        });
    }

    const videoElement = document.createElement('video');
    videoElement.controls = true;
    videoElement.preload = "none";
    document.getElementById('video-container').appendChild(videoElement);

    links.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            videoElement.src = this.getAttribute('href');
            videoElement.play();
        });
    });

searchInput.addEventListener('input', filterLinks);
});
</script>
::EOF::
) > index.html && echo "http://127.0.0.1:8001" && busybox httpd -f -p 8001 -vv