localwebsite: cams: debug video events, support iOS

4 files changed, 48 insertions, 7 deletions

diff --git a/localwebsite/config.php b/localwebsite/config.php
index 262aeae..6b595a4 100644
--- a/localwebsite/config.php
+++ b/localwebsite/config.php
@@ -50,7 +50,7 @@ return [
 
     'static' => [
         'app.css' => 8,
-        'app.js' => 1,
+        'app.js' => 2,
         'polyfills.js' => 1,
         'modem.js' => 1,
         'inverter.js' => 2,
diff --git a/localwebsite/handlers/MiscHandler.php b/localwebsite/handlers/MiscHandler.php
index 61a82e0..486ff45 100644
--- a/localwebsite/handlers/MiscHandler.php
+++ b/localwebsite/handlers/MiscHandler.php
@@ -52,7 +52,7 @@ class MiscHandler extends RequestHandler
     public function GET_cams() {
         global $config;
 
-        list($hls_debug) = $this->input('b:hls_debug');
+        list($hls_debug, $video_events) = $this->input('b:hls_debug, b:video_events');
 
         $hls_opts = [
             'startPosition' => -1
@@ -65,7 +65,8 @@ class MiscHandler extends RequestHandler
         $this->tpl->set([
             'hls_host' => $config['cam_hls_host'],
             'hls_opts' => $hls_opts,
-            'cams' => $config['cam_list']
+            'cams' => $config['cam_list'],
+            'video_events' => $video_events
         ]);
         $this->tpl->set_title('Камеры');
         $this->tpl->render_page('cams.twig');
diff --git a/localwebsite/htdocs/assets/app.js b/localwebsite/htdocs/assets/app.js
index da5052d..c08490f 100644
--- a/localwebsite/htdocs/assets/app.js
+++ b/localwebsite/htdocs/assets/app.js
@@ -41,4 +41,22 @@ function extend(a, b) {
 
 function ge(id) {
     return document.getElementById(id);
-}
\ No newline at end of file
+}
+
+(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),
+    };
+})();
diff --git a/localwebsite/templates-web/cams.twig b/localwebsite/templates-web/cams.twig
index 5d25a9d..cf6009c 100644
--- a/localwebsite/templates-web/cams.twig
+++ b/localwebsite/templates-web/cams.twig
@@ -30,10 +30,32 @@ function setupHls(video, name, useHls) {
             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;
-        video.addEventListener('canplay', function () {
-            video.play();
-        });
+
+        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);
+        }
     }
 }