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

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -1,16 +1,17 @@
 import {
   Restricted,
   useCallStateHooks,
-  useI18n,
   UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import clsx from 'clsx';
 import {
   OwnCapability,
   RequestPermissionRequestPermissionsEnum,
   SfuModels,
 } from '@stream-io/video-client';
-import { CompositeButton, IconButtonWithMenuProps } from '../Button/';
+import { Badge } from '../Badge';
+import { CompositeButton, CompositeButtonProps } from '../Button/';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
 import { useRequestPermission } from '../../hooks';
@@ -24,7 +25,7 @@ import {
 
 export type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<
   Pick<
-    IconButtonWithMenuProps,
+    CompositeButtonProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
   > &
     UseInputMediaDeviceOptions
@@ -60,11 +61,20 @@ export const ToggleVideoPreviewButton = (
   return (
     <WithTooltip
       title={
-        !hasBrowserPermission
-          ? t('Check your browser video permissions')
-          : isSystemMuted
-            ? t('Camera is paused by your system')
-            : (caption ?? t('Video'))
+        isPromptingPermission
+          ? t('common.waitingForPermission.title', 'Waiting for permission')
+          : !hasBrowserPermission
+            ? t(
+                'callControls.toggleVideoButton.checkBrowserVideoPermissions.title',
+                'Check your browser video permissions',
+              )
+            : isSystemMuted
+              ? t(
+                  'callControls.toggleVideoButton.cameraPausedBySystem.title',
+                  'Camera is paused by your system',
+                )
+              : (caption ??
+                t('callControls.toggleVideoButton.video.title', 'Video'))
       }
       tooltipDisabled={tooltipDisabled}
     >
@@ -74,7 +84,7 @@ export const ToggleVideoPreviewButton = (
         className={clsx(
           !hasBrowserPermission && 'str-video__device-unavailable',
         )}
-        variant="secondary"
+        variant={optionsAwareIsMute ? 'destructive' : 'secondary'}
         data-testid={
           optionsAwareIsMute
             ? 'preview-video-unmute-button'
@@ -93,27 +103,11 @@ export const ToggleVideoPreviewButton = (
         }}
       >
         <Icon icon={!optionsAwareIsMute ? 'camera' : 'camera-off'} />
-        {!hasBrowserPermission && (
-          <span
-            className="str-video__no-media-permission"
-            title={t('Check your browser video 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('Camera 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>
   );
@@ -121,7 +115,7 @@ export const ToggleVideoPreviewButton = (
 
 type ToggleVideoPublishingButtonProps = PropsWithErrorHandler<
   Pick<
-    IconButtonWithMenuProps,
+    CompositeButtonProps,
     'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'
   > &
     UseInputMediaDeviceOptions
@@ -172,30 +166,52 @@ export const ToggleVideoPublishingButton = (
       <PermissionNotification
         permission={OwnCapability.SEND_VIDEO}
         isAwaitingApproval={isAwaitingPermission}
-        messageApproved={t('You can now share your video.')}
+        messageApproved={t(
+          'callControls.toggleVideoButton.permissionGranted.text',
+          'You can now share your video.',
+        )}
         messageAwaitingApproval={t(
+          'callControls.toggleVideoButton.awaitingApproval.text',
           'Awaiting for an approval to share your video.',
         )}
-        messageRevoked={t('You can no longer share your video.')}
+        messageRevoked={t(
+          'callControls.toggleVideoButton.permissionRevoked.text',
+          'You can no longer share your video.',
+        )}
       >
         <WithTooltip
           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')
-                  : isSystemMuted
-                    ? t('Camera is paused by your system')
-                    : caption || t('Video')
+            isPromptingPermission
+              ? t('common.waitingForPermission.title', 'Waiting for permission')
+              : !hasPermission
+                ? t(
+                    'callControls.toggleVideoButton.noPermissionToShareVideo.title',
+                    'You have no permission to share your video',
+                  )
+                : !hasBrowserPermission
+                  ? t(
+                      'callControls.toggleVideoButton.checkBrowserVideoPermissions.title',
+                      'Check your browser video permissions',
+                    )
+                  : !isPublishingVideoAllowed
+                    ? t(
+                        'callControls.toggleVideoButton.videoPublishingDisabled.title',
+                        'Video publishing is disabled by the system',
+                      )
+                    : isSystemMuted
+                      ? t(
+                          'callControls.toggleVideoButton.cameraPausedBySystem.title',
+                          'Camera is paused by your system',
+                        )
+                      : caption ||
+                        t('callControls.toggleVideoButton.video.title', 'Video')
           }
           tooltipDisabled={tooltipDisabled}
         >
           <CompositeButton
             active={optionsAwareIsMute}
             caption={caption}
-            variant="secondary"
+            variant={optionsAwareIsMute ? 'destructive' : 'secondary'}
             disabled={
               !hasBrowserPermission ||
               !hasPermission ||
@@ -216,30 +232,14 @@ export const ToggleVideoPublishingButton = (
             }}
           >
             <Icon icon={optionsAwareIsMute ? 'camera-off' : 'camera'} />
-            {(!hasBrowserPermission ||
+            {isPromptingPermission ? (
+              <Badge variant="error" icon="question-mark-fill" />
+            ) : !hasBrowserPermission ||
               !hasPermission ||
-              !isPublishingVideoAllowed) && (
-              <span className="str-video__no-media-permission">!</span>
-            )}
-            {isPromptingPermission && (
-              <span
-                className="str-video__pending-permission"
-                title={t('Waiting for permission')}
-              >
-                ?
-              </span>
-            )}
-            {isSystemMuted &&
-              hasBrowserPermission &&
-              hasPermission &&
-              isPublishingVideoAllowed && (
-                <span
-                  className="str-video__system-muted"
-                  title={t('Camera is paused by your system')}
-                >
-                  !
-                </span>
-              )}
+              !isPublishingVideoAllowed ||
+              isSystemMuted ? (
+              <Badge variant="error" icon="exclamation-mark-fill" />
+            ) : null}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

package/src/components/CallControls/index.ts

@@ -1,6 +1,5 @@
 export * from './AcceptCallButton';
 export * from './CallControls';
-export * from './CallStatsButton';
 export * from './CancelCallButton';
 export * from './ReactionsButton';
 export * from './RecordCallButton';

package/src/components/CallParticipantsList/BlockedUserListing.tsx

@@ -1,7 +1,7 @@
 import { Restricted, useCall } from '@stream-io/video-react-bindings';
 import { OwnCapability } from '@stream-io/video-client';
 
-import { TextButton } from '../Button';
+import { Button } from '../Button';
 
 export const BlockedUserListing = ({ data }: { data: string[] }) => {
   if (!data.length) return null;
@@ -30,7 +30,14 @@ const BlockedUserListingItem = ({ userId }: { userId: string }) => {
         {userId}
       </div>
       <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
-        <TextButton onClick={unblockUserClickHandler}>Unblock</TextButton>
+        <Button
+          appearance="ghost"
+          size="xs"
+          variant="secondary"
+          onClick={unblockUserClickHandler}
+        >
+          Unblock
+        </Button>
       </Restricted>
     </div>
   );

package/src/components/CallParticipantsList/CallParticipantListHeader.tsx

@@ -1,4 +1,5 @@
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 
 import { IconButton } from '../Button';
 
@@ -20,17 +21,23 @@ export const CallParticipantListHeader = ({
   return (
     <div className="str-video__participant-list-header">
       <div className="str-video__participant-list-header__title">
-        {t('Participants')}{' '}
+        {t('common.participants.label', 'Participants')}{' '}
         <span className="str-video__participant-list-header__title-count">
           [{participants.length}]
         </span>
         {anonymousParticipantCount > 0 && (
           <span className="str-video__participant-list-header__title-anonymous">
-            {t('Anonymous', { count: anonymousParticipantCount })}
+            {t(
+              'participantList.anonymousCount.text',
+              ', and ({{ anonymousCount }}) anonymous',
+              { anonymousCount: anonymousParticipantCount },
+            )}
           </span>
         )}
       </div>
       <IconButton
+        size="sm"
+        variant="secondary"
         onClick={onClose}
         className="str-video__participant-list-header__close-button"
         icon="close"

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { ComponentProps, ComponentType, forwardRef, memo } from 'react';
-import { useConnectedUser, useI18n } from '@stream-io/video-react-bindings';
+import { useConnectedUser } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import {
   hasAudio,
   hasVideo,
@@ -37,7 +38,11 @@ export const CallParticipantListingItem = memo(
         <DisplayName participant={participant} />
         <div className="str-video__participant-listing-item__media-indicator-group">
           <MediaIndicator
-            title={isAudioOn ? t('Microphone on') : t('Microphone off')}
+            title={
+              isAudioOn
+                ? t('participantList.microphoneOn.title', 'Microphone on')
+                : t('participantList.microphoneOff.title', 'Microphone off')
+            }
             className={clsx(
               'str-video__participant-listing-item__icon',
               `str-video__participant-listing-item__icon-${
@@ -46,7 +51,11 @@ export const CallParticipantListingItem = memo(
             )}
           />
           <MediaIndicator
-            title={isVideoOn ? t('Camera on') : t('Camera off')}
+            title={
+              isVideoOn
+                ? t('participantList.cameraOn.title', 'Camera on')
+                : t('participantList.cameraOff.title', 'Camera off')
+            }
             className={clsx(
               'str-video__participant-listing-item__icon',
               `str-video__participant-listing-item__icon-${
@@ -56,7 +65,7 @@ export const CallParticipantListingItem = memo(
           />
           {isPinnedOn && (
             <MediaIndicator
-              title={t('Pinned')}
+              title={t('participantList.pinned.title', 'Pinned')}
               className={clsx(
                 'str-video__participant-listing-item__icon',
                 'str-video__participant-listing-item__icon-pinned',
@@ -92,11 +101,18 @@ const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
   const connectedUser = useConnectedUser();
   const { t } = useI18n();
 
-  const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';
-  const nameOrId = participant.name || participant.userId || t('Unknown');
+  const meFlag =
+    participant.userId === connectedUser?.id
+      ? t('participantList.me.text', 'Me')
+      : '';
+  const nameOrId =
+    participant.name ||
+    participant.userId ||
+    t('participantList.unknown.text', 'Unknown');
   let displayName;
   if (!participant.name) {
-    displayName = meFlag || nameOrId || t('Unknown');
+    displayName =
+      meFlag || nameOrId || t('participantList.unknown.text', 'Unknown');
   } else if (meFlag) {
     displayName = `${nameOrId} (${meFlag})`;
   } else {
@@ -115,6 +131,15 @@ const DefaultDisplayName = ({ participant }: DisplayNameProps) => {
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
   function ToggleButtonRender(props, ref) {
-    return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
+    return (
+      <IconButton
+        className="str-video__participant-listing-item__menu-button"
+        active={props.menuShown}
+        size="sm"
+        variant="secondary"
+        ref={ref}
+        icon="ellipsis"
+      />
+    );
   },
 );

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -10,8 +10,8 @@ import {
   Restricted,
   useCall,
   useCallStateHooks,
-  useI18n,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import {
   name,
   OwnCapability,
@@ -19,7 +19,7 @@ import {
 } from '@stream-io/video-client';
 
 import { BlockedUserListing } from './BlockedUserListing';
-import { IconButton, TextButton } from '../Button';
+import { Button, IconButton } from '../Button';
 import { CallParticipantListHeader } from './CallParticipantListHeader';
 import { CallParticipantListing } from './CallParticipantListing';
 import { EmptyParticipantSearchList } from './EmptyParticipantSearchList';
@@ -117,7 +117,14 @@ const CallParticipantListContentHeader = ({
             requiredGrants={[OwnCapability.MUTE_USERS]}
             hasPermissionsOnly
           >
-            <TextButton onClick={muteAll}>{t('Mute all')}</TextButton>
+            <Button
+              appearance="ghost"
+              size="xs"
+              variant="secondary"
+              onClick={muteAll}
+            >
+              {t('participantList.muteAll.label', 'Mute all')}
+            </Button>
           </Restricted>
         )}
       </div>
@@ -128,7 +135,7 @@ const CallParticipantListContentHeader = ({
           ).map((lt) => (
             <GenericMenuButtonItem
               key={lt}
-              aria-selected={lt === userListType}
+              aria-current={lt === userListType}
               onClick={() => setUserListType(lt)}
             >
               {UserListTypes[lt]}
@@ -227,6 +234,15 @@ const BlockedUsersSearchResults = ({
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
   function ToggleButtonRender(props, ref) {
-    return <IconButton enabled={props.menuShown} icon="filter" ref={ref} />;
+    return (
+      <IconButton
+        className="str-video__participant-list__filter-button"
+        active={props.menuShown}
+        size="sm"
+        variant="secondary"
+        ref={ref}
+        icon="filter"
+      />
+    );
   },
 );

package/src/components/CallParticipantsList/EmptyParticipantSearchList.tsx

@@ -1,10 +1,10 @@
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 
 export const EmptyParticipantSearchList = () => {
   const { t } = useI18n();
   return (
     <div className="str-video__participant-list--empty">
-      {t('No participants found')}
+      {t('participantList.noParticipantsFound.text', 'No participants found')}
     </div>
   );
 };

package/src/components/CallRecordingList/CallRecordingListHeader.tsx

@@ -1,5 +1,5 @@
 import { CallRecording } from '@stream-io/video-client';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import { IconButton } from '../Button';
 
 export type CallRecordingListHeaderProps = {
@@ -17,11 +17,19 @@ export const CallRecordingListHeader = ({
   return (
     <div className="str-video__call-recording-list__header">
       <div className="str-video__call-recording-list__title">
-        <span>{t('Call Recordings')}</span>
+        <span>
+          {t('callRecordingList.callRecordings.title', 'Call Recordings')}
+        </span>
         {callRecordings.length ? <span>({callRecordings.length})</span> : null}
       </div>
       {onRefresh && (
-        <IconButton icon="refresh" title={t('Refresh')} onClick={onRefresh} />
+        <IconButton
+          size="sm"
+          variant="secondary"
+          title={t('callRecordingList.refresh.title', 'Refresh')}
+          onClick={onRefresh}
+          icon="refresh"
+        />
       )}
     </div>
   );

package/src/components/DeviceSettings/DeviceAudioPreviewItem.tsx

@@ -76,7 +76,9 @@ export const DeviceAudioPreviewItem = ({
         checked={device.isSelected}
         onChange={(e) => onSelect(e.target.value)}
       />
-      {device.label}
+      <span className="str-video__device-settings__option__label">
+        {device.label}
+      </span>
       <DeviceLevelIndicator deviceId={device.deviceId} />
     </label>
   );

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -49,7 +49,7 @@ const DeviceSelectorOption = ({
         defaultChecked={defaultChecked}
         disabled={disabled}
       />
-      {label}
+      <span className="str-video__device-settings__option__label">{label}</span>
     </label>
   );
 };

package/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -33,8 +33,8 @@ export const DeviceSelectorAudioInput = ({
     >
       {volumeIndicatorVisible && (
         <>
-          <hr className="str-video__device-settings__separator" />
           <AudioVolumeIndicator />
+          <hr className="str-video__device-settings__separator" />
         </>
       )}
     </DeviceSelector>
@@ -72,12 +72,7 @@ export const DeviceSelectorAudioOutput = ({
       visualType={visualType}
       icon="speaker"
     >
-      {speakerTestVisible && (
-        <>
-          <hr className="str-video__device-settings__separator" />
-          <SpeakerTest audioUrl={speakerTestAudioUrl} />
-        </>
-      )}
+      {speakerTestVisible && <SpeakerTest audioUrl={speakerTestAudioUrl} />}
     </DeviceSelector>
   );
 };

package/src/components/DeviceSettings/DeviceSettings.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import clsx from 'clsx';
 import { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';
 import {
@@ -31,9 +31,15 @@ const Menu = () => {
   const { t } = useI18n();
   return (
     <div className="str-video__device-settings">
-      <DeviceSelectorVideo title={t('Select a Camera')} />
-      <DeviceSelectorAudioInput title={t('Select a Mic')} />
-      <DeviceSelectorAudioOutput title={t('Select Speakers')} />
+      <DeviceSelectorVideo
+        title={t('deviceSettings.selectCamera.title', 'Select a Camera')}
+      />
+      <DeviceSelectorAudioInput
+        title={t('deviceSettings.selectMic.title', 'Select a Mic')}
+      />
+      <DeviceSelectorAudioOutput
+        title={t('deviceSettings.selectSpeakers.title', 'Select Speakers')}
+      />
     </div>
   );
 };
@@ -45,10 +51,13 @@ const ToggleDeviceSettingsMenuButton = forwardRef<
   const { t } = useI18n();
   return (
     <IconButton
+      active={menuShown}
+      size="sm"
+      variant="secondary"
       className={clsx('str-video__device-settings__button', {
         'str-video__device-settings__button--active': menuShown,
       })}
-      title={t('Toggle device menu')}
+      title={t('deviceSettings.toggleDeviceMenu.title', 'Toggle device menu')}
       icon="device-settings"
       ref={ref}
     />

package/src/components/DeviceSettings/SpeakerTest.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import { CompositeButton } from '../Button';
 import { Icon } from '../Icon';
 
@@ -62,12 +63,16 @@ export const SpeakerTest = (props: { audioUrl?: string }) => {
       />
       <CompositeButton
         className="str-video__speaker-test__button"
+        appearance="outline"
+        size="sm"
         onClick={handleStartTest}
         type="button"
       >
         <div className="str-video__speaker-test__button-content">
           <Icon icon="speaker" />
-          {isPlaying ? t('Stop test') : t('Test speaker')}
+          {isPlaying
+            ? t('deviceSettings.speakerTest.stopTest.label', 'Stop test')
+            : t('deviceSettings.speakerTest.testSpeaker.label', 'Test speaker')}
         </div>
       </CompositeButton>
     </div>

package/src/components/DropdownSelect/DropdownSelect.tsx

@@ -133,7 +133,9 @@ const Select = (props: {
           {icon && (
             <Icon className="str-video__dropdown-selected__icon" icon={icon} />
           )}
-          {selectedLabel}
+          <span className="str-video__dropdown-selected__text">
+            {selectedLabel}
+          </span>
         </label>
         <Icon
           className="str-video__dropdown-selected__chevron"

package/src/components/Menu/GenericMenu.tsx

@@ -36,3 +36,7 @@ export const GenericMenuButtonItem = ({
     </li>
   );
 };
+
+export const GenericMenuSeparator = () => (
+  <li className="str-video__generic-menu--separator" role="separator" />
+);

package/src/components/Notification/MicCaptureErrorNotification.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
 import { Placement } from '@floating-ui/react';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import { Notification } from './Notification';
 
 export type MicCaptureErrorNotificationProps = {
@@ -28,11 +29,15 @@ export const MicCaptureErrorNotification = ({
 
   const message =
     text ??
-    t('Your microphone is not capturing audio. Please check your setup.');
+    t(
+      'notification.micCaptureError.text',
+      'Your microphone is not capturing audio. Please check your setup.',
+    );
 
   return (
     <Notification
       message={message}
+      state="error"
       isVisible={isVisible}
       placement={placement}
       close={() => setIsVisible(false)}