hstream/resources/js/player-mobile.js

export function initMobileWidescreen() {
    // Mobile widescreen button
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        // Add Button to fit screen
        var controls = document.getElementsByClassName('plyr__controls')[0];

        var newButton = `
        <button class="plyr__controls__item plyr__control" id="mobile-screen" type="button" aria-pressed="false" style="padding: 5px; padding-top: 2px; padding-bottom: 2px;">
            <i class="fa-solid fa-arrows-left-right-to-line" ></i>
        </button>
        `;

        controls.insertAdjacentHTML('beforeend', newButton);

        // Add event listener
        var stateButton = true;
        var videoTemp = document.querySelector('video');
        const mobilebutton = document.getElementById('mobile-screen');
        mobilebutton.addEventListener('click', function() {
            if (! stateButton) {
                videoTemp.style.objectFit = 'cover';
                stateButton = true;
            } else {
                videoTemp.style.objectFit = null;
                stateButton = false;
            }
        });

        // Set default
        videoTemp.style.objectFit = 'cover';
    }
}

export function mobileDoubleClick(player) {
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        const byClass = document.getElementsByClassName.bind(document),
            createElement = document.createElement.bind(document);

        // Remove all dblclick stuffs
        player.eventListeners.forEach(function (eventListener) {
            if (eventListener.type === 'dblclick') {
                eventListener.element.removeEventListener(eventListener.type, eventListener.callback, eventListener.options);
            }
        });

        // Create overlay that will show the skipped time
        const skip_ol = createElement("div");
        skip_ol.id = "plyr__time_skip"
        byClass("plyr")[0].appendChild(skip_ol)

        // A class to manage multi click count and remember last clicked side (may cause issue otherwise)
        class multiclick_counter {
            constructor() {
                this.timers = []; // collection of timers. Important
                this.count = 0; // click count
                this.reseted = 0; // before resetting what was the count
                this.last_side = null; // L C R 3sides
            }

            clicked() {
                this.count += 1
                var xcount = this.count; // will be checked if click count increased in the time
                this.timers.push(setTimeout(this.reset.bind(this, xcount), 500)); // wait till 500ms for next click
                return this.count
            }

            reset_count(n) {
                // Reset count if clicked on the different side
                this.reseted = this.count
                this.count = n
                for (var i = 0; i < this.timers.length; i++) {
                    clearTimeout(this.timers[i]);
                }
                this.timer = []
            }

            reset(xcount) {
                if (this.count > xcount) { return } // return if clicked after timer started
                // Reset otherwise
                this.count = 0;
                this.last_side = null;
                this.reseted = 0;
                skip_ol.style.opacity = "0";
                this.timer = []
            }
        }

        var counter = new multiclick_counter();

        const poster = byClass("plyr__poster")[0]
        poster.onclick = function (e) {
            const count = counter.clicked()
            if (count < 2) { return } // if not double click

            const rect = e.target.getBoundingClientRect();
            const x = e.clientX - rect.left; //x position within the element.

            // The relative position of click on video
            const width = e.target.offsetWidth;
            const perc = x * 100 / width;

            var panic = true; // panic if the side needs to be checked
            var last_click = counter.last_side

            if (last_click == null) {
                panic = false
            }

            if (perc < 40) {
                if (player.currentTime == 0) {
                    return // won't seek beyond 0
                }
                counter.last_side = "L"
                if (panic && last_click != "L") {
                    counter.reset_count(1)
                    return
                }

                skip_ol.style.opacity = "0.9";
                player.rewind()
                skip_ol.innerHTML = "<i class=\"fa-solid fa-backward\"></i> " + ((count - 1) * 10) + "s";
            }
            else if (perc > 60) {
                if (player.currentTime == player.duration) {
                    return // won't seek beyond duration
                }
                counter.last_side = "R"
                if (panic && last_click != "R") {
                    counter.reset_count(1)
                    return
                }

                skip_ol.style.opacity = "0.9";
                last_click = "R"
                player.forward()
                skip_ol.innerHTML = "<i class=\"fa-solid fa-forward\"></i> " + ((count - 1) * 10) + "s";
            }
            else {
                player.togglePlay()
                counter.last_click = "C"
            }
        }
    }
}