<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>NGO Racing Thailand 2024</title>
    <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/gh/onigetoc/videojs-unmute@main/src/videojs-unmute.min.css" rel="stylesheet" />
    <script defer data-domain="livestream.livetubex.com" src="https://analytics.livetubex.com/js/script.js"></script>
    <script src="video.min.js"></script>
    <script src="videojs-contrib-quality-levels.min.js"></script>
    <script src="jb-videojs-hls-quality-selector.min.js"></script>
    <script src="videojs-unmute.js"></script>
    <script src="videojs-dynamic-watermark.min.js"></script>
    <script src="jquery-3.7.1.min.js"></script>

    <style>
        body {
            background: #000;
            margin: 0;
            padding: 0;
        }

        .vjs-livetubex .vjs-live-control::before {
            content: "•";
            margin-right: 4px;
            font-size: 1.8rem;
            line-height: 1.87rem;
            color: #ff0000;
            visibility: visible;
            opacity: 1;
            animation: 1s blink ease infinite;
        }

        @keyframes blink {
            from,
            to {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        @-moz-keyframes blink {
            from,
            to {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        @-webkit-keyframes blink {
            from,
            to {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        @-ms-keyframes blink {
            from,
            to {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        @-o-keyframes blink {
            from,
            to {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
<video id="my-video" class="video-js vjs-big-play-centered vjs-16-9 vjs-livetubex" controls preload="auto" width="640" height="264" data-setup="{}" playsinline muted>
    <source id="source" type="application/x-mpegURL" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>
<script>
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    const t = urlParams.get("t");
    const e = urlParams.get("e");

    const url = `https://livestream.livetubex.com/video/hls/${t}/${e}/phLfLCA7rOHowrIx3choprit5oTr0t1obRireSiv.m3u8`;

    document.getElementById("source").src = url

    let idt = urlParams.get("i") || "test";
    const enableMark = idt !== "test"
    if (enableMark) {
        idt = atob(idt)
    }

    var isPlaying = false;

    var player = videojs("my-video", {
        autoplay: true,
        muted: true,
        controls: true,
        responsive: true,
        fluid: true,
        playsinline: true,
        liveui: true,
        html5: {
            nativeAudioTracks: false,
            nativeVideoTracks: false,
            hls: {
                overrideNative: true,
            },
        },
    });

    if (enableMark) {
        const applyCssStyles = (el, options) => {
            el.style.cssText = options.cssText;
        };

        const dom = videojs.dom || videojs;

        const createDyanmicWatermarkElement = (options) => {
            const el = dom.createEl('div', {}, { id: options.elementId});

            applyCssStyles(el, options);
            return el;
        };

        const positions = [
            {
                r: 14.6,
                t: 7.0
            },
            {
                r: 14.5,
                t: 6.5
            },
            {
                r: 14.4,
                t: 6.0
            },
            {
                r: 14.3,
                t: 5.5
            },
            {
                r: 13.7,
                t: 5.20
            },
            {
                r: 16.5,
                t: 5.20
            },
            {
                r: 15.2,
                t: 5.20
            },
            {
                r: 15.6,
                t: 7.2
            },
            {
                r: 16.8,
                t: 7.25
            },
            {
                r: 11.1,
                t: 7.25,
            },
            {
                r: 12.4,
                t: 7.25,
            },
            {
                r: 12.1,
                t: 5.25
            },
            {
                r: 10.75,
                t: 5.25
            }
        ]

        const options = {
            elementId: `${String(Math.floor(Math.random() * 1000)).padStart(4, '0')}`,
            watermarkText: "1200",
            changeDuration: 5000,
            cssText:
                "display: inline-block; z-index: 9999; position: absolute; pointer-events: none;",
        }

        let overlayEl;

        function setWaterMark() {
            const addNewEl = !overlayEl
            if (addNewEl) {
                overlayEl = createDyanmicWatermarkElement(options)
            } else {
                applyCssStyles(overlayEl, options)
            }
            const el = overlayEl;

            const playerHeight = player.currentHeight();
            const playerWidth = player.currentWidth();

            if (addNewEl) {
                player.el().appendChild(el);
            }

            el.style.left = 0;
            el.style.top = 0;

            el.innerHTML = `
<svg id="overlay-svg" width="${playerWidth}" height="${playerHeight}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" style="pointer-events: none;">
    <rect width="1920" height="1080" x="0" y="0" style="fill:blue;stroke:pink;stroke-width:0;fill-opacity:0;stroke-opacity:0.9"></rect>
    ${positions.map(pos => `<rect x="${1912.5 - pos.r/100*1920}" y="${pos.t/100*1130 - 3.5}" style="fill:white;" width="9" height="5"></rect>`).join('')}
    ${positions.map(pos => `<text x="${1913 - pos.r/100*1920}" y="${pos.t/100*1130}" style="fill:rgba(0,0,0,0.005); font-size: 3.5px">${idt}</text>`).join('')}
</svg>
        `;
        }

        function hideMark() {
            if (overlayEl) {
                overlayEl.style = `display: none; z-index: 9999; position: absolute; pointer-events: none;`
            }
        }

        player.on(['waiting', 'pause'], function() {
            isPlaying = false;
            hideMark()
        });

        player.on('playing', function() {
            isPlaying = true;
            setWaterMark()
        });

        addEventListener("resize", e => setWaterMark())
    }

    player.unmuteButton();
    player.hlsQualitySelector();
</script>
</body>
</html>
