From f50f0e1561e9bb16f8cc90d2a6d8a751920761cc Mon Sep 17 00:00:00 2001 From: David Buezas Date: Sun, 9 Jul 2023 15:13:13 +0200 Subject: [PATCH 1/6] Add support for mouse down/up/long-click to ptz UI --- custom_components/webrtc/www/webrtc-camera.js | 42 +++++++++++++++---- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index c44a1d5..c0fb209 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -1,5 +1,6 @@ /** Chrome 63+, Safari 11.1+ */ import {VideoRTC} from "./video-rtc.js?v=1.5.0"; +import {DigitalPTZ} from "./digital-ptz.js?v3.1.1" class WebRTCCamera extends VideoRTC { /** @@ -148,7 +149,6 @@ class WebRTCCamera extends VideoRTC { background-color: black; height: 100%; position: relative; /* important for Safari */ - } .header { position: absolute; top: 6px; @@ -183,9 +183,20 @@ class WebRTCCamera extends VideoRTC { renderPTZ() { if (!this.config.ptz || !this.config.ptz.service) return; - const hasMove = this.config.ptz.data_right; - const hasZoom = this.config.ptz.data_zoom_in; - const hasHome = this.config.ptz.data_home; + let hasMove = false; + let hasZoom = false; + let hasHome = false; + for (const prefix of ['', '_start', '_end', '_long']) { + hasMove ||= this.config.ptz['data' + prefix + '_right']; + hasMove ||= this.config.ptz['data' + prefix + '_left']; + hasMove ||= this.config.ptz['data' + prefix + '_up']; + hasMove ||= this.config.ptz['data' + prefix + '_down']; + + hasZoom ||= this.config.ptz['data' + prefix + '_zoom_in']; + hasZoom ||= this.config.ptz['data' + prefix + '_zoom_out']; + + hasHome ||= this.config.ptz['data' + prefix + '_home']; + } const card = this.querySelector('.card'); card.insertAdjacentHTML('beforebegin', ` @@ -291,14 +302,27 @@ class WebRTCCamera extends VideoRTC { `); - const ptz = this.querySelector('.ptz') - ptz.addEventListener('click', ev => { - const data = this.config.ptz['data_' + ev.target.className]; + const handle = path => { + const data = this.config.ptz['data_' + path]; if (!data) return; - const [domain, service] = this.config.ptz.service.split('.', 2); this.hass.callService(domain, service, data); - }); + } + const ptz = this.querySelector('.ptz') + for (const [start, end] of [['touchstart', 'touchend'], ['mousedown', 'mouseup']]) { + ptz.addEventListener(start, startEvt => { + const { className } = startEvt.target; + handle('start_' + className); + window.addEventListener(end, endEvt => { + handle('end_' + className); + if (endEvt.timeStamp - startEvt.timeStamp > 400) { + handle('long_' + className); + } else { + handle(ev.target.className) + } + }, { once: true }); + }); + } } renderCustomUI() { From b8feeafbc60f5627cb9fe2a724e9b60cecd4515d Mon Sep 17 00:00:00 2001 From: David Buezas Date: Sun, 9 Jul 2023 15:26:53 +0200 Subject: [PATCH 2/6] fix short click --- custom_components/webrtc/www/webrtc-camera.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index c0fb209..94b5138 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -318,7 +318,7 @@ class WebRTCCamera extends VideoRTC { if (endEvt.timeStamp - startEvt.timeStamp > 400) { handle('long_' + className); } else { - handle(ev.target.className) + handle(className); } }, { once: true }); }); From a863cf6e222d0506e8df7e88c9003578366f8afa Mon Sep 17 00:00:00 2001 From: David Buezas Date: Sun, 9 Jul 2023 15:31:26 +0200 Subject: [PATCH 3/6] Fix double triggering in touch devices by event.preventDefault() --- custom_components/webrtc/www/webrtc-camera.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index 94b5138..e9368e8 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -312,8 +312,10 @@ class WebRTCCamera extends VideoRTC { for (const [start, end] of [['touchstart', 'touchend'], ['mousedown', 'mouseup']]) { ptz.addEventListener(start, startEvt => { const { className } = startEvt.target; + startEvt.preventDefault(); handle('start_' + className); window.addEventListener(end, endEvt => { + endEvt.preventDefault(); handle('end_' + className); if (endEvt.timeStamp - startEvt.timeStamp > 400) { handle('long_' + className); From 495d0dbffb772641ec892303cd1e83a9c72198b6 Mon Sep 17 00:00:00 2001 From: David Buezas Date: Sun, 9 Jul 2023 16:14:56 +0200 Subject: [PATCH 4/6] Remove import mistake --- custom_components/webrtc/www/webrtc-camera.js | 1 - 1 file changed, 1 deletion(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index e9368e8..cdaafcc 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -1,6 +1,5 @@ /** Chrome 63+, Safari 11.1+ */ import {VideoRTC} from "./video-rtc.js?v=1.5.0"; -import {DigitalPTZ} from "./digital-ptz.js?v3.1.1" class WebRTCCamera extends VideoRTC { /** From 1e0f24c8f237e4f129ecad07066f555c729663c5 Mon Sep 17 00:00:00 2001 From: David Buezas Date: Sun, 9 Jul 2023 16:15:56 +0200 Subject: [PATCH 5/6] Remove css mistake --- custom_components/webrtc/www/webrtc-camera.js | 1 + 1 file changed, 1 insertion(+) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index cdaafcc..1e8ea91 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -148,6 +148,7 @@ class WebRTCCamera extends VideoRTC { background-color: black; height: 100%; position: relative; /* important for Safari */ + } .header { position: absolute; top: 6px; From cf69d00b3dee63ece9beebefb29739a7f956e47c Mon Sep 17 00:00:00 2001 From: David Buezas Date: Sun, 9 Jul 2023 16:18:01 +0200 Subject: [PATCH 6/6] Replace iOS12 incompatible syntax --- custom_components/webrtc/www/webrtc-camera.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/custom_components/webrtc/www/webrtc-camera.js b/custom_components/webrtc/www/webrtc-camera.js index 1e8ea91..a516b35 100644 --- a/custom_components/webrtc/www/webrtc-camera.js +++ b/custom_components/webrtc/www/webrtc-camera.js @@ -187,15 +187,15 @@ class WebRTCCamera extends VideoRTC { let hasZoom = false; let hasHome = false; for (const prefix of ['', '_start', '_end', '_long']) { - hasMove ||= this.config.ptz['data' + prefix + '_right']; - hasMove ||= this.config.ptz['data' + prefix + '_left']; - hasMove ||= this.config.ptz['data' + prefix + '_up']; - hasMove ||= this.config.ptz['data' + prefix + '_down']; + hasMove = hasMove || this.config.ptz['data' + prefix + '_right']; + hasMove = hasMove || this.config.ptz['data' + prefix + '_left']; + hasMove = hasMove || this.config.ptz['data' + prefix + '_up']; + hasMove = hasMove || this.config.ptz['data' + prefix + '_down']; - hasZoom ||= this.config.ptz['data' + prefix + '_zoom_in']; - hasZoom ||= this.config.ptz['data' + prefix + '_zoom_out']; + hasZoom = hasZoom || this.config.ptz['data' + prefix + '_zoom_in']; + hasZoom = hasZoom || this.config.ptz['data' + prefix + '_zoom_out']; - hasHome ||= this.config.ptz['data' + prefix + '_home']; + hasHome = hasHome || this.config.ptz['data' + prefix + '_home']; } const card = this.querySelector('.card');