path: root/dist/script.js

/* global Hls, dragula, CAMERAS, DEFAULTS */

const STATE = loadState();

let HLSInstances = {};

function loadState() {
    let hash = document.location.hash;
    if (hash.length === 0) {
        history.replaceState(null, "", "#" + DEFAULTS.join(","));
        return DEFAULTS;
    }
    hash = hash.replace(/^#/, "");
    if (hash.length === 0) {
        return [];
    }
    return hash.split(",");
}

function handleCheckbox(evt) {
    const id = evt.target.dataset.id;
    if (evt.target.checked) {
        if (!STATE.includes(id)) {
            appendCamera(id);
        }
    } else {
        if (STATE.includes(id)) {
            removeCamera(id);
        }
    }
}

function findCamera(id) {
    for (let { cams } of CAMERAS) {
        let found = cams.find(x => x.id === id);
        if (found !== undefined) {
            return found;
        }
    }
}

function compareStrings(a, b) {
    var nameA = a.toUpperCase(); // ignore upper and lowercase
    var nameB = b.toUpperCase(); // ignore upper and lowercase
    if (nameA < nameB) {
        return -1;
    }
    if (nameA > nameB) {
        return 1;
    }

    // names must be equal
    return 0;
}

function loadData() {
    const map = L.map('map');
    const bounds = L.latLngBounds([CAMERAS[0].coord, CAMERAS[1].coord]);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    for (let { coord, cams } of CAMERAS) {
        let marker = L.marker(coord).addTo(map);
        bounds.extend(coord);

        const boxes = document.createElement("ul");
        for (let {id, name} of cams) {
            const label = document.createElement("label");
            const checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.dataset.id = id;
            checkbox.addEventListener("input", handleCheckbox);
            checkbox.checked = STATE.includes(id);
            label.append(checkbox);
            const text = document.createTextNode(name);
            label.append(text);

            const li = document.createElement("li");
            li.append(label);
            boxes.append(li);
        }
        marker.bindPopup(boxes);
    }

    map.fitBounds(bounds);
    for (let id of STATE) {
        let camera = findCamera(id);
        document.querySelector("main").append(makeCameraStream(camera));
    }
}

function makeCameraStream(camera) {
    const section = document.createElement("section");
    section.dataset.id = camera.id;
    const header = document.createElement("h2");
    header.innerText = camera.name;
    const close = document.createElement("button");
    close.className = 'close';
    close.type = "button";
    close.innerText = "X";
    header.append(close);
    close.addEventListener('click', evt => {
        removeCamera(evt.target.parentNode.parentNode.dataset.id);
    });
    section.append(header);
    let video;
    if (camera.stream !== undefined) {
        video = document.createElement("video");
        video.controls = true;
        if (Hls.isSupported()) {
            const hls = new Hls({manifestLoadingTimeOut: 60000});
            if (location.hostname === 'localhost' && camera.stream.startsWith('/')) {
                hls.loadSource('https://pig.observer' + camera.stream);
            } else {
                hls.loadSource(camera.stream);
            }
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
            hls.on(Hls.Events.ERROR, function (event, data) {
                if (data.fatal) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            // try to recover network error
                            if (data.response.code === 404) {
                                hls.destroy();
                                let errorMessage = document.createTextNode("Stream not found (probably doesn't exist after all)");
                                video.parentNode.append(errorMessage);
                                video.remove();
                                break;
                            }
                            console.log("fatal network error encountered, try to recover");
                            console.log(data);
                            hls.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            console.log("fatal media error encountered, try to recover");
                            hls.recoverMediaError();
                            break;
                        default:
                            // cannot recover
                            hls.destroy();
                            let errorMessage = document.createTextNode(
                                "Error: " + JSON.stringify([event, data])
                            );
                            video.parentNode.append(errorMessage);
                            video.remove();
                            break;
                    }
                }
            });
            HLSInstances[camera.id] = hls;
        }
        // hls.js is not supported on platforms that do not have Media Source
        // Extensions (MSE) enabled.
        //
        // When the browser has built-in HLS support (check using `canPlayType`),
        // we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
        // element through the `src` property. This is using the built-in support
        // of the plain video element, without using hls.js.
        //
        // Note: it would be more normal to wait on the 'canplay' event below however
        // on Safari (where you are most likely to find built-in HLS support) the
        // video.src URL must be on the user-driven white-list before a 'canplay'
        // event will be emitted; the last video event that can be reliably
        // listened-for when the URL is not on the white-list is 'loadedmetadata'.
        else if (video.canPlayType("application/vnd.apple.mpegurl")) {
            video.src = camera.stream;
            if (location.hostname === 'localhost' && camera.stream.startsWith('/')) {
                video.src = 'https://pig.observer' + camera.stream;
            }
            video.addEventListener("loadedmetadata", function () {
                video.play();
            });
        }
    } else {
        video = document.createElement("img");
        video.className = 'reload';
        video.src = camera.url;
        if (location.hostname === 'localhost' && camera.url.startsWith('/')) {
            video.src = 'https://pig.observer' + camera.url;
        }
        setTimeout(pokeImages, 1);
    }
    section.append(video);
    return section;
}

