fix: hook dependency issues, re-compute video aspect ratio after trac…

…k unmute (#1067)

#### Video Demo
- Sorts out effect dependencies in CallControl components.
- Tall videos now render without cropping

#### SDK
- Fixes an issue where track dimensions can't be determined early by
adding a new event listener that recomputes everything after the bound
track unmutes.

packages/react-sdk/src/core/components/Video/Video.tsx

@@ -96,22 +96,23 @@ export const Video = ({
   useEffect(() => {
     if (!stream || !videoElement) return;
 
+    const [track] = stream.getVideoTracks();
+    if (!track) return;
+
     const handlePlayPause = () => {
       setVideoPlaying(!videoElement.paused);
 
-      const [track] = stream.getVideoTracks();
-      if (!track) return;
-
-      // TODO: find out why track dimensions aren't coming in
       const { width = 0, height = 0 } = track.getSettings();
       setIsWideMode(width >= height);
     };
 
     videoElement.addEventListener('play', handlePlayPause);
     videoElement.addEventListener('pause', handlePlayPause);
+    track.addEventListener('unmute', handlePlayPause);
     return () => {
       videoElement.removeEventListener('play', handlePlayPause);
       videoElement.removeEventListener('pause', handlePlayPause);
+      track.removeEventListener('unmute', handlePlayPause);
     };
   }, [stream, videoElement]);
 

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

@@ -1,4 +1,4 @@
-import { FC, useCallback, useState, ReactNode, useRef, useEffect } from 'react';
+import { FC, ReactNode, useCallback, useRef, useState } from 'react';
 import classnames from 'classnames';
 
 import Button from '../Button';
@@ -38,7 +38,7 @@ export const ControlButton: FC<Props> = ({
 
   const handleClick = useCallback(() => {
     onClick?.();
-  }, [active, panel, onClick]);
+  }, [onClick]);
 
   const closePanel = useCallback(() => {
     if (active) {

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

@@ -23,8 +23,7 @@ export type Props = {
 };
 
 export const ControlMenu: FC<Props> = ({ className, call, preview }) => {
-  const [isAudioOutputVisible, setAudioOutputVisible] =
-    useState<boolean>(false);
+  const [isAudioOutputVisible, setAudioOutputVisible] = useState(false);
   const {
     selectedAudioInputDeviceId,
     selectedVideoDeviceId,
@@ -58,15 +57,19 @@ export const ControlMenu: FC<Props> = ({ className, call, preview }) => {
   }, [call]);
 
   const enableVideo = useCallback(() => {
-    publishVideoStream();
+    publishVideoStream().catch((err) => {
+      console.log(`Error while publishing video`, err);
+    });
   }, [publishVideoStream]);
 
   const disableAudio = useCallback(() => {
     call.stopPublish(SfuModels.TrackType.AUDIO);
   }, [call]);
 
   const enableAudio = useCallback(() => {
-    publishAudioStream();
+    publishAudioStream().catch((err) => {
+      console.log(`Error while publishing audio`, err);
+    });
   }, [publishAudioStream]);
 
   const video = useCallback(() => {
@@ -75,15 +78,27 @@ export const ControlMenu: FC<Props> = ({ className, call, preview }) => {
     } else {
       isVideoMuted ? enableVideo() : disableVideo();
     }
-  }, [toggleInitialVideoMuteState, localParticipant, isVideoMuted, preview]);
+  }, [
+    preview,
+    toggleInitialVideoMuteState,
+    isVideoMuted,
+    enableVideo,
+    disableVideo,
+  ]);
 
   const audio = useCallback(() => {
     if (preview) {
       toggleInitialAudioMuteState();
     } else {
       isAudioMuted ? enableAudio() : disableAudio();
     }
-  }, [toggleInitialAudioMuteState, localParticipant, isAudioMuted, preview]);
+  }, [
+    preview,
+    toggleInitialAudioMuteState,
+    isAudioMuted,
+    enableAudio,
+    disableAudio,
+  ]);
 
   const toggleAudioOutputPanel = useCallback(() => {
     setAudioOutputVisible(!isAudioOutputVisible);

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

@@ -110,6 +110,7 @@ export const Participant: FC<Props> = ({
     connectionQuality,
     sessionId,
     reaction,
+    isLocalParticipant,
   } = participant;
 
   const { addNotification } = useNotificationContext();
@@ -149,6 +150,7 @@ export const Participant: FC<Props> = ({
     className,
   );
 
+  const nameSuffix = isLocalParticipant ? ' (You)' : '';
   return (
     <ParticipantView
       participant={participant}
@@ -158,7 +160,7 @@ export const Participant: FC<Props> = ({
         <Overlay
           connectionQualityAsString={connectionQualityAsString}
           connectionQuality={connectionQuality}
-          name={participant.name || participant.userId}
+          name={(participant.name || participant.userId) + nameSuffix}
           hasAudio={hasAudio}
           reaction={reaction}
           call={call}