@stream-io/video-react-sdk 1.3.0 → 1.3.2

package/dist/src/core/components/CallLayout/PaginatedGridLayout.d.ts

@@ -6,10 +6,12 @@ export type PaginatedGridLayoutProps = {
     groupSize?: number;
     /**
      * Whether to exclude the local participant from the grid.
+     * @default false
      */
     excludeLocalParticipant?: boolean;
     /**
      * Turns on/off the pagination arrows.
+     * @default true
      */
     pageArrowsVisible?: boolean;
 } & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;

package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts

@@ -1,6 +1,12 @@
 import { ParticipantViewProps } from '../ParticipantView';
 export type SpeakerLayoutProps = {
+    /**
+     * The UI to be used for the participant in the spotlight.
+     */
     ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
+    /**
+     * The UI to be used for the participants in the participants bar.
+     */
     ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
     /**
      * The position of the participants who are not in focus.
@@ -12,8 +18,18 @@ export type SpeakerLayoutProps = {
      * Providing string `dynamic` will calculate hard limit based on screen width/height.
      */
     participantsBarLimit?: 'dynamic' | number;
+    /**
+     * When set to `true` will exclude the local participant from layout.
+     * @default false
+     */
+    excludeLocalParticipant?: boolean;
+    /**
+     * Turns on/off the pagination arrows.
+     * @default true
+     */
+    pageArrowsVisible?: boolean;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
 export declare const SpeakerLayout: {
-    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -29,9 +29,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@stream-io/video-client": "1.6.0",
+    "@stream-io/video-client": "1.6.1",
     "@stream-io/video-filters-web": "0.1.3",
-    "@stream-io/video-react-bindings": "1.0.0",
+    "@stream-io/video-react-bindings": "1.0.1",
     "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"

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

@@ -59,11 +59,13 @@ export type PaginatedGridLayoutProps = {
 
   /**
    * Whether to exclude the local participant from the grid.
+   * @default false
    */
   excludeLocalParticipant?: boolean;
 
   /**
    * Turns on/off the pagination arrows.
+   * @default true
    */
   pageArrowsVisible?: boolean;
 } & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
@@ -87,7 +89,6 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
   const call = useCall();
   const { useParticipants, useRemoteParticipants } = useCallStateHooks();
   const participants = useParticipants();
-  // used to render audio elements
   const remoteParticipants = useRemoteParticipants();
 
   usePaginatedLayoutSortPreset(call);
@@ -141,7 +142,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
         )}
         {selectedGroup && (
           <PaginatedGridLayoutGroup
-            group={participantGroups[page]}
+            group={selectedGroup}
             VideoPlaceholder={VideoPlaceholder}
             ParticipantViewUI={ParticipantViewUI}
           />

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

@@ -18,7 +18,13 @@ import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
 import { ParticipantsAudio } from '../Audio';
 
 export type SpeakerLayoutProps = {
+  /**
+   * The UI to be used for the participant in the spotlight.
+   */
   ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
+  /**
+   * The UI to be used for the participants in the participants bar.
+   */
   ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
   /**
    * The position of the participants who are not in focus.
@@ -30,25 +36,38 @@ export type SpeakerLayoutProps = {
    * Providing string `dynamic` will calculate hard limit based on screen width/height.
    */
   participantsBarLimit?: 'dynamic' | number;
+  /**
+   * When set to `true` will exclude the local participant from layout.
+   * @default false
+   */
+  excludeLocalParticipant?: boolean;
+  /**
+   * Turns on/off the pagination arrows.
+   * @default true
+   */
+  pageArrowsVisible?: boolean;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
 
 const DefaultParticipantViewUIBar = () => (
   <DefaultParticipantViewUI menuPlacement="top-end" />
 );
 
-const DefaultParticipantViewUISpotlight = () => <DefaultParticipantViewUI />;
-
 export const SpeakerLayout = ({
   ParticipantViewUIBar = DefaultParticipantViewUIBar,
-  ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight,
+  ParticipantViewUISpotlight = DefaultParticipantViewUI,
   VideoPlaceholder,
   participantsBarPosition = 'bottom',
   participantsBarLimit,
+  excludeLocalParticipant = false,
+  pageArrowsVisible = true,
 }: SpeakerLayoutProps) => {
   const call = useCall();
   const { useParticipants, useRemoteParticipants } = useCallStateHooks();
-  const [participantInSpotlight, ...otherParticipants] = useParticipants();
+  const allParticipants = useParticipants();
   const remoteParticipants = useRemoteParticipants();
+  const [participantInSpotlight, ...otherParticipants] = excludeLocalParticipant
+    ? remoteParticipants
+    : allParticipants;
   const [participantsBarWrapperElement, setParticipantsBarWrapperElement] =
     useState<HTMLDivElement | null>(null);
   const [participantsBarElement, setParticipantsBarElement] =
@@ -77,7 +96,7 @@ export const SpeakerLayout = ({
     return () => cleanup();
   }, [participantsBarWrapperElement, call]);
 
-  const isOneOnOneCall = otherParticipants.length === 1;
+  const isOneOnOneCall = allParticipants.length === 2;
   useSpeakerLayoutSortPreset(call, isOneOnOneCall);
 
   let participantsWithAppliedLimit = otherParticipants;
@@ -164,12 +183,12 @@ export const SpeakerLayout = ({
                 ))}
               </div>
             </div>
-            {isVertical && (
+            {pageArrowsVisible && isVertical && (
               <VerticalScrollButtons
                 scrollWrapper={participantsBarWrapperElement}
               />
             )}
-            {isHorizontal && (
+            {pageArrowsVisible && isHorizontal && (
               <HorizontalScrollButtons
                 scrollWrapper={participantsBarWrapperElement}
               />