@stream-io/video-react-sdk 0.0.1-alpha.9

package/src/components/CallControls/ToggleCameraButton.tsx

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  useCall,
+  useHasPermissions,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
+
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
+import { CompositeButton, IconButton } from '../Button/';
+import { useMediaDevices } from '../../core/contexts';
+import { DeviceSelectorVideo } from '../DeviceSettings';
+import { PermissionNotification } from '../Notification';
+import { Restricted } from '../Moderation';
+
+export type ToggleCameraPreviewButtonProps = { caption?: string };
+
+export const ToggleCameraPreviewButton = ({
+  caption = 'Video',
+}: ToggleCameraPreviewButtonProps) => {
+  const { toggleVideoMuteState, initialVideoState } = useMediaDevices();
+
+  return (
+    <CompositeButton
+      Menu={DeviceSelectorVideo}
+      active={!initialVideoState.enabled}
+      caption={caption}
+    >
+      <IconButton
+        icon={initialVideoState.enabled ? 'camera' : 'camera-off'}
+        onClick={toggleVideoMuteState}
+      />
+    </CompositeButton>
+  );
+};
+
+type ToggleCameraPublishingButtonProps = {
+  caption?: string;
+};
+
+export const ToggleCameraPublishingButton = ({
+  caption = 'Video',
+}: ToggleCameraPublishingButtonProps) => {
+  const { publishVideoStream, stopPublishingVideo } = useMediaDevices();
+  const localParticipant = useLocalParticipant();
+  const isVideoMute = !localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
+
+  const call = useCall();
+  const hasPermission = useHasPermissions(OwnCapability.SEND_VIDEO);
+  const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
+  useEffect(() => {
+    if (hasPermission) {
+      setIsAwaitingApproval(false);
+    }
+  }, [hasPermission]);
+
+  const handleClick = useCallback(async () => {
+    if (
+      !hasPermission &&
+      call &&
+      call.permissionsContext.canRequest(OwnCapability.SEND_VIDEO)
+    ) {
+      setIsAwaitingApproval(true);
+      await call
+        .requestPermissions({
+          permissions: [OwnCapability.SEND_VIDEO],
+        })
+        .catch((reason) => {
+          console.log('RequestPermissions failed', reason);
+        });
+      return;
+    }
+    if (isVideoMute && hasPermission) {
+      await publishVideoStream();
+    } else {
+      stopPublishingVideo();
+    }
+  }, [
+    call,
+    hasPermission,
+    isVideoMute,
+    publishVideoStream,
+    stopPublishingVideo,
+  ]);
+
+  return (
+    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
+      <PermissionNotification
+        permission={OwnCapability.SEND_VIDEO}
+        isAwaitingApproval={isAwaitingApproval}
+        messageApproved="You can now share your video."
+        messageAwaitingApproval="Awaiting for an approval to share your video."
+        messageRevoked="You can no longer share your video."
+      >
+        <CompositeButton
+          Menu={DeviceSelectorVideo}
+          active={isVideoMute}
+          caption={caption}
+        >
+          <IconButton
+            icon={isVideoMute ? 'camera-off' : 'camera'}
+            onClick={handleClick}
+          />
+        </CompositeButton>
+      </PermissionNotification>
+    </Restricted>
+  );
+};

package/src/components/CallControls/ToggleParticipantListButton.tsx

@@ -0,0 +1,17 @@
+import { ButtonWithIconProps, CompositeButton, IconButton } from '../Button/';
+
+export type ToggleParticipantListButtonProps = { caption?: string } & Omit<
+  ButtonWithIconProps,
+  'icon' | 'ref'
+>;
+
+export const ToggleParticipantListButton = (
+  props: ToggleParticipantListButtonProps,
+) => {
+  const { enabled, caption = 'Participants' } = props;
+  return (
+    <CompositeButton active={enabled} caption={caption}>
+      <IconButton icon="participants" {...props} />
+    </CompositeButton>
+  );
+};

package/src/components/CallControls/index.ts

@@ -0,0 +1,10 @@
+export * from './CallControls';
+export * from './CallStatsButton';
+export * from './CancelCallButton';
+export * from './ReactionsButton';
+export * from './RecordCallButton';
+export * from './ScreenShareButton';
+export * from './ToggleAudioButton';
+export * from './ToggleCameraButton';
+export * from './ToggleAudioOutputButton';
+export * from './ToggleParticipantListButton';

package/src/components/CallParticipantsList/BlockedUserListing.tsx

