Force a browser repaint (#541)

* force a browser repaint on layout.changed * changeset * Fix for making Chrome render the video properly (#544) * replace fix for making Chrome render the video properly * change how we show/hide the video layer Co-authored-by: Francisco Ramini <framini@gmail.com>
signalwire · May 24, 2022 · 4ad0935 · 4ad0935
1 parent 52d77fd
commit 4ad0935
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/honest-actors-turn.md b/.changeset/honest-actors-turn.md
@@ -0,0 +1,5 @@
+---
+'@signalwire/js': patch
+---
+
+Try to force a browser repaint to move the local video overlay in the correct position
diff --git a/packages/js/src/features/mediaElements/mediaElementsSagas.ts b/packages/js/src/features/mediaElements/mediaElementsSagas.ts
@@ -61,13 +61,13 @@ export const makeVideoElementSaga = ({
  if (!this.domElement) {
  return getLogger().warn('Missing localOverlay to hide')
  }
- this.domElement.style.display = 'none'
+ this.domElement.style.opacity = '0'
  },
  show() {
  if (!this.domElement) {
  return getLogger().warn('Missing localOverlay to show')
  }
- this.domElement.style.display = 'block'
+ this.domElement.style.opacity = '1'
  },
  }
 

diff --git a/packages/js/src/utils/videoElement.ts b/packages/js/src/utils/videoElement.ts
@@ -133,7 +133,7 @@ const makeLayoutChangedHandler =
  * Show myLayer only if the localStream has a valid video track
  */
  if (localStream.getVideoTracks().length > 0) {
- myLayer.style.display = 'block'
+ myLayer.style.opacity = '1'
  }
  myLayer.style.top = top
  myLayer.style.left = left