diff --git a/src/components/VideoFeed.vue b/src/components/VideoFeed.vue index b2b2c33..5db09c4 100644 --- a/src/components/VideoFeed.vue +++ b/src/components/VideoFeed.vue @@ -31,10 +31,17 @@ export default { // Mutation Observer, to detect if the user deletes the QR code via dev tools. observer: null, + + // Window resize debouncer: temporarily hide videos after a resize event, so e.g., + // if dev tools are opened and the debugger detector kicks in, videos may be hidden + // while the page is paused. + windowResizeTimer: null, + windowResizeCooldown: false, }; }, mounted() { this.initWatermarkObserver(); + this.initWindowResizer(); }, beforeUnmount() { this.observer?.disconnect(); @@ -201,6 +208,20 @@ export default { onWatermarkRemoved() { this.$emit('watermark-removed', this.username); }, + initWindowResizer() { + window.addEventListener('resize', this.onWindowResized); + }, + onWindowResized() { + if (this.windowResizeTimer !== null) { + clearTimeout(this.windowResizeTimer); + } + + this.windowResizeCooldown = true; + this.windowResizeTimer = setTimeout(() => { + this.windowResizeCooldown = false; + this.windowResizetimer = null; + }, 1000); + }, } } @@ -216,7 +237,8 @@ export default { disablepictureinpicture playsinline oncontextmenu="return false;" - :muted="localVideo"> + :muted="localVideo" + :class="{'invisible': windowResizeCooldown}">