From ff0367d3a25c5e79e1d3ed31361f53bc497eacef Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 22 Aug 2024 11:57:00 +0300 Subject: [PATCH 1/4] Feat: Added functions for full screen when double clicking on Stream (skin.js) --- web/skins/classic/js/skin.js | 43 ++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index 3146e8c476..4c4b313b65 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -39,6 +39,7 @@ var icons = { }; var panZoomEnabled = true; //Add it to settings in the future +var expiredTap; //Time between touch screen clicks. Used to analyze double clicks function checkSize() { if ( 0 ) { @@ -1201,4 +1202,46 @@ function loadFontFaceObserver() { }); } +var doubleClickOnStream = function (event, touchEvent) { + let target = null; + if (event.target) {// Click NOT on touch screen, use THIS + //Process only double clicks directly on the image, excluding clicks, + //for example, on zoom buttons and other elements located in the image area. + if (event.target.id && + (event.target.id.indexOf('evtStream') != -1 || event.target.id.indexOf('liveStream') != -1)){ + target = this; + } + } else {// Click on touch screen, use EVENT + if (touchEvent.target.id && + (touchEvent.target.id.indexOf('evtStream') != -1 || touchEvent.target.id.indexOf('liveStream') != -1)){ + target = event; + } + } + + if (target) { + if (document.fullscreenElement) { + closeFullscreen(); + } else { + openFullscreen(target); + } + } +} + +var doubleTouch = function (e) { + if (e.touches.length === 1) { + if (!expiredTap) { + expiredTap = e.timeStamp + 300; + } else if (e.timeStamp <= expiredTap) { + // remove the default of this event ( Zoom ) + e.preventDefault(); + doubleClickOnStream(this, e); + // then reset the variable for other "double Touches" event + expiredTap = null; + } else { + // if the second touch was expired, make it as it's the first + expiredTap = e.timeStamp + 300; + } + } +} + loadFontFaceObserver(); From 79c8042b853279da5c2df940605d0c1a197ce63c Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 22 Aug 2024 12:11:09 +0300 Subject: [PATCH 2/4] Added event listener for double click (event.js) --- web/skins/classic/views/js/event.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/web/skins/classic/views/js/event.js b/web/skins/classic/views/js/event.js index d12f7b12a4..77637e20c8 100644 --- a/web/skins/classic/views/js/event.js +++ b/web/skins/classic/views/js/event.js @@ -1642,6 +1642,14 @@ function initPage() { removeTag(tag); }); + // Event listener for double click + //var elStream = document.querySelectorAll('[id ^= "liveStream"], [id ^= "evtStream"]'); + var elStream = document.querySelectorAll('[id = "wrapperEventVideo"]'); + Array.prototype.forEach.call(elStream, (el) => { + el.addEventListener('touchstart', doubleTouch); + el.addEventListener('dblclick', doubleClickOnStream); + }); + streamPlay(); if ( parseInt(ZM_OPT_USE_GEOLOCATION) && parseFloat(eventData.Latitude) && parseFloat(eventData.Longitude)) { From 4911e962fa49ad68f8b971f79da920ae3551e37f Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 22 Aug 2024 12:19:11 +0300 Subject: [PATCH 3/4] Chore: Fix space & semi (skin.js) --- web/skins/classic/js/skin.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index 4c4b313b65..07f85bf8a3 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -1202,18 +1202,18 @@ function loadFontFaceObserver() { }); } -var doubleClickOnStream = function (event, touchEvent) { +var doubleClickOnStream = function(event, touchEvent) { let target = null; if (event.target) {// Click NOT on touch screen, use THIS - //Process only double clicks directly on the image, excluding clicks, + //Process only double clicks directly on the image, excluding clicks, //for example, on zoom buttons and other elements located in the image area. - if (event.target.id && - (event.target.id.indexOf('evtStream') != -1 || event.target.id.indexOf('liveStream') != -1)){ + if (event.target.id && + (event.target.id.indexOf('evtStream') != -1 || event.target.id.indexOf('liveStream') != -1)) { target = this; } } else {// Click on touch screen, use EVENT - if (touchEvent.target.id && - (touchEvent.target.id.indexOf('evtStream') != -1 || touchEvent.target.id.indexOf('liveStream') != -1)){ + if (touchEvent.target.id && + (touchEvent.target.id.indexOf('evtStream') != -1 || touchEvent.target.id.indexOf('liveStream') != -1)) { target = event; } } @@ -1225,9 +1225,9 @@ var doubleClickOnStream = function (event, touchEvent) { openFullscreen(target); } } -} +}; -var doubleTouch = function (e) { +var doubleTouch = function(e) { if (e.touches.length === 1) { if (!expiredTap) { expiredTap = e.timeStamp + 300; @@ -1242,6 +1242,6 @@ var doubleTouch = function (e) { expiredTap = e.timeStamp + 300; } } -} +}; loadFontFaceObserver(); From 4f59d1597219ea736b28b45ecc1e71fed6cdb851 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 22 Aug 2024 13:52:03 +0300 Subject: [PATCH 4/4] Fix: Image scaling for some mobile devices in fullscreen mode (skin.js) --- web/skins/classic/js/skin.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/skins/classic/js/skin.js b/web/skins/classic/js/skin.js index 07f85bf8a3..d0618c9943 100644 --- a/web/skins/classic/js/skin.js +++ b/web/skins/classic/js/skin.js @@ -1224,6 +1224,12 @@ var doubleClickOnStream = function(event, touchEvent) { } else { openFullscreen(target); } + if (isMobile()) { + setTimeout(function() { + //For some mobile devices resizing does not work. You need to set a delay and re-call the 'resize' event + window.dispatchEvent(new Event('resize')); + }, 500); + } } };