@stream-io/video-react-sdk 2.0.0-beta.0 → 2.0.0-beta.1

package/src/components/CallControls/CancelCallButton.tsx

@@ -1,10 +1,11 @@
 import { forwardRef, MouseEventHandler, useCallback } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
+import { Restricted, useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 
-import { IconButton } from '../Button';
+import { Button, ButtonProps, IconButton } from '../Button';
 import { Icon } from '../Icon';
 import { WithTooltip } from '../Tooltip';
 
@@ -16,31 +17,29 @@ const EndCallMenu = (props: {
   const { t } = useI18n();
   return (
     <div className="str-video__end-call__confirmation">
-      <button
-        className="str-video__button str-video__end-call__leave"
-        type="button"
+      <Button
+        variant="secondary"
+        appearance="outline"
+        className="str-video__end-call__leave"
         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>
+        <Icon icon="logout" />
+        {t('callControls.cancelCallButton.leaveCall.title', 'Leave call')}
+      </Button>
       <Restricted requiredGrants={[OwnCapability.END_CALL]}>
-        <button
-          className="str-video__button str-video__end-call__end"
-          type="button"
+        <Button
+          variant="destructive"
+          className="str-video__end-call__end"
           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>
+          <Icon icon="call-end" />
+          {t(
+            'callControls.cancelCallButton.endCallForAll.label',
+            'End call for all',
+          )}
+        </Button>
       </Restricted>
     </div>
   );
@@ -52,10 +51,13 @@ const CancelCallToggleMenuButton = forwardRef<
 >(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
   const { t } = useI18n();
   return (
-    <WithTooltip title={t('Leave call')} tooltipDisabled={menuShown}>
+    <WithTooltip
+      title={t('callControls.cancelCallButton.leaveCall.title', 'Leave call')}
+      tooltipDisabled={menuShown}
+    >
       <IconButton
         icon={menuShown ? 'close' : 'call-end'}
-        variant={menuShown ? 'active' : 'danger'}
+        variant="destructive"
         data-testid="leave-call-button"
         ref={ref}
       />
@@ -66,6 +68,7 @@ const CancelCallToggleMenuButton = forwardRef<
 export type CancelCallButtonProps = {
   disabled?: boolean;
   caption?: string;
+  size?: ButtonProps['size'];
   onClick?: MouseEventHandler<HTMLButtonElement>;
   onLeave?: (err?: Error) => void;
 };
@@ -120,6 +123,7 @@ export const CancelCallConfirmButton = ({
 export const CancelCallButton = ({
   disabled,
   caption,
+  size,
   onClick,
   onLeave,
 }: CancelCallButtonProps) => {
@@ -143,10 +147,14 @@ export const CancelCallButton = ({
   );
   return (
     <IconButton
+      size={size}
       disabled={disabled}
       icon="call-end"
-      variant="danger"
-      title={caption ?? t('Leave call')}
+      variant="destructive"
+      title={
+        caption ??
+        t('callControls.cancelCallButton.leaveCall.title', 'Leave call')
+      }
       data-testid="cancel-call-button"
       onClick={handleClick}
     />

package/src/components/CallControls/ReactionsButton.tsx

@@ -2,7 +2,8 @@ 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 { Restricted, useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 
 import {
   MenuToggle,
@@ -69,8 +70,11 @@ const ToggleReactionsMenuButton = forwardRef<
 >(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
   const { t } = useI18n();
   return (
-    <WithTooltip title={t('Reactions')} tooltipDisabled={menuShown}>
-      <CompositeButton ref={ref} active={menuShown} variant="primary">
+    <WithTooltip
+      title={t('callControls.reactionsButton.reactions.title', 'Reactions')}
+      tooltipDisabled={menuShown}
+    >
+      <CompositeButton ref={ref} active={menuShown}>
         <Icon icon="reactions" />
       </CompositeButton>
     </WithTooltip>

package/src/components/CallControls/RecordCallButton.tsx

@@ -3,10 +3,10 @@ import { forwardRef } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
 import {
   Restricted,
-  useI18n,
   useToggleCallRecording,
 } from '@stream-io/video-react-bindings';
-import { CompositeButton } from '../Button/';
+import { useI18n } from '../../i18n';
+import { Button, CompositeButton } from '../Button/';
 import { Icon } from '../Icon';
 import {
   MenuToggle,
@@ -37,23 +37,38 @@ const RecordEndConfirmation = (props: PropsWithErrorHandler) => {
     <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 className="str-video__end-recording__text">
+          <h2 className="str-video__end-recording__heading">
+            {t(
+              'callControls.recordCallButton.endRecording.title',
+              'End recording',
+            )}
+          </h2>
+          <p className="str-video__end-recording__description">
+            {t(
+              'callControls.recordCallButton.confirmEndRecording.description',
+              'Are you sure you want end the recording?',
+            )}
+          </p>
+        </div>
       </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"
+        <Button
+          variant="destructive"
           onClick={isAwaitingResponse ? undefined : handleClick}
         >
-          {isAwaitingResponse ? <LoadingIndicator /> : t('End recording')}
-        </CompositeButton>
+          {isAwaitingResponse ? (
+            <LoadingIndicator />
+          ) : (
+            t(
+              'callControls.recordCallButton.endRecording.title',
+              'End recording',
+            )
+          )}
+        </Button>
+        <Button variant="secondary" appearance="outline" onClick={close}>
+          {t('common.cancel.label', 'Cancel')}
+        </Button>
       </div>
     </div>
   );
@@ -67,7 +82,7 @@ const ToggleEndRecordingMenuButton = forwardRef<
     <CompositeButton
       ref={ref}
       active={true}
-      variant="secondary"
+      variant="destructive"
       data-testid="recording-stop-button"
     >
       <Icon icon="recording-off" />
@@ -104,8 +119,12 @@ export const RecordCallConfirmationButton = (
   }
 
   const title = isAwaitingResponse
-    ? t('Waiting for recording to start...')
-    : (caption ?? t('Record call'));
+    ? t(
+        'callControls.recordCallButton.waitingRecordingStart.title',
+        'Waiting for recording to start...',
+      )
+    : (caption ??
+      t('callControls.recordCallButton.recordCall.title', 'Record call'));
 
   return (
     <Restricted
@@ -118,7 +137,7 @@ export const RecordCallConfirmationButton = (
         <CompositeButton
           active={isCallRecordingInProgress}
           caption={caption}
-          variant="secondary"
+          variant={isCallRecordingInProgress ? 'destructive' : 'secondary'}
           data-testid="recording-start-button"
           onClick={isAwaitingResponse ? undefined : handleClick}
         >
@@ -141,12 +160,20 @@ export const RecordCallButton = (props: RecordCallButtonProps) => {
 
   const handleClick = createCallControlHandler(props, toggleCallRecording);
 
-  let title = caption ?? t('Record call');
+  let title =
+    caption ??
+    t('callControls.recordCallButton.recordCall.title', 'Record call');
 
   if (isAwaitingResponse) {
     title = isCallRecordingInProgress
-      ? t('Waiting for recording to stop...')
-      : t('Waiting for recording to start...');
+      ? t(
+          'callControls.recordCallButton.waitingRecordingStop.title',
+          'Waiting for recording to stop...',
+        )
+      : t(
+          'callControls.recordCallButton.waitingRecordingStart.title',
+          'Waiting for recording to start...',
+        );
   }
 
   return (
@@ -159,7 +186,7 @@ export const RecordCallButton = (props: RecordCallButtonProps) => {
       <CompositeButton
         active={isCallRecordingInProgress}
         caption={caption}
-        variant="secondary"
+        variant={isCallRecordingInProgress ? 'destructive' : 'secondary'}
         data-testid={
           isCallRecordingInProgress
             ? 'recording-stop-button'

package/src/components/CallControls/ScreenShareButton.tsx

@@ -5,9 +5,9 @@ import {
 import {
   Restricted,
   useCallStateHooks,
-  useI18n,
   UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import { CompositeButton } from '../Button/';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
@@ -59,15 +59,36 @@ export const ScreenShareButton = (props: ScreenShareButtonProps) => {
       <PermissionNotification
         permission={OwnCapability.SCREENSHARE}
         isAwaitingApproval={isAwaitingPermission}
-        messageApproved={t('You can now share your screen.')}
-        messageAwaitingApproval={t('Awaiting for an approval to share screen.')}
-        messageRevoked={t('You can no longer share your screen.')}
+        messageApproved={t(
+          'callControls.screenShareButton.permissionGranted.text',
+          'You can now share your screen.',
+        )}
+        messageAwaitingApproval={t(
+          'callControls.screenShareButton.awaitingApproval.text',
+          'Awaiting for an approval to share screen.',
+        )}
+        messageRevoked={t(
+          'callControls.screenShareButton.permissionRevoked.text',
+          'You can no longer share your screen.',
+        )}
       >
-        <WithTooltip title={caption ?? t('Share screen')}>
+        <WithTooltip
+          title={
+            caption ??
+            t(
+              'callControls.screenShareButton.shareScreen.title',
+              'Share screen',
+            )
+          }
+        >
           <CompositeButton
             active={isSomeoneScreenSharing || amIScreenSharing}
             caption={caption}
-            variant="primary"
+            variant={
+              isSomeoneScreenSharing || amIScreenSharing
+                ? 'primary'
+                : 'secondary'
+            }
             data-testid={
               isSomeoneScreenSharing
                 ? 'screen-share-stop-button'

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -6,11 +6,12 @@ import {
 import {
   Restricted,
   useCallStateHooks,
-  useI18n,
   type UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import clsx from 'clsx';
-import { CompositeButton, IconButtonWithMenuProps } from '../Button';
+import { Badge } from '../Badge';
+import { CompositeButton, CompositeButtonProps } from '../Button';
 import { DeviceSelectorAudioInput } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
@@ -24,7 +25,7 @@ import {
 
 export type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<
   Pick<
-    IconButtonWithMenuProps,
+    CompositeButtonProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
   > &
     UseInputMediaDeviceOptions
@@ -62,11 +63,20 @@ export const ToggleAudioPreviewButton = (
   return (
     <WithTooltip
       title={
-        !hasBrowserPermission
-          ? t('Check your browser audio permissions')
-          : isSystemMuted
-            ? t('Microphone is paused by your system')
-            : (caption ?? t('Mic'))
+        isPromptingPermission
+          ? t('common.waitingForPermission.title', 'Waiting for permission')
+          : !hasBrowserPermission
+            ? t(
+                'callControls.toggleAudioButton.checkBrowserAudioPermissions.title',
+                'Check your browser audio permissions',
+              )
+            : isSystemMuted
+              ? t(
+                  'callControls.toggleAudioButton.microphonePausedBySystem.title',
+                  'Microphone is paused by your system',
+                )
+              : (caption ??
+                t('callControls.toggleAudioButton.mic.title', 'Mic'))
       }
       tooltipDisabled={tooltipDisabled}
     >
@@ -76,7 +86,7 @@ export const ToggleAudioPreviewButton = (
         className={clsx(
           !hasBrowserPermission && 'str-video__device-unavailable',
         )}
-        variant="secondary"
+        variant={optionsAwareIsMute ? 'destructive' : 'secondary'}
         disabled={
           !hasBrowserPermission || (!optimisticUpdates && isTogglePending)
         }
@@ -95,27 +105,11 @@ export const ToggleAudioPreviewButton = (
         }}
       >
         <Icon icon={!optionsAwareIsMute ? 'mic' : 'mic-off'} />
-        {!hasBrowserPermission && (
-          <span
-            className="str-video__no-media-permission"
-            title={t('Check your browser audio permissions')}
-            children="!"
-          />
-        )}
-        {isPromptingPermission && (
-          <span
-            className="str-video__pending-permission"
-            title={t('Waiting for permission')}
-            children="?"
-          />
-        )}
-        {isSystemMuted && hasBrowserPermission && (
-          <span
-            className="str-video__system-muted"
-            title={t('Microphone is paused by your system')}
-            children="!"
-          />
-        )}
+        {isPromptingPermission ? (
+          <Badge variant="error" icon="question-mark-fill" />
+        ) : !hasBrowserPermission || isSystemMuted ? (
+          <Badge variant="error" icon="exclamation-mark-fill" />
+        ) : null}
       </CompositeButton>
     </WithTooltip>
   );
@@ -123,7 +117,7 @@ export const ToggleAudioPreviewButton = (
 
 export type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<
   Pick<
-    IconButtonWithMenuProps,
+    CompositeButtonProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
   > &
     UseInputMediaDeviceOptions
@@ -172,26 +166,47 @@ export const ToggleAudioPublishingButton = (
       <PermissionNotification
         permission={OwnCapability.SEND_AUDIO}
         isAwaitingApproval={isAwaitingPermission}
-        messageApproved={t('You can now speak.')}
-        messageAwaitingApproval={t('Awaiting for an approval to speak.')}
-        messageRevoked={t('You can no longer speak.')}
+        messageApproved={t(
+          'callControls.toggleAudioButton.permissionGranted.text',
+          'You can now speak.',
+        )}
+        messageAwaitingApproval={t(
+          'callControls.toggleAudioButton.awaitingApproval.text',
+          'Awaiting for an approval to speak.',
+        )}
+        messageRevoked={t(
+          'callControls.toggleAudioButton.permissionRevoked.text',
+          'You can no longer speak.',
+        )}
       >
         <WithTooltip
           title={
-            !hasPermission
-              ? t('You have no permission to share your audio')
-              : !hasBrowserPermission
-                ? t('Check your browser mic permissions')
-                : isSystemMuted
-                  ? t('Microphone is paused by your system')
-                  : (caption ?? t('Mic'))
+            isPromptingPermission
+              ? t('common.waitingForPermission.title', 'Waiting for permission')
+              : !hasPermission
+                ? t(
+                    'callControls.toggleAudioButton.noPermissionToShareAudio.title',
+                    'You have no permission to share your audio',
+                  )
+                : !hasBrowserPermission
+                  ? t(
+                      'callControls.toggleAudioButton.checkBrowserMicPermissions.title',
+                      'Check your browser mic permissions',
+                    )
+                  : isSystemMuted
+                    ? t(
+                        'callControls.toggleAudioButton.microphonePausedBySystem.title',
+                        'Microphone is paused by your system',
+                      )
+                    : (caption ??
+                      t('callControls.toggleAudioButton.mic.title', 'Mic'))
           }
           tooltipDisabled={tooltipDisabled}
         >
           <CompositeButton
             active={optionsAwareIsMute}
             caption={caption}
-            variant="secondary"
+            variant={optionsAwareIsMute ? 'destructive' : 'secondary'}
             disabled={
               !hasBrowserPermission ||
               !hasPermission ||
@@ -212,25 +227,11 @@ export const ToggleAudioPublishingButton = (
             }}
           >
             <Icon icon={optionsAwareIsMute ? 'mic-off' : 'mic'} />
-            {(!hasBrowserPermission || !hasPermission) && (
-              <span className="str-video__no-media-permission">!</span>
-            )}
-            {isPromptingPermission && (
-              <span
-                className="str-video__pending-permission"
-                title={t('Waiting for permission')}
-              >
-                ?
-              </span>
-            )}
-            {isSystemMuted && hasBrowserPermission && hasPermission && (
-              <span
-                className="str-video__system-muted"
-                title={t('Microphone is paused by your system')}
-              >
-                !
-              </span>
-            )}
+            {isPromptingPermission ? (
+              <Badge variant="error" icon="question-mark-fill" />
+            ) : !hasBrowserPermission || !hasPermission || isSystemMuted ? (
+              <Badge variant="error" icon="exclamation-mark-fill" />
+            ) : null}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

package/src/components/CallControls/ToggleAudioOutputButton.tsx

@@ -1,12 +1,12 @@
-import { CompositeButton, IconButtonWithMenuProps } from '../Button';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { CompositeButton, CompositeButtonProps } from '../Button';
+import { useI18n } from '../../i18n';
 import { Icon } from '../Icon';
 import { DeviceSelectorAudioOutput } from '../DeviceSettings';
 import { WithTooltip } from '../Tooltip';
 import { useState } from 'react';
 
 export type ToggleAudioOutputButtonProps = Pick<
-  IconButtonWithMenuProps,
+  CompositeButtonProps,
   'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
 >;
 
@@ -24,7 +24,10 @@ export const ToggleAudioOutputButton = (
 
   return (
     <WithTooltip
-      title={caption || t('Speakers')}
+      title={
+        caption ||
+        t('callControls.toggleAudioOutputButton.speakers.title', 'Speakers')
+      }
       tooltipDisabled={tooltipDisabled}
     >
       <CompositeButton