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

package/src/components/CallControls/ToggleAudioOutputButton.tsx

@@ -1,22 +1,26 @@
-import { CompositeButton, IconButton } from '../Button';
-import { DeviceSelectorAudioOutput } from '../DeviceSettings';
+import { CompositeButton, IconButtonWithMenuProps } from '../Button';
 import { useI18n } from '@stream-io/video-react-bindings';
-import { ComponentType } from 'react';
+import { Icon } from '../Icon';
 
-export type ToggleAudioOutputButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleAudioOutputButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleAudioOutputButton = (
   props: ToggleAudioOutputButtonProps,
 ) => {
   const { t } = useI18n();
-  const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
+  const { caption, Menu } = props;
 
   return (
-    <CompositeButton Menu={Menu} caption={caption}>
-      <IconButton icon="speaker" />
+    <CompositeButton
+      Menu={Menu}
+      caption={caption}
+      title={caption || t('Speakers')}
+      data-testid="audio-output-button"
+    >
+      <Icon icon="speaker" />
     </CompositeButton>
   );
 };

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -1,56 +1,82 @@
-import { ComponentType } from 'react';
 import {
   Restricted,
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-
+import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
-import { CompositeButton, IconButton } from '../Button/';
+import { CompositeButton, IconButtonWithMenuProps } from '../Button/';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
+import { Icon } from '../Icon';
 
-export type ToggleVideoPreviewButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleVideoPreviewButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleVideoPreviewButton = (
   props: ToggleVideoPreviewButtonProps,
 ) => {
+  const { caption, ...restCompositeButtonProps } = props;
   const { t } = useI18n();
-  const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
-
   const { useCameraState } = useCallStateHooks();
-  const { camera, isMute } = useCameraState();
+  const { camera, isMute, hasBrowserPermission } = useCameraState();
 
   return (
-    <CompositeButton Menu={Menu} active={isMute} caption={caption}>
-      <IconButton
-        icon={!isMute ? 'camera' : 'camera-off'}
-        onClick={() => camera.toggle()}
-      />
+    <CompositeButton
+      active={isMute}
+      caption={caption}
+      className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
+      title={
+        !hasBrowserPermission
+          ? t('Check your browser video permissions')
+          : caption || t('Video')
+      }
+      variant="secondary"
+      data-testid={
+        isMute ? 'preview-video-unmute-button' : 'preview-video-mute-button'
+      }
+      onClick={() => camera.toggle()}
+      disabled={!hasBrowserPermission}
+      {...restCompositeButtonProps}
+    >
+      <Icon icon={!isMute ? 'camera' : 'camera-off'} />
+      {!hasBrowserPermission && (
+        <span
+          className="str-video__no-media-permission"
+          title={t('Check your browser video permissions')}
+          children="!"
+        />
+      )}
     </CompositeButton>
   );
 };
 
-type ToggleVideoPublishingButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+type ToggleVideoPublishingButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleVideoPublishingButton = (
   props: ToggleVideoPublishingButtonProps,
 ) => {
   const { t } = useI18n();
-  const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
+  const {
+    caption,
+    Menu = <DeviceSelectorVideo visualType="list" />,
+    menuPlacement = 'top',
+    ...restCompositeButtonProps
+  } = props;
 
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_VIDEO);
 
-  const { useCameraState } = useCallStateHooks();
-  const { camera, isMute } = useCameraState();
+  const { useCameraState, useCallSettings } = useCallStateHooks();
+  const { camera, isMute, hasBrowserPermission } = useCameraState();
+  const callSettings = useCallSettings();
+  const isPublishingVideoAllowed = callSettings?.video.enabled;
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
@@ -63,17 +89,41 @@ export const ToggleVideoPublishingButton = (
         )}
         messageRevoked={t('You can no longer share your video.')}
       >
-        <CompositeButton Menu={Menu} active={isMute} caption={caption}>
-          <IconButton
-            icon={isMute ? 'camera-off' : 'camera'}
-            onClick={async () => {
-              if (!hasPermission) {
-                await requestPermission();
-              } else {
-                await camera.toggle();
-              }
-            }}
-          />
+        <CompositeButton
+          active={isMute}
+          caption={caption}
+          variant="secondary"
+          title={
+            !hasPermission
+              ? t('You have no permission to share your video')
+              : !hasBrowserPermission
+              ? t('Check your browser video permissions')
+              : !isPublishingVideoAllowed
+              ? t('Video publishing is disabled by the system')
+              : caption || t('Video')
+          }
+          disabled={
+            !hasBrowserPermission || !hasPermission || !isPublishingVideoAllowed
+          }
+          data-testid={isMute ? 'video-unmute-button' : 'video-mute-button'}
+          onClick={async () => {
+            if (!hasPermission) {
+              await requestPermission();
+            } else {
+              await camera.toggle();
+            }
+          }}
+          Menu={Menu}
+          menuPlacement={menuPlacement}
+          menuOffset={16}
+          {...restCompositeButtonProps}
+        >
+          <Icon icon={isMute ? 'camera-off' : 'camera'} />
+          {(!hasBrowserPermission ||
+            !hasPermission ||
+            !isPublishingVideoAllowed) && (
+            <span className="str-video__no-media-permission">!</span>
+          )}
         </CompositeButton>
       </PermissionNotification>
     </Restricted>

