cams page frontend refator

4 files changed, 158 insertions, 123 deletions

diff --git a/localwebsite/config.php b/localwebsite/config.php
index f5f8c80..68c1ed5 100644
--- a/localwebsite/config.php
+++ b/localwebsite/config.php
@@ -49,8 +49,8 @@ return [
     ],
 
     'static' => [
-        'app.css' => 9,
-        'app.js' => 2,
+        'app.css' => 10,
+        'app.js' => 4,
         'polyfills.js' => 1,
         'modem.js' => 1,
         'inverter.js' => 2,
diff --git a/localwebsite/htdocs/assets/app.css b/localwebsite/htdocs/assets/app.css
index 59c0f35..d93c4f7 100644
--- a/localwebsite/htdocs/assets/app.css
+++ b/localwebsite/htdocs/assets/app.css
@@ -152,25 +152,22 @@
     40% { opacity: 1; }
 }
 
-/* cams page */
-@media only screen and (min-width: 640px) {
-    .camfeeds {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-    }
 
-    .camfeeds > video {
-        display: flex;
-        flex-basis: calc(50% - 20px);
-        justify-content: center;
-        flex-direction: column;
-        width: calc(50% - 10px);
-        margin: 5px;
-    }
-}
-@media only screen and (max-width: 639px) {
-    .camfeeds > video {
-        max-width: 100%;
-    }
-}
\ No newline at end of file
+.camfeeds:not(.is_mobile) {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.camfeeds:not(.is_mobile) > video {
+    display: flex;
+    flex-basis: calc(50% - 20px);
+    justify-content: center;
+    flex-direction: column;
+    width: calc(50% - 10px);
+    margin: 5px;
+}
+
+.camfeeds.is_mobile > video {
+    max-width: 100%;
+}
diff --git a/localwebsite/htdocs/assets/app.js b/localwebsite/htdocs/assets/app.js
index c08490f..ff2295d 100644
--- a/localwebsite/htdocs/assets/app.js
+++ b/localwebsite/htdocs/assets/app.js
@@ -1,4 +1,7 @@
-var ajax = {
+(function() {
+var RE_WHITESPACE = /[\t\r\n\f]/g
+
+window.ajax = {
     get: function(url, data) {
         if (typeof data == 'object') {
             var index = 0;
@@ -35,28 +38,138 @@ var ajax = {
     }
 };
 
-function extend(a, b) {
+window.extend = function(a, b) {
     return Object.assign(a, b);
 }
 
-function ge(id) {
+window.ge = function(id) {
     return document.getElementById(id);
 }
 
-(function() {
-    var ua = navigator.userAgent.toLowerCase();
-    window.browserInfo = {
-        version: (ua.match(/.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,'0'])[1],
-        //opera: /opera/i.test(ua),
-        msie: (/msie/i.test(ua) && !/opera/i.test(ua)) || /trident/i.test(ua),
-        mozilla: /firefox/i.test(ua),
-        android: /android/i.test(ua),
-        mac: /mac/i.test(ua),
-        samsungBrowser: /samsungbrowser/i.test(ua),
-        chrome: /chrome/i.test(ua),
-        safari: /safari/i.test(ua),
-        mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile|android/i.test(ua),
-        operaMini: /opera mini/i.test(ua),
-        ios: /iphone|ipod|ipad|watchos/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
-    };
-})();
+var ua = navigator.userAgent.toLowerCase();
+window.browserInfo = {
+    version: (ua.match(/.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,'0'])[1],
+    //opera: /opera/i.test(ua),
+    msie: (/msie/i.test(ua) && !/opera/i.test(ua)) || /trident/i.test(ua),
+    mozilla: /firefox/i.test(ua),
+    android: /android/i.test(ua),
+    mac: /mac/i.test(ua),
+    samsungBrowser: /samsungbrowser/i.test(ua),
+    chrome: /chrome/i.test(ua),
+    safari: /safari/i.test(ua),
+    mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile|android/i.test(ua),
+    operaMini: /opera mini/i.test(ua),
+    ios: /iphone|ipod|ipad|watchos/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
+};
+
+window.isTouchDevice = function() {
+    return 'ontouchstart' in window || navigator.msMaxTouchPoints;
+}
+
+window.hasClass = function(el, name) {
+    if (!el)
+        throw new Error('hasClass: invalid element')
+
+    if (el.nodeType !== 1)
+        throw new Error('hasClass: expected nodeType is 1, got' + el.nodeType)
+
+    if (window.DOMTokenList && el.classList instanceof DOMTokenList) {
+        return el.classList.contains(name)
+    } else {
+        return (" " + el.className + " ").replace(RE_WHITESPACE, " ").indexOf(" " + name + " ") >= 0
+    }
+}
+
+window.addClass = function(el, name) {
+    if (!hasClass(el, name)) {
+        el.className = (el.className ? el.className + ' ' : '') + name;
+        return true
+    }
+    return false
+}
+
+window.Cameras = {
+    hlsOptions: null,
+    hlsHost: null,
+    hlsProto: null,
+    debugVideoEvents: false,
+
+    setupHls: function(video, name, useHls) {
+        var src = this.hlsProto + '://' + this.hlsHost + '/ipcam/' + name + '/live.m3u8';
+
+        // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
+
+        // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
+        // This is using the built-in support of the plain video element, without using hls.js.
+
+        if (useHls) {
+            var config = this.hlsOptions;
+            config.xhrSetup = function (xhr,url) {
+                xhr.withCredentials = true;
+            };
+
+            var hls = new Hls(config);
+            hls.loadSource(src);
+            hls.attachMedia(video);
+            hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+                video.muted = true;
+                video.play();
+            });
+        } else {
+            console.warn('hls.js is not supported, trying the native way...')
+
+            video.autoplay = true;
+            video.muted = true;
+            if (window.browserInfo.ios)
+                video.setAttribute('controls', 'controls');
+
+            video.src = src;
+
+            var events = ['canplay'];
+            if (this.debugVideoEvents)
+                events.push('canplay', 'canplaythrough', 'durationchange', 'ended', 'loadeddata', 'loadedmetadata', 'pause', 'play', 'playing', 'progress', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'waiting');
+
+            for (var i = 0; i < events.length; i++) {
+                var evt = events[i];
+                (function(evt, video, name) {
+                    video.addEventListener(evt, function(e) {
+                        if (this.debugVideoEvents)
+                            console.log(name + ': ' + evt, e);
+
+                        if (!window.browserInfo.ios && ['canplay', 'loadedmetadata'].includes(evt))
+                            video.play();
+                    })
+                })(evt, video, name);
+            }
+        }
+    },
+
+    init: function(cams, options, proto, host, debugVideoEvents) {
+        // this.cams = cams;
+        this.hlsOptions = options;
+        this.hlsProto = proto;
+        this.hlsHost = host;
+        this.debugVideoEvents = debugVideoEvents
+
+        let useHls = Hls.isSupported();
+        if (!useHls && !this.hasFallbackSupport()) {
+            alert('Neither HLS nor vnd.apple.mpegurl is not supported by your browser.');
+            return;
+        }
+
+        for (var i = 0; i < cams.length; i++) {
+            var name = cams[i];
+            var video = document.createElement('video');
+            video.setAttribute('id', 'video-'+name);
+            document.getElementById('videos').appendChild(video);
+
+            this.setupHls(video, name, useHls);
+        }
+    },
+
+    hasFallbackSupport: function() {
+        var video = document.createElement('video');
+        return video.canPlayType('application/vnd.apple.mpegurl');
+    },
+};
+})();
\ No newline at end of file
diff --git a/localwebsite/templates-web/cams.twig b/localwebsite/templates-web/cams.twig
index 4fc815d..0c61bc5 100644
--- a/localwebsite/templates-web/cams.twig
+++ b/localwebsite/templates-web/cams.twig
@@ -6,84 +6,9 @@
 
 <div id="videos" class="camfeeds"></div>
 
-<script>
-function hasFallbackSupport() {
-    var video = document.createElement('video');
-    return video.canPlayType('application/vnd.apple.mpegurl');
+{% js %}
+if (isTouchDevice()) {
+    addClass(ge('videos'), 'is_mobile');
 }
-
-function setupHls(video, name, useHls) {
-    var src = '{{ hls_proto }}://{{ hls_host }}/ipcam/'+name+'/live.m3u8';
-    {% if hls_access_key %}
-    src += '?access_key={{ hls_access_key }}';
-    {% endif %}
-
-    // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
-
-    // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
-    // This is using the built-in support of the plain video element, without using hls.js.
-
-    if (useHls) {
-        var config = {{ hls_opts|json_encode|raw }};
-        config.xhrSetup = function (xhr,url) {
-            xhr.withCredentials = true;
-        };
-
-        var hls = new Hls(config);
-        hls.loadSource(src);
-        hls.attachMedia(video);
-        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
-            video.muted = true;
-            video.play();
-        });
-    } else {
-        console.warn('hls.js is not supported, trying the native way...')
-
-        video.autoplay = true;
-        video.muted = true;
-        if (window.browserInfo.ios)
-            video.setAttribute('controls', 'controls');
-
-        video.src = src;
-
-        var events = ['canplay'];
-        {% if video_events %}
-        events.push('canplay', 'canplaythrough', 'durationchange', 'ended', 'loadeddata', 'loadedmetadata', 'pause', 'play', 'playing', 'progress', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'waiting');
-        {% endif %}
-
-        for (var i = 0; i < events.length; i++) {
-            var evt = events[i];
-            (function(evt, video, name) {
-                video.addEventListener(evt, function(e) {
-                    {% if video_events %}
-                    console.log(name + ': ' + evt, e);
-                    {% endif %}
-                    if (!window.browserInfo.ios && ['canplay', 'loadedmetadata'].includes(evt))
-                        video.play();
-                })
-            })(evt, video, name);
-        }
-    }
-}
-
-function init() {
-    let useHls = Hls.isSupported();
-    if (!useHls && !hasFallbackSupport()) {
-        alert('Neither HLS nor vnd.apple.mpegurl is not supported by your browser.');
-        return;
-    }
-
-    var cams = {{ cams|json_encode|raw }};
-    for (var i = 0; i < cams.length; i++) {
-        var name = cams[i];
-        var video = document.createElement('video');
-        // video.setAttribute('height', '400');
-        video.setAttribute('id', 'video-'+name);
-        document.getElementById('videos').appendChild(video);
-
-        setupHls(video, name, useHls);
-    }
-}
-
-init();
-</script>
\ No newline at end of file
+Cameras.init({{ cams|json_encode|raw }}, {{ hls_opts|json_encode|raw }}, '{{ hls_proto }}', '{{ hls_host }}', {{ video_events ? 'true' : 'false' }});
+{% endjs %}
\ No newline at end of file