jrtechs-HomeBrewPlex/html/videos.html

<h1 class="text-center">Videos</h1>

<input id="videoFilter" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<table class="table table-striped">
    <thead class="thead-dark">
    <tr>
        <td>Name</td>
        <td>Icon</td>
        <td>Watch</td>
    </tr>
    </thead>
    <tbody id="movieTable">
        {for video in videos}
            <tr class="table_row">
                <td>{video.name}</td>
                <td><img src="/icon?v={video.name}" alt="Icon for {video.name}" height = 60px/></td>
                <td>
                    <a href="/watch?v={video.name}" class="btn btn-secondary active" role="button" aria-pressed="true">View</a>
                </td>
            </tr>
        {/for}
    </tbody>
</table>


<script>
    function filterTable()
    {
        var input = $("input#videoFilter").val().toLowerCase();

        $(".table_row").css({"display": "none"});

        $(".table_row").each(function(index)
        {
            if($(this).text().toLowerCase().includes(input))
            {
                $(this).toggle(true);
                //$(this).css({"display": "none"});
            }
        });

        if(input.toString().split(" ").join("") === "")
        {
            $(".satellite_row").toggle(true);
        }
    }

    $(document).ready(function()
    {
        $("input#videoFilter").bind("keyup", filterTable);
    });
</script>