@stream-io/video-react-sdk 0.3.28 → 0.3.30

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

@@ -11,9 +11,10 @@ import {
   ParticipantView,
   ParticipantViewProps,
 } from '../ParticipantView';
-import { Audio } from '../Audio';
+import { ParticipantsAudio } from '../Audio';
 import { IconButton } from '../../../components';
 import { chunk } from '../../../utilities';
+import { usePaginatedLayoutSortPreset } from './hooks';
 
 const GROUP_SIZE = 16;
 
@@ -85,6 +86,8 @@ export const PaginatedGridLayout = ({
   // used to render audio elements
   const remoteParticipants = useRemoteParticipants();
 
+  usePaginatedLayoutSortPreset(call);
+
   // only used to render video elements
   const participantGroups = useMemo(
     () =>
@@ -109,41 +112,35 @@ export const PaginatedGridLayout = ({
   if (!call) return null;
 
   return (
-    <>
-      {remoteParticipants.map((participant) => (
-        <Audio key={participant.sessionId} participant={participant} />
-      ))}
-      <div className="str-video__paginated-grid-layout__wrapper">
-        <div className="str-video__paginated-grid-layout">
-          {pageArrowsVisible && pageCount > 1 && (
-            <IconButton
-              icon="caret-left"
-              disabled={page === 0}
-              onClick={() =>
-                setPage((currentPage) => Math.max(0, currentPage - 1))
-              }
-            />
-          )}
-          {selectedGroup && (
-            <PaginatedGridLayoutGroup
-              group={participantGroups[page]}
-              VideoPlaceholder={VideoPlaceholder}
-              ParticipantViewUI={ParticipantViewUI}
-            />
-          )}
-          {pageArrowsVisible && pageCount > 1 && (
-            <IconButton
-              disabled={page === pageCount - 1}
-              icon="caret-right"
-              onClick={() =>
-                setPage((currentPage) =>
-                  Math.min(pageCount - 1, currentPage + 1),
-                )
-              }
-            />
-          )}
-        </div>
+    <div className="str-video__paginated-grid-layout__wrapper">
+      <ParticipantsAudio participants={remoteParticipants} />
+      <div className="str-video__paginated-grid-layout">
+        {pageArrowsVisible && pageCount > 1 && (
+          <IconButton
+            icon="caret-left"
+            disabled={page === 0}
+            onClick={() =>
+              setPage((currentPage) => Math.max(0, currentPage - 1))
+            }
+          />
+        )}
+        {selectedGroup && (
+          <PaginatedGridLayoutGroup
+            group={participantGroups[page]}
+            VideoPlaceholder={VideoPlaceholder}
+            ParticipantViewUI={ParticipantViewUI}
+          />
+        )}
+        {pageArrowsVisible && pageCount > 1 && (
+          <IconButton
+            disabled={page === pageCount - 1}
+            icon="caret-right"
+            onClick={() =>
+              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))
+            }
+          />
+        )}
       </div>
-    </>
+    </div>
   );
 };

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

@@ -1,15 +1,6 @@
 import { useEffect, useState } from 'react';
-
-import {
-  CallTypes,
-  combineComparators,
-  Comparator,
-  defaultSortPreset,
-  screenSharing,
-  SfuModels,
-  speakerLayoutSortPreset,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
+import clsx from 'clsx';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 
 import {
@@ -22,16 +13,23 @@ import {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
 } from '../../../hooks';
-import clsx from 'clsx';
+import { useSpeakerLayoutSortPreset } from './hooks';
+import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
+import { ParticipantsAudio } from '../Audio';
 
 export type SpeakerLayoutProps = {
   ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
   ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
   /**
-   * The position of the particpants who are not in focus.
+   * The position of the participants who are not in focus.
    * Providing `null` will hide the bar.
    */
   participantsBarPosition?: 'top' | 'bottom' | 'left' | 'right' | null;
+  /**
+   * Hard limits the number of the participants rendered in the participants bar.
+   * Providing string `dynamic` will calculate hard limit based on screen width/height.
+   */
+  participantsBarLimit?: 'dynamic' | number;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
 
 const DefaultParticipantViewUIBar = () => (
@@ -45,45 +43,61 @@ export const SpeakerLayout = ({
   ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight,
   VideoPlaceholder,
   participantsBarPosition = 'bottom',
+  participantsBarLimit,
 }: SpeakerLayoutProps) => {
   const call = useCall();
-  const { useParticipants } = useCallStateHooks();
+  const { useParticipants, useRemoteParticipants } = useCallStateHooks();
   const [participantInSpotlight, ...otherParticipants] = useParticipants();
-  const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
-    null,
+  const remoteParticipants = useRemoteParticipants();
+  const [participantsBarWrapperElement, setParticipantsBarWrapperElement] =
+    useState<HTMLDivElement | null>(null);
+  const [participantsBarElement, setParticipantsBarElement] =
+    useState<HTMLDivElement | null>(null);
+  const [buttonsWrapperElement, setButtonsWrapperElement] =
+    useState<HTMLDivElement | null>(null);
+
+  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
+  const hardLimit = useCalculateHardLimit(
+    buttonsWrapperElement,
+    participantsBarElement,
+    participantsBarLimit,
   );
-  const isOneOnOneCall = otherParticipants.length === 1;
+
+  const isVertical =
+    participantsBarPosition === 'left' || participantsBarPosition === 'right';
+  const isHorizontal =
+    participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
 
   useEffect(() => {
-    if (!scrollWrapper || !call) return;
+    if (!participantsBarWrapperElement || !call) return;
 
-    const cleanup = call.setViewport(scrollWrapper);
+    const cleanup = call.setViewport(participantsBarWrapperElement);
     return () => cleanup();
-  }, [scrollWrapper, call]);
+  }, [participantsBarWrapperElement, call]);
 
-  useEffect(() => {
-    if (!call) return;
-    // always show the remote participant in the spotlight
-    if (isOneOnOneCall) {
-      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
-    } else {
-      call.setSortParticipantsBy(speakerLayoutSortPreset);
-    }
-
-    return () => {
-      // reset the sorting to the default for the call type
-      const callConfig = CallTypes.get(call.type);
-      call.setSortParticipantsBy(
-        callConfig.options.sortParticipantsBy || defaultSortPreset,
-      );
-    };
-  }, [call, isOneOnOneCall]);
+  const isOneOnOneCall = otherParticipants.length === 1;
+  useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+
+  let participantsWithAppliedLimit = otherParticipants;
+
+  if (typeof participantsBarLimit !== 'undefined') {
+    const hardLimitToApply = isVertical
+      ? hardLimit.vertical
+      : hardLimit.horizontal;
+
+    participantsWithAppliedLimit = otherParticipants.slice(
+      0,
+      // subtract 1 if speaker is sharing screen as
+      // that one is rendered independently from otherParticipants array
+      hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0),
+    );
+  }
 
   if (!call) return null;
 
-  const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
   return (
     <div className="str-video__speaker-layout__wrapper">
+      <ParticipantsAudio participants={remoteParticipants} />
       <div
         className={clsx(
           'str-video__speaker-layout',
@@ -95,7 +109,7 @@ export const SpeakerLayout = ({
           {participantInSpotlight && (
             <ParticipantView
               participant={participantInSpotlight}
-              muteAudio={isSpeakerScreenSharing}
+              muteAudio={true}
               trackType={
                 isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack'
               }
@@ -104,13 +118,19 @@ export const SpeakerLayout = ({
             />
           )}
         </div>
-        {otherParticipants.length > 0 && participantsBarPosition && (
-          <div className="str-video__speaker-layout__participants-bar-buttons-wrapper">
+        {participantsWithAppliedLimit.length > 0 && participantsBarPosition && (
+          <div
+            ref={setButtonsWrapperElement}
+            className="str-video__speaker-layout__participants-bar-buttons-wrapper"
+          >
             <div
               className="str-video__speaker-layout__participants-bar-wrapper"
-              ref={setScrollWrapper}
+              ref={setParticipantsBarWrapperElement}
             >
-              <div className="str-video__speaker-layout__participants-bar">
+              <div
+                ref={setParticipantsBarElement}
+                className="str-video__speaker-layout__participants-bar"
+              >
                 {isSpeakerScreenSharing && (
                   <div
                     className="str-video__speaker-layout__participant-tile"
@@ -120,10 +140,11 @@ export const SpeakerLayout = ({
                       participant={participantInSpotlight}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      muteAudio={true}
                     />
                   </div>
                 )}
-                {otherParticipants.map((participant) => (
+                {participantsWithAppliedLimit.map((participant) => (
                   <div
                     className="str-video__speaker-layout__participant-tile"
                     key={participant.sessionId}
@@ -132,18 +153,21 @@ export const SpeakerLayout = ({
                       participant={participant}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      muteAudio={true}
                     />
                   </div>
                 ))}
               </div>
             </div>
-            {(participantsBarPosition === 'left' ||
-              participantsBarPosition === 'right') && (
-              <VerticalScrollButtons scrollWrapper={scrollWrapper} />
+            {isVertical && (
+              <VerticalScrollButtons
+                scrollWrapper={participantsBarWrapperElement}
+              />
             )}
-            {(participantsBarPosition === 'top' ||
-              participantsBarPosition === 'bottom') && (
-              <HorizontalScrollButtons scrollWrapper={scrollWrapper} />
+            {isHorizontal && (
+              <HorizontalScrollButtons
+                scrollWrapper={participantsBarWrapperElement}
+              />
             )}
           </div>
         )}
@@ -222,9 +246,3 @@ const VerticalScrollButtons = <T extends HTMLElement>({
 
 const hasScreenShare = (p?: StreamVideoParticipant) =>
   !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
-
-const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
-  if (a.isLocalParticipant) return 1;
-  if (b.isLocalParticipant) return -1;
-  return 0;
-};

package/src/core/components/CallLayout/hooks.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import {
+  Call,
+  CallTypes,
+  combineComparators,
+  Comparator,
+  defaultSortPreset,
+  paginatedLayoutSortPreset,
+  screenSharing,
+  speakerLayoutSortPreset,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+
+export const usePaginatedLayoutSortPreset = (call: Call | undefined) => {
+  useEffect(() => {
+    if (!call) return;
+    call.setSortParticipantsBy(paginatedLayoutSortPreset);
+    return () => {
+      resetSortPreset(call);
+    };
+  }, [call]);
+};
+
+export const useSpeakerLayoutSortPreset = (
+  call: Call | undefined,
+  isOneOnOneCall: boolean,
+) => {
+  useEffect(() => {
+    if (!call) return;
+    // always show the remote participant in the spotlight
+    if (isOneOnOneCall) {
+      call.setSortParticipantsBy(combineComparators(screenSharing, loggedIn));
+    } else {
+      call.setSortParticipantsBy(speakerLayoutSortPreset);
+    }
+    return () => {
+      resetSortPreset(call);
+    };
+  }, [call, isOneOnOneCall]);
+};
+
+const resetSortPreset = (call: Call) => {
+  // reset the sorting to the default for the call type
+  const callConfig = CallTypes.get(call.type);
+  call.setSortParticipantsBy(
+    callConfig.options.sortParticipantsBy || defaultSortPreset,
+  );
+};
+
+const loggedIn: Comparator<StreamVideoParticipant> = (a, b) => {
+  if (a.isLocalParticipant) return 1;
+  if (b.isLocalParticipant) return -1;
+  return 0;
+};

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

@@ -1,2 +1,3 @@
+export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';

package/src/core/hooks/useCalculateHardLimit.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+
+export const useCalculateHardLimit = (
+  /**
+   * Element that stretches to 100% of the whole layout component
+   */
+  wrapperElement: HTMLDivElement | null,
+  /**
+   * Element that directly hosts individual `ParticipantView` (or wrapper) elements
+   */
+  hostElement: HTMLDivElement | null,
+  limit?: 'dynamic' | number,
+) => {
+  const [calculatedLimit, setCalculatedLimit] = useState<{
+    vertical: number;
+    horizontal: number;
+  }>({
+    vertical: typeof limit === 'number' ? limit : 1,
+    horizontal: typeof limit === 'number' ? limit : 1,
+  });
+
+  useEffect(() => {
+    if (
+      !hostElement ||
+      !wrapperElement ||
+      typeof limit === 'number' ||
+      typeof limit === 'undefined'
+    )
+      return;
+
+    let childWidth: number | null = null;
+    let childHeight: number | null = null;
+
+    const resizeObserver = new ResizeObserver((entries, observer) => {
+      // this part should ideally run as little times as possible
+      // get child measurements and disconnect
+      // does not consider dynamically sized children
+      // this hook is for SpeakerLayout use only, where children in the bar are fixed size
+      if (entries.length > 1) {
+        const child = hostElement.firstChild as HTMLElement | null;
+
+        if (child) {
+          childHeight = child.clientHeight;
+          childWidth = child.clientWidth;
+          observer.unobserve(hostElement);
+        }
+      }
+
+      // keep the state at { vertical: 1, horizontal: 1 }
+      // until we get the proper child measurements
+      if (childHeight === null || childWidth === null) return;
+
+      const vertical = Math.floor(wrapperElement.clientHeight / childHeight);
+      const horizontal = Math.floor(wrapperElement.clientWidth / childWidth);
+
+      setCalculatedLimit((pv) => {
+        if (pv.vertical !== vertical || pv.horizontal !== horizontal)
+          return { vertical, horizontal };
+        return pv;
+      });
+    });
+
+    resizeObserver.observe(wrapperElement);
+    resizeObserver.observe(hostElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [hostElement, limit, wrapperElement]);
+
+  return calculatedLimit;
+};

package/src/translations/en.json

@@ -12,6 +12,8 @@
   "Video": "Video",
   "You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
 
+  "Live": "Live",
+
   "You can now speak.": "You can now speak.",
   "Awaiting for an approval to speak.": "Awaiting for an approval to speak.",
   "You can no longer speak.": "You can no longer speak.",