fix: Video Demo improvements

sample-apps/react/react-video-demo/src/components/Participant/Participant.tsx

@@ -28,8 +28,8 @@ export type Props = {
 };
 
 const VideoPlaceholder = forwardRef<HTMLDivElement, VideoPlaceholderProps>(
-  ({ participant }, ref) => (
-    <div className={styles.placeholder} ref={ref}>
+  ({ participant, style }, ref) => (
+    <div className={styles.placeholder} style={style} ref={ref}>
       <div className={styles.fallAvatarContainer}>
         <div className={styles.fallbackInitial}>
           {(participant.name || participant.userId)?.split('')[0]}
@@ -97,12 +97,12 @@ export const Overlay: FC<{
   );
 };
 
-export const Participant: FC<Props> = ({
+export const Participant = ({
   className,
   call,
   participant,
   slider,
-}) => {
+}: Props) => {
   const {
     publishedTracks,
     isSpeaking,
@@ -125,15 +125,18 @@ export const Participant: FC<Props> = ({
   const isPinned = !!participant.pin;
 
   useEffect(() => {
-    if (connectionQuality === SfuModels.ConnectionQuality.POOR) {
+    if (
+      isLocalParticipant &&
+      connectionQuality === SfuModels.ConnectionQuality.POOR
+    ) {
       addNotification({
         id: uuid(),
         message:
           'Poor connection quality. Please check your internet connection.',
         icon: <Signal />,
       });
     }
-  }, [connectionQuality, addNotification]);
+  }, [connectionQuality, addNotification, isLocalParticipant]);
 
   const rootClassNames = classnames(
     styles.root,

sample-apps/react/react-video-demo/src/components/ParticipantsSlider/ParticipantsSlider.tsx

@@ -2,8 +2,11 @@ import { FC, useEffect, useState } from 'react';
 import { FreeMode, Grid as GridModule, Mousewheel, Navigation } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import classnames from 'classnames';
-import { Call, StreamVideoParticipant } from '@stream-io/video-react-sdk';
-import { SfuModels } from '@stream-io/video-client';
+import {
+  Call,
+  SfuModels,
+  StreamVideoParticipant,
+} from '@stream-io/video-react-sdk';
 
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '../Icons';
 import Participant from '../Participant';
@@ -80,7 +83,7 @@ export const ParticipantsSlider: FC<Props> = ({
     } else {
       setMode(mode);
     }
-  }, [breakpoint]);
+  }, [breakpoint, mode]);
 
   const rootClassName = classnames(
     styles.root,
@@ -133,7 +136,7 @@ export const ParticipantsSlider: FC<Props> = ({
           }}
           className={swiperClassName}
         >
-          {participants?.map((participant, index) => {
+          {participants?.map((participant) => {
             const particpantHasVideo = participant.publishedTracks.includes(
               SfuModels.TrackType.VIDEO,
             );
@@ -144,9 +147,11 @@ export const ParticipantsSlider: FC<Props> = ({
             });
 
             return (
-              <SwiperSlide key={index} className={slideClassName}>
+              <SwiperSlide
+                key={participant.sessionId}
+                className={slideClassName}
+              >
                 <Participant
-                  key={participant.sessionId}
                   call={call}
                   className={participantClassName}
                   participant={participant}

sample-apps/react/react-video-demo/src/components/ScreenShareParticipants/ScreenShareParticipants.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import {
   Call,
   SfuModels,
@@ -22,51 +22,50 @@ export const ScreenShareParticipants: FC<Props> = ({ call }) => {
     undefined,
   );
 
-  const { useLocalParticipant, useParticipants } = useCallStateHooks();
-  const localParticipant = useLocalParticipant();
+  const { useParticipants } = useCallStateHooks();
   const allParticipants = useParticipants();
   const firstScreenSharingParticipant = allParticipants.find((p) =>
     p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE),
   );
 
-  const wrapper: any = useRef();
+  const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (wrapper) {
-      const resizeObserver = new ResizeObserver((event) => {
-        if (!event[0]?.contentBoxSize) {
-          setWrapperHeight(event[0].contentRect.height);
-        } else {
-          setWrapperHeight(event[0].contentBoxSize[0].blockSize);
-        }
-      });
-
-      if (wrapper) {
-        resizeObserver.observe(wrapper.current);
+    if (!wrapper) return;
+    const resizeObserver = new ResizeObserver((event) => {
+      if (!event[0]?.contentBoxSize) {
+        setWrapperHeight(event[0].contentRect.height);
+      } else {
+        setWrapperHeight(event[0].contentBoxSize[0].blockSize);
       }
+    });
+    if (wrapper) {
+      resizeObserver.observe(wrapper);
     }
+    return () => {
+      resizeObserver.unobserve(wrapper);
+      resizeObserver.disconnect();
+    };
   }, [wrapper]);
 
   const stopSharing = useCallback(async () => {
     await call.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
   }, [call]);
 
-  if (
-    firstScreenSharingParticipant?.sessionId === localParticipant?.sessionId
-  ) {
-    return (
-      <div className={styles.remoteView} ref={wrapper}>
-        {wrapperHeight ? (
-          <>
-            {firstScreenSharingParticipant ? (
-              <div className={styles.screenShareContainer}>
-                <Video
-                  className={styles.screenShare}
-                  participant={firstScreenSharingParticipant}
-                  trackType="screenShareTrack"
-                  autoPlay
-                  muted
-                />
+  return (
+    <div className={styles.remoteView} ref={setWrapper}>
+      {wrapperHeight ? (
+        <>
+          {firstScreenSharingParticipant ? (
+            <div className={styles.screenShareContainer}>
+              <Video
+                className={styles.screenShare}
+                participant={firstScreenSharingParticipant}
+                trackType="screenShareTrack"
+                autoPlay
+                muted
+              />
+              {firstScreenSharingParticipant.isLocalParticipant && (
                 <div className={styles.localNotification}>
                   <div className={styles.localNotificationHeading}>
                     <ShareScreen className={styles.screenShareIcon} />
@@ -82,58 +81,23 @@ export const ScreenShareParticipants: FC<Props> = ({ call }) => {
                     onClick={stopSharing}
                   >
                     <Close className={styles.closeIcon} />
-                    <span> Stop Screen Sharing</span>
+                    <span>Stop Screen Sharing</span>
                   </Button>
                 </div>
-              </div>
-            ) : null}
-
-            <div className={styles.remoteParticipants}>
-              <ParticipantsSlider
-                call={call}
-                mode="vertical"
-                participants={allParticipants}
-                height={wrapperHeight}
-              />
+              )}
             </div>
-          </>
-        ) : null}
-      </div>
-    );
-  }
+          ) : null}
 
-  if (
-    firstScreenSharingParticipant?.sessionId !== localParticipant?.sessionId
-  ) {
-    return (
-      <div className={styles.remoteView} ref={wrapper}>
-        {wrapperHeight ? (
-          <>
-            {firstScreenSharingParticipant ? (
-              <div className={styles.screenShareContainer}>
-                <Video
-                  className={styles.screenShare}
-                  participant={firstScreenSharingParticipant}
-                  trackType="screenShareTrack"
-                  autoPlay
-                  muted
-                />
-              </div>
-            ) : null}
-
-            <div className={styles.remoteParticipants}>
-              <ParticipantsSlider
-                call={call}
-                mode="vertical"
-                participants={allParticipants}
-                height={wrapperHeight}
-              />
-            </div>
-          </>
-        ) : null}
-      </div>
-    );
-  }
-
-  return null;
+          <div className={styles.remoteParticipants}>
+            <ParticipantsSlider
+              call={call}
+              mode="vertical"
+              participants={allParticipants}
+              height={wrapperHeight}
+            />
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
 };