package/src/components/CallParticipantsList/CallParticipantListHeader.tsx

@@ -1,7 +1,11 @@
 import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
 
+import { IconButton } from '../Button';
+
 export type CallParticipantListHeaderProps = {
-  /** Click event listener function to be invoked in order to dismiss / hide the CallParticipantsList from the UI */
+  /**
+   * Click event listener function to be invoked to dismiss / hide the CallParticipantsList from the UI.
+   */
   onClose: () => void;
 };
 
@@ -18,7 +22,7 @@ export const CallParticipantListHeader = ({
       <div className="str-video__participant-list-header__title">
         {t('Participants')}{' '}
         <span className="str-video__participant-list-header__title-count">
-          ({participants.length})
+          [{participants.length}]
         </span>
         {anonymousParticipantCount > 0 && (
           <span className="str-video__participant-list-header__title-anonymous">
@@ -26,12 +30,11 @@ export const CallParticipantListHeader = ({
           </span>
         )}
       </div>
-      <button
+      <IconButton
         onClick={onClose}
         className="str-video__participant-list-header__close-button"
-      >
-        <span className="str-video__participant-list-header__close-button--icon" />
-      </button>
+        icon="close"
+      />
     </div>
   );
 };

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -1,31 +1,15 @@
 import clsx from 'clsx';
-import {
-  ComponentProps,
-  ComponentType,
-  forwardRef,
-  useEffect,
-  useState,
-} from 'react';
-import {
-  Restricted,
-  useCall,
-  useConnectedUser,
-  useI18n,
-} from '@stream-io/video-react-bindings';
-import {
-  OwnCapability,
-  SfuModels,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
+import { ComponentProps, ComponentType, forwardRef } from 'react';
+import { useConnectedUser, useI18n } from '@stream-io/video-react-bindings';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
 import { IconButton } from '../Button';
-import {
-  GenericMenu,
-  GenericMenuButtonItem,
-  MenuToggle,
-  ToggleMenuButtonProps,
-} from '../Menu';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 import { WithTooltip } from '../Tooltip';
-import { Icon } from '../Icon';
+import { Avatar } from '../Avatar';
+import {
+  ParticipantActionsContextMenu,
+  ParticipantViewContext,
+} from '../../core/';
 
 type CallParticipantListingItemProps = {
   /** Participant object be rendered */
@@ -49,6 +33,7 @@ export const CallParticipantListingItem = ({
 
   return (
     <div className="str-video__participant-listing-item">
+      <Avatar name={participant.name} imageSrc={participant.image} />
       <DisplayName participant={participant} />
       <div className="str-video__participant-listing-item__media-indicator-group">
         <MediaIndicator
@@ -80,7 +65,11 @@ export const CallParticipantListingItem = ({
         )}
 
         <MenuToggle placement="bottom-end" ToggleButton={ToggleButton}>
-          <ParticipantActionsContextMenu participant={participant} />
+          <ParticipantViewContext.Provider
+            value={{ participant, trackType: 'none' }}
+          >
+            <ParticipantActionsContextMenu />
+          </ParticipantViewContext.Provider>
         </MenuToggle>
       </div>
     </div>
@@ -95,7 +84,7 @@ type DisplayNameProps = {
   /** Participant object that provides the data from which display name can be generated */
   participant: StreamVideoParticipant;
 };
-// todo: implement display device flag
+
 const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
   const connectedUser = useConnectedUser();
   const { t } = useI18n();
@@ -122,260 +111,7 @@ const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  (props, ref) => {
+  function ToggleButton(props, ref) {
     return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
   },
 );
-
-export const ParticipantActionsContextMenu = ({
-  participant,
-  participantViewElement,
-  videoElement,
-}: {
-  participant: StreamVideoParticipant;
-  participantViewElement?: HTMLDivElement | null;
-  videoElement?: HTMLVideoElement | null;
-}) => {
-  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 toggleParticipantPinnedAt = () => {
-    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()
-        .then(() => setFullscreenModeOn(true))
-        .catch(console.error);
-    }
-
-    document
-      .exitFullscreen()
-      .catch(console.error)
-      .finally(() => setFullscreenModeOn(false));
-  };
-
-  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 handlePictureInPicture = () => {
-      setPictureInPictureElement(document.pictureInPictureElement);
-    };
-
-    videoElement.addEventListener(
-      'enterpictureinpicture',
-      handlePictureInPicture,
-    );
-    videoElement.addEventListener(
-      'leavepictureinpicture',
-      handlePictureInPicture,
-    );
-
-    return () => {
-      videoElement.removeEventListener(
-        'enterpictureinpicture',
-        handlePictureInPicture,
-      );
-      videoElement.removeEventListener(
-        'leavepictureinpicture',
-        handlePictureInPicture,
-      );
-    };
-  }, [videoElement]);
-
-  const togglePictureInPicture = () => {
-    if (videoElement && pictureInPictureElement !== videoElement) {
-      return videoElement
-        .requestPictureInPicture()
-        .catch(console.error) as Promise<void>;
-    }
-
-    document.exitPictureInPicture().catch(console.error);
-  };
-
-  return (
-    <GenericMenu>
-      <GenericMenuButtonItem
-        onClick={toggleParticipantPinnedAt}
-        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]}>
-        <GenericMenuButtonItem disabled={!hasVideo} onClick={muteVideo}>
-          <Icon icon="camera-off-outline" />
-          {t('Turn off video')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          disabled={!hasScreenShare}
-          onClick={muteScreenShare}
-        >
-          <Icon icon="screen-share-off" />
-          {t('Turn off screen share')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem disabled={!hasAudio} onClick={muteAudio}>
-          <Icon icon="no-audio" />
-          {t('Mute audio')}
-        </GenericMenuButtonItem>
-        <GenericMenuButtonItem
-          disabled={!hasScreenShareAudio}
-          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/components/CallParticipantsList/CallParticipantsList.tsx

@@ -1,7 +1,5 @@
 import {
-  ComponentProps,
   Dispatch,
-  ForwardedRef,
   forwardRef,
   SetStateAction,
   useCallback,
@@ -17,14 +15,9 @@ import {
   OwnCapability,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
-import clsx from 'clsx';
 
 import { BlockedUserListing } from './BlockedUserListing';
-import {
-  CopyToClipboardButtonWithPopup,
-  IconButton,
-  TextButton,
-} from '../Button';
+import { IconButton, TextButton } from '../Button';
 import { CallParticipantListHeader } from './CallParticipantListHeader';
 import { CallParticipantListing } from './CallParticipantListing';
 import { EmptyParticipantSearchList } from './EmptyParticipantSearchList';
@@ -97,12 +90,6 @@ export const CallParticipantsList = ({
           />
         )}
       </div>
-      <div className="str-video__participant-list__footer">
-        <CopyToClipboardButtonWithPopup
-          Button={InviteLinkButton}
-          copyValue={typeof window !== 'undefined' ? window.location.href : ''}
-        />
-      </div>
     </div>
   );
 };
@@ -123,7 +110,6 @@ const CallParticipantListContentHeader = ({
   return (
     <div className="str-video__participant-list__content-header">
       <div className="str-video__participant-list__content-header-title">
-        <span>{UserListTypes[userListType]}</span>
         {userListType === 'active' && (
           <Restricted
             requiredGrants={[OwnCapability.MUTE_USERS]}
@@ -234,23 +220,7 @@ const BlockedUsersSearchResults = ({
 };
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
-  (props, ref) => {
+  function ToggleButton(props, ref) {
     return <IconButton enabled={props.menuShown} icon="filter" ref={ref} />;
   },
 );
-
-const InviteLinkButton = forwardRef(
-  (
-    { className, ...props }: ComponentProps<'button'>,
-    ref: ForwardedRef<HTMLButtonElement>,
-  ) => (
-    <button
-      {...props}
-      className={clsx('str-video__invite-link-button', className)}
-      ref={ref}
-    >
-      <div className="str-video__invite-participant-icon" />
-      <div className="str-video__invite-link-button__text">Invite Link</div>
-    </button>
-  ),
-);

package/src/components/CallRecordingList/CallRecordingList.tsx

@@ -51,12 +51,30 @@ export const CallRecordingList = ({
         {loading ? (
           <LoadingCallRecordingList callRecordings={callRecordings} />
         ) : callRecordings.length ? (
-          callRecordings.map((recording) => (
-            <CallRecordingListItem
-              recording={recording}
-              key={recording.filename}
-            />
-          ))
+          <>
+            <ul className="str-video__call-recording-list__list">
+              <li className="str-video__call-recording-list__item">
+                <div className="str-video__call-recording-list__filename">
+                  Name
+                </div>
+                <div className="str-video__call-recording-list__time">
+                  Start time
+                </div>
+                <div className="str-video__call-recording-list__time">
+                  End time
+                </div>
+                <div className="str-video__call-recording-list__download"></div>
+              </li>
+            </ul>
+            <ul className="str-video__call-recording-list__list">
+              {callRecordings.map((recording) => (
+                <CallRecordingListItem
+                  recording={recording}
+                  key={recording.filename}
+                />
+              ))}
+            </ul>
+          </>
         ) : (
           <EmptyCallRecordingList />
         )}