From b39b733e2233ae0808dca3ead336078c6e728055 Mon Sep 17 00:00:00 2001
From: Ylian Saint-Hilaire <ysainthilaire@hotmail.com>
Date: Tue, 5 Jan 2021 03:10:45 -0800
Subject: [PATCH] MeshMessenger improvements.

---
 translate/translate.json        |  6 ++++++
 views/default-mobile.handlebars |  2 +-
 views/default.handlebars        |  6 +++---
 views/messenger.handlebars      | 18 ++++++++++++++++--
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/translate/translate.json b/translate/translate.json
index 31dcb927..d3b538e4 100644
--- a/translate/translate.json
+++ b/translate/translate.json
@@ -8089,6 +8089,12 @@
         "account-check.html->2->5->1"
       ]
     },
+    {
+      "en": "Click here to view.",
+      "xloc": [
+        "messenger.handlebars->remoteVideo->remoteClickToView"
+      ]
+    },
     {
       "cs": "Klikněte na OK a bude vám zaslán ověřovací e-mail na:",
       "de": "Auf OK klicken, um eine Bestätigungsmail an folgende Adresse zu senden:",
diff --git a/views/default-mobile.handlebars b/views/default-mobile.handlebars
index fab1c731..5ff0b250 100644
--- a/views/default-mobile.handlebars
+++ b/views/default-mobile.handlebars
@@ -391,7 +391,7 @@
         .devList5 {
             padding-left: 12px;
             padding-top: 3px;
-            color: gray
+            color: #444
         }
 
         .deskButton {
diff --git a/views/default.handlebars b/views/default.handlebars
index 8651c080..d7b170ed 100644
--- a/views/default.handlebars
+++ b/views/default.handlebars
@@ -3243,7 +3243,7 @@
                 var xuserid = args.gotouser;
                 if (args.gotouser.indexOf('/') < 0) { xuserid = 'user/' + domain + '/' + args.gotouser; }
                 if ((users == null) || (users[xuserid] == null)) return; // This user is not loaded yet
-                gotoUser(xuserid);
+                gotoUser(encodeURIComponentEx(xuserid));
                 go(xviewmode);
                 goBackStack.push(4);
             } else if (args.gotougrp != null) {
@@ -12923,7 +12923,7 @@
                     var ruser = null;
                     if (users != null) { ruser = users[rec.userids[0]]; }
                     if (ruser != null) {
-                        sessionName += ' - <a href=# onclick=\'gotoUser("' + rec.userids[0] + '")\'>' + EscapeHtml(ruser.name) + '</a>';
+                        sessionName += ' - <a href=# onclick=\'gotoUser("' + encodeURIComponentEx(rec.userids[0]) + '")\'>' + EscapeHtml(ruser.name) + '</a>';
                     } else {
                         sessionName += ' - ' + EscapeHtml(rec.userids[0].split('/')[2]);
                     }
@@ -13641,7 +13641,7 @@
             if ((xxcurrentView == 11) && (desktop != null) && (desktop.m.recordedData != null)) { deskRecordSession(); }
 
             // If we are trying to go to "My Users" and we are not a user manager, move to recordings
-            if (((x == 4) && ((userinfo.siteadmin & 2) == 0)) || ((features & 4) != 0)) { x = 52; }
+            if (((x == 4) && (userinfo != null) && ((userinfo.siteadmin & 2) == 0)) || ((features & 4) != 0)) { x = 52; }
 
             // Stop the list graph if active
             if (xxcurrentView == 17) deviceDetailsStatsClear();
diff --git a/views/messenger.handlebars b/views/messenger.handlebars
index 1bc6b2f3..4fafc184 100644
--- a/views/messenger.handlebars
+++ b/views/messenger.handlebars
@@ -47,7 +47,8 @@
         </div>
         <div id="remoteVideo" style="position:absolute;right:24px;top:45px;width:320px;height:calc(240px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
             <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Remote</div>
-            <video id="remoteVideoCanvas" autoplay style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);background-color:black"></video>
+            <video id="remoteVideoCanvas" autoplay style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);background-color:black" onclick="remotePlay(event)"></video>
+            <div id="remoteClickToView" style="position:absolute;top:20px;left:0;width:100%;height:calc(100% - 30px);color:white;text-align:center;padding-top:20px;display:none" onclick="remotePlay(event)">Click here to view.</div>
         </div>
         <div id="localVideo" style="position:absolute;right:24px;top:320px;width:160px;height:calc(120px + 30px);background-color:gray;border-radius:12px 12px 12px 12px;box-shadow:3px 3px 10px gray;display:none">
             <div style="position:absolute;right:0;left:0;top:2.5px;text-align:center">Local</div>
@@ -272,9 +273,20 @@
                 }
                 webrtc.ontrack = function (event) {
                     //console.log('ontrack', id);
+                    QV('remoteClickToView', false);
                     var video = Q('remoteVideoCanvas');
                     video.srcObject = remoteStream = event.streams[0];
-                    video.onloadedmetadata = function (e) { video.play(); };
+                    video.onloadedmetadata = function (e) {
+                        var promise = video.play();
+                        if (promise !== undefined) {
+                            promise.then(function() {
+                                // Video start ok
+                            }).catch(function(err) {
+                                // Video start error, display a play button
+                                QV('remoteClickToView', true);
+                            })
+                        }
+                    };
                     displayRemoteVideo(true);
                 }
                 //webrtc.onremovetrack = function (event) { console.log('onremovetrack'); }
@@ -293,6 +305,8 @@
                 return webrtc;
             }
 
+            function remotePlay() { QV('remoteClickToView', false); Q('remoteVideoCanvas').play(); }
+
             function webRtcHandleOffer(id, description) {
                 //console.log('webRtcHandleOffer', description.sdp.length);
                 var webrtc = webrtcSessions[id];