@@ -0,0 +1,38 @@
+import { useCall } from '@stream-io/video-react-bindings';
+import { OwnCapability } from '@stream-io/video-client';
+
+import { Restricted } from '../Moderation';
+import { TextButton } from '../Button';
+
+export const BlockedUserListing = ({ data }: { data: string[] }) => {
+  if (!data.length) return null;
+
+  return (
+    <>
+      <div className="str-video__participant-listing">
+        {data.map((userId) => (
+          <BlockedUserListingItem key={userId} userId={userId} />
+        ))}
+      </div>
+    </>
+  );
+};
+
+const BlockedUserListingItem = ({ userId }: { userId: string }) => {
+  const call = useCall();
+
+  const unblockUserClickHandler = () => {
+    if (userId) call?.unblockUser(userId);
+  };
+
+  return (
+    <div className="str-video__participant-listing-item">
+      <div className="str-video__participant-listing-item__display-name">
+        {userId}
+      </div>
+      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
+        <TextButton onClick={unblockUserClickHandler}>Unblock</TextButton>
+      </Restricted>
+    </div>
+  );
+};

package/src/components/CallParticipantsList/CallParticipantListHeader.tsx

@@ -0,0 +1,29 @@
+import { useParticipants } from '@stream-io/video-react-bindings';
+
+export type CallParticipantListHeaderProps = {
+  /** Click event listener function to be invoked in order to dismiss / hide the CallParticipantsList from the UI */
+  onClose: () => void;
+};
+
+export const CallParticipantListHeader = ({
+  onClose,
+}: CallParticipantListHeaderProps) => {
+  const participants = useParticipants();
+
+  return (
+    <div className="str-video__participant-list-header">
+      <div className="str-video__participant-list-header__title">
+        Participants{' '}
+        <span className="str-video__participant-list-header__title-count">
+          ({participants.length})
+        </span>
+      </div>
+      <button
+        onClick={onClose}
+        className="str-video__participant-list-header__close-button"
+      >
+        <span className="str-video__participant-list-header__close-button--icon" />
+      </button>
+    </div>
+  );
+};

package/src/components/CallParticipantsList/CallParticipantListing.tsx