function appendCamera(id) {
    STATE.push(id);
    history.replaceState(null, "", "#" + STATE.join(","));
    let camera = findCamera(id);
    document.querySelector("main").append(makeCameraStream(camera));
}

function removeCamera(id) {
    const oldIndex = STATE.indexOf(id);
    if (oldIndex > -1) {
        STATE.splice(oldIndex, 1);
    }
    history.replaceState(null, "", "#" + STATE.join(","));
    for (let video of document.querySelectorAll("main section")) {
        if (video.dataset.id === id) {
            video.remove();
        }
    }
    for (let checkbox of document.querySelectorAll('nav input')) {
        if (checkbox.dataset.id === id) {
            checkbox.checked = false;
        }
    }
    if (HLSInstances[id] !== undefined) {
        HLSInstances[id].destroy();
        HLSInstances[id] = undefined;
    }
}

const playall = document.getElementById("playall");
if (playall) {
    playall.addEventListener("click", e => {
        for (let k of document.querySelectorAll("video")) {
            k.play();
            k.currentTime += 10000;
        }
    });
}
document.getElementById("vidwidth").addEventListener("input", e => {
    document.body.style.setProperty("--video-width", e.target.value + "vw");
});

loadData();

const dragHandler = dragula([document.querySelector("main")], {
    moves(el, container, handle) {
        return handle.tagName.toLowerCase() === "h2";
    }
});
dragHandler.on("drop", (el, target, source, sibling) => {
    const myID = el.dataset.id;
    const neighborID = sibling.dataset.id;
    const oldIndex = STATE.indexOf(myID);
    if (oldIndex > -1) {
        STATE.splice(oldIndex, 1);
    }
    const newIndex = STATE.indexOf(neighborID);
    if (newIndex > -1) {
        STATE.splice(newIndex, 0, myID);
    } else {
        console.log("uhhhhh fuck");
    }
    history.replaceState(null, "", "#" + STATE.join(","));
});

let pokeTimeout = undefined;

function pokeImages() {
    for (let img of document.querySelectorAll('img.reload')) {
        if (MANUAL_CACHE_BUST) {
            if (img.dataset.origSrc === undefined) {
                img.dataset.origSrc = img.src;
            }
            fetch(img.dataset.origSrc, {cache: "no-cache"})
                .then(function (response) {
                    if (!response.ok) {
                        console.error(`HTTP error! status: ${response.status}`);
                    } else {
                        return response.blob();
                    }
                })
                .then(function (response) {
                    img.src = URL.createObjectURL(response);
                    if (pokeTimeout !== undefined) {
                        clearTimeout(pokeTimeout);
                    }
                    pokeTimeout = setTimeout(pokeImages, 1000);
                });
        } else {
            img.src = img.src.replace(/(\?0\.\d+)?$/, '?' + Math.random());
            img.addEventListener('load', e => {
                if (pokeTimeout !== undefined) {
                    clearTimeout(pokeTimeout);
                }
                pokeTimeout = setTimeout(pokeImages, 1000);
            });
        }
    }
}