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

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -6,14 +6,12 @@ import {
   useEffect,
   useState,
 } from 'react';
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { hasScreenShare, humanize } from '@stream-io/video-client';
 import { ParticipantView, useParticipantViewContext } from '../ParticipantView';
 import { ParticipantsAudio } from '../Audio';
+import { Icon, IconButton } from '../../../components';
 import {
   usePaginatedLayoutSortPreset,
   useRawRemoteParticipants,
@@ -218,21 +216,40 @@ export const BackstageLayout = (props: BackstageLayoutProps) => {
         {startsAt && (
           <span className="str-video__livestream-layout__starts-at">
             {startsAtPassed
-              ? t('Livestream starts soon')
-              : t('Livestream starts at {{ time }}', {
-                  time: startsAt.toLocaleTimeString([], {
-                    hour: '2-digit',
-                    minute: '2-digit',
-                  }),
-                })}
+              ? t(
+                  'livestream.backstage.startsSoon.text',
+                  'Livestream starts soon',
+                )
+              : t(
+                  'livestream.backstage.startsAt.text',
+                  'Livestream starts at {{ time }}',
+                  {
+                    time: startsAt.toLocaleTimeString([], {
+                      hour: '2-digit',
+                      minute: '2-digit',
+                    }),
+                  },
+                )}
           </span>
         )}
         {showEarlyParticipantCount && (
           <span className="str-video__livestream-layout__early-viewers-count">
-            {t('{{ count }} participants joined early', {
-              count: humanizeParticipantCount
+            <Icon icon="livestream-viewers" />
+            {/*
+              `count` stays the raw number so i18next can pick a plural form;
+              `formattedCount` carries the (possibly humanized) display string.
+              Behaviour change: with humanizing on, a count of 1 now renders the
+              singular - previously the humanized string defeated plural
+              selection and `_other` always won.
+            */}
+            {t('livestream.backstage.participantsJoinedEarly.text', {
+              count: participantCount,
+              formattedCount: humanizeParticipantCount
                 ? humanize(participantCount)
                 : participantCount,
+              defaultValue_one: '{{ formattedCount }} participant joined early',
+              defaultValue_other:
+                '{{ formattedCount }} participants joined early',
             })}
           </span>
         )}
@@ -283,11 +300,16 @@ const ParticipantOverlay = (props: {
           <div className="str-video__livestream-layout__overlay__bar-left">
             {showLiveBadge && (
               <span className="str-video__livestream-layout__live-badge">
-                {t('Live')}
+                <span
+                  className="str-video__livestream-layout__live-badge__dot"
+                  aria-hidden="true"
+                />
+                {t('common.live.label', 'Live')}
               </span>
             )}
             {showParticipantCount && (
               <span className="str-video__livestream-layout__viewers-count">
+                <Icon icon="livestream-viewers" />
                 {humanizeParticipantCount
                   ? humanize(participantCount)
                   : participantCount}
@@ -298,7 +320,7 @@ const ParticipantOverlay = (props: {
                 className="str-video__livestream-layout__speaker-name"
                 title={participant.name || participant.userId || ''}
               >
-                {participant.name || participant.userId || ''}
+                <span>{participant.name || participant.userId || ''}</span>
               </span>
             )}
           </div>
@@ -311,7 +333,11 @@ const ParticipantOverlay = (props: {
           </div>
           <div className="str-video__livestream-layout__overlay__bar-right">
             {showMuteButton && (
-              <span
+              <IconButton
+                icon={isSpeakerMuted ? 'speaker-off' : 'speaker'}
+                variant="secondary"
+                appearance="solid"
+                size="sm"
                 className={clsx(
                   'str-video__livestream-layout__mute-button',
                   isSpeakerMuted &&
@@ -324,7 +350,11 @@ const ParticipantOverlay = (props: {
               participantViewElement &&
               typeof participantViewElement.requestFullscreen !==
                 'undefined' && (
-                <span
+                <IconButton
+                  icon="fullscreen"
+                  variant="secondary"
+                  appearance="solid"
+                  size="sm"
                   className="str-video__livestream-layout__go-fullscreen"
                   onClick={toggleFullScreen}
                 />

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 import clsx from 'clsx';
 
@@ -119,6 +120,7 @@ export type PaginatedGridLayoutProps = {
 >;
 
 export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
+  const { t } = useI18n();
   const {
     groupSize = (props.groupSize || 0) > 0
       ? props.groupSize || GROUP_SIZE
@@ -184,7 +186,13 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
       <div className="str-video__paginated-grid-layout">
         {pageArrowsVisible && pageCount > 1 && (
           <IconButton
+            size="sm"
+            variant="secondary"
             icon="caret-left"
+            aria-label={t(
+              'callLayout.paginatedGridLayout.previousPage.ariaLabel',
+              'Previous page',
+            )}
             disabled={page === 0}
             onClick={() =>
               setPage((currentPage) => Math.max(0, currentPage - 1))
@@ -202,8 +210,14 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
         )}
         {pageArrowsVisible && pageCount > 1 && (
           <IconButton
+            size="sm"
+            variant="secondary"
             disabled={page === pageCount - 1}
             icon="caret-right"
+            aria-label={t(
+              'callLayout.paginatedGridLayout.nextPage.ariaLabel',
+              'Next page',
+            )}
             onClick={() =>
               setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))
             }

package/src/core/components/CallLayout/PipLayout/Grid.tsx

@@ -1,4 +1,5 @@
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../../i18n';
 import { useEffect, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { hasScreenShare } from '@stream-io/video-client';
@@ -99,7 +100,10 @@ export const Grid = (props: PipLayoutGridProps) => {
           <div className="str-video__pip-screen-share-local">
             <Icon icon="screen-share-off" />
             <span className="str-video__pip-screen-share-local__title">
-              {t('You are presenting your screen')}
+              {t(
+                'common.presentingYourScreen.text',
+                'You are presenting your screen',
+              )}
             </span>
           </div>
         ) : (
@@ -116,6 +120,8 @@ export const Grid = (props: PipLayoutGridProps) => {
         {pageArrowsVisible && page > 0 && (
           <IconButton
             icon="caret-left"
+            size="sm"
+            variant="secondary"
             onClick={() =>
               setPage((currentPage) => Math.max(0, currentPage - 1))
             }
@@ -144,6 +150,8 @@ export const Grid = (props: PipLayoutGridProps) => {
         {pageArrowsVisible && page < pageCount - 1 && (
           <IconButton
             icon="caret-right"
+            size="sm"
+            variant="secondary"
             onClick={() =>
               setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))
             }

package/src/core/components/CallLayout/PipLayout/Pip.tsx

@@ -1,4 +1,5 @@
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../../i18n';
 import { useEffect, useState } from 'react';
 
 import { hasScreenShare } from '@stream-io/video-client';
@@ -86,7 +87,10 @@ export const Pip = (props: PipLayoutProps) => {
           <div className="str-video__pip-screen-share-local">
             <Icon icon="screen-share-off" />
             <span className="str-video__pip-screen-share-local__title">
-              {t('You are presenting your screen')}
+              {t(
+                'common.presentingYourScreen.text',
+                'You are presenting your screen',
+              )}
             </span>
           </div>
         ) : (

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -6,6 +6,7 @@ import {
   useCallStateHooks,
   useSpeakerLayoutSortPreset,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 
 import {
   DefaultParticipantViewUI,
@@ -282,6 +283,7 @@ type ScrollButtonsProps<T extends HTMLElement> = {
 const HorizontalScrollButtons = <T extends HTMLElement>({
   scrollWrapper,
 }: ScrollButtonsProps<T>) => {
+  const { t } = useI18n();
   const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
 
   const scrollStartClickHandler = () => {
@@ -295,15 +297,27 @@ const HorizontalScrollButtons = <T extends HTMLElement>({
     <>
       {scrollPosition && scrollPosition !== 'start' && (
         <IconButton
+          size="sm"
+          variant="secondary"
           onClick={scrollStartClickHandler}
           icon="caret-left"
+          aria-label={t(
+            'callLayout.speakerLayout.scrollParticipantsLeft.ariaLabel',
+            'Scroll participants left',
+          )}
           className="str-video__speaker-layout__participants-bar--button-left"
         />
       )}
       {scrollPosition && scrollPosition !== 'end' && (
         <IconButton
+          size="sm"
+          variant="secondary"
           onClick={scrollEndClickHandler}
           icon="caret-right"
+          aria-label={t(
+            'callLayout.speakerLayout.scrollParticipantsRight.ariaLabel',
+            'Scroll participants right',
+          )}
           className="str-video__speaker-layout__participants-bar--button-right"
         />
       )}
@@ -314,6 +328,7 @@ const HorizontalScrollButtons = <T extends HTMLElement>({
 const VerticalScrollButtons = <T extends HTMLElement>({
   scrollWrapper,
 }: ScrollButtonsProps<T>) => {
+  const { t } = useI18n();
   const scrollPosition = useVerticalScrollPosition(scrollWrapper);
 
   const scrollTopClickHandler = () => {
@@ -327,15 +342,27 @@ const VerticalScrollButtons = <T extends HTMLElement>({
     <>
       {scrollPosition && scrollPosition !== 'top' && (
         <IconButton
+          size="sm"
+          variant="secondary"
           onClick={scrollTopClickHandler}
           icon="caret-up"
+          aria-label={t(
+            'callLayout.speakerLayout.scrollParticipantsUp.ariaLabel',
+            'Scroll participants up',
+          )}
           className="str-video__speaker-layout__participants-bar--button-top"
         />
       )}
       {scrollPosition && scrollPosition !== 'bottom' && (
         <IconButton
+          size="sm"
+          variant="secondary"
           onClick={scrollBottomClickHandler}
           icon="caret-down"
+          aria-label={t(
+            'callLayout.speakerLayout.scrollParticipantsDown.ariaLabel',
+            'Scroll participants down',
+          )}
           className="str-video__speaker-layout__participants-bar--button-bottom"
         />
       )}

package/src/core/components/CallLayout/partcipantFilter.test.ts

@@ -1,7 +1,9 @@
 import { StreamVideoParticipant } from '@stream-io/video-client';
-import { test, type TestContext } from 'node:test';
+import { describe, expect, it } from 'vitest';
 import { applyParticipantsFilter } from './hooks';
 
+// `publishedTracks` is required: the filter-object path derives `hasVideo` / `hasAudio` /
+// `hasScreenShare` from it, and those read the array unguarded.
 const participants = [
   {
     userId: 'host-id',
@@ -9,6 +11,7 @@ const participants = [
     isDominantSpeaker: true,
     name: 'Host',
     roles: ['host', 'admin'],
+    publishedTracks: [],
   },
   {
     userId: 'listener-id-1',
@@ -17,6 +20,7 @@ const participants = [
     name: 'Listener 1',
     roles: ['listener', 'user'],
     pin: { pinnedAt: new Date() },
+    publishedTracks: [],
   },
   {
     userId: 'listener-id-2',
@@ -24,42 +28,45 @@ const participants = [
     isDominantSpeaker: false,
     name: 'Listener 2',
     roles: ['listener', 'user'],
+    publishedTracks: [],
   },
-] as StreamVideoParticipant[];
+] as unknown as StreamVideoParticipant[];
 
-test('applies predicate filter', (t: TestContext) => {
-  const filtered = applyParticipantsFilter(participants, (p) =>
-    p.roles.includes('listener'),
-  );
+describe('applyParticipantsFilter', () => {
+  it('applies predicate filter', () => {
+    const filtered = applyParticipantsFilter(participants, (p) =>
+      p.roles.includes('listener'),
+    );
 
-  t.assert.strictEqual(filtered.length, 2);
-  t.assert.deepStrictEqual(
-    filtered.map((p) => p.userId),
-    ['listener-id-1', 'listener-id-2'],
-  );
-});
-
-test('applies filter object', (t: TestContext) => {
-  const filtered = applyParticipantsFilter(participants, {
-    $and: [
-      { roles: { $contains: 'listener' } },
-      { $not: { roles: { $contains: 'host' } } },
-    ],
+    expect(filtered).toHaveLength(2);
+    expect(filtered.map((p) => p.userId)).toEqual([
+      'listener-id-1',
+      'listener-id-2',
+    ]);
   });
 
-  t.assert.strictEqual(filtered.length, 2);
-  t.assert.deepStrictEqual(
-    filtered.map((p) => p.userId),
-    ['listener-id-1', 'listener-id-2'],
-  );
-});
+  it('applies filter object', () => {
+    const filtered = applyParticipantsFilter(participants, {
+      $and: [
+        { roles: { $contains: 'listener' } },
+        { $not: { roles: { $contains: 'host' } } },
+      ],
+    });
 
-test('filter object supports boolean pin property', (t: TestContext) => {
-  const filtered = applyParticipantsFilter(participants, {
-    roles: { $contains: 'listener' },
-    isPinned: true,
+    expect(filtered).toHaveLength(2);
+    expect(filtered.map((p) => p.userId)).toEqual([
+      'listener-id-1',
+      'listener-id-2',
+    ]);
   });
 
-  t.assert.strictEqual(filtered.length, 1);
-  t.assert.strictEqual(filtered[0].userId, 'listener-id-1');
+  it('filter object supports boolean pin property', () => {
+    const filtered = applyParticipantsFilter(participants, {
+      roles: { $contains: 'listener' },
+      isPinned: true,
+    });
+
+    expect(filtered).toHaveLength(1);
+    expect(filtered[0].userId).toBe('listener-id-1');
+  });
 });

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

@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+import { SfuModels } from '@stream-io/video-client';
+
+export type ConnectionQualityIndicatorProps = {
+  quality: SfuModels.ConnectionQuality;
+  title?: string;
+  className?: string;
+};
+
+/** How many of the three bars are lit, per quality level. */
+const ACTIVE_BARS: Partial<Record<SfuModels.ConnectionQuality, number>> = {
+  [SfuModels.ConnectionQuality.POOR]: 1,
+  [SfuModels.ConnectionQuality.GOOD]: 2,
+  [SfuModels.ConnectionQuality.EXCELLENT]: 3,
+};
+
+const BAR_COUNT = 3;
+
+/**
+ * Three ascending bars showing a participant's connection quality.
+ */
+export const ConnectionQualityIndicator = ({
+  quality,
+  title,
+  className,
+}: ConnectionQualityIndicatorProps) => {
+  const activeBars = ACTIVE_BARS[quality];
+
+  if (!activeBars) return null;
+
+  const level = SfuModels.ConnectionQuality[quality].toLowerCase();
+
+  return (
+    <span
+      className={clsx(
+        'str-video__connection-quality-indicator',
+        `str-video__connection-quality-indicator--${level}`,
+        className,
+      )}
+      title={title ?? level}
+    >
+      {Array.from({ length: BAR_COUNT }, (_, index) => (
+        <span
+          key={index}
+          className={clsx(
+            'str-video__connection-quality-indicator__bar',
+            index < activeBars &&
+              'str-video__connection-quality-indicator__bar--active',
+          )}
+        />
+      ))}
+    </span>
+  );
+};

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

@@ -10,13 +10,14 @@ import {
 import {
   useCall,
   useCallStateHooks,
-  useI18n,
   useIsAudioConnecting,
   useIsVideoConnecting,
 } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../../i18n';
 import clsx from 'clsx';
 
 import {
+  Button,
   Icon,
   IconButton,
   LoadingIndicator,
@@ -25,6 +26,7 @@ import {
   ToggleMenuButtonProps,
 } from '../../../components';
 import { ParticipantActionsContextMenu as DefaultParticipantActionsContextMenu } from './ParticipantActionsContextMenu';
+import { ConnectionQualityIndicator } from './ConnectionQualityIndicator';
 import { Reaction } from '../../../components/Reaction';
 import { useParticipantViewContext } from './ParticipantViewContext';
 
@@ -56,7 +58,19 @@ export type DefaultParticipantViewUIProps = {
 
 const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
   function ToggleButtonRender(props, ref) {
-    return <IconButton enabled={props.menuShown} icon="ellipsis" ref={ref} />;
+    const { t } = useI18n();
+
+    return (
+      <IconButton
+        className="str-video__participant-view__menu-button"
+        active={props.menuShown}
+        size="sm"
+        variant="secondary"
+        ref={ref}
+        title={t('participantView.moreOptions.title', 'More options')}
+        icon="ellipsis"
+      />
+    );
   },
 );
 
@@ -74,15 +88,19 @@ export const DefaultScreenShareOverlay = () => {
     <div className="str-video__screen-share-overlay">
       <Icon icon="screen-share-off" />
       <span className="str-video__screen-share-overlay__title">
-        {t('You are presenting your screen')}
+        {t(
+          'common.presentingYourScreen.text',
+          'You are presenting your screen',
+        )}
       </span>
-      <button
+      <Button
+        variant="destructive"
         onClick={stopScreenShare}
-        type="button"
         className="str-video__screen-share-overlay__button"
       >
-        <Icon icon="close" /> {t('Stop Screen Sharing')}
-      </button>
+        <Icon icon="close" />{' '}
+        {t('participantView.stopScreenSharing.label', 'Stop Screen Sharing')}
+      </Button>
     </div>
   );
 };
@@ -107,10 +125,16 @@ export const DefaultAudioBlockedNotification = () => {
         <Icon icon="speaker" />
         <span className="str-video__audio-blocked-notification__text">
           <span className="str-video__audio-blocked-notification__title">
-            {t('Audio is blocked by your system')}
+            {t(
+              'participantView.audioBlocked.title',
+              'Audio is blocked by your system',
+            )}
           </span>
           <span className="str-video__audio-blocked-notification__subtitle">
-            {t('Click or tap to play audio')}
+            {t(
+              'participantView.audioBlocked.description',
+              'Click or tap to play audio',
+            )}
           </span>
         </span>
       </span>
@@ -182,10 +206,6 @@ export const ParticipantDetails = ({
   const call = useCall();
 
   const { t } = useI18n();
-  const connectionQualityAsString =
-    !!connectionQuality &&
-    SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
-
   const hasAudioTrack = hasAudio(participant);
   const hasVideoTrack = hasVideo(participant);
   const canUnpin = !!pin && pin.isLocalPin;
@@ -199,11 +219,16 @@ export const ParticipantDetails = ({
     <>
       <div className="str-video__participant-details">
         <div className="str-video__participant-details__name">
-          {name || userId}
+          <span className="str-video__participant-details__name-text">
+            {name || userId}
+          </span>
           {indicatorsVisible && isAudioConnecting && (
             <LoadingIndicator
               className="str-video__participant-details__name--audio-connecting"
-              tooltip={t('Audio is connecting...')}
+              tooltip={t(
+                'participantView.audioConnecting.title',
+                'Audio is connecting...',
+              )}
             />
           )}
           {indicatorsVisible && !hasAudioTrack && (
@@ -212,7 +237,10 @@ export const ParticipantDetails = ({
           {indicatorsVisible && isVideoConnecting && (
             <LoadingIndicator
               className="str-video__participant-details__name--video-connecting"
-              tooltip={t('Video is connecting...')}
+              tooltip={t(
+                'participantView.videoConnecting.title',
+                'Video is connecting...',
+              )}
             />
           )}
           {indicatorsVisible && !hasVideoTrack && (
@@ -220,13 +248,20 @@ export const ParticipantDetails = ({
           )}
           {indicatorsVisible && isTrackPaused && (
             <span
-              title={t('Video paused due to insufficient bandwidth')}
+              title={t(
+                'participantView.videoPausedInsufficientBandwidth.title',
+                'Video paused due to insufficient bandwidth',
+              )}
               className="str-video__participant-details__name--track-paused"
             />
           )}
           {indicatorsVisible && pin && (
             <span
-              title={canUnpin ? t('Unpin') : t('Pinned')}
+              title={
+                canUnpin
+                  ? t('participantView.unpin.label', 'Unpin')
+                  : t('participantList.pinned.title', 'Pinned')
+              }
               onClick={canUnpin ? () => call?.unpin(sessionId) : undefined}
               className="str-video__participant-details__name--pinned"
             />
@@ -236,20 +271,18 @@ export const ParticipantDetails = ({
       </div>
       {indicatorsVisible && (
         <Notification
+          state="error"
           isVisible={
             isLocalParticipant &&
             connectionQuality === SfuModels.ConnectionQuality.POOR
           }
-          message={t('Poor connection quality')}
+          message={t(
+            'participantView.connectionQuality.poor.text',
+            'Poor connection quality. Please check your internet connection.',
+          )}
         >
-          {connectionQualityAsString && (
-            <span
-              className={clsx(
-                'str-video__participant-details__connection-quality',
-                `str-video__participant-details__connection-quality--${connectionQualityAsString}`,
-              )}
-              title={connectionQualityAsString}
-            />
+          {connectionQuality && (
+            <ConnectionQualityIndicator quality={connectionQuality} />
           )}
         </Notification>
       )}