chore: clean-up sdk components

GetStream · Dec 19, 2023 · f11e224 · f11e224
1 parent c792a0d
commit f11e224
Show file tree

Hide file tree

Showing 17 changed files with 141 additions and 147 deletions.
diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
@@ -28,10 +28,10 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.2",
+    "@floating-ui/react": "^0.26.4",
     "@stream-io/video-client": "workspace:^",
     "@stream-io/video-react-bindings": "workspace:^",
-    "chart.js": "^4.4.0",
+    "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"
   },

diff --git a/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx b/packages/react-sdk/src/components/CallControls/CancelCallButton.tsx
@@ -2,24 +2,16 @@ 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 } from '../Menu';
+import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
 
 import { IconButton } from '../Button';
 import { Icon } from '../Icon';
 
-export type CancelCallButtonProps = {
-  disabled?: boolean;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  onLeave?: () => void;
-};
-
-export const EndCallMenu = ({
-  handleLeave,
-  handleEndCall,
-}: {
-  handleLeave: MouseEventHandler<HTMLButtonElement>;
-  handleEndCall: MouseEventHandler<HTMLButtonElement>;
+const EndCallMenu = (props: {
+  onLeave: MouseEventHandler<HTMLButtonElement>;
+  onEnd: MouseEventHandler<HTMLButtonElement>;
 }) => {
+  const { onLeave, onEnd } = props;
   const { t } = useI18n();
   return (
     <div className="str-video__end-call__confirmation">
@@ -28,7 +20,7 @@ export const EndCallMenu = ({
           className="str-video__button str-video__end-call__end"
           type="button"
           data-testid="end-call-for-all-button"
-          onClick={handleEndCall}
+          onClick={onEnd}
         >
           <Icon
             className="str-video__button__icon str-video__end-call__end-icon"
@@ -41,7 +33,7 @@ export const EndCallMenu = ({
         className="str-video__button str-video__end-call__leave"
         type="button"
         data-testid="leave-call-button"
-        onClick={handleLeave}
+        onClick={onLeave}
       >
         <Icon
           className="str-video__button__icon str-video__end-call__leave-icon"
@@ -53,21 +45,29 @@ export const EndCallMenu = ({
   );
 };
 
-const ToggleMenuButton = forwardRef<HTMLButtonElement>((props: any, ref) => {
+const CancelCallToggleMenuButton = forwardRef<
+  HTMLButtonElement,
+  ToggleMenuButtonProps
+>((props, ref) => {
   const { t } = useI18n();
   return (
     <IconButton
-      icon={props.active ? 'close' : 'call-end'}
-      variant={props.active ? undefined : 'danger'}
+      icon="call-end"
+      variant="danger"
       title={t('Leave call')}
       data-testid="leave-call-button"
       ref={ref}
     />
   );
 });
 
+export type CancelCallButtonProps = {
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onLeave?: () => void;
+};
+
 export const CancelCallConfirmButton = ({
-  disabled,
   onClick,
   onLeave,
 }: CancelCallButtonProps) => {
@@ -98,8 +98,8 @@ export const CancelCallConfirmButton = ({
   );
 
   return (
-    <MenuToggle placement="top-start" ToggleButton={ToggleMenuButton}>
-      <EndCallMenu handleEndCall={handleEndCall} handleLeave={handleLeave} />
+    <MenuToggle placement="top-start" ToggleButton={CancelCallToggleMenuButton}>
+      <EndCallMenu onEnd={handleEndCall} onLeave={handleLeave} />
     </MenuToggle>
   );
 };

diff --git a/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx b/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { OwnCapability, StreamReaction } from '@stream-io/video-client';
 import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
 
-import { ToggleMenuButtonProps, MenuToggle, MenuVisualType } from '../Menu';
+import { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';
 import { CompositeButton, IconButton } from '../Button';
 import { defaultEmojiReactionMap } from '../Reaction';
 
@@ -38,18 +38,16 @@ export const defaultReactions: StreamReaction[] = [
 
 export interface ReactionsButtonProps {
   reactions?: StreamReaction[];
-  caption?: string;
 }
 
 export const ReactionsButton = ({
   reactions = defaultReactions,
-  caption,
 }: ReactionsButtonProps) => {
   return (
     <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
       <MenuToggle
         placement="top"
-        ToggleButton={ToggleMenuButton}
+        ToggleButton={ToggleReactionsMenuButton}
         visualType={MenuVisualType.MENU}
       >
         <DefaultReactionsMenu reactions={reactions} />
@@ -58,23 +56,23 @@ export const ReactionsButton = ({
   );
 };
 
+const ToggleReactionsMenuButton = forwardRef<
+  HTMLDivElement,
+  ToggleMenuButtonProps
+>(({ menuShown }, ref) => {
+  const { t } = useI18n();
+  return (
+    <CompositeButton ref={ref} active={menuShown} variant="primary">
+      <IconButton icon="reactions" title={t('Reactions')} />
+    </CompositeButton>
+  );
+});
+
 export interface DefaultReactionsMenuProps {
   reactions: StreamReaction[];
   layout?: 'horizontal' | 'vertical';
 }
 
-const ToggleMenuButton = forwardRef<HTMLDivElement, ToggleMenuButtonProps>(
-  ({ menuShown }, ref) => {
-    const { t } = useI18n();
-
-    return (
-      <CompositeButton ref={ref} active={menuShown} variant="primary">
-        <IconButton icon="reactions" title={t('Reactions')} />
-      </CompositeButton>
-    );
-  },
-);
-
 export const DefaultReactionsMenu = ({
   reactions,
   layout = 'horizontal',

diff --git a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListHeader.tsx b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantListHeader.tsx
@@ -3,7 +3,9 @@ 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;
 };
 
@@ -32,7 +34,7 @@ export const CallParticipantListHeader = ({
         onClick={onClose}
         className="str-video__participant-list-header__close-button"
         icon="close"
-      ></IconButton>
+      />
     </div>
   );
 };
diff --git a/packages/react-sdk/src/components/CallParticipantsList/CallParticipantsList.tsx b/packages/react-sdk/src/components/CallParticipantsList/CallParticipantsList.tsx
@@ -1,7 +1,5 @@
 import {
-  ComponentProps,
   Dispatch,
-  ForwardedRef,
   forwardRef,
   SetStateAction,
   useCallback,
@@ -17,7 +15,6 @@ import {
   OwnCapability,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
-import clsx from 'clsx';
 
 import { BlockedUserListing } from './BlockedUserListing';
 import { IconButton, TextButton } from '../Button';

diff --git a/packages/react-sdk/src/components/CallRecordingList/CallRecordingListHeader.tsx b/packages/react-sdk/src/components/CallRecordingList/CallRecordingListHeader.tsx
@@ -1,4 +1,5 @@
 import { CallRecording } from '@stream-io/video-client';
+import { useI18n } from '@stream-io/video-react-bindings';
 import { IconButton } from '../Button';
 
 export type CallRecordingListHeaderProps = {
@@ -12,15 +13,16 @@ export const CallRecordingListHeader = ({
   callRecordings,
   onRefresh,
 }: CallRecordingListHeaderProps) => {
+  const { t } = useI18n();
   return (
     <div className="str-video__call-recording-list__header">
       <div className="str-video__call-recording-list__title">
-        <span>Call Recordings</span>
+        <span>{t('Call Recordings')}</span>
         {callRecordings.length ? <span>({callRecordings.length})</span> : null}
       </div>
-      {onRefresh ? (
-        <IconButton icon="refresh" title="Refresh" onClick={onRefresh} />
-      ) : null}
+      {onRefresh && (
+        <IconButton icon="refresh" title={t('Refresh')} onClick={onRefresh} />
+      )}
     </div>
   );
 };
diff --git a/packages/react-sdk/src/components/DeviceSettings/DeviceSelector.tsx b/packages/react-sdk/src/components/DeviceSettings/DeviceSelector.tsx
@@ -1,8 +1,6 @@
 import clsx from 'clsx';
 import { ChangeEventHandler, useCallback } from 'react';
 
-import { generateCode } from '../../utilities';
-
 import { DefaultDropDownSelectOption, DropDownSelect } from '../DropdownSelect';
 
 type DeviceSelectorOptionProps = {
@@ -49,8 +47,11 @@ const DeviceSelectorOption = ({
   );
 };
 
-export const DeviceSelectorList = (props: {
+export type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';
+
+const DeviceSelectorList = (props: {
   devices: MediaDeviceInfo[];
+  type: DeviceSelectorType;
   selectedDeviceId?: string;
   title?: string;
   onChange?: (deviceId: string) => void;
@@ -59,10 +60,9 @@ export const DeviceSelectorList = (props: {
     devices = [],
     selectedDeviceId: selectedDeviceFromProps,
     title,
+    type,
     onChange,
   } = props;
-  const inputGroupName =
-    title?.replace(' ', '-').toLowerCase() || generateCode();
 
   // sometimes the browser (Chrome) will report the system-default device
   // with an id of 'default'. In case when it doesn't, we'll select the first
@@ -84,24 +84,24 @@ export const DeviceSelectorList = (props: {
       )}
       {!devices.length ? (
         <DeviceSelectorOption
-          id={`${inputGroupName}--default`}
+          id={`${type}--default`}
           label="Default"
-          name={inputGroupName}
+          name={type}
           defaultChecked
           value="default"
         />
       ) : (
         devices.map((device) => {
           return (
             <DeviceSelectorOption
-              id={`${inputGroupName}--${device.deviceId}`}
+              id={`${type}--${device.deviceId}`}
               value={device.deviceId}
               label={device.label}
               key={device.deviceId}
               onChange={(e) => {
                 onChange?.(e.target.value);
               }}
-              name={inputGroupName}
+              name={type}
               selected={
                 device.deviceId === selectedDeviceId || devices.length === 1
               }
@@ -113,7 +113,7 @@ export const DeviceSelectorList = (props: {
   );
 };
 
-export const DeviceSelectorDropdown = (props: {
+const DeviceSelectorDropdown = (props: {
   devices: MediaDeviceInfo[];
   selectedDeviceId?: string;
   title?: string;
@@ -182,20 +182,20 @@ export const DeviceSelectorDropdown = (props: {
 
 export const DeviceSelector = (props: {
   devices: MediaDeviceInfo[];
+  icon: string;
+  type: DeviceSelectorType;
   selectedDeviceId?: string;
   title?: string;
   onChange?: (deviceId: string) => void;
   visualType?: 'list' | 'dropdown';
-  icon: string;
   placeholder?: string;
 }) => {
   const { visualType = 'list', icon, placeholder, ...rest } = props;
 
   if (visualType === 'list') {
     return <DeviceSelectorList {...rest} />;
-  } else {
-    return (
-      <DeviceSelectorDropdown {...rest} icon={icon} placeholder={placeholder} />
-    );
   }
+  return (
+    <DeviceSelectorDropdown {...rest} icon={icon} placeholder={placeholder} />
+  );
 };
diff --git a/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorAudio.tsx b/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorAudio.tsx
@@ -17,12 +17,13 @@ export const DeviceSelectorAudioInput = ({
     <DeviceSelector
       devices={devices || []}
       selectedDeviceId={selectedDevice}
+      type="audioinput"
       onChange={async (deviceId) => {
         await microphone.select(deviceId);
       }}
       title={title}
       visualType={visualType}
-      icon={'mic'}
+      icon="mic"
     />
   );
 };
@@ -45,13 +46,14 @@ export const DeviceSelectorAudioOutput = ({
   return (
     <DeviceSelector
       devices={devices}
+      type="audiooutput"
       selectedDeviceId={selectedDevice}
       onChange={(deviceId) => {
         speaker.select(deviceId);
       }}
       title={title}
-      icon="speaker"
       visualType={visualType}
+      icon="speaker"
     />
   );
 };
diff --git a/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx b/packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx
@@ -16,6 +16,7 @@ export const DeviceSelectorVideo = ({
   return (
     <DeviceSelector
       devices={devices || []}
+      type="videoinput"
       selectedDeviceId={selectedDevice}
       onChange={async (deviceId) => {
         await camera.select(deviceId);