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

package/src/components/Notification/Notification.tsx

@@ -3,6 +3,14 @@ import clsx from 'clsx';
 import { Placement } from '@floating-ui/react';
 import { useFloatingUIPreset } from '../../hooks';
 
+export type NotificationState = 'success' | 'error' | 'loading';
+
+const ICON_BY_STATE: Record<NotificationState, string> = {
+  success: 'checkmark',
+  error: 'exclamation-circle-fill',
+  loading: 'loading',
+};
+
 export type NotificationProps = {
   message?: ReactNode;
   isVisible?: boolean;
@@ -10,7 +18,7 @@ export type NotificationProps = {
   resetIsVisible?: () => void;
   placement?: Placement;
   className?: string;
-  iconClassName?: string | null;
+  state?: NotificationState;
   close?: () => void;
 };
 
@@ -23,7 +31,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
     resetIsVisible,
     placement = 'top',
     className,
-    iconClassName = 'str-video__notification__icon',
+    state,
     close,
   } = props;
 
@@ -42,11 +50,19 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
     return () => clearTimeout(timeout);
   }, [isVisible, resetIsVisible, visibilityTimeout]);
 
+  const icon =
+    state && `str-video__icon str-video__icon--${ICON_BY_STATE[state]}`;
+
   return (
     <div className="str-video__notification-wrapper" ref={refs.setReference}>
       {isVisible && (
         <div
-          className={clsx('str-video__notification', className)}
+          className={clsx(
+            'str-video__notification',
+            state && `str-video__notification--${state}`,
+            close && 'str-video__notification--dismissible',
+            className,
+          )}
           ref={refs.setFloating}
           style={{
             position: strategy,
@@ -55,7 +71,7 @@ export const Notification = (props: PropsWithChildren<NotificationProps>) => {
             overflowY: 'auto',
           }}
         >
-          {iconClassName && <i className={iconClassName} />}
+          {icon && <i className={icon} />}
           <span className="str-video__notification__message">{message}</span>
           {close ? (
             <i

package/src/components/Notification/PermissionNotification.tsx

@@ -77,6 +77,7 @@ export const PermissionNotification = (props: PermissionNotificationProps) => {
   if (isAwaitingApproval) {
     return (
       <Notification
+        state="loading"
         isVisible={isAwaitingApproval && !hasPermission}
         message={messageAwaitingApproval}
       >
@@ -87,6 +88,7 @@ export const PermissionNotification = (props: PermissionNotificationProps) => {
 
   return (
     <Notification
+      state={showNotification === 'granted' ? 'success' : 'error'}
       isVisible={!!showNotification}
       visibilityTimeout={visibilityTimeout}
       resetIsVisible={resetIsVisible}

package/src/components/Notification/RecordingInProgressNotification.tsx

@@ -1,8 +1,6 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
-import {
-  useI18n,
-  useToggleCallRecording,
-} from '@stream-io/video-react-bindings';
+import { useToggleCallRecording } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import { Notification } from './Notification';
 
 export type RecordingInProgressNotificationProps = {
@@ -18,7 +16,9 @@ export const RecordingInProgressNotification = ({
 
   const [isVisible, setVisible] = useState(false);
 
-  const message = text ?? t('Recording in progress...');
+  const message =
+    text ??
+    t('notification.recordingInProgress.text', 'Recording in progress...');
 
   useEffect(() => {
     if (isCallRecordingInProgress) {
@@ -31,7 +31,6 @@ export const RecordingInProgressNotification = ({
   return (
     <Notification
       message={message}
-      iconClassName="str-video__icon str-video__icon--recording-on"
       isVisible={isVisible}
       placement="top-start"
       close={() => setVisible(false)}

package/src/components/Notification/SpeakingWhileMutedNotification.tsx

@@ -1,7 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { Placement } from '@floating-ui/react';
 
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import { Notification } from './Notification';
 
 export type SpeakingWhileMutedNotificationProps = {
@@ -21,7 +22,12 @@ export const SpeakingWhileMutedNotification = ({
   const { isSpeakingWhileMuted } = useMicrophoneState();
   const { t } = useI18n();
 
-  const message = text ?? t('You are muted. Unmute to speak.');
+  const message =
+    text ??
+    t(
+      'notification.speakingWhileMuted.text',
+      'You are muted. Unmute to speak.',
+    );
   return (
     <Notification
       message={message}

package/src/components/Permissions/PermissionRequests.tsx

@@ -1,9 +1,7 @@
 import {
-  ButtonHTMLAttributes,
   ComponentProps,
   forwardRef,
   Fragment,
-  PropsWithChildren,
   useEffect,
   useState,
 } from 'react';
@@ -12,14 +10,10 @@ import {
   PermissionRequestEvent,
   UserResponse,
 } from '@stream-io/video-client';
-import {
-  TranslatorFunction,
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
-import clsx from 'clsx';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { StreamTFunction, useI18n } from '../../i18n';
 
+import { Button } from '../Button';
 import { useFloatingUIPreset } from '../../hooks';
 
 const byNameOrId = (a: UserResponse, b: UserResponse) => {
@@ -93,7 +87,10 @@ export const PermissionRequests = () => {
           {permissionRequests.length} pending permission requests
         </span>
         <Button
-          type="button"
+          variant="secondary"
+          appearance="outline"
+          size="sm"
+          className="str-video__permission-request__button"
           onClick={() => {
             setExpanded((e) => !e);
           }}
@@ -143,25 +140,31 @@ export const PermissionRequestList = forwardRef<
                   {messageForPermission(user.name || user.id, permission, t)}
                 </div>
                 <Button
-                  className="str-video__permission-request__button--allow"
-                  type="button"
+                  variant="primary"
+                  appearance="solid"
+                  size="sm"
+                  className="str-video__permission-request__button str-video__permission-request__button--allow"
                   onClick={handleUpdatePermission(request, 'grant')}
                 >
-                  {t('Allow')}
+                  {t('common.allow.label', 'Allow')}
                 </Button>
                 <Button
-                  className="str-video__permission-request__button--reject"
-                  type="button"
+                  variant="secondary"
+                  appearance="outline"
+                  size="sm"
+                  className="str-video__permission-request__button str-video__permission-request__button--reject"
                   onClick={handleUpdatePermission(request, 'revoke')}
                 >
-                  {t('Revoke')}
+                  {t('common.revoke.label', 'Revoke')}
                 </Button>
                 <Button
-                  className="str-video__permission-request__button--reject"
-                  type="button"
+                  variant="secondary"
+                  appearance="outline"
+                  size="sm"
+                  className="str-video__permission-request__button str-video__permission-request__button--reject"
                   onClick={handleUpdatePermission(request, 'dismiss')}
                 >
-                  {t('Dismiss')}
+                  {t('common.dismiss.label', 'Dismiss')}
                 </Button>
               </div>
             ))}
@@ -172,38 +175,42 @@ export const PermissionRequestList = forwardRef<
   );
 });
 
-const Button = (
-  props: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,
-) => {
-  const { className, ...rest } = props;
-  return (
-    <button
-      className={clsx('str-video__permission-request__button', className)}
-      {...rest}
-    />
-  );
-};
-
 const messageForPermission = (
   userName: string,
   permission: string,
-  t: TranslatorFunction,
+  t: StreamTFunction,
 ) => {
   switch (permission) {
     case OwnCapability.SEND_AUDIO:
-      return t('{{ userName }} is requesting to speak', { userName });
+      return t(
+        'permissions.requestingToSpeak.text',
+        '{{ userName }} is requesting to speak',
+        { userName },
+      );
     case OwnCapability.SEND_VIDEO:
-      return t('{{ userName }} is requesting to share their camera', {
-        userName,
-      });
+      return t(
+        'permissions.requestingCamera.text',
+        '{{ userName }} is requesting to share their camera',
+        {
+          userName,
+        },
+      );
     case OwnCapability.SCREENSHARE:
-      return t('{{ userName }} is requesting to present their screen', {
-        userName,
-      });
+      return t(
+        'permissions.requestingScreenShare.text',
+        '{{ userName }} is requesting to present their screen',
+        {
+          userName,
+        },
+      );
     default:
-      return t('{{ userName }} is requesting permission: {{ permission }}', {
-        userName,
-        permission,
-      });
+      return t(
+        'permissions.requestingPermission.text',
+        '{{ userName }} is requesting permission: {{ permission }}',
+        {
+          userName,
+          permission,
+        },
+      );
   }
 };

package/src/components/RingingCall/RingingCall.tsx

@@ -3,22 +3,48 @@ import {
   useCall,
   useCallStateHooks,
   useConnectedUser,
-  useI18n,
 } from '@stream-io/video-react-bindings';
+import { StreamTFunction, useI18n } from '../../i18n';
 import { Avatar } from '../Avatar';
 import { RingingCallControls } from './RingingCallControls';
 
-const CALLING_STATE_TO_LABEL: Record<CallingState, string> = {
-  [CallingState.JOINING]: 'Joining',
-  [CallingState.RINGING]: 'Ringing',
-  [CallingState.MIGRATING]: 'Migrating',
-  [CallingState.RECONNECTING]: 'Re-connecting',
-  [CallingState.RECONNECTING_FAILED]: 'Failed',
-  [CallingState.OFFLINE]: 'No internet connection',
-  [CallingState.IDLE]: '',
-  [CallingState.UNKNOWN]: '',
-  [CallingState.JOINED]: 'Joined',
-  [CallingState.LEFT]: 'Left call',
+/**
+ * The label rendered for the current calling state.
+ *
+ * A `switch` of literal `t()` calls rather than a `Record<CallingState, string>` fed into a `t()`
+ * lookup on a runtime value: the literal keys are statically extractable, which is what makes
+ * `Migrating`, `Failed`, `Joined` and `Left call` translatable - none had a catalog entry before.
+ * `IDLE` and `UNKNOWN` render nothing and get no key.
+ */
+const getCallingStateLabel = (
+  callingState: CallingState,
+  t: StreamTFunction,
+): string | undefined => {
+  switch (callingState) {
+    case CallingState.JOINING:
+      return t('ringingCall.callingState.joining.text', 'Joining');
+    case CallingState.RINGING:
+      return t('ringingCall.callingState.ringing.text', 'Ringing');
+    case CallingState.MIGRATING:
+      return t('ringingCall.callingState.migrating.text', 'Migrating');
+    case CallingState.RECONNECTING:
+      return t('ringingCall.callingState.reconnecting.text', 'Re-connecting');
+    case CallingState.RECONNECTING_FAILED:
+      return t('ringingCall.callingState.reconnectingFailed.text', 'Failed');
+    case CallingState.OFFLINE:
+      return t(
+        'ringingCall.callingState.offline.text',
+        'No internet connection',
+      );
+    case CallingState.JOINED:
+      return t('ringingCall.callingState.joined.text', 'Joined');
+    case CallingState.LEFT:
+      return t('ringingCall.callingState.left.text', 'Left call');
+    case CallingState.IDLE:
+    case CallingState.UNKNOWN:
+    default:
+      return undefined;
+  }
 };
 
 export type RingingCallProps = {
@@ -63,7 +89,7 @@ export const RingingCall = (props: RingingCallProps) => {
     }
   }
 
-  const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];
+  const callingStateLabel = getCallingStateLabel(callingState, t);
 
   return (
     <div className="str-video__call-panel str-video__call-panel--ringing">
@@ -82,7 +108,7 @@ export const RingingCall = (props: RingingCallProps) => {
 
       {callingStateLabel && (
         <div className="str-video__call-panel__calling-state-label">
-          {t(callingStateLabel)}
+          {callingStateLabel}
         </div>
       )}
 

package/src/components/RingingCall/RingingCallControls.tsx

@@ -13,11 +13,12 @@ export const RingingCallControls = () => {
   return (
     <div className="str-video__pending-call-controls">
       {call.isCreatedByMe ? (
-        <CancelCallButton disabled={buttonsDisabled} />
+        <CancelCallButton size="sm" disabled={buttonsDisabled} />
       ) : (
         <>
           <AcceptCallButton disabled={buttonsDisabled} />
           <CancelCallButton
+            size="sm"
             onClick={() => {
               const reason = call.isCreatedByMe ? 'cancel' : 'decline';
               call.leave({ reject: true, reason }).catch((err) => {

package/src/components/Search/SearchInput.tsx

@@ -42,16 +42,15 @@ export const SearchInput = ({
         'str-video__search-input__container--active': isActive,
       })}
     >
+      <span className="str-video__search-input__icon" />
       <input placeholder="Search" {...rest} ref={setInputElement} />
-      {isActive ? (
+      {isActive && (
         <button
           className="str-video__search-input__clear-btn"
           onClick={exitSearch}
         >
           <span className="str-video__search-input__icon--active" />
         </button>
-      ) : (
-        <span className="str-video__search-input__icon" />
       )}
     </div>
   );

package/src/components/StreamTheme/StreamTheme.tsx

@@ -3,16 +3,18 @@ import clsx from 'clsx';
 
 export type StreamThemeProps = HTMLProps<HTMLElement> & {
   as?: ElementType;
+  theme?: string;
 };
 
 export const StreamTheme = ({
   as: Component = 'div',
   className,
   children,
+  theme = 'str-video__theme-dark',
   ...props
 }: PropsWithChildren<StreamThemeProps>) => {
   return (
-    <Component {...props} className={clsx('str-video', className)}>
+    <Component {...props} className={clsx('str-video', theme, className)}>
       {children}
     </Component>
   );

package/src/components/Tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren, useEffect, useRef } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import clsx from 'clsx';
 import { useFloatingUIPreset } from '../../hooks';
-import { FloatingArrow, Placement, arrow } from '@floating-ui/react';
+import { Placement } from '@floating-ui/react';
 
 export type TooltipProps<T extends HTMLElement> = PropsWithChildren<{
   /** Reference element to which the tooltip should attach to */
@@ -23,11 +23,9 @@ export const Tooltip = <T extends HTMLElement>({
   tooltipPlacement = 'top',
   visible = false,
 }: TooltipProps<T>) => {
-  const arrowRef = useRef<SVGSVGElement>(null);
-  const { refs, x, y, strategy, context } = useFloatingUIPreset({
+  const { refs, x, y, strategy } = useFloatingUIPreset({
     placement: tooltipPlacement,
     strategy: 'absolute',
-    middleware: [arrow({ element: arrowRef })],
   });
 
   useEffect(() => {
@@ -46,11 +44,6 @@ export const Tooltip = <T extends HTMLElement>({
         left: x ?? 0,
       }}
     >
-      <FloatingArrow
-        ref={arrowRef}
-        context={context}
-        fill="var(--str-video__tooltip--background-color)"
-      />
       {children}
     </div>
   );

package/src/components/VideoPreview/VideoPreview.tsx

@@ -1,6 +1,8 @@
-import { ComponentType } from 'react';
+import { ComponentType, useEffect, useState } from 'react';
 import clsx from 'clsx';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { createSoundDetector } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import { BaseVideo } from '../../core/components/Video';
 import { LoadingIndicator } from '../LoadingIndicator';
 
@@ -8,7 +10,7 @@ const DefaultDisabledVideoPreview = () => {
   const { t } = useI18n();
   return (
     <div className="str_video__video-preview__disabled-video-preview">
-      {t('Video is disabled')}
+      {t('common.videoDisabled.text', 'Video is disabled')}
     </div>
   );
 };
@@ -17,11 +19,43 @@ const DefaultNoCameraPreview = () => {
   const { t } = useI18n();
   return (
     <div className="str_video__video-preview__no-camera-preview">
-      {t('No camera found')}
+      {t('common.noCameraFound.text', 'No camera found')}
     </div>
   );
 };
 
+/**
+ * Reports whether the local user is currently speaking, before they join the
+ * call. `MicrophoneManager` only runs its detector while the microphone is
+ * muted (for `speakingWhileMuted`), so this mirrors `AudioVolumeIndicator` and
+ * runs one on the live microphone stream instead.
+ */
+const useLocalSpeaking = (enabled: boolean) => {
+  const { useMicrophoneState } = useCallStateHooks();
+  const { isEnabled, mediaStream } = useMicrophoneState();
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  useEffect(() => {
+    if (!enabled || !isEnabled || !mediaStream) {
+      setIsSpeaking(false);
+      return;
+    }
+
+    const dispose = createSoundDetector(
+      mediaStream,
+      ({ isSoundDetected }) => setIsSpeaking(isSoundDetected),
+      { detectionFrequencyInMs: 80, destroyStreamOnStop: false },
+    );
+
+    return () => {
+      setIsSpeaking(false);
+      dispose().catch(console.error);
+    };
+  }, [enabled, isEnabled, mediaStream]);
+
+  return isSpeaking;
+};
+
 export type VideoPreviewProps = {
   /**
    * Additional CSS class name to apply to the root element.
@@ -43,6 +77,11 @@ export type VideoPreviewProps = {
    * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).
    */
   StartingCameraPreview?: ComponentType;
+  /**
+   * Outlines the preview while the local user is speaking. Requires the
+   * microphone to be enabled. Defaults to false.
+   */
+  speakingIndicatorVisible?: boolean;
 };
 
 export const VideoPreview = ({
@@ -51,9 +90,11 @@ export const VideoPreview = ({
   DisabledVideoPreview = DefaultDisabledVideoPreview,
   NoCameraPreview = DefaultNoCameraPreview,
   StartingCameraPreview = LoadingIndicator,
+  speakingIndicatorVisible = false,
 }: VideoPreviewProps) => {
   const { useCameraState } = useCallStateHooks();
   const { devices, status, isMute, mediaStream } = useCameraState();
+  const isSpeaking = useLocalSpeaking(speakingIndicatorVisible);
 
   let contents;
   if (isMute && devices?.length === 0) {
@@ -79,7 +120,11 @@ export const VideoPreview = ({
   }
 
   return (
-    <div className={clsx('str-video__video-preview-container', className)}>
+    <div
+      className={clsx('str-video__video-preview-container', className, {
+        'str-video__video-preview-container--speaking': isSpeaking,
+      })}
+    >
       {contents}
     </div>
   );

package/src/components/index.ts

@@ -1,11 +1,11 @@
 export * from './Avatar';
 export * from './BackgroundFilters';
+export * from './Badge';
 export * from './Button';
 export * from './CallControls';
 export * from './CallParticipantsList';
 export * from './CallPreview';
 export * from './CallRecordingList';
-export * from './CallStats';
 export * from './DeviceSettings';
 export * from './DropdownSelect';
 export * from './Icon';