feat(LivestreamLayout): Enrich with mute option and humanized participant count (#2027)

Extends the `LivestreamLayout` with additional options for showing:
- humanized participant count (`1000 -> 1k; 1500 -> 1.5k; 123333 -> 123k...`)
- add an option to mute the speaker

<img width="442" height="888" alt="Screenshot 2025-12-01 at 14 19 37"
src="https://github.com/user-attachments/assets/ca702d94-90a3-4538-8c3b-d5ad9e82d2c2"
/>


🎫 Ticket: https://linear.app/stream/issue/REACT-677
📑 Docs: GetStream/docs-content#816

---------

Co-authored-by: Artsiom Grintsevich <[email protected]>

Author: oliverlaz

packages/client/index.ts

@@ -17,6 +17,7 @@ export * from './src/devices';
 export * from './src/store';
 export * from './src/sorting';
 export * from './src/helpers/client-details';
+export * from './src/helpers/humanize';
 export * from './src/helpers/DynascaleManager';
 export * from './src/helpers/ViewportTracker';
 export * from './src/helpers/sound-detector';

packages/client/src/helpers/__tests__/humanize.test.ts

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+
+import { humanize } from '../humanize';
+
+describe('humanize', () => {
+  it('returns the same string for numbers below 1000', () => {
+    expect(humanize(0)).toBe('0');
+    expect(humanize(1)).toBe('1');
+    expect(humanize(12)).toBe('12');
+    expect(humanize(999)).toBe('999');
+  });
+
+  it('formats thousands with k suffix', () => {
+    expect(humanize(1000)).toBe('1k');
+    expect(humanize(1500)).toBe('1.5k');
+    expect(humanize(12_300)).toBe('12.3k');
+    // >= 100 of the unit → no decimals
+    expect(humanize(123_456)).toBe('123k');
+  });
+
+  it('formats millions with M suffix', () => {
+    expect(humanize(1_000_000)).toBe('1M'); // trailing .0 removed
+    expect(humanize(1_500_000)).toBe('1.5M');
+    expect(humanize(12_000_000)).toBe('12M');
+  });
+
+  it('formats billions with B suffix', () => {
+    expect(humanize(1_000_000_000)).toBe('1B');
+    expect(humanize(1_250_000_000)).toBe('1.3B');
+    expect(humanize(12_345_678_901)).toBe('12.3B');
+  });
+
+  it('rounds within the same unit and removes trailing .0', () => {
+    // Rounds up within the same unit (k), does not carry over to the next unit
+    expect(humanize(999_500)).toBe('1000k');
+    // Rounds to a whole number for millions when first decimal rounds to .0
+    expect(humanize(99_950_000)).toBe('100M');
+    // No trailing .0
+    expect(humanize(100_000)).toBe('100k');
+  });
+});

packages/client/src/helpers/humanize.ts

@@ -0,0 +1,20 @@
+/**
+ * Formats large numbers into a compact, human-friendly form: 1k, 1.5k, 2M, etc.
+ */
+export const humanize = (n: number): string => {
+  if (n < 1000) return String(n);
+  const units = [
+    { value: 1_000_000_000, suffix: 'B' },
+    { value: 1_000_000, suffix: 'M' },
+    { value: 1_000, suffix: 'k' },
+  ];
+  for (const { value, suffix } of units) {
+    if (n >= value) {
+      const num = n / value;
+      const precision = num < 100 ? 1 : 0; // show one decimal only for small leading numbers
+      const formatted = num.toFixed(precision).replace(/\.0$/g, '');
+      return `${formatted}${suffix}`;
+    }
+  }
+  return String(n);
+};

packages/react-bindings/src/hooks/callStateHooks.ts

@@ -429,17 +429,19 @@ export const useMicrophoneState = ({
 export const useSpeakerState = () => {
   if (isReactNative()) {
     throw new Error(
-      'This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details',
+      'This feature is not supported in React Native. Please visit https://getstream.io/video/docs/react-native/guides/camera-and-microphone/#speaker-management for more details',
     );
   }
   const call = useCall();
   const { speaker } = call as Call;
 
   const { getDevices } = useLazyDeviceList(speaker);
   const selectedDevice = useObservableValue(speaker.state.selectedDevice$);
+  const volume = useObservableValue(speaker.state.volume$);
 
   return {
     speaker,
+    volume,
     get devices() {
       return getDevices();
     },

packages/react-native-sdk/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx

@@ -44,6 +44,13 @@ export type ViewerLivestreamControlsProps = ViewerLeaveStreamButtonProps & {
    * Handler to be called when the layout of the component changes.
    */
   onLayout?: ViewProps['onLayout'];
+
+  /**
+   * Whether to humanize the participant count.
+   * @default true
+   * @example 1000 -> 1k; 1500 -> 1.5k
+   */
+  humanizeParticipantCount?: boolean;
 };
 
 /**
@@ -53,6 +60,7 @@ export const ViewerLivestreamControls = ({
   ViewerLeaveStreamButton = DefaultViewerLeaveStreamButton,
   onLeaveStreamHandler,
   onLayout,
+  humanizeParticipantCount,
 }: ViewerLivestreamControlsProps) => {
   const styles = useStyles();
   const {
@@ -187,7 +195,9 @@ export const ViewerLivestreamControls = ({
             <View style={[styles.leftElement]}>
               <View style={[styles.liveInfo]}>
                 <LiveIndicator />
-                <FollowerCount />
+                <FollowerCount
+                  humanizeParticipantCount={humanizeParticipantCount}
+                />
               </View>
             </View>
           </View>

packages/react-native-sdk/src/components/Livestream/LivestreamTopView/FollowerCount.tsx

@@ -1,18 +1,29 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts';
+import { humanize } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { Eye } from '../../../icons';
 
 /**
  * Props for the FollowerCount component.
  */
-export type FollowerCountProps = {};
+export type FollowerCountProps = {
+  /**
+   * Humanize the participant count. @default true
+   * @example 1000 -> 1k
+   * @example 1450 -> 1.45k
+   * @example 1000000 -> 1m
+   */
+  humanizeParticipantCount?: boolean;
+};
 
 /**
  * The FollowerCount component that displays the number of participants while in the call.
  */
-export const FollowerCount = ({}: FollowerCountProps) => {
+export const FollowerCount = ({
+  humanizeParticipantCount = true,
+}: FollowerCountProps) => {
   const styles = useStyles();
   const {
     theme: { followerCount },
@@ -27,7 +38,9 @@ export const FollowerCount = ({}: FollowerCountProps) => {
         <Eye />
       </View>
       <Text style={[styles.label, followerCount.label]}>
-        {totalParticipants}
+        {humanizeParticipantCount
+          ? humanize(totalParticipants)
+          : totalParticipants}
       </Text>
     </View>
   );

packages/react-native-sdk/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx

@@ -127,21 +127,15 @@ export const ViewerLivestream = ({
   };
 
   useEffect(() => {
-    const handleJoinCall = async () => {
-      try {
-        await call?.join();
-      } catch (error) {
-        console.error('Failed to join call', error);
-      }
-    };
-
     const canJoinAsap = canJoinLive || canJoinEarly || canJoinBackstage;
     const join = joinBehavior ?? 'asap';
     const canJoin =
       (join === 'asap' && canJoinAsap) || (join === 'live' && canJoinLive);
 
     if (call && callingState === CallingState.IDLE && canJoin && !hasLeft) {
-      handleJoinCall();
+      call.join().catch((error) => {
+        console.error('Failed to join call', error);
+      });
     }
   }, [
     canJoinLive,

packages/react-sdk/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -11,7 +11,7 @@ import {
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-import { hasScreenShare } from '@stream-io/video-client';
+import { hasScreenShare, humanize } from '@stream-io/video-client';
 import { ParticipantView, useParticipantViewContext } from '../ParticipantView';
 import { ParticipantsAudio } from '../Audio';
 import {
@@ -33,6 +33,16 @@ export type LivestreamLayoutProps = {
    */
   showParticipantCount?: boolean;
 
+  /**
+   * Whether to humanize the participant count. Defaults to `true`.
+   * @example
+   * 1000 participants -> 1k
+   * 1500 participants -> 1.5k
+   * 10_000 participants -> 10k
+   * 100_000 participants -> 100k
+   */
+  humanizeParticipantCount?: boolean;
+
   /**
    * Whether to enable fullscreen mode. Defaults to `true`.
    */
@@ -53,6 +63,11 @@ export type LivestreamLayoutProps = {
    */
   showSpeakerName?: boolean;
 
+  /**
+   * Whether to show the mute button. Defaults to `true`.
+   */
+  showMuteButton?: boolean;
+
   /**
    * When set to `false` disables mirroring of the local participant's video.
    * @default true
@@ -94,6 +109,7 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
       showParticipantCount={props.showParticipantCount}
       showDuration={props.showDuration}
       showLiveBadge={props.showLiveBadge}
+      showMuteButton={props.showMuteButton}
       showSpeakerName={props.showSpeakerName}
       enableFullScreen={props.enableFullScreen}
     />
@@ -160,10 +176,21 @@ export type BackstageLayoutProps = {
    * the livestream went live. Defaults to `true`.
    */
   showEarlyParticipantCount?: boolean;
+
+  /**
+   * Show the participant count in a humanized format. Defaults to `true`.
+   * @example
+   * 1000 participants -> 1k
+   * 1500 participants -> 1.5k
+   * 10_000 participants -> 10k
+   * 10_0000 participants -> 100k
+   */
+  humanizeParticipantCount?: boolean;
 };
 
 export const BackstageLayout = (props: BackstageLayoutProps) => {
-  const { showEarlyParticipantCount = true } = props;
+  const { showEarlyParticipantCount = true, humanizeParticipantCount = true } =
+    props;
   const { useParticipantCount, useCallStartsAt } = useCallStateHooks();
   const participantCount = useParticipantCount();
   const startsAt = useCallStartsAt();
@@ -182,7 +209,9 @@ export const BackstageLayout = (props: BackstageLayoutProps) => {
         {showEarlyParticipantCount && (
           <span className="str-video__livestream-layout__early-viewers-count">
             {t('{{ count }} participants joined early', {
-              count: participantCount,
+              count: humanizeParticipantCount
+                ? humanize(participantCount)
+                : participantCount,
             })}
           </span>
         )}
@@ -196,28 +225,35 @@ BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props: {
   enableFullScreen?: boolean;
   showParticipantCount?: boolean;
+  humanizeParticipantCount?: boolean;
   showDuration?: boolean;
   showLiveBadge?: boolean;
   showSpeakerName?: boolean;
+  showMuteButton?: boolean;
 }) => {
   const {
     enableFullScreen = true,
     showParticipantCount = true,
+    humanizeParticipantCount = true,
     showDuration = true,
     showLiveBadge = true,
+    showMuteButton = true,
     showSpeakerName = false,
   } = props;
   const overlayBarVisible =
     enableFullScreen ||
     showParticipantCount ||
     showDuration ||
     showLiveBadge ||
+    showMuteButton ||
     showSpeakerName;
   const { participant } = useParticipantViewContext();
-  const { useParticipantCount } = useCallStateHooks();
+  const { useParticipantCount, useSpeakerState } = useCallStateHooks();
   const participantCount = useParticipantCount();
   const duration = useUpdateCallDuration();
   const toggleFullScreen = useToggleFullScreen();
+  const { speaker, volume } = useSpeakerState();
+  const isSpeakerMuted = volume === 0;
   const { t } = useI18n();
   return (
     <div className="str-video__livestream-layout__overlay">
@@ -230,7 +266,9 @@ const ParticipantOverlay = (props: {
           )}
           {showParticipantCount && (
             <span className="str-video__livestream-layout__viewers-count">
-              {participantCount}
+              {humanizeParticipantCount
+                ? humanize(participantCount)
+                : participantCount}
             </span>
           )}
           {showSpeakerName && (
@@ -246,6 +284,16 @@ const ParticipantOverlay = (props: {
               {formatDuration(duration)}
             </span>
           )}
+          {showMuteButton && (
+            <span
+              className={clsx(
+                'str-video__livestream-layout__mute-button',
+                isSpeakerMuted &&
+                  'str-video__livestream-layout__mute-button--muted',
+              )}
+              onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}
+            />
+          )}
           {enableFullScreen && (
             <span
               className="str-video__livestream-layout__go-fullscreen"

packages/styling/src/CallLayout/LivestreamLayout-layout.scss

@@ -100,6 +100,22 @@
       text-align: center;
     }
 
+    .str-video__livestream-layout__mute-button {
+      background: var(--str-video__icon--speaker) center no-repeat;
+      border-radius: var(--str-video__border-radius-xxs);
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+
+      &.str-video__livestream-layout__mute-button--muted {
+        background: var(--str-video__icon--speaker-off) center no-repeat;
+      }
+
+      &:hover {
+        background-color: var(--str-video__overlay-color);
+      }
+    }
+
     .str-video__livestream-layout__go-fullscreen {
       background: var(--str-video__icon--fullscreen) center no-repeat;
       border-radius: var(--str-video__border-radius-xxs);