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

package/src/components/CallControls/CallControls.tsx

@@ -1,6 +1,6 @@
 import { SpeakingWhileMutedNotification } from '../Notification';
 import { RecordCallButton } from './RecordCallButton';
-import { CallStatsButton } from './CallStatsButton';
+import { ReactionsButton } from './ReactionsButton';
 import { ScreenShareButton } from './ScreenShareButton';
 import { ToggleAudioPublishingButton } from './ToggleAudioButton';
 import { ToggleVideoPublishingButton } from './ToggleVideoButton';
@@ -13,7 +13,7 @@ export type CallControlsProps = {
 export const CallControls = ({ onLeave }: CallControlsProps) => (
   <div className="str-video__call-controls">
     <RecordCallButton />
-    <CallStatsButton />
+    <ReactionsButton />
     <ScreenShareButton />
     <SpeakingWhileMutedNotification>
       <ToggleAudioPublishingButton />

package/src/components/CallControls/CallStatsButton.tsx

@@ -1,8 +1,14 @@
 import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
 
 import { CallStats } from '../CallStats';
-import { CompositeButton, IconButton } from '../Button/';
+import { CompositeButton } from '../Button/';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+import { Icon } from '../Icon';
+
+export type CallStatsButtonProps = {
+  caption?: string;
+};
 
 export const CallStatsButton = () => (
   <MenuToggle placement="top-end" ToggleButton={ToggleMenuButton}>
@@ -12,9 +18,20 @@ export const CallStatsButton = () => (
 
 const ToggleMenuButton = forwardRef<
   HTMLDivElement,
-  ToggleMenuButtonProps<HTMLDivElement>
->(({ menuShown }, ref) => (
-  <CompositeButton ref={ref} active={menuShown} caption={'Stats'}>
-    <IconButton icon="stats" title="Statistics" />
-  </CompositeButton>
-));
+  ToggleMenuButtonProps<HTMLDivElement> & CallStatsButtonProps
+>(function ToggleMenuButton(props, ref) {
+  const { t } = useI18n();
+  const { caption, menuShown } = props;
+
+  return (
+    <CompositeButton
+      ref={ref}
+      active={menuShown}
+      caption={caption}
+      title={caption || t('Statistics')}
+      data-testid="stats-button"
+    >
+      <Icon icon="stats" />
+    </CompositeButton>
+  );
+});

package/src/components/CallControls/CancelCallButton.tsx

@@ -1,6 +1,65 @@
-import { MouseEventHandler, useCallback } from 'react';
-import { IconButton } from '../Button/';
-import { useCall } from '@stream-io/video-react-bindings';
+import { forwardRef, MouseEventHandler, useCallback } from 'react';
+import { OwnCapability } from '@stream-io/video-client';
+import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
+
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
+
+import { IconButton } from '../Button';
+import { Icon } from '../Icon';
+
+const EndCallMenu = (props: {
+  onLeave: MouseEventHandler<HTMLButtonElement>;
+  onEnd: MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const { onLeave, onEnd } = props;
+  const { t } = useI18n();
+  return (
+    <div className="str-video__end-call__confirmation">
+      <button
+        className="str-video__button str-video__end-call__leave"
+        type="button"
+        data-testid="leave-call-button"
+        onClick={onLeave}
+      >
+        <Icon
+          className="str-video__button__icon str-video__end-call__leave-icon"
+          icon="logout"
+        />
+        {t('Leave call')}
+      </button>
+      <Restricted requiredGrants={[OwnCapability.END_CALL]}>
+        <button
+          className="str-video__button str-video__end-call__end"
+          type="button"
+          data-testid="end-call-for-all-button"
+          onClick={onEnd}
+        >
+          <Icon
+            className="str-video__button__icon str-video__end-call__end-icon"
+            icon="call-end"
+          />
+          {t('End call for all')}
+        </button>
+      </Restricted>
+    </div>
+  );
+};
+
+const CancelCallToggleMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>(function CancelCallToggleMenuButton(props, ref) {
+  const { t } = useI18n();
+  return (
+    <IconButton
+      icon="call-end"
+      variant="danger"
+      title={t('Leave call')}
+      data-testid="leave-call-button"
+      ref={ref}
+    />
+  );
+});
 
 export type CancelCallButtonProps = {
   disabled?: boolean;
@@ -8,12 +67,50 @@ export type CancelCallButtonProps = {
   onLeave?: () => void;
 };
 
+export const CancelCallConfirmButton = ({
+  onClick,
+  onLeave,
+}: CancelCallButtonProps) => {
+  const call = useCall();
+
+  const handleLeave: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.leave();
+        onLeave?.();
+      }
+    },
+    [onClick, onLeave, call],
+  );
+
+  const handleEndCall: MouseEventHandler<HTMLButtonElement> = useCallback(
+    async (e) => {
+      if (onClick) {
+        onClick(e);
+      } else if (call) {
+        await call.endCall();
+        onLeave?.();
+      }
+    },
+    [onClick, onLeave, call],
+  );
+
+  return (
+    <MenuToggle placement="top-start" ToggleButton={CancelCallToggleMenuButton}>
+      <EndCallMenu onEnd={handleEndCall} onLeave={handleLeave} />
+    </MenuToggle>
+  );
+};
+
 export const CancelCallButton = ({
   disabled,
   onClick,
   onLeave,
 }: CancelCallButtonProps) => {
   const call = useCall();
+  const { t } = useI18n();
   const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     async (e) => {
       if (onClick) {
@@ -30,6 +127,8 @@ export const CancelCallButton = ({
       disabled={disabled}
       icon="call-end"
       variant="danger"
+      title={t('Leave call')}
+      data-testid="cancel-call-button"
       onClick={handleClick}
     />
   );

package/src/components/CallControls/ReactionsButton.tsx

@@ -1,8 +1,13 @@
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+
 import { OwnCapability, StreamReaction } from '@stream-io/video-client';
 import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
 
-import { CompositeButton, IconButton } from '../Button';
+import { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';
+import { CompositeButton } from '../Button';
 import { defaultEmojiReactionMap } from '../Reaction';
+import { Icon } from '../Icon';
 
 export const defaultReactions: StreamReaction[] = [
   {
@@ -39,38 +44,53 @@ export interface ReactionsButtonProps {
 export const ReactionsButton = ({
   reactions = defaultReactions,
 }: ReactionsButtonProps) => {
-  const { t } = useI18n();
-
   return (
     <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
-      <CompositeButton
-        active={false}
-        caption={t('Reactions')}
-        menuPlacement="top-start"
-        Menu={<DefaultReactionsMenu reactions={reactions} />}
+      <MenuToggle
+        placement="top"
+        ToggleButton={ToggleReactionsMenuButton}
+        visualType={MenuVisualType.MENU}
       >
-        <IconButton
-          icon="reactions"
-          title={t('Reactions')}
-          onClick={() => {
-            console.log('Reactions');
-          }}
-        />
-      </CompositeButton>
+        <DefaultReactionsMenu reactions={reactions} />
+      </MenuToggle>
     </Restricted>
   );
 };
 
+const ToggleReactionsMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleReactionsMenuButton({ menuShown }, ref) {
+  const { t } = useI18n();
+  return (
+    <CompositeButton
+      ref={ref}
+      active={menuShown}
+      variant="primary"
+      title={t('Reactions')}
+    >
+      <Icon icon="reactions" />
+    </CompositeButton>
+  );
+});
+
 export interface DefaultReactionsMenuProps {
   reactions: StreamReaction[];
+  layout?: 'horizontal' | 'vertical';
 }
 
 export const DefaultReactionsMenu = ({
   reactions,
+  layout = 'horizontal',
 }: DefaultReactionsMenuProps) => {
   const call = useCall();
   return (
-    <div className="str-video__reactions-menu">
+    <div
+      className={clsx('str-video__reactions-menu', {
+        'str-video__reactions-menu--horizontal': layout === 'horizontal',
+        'str-video__reactions-menu--vertical': layout === 'vertical',
+      })}
+    >
       {reactions.map((reaction) => (
         <button
           key={reaction.emoji_code}

package/src/components/CallControls/RecordCallButton.tsx

@@ -1,22 +1,94 @@
+import { forwardRef } from 'react';
+
 import { OwnCapability } from '@stream-io/video-client';
-import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
-import { CompositeButton, IconButton } from '../Button/';
+import { Restricted, useI18n } from '@stream-io/video-react-bindings';
+import { CompositeButton } from '../Button/';
+import { Icon } from '../Icon';
+import {
+  MenuToggle,
+  MenuVisualType,
+  ToggleMenuButtonProps,
+  useMenuContext,
+} from '../Menu';
 import { LoadingIndicator } from '../LoadingIndicator';
-import { useToggleCallRecording } from '../../hooks/useToggleCallRecording';
+import { useToggleCallRecording } from '../../hooks';
 
 export type RecordCallButtonProps = {
   caption?: string;
 };
 
-export const RecordCallButton = ({
-  caption = 'Record',
-}: RecordCallButtonProps) => {
-  const call = useCall();
+const RecordEndConfirmation = () => {
+  const { t } = useI18n();
+  const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
+
+  const { close } = useMenuContext();
+
+  return (
+    <div className="str-video__end-recording__confirmation">
+      <div className="str-video__end-recording__header">
+        <Icon icon="recording-on" />
+        <h2 className="str-video__end-recording__heading">
+          {t('End recording')}
+        </h2>
+      </div>
+      <p className="str-video__end-recording__description">
+        {t('Are you sure you want end the recording?')}
+      </p>
+      <div className="str-video__end-recording__actions">
+        <CompositeButton variant="secondary" onClick={close}>
+          {t('Cancel')}
+        </CompositeButton>
+        <CompositeButton variant="primary" onClick={toggleCallRecording}>
+          {isAwaitingResponse ? <LoadingIndicator /> : t('End recording')}
+        </CompositeButton>
+      </div>
+    </div>
+  );
+};
+
+const ToggleEndRecordingMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(function ToggleEndRecordingMenuButton(props, ref) {
+  return (
+    <CompositeButton
+      ref={ref}
+      active={true}
+      variant="secondary"
+      data-testid="recording-stop-button"
+    >
+      <Icon icon="recording-off" />
+    </CompositeButton>
+  );
+});
 
+export const RecordCallConfirmationButton = ({
+  caption,
+}: {
+  caption?: string;
+}) => {
   const { t } = useI18n();
   const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =
     useToggleCallRecording();
 
+  if (isCallRecordingInProgress) {
+    return (
+      <Restricted
+        requiredGrants={[
+          OwnCapability.START_RECORD_CALL,
+          OwnCapability.STOP_RECORD_CALL,
+        ]}
+      >
+        <MenuToggle
+          ToggleButton={ToggleEndRecordingMenuButton}
+          visualType={MenuVisualType.PORTAL}
+        >
+          <RecordEndConfirmation />
+        </MenuToggle>
+      </Restricted>
+    );
+  }
+
   return (
     <Restricted
       requiredGrants={[
@@ -24,23 +96,61 @@ export const RecordCallButton = ({
         OwnCapability.STOP_RECORD_CALL,
       ]}
     >
-      <CompositeButton active={isCallRecordingInProgress} caption={caption}>
+      <CompositeButton
+        active={isCallRecordingInProgress}
+        caption={caption}
+        title={caption || t('Record call')}
+        variant="secondary"
+        data-testid="recording-start-button"
+        onClick={isAwaitingResponse ? undefined : toggleCallRecording}
+      >
         {isAwaitingResponse ? (
-          <LoadingIndicator
-            tooltip={
-              isCallRecordingInProgress
-                ? t('Waiting for recording to stop...')
-                : t('Waiting for recording to start...')
-            }
-          />
+          <LoadingIndicator tooltip={t('Waiting for recording to start...')} />
+        ) : (
+          <Icon icon="recording-off" />
+        )}
+      </CompositeButton>
+    </Restricted>
+  );
+};
+
+export const RecordCallButton = ({ caption }: RecordCallButtonProps) => {
+  const { t } = useI18n();
+  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =
+    useToggleCallRecording();
+
+  let title = caption || t('Record call');
+
+  if (isAwaitingResponse) {
+    title = isCallRecordingInProgress
+      ? t('Waiting for recording to stop...')
+      : t('Waiting for recording to start...');
+  }
+
+  return (
+    <Restricted
+      requiredGrants={[
+        OwnCapability.START_RECORD_CALL,
+        OwnCapability.STOP_RECORD_CALL,
+      ]}
+    >
+      <CompositeButton
+        active={isCallRecordingInProgress}
+        caption={caption}
+        variant="secondary"
+        data-testid={
+          isCallRecordingInProgress
+            ? 'recording-stop-button'
+            : 'recording-start-button'
+        }
+        title={title}
+        onClick={isAwaitingResponse ? undefined : toggleCallRecording}
+      >
+        {isAwaitingResponse ? (
+          <LoadingIndicator />
         ) : (
-          <IconButton
-            // FIXME OL: sort out this ambiguity
-            enabled={!!call}
-            disabled={!call}
+          <Icon
             icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}
-            title={t('Record call')}
-            onClick={toggleCallRecording}
           />
         )}
       </CompositeButton>

package/src/components/CallControls/ScreenShareButton.tsx

@@ -4,9 +4,10 @@ import {
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-import { CompositeButton, IconButton } from '../Button/';
+import { CompositeButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
+import { Icon } from '../Icon';
 
 export type ScreenShareButtonProps = {
   caption?: string;
@@ -14,16 +15,20 @@ export type ScreenShareButtonProps = {
 
 export const ScreenShareButton = (props: ScreenShareButtonProps) => {
   const { t } = useI18n();
-  const { caption = t('Screen Share') } = props;
+  const { caption } = props;
 
-  const { useHasOngoingScreenShare, useScreenShareState } = useCallStateHooks();
+  const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } =
+    useCallStateHooks();
   const isSomeoneScreenSharing = useHasOngoingScreenShare();
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SCREENSHARE);
 
+  const callSettings = useCallSettings();
+  const isScreenSharingAllowed = callSettings?.screensharing.enabled;
+
   const { screenShare, isMute: amIScreenSharing } = useScreenShareState();
   const disableScreenShareButton = amIScreenSharing
-    ? isSomeoneScreenSharing
+    ? isSomeoneScreenSharing || isScreenSharingAllowed === false
     : false;
   return (
     <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
@@ -34,20 +39,29 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
         messageAwaitingApproval={t('Awaiting for an approval to share screen.')}
         messageRevoked={t('You can no longer share your screen.')}
       >
-        <CompositeButton active={isSomeoneScreenSharing} caption={caption}>
-          <IconButton
+        <CompositeButton
+          active={isSomeoneScreenSharing}
+          caption={caption}
+          title={caption || t('Share screen')}
+          variant="primary"
+          data-testid={
+            isSomeoneScreenSharing
+              ? 'screen-share-stop-button'
+              : 'screen-share-start-button'
+          }
+          disabled={disableScreenShareButton}
+          onClick={async () => {
+            if (!hasPermission) {
+              await requestPermission();
+            } else {
+              await screenShare.toggle();
+            }
+          }}
+        >
+          <Icon
             icon={
               isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'
             }
-            title={t('Share screen')}
-            disabled={disableScreenShareButton}
-            onClick={async () => {
-              if (!hasPermission) {
-                await requestPermission();
-              } else {
-                await screenShare.toggle();
-              }
-            }}
           />
         </CompositeButton>
       </PermissionNotification>

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -1,55 +1,82 @@
-import { ComponentType } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
 import {
   Restricted,
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import { CompositeButton, IconButtonWithMenuProps } from '../Button';
 import { DeviceSelectorAudioInput } from '../DeviceSettings';
-import { CompositeButton, IconButton } from '../Button';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
+import { Icon } from '../Icon';
 
-export type ToggleAudioPreviewButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleAudioPreviewButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleAudioPreviewButton = (
   props: ToggleAudioPreviewButtonProps,
 ) => {
+  const { caption, Menu, menuPlacement, ...restCompositeButtonProps } = props;
   const { t } = useI18n();
-  const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
-
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, isMute } = useMicrophoneState();
+  const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
 
   return (
-    <CompositeButton Menu={Menu} active={isMute} caption={caption || t('Mic')}>
-      <IconButton
-        icon={!isMute ? 'mic' : 'mic-off'}
-        onClick={() => microphone.toggle()}
-      />
+    <CompositeButton
+      active={isMute}
+      caption={caption}
+      className={clsx(!hasBrowserPermission && 'str-video__device-unavailable')}
+      variant="secondary"
+      title={
+        !hasBrowserPermission
+          ? t('Check your browser audio permissions')
+          : caption || t('Mic')
+      }
+      disabled={!hasBrowserPermission}
+      data-testid={
+        isMute ? 'preview-audio-unmute-button' : 'preview-audio-mute-button'
+      }
+      onClick={() => microphone.toggle()}
+      Menu={Menu}
+      menuPlacement={menuPlacement}
+      {...restCompositeButtonProps}
+    >
+      <Icon icon={!isMute ? 'mic' : 'mic-off'} />
+      {!hasBrowserPermission && (
+        <span
+          className="str-video__no-media-permission"
+          title={t('Check your browser audio permissions')}
+          children="!"
+        />
+      )}
     </CompositeButton>
   );
 };
 
-export type ToggleAudioPublishingButtonProps = {
-  caption?: string;
-  Menu?: ComponentType;
-};
+export type ToggleAudioPublishingButtonProps = Pick<
+  IconButtonWithMenuProps,
+  'caption' | 'Menu' | 'menuPlacement'
+>;
 
 export const ToggleAudioPublishingButton = (
   props: ToggleAudioPublishingButtonProps,
 ) => {
   const { t } = useI18n();
-  const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
+  const {
+    caption,
+    Menu = <DeviceSelectorAudioInput visualType="list" />,
+    menuPlacement = 'top',
+    ...restCompositeButtonProps
+  } = props;
 
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_AUDIO);
 
   const { useMicrophoneState } = useCallStateHooks();
-  const { microphone, isMute } = useMicrophoneState();
+  const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
 
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
@@ -60,17 +87,35 @@ export const ToggleAudioPublishingButton = (
         messageAwaitingApproval={t('Awaiting for an approval to speak.')}
         messageRevoked={t('You can no longer speak.')}
       >
-        <CompositeButton Menu={Menu} active={isMute} caption={caption}>
-          <IconButton
-            icon={isMute ? 'mic-off' : 'mic'}
-            onClick={async () => {
-              if (!hasPermission) {
-                await requestPermission();
-              } else {
-                await microphone.toggle();
-              }
-            }}
-          />
+        <CompositeButton
+          active={isMute}
+          caption={caption}
+          title={
+            !hasPermission
+              ? t('You have no permission to share your audio')
+              : !hasBrowserPermission
+              ? t('Check your browser mic permissions')
+              : caption || t('Mic')
+          }
+          variant="secondary"
+          disabled={!hasBrowserPermission || !hasPermission}
+          data-testid={isMute ? 'audio-unmute-button' : 'audio-mute-button'}
+          onClick={async () => {
+            if (!hasPermission) {
+              await requestPermission();
+            } else {
+              await microphone.toggle();
+            }
+          }}
+          Menu={Menu}
+          menuPlacement={menuPlacement}
+          menuOffset={16}
+          {...restCompositeButtonProps}
+        >
+          <Icon icon={isMute ? 'mic-off' : 'mic'} />
+          {(!hasBrowserPermission || !hasPermission) && (
+            <span className="str-video__no-media-permission">!</span>
+          )}
         </CompositeButton>
       </PermissionNotification>
     </Restricted>