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

package/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';
+import { Restricted, useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import {
   hasAudio,
   hasScreenShare,
@@ -13,6 +14,7 @@ import { useParticipantViewContext } from './ParticipantViewContext';
 import {
   GenericMenu,
   GenericMenuButtonItem,
+  GenericMenuSeparator,
   useMenuContext,
 } from '../../../components/Menu';
 import { Icon } from '../../../components/Icon';
@@ -120,7 +122,9 @@ export const ParticipantActionsContextMenu = () => {
         disabled={pin && !pin.isLocalPin}
       >
         <Icon icon="pin" />
-        {pin ? t('Unpin') : t('Pin')}
+        {pin
+          ? t('participantView.unpin.label', 'Unpin')
+          : t('participantView.actionsMenu.pin.label', 'Pin')}
       </GenericMenuButtonItem>
       <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>
         <GenericMenuButtonItem
@@ -128,100 +132,137 @@ export const ParticipantActionsContextMenu = () => {
           disabled={pin && !pin.isLocalPin}
         >
           <Icon icon="pin" />
-          {t('Pin for everyone')}
+          {t(
+            'participantView.actionsMenu.pinForEveryone.label',
+            'Pin for everyone',
+          )}
         </GenericMenuButtonItem>
         <GenericMenuButtonItem
           onClick={unpinForEveryone}
           disabled={!pin || pin.isLocalPin}
         >
           <Icon icon="pin" />
-          {t('Unpin for everyone')}
+          {t(
+            'participantView.actionsMenu.unpinForEveryone.label',
+            'Unpin for everyone',
+          )}
         </GenericMenuButtonItem>
       </Restricted>
       <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>
         <GenericMenuButtonItem onClick={blockUser}>
           <Icon icon="not-allowed" />
-          {t('Block')}
+          {t('participantView.actionsMenu.block.label', 'Block')}
         </GenericMenuButtonItem>
       </Restricted>
       <Restricted requiredGrants={[OwnCapability.KICK_USER]}>
         <GenericMenuButtonItem onClick={kickUser}>
           <Icon icon="kick-user" />
-          {t('Kick')}
+          {t('participantView.actionsMenu.kick.label', 'Kick')}
         </GenericMenuButtonItem>
       </Restricted>
+      <GenericMenuSeparator />
       <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
         {hasVideoTrack && (
           <GenericMenuButtonItem onClick={muteVideo}>
             <Icon icon="camera-off-outline" />
-            {t('Turn off video')}
+            {t(
+              'participantView.actionsMenu.turnOffVideo.label',
+              'Turn off video',
+            )}
           </GenericMenuButtonItem>
         )}
         {hasScreenShareTrack && (
           <GenericMenuButtonItem onClick={muteScreenShare}>
             <Icon icon="screen-share-off" />
-            {t('Turn off screen share')}
+            {t(
+              'participantView.actionsMenu.turnOffScreenShare.label',
+              'Turn off screen share',
+            )}
           </GenericMenuButtonItem>
         )}
         {hasAudioTrack && (
           <GenericMenuButtonItem onClick={muteAudio}>
             <Icon icon="no-audio" />
-            {t('Mute audio')}
+            {t('participantView.actionsMenu.muteAudio.label', 'Mute audio')}
           </GenericMenuButtonItem>
         )}
         {hasScreenShareAudioTrack && (
           <GenericMenuButtonItem onClick={muteScreenShareAudio}>
             <Icon icon="no-audio" />
-            {t('Mute screen share audio')}
+            {t(
+              'participantView.actionsMenu.muteScreenShareAudio.label',
+              'Mute screen share audio',
+            )}
           </GenericMenuButtonItem>
         )}
       </Restricted>
       {participantViewElement &&
         typeof participantViewElement.requestFullscreen !== 'undefined' && (
           <GenericMenuButtonItem onClick={toggleFullscreenMode}>
-            {t('{{ direction }} fullscreen', {
-              direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-            })}
+            <Icon icon="fullscreen" />
+            {fullscreenModeOn
+              ? t(
+                  'participantView.actionsMenu.leaveFullscreen.label',
+                  'Leave fullscreen',
+                )
+              : t(
+                  'participantView.actionsMenu.enterFullscreen.label',
+                  'Enter fullscreen',
+                )}
           </GenericMenuButtonItem>
         )}
       {videoElement && document.pictureInPictureEnabled && (
         <GenericMenuButtonItem onClick={togglePictureInPicture}>
-          {t('{{ direction }} picture-in-picture', {
-            direction: isPiP ? t('Leave') : t('Enter'),
-          })}
+          <Icon icon="pip" />
+          {isPiP
+            ? t(
+                'participantView.actionsMenu.leavePip.label',
+                'Leave picture-in-picture',
+              )
+            : t(
+                'participantView.actionsMenu.enterPip.label',
+                'Enter picture-in-picture',
+              )}
         </GenericMenuButtonItem>
       )}
+      <GenericMenuSeparator />
       <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
         <GenericMenuButtonItem
           onClick={grantPermission(OwnCapability.SEND_AUDIO)}
         >
-          {t('Allow audio')}
+          {t('participantView.actionsMenu.allowAudio.label', 'Allow audio')}
         </GenericMenuButtonItem>
         <GenericMenuButtonItem
           onClick={grantPermission(OwnCapability.SEND_VIDEO)}
         >
-          {t('Allow video')}
+          {t('participantView.actionsMenu.allowVideo.label', 'Allow video')}
         </GenericMenuButtonItem>
         <GenericMenuButtonItem
           onClick={grantPermission(OwnCapability.SCREENSHARE)}
         >
-          {t('Allow screen sharing')}
+          {t(
+            'participantView.actionsMenu.allowScreenSharing.label',
+            'Allow screen sharing',
+          )}
         </GenericMenuButtonItem>
 
         <GenericMenuButtonItem
           onClick={revokePermission(OwnCapability.SEND_AUDIO)}
         >
-          {t('Disable audio')}
+          {t('participantView.actionsMenu.disableAudio.label', 'Disable audio')}
         </GenericMenuButtonItem>
         <GenericMenuButtonItem
           onClick={revokePermission(OwnCapability.SEND_VIDEO)}
         >
-          {t('Disable video')}
+          {t('participantView.actionsMenu.disableVideo.label', 'Disable video')}
         </GenericMenuButtonItem>
         <GenericMenuButtonItem
           onClick={revokePermission(OwnCapability.SCREENSHARE)}
         >
-          {t('Disable screen sharing')}
+          {t(
+            'participantView.actionsMenu.disableScreenSharing.label',
+            'Disable screen sharing',
+          )}
         </GenericMenuButtonItem>
       </Restricted>
     </GenericMenu>

package/src/core/components/ParticipantView/index.ts

@@ -2,3 +2,4 @@ export * from './ParticipantActionsContextMenu';
 export * from './ParticipantView';
 export * from './ParticipantViewContext';
 export * from './DefaultParticipantViewUI';
+export * from './ConnectionQualityIndicator';

package/src/core/components/StreamVideo/StreamVideo.tsx

@@ -1,13 +1,48 @@
 import {
-  StreamVideoProps,
+  type StreamVideoProviderProps,
   StreamVideoProvider,
 } from '@stream-io/video-react-bindings';
 import { PropsWithChildren } from 'react';
-import { translations } from '../../../translations';
+import {
+  TranslationProvider,
+  useStreami18n,
+  type UseStreami18nParams,
+} from '../../../i18n';
+
+export type StreamVideoProps = StreamVideoProviderProps & UseStreami18nParams;
 
-export const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {
+/**
+ * StreamVideo is the root provider of the SDK: it provides the client to the component tree and
+ * mounts the SDK's translation context.
+ *
+ * The i18n runtime lives here rather than in `@stream-io/video-react-bindings` because the key
+ * catalog is generated from *this* package's `t()` call sites.
+ *
+ * This also fixes a real bug in the previous implementation, which rendered
+ * `<StreamVideoProvider translationsOverrides={translations} {...props} />`. Because `{...props}`
+ * came last, an integrator passing `translationsOverrides` *replaced* the SDK's bundled strings
+ * instead of merging with them, leaving every untranslated key rendering as a raw dotted path.
+ * `useStreami18n` layers integrator dictionaries over the SDK's own defaults, so a partial
+ * dictionary is now safe.
+ */
+export const StreamVideo = ({
+  children,
+  client,
+  i18nInstance,
+  language,
+  translations,
+}: PropsWithChildren<StreamVideoProps>) => {
+  const translationContext = useStreami18n({
+    i18nInstance,
+    language,
+    translations,
+  });
   return (
-    <StreamVideoProvider translationsOverrides={translations} {...props} />
+    <StreamVideoProvider client={client}>
+      <TranslationProvider value={translationContext}>
+        {children}
+      </TranslationProvider>
+    </StreamVideoProvider>
   );
 };
 

package/src/core/components/Video/BaseVideoPlaceholder.tsx

@@ -1,5 +1,6 @@
-import { ComponentProps, RefAttributes, forwardRef, useState } from 'react';
+import { ComponentProps, RefAttributes, forwardRef } from 'react';
 import type { StreamVideoParticipant } from '@stream-io/video-client';
+import { Avatar } from '../../../components/Avatar';
 
 export type BaseVideoPlaceholderProps = {
   participant: StreamVideoParticipant;
@@ -10,40 +11,22 @@ export const BaseVideoPlaceholder = forwardRef<
   HTMLDivElement,
   BaseVideoPlaceholderProps
 >(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
-  const [error, setError] = useState(false);
   const name = participant.name || participant.userId;
   return (
     <div className="str-video__video-placeholder" style={style} ref={ref}>
-      {(!participant.image || error) &&
-        (name ? (
-          <InitialsFallback name={name} />
-        ) : (
-          <div className="str-video__video-placeholder__no-video-label">
-            {children}
-          </div>
-        ))}
-      {participant.image && !error && (
-        <img
-          onError={() => setError(true)}
-          alt={name}
-          className="str-video__video-placeholder__avatar"
-          src={participant.image}
+      {(participant.image || name) && (
+        <Avatar
+          size="2xl"
+          showOutline
+          imageSrc={participant.image}
+          name={name}
         />
       )}
+      {!participant.image && !name && (
+        <div className="str-video__video-placeholder__no-video-label">
+          {children}
+        </div>
+      )}
     </div>
   );
 });
-
-const InitialsFallback = (props: { name: string }) => {
-  const { name } = props;
-  const initials = name
-    .split(' ')
-    .slice(0, 2)
-    .map((n) => n[0])
-    .join('');
-  return (
-    <div className="str-video__video-placeholder__initials-fallback">
-      {initials}
-    </div>
-  );
-};

package/src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import {
   BaseVideoPlaceholder,
   type BaseVideoPlaceholderProps,
@@ -14,7 +14,10 @@ export const DefaultPictureInPicturePlaceholder = forwardRef<
   const { t } = useI18n();
   return (
     <BaseVideoPlaceholder ref={ref} {...props}>
-      {t('Video is playing in a popup')}
+      {t(
+        'videoPlaceholder.videoPlayingInPopup.text',
+        'Video is playing in a popup',
+      )}
     </BaseVideoPlaceholder>
   );
 });

package/src/core/components/Video/DefaultVideoPlaceholder.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import {
   BaseVideoPlaceholder,
   type BaseVideoPlaceholderProps,
@@ -14,7 +14,7 @@ export const DefaultVideoPlaceholder = forwardRef<
   const { t } = useI18n();
   return (
     <BaseVideoPlaceholder ref={ref} {...props}>
-      {t('Video is disabled')}
+      {t('common.videoDisabled.text', 'Video is disabled')}
     </BaseVideoPlaceholder>
   );
 });

package/src/embedded/call/CallControls.tsx

@@ -1,9 +1,6 @@
 import { OwnCapability } from '@stream-io/video-client';
-import {
-  Restricted,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 import {
   CancelCallConfirmButton,
   CompositeButton,
@@ -20,7 +17,7 @@ import {
 } from '../../components';
 
 import { useCallDuration } from '../hooks';
-import { CameraMenuWithBlur } from '../shared';
+import { CallDuration, CameraMenuWithBlur } from '../shared';
 
 interface CallControlsProps {
   showParticipants: boolean;
@@ -49,14 +46,8 @@ export const CallControls = ({
           </div>
         </Restricted>
         {startedAt && (
-          <div className="str-video__embedded-call-duration str-video__embedded-desktop">
-            <Icon
-              icon="verified"
-              className="str-video__embedded-call-duration__icon"
-            />
-            <span className="str-video__embedded-call-duration__time">
-              {elapsed}
-            </span>
+          <div className="str-video__embedded-desktop">
+            <CallDuration elapsed={elapsed} />
           </div>
         )}
       </div>
@@ -71,11 +62,11 @@ export const CallControls = ({
                 <>
                   <DeviceSelectorAudioInput
                     visualType="list"
-                    title={t('Microphone')}
+                    title={t('common.microphone.label', 'Microphone')}
                   />
                   <DeviceSelectorAudioOutput
                     visualType="list"
-                    title={t('Speaker')}
+                    title={t('common.speaker.label', 'Speaker')}
                   />
                 </>
               }
@@ -108,10 +99,10 @@ export const CallControls = ({
         </div>
       </div>
       <div className="str-video__call-controls--group str-video__call-controls--sidebar">
-        <WithTooltip title={t('Participants')}>
+        <WithTooltip title={t('common.participants.label', 'Participants')}>
           <CompositeButton
             active={showParticipants}
-            aria-label={t('Participants')}
+            aria-label={t('common.participants.label', 'Participants')}
             aria-pressed={showParticipants}
             onClick={onToggleParticipants}
           >

package/src/embedded/call/CallHeader.tsx

@@ -1,6 +1,7 @@
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useCallDuration } from '../hooks';
-import { CancelCallConfirmButton, Icon } from '../../components';
+import { CancelCallConfirmButton } from '../../components';
+import { CallDuration } from '../shared';
 
 /**
  * Renders the call header bar with elapsed time and leave/end call button.
@@ -13,17 +14,7 @@ export const CallHeader = () => {
 
   return (
     <div className="str-video__embedded-call-header">
-      {startedAt && (
-        <div className="str-video__embedded-call-duration">
-          <Icon
-            icon="verified"
-            className="str-video__embedded-call-duration__icon"
-          />
-          <span className="str-video__embedded-call-duration__time">
-            {elapsed}
-          </span>
-        </div>
-      )}
+      {startedAt && <CallDuration elapsed={elapsed} />}
       <CancelCallConfirmButton />
     </div>
   );

package/src/embedded/call/CallLayout.tsx

@@ -35,7 +35,7 @@ export const CallLayout = () => {
           requiredGrants={[OwnCapability.SEND_AUDIO]}
           hasPermissionsOnly
         >
-          <SpeakingWhileMutedNotification />
+          <SpeakingWhileMutedNotification placement="top" />
         </Restricted>
       </div>
       <CallHeader />

package/src/embedded/livestream/host/HostLayout.tsx

@@ -1,13 +1,11 @@
 import { useCallback, useState } from 'react';
 import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
-import {
-  Restricted,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { useLayout } from '../../hooks';
 import {
+  Button,
   CallParticipantsList,
   CancelCallConfirmButton,
   CompositeButton,
@@ -72,7 +70,9 @@ export const HostLayout = ({
             : 'str-video__embedded-livestream-duration__backstage-badge'
         }
       >
-        {isLive ? t('Live') : t('Backstage')}
+        {isLive
+          ? t('common.live.label', 'Live')
+          : t('livestreamHost.backstage.text', 'Backstage')}
       </span>
       <ViewersCount count={participantCount} />
       {isLive && elapsed && (
@@ -129,11 +129,11 @@ export const HostLayout = ({
                   <>
                     <DeviceSelectorAudioOutput
                       visualType="list"
-                      title={t('Speaker')}
+                      title={t('common.speaker.label', 'Speaker')}
                     />
                     <DeviceSelectorAudioInput
                       visualType="list"
-                      title={t('Microphone')}
+                      title={t('common.microphone.label', 'Microphone')}
                     />
                   </>
                 }
@@ -164,26 +164,32 @@ export const HostLayout = ({
           {isBackstageEnabled && (
             <Restricted requiredGrants={[OwnCapability.UPDATE_CALL]}>
               {isLive ? (
-                <WithTooltip title={t('End Stream')}>
-                  <button
-                    type="button"
+                <WithTooltip
+                  title={t('livestreamHost.endStream.title', 'End Stream')}
+                >
+                  <Button
+                    variant="secondary"
+                    size="sm"
                     className="str-video__embedded-end-stream-button"
                     onClick={onStopLive}
                   >
                     <Icon icon="call-end" />
-                    <span>{t('Stop Live')}</span>
-                  </button>
+                    <span>{t('livestreamHost.endLive.label', 'End Live')}</span>
+                  </Button>
                 </WithTooltip>
               ) : (
-                <WithTooltip title={t('Start Stream')}>
-                  <button
-                    type="button"
+                <WithTooltip
+                  title={t('livestreamHost.startStream.title', 'Start Stream')}
+                >
+                  <Button
+                    variant="primary"
+                    size="sm"
                     className="str-video__embedded-go-live-button"
                     onClick={onGoLive}
                   >
                     <Icon icon="streaming" />
-                    <span>{t('Go Live')}</span>
-                  </button>
+                    <span>{t('livestreamHost.goLive.label', 'Go Live')}</span>
+                  </Button>
                 </WithTooltip>
               )}
             </Restricted>
@@ -193,10 +199,10 @@ export const HostLayout = ({
           </div>
         </div>
         <div className="str-video__call-controls--group str-video__call-controls--sidebar">
-          <WithTooltip title={t('Participants')}>
+          <WithTooltip title={t('common.participants.label', 'Participants')}>
             <CompositeButton
               active={showParticipants}
-              aria-label={t('Participants')}
+              aria-label={t('common.participants.label', 'Participants')}
               aria-pressed={showParticipants}
               onClick={handleToggleParticipants}
             >

package/src/embedded/livestream/host/HostStateRouter.tsx

@@ -1,10 +1,7 @@
 import { useCallback, useState } from 'react';
 import { CallingState } from '@stream-io/video-client';
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 
 import { HostLayout } from './HostLayout';
 import { LoadingIndicator } from '../../../components';
@@ -73,10 +70,17 @@ export const HostStateRouter = () => {
         onJoin={handleJoin}
         title={
           isBackstageEnabled
-            ? t('Prepare your livestream')
-            : t('Ready to go live')
+            ? t(
+                'livestreamHost.prepareLivestream.title',
+                'Prepare your livestream',
+              )
+            : t('livestreamHost.readyToGoLive.title', 'Ready to go live')
+        }
+        joinLabel={
+          isBackstageEnabled
+            ? t('livestreamHost.enterBackstage.label', 'Enter Backstage')
+            : t('livestreamHost.goLive.label', 'Go Live')
         }
-        joinLabel={isBackstageEnabled ? t('Enter Backstage') : t('Go Live')}
       />
     );
   }

package/src/embedded/livestream/viewer/ViewerLayout.tsx

@@ -1,11 +1,8 @@
 import { useCallback, useState } from 'react';
 import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
-import {
-  Restricted,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { useCallDuration, useLayout, useWakeLock } from '../../hooks';
 import {
   CallParticipantsList,
@@ -51,7 +48,7 @@ export const ViewerLayout = () => {
       <div className="str-video__embedded-call-header">
         <div className="str-video__embedded-livestream-duration">
           <span className="str-video__embedded-livestream-duration__live-badge">
-            {t('Live')}
+            {t('common.live.label', 'Live')}
           </span>
           <ViewersCount count={participantCount} />
           {elapsed && (
@@ -90,7 +87,7 @@ export const ViewerLayout = () => {
           <div className="str-video__embedded-desktop">
             <div className="str-video__embedded-livestream-duration">
               <span className="str-video__embedded-livestream-duration__live-badge">
-                {t('Live')}
+                {t('common.live.label', 'Live')}
               </span>
               <ViewersCount count={participantCount} />
               {elapsed && (
@@ -112,11 +109,11 @@ export const ViewerLayout = () => {
                   <>
                     <DeviceSelectorAudioOutput
                       visualType="list"
-                      title={t('Speaker')}
+                      title={t('common.speaker.label', 'Speaker')}
                     />
                     <DeviceSelectorAudioInput
                       visualType="list"
-                      title={t('Microphone')}
+                      title={t('common.microphone.label', 'Microphone')}
                     />
                   </>
                 }
@@ -143,10 +140,10 @@ export const ViewerLayout = () => {
           </div>
         </div>
         <div className="str-video__call-controls--group str-video__call-controls--sidebar">
-          <WithTooltip title={t('Participants')}>
+          <WithTooltip title={t('common.participants.label', 'Participants')}>
             <CompositeButton
               active={showParticipants}
-              aria-label={t('Participants')}
+              aria-label={t('common.participants.label', 'Participants')}
               aria-pressed={showParticipants}
               onClick={handleToggleParticipants}
             >