xTeVe XML TV Channel Search

xteve-xmltv-search.js

// ==UserScript==
// @name         xTeVe XML TV Channel Search
// @namespace    com.mrgeckosmedia.xteve-xml-search
// @version      2024-04-06
// @description  Adds a search box for XMLTV channel selection
// @author       GRMrGecko
// @match        http://xteve.local:34400/web/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=0.35
// @license      MIT
// @grant        none
// ==/UserScript==

function selectXMLTVResult(e) {
    var searchContainer = document.querySelector("#xmltv_search_container");
    searchContainer.style.display = "none";
    var xmltvChannel = document.querySelector("#popup-mapping");
    var clickedResult = e.target.getAttribute("value");
    xmltvChannel.value = clickedResult;
    xmltvChannel.dispatchEvent(new Event('change'));
}

function searchXMLTV(e) {
    var searchText = document.querySelector("#xmltv_search").value.toLowerCase();
    var searchContainer = document.querySelector("#xmltv_search_container");
    if (searchText=="") {
        searchContainer.style.display = "none";
        return;
    }
    var searchResults = document.querySelector("#xmltv_search_results");
    searchResults.innerHTML = "";
    var options = Array.from(document.querySelector("#popup-mapping").options).filter(
x => x.text.toLowerCase().includes(searchText)
    )
    for (const i in options) {
        var optionEl = document.createElement('li');
        optionEl.innerText = options[i].text;
        optionEl.setAttribute("value", options[i].value);
        optionEl.addEventListener("click", selectXMLTVResult);
        searchResults.appendChild(optionEl);
    }
    searchContainer.style.display = "block";
}

function checkAndAddSearch() {
    if (document.querySelector("#xmltv_search_results")!=undefined) {
        return;
    }
    var popup = document.querySelector("#popup-custom");
    if (popup.querySelector("h3").innerText!="MAPPING") {
        return;
    }
    var xmlSearchEl = document.createElement('tr');
    xmlSearchEl.innerHTML = `<td class="left">XMLTV Search:</td><td>
        <input type="text" name="xmltv-search" placeholder="Search" value="" id="xmltv_search" />
        <style type="text/css">
        #xmltv_search_container {
            position: absolute;
            width: 368px;
            display: none;
        }
        #xmltv_search_results {
            position: relative;
            left: -41px;
            top: -18px;
            width: 100%;
            max-height: 500px;
            overflow: scroll;
        }
        </style>
        <div id="xmltv_search_container">
            <ul id="xmltv_search_results"></ul>
        </div>
    </td>`;
    popup.querySelector("table").appendChild(xmlSearchEl);
    popup.querySelector("#xmltv_search").addEventListener('input', searchXMLTV);
}

(function() {
    'use strict';

   setInterval(checkAndAddSearch, 1000);
})();