<!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>
    $( document ).ready(function() {
        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

        const idt = urlParams.get("i") || "test";
        const enableMark = idt !== "test"

        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>
