@stream-io/video-react-sdk 0.4.26 → 0.5.0

package/src/components/Notification/SpeakingWhileMutedNotification.tsx

@@ -1,4 +1,6 @@
 import { PropsWithChildren } from 'react';
+import { Placement } from '@floating-ui/react';
+
 import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 import { Notification } from './Notification';
 
@@ -7,11 +9,13 @@ export type SpeakingWhileMutedNotificationProps = {
    * Text message displayed by the notification.
    */
   text?: string;
+  placement?: Placement;
 };
 
 export const SpeakingWhileMutedNotification = ({
   children,
   text,
+  placement,
 }: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => {
   const { useMicrophoneState } = useCallStateHooks();
   const { isSpeakingWhileMuted } = useMicrophoneState();
@@ -19,7 +23,11 @@ export const SpeakingWhileMutedNotification = ({
 
   const message = text ?? t('You are muted. Unmute to speak.');
   return (
-    <Notification message={message} isVisible={isSpeakingWhileMuted}>
+    <Notification
+      message={message}
+      isVisible={isSpeakingWhileMuted}
+      placement={placement || 'top-start'}
+    >
       {children}
     </Notification>
   );

package/src/components/Notification/index.ts

@@ -1,3 +1,4 @@
 export * from './Notification';
 export * from './PermissionNotification';
 export * from './SpeakingWhileMutedNotification';
+export * from './RecordingInProgressNotification';

package/src/components/Permissions/PermissionRequests.tsx

@@ -10,14 +10,12 @@ import {
 import {
   OwnCapability,
   PermissionRequestEvent,
-  StreamVideoEvent,
   UserResponse,
 } from '@stream-io/video-client';
 import {
   TranslatorFunction,
   useCall,
   useCallStateHooks,
-  useHasPermissions,
   useI18n,
 } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
@@ -39,7 +37,7 @@ type HandleUpdatePermission = (
 
 export const PermissionRequests = () => {
   const call = useCall();
-  const { useLocalParticipant } = useCallStateHooks();
+  const { useLocalParticipant, useHasPermissions } = useCallStateHooks();
   const localParticipant = useLocalParticipant();
   const [expanded, setExpanded] = useState(false);
   const [permissionRequests, setPermissionRequests] = useState<
@@ -52,23 +50,13 @@ export const PermissionRequests = () => {
   const localUserId = localParticipant?.userId;
   useEffect(() => {
     if (!call || !canUpdateCallPermissions) return;
-
-    const unsubscribe = call.on(
-      'call.permission_request',
-      (event: StreamVideoEvent) => {
-        if (event.type !== 'call.permission_request') return;
-        if (event.user.id !== localUserId) {
-          setPermissionRequests((requests) =>
-            [...requests, event as PermissionRequestEvent].sort((a, b) =>
-              byNameOrId(a.user, b.user),
-            ),
-          );
-        }
-      },
-    );
-    return () => {
-      unsubscribe();
-    };
+    return call.on('call.permission_request', (event) => {
+      if (event.user.id !== localUserId) {
+        setPermissionRequests((requests) =>
+          [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)),
+        );
+      }
+    });
   }, [call, canUpdateCallPermissions, localUserId]);
 
   const handleUpdatePermission: HandleUpdatePermission = (request, type) => {
@@ -138,7 +126,7 @@ export type PermissionRequestListProps = ComponentProps<'div'> & {
 export const PermissionRequestList = forwardRef<
   HTMLDivElement,
   PermissionRequestListProps
->((props, ref) => {
+>(function PermissionRequestList(props, ref) {
   const { permissionRequests, handleUpdatePermission, ...rest } = props;
 
   const { t } = useI18n();

package/src/components/Search/hooks/useSearch.ts

@@ -25,7 +25,11 @@ export const useSearch = <T>({
   const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);
 
   useEffect(() => {
-    if (!searchQuery.length) return setSearchResults([]);
+    if (!searchQuery.length) {
+      setSearchQueryInProgress(false);
+      setSearchResults([]);
+      return;
+    }
 
     setSearchQueryInProgress(true);
 

package/src/components/index.ts

@@ -3,9 +3,11 @@ export * from './Button';
 export * from './CallControls';
 export * from './CallParticipantsList';
 export * from './CallPreview';
+export * from './CallStats';
 export * from './CallRecordingList';
 export * from './CallStats';
 export * from './DeviceSettings';
+export * from './DropdownSelect';
 export * from './Icon';
 export * from './LoadingIndicator';
 export * from './Menu';

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

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { ComponentType, forwardRef } from 'react';
 import { Placement } from '@floating-ui/react';
 import { SfuModels } from '@stream-io/video-client';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
@@ -9,9 +9,9 @@ import {
   IconButton,
   MenuToggle,
   Notification,
-  ParticipantActionsContextMenu,
   ToggleMenuButtonProps,
 } from '../../../components';
+import { ParticipantActionsContextMenu as DefaultParticipantActionsContextMenu } from './ParticipantActionsContextMenu';
 import { Reaction } from '../../../components/Reaction';
 import { useParticipantViewContext } from './ParticipantViewContext';
 
@@ -28,10 +28,14 @@ export type DefaultParticipantViewUIProps = {
    * Option to show/hide menu button component
    */
   showMenuButton?: boolean;
+  /**
+   * Custom component to render the context menu
+   */
+  ParticipantActionsContextMenu?: ComponentType;
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  (props, ref) => {
+  function ToggleButton(props, ref) {
     return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
   },
 );
@@ -62,11 +66,11 @@ export const DefaultScreenShareOverlay = () => {
 
 export const DefaultParticipantViewUI = ({
   indicatorsVisible = true,
-  menuPlacement = 'bottom-end',
+  menuPlacement = 'bottom-start',
   showMenuButton = true,
+  ParticipantActionsContextMenu = DefaultParticipantActionsContextMenu,
 }: DefaultParticipantViewUIProps) => {
-  const { participant, participantViewElement, trackType, videoElement } =
-    useParticipantViewContext();
+  const { participant, trackType } = useParticipantViewContext();
   const { publishedTracks } = participant;
 
   const hasScreenShare = publishedTracks.includes(
@@ -94,11 +98,7 @@ export const DefaultParticipantViewUI = ({
           placement={menuPlacement}
           ToggleButton={ToggleButton}
         >
-          <ParticipantActionsContextMenu
-            participantViewElement={participantViewElement}
-            participant={participant}
-            videoElement={videoElement}
-          />
+          <ParticipantActionsContextMenu />
         </MenuToggle>
       )}
       <Reaction participant={participant} />
@@ -112,7 +112,6 @@ export const ParticipantDetails = ({
 }: Pick<DefaultParticipantViewUIProps, 'indicatorsVisible'>) => {
   const { participant } = useParticipantViewContext();
   const {
-    isDominantSpeaker,
     isLocalParticipant,
     connectionQuality,
     publishedTracks,
@@ -133,50 +132,65 @@ export const ParticipantDetails = ({
   const canUnpin = !!pin && pin.isLocalPin;
 
   return (
-    <div className="str-video__participant-details">
-      <span className="str-video__participant-details__name">
-        {name || userId}
-        {indicatorsVisible && isDominantSpeaker && (
-          <span
-            className="str-video__participant-details__name--dominant_speaker"
-            title={t('Dominant speaker')}
-          />
-        )}
-        {indicatorsVisible && (
-          <Notification
-            isVisible={
-              isLocalParticipant &&
-              connectionQuality === SfuModels.ConnectionQuality.POOR
-            }
-            message={t('Poor connection quality')}
-          >
-            {connectionQualityAsString && (
-              <span
-                className={clsx(
-                  'str-video__participant-details__connection-quality',
-                  `str-video__participant-details__connection-quality--${connectionQualityAsString}`,
-                )}
-                title={connectionQualityAsString}
-              />
-            )}
-          </Notification>
-        )}
-        {indicatorsVisible && !hasAudio && (
-          <span className="str-video__participant-details__name--audio-muted" />
-        )}
-        {indicatorsVisible && !hasVideo && (
-          <span className="str-video__participant-details__name--video-muted" />
-        )}
-        {indicatorsVisible && canUnpin && (
-          // TODO: remove this monstrosity once we have a proper design
-          <span
-            title={t('Unpin')}
-            onClick={() => call?.unpin(sessionId)}
-            style={{ cursor: 'pointer' }}
-            className="str-video__participant-details__name--pinned"
-          />
-        )}
-      </span>
-    </div>
+    <>
+      <div className="str-video__participant-details">
+        <span className="str-video__participant-details__name">
+          {name || userId}
+
+          {indicatorsVisible && !hasAudio && (
+            <span className="str-video__participant-details__name--audio-muted" />
+          )}
+          {indicatorsVisible && !hasVideo && (
+            <span className="str-video__participant-details__name--video-muted" />
+          )}
+          {indicatorsVisible && canUnpin && (
+            // TODO: remove this monstrosity once we have a proper design
+            <span
+              title={t('Unpin')}
+              onClick={() => call?.unpin(sessionId)}
+              className="str-video__participant-details__name--pinned"
+            />
+          )}
+          {indicatorsVisible && <SpeechIndicator />}
+        </span>
+      </div>
+      {indicatorsVisible && (
+        <Notification
+          isVisible={
+            isLocalParticipant &&
+            connectionQuality === SfuModels.ConnectionQuality.POOR
+          }
+          message={t('Poor connection quality')}
+        >
+          {connectionQualityAsString && (
+            <span
+              className={clsx(
+                'str-video__participant-details__connection-quality',
+                `str-video__participant-details__connection-quality--${connectionQualityAsString}`,
+              )}
+              title={connectionQualityAsString}
+            />
+          )}
+        </Notification>
+      )}
+    </>
+  );
+};
+
+export const SpeechIndicator = () => {
+  const { participant } = useParticipantViewContext();
+  const { isSpeaking, isDominantSpeaker } = participant;
+  return (
+    <span
+      className={clsx(
+        'str-video__speech-indicator',
+        isSpeaking && 'str-video__speech-indicator--speaking',
+        isDominantSpeaker && 'str-video__speech-indicator--dominant',
+      )}
+    >
+      <span className="str-video__speech-indicator__bar" />
+      <span className="str-video__speech-indicator__bar" />
+      <span className="str-video__speech-indicator__bar" />
+    </span>
   );
 };

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

@@ -0,0 +1,241 @@
+import { useEffect, useState } from 'react';
+import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import { useParticipantViewContext } from './ParticipantViewContext';
+import {
+  GenericMenu,
+  GenericMenuButtonItem,
+  Icon,
+  useMenuContext,
+} from '../../../components';
+
+export const ParticipantActionsContextMenu = () => {
+  const { participant, participantViewElement, videoElement } =
+    useParticipantViewContext();
+  const [fullscreenModeOn, setFullscreenModeOn] = useState(
+    !!document.fullscreenElement,
+  );
+  const [pictureInPictureElement, setPictureInPictureElement] = useState(
+    document.pictureInPictureElement,
+  );
+  const call = useCall();
+  const { t } = useI18n();
+
+  const { pin, publishedTracks, sessionId, userId } = participant;
+
+  const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+  const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const hasScreenShare = publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+  const hasScreenShareAudio = publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE_AUDIO,
+  );
+
+  const blockUser = () => call?.blockUser(userId);
+  const muteAudio = () => call?.muteUser(userId, 'audio');
+  const muteVideo = () => call?.muteUser(userId, 'video');
+  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
+  const muteScreenShareAudio = () =>
+    call?.muteUser(userId, 'screenshare_audio');
+
+  const grantPermission = (permission: string) => () => {
+    call?.updateUserPermissions({
+      user_id: userId,
+      grant_permissions: [permission],
+    });
+  };
+
+  const revokePermission = (permission: string) => () => {
+    call?.updateUserPermissions({
+      user_id: userId,
+      revoke_permissions: [permission],
+    });
+  };
+
+  const toggleParticipantPin = () => {
+    if (pin) {
+      call?.unpin(sessionId);
+    } else {
+      call?.pin(sessionId);
+    }
+  };
+
+  const pinForEveryone = () => {
+    call
+      ?.pinForEveryone({
+        user_id: userId,
+        session_id: sessionId,
+      })
+      .catch((err) => {
+        console.error(`Failed to pin participant ${userId}`, err);
+      });
+  };
+
+  const unpinForEveryone = () => {
+    call
+      ?.unpinForEveryone({
+        user_id: userId,
+        session_id: sessionId,
+      })
+      .catch((err) => {
+        console.error(`Failed to unpin participant ${userId}`, err);
+      });
+  };
+
+  const toggleFullscreenMode = () => {
+    if (!fullscreenModeOn) {
+      return participantViewElement?.requestFullscreen().catch(console.error);
+    }
+    return document.exitFullscreen().catch(console.error);
+  };
+
+  useEffect(() => {
+    // handles the case when fullscreen mode is toggled externally,
+    // e.g., by pressing ESC key or some other keyboard shortcut
+    const handleFullscreenChange = () => {
+      setFullscreenModeOn(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!videoElement) return;
+
+    const handlePiP = () => {
+      setPictureInPictureElement(document.pictureInPictureElement);
+    };
+
+    videoElement.addEventListener('enterpictureinpicture', handlePiP);
+    videoElement.addEventListener('leavepictureinpicture', handlePiP);
+
+    return () => {
+      videoElement.removeEventListener('enterpictureinpicture', handlePiP);
+      videoElement.removeEventListener('leavepictureinpicture', handlePiP);
+    };
+  }, [videoElement]);
+
+  const togglePictureInPicture = () => {
+    if (videoElement && pictureInPictureElement !== videoElement) {
+      return videoElement
+        .requestPictureInPicture()
+        .catch(console.error) as Promise<void>;
+    }
+
+    return document.exitPictureInPicture().catch(console.error);
+  };
+
+  const { close } = useMenuContext() || {};
+  return (
+    <GenericMenu onItemClick={close}>
+      <GenericMenuButtonItem
+        onClick={toggleParticipantPin}
+        disabled={pin && !pin.isLocalPin}
+      >
+        <Icon icon="pin" />
+        {pin ? t('Unpin') : t('Pin')}
+      </GenericMenuButtonItem>
+      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>
+        <GenericMenuButtonItem
+          onClick={pinForEveryone}
+          disabled={pin && !pin.isLocalPin}
+        >
+          <Icon icon="pin" />
+          {t('Pin for everyone')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={unpinForEveryone}
+          disabled={!pin || pin.isLocalPin}
+        >
+          <Icon icon="pin" />
+          {t('Unpin for everyone')}
+        </GenericMenuButtonItem>
+      </Restricted>
+      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
+        <GenericMenuButtonItem onClick={blockUser}>
+          <Icon icon="not-allowed" />
+          {t('Block')}
+        </GenericMenuButtonItem>
+      </Restricted>
+      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
+        {hasVideo && (
+          <GenericMenuButtonItem onClick={muteVideo}>
+            <Icon icon="camera-off-outline" />
+            {t('Turn off video')}
+          </GenericMenuButtonItem>
+        )}
+        {hasScreenShare && (
+          <GenericMenuButtonItem onClick={muteScreenShare}>
+            <Icon icon="screen-share-off" />
+            {t('Turn off screen share')}
+          </GenericMenuButtonItem>
+        )}
+        {hasAudio && (
+          <GenericMenuButtonItem onClick={muteAudio}>
+            <Icon icon="no-audio" />
+            {t('Mute audio')}
+          </GenericMenuButtonItem>
+        )}
+        {hasScreenShareAudio && (
+          <GenericMenuButtonItem onClick={muteScreenShareAudio}>
+            <Icon icon="no-audio" />
+            {t('Mute screen share audio')}
+          </GenericMenuButtonItem>
+        )}
+      </Restricted>
+      {participantViewElement && (
+        <GenericMenuButtonItem onClick={toggleFullscreenMode}>
+          {t('{{ direction }} fullscreen', {
+            direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+          })}
+        </GenericMenuButtonItem>
+      )}
+      {videoElement && document.pictureInPictureEnabled && (
+        <GenericMenuButtonItem onClick={togglePictureInPicture}>
+          {t('{{ direction }} picture-in-picture', {
+            direction:
+              pictureInPictureElement === videoElement
+                ? t('Leave')
+                : t('Enter'),
+          })}
+        </GenericMenuButtonItem>
+      )}
+      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SEND_AUDIO)}
+        >
+          {t('Allow audio')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SEND_VIDEO)}
+        >
+          {t('Allow video')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SCREENSHARE)}
+        >
+          {t('Allow screen sharing')}
+        </GenericMenuButtonItem>
+
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SEND_AUDIO)}
+        >
+          {t('Disable audio')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SEND_VIDEO)}
+        >
+          {t('Disable video')}
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SCREENSHARE)}
+        >
+          {t('Disable screen sharing')}
+        </GenericMenuButtonItem>
+      </Restricted>
+    </GenericMenu>
+  );
+};

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

@@ -62,7 +62,7 @@ export type ParticipantViewProps = {
 } & Pick<VideoProps, 'VideoPlaceholder'>;
 
 export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
-  (
+  function ParticipantView(
     {
       participant,
       trackType = 'videoTrack',
@@ -73,7 +73,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
       ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
     },
     ref,
-  ) => {
+  ) {
     const {
       isLocalParticipant,
       isSpeaking,

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

@@ -4,9 +4,9 @@ import { ParticipantViewProps } from './ParticipantView';
 export type ParticipantViewContextValue = Required<
   Pick<ParticipantViewProps, 'participant' | 'trackType'>
 > & {
-  participantViewElement: HTMLDivElement | null;
-  videoElement: HTMLVideoElement | null;
-  videoPlaceholderElement: HTMLDivElement | null;
+  participantViewElement?: HTMLDivElement | null;
+  videoElement?: HTMLVideoElement | null;
+  videoPlaceholderElement?: HTMLDivElement | null;
 };
 
 export const ParticipantViewContext = createContext<

package/src/core/components/ParticipantView/index.ts

@@ -1,3 +1,4 @@
+export * from './ParticipantActionsContextMenu';
 export * from './ParticipantView';
 export * from './ParticipantViewContext';
 export * from './DefaultParticipantViewUI';

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>(
-  ({ stream, ...rest }, ref) => {
+  function BaseVideo({ stream, ...rest }, ref) {
     const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
       null,
     );

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

@@ -9,7 +9,7 @@ export type VideoPlaceholderProps = {
 export const DefaultVideoPlaceholder = forwardRef<
   HTMLDivElement,
   VideoPlaceholderProps
->(({ participant, style }, ref) => {
+>(function DefaultVideoPlaceholder({ participant, style }, ref) {
   const { t } = useI18n();
   const [error, setError] = useState(false);
   const name = participant.name || participant.userId;
@@ -17,11 +17,11 @@ export const DefaultVideoPlaceholder = forwardRef<
     <div className="str-video__video-placeholder" style={style} ref={ref}>
       {(!participant.image || error) &&
         (name ? (
-          <div className="str-video__video-placeholder__initials-fallback">
-            <div>{name[0]}</div>
-          </div>
+          <InitialsFallback name={name} />
         ) : (
-          <div>{t('Video is disabled')}</div>
+          <div className="str-video__video-placeholder__no-video-label">
+            {t('Video is disabled')}
+          </div>
         ))}
       {participant.image && !error && (
         <img
@@ -34,3 +34,17 @@ export const DefaultVideoPlaceholder = forwardRef<
     </div>
   );
 });
+
+const InitialsFallback = (props: { name: string }) => {
+  const { name } = props;
+  const initials = name
+    .split(' ')
+    .slice(0, 2)
+    .map((n) => n[0])
+    .join('');
+  return (
+    <div className="str-video__video-placeholder__initials-fallback">
+      {initials}
+    </div>
+  );
+};

package/src/hooks/useFloatingUIPreset.ts

@@ -12,7 +12,8 @@ import {
 export const useFloatingUIPreset = ({
   placement,
   strategy,
-}: Pick<UseFloatingData, 'placement' | 'strategy'>) => {
+  offset: offsetInPx = 10,
+}: Pick<UseFloatingData, 'placement' | 'strategy'> & { offset?: number }) => {
   const {
     refs,
     x,
@@ -23,7 +24,7 @@ export const useFloatingUIPreset = ({
     placement,
     strategy,
     middleware: [
-      offset(10),
+      offset(offsetInPx),
       shift(),
       flip(),
       size({

package/src/hooks/useRequestPermission.ts

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import { useCall, useHasPermissions } from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
 export const useRequestPermission = (permission: OwnCapability) => {
   const call = useCall();
+  const { useHasPermissions } = useCallStateHooks();
   const hasPermission = useHasPermissions(permission);
   const [isAwaitingPermission, setIsAwaitingPermission] = useState(false); // TODO: load with possibly pending state