stream-api/frontend/script.js

(() => {
    const info = {% raw info %};
    const handle = () => {
        const [body] = document.getElementsByTagName("body");
        const video = document.createElement("video");
        video.className = "video-js vjs-big-play-centered";
        body.appendChild(video);
        const options = {};
        options.controls = true;
        options.liveui = true;
        options.responsive = true;
        options.fill = true;
        options.techOrder = ["chromecast", "html5"];
        options.plugins = {};
        options.plugins.chromecast = {};
        options.plugins.chromecast.addButtonToControlBar = false;
        const player = videojs(video, options);
        if(info.poster) {
            player.poster(info.poster);
        }
        const source = {};
        source.type = info.ctype;
        source.src = info.upstream;
        player.src(source);

        const canPlayTypeRaw = player.canPlayType(info.ctype);
        const canPlayType = (canPlayTypeRaw === "maybe") || (canPlayTypeRaw === "probably");
        if(canPlayType) {
            const Button = videojs.getComponent("Button");
            class DownloadButton extends videojs.getComponent("Component") {
                createEl: () => {
                    const elem = document.createElement("a");
                    elem.href = info.download;
                    elem.classList.add("vjs-control");
                    elem.classList.add("vjs-button");
                    elem.classList.add("fas");
                    elem.classList.add("fa-download");
                    elem.classList.add("vjs-big-download");
                    return elem;
                }
            }

            const cbutton = {};
            cbutton.clickHandler = (ev) => {
                player.trigger("chromecastRequested");
            }

            const bigCastButtonWrapper = new Button(player, cbutton);
            const bigDownloadButtonWrapper = new DownloadButton(player);

            const bigCastButton = bigCastButtonWrapper.el();
            const bigDownloadButton = bigDownloadButtonWrapper.el();

            bigCastButton.classList.add("vjs-control");
            bigCastButton.classList.add("vjs-button");
            bigCastButton.classList.add("fab");
            bigCastButton.classList.add("fa-chromecast");
            bigCastButton.classList.add("vjs-big-chromecast");
            player.addChild(bigCastButtonWrapper);

            if(info.download) {
                player.addChild(bigDownloadButtonWrapper);
            }

            player.one("error", () => {
                player.removeChild(bigCastButtonWrapper);
                if(info.download) {
                    player.removeChild(bigDownloadButtonWrapper);
                }
            });

            player.one("play", () => {
                player.removeChild(bigCastButtonWrapper);
                if(info.download) {
                    player.removeChild(bigDownloadButtonWrapper);
                }
            });

            const smallCastButtonWrapper = new Button(player, cbutton);
            const smallCastButton = smallCastButtonWrapper.el();
            smallCastButton.classList.add("vjs-control");
            smallCastButton.classList.add("vjs-button");

            for(const elem of smallCastButton.children) {
                if(elem.classList.contains("vjs-icon-placeholder")) {
                    elem.classList.add("fab");
                    elem.classList.add("fa-chromecast");
                }
            }

            player.controlBar.addChild(smallCastButtonWrapper);

            player.on("chromecastConnected", () => {
                if(player.volume() > 0.3) {
                    player.volume(0.2);
                }
            });
        }
    }
    document.addEventListener("DOMContentLoaded", handle);
})();