From 9efd84cb77b98c372917e6bfa36161763969dddd Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Mon, 18 Sep 2023 16:41:01 +0200
Subject: [PATCH] fix: hide the video element when a placeholder is visible
 (#1094)

Applies `display: none` to the `<video>` element when the participant's
video isn't playing and a placeholder is visible.
Enables building nicer user experience in designs that Video Placeholder
that utilize transparency.

Styling is done through `str-video__video--no-video` CSS selector that
allows an integrator to further customize the behavior and attach more
custom styles.

### Implementation notes
The `<video>` element needs to stay mounted as we need to be notified
about it's `play` or `pause` events that may occur in an uncontrolled
fashion in poor network conditions (e.g.: huge packet loss, the browser
may pause the video, and once the network is stable enough, will resume
playback).
---
 .../Video/DefaultVideoPlaceholder.tsx         |  4 +--
 .../src/core/components/Video/Video.tsx       | 25 +++++++++----------
 packages/styling/src/Video/Video-layout.scss  |  4 +++
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx b/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx
index ad87c47674..854be04922 100644
--- a/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx
+++ b/packages/react-sdk/src/core/components/Video/DefaultVideoPlaceholder.tsx
@@ -10,9 +10,7 @@ export const DefaultVideoPlaceholder = forwardRef<
   VideoPlaceholderProps
 >(({ participant, style }, ref) => {
   const [error, setError] = useState(false);
-
-  const name = participant?.name || participant?.userId;
-
+  const name = participant.name || participant.userId;
   return (
     <div className="str-video__video-placeholder" style={style} ref={ref}>
       {(!participant.image || error) &&
diff --git a/packages/react-sdk/src/core/components/Video/Video.tsx b/packages/react-sdk/src/core/components/Video/Video.tsx
index 20a2dd531e..a29187f901 100644
--- a/packages/react-sdk/src/core/components/Video/Video.tsx
+++ b/packages/react-sdk/src/core/components/Video/Video.tsx
@@ -62,20 +62,18 @@ export const Video = ({
   const [isWideMode, setIsWideMode] = useState(true);
 
   const stream =
-    trackType === 'none'
-      ? undefined
-      : trackType === 'videoTrack'
+    trackType === 'videoTrack'
       ? videoStream
-      : screenShareStream;
+      : trackType === 'screenShareTrack'
+      ? screenShareStream
+      : undefined;
 
   const isPublishingTrack =
-    trackType === 'none'
-      ? false
-      : publishedTracks.includes(
-          trackType === 'videoTrack'
-            ? SfuModels.TrackType.VIDEO
-            : SfuModels.TrackType.SCREEN_SHARE,
-        );
+    trackType === 'videoTrack'
+      ? publishedTracks.includes(SfuModels.TrackType.VIDEO)
+      : trackType === 'screenShareTrack'
+      ? publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE)
+      : false;
 
   const isInvisible =
     trackType === 'none' ||
@@ -118,14 +116,15 @@ export const Video = ({
 
   if (!call) return null;
 
+  const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
   return (
     <>
       <video
         {...rest}
         className={clsx(className, 'str-video__video', {
+          'str-video__video--no-video': displayPlaceholder,
           'str-video__video--tall': !isWideMode,
-          'str-video__video--mirror':
-            isLocalParticipant && trackType === 'videoTrack',
+          'str-video__video--mirror': mirrorVideo,
           'str-video__video--screen-share': trackType === 'screenShareTrack',
         })}
         data-user-id={userId}
diff --git a/packages/styling/src/Video/Video-layout.scss b/packages/styling/src/Video/Video-layout.scss
index dfc55da782..446be51f73 100644
--- a/packages/styling/src/Video/Video-layout.scss
+++ b/packages/styling/src/Video/Video-layout.scss
@@ -12,4 +12,8 @@
   &--mirror {
     transform: scaleX(-1);
   }
+
+  &--no-video {
+    display: none;
+  }
 }