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

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-import { Icon } from '../../../components';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
+import { Button, Icon } from '../../../components';
 import { ViewersCount } from '../../shared';
 import { OwnCapability } from '@stream-io/video-client';
 
@@ -80,15 +81,22 @@ export const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {
     if (!startsAt) return null;
 
     if (startsAtPassed) {
-      return t('Livestream starts soon');
+      return t(
+        'livestream.backstage.startsSoon.text',
+        'Livestream starts soon',
+      );
     }
 
-    return t('Livestream starts at {{ time }}', {
-      time: startsAt.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit',
-      }),
-    });
+    return t(
+      'livestream.backstage.startsAt.text',
+      'Livestream starts at {{ time }}',
+      {
+        time: startsAt.toLocaleTimeString([], {
+          hour: '2-digit',
+          minute: '2-digit',
+        }),
+      },
+    );
   };
 
   return (
@@ -100,8 +108,11 @@ export const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {
 
         <h2 className="str-video__embedded-viewer-lobby__title">
           {canJoin
-            ? t('Stream is ready!')
-            : t('Waiting for the livestream to start')}
+            ? t('livestreamViewer.lobby.streamReady.title', 'Stream is ready!')
+            : t(
+                'livestreamViewer.lobby.waitingForStart.title',
+                'Waiting for the livestream to start',
+              )}
         </h2>
 
         {!canJoin && getStartsAtMessage() && (
@@ -114,9 +125,9 @@ export const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {
 
         <div className="str-video__embedded-viewer-lobby__actions">
           {canJoin ? (
-            <button className="str-video__button" onClick={onJoin}>
-              {t('Join Stream')}
-            </button>
+            <Button size="sm" onClick={onJoin}>
+              {t('livestreamViewer.lobby.joinStream.label', 'Join Stream')}
+            </Button>
           ) : (
             <label className="str-video__embedded-viewer-lobby__auto-join">
               <input
@@ -124,7 +135,12 @@ export const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {
                 checked={autoJoin}
                 onChange={(e) => setAutoJoin(e.target.checked)}
               />
-              <span>{t('Join automatically when stream starts')}</span>
+              <span>
+                {t(
+                  'livestreamViewer.lobby.joinAutomatically.text',
+                  'Join automatically when stream starts',
+                )}
+              </span>
             </label>
           )}
         </div>

package/src/embedded/shared/BlurToggleButton/BlurToggleButton.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
-import clsx from 'clsx';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import {
+  Button,
   DeviceSelectorVideo,
   Icon,
   useBackgroundFilters,
@@ -40,26 +41,31 @@ export const BlurToggleButton = () => {
   ]);
 
   const getLabel = () => {
-    if (isLoading) return t('Applying...');
-    return isBlurred ? t('Disable blur') : t('Blur background');
+    if (isLoading)
+      return t('callControls.blurToggleButton.applying.label', 'Applying...');
+    return isBlurred
+      ? t('callControls.blurToggleButton.disableBlur.label', 'Disable blur')
+      : t(
+          'callControls.blurToggleButton.blurBackground.label',
+          'Blur background',
+        );
   };
 
   if (!isSupported) return null;
 
   return (
-    <button
-      type="button"
-      className={clsx(
-        'str-video__embedded-blur-toggle',
-        isBlurred && 'str-video__embedded-blur-toggle--active',
-      )}
+    <Button
+      variant="secondary"
+      appearance="outline"
+      size="sm"
+      className="str-video__embedded-blur-toggle"
       disabled={isDisabled}
-      aria-pressed={isBlurred}
+      active={isBlurred}
       onClick={handleClick}
     >
       <Icon icon="blur-icon" />
       <span>{getLabel()}</span>
-    </button>
+    </Button>
   );
 };
 

package/src/embedded/shared/CallDuration/CallDuration.tsx

@@ -0,0 +1,32 @@
+import { Icon } from '../../../components';
+
+interface CallDurationProps {
+  /**
+   * A formatted duration as produced by `useCallDuration`: `MM:SS`, or
+   * `HH:MM:SS` past the hour. Everything up to the last `:` is dimmed.
+   */
+  elapsed: string;
+}
+
+export const CallDuration = ({ elapsed }: CallDurationProps) => {
+  if (!elapsed) return null;
+
+  const secondsAt = elapsed.lastIndexOf(':') + 1;
+  const leading = elapsed.slice(0, secondsAt);
+  const seconds = elapsed.slice(secondsAt);
+
+  return (
+    <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">
+        <span className="str-video__embedded-call-duration__time-leading">
+          {leading}
+        </span>
+        {seconds}
+      </span>
+    </div>
+  );
+};

package/src/embedded/shared/CallFeedback/CallEndedScreen.tsx

@@ -1,5 +1,5 @@
-import { useI18n } from '@stream-io/video-react-bindings';
-import { Icon } from '../../../components';
+import { useI18n } from '../../../i18n';
+import { Button, Icon } from '../../../components';
 
 interface CallEndedScreenProps {
   onJoin?: () => void;
@@ -15,39 +15,53 @@ export const CallEndedScreen = ({
   return (
     <div className="str-video__embedded-call-feedback__container">
       <h2 className="str-video__embedded-call-feedback__title">
-        {t('Call ended')}
+        {t('callFeedback.callEndedScreen.callEnded.title', 'Call ended')}
       </h2>
       <div className="str-video__embedded-call-feedback__ended-actions">
         {onJoin && (
           <>
             <div className="str-video__embedded-call-feedback__ended-column">
               <p className="str-video__embedded-call-feedback__ended-label">
-                {t('Left by mistake?')}
+                {t(
+                  'callFeedback.callEndedScreen.leftByMistake.text',
+                  'Left by mistake?',
+                )}
               </p>
-              <button
-                type="button"
+              <Button
+                variant="secondary"
+                appearance="outline"
                 className="str-video__embedded-call-feedback__ended-button"
                 onClick={onJoin}
               >
                 <Icon icon="login" />
-                {t('Rejoin call')}
-              </button>
+                {t(
+                  'callFeedback.callEndedScreen.rejoinCall.label',
+                  'Rejoin call',
+                )}
+              </Button>
             </div>
             <div className="str-video__embedded-call-feedback__ended-divider" />
           </>
         )}
         <div className="str-video__embedded-call-feedback__ended-column">
           <p className="str-video__embedded-call-feedback__ended-label">
-            {t('Help us improve')}
+            {t(
+              'callFeedback.callEndedScreen.helpUsImprove.text',
+              'Help us improve',
+            )}
           </p>
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            appearance="outline"
             className="str-video__embedded-call-feedback__ended-button"
             onClick={onFeedback}
           >
             <Icon icon="feedback" />
-            {t('Leave feedback')}
-          </button>
+            {t(
+              'callFeedback.callEndedScreen.leaveFeedback.label',
+              'Leave feedback',
+            )}
+          </Button>
         </div>
       </div>
     </div>

package/src/embedded/shared/CallFeedback/RatingScreen.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
+import { Button } from '../../../components';
 import { StarRating } from './StarRating';
 
 interface RatingScreenProps {
@@ -18,29 +19,36 @@ export const RatingScreen = ({ onSubmit }: RatingScreenProps) => {
   return (
     <div className="str-video__embedded-call-feedback__container">
       <h2 className="str-video__embedded-call-feedback__title">
-        {t('Share your feedback')}
+        {t(
+          'callFeedback.ratingScreen.shareYourFeedback.title',
+          'Share your feedback',
+        )}
       </h2>
 
       <StarRating value={rating} onChange={setRating} />
 
       <textarea
-        aria-label={t('Feedback message')}
+        aria-label={t(
+          'callFeedback.ratingScreen.feedbackMessage.ariaLabel',
+          'Feedback message',
+        )}
         className="str-video__embedded-call-feedback__textarea"
-        placeholder={t('Tell us about your experience...')}
+        placeholder={t(
+          'callFeedback.ratingScreen.tellUsAboutExperience.placeholder',
+          'Tell us about your experience...',
+        )}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
         rows={3}
       />
 
       <div className="str-video__embedded-call-feedback__actions">
-        <button
-          type="button"
-          className="str-video__button"
-          onClick={handleSubmit}
-          disabled={rating === 0}
-        >
-          {t('Submit feedback')}
-        </button>
+        <Button size="sm" onClick={handleSubmit} disabled={rating === 0}>
+          {t(
+            'callFeedback.ratingScreen.submitFeedback.label',
+            'Submit feedback',
+          )}
+        </Button>
       </div>
     </div>
   );

package/src/embedded/shared/CallFeedback/StarRating.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import clsx from 'clsx';
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { Icon } from '../../../components';
 
 interface StarRatingProps {
@@ -22,7 +22,10 @@ export const StarRating = ({ value, onChange }: StarRatingProps) => {
   return (
     <div className="str-video__embedded-call-feedback__rating-section">
       <p className="str-video__embedded-call-feedback__rating-label">
-        {t('How was your call quality?')}
+        {t(
+          'callFeedback.starRating.howWasCallQuality.text',
+          'How was your call quality?',
+        )}
       </p>
       <div
         className="str-video__embedded-call-feedback__stars"
@@ -35,7 +38,11 @@ export const StarRating = ({ value, onChange }: StarRatingProps) => {
             className={getStarClasses(star)}
             onClick={() => onChange(star)}
             onMouseEnter={() => setHovered(star)}
-            aria-label={t('Rate {{ count }} star', { count: star })}
+            aria-label={t('callFeedback.starRating.rateStars.ariaLabel', {
+              count: star,
+              defaultValue_one: 'Rate {{ count }} star',
+              defaultValue_other: 'Rate {{ count }} stars',
+            })}
           >
             <Icon icon="star-filled" />
           </button>

package/src/embedded/shared/CallFeedback/ThankYouScreen.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { Icon } from '../../../components';
 
 export const ThankYouScreen = () => {
@@ -9,10 +9,13 @@ export const ThankYouScreen = () => {
         <Icon icon="checkmark" />
       </div>
       <h2 className="str-video__embedded-call-feedback__title">
-        {t('Thank you!')}
+        {t('callFeedback.thankYouScreen.thankYou.title', 'Thank you!')}
       </h2>
       <p className="str-video__embedded-call-feedback__subtitle">
-        {t('Your feedback helps improve call quality.')}
+        {t(
+          'callFeedback.thankYouScreen.feedbackHelpsImprove.text',
+          'Your feedback helps improve call quality.',
+        )}
       </p>
     </div>
   );

package/src/embedded/shared/ConnectionNotification/ConnectionNotification.tsx

@@ -1,6 +1,7 @@
 import { CallingState } from '@stream-io/video-client';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-import { LoadingIndicator, Notification } from '../../../components';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
+import { Notification } from '../../../components';
 
 export const ConnectionNotification = () => {
   const { t } = useI18n();
@@ -21,11 +22,18 @@ export const ConnectionNotification = () => {
       <div className="str-video__embedded-connection-notification">
         <Notification
           isVisible
+          state="error"
           placement="bottom"
           message={
             isOffline
-              ? t('You are offline. Check your internet connection.')
-              : t('Failed to restore connection. Please try again.')
+              ? t(
+                  'connectionNotification.offline.text',
+                  'You are offline. Check your internet connection.',
+                )
+              : t(
+                  'connectionNotification.failedToRestore.text',
+                  'Failed to restore connection. Please try again.',
+                )
           }
         />
       </div>
@@ -37,18 +45,17 @@ export const ConnectionNotification = () => {
       <div className="str-video__embedded-connection-notification">
         <Notification
           isVisible
+          state="loading"
           placement="bottom"
-          iconClassName={null}
           message={
-            <LoadingIndicator
-              text={
-                isMigrating
-                  ? t('Migrating...')
-                  : isJoining
-                    ? t('Joining')
-                    : t('Reconnecting...')
-              }
-            />
+            isMigrating
+              ? t('connectionNotification.migrating.text', 'Migrating...')
+              : isJoining
+                ? t('connectionNotification.joining.text', 'Joining')
+                : t(
+                    'connectionNotification.reconnecting.text',
+                    'Reconnecting...',
+                  )
           }
         />
       </div>

package/src/embedded/shared/JoinError/JoinError.tsx

@@ -1,5 +1,5 @@
-import { useI18n } from '@stream-io/video-react-bindings';
-import { Icon } from '../../../components';
+import { useI18n } from '../../../i18n';
+import { Button, Icon } from '../../../components';
 
 interface JoinErrorProps {
   onJoin: () => void;
@@ -11,17 +11,18 @@ export const JoinError = ({ onJoin }: JoinErrorProps) => {
   return (
     <div className="str-video__embedded-join-error">
       <h2 className="str-video__embedded-join-error__title">
-        {t('Failed to join the call')}
+        {t('joinError.failedToJoin.title', 'Failed to join the call')}
       </h2>
       <p className="str-video__embedded-join-error__message">
         {t(
+          'joinError.couldNotConnect.text',
           "We couldn't connect to the server. Please check your connection and try again.",
         )}
       </p>
-      <button type="button" className="str-video__button" onClick={onJoin}>
+      <Button size="sm" onClick={onJoin}>
         <Icon icon="login" />
-        {t('Try again')}
-      </button>
+        {t('common.tryAgain.label', 'Try again')}
+      </Button>
     </div>
   );
 };

package/src/embedded/shared/Lobby/DeviceControls.tsx

@@ -1,4 +1,8 @@
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import {
+  useCallStateHooks,
+  useConnectedUser,
+} from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import {
   ToggleAudioPreviewButton,
   ToggleVideoPreviewButton,
@@ -15,10 +19,12 @@ interface DeviceControlsProps {
 
 export const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {
   const { t } = useI18n();
+  const user = useConnectedUser();
   const { useCameraState, useMicrophoneState } = useCallStateHooks();
 
   const { hasBrowserPermission: hasCameraPermission } = useCameraState();
   const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+  const displayName = user?.name || user?.id;
 
   return (
     <>
@@ -27,6 +33,13 @@ export const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {
           DisabledVideoPreview={DisabledVideoPreview}
           NoCameraPreview={NoCameraPreview}
         />
+        {displayName && (
+          <span className="str-video__embedded-lobby__participant-label">
+            <span className="str-video__embedded-lobby__participant-label-text">
+              {displayName}
+            </span>
+          </span>
+        )}
         <div className="str-video__embedded-lobby__media-toggle">
           <ToggleAudioPreviewButton Menu={null} />
           {isVideoEnabled && <ToggleVideoPreviewButton Menu={null} />}
@@ -37,7 +50,13 @@ export const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {
         {hasMicPermission ? (
           <ToggleMicButton />
         ) : (
-          <DisabledDeviceButton icon="mic" label={t('Permission needed')} />
+          <DisabledDeviceButton
+            icon="mic"
+            label={t(
+              'lobby.deviceControls.permissionNeeded.label',
+              'Permission needed',
+            )}
+          />
         )}
         {isVideoEnabled &&
           (hasCameraPermission ? (
@@ -45,7 +64,10 @@ export const DeviceControls = ({ isVideoEnabled }: DeviceControlsProps) => {
           ) : (
             <DisabledDeviceButton
               icon="camera"
-              label={t('Permission needed')}
+              label={t(
+                'lobby.deviceControls.permissionNeeded.label',
+                'Permission needed',
+              )}
             />
           ))}
       </div>

package/src/embedded/shared/Lobby/Lobby.tsx

@@ -1,10 +1,7 @@
 import clsx from 'clsx';
-import {
-  useCallStateHooks,
-  useConnectedUser,
-  useI18n,
-} from '@stream-io/video-react-bindings';
-import { Icon } from '../../../components';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
+import { Button, Icon } from '../../../components';
 import { DeviceControls } from './DeviceControls';
 
 interface LobbyProps {
@@ -18,20 +15,28 @@ interface LobbyProps {
  */
 export const Lobby = ({ onJoin, title, joinLabel }: LobbyProps) => {
   const { t } = useI18n();
-  const user = useConnectedUser();
   const { useCameraState, useCallSettings } = useCallStateHooks();
 
   const { isMute } = useCameraState();
   const settings = useCallSettings();
 
   const isVideoEnabled = settings?.video.enabled ?? true;
-  const resolvedJoinLabel = joinLabel ?? t('Join');
-  const resolvedTitle = title ?? t('Set up your call before joining');
+  const resolvedJoinLabel = joinLabel ?? t('lobby.join.label', 'Join');
+  const resolvedTitle =
+    title ?? t('lobby.setUpYourCall.title', 'Set up your call before joining');
 
   return (
     <div className="str-video__embedded-lobby">
       <div className="str-video__embedded-lobby__content">
-        <h1 className="str-video__embedded-lobby__heading">{resolvedTitle}</h1>
+        <div className="str-video__embedded-lobby__title">
+          <Icon
+            icon="language"
+            className="str-video__embedded-lobby__title-icon"
+          />
+          <h1 className="str-video__embedded-lobby__heading">
+            {resolvedTitle}
+          </h1>
+        </div>
         <div
           className={clsx(
             'str-video__embedded-lobby__camera',
@@ -41,18 +46,10 @@ export const Lobby = ({ onJoin, title, joinLabel }: LobbyProps) => {
           <DeviceControls isVideoEnabled={isVideoEnabled} />
         </div>
 
-        <div className="str-video__embedded-lobby__display-name">
-          <div className="str-video__embedded-lobby__display-name-label">
-            {t('Display name')}
-          </div>
-          <span className="str-video__embedded-lobby__display-name-value">
-            {user?.name}
-          </span>
-          <button className="str-video__button" onClick={onJoin}>
-            <Icon className="str-video__button__icon" icon="login" />
-            {resolvedJoinLabel}
-          </button>
-        </div>
+        <Button className="str-video__embedded-lobby__join" onClick={onJoin}>
+          <Icon icon="login" />
+          {resolvedJoinLabel}
+        </Button>
       </div>
     </div>
   );

package/src/embedded/shared/Lobby/ToggleMicButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import {
   DeviceSelectorAudioInput,
   DeviceSelectorAudioOutput,
@@ -41,8 +42,14 @@ export const ToggleMicButton = () => {
       ToggleButton={ToggleMenuButton}
       visualType={MenuVisualType.MENU}
     >
-      <DeviceSelectorAudioInput visualType="list" title={t('Microphone')} />
-      <DeviceSelectorAudioOutput visualType="list" title={t('Speaker')} />
+      <DeviceSelectorAudioInput
+        visualType="list"
+        title={t('common.microphone.label', 'Microphone')}
+      />
+      <DeviceSelectorAudioOutput
+        visualType="list"
+        title={t('common.speaker.label', 'Speaker')}
+      />
     </MenuToggle>
   );
 };

package/src/embedded/shared/Lobby/VideoPreviewFallbacks.tsx

@@ -1,8 +1,8 @@
 import {
   useCallStateHooks,
   useConnectedUser,
-  useI18n,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { Avatar } from '../../../components';
 
 export const DisabledVideoPreview = () => {
@@ -22,6 +22,7 @@ export const DisabledVideoPreview = () => {
         <Avatar imageSrc={user?.image} name={user?.name || user?.id} />
       ) : (
         t(
+          'lobby.videoPreviewFallbacks.grantBrowserPermission.text',
           'Please grant your browser permission to access your camera and microphone.',
         )
       )}
@@ -41,6 +42,7 @@ export const NoCameraPreview = () => {
     return (
       <div className="str-video__embedded-lobby__no-permission">
         {t(
+          'lobby.videoPreviewFallbacks.grantBrowserPermission.text',
           'Please grant your browser permission to access your camera and microphone.',
         )}
       </div>
@@ -49,7 +51,7 @@ export const NoCameraPreview = () => {
 
   return (
     <div className="str-video__video-preview__no-camera-preview">
-      {t('No camera found')}
+      {t('common.noCameraFound.text', 'No camera found')}
     </div>
   );
 };

package/src/embedded/shared/index.ts

@@ -1,4 +1,5 @@
 export * from './BlurToggleButton/BlurToggleButton';
+export * from './CallDuration/CallDuration';
 export * from './CallFeedback/CallFeedback';
 export * from './ConnectionNotification/ConnectionNotification';
 export * from './EmbeddedParticipantViewUI/EmbeddedParticipantViewUI';

package/src/hooks/useDeviceList.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from '@stream-io/video-react-bindings';
+import { useI18n } from '../i18n';
 import { useMemo } from 'react';
 
 export interface DeviceListItem {
@@ -43,7 +43,7 @@ export function useDeviceList(
     if (selectedDeviceInfo === null || selectedIndex === null) {
       const defaultDevice = {
         deviceId: 'default',
-        label: t('Default'),
+        label: t('common.default.label', 'Default'),
         isSelected: true,
       };