@stream-io/video-react-sdk 1.40.1 → 1.41.0

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -72,131 +72,135 @@ export type ParticipantViewProps = {
 } & Pick<VideoProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 
 export const ParticipantView = memo(
-  forwardRef<HTMLDivElement, ParticipantViewProps>(function ParticipantView(
-    {
-      participant,
-      trackType = 'videoTrack',
-      mirror,
-      muteAudio,
-      refs: { setVideoElement, setVideoPlaceholderElement } = {},
-      className,
-      VideoPlaceholder,
-      PictureInPicturePlaceholder,
-      ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
-    },
-    ref,
-  ) {
-    const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } =
-      participant;
-
-    const hasAudioTrack = hasAudio(participant);
-    const hasVideoTrack = hasVideo(participant);
-    const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
-
-    const [trackedElement, setTrackedElement] = useState<HTMLDivElement | null>(
-      null,
-    );
-
-    const [contextVideoElement, setContextVideoElement] =
-      useState<HTMLVideoElement | null>(null);
-
-    const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] =
-      useState<HTMLDivElement | null>(null);
-
-    useTrackElementVisibility({
-      sessionId,
-      trackedElement,
-      trackType,
-    });
-
-    const { useIncomingVideoSettings } = useCallStateHooks();
-    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
-
-    const participantViewContextValue = useMemo(
-      () => ({
+  forwardRef<HTMLDivElement, ParticipantViewProps>(
+    function ParticipantViewRender(
+      {
         participant,
-        participantViewElement: trackedElement,
-        videoElement: contextVideoElement,
-        videoPlaceholderElement: contextVideoPlaceholderElement,
-        trackType,
-      }),
-      [
-        contextVideoElement,
+        trackType = 'videoTrack',
+        mirror,
+        muteAudio,
+        refs: { setVideoElement, setVideoPlaceholderElement } = {},
+        className,
+        VideoPlaceholder,
+        PictureInPicturePlaceholder,
+        ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
+      },
+      ref,
+    ) {
+      const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } =
+        participant;
+
+      const hasAudioTrack = hasAudio(participant);
+      const hasVideoTrack = hasVideo(participant);
+      const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
+
+      const [trackedElement, setTrackedElement] =
+        useState<HTMLDivElement | null>(null);
+
+      const [contextVideoElement, setContextVideoElement] =
+        useState<HTMLVideoElement | null>(null);
+
+      const [
         contextVideoPlaceholderElement,
-        participant,
+        setContextVideoPlaceholderElement,
+      ] = useState<HTMLDivElement | null>(null);
+
+      useTrackElementVisibility({
+        sessionId,
         trackedElement,
         trackType,
-      ],
-    );
-
-    const videoRefs: VideoProps['refs'] = useMemo(
-      () => ({
-        setVideoElement: (element) => {
-          setVideoElement?.(element);
-          setContextVideoElement(element);
-        },
-        setVideoPlaceholderElement: (element) => {
-          setVideoPlaceholderElement?.(element);
-          setContextVideoPlaceholderElement(element);
-        },
-      }),
-      [setVideoElement, setVideoPlaceholderElement],
-    );
-
-    return (
-      <div
-        data-testid="participant-view"
-        ref={(element) => {
-          applyElementToRef(ref, element);
-          setTrackedElement(element);
-        }}
-        className={clsx(
-          'str-video__participant-view',
-          isDominantSpeaker && 'str-video__participant-view--dominant-speaker',
-          isSpeaking && 'str-video__participant-view--speaking',
-          !hasVideoTrack && 'str-video__participant-view--no-video',
-          !hasAudioTrack && 'str-video__participant-view--no-audio',
-          className,
-        )}
-      >
-        <ParticipantViewContext.Provider value={participantViewContextValue}>
-          {/* mute the local participant, as we don't want to hear ourselves */}
-          {!isLocalParticipant && !muteAudio && (
-            <>
-              {hasAudioTrack && (
-                <Audio participant={participant} trackType="audioTrack" />
-              )}
-              {hasScreenShareAudioTrack && (
-                <Audio
-                  participant={participant}
-                  trackType="screenShareAudioTrack"
-                />
-              )}
-            </>
-          )}
-          <Video
-            VideoPlaceholder={VideoPlaceholder}
-            PictureInPicturePlaceholder={PictureInPicturePlaceholder}
-            participant={participant}
-            trackType={trackType}
-            refs={videoRefs}
-            enabled={
-              isLocalParticipant ||
-              trackType !== 'videoTrack' ||
-              isParticipantVideoEnabled(participant.sessionId)
-            }
-            mirror={mirror}
-            autoPlay
-          />
-          {isComponentType(ParticipantViewUI) ? (
-            <ParticipantViewUI />
-          ) : (
-            ParticipantViewUI
+      });
+
+      const { useIncomingVideoSettings } = useCallStateHooks();
+      const { isParticipantVideoEnabled } = useIncomingVideoSettings();
+
+      const participantViewContextValue = useMemo(
+        () => ({
+          participant,
+          participantViewElement: trackedElement,
+          videoElement: contextVideoElement,
+          videoPlaceholderElement: contextVideoPlaceholderElement,
+          trackType,
+        }),
+        [
+          contextVideoElement,
+          contextVideoPlaceholderElement,
+          participant,
+          trackedElement,
+          trackType,
+        ],
+      );
+
+      const videoRefs: VideoProps['refs'] = useMemo(
+        () => ({
+          setVideoElement: (element) => {
+            setVideoElement?.(element);
+            setContextVideoElement(element);
+          },
+          setVideoPlaceholderElement: (element) => {
+            setVideoPlaceholderElement?.(element);
+            setContextVideoPlaceholderElement(element);
+          },
+        }),
+        [setVideoElement, setVideoPlaceholderElement],
+      );
+
+      return (
+        <div
+          data-testid="participant-view"
+          ref={(element) => {
+            applyElementToRef(ref, element);
+            setTrackedElement(element);
+          }}
+          className={clsx(
+            'str-video__participant-view',
+            isDominantSpeaker &&
+              'str-video__participant-view--dominant-speaker',
+            isSpeaking && 'str-video__participant-view--speaking',
+            !hasVideoTrack && 'str-video__participant-view--no-video',
+            !hasAudioTrack && 'str-video__participant-view--no-audio',
+            className,
           )}
-        </ParticipantViewContext.Provider>
-      </div>
-    );
-  }),
+        >
+          <ParticipantViewContext.Provider value={participantViewContextValue}>
+            {/* mute the local participant, as we don't want to hear ourselves */}
+            {!isLocalParticipant && !muteAudio && (
+              <>
+                {hasAudioTrack && (
+                  <Audio participant={participant} trackType="audioTrack" />
+                )}
+                {hasScreenShareAudioTrack && (
+                  <Audio
+                    participant={participant}
+                    trackType="screenShareAudioTrack"
+                  />
+                )}
+              </>
+            )}
+            <Video
+              VideoPlaceholder={VideoPlaceholder}
+              PictureInPicturePlaceholder={PictureInPicturePlaceholder}
+              participant={participant}
+              trackType={trackType}
+              refs={videoRefs}
+              enabled={
+                isLocalParticipant ||
+                trackType !== 'videoTrack' ||
+                isParticipantVideoEnabled(participant.sessionId)
+              }
+              mirror={mirror}
+              autoPlay
+            />
+            {isComponentType(ParticipantViewUI) ? (
+              <ParticipantViewUI />
+            ) : (
+              ParticipantViewUI
+            )}
+          </ParticipantViewContext.Provider>
+        </div>
+      );
+    },
+  ),
 );
 
 ParticipantView.displayName = 'ParticipantView';