@@ -0,0 +1,22 @@
+import { ComponentType } from 'react';
+import { StreamVideoParticipant } from '@stream-io/video-client';
+import { CallParticipantListingItem } from './CallParticipantListingItem';
+
+export type CallParticipantListingProps = {
+  /** Array of participant objects to be rendered */
+  data: StreamVideoParticipant[];
+  Header?: ComponentType;
+};
+
+export const CallParticipantListing = ({
+  data,
+}: CallParticipantListingProps) => (
+  <div className="str-video__participant-listing">
+    {data.map((participant) => (
+      <CallParticipantListingItem
+        key={participant.sessionId}
+        participant={participant}
+      />
+    ))}
+  </div>
+);

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -0,0 +1,249 @@
+import clsx from 'clsx';
+import { ComponentProps, ComponentType, forwardRef } from 'react';
+import { useCall, useConnectedUser } from '@stream-io/video-react-bindings';
+import {
+  OwnCapability,
+  SfuModels,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+import { IconButton } from '../Button';
+import {
+  GenericMenu,
+  GenericMenuButtonItem,
+  MenuToggle,
+  ToggleMenuButtonProps,
+} from '../Menu';
+import { Restricted } from '../Moderation';
+import { WithTooltip } from '../Tooltip';
+import { Icon } from '../Icon';
+
+type CallParticipantListingItemProps = {
+  /** Participant object be rendered */
+  participant: StreamVideoParticipant;
+  /** Custom component used to display participant's name */
+  DisplayName?: ComponentType<{ participant: StreamVideoParticipant }>;
+};
+export const CallParticipantListingItem = ({
+  participant,
+  DisplayName = DefaultDisplayName,
+}: CallParticipantListingItemProps) => {
+  const isAudioOn = participant.publishedTracks.includes(
+    SfuModels.TrackType.AUDIO,
+  );
+  const isVideoOn = participant.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
+  const isPinned = !!participant.pinnedAt;
+
+  return (
+    <div className="str-video__participant-listing-item">
+      <DisplayName participant={participant} />
+      <div className="str-video__participant-listing-item__media-indicator-group">
+        <MediaIndicator
+          title={isAudioOn ? 'Microphone on' : 'Microphone off'}
+          className={clsx(
+            'str-video__participant-listing-item__icon',
+            `str-video__participant-listing-item__icon-${
+              isAudioOn ? 'mic' : 'mic-off'
+            }`,
+          )}
+        />
+        <MediaIndicator
+          title={isVideoOn ? 'Camera on' : 'Camera off'}
+          className={clsx(
+            'str-video__participant-listing-item__icon',
+            `str-video__participant-listing-item__icon-${
+              isVideoOn ? 'camera' : 'camera-off'
+            }`,
+          )}
+        />
+        {isPinned && (
+          <MediaIndicator
+            title={'Pinned'}
+            className={clsx(
+              'str-video__participant-listing-item__icon',
+              'str-video__participant-listing-item__icon-pinned',
+            )}
+          />
+        )}
+
+        <MenuToggle placement="bottom-end" ToggleButton={ToggleButton}>
+          <ParticipantActionsContextMenu participant={participant} />
+        </MenuToggle>
+      </div>
+    </div>
+  );
+};
+
+const MediaIndicator = (props: ComponentProps<'div'>) => (
+  <WithTooltip {...props} />
+);
+
+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 meFlag = participant.userId === connectedUser?.id ? 'Me' : '';
+  const nameOrId = participant.name || participant.userId || 'Unknown';
+  let displayName;
+  if (!participant.name) {
+    displayName = meFlag || nameOrId || 'Unknown';
+  } else if (meFlag) {
+    displayName = `${nameOrId} (${meFlag})`;
+  } else {
+    displayName = nameOrId;
+  }
+
+  return (
+    <WithTooltip
+      className="str-video__participant-listing-item__display-name"
+      title={displayName}
+    >
+      {displayName}
+    </WithTooltip>
+  );
+};
+
+const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
+  (props, ref) => {
+    return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
+  },
+);
+
+export const ParticipantActionsContextMenu = ({
+  participant,
+}: {
+  participant: StreamVideoParticipant;
+}) => {
+  const activeCall = useCall();
+
+  const blockUser = () => {
+    activeCall?.blockUser(participant.userId);
+  };
+
+  // FIXME: soft kicking does not work this way
+  // also needs to be session-based
+  // const kickUserClickHandler = () => {
+  //   getCall()?.updateCallMembers({
+  //     remove_members: [participant.userId],
+  //     disconnectRemovedMembers: true,
+  //   });
+  // };
+
+  const muteAudio = () => {
+    activeCall?.muteUser(participant.userId, 'audio');
+  };
+  const muteVideo = () => {
+    activeCall?.muteUser(participant.userId, 'video');
+  };
+  const muteScreenShare = () => {
+    activeCall?.muteUser(participant.userId, 'screenshare');
+  };
+
+  const grantPermission = (permission: string) => () => {
+    activeCall?.updateUserPermissions({
+      user_id: participant.userId,
+      grant_permissions: [permission],
+    });
+  };
+
+  const revokePermission = (permission: string) => () => {
+    activeCall?.updateUserPermissions({
+      user_id: participant.userId,
+      revoke_permissions: [permission],
+    });
+  };
+
+  const toggleParticipantPinnedAt = () => {
+    activeCall?.setParticipantPinnedAt(
+      participant.sessionId,
+      participant.pinnedAt ? undefined : Date.now(),
+    );
+  };
+
+  return (
+    <GenericMenu>
+      <GenericMenuButtonItem onClick={toggleParticipantPinnedAt}>
+        <Icon icon="pin" />
+        {participant.pinnedAt ? 'Unpin' : 'Pin'}
+      </GenericMenuButtonItem>
+      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
+        <GenericMenuButtonItem onClick={blockUser}>
+          <Icon icon="not-allowed" />
+          Block
+        </GenericMenuButtonItem>
+      </Restricted>
+      {/* <GenericMenuButtonItem disabled onClick={kickUserClickHandler}>
+        Kick
+      </GenericMenuButtonItem> */}
+      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
+        <GenericMenuButtonItem
+          disabled={
+            !participant.publishedTracks.includes(SfuModels.TrackType.VIDEO)
+          }
+          onClick={muteVideo}
+        >
+          <Icon icon="camera-off-outline" />
+          Turn off video
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          disabled={
+            !participant.publishedTracks.includes(
+              SfuModels.TrackType.SCREEN_SHARE,
+            )
+          }
+          onClick={muteScreenShare}
+        >
+          <Icon icon="screen-share-off" />
+          Turn off screen share
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          disabled={
+            !participant.publishedTracks.includes(SfuModels.TrackType.AUDIO)
+          }
+          onClick={muteAudio}
+        >
+          <Icon icon="no-audio" />
+          Mute audio
+        </GenericMenuButtonItem>
+      </Restricted>
+      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SEND_AUDIO)}
+        >
+          Allow audio
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SEND_VIDEO)}
+        >
+          Allow video
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={grantPermission(OwnCapability.SCREENSHARE)}
+        >
+          Allow screen sharing
+        </GenericMenuButtonItem>
+
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SEND_AUDIO)}
+        >
+          Disable audio
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SEND_VIDEO)}
+        >
+          Disable video
+        </GenericMenuButtonItem>
+        <GenericMenuButtonItem
+          onClick={revokePermission(OwnCapability.SCREENSHARE)}
+        >
+          Disable screen sharing
+        </GenericMenuButtonItem>
+      </Restricted>
+    </GenericMenu>
+  );
+};