From f5995eceb747198cc76c07500a161e4b3ca74672 Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 22 Jun 2022 19:11:09 +0200 Subject: [PATCH 1/3] compute initial visible value for element infos manually --- src/room/track/RemoteVideoTrack.ts | 31 ++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/room/track/RemoteVideoTrack.ts b/src/room/track/RemoteVideoTrack.ts index 6143234d8..90eb381e5 100644 --- a/src/room/track/RemoteVideoTrack.ts +++ b/src/room/track/RemoteVideoTrack.ts @@ -110,6 +110,8 @@ export default class RemoteVideoTrack extends RemoteTrack { // the tab comes into focus for the first time. this.debouncedHandleResize(); this.updateVisibility(); + } else { + log.warn('visibility resize observer not triggered'); } } @@ -294,9 +296,9 @@ class HTMLElementInfo implements ElementInfo { handleVisibilityChanged?: () => void; - constructor(element: HTMLMediaElement, visible: boolean = false) { + constructor(element: HTMLMediaElement, visible?: boolean) { this.element = element; - this.visible = visible; + this.visible = visible ?? isElementInViewport(element); this.visibilityChangedAt = 0; } @@ -332,3 +334,28 @@ class HTMLElementInfo implements ElementInfo { getResizeObserver()?.unobserve(this.element); } } + +// does not account for occlusion by other elements +function isElementInViewport(el: HTMLElement) { + let top = el.offsetTop; + let left = el.offsetLeft; + const width = el.offsetWidth; + const height = el.offsetHeight; + const { hidden } = el; + const { opacity } = getComputedStyle(el); + + while (el.offsetParent) { + el = el.offsetParent as HTMLElement; + top += el.offsetTop; + left += el.offsetLeft; + } + + return ( + top < window.pageYOffset + window.innerHeight && + left < window.pageXOffset + window.innerWidth && + top + height > window.pageYOffset && + left + width > window.pageXOffset && + !hidden && + (opacity !== '' ? parseFloat(opacity) > 0 : true) + ); +} From f3ed1a174c7700941539daa94b47063efacf4eab Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 22 Jun 2022 19:11:40 +0200 Subject: [PATCH 2/3] changeset --- .changeset/kind-radios-attend.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/kind-radios-attend.md diff --git a/.changeset/kind-radios-attend.md b/.changeset/kind-radios-attend.md new file mode 100644 index 000000000..3a32f9c67 --- /dev/null +++ b/.changeset/kind-radios-attend.md @@ -0,0 +1,5 @@ +--- +'livekit-client': patch +--- + +compute initial visible value for element infos manually From 5b65074c9f3d2c60f997f2cdb3b48f1316b2147d Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 22 Jun 2022 19:19:23 +0200 Subject: [PATCH 3/3] add check for display: none --- src/room/track/RemoteVideoTrack.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/room/track/RemoteVideoTrack.ts b/src/room/track/RemoteVideoTrack.ts index 90eb381e5..badbf4e87 100644 --- a/src/room/track/RemoteVideoTrack.ts +++ b/src/room/track/RemoteVideoTrack.ts @@ -342,7 +342,7 @@ function isElementInViewport(el: HTMLElement) { const width = el.offsetWidth; const height = el.offsetHeight; const { hidden } = el; - const { opacity } = getComputedStyle(el); + const { opacity, display } = getComputedStyle(el); while (el.offsetParent) { el = el.offsetParent as HTMLElement; @@ -356,6 +356,7 @@ function isElementInViewport(el: HTMLElement) { top + height > window.pageYOffset && left + width > window.pageXOffset && !hidden && - (opacity !== '' ? parseFloat(opacity) > 0 : true) + (opacity !== '' ? parseFloat(opacity) > 0 : true) && + display !== 'none' ); }