package/src/core/components/Video/BaseVideo.tsx

@@ -12,7 +12,7 @@ export type BaseVideoProps = ComponentPropsWithRef<'video'> & {
  * (`srcObject`) to reactively handle stream changes
  */
 export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
-  function BaseVideo({ stream, ...rest }, ref) {
+  function BaseVideoRender({ stream, ...rest }, ref) {
     const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
       null,
     );

package/src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx

@@ -10,7 +10,7 @@ export type PictureInPicturePlaceholderProps = BaseVideoPlaceholderProps;
 export const DefaultPictureInPicturePlaceholder = forwardRef<
   HTMLDivElement,
   PictureInPicturePlaceholderProps
->(function DefaultPictureInPicturePlaceholder(props, ref) {
+>(function DefaultPictureInPicturePlaceholderRender(props, ref) {
   const { t } = useI18n();
   return (
     <BaseVideoPlaceholder ref={ref} {...props}>

package/src/core/components/Video/DefaultVideoPlaceholder.tsx

@@ -10,7 +10,7 @@ export type VideoPlaceholderProps = BaseVideoPlaceholderProps;
 export const DefaultVideoPlaceholder = forwardRef<
   HTMLDivElement,
   VideoPlaceholderProps
->(function DefaultVideoPlaceholder(props, ref) {
+>(function DefaultVideoPlaceholderRender(props, ref) {
   const { t } = useI18n();
   return (
     <BaseVideoPlaceholder ref={ref} {...props}>

package/src/embedded/shared/Lobby/ToggleCameraButton.tsx

@@ -10,7 +10,7 @@ import {
 import { CameraMenuWithBlur } from '../BlurToggleButton/BlurToggleButton';
 
 const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  function ToggleMenuButton(props, ref) {
+  function ToggleMenuButtonRender(props, ref) {
     const { useCameraState } = useCallStateHooks();
     const { selectedDevice: selectedCamera, devices: cameras } =
       useCameraState();

package/src/embedded/shared/Lobby/ToggleMicButton.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../../components';
 
 const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  function ToggleMenuButton(props, ref) {
+  function ToggleMenuButtonRender(props, ref) {
     const { useMicrophoneState } = useCallStateHooks();
     const { selectedDevice: selectedMic, devices: microphones } =
       useMicrophoneState();

package/src/embedded/types.ts

@@ -48,9 +48,7 @@ export interface EmbeddedAnonymousUser {
  * Discriminated union for embedded user configuration.
  */
 export type EmbeddedUser =
-  | EmbeddedAuthenticatedUser
-  | EmbeddedGuestUser
-  | EmbeddedAnonymousUser;
+  EmbeddedAuthenticatedUser | EmbeddedGuestUser | EmbeddedAnonymousUser;
 
 /**
  * Base props shared by EmbeddedCall and EmbeddedLivestream.

package/src/hooks/useRequestPermission.ts

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { OwnCapability } from '@stream-io/video-client';
+import { RequestPermissionRequestPermissionsEnum } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
-export const useRequestPermission = (permission: OwnCapability) => {
+export const useRequestPermission = (
+  permission: RequestPermissionRequestPermissionsEnum,
+) => {
   const call = useCall();
   const { useHasPermissions } = useCallStateHooks();
   const hasPermission = useHasPermissions(permission);