Init

resources/js/player-mobile.js

@@ -0,0 +1,144 @@
+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"
+            }
+        }
+    }
+}