@stream-io/video-react-sdk 0.0.1-alpha.33 → 0.0.1-alpha.35

package/dist/src/core/components/Video/VideoPlaceholder.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from 'react';
-import { StreamVideoParticipant } from '@stream-io/video-client';
+import { ComponentPropsWithRef } from 'react';
+import type { StreamVideoParticipant } from '@stream-io/video-client';
 export type VideoPlaceholderProps = {
     participant: StreamVideoParticipant;
-} & ComponentProps<'div'>;
+} & ComponentPropsWithRef<'div'>;
 export declare const VideoPlaceholder: import("react").ForwardRefExoticComponent<Omit<VideoPlaceholderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/core/components/Video/VideoPlaceholder.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
-import { clsx } from 'clsx';
 export const VideoPlaceholder = forwardRef(({ participant, style }, ref) => {
     const [error, setError] = useState(false);
     const name = (participant === null || participant === void 0 ? void 0 : participant.name) || (participant === null || participant === void 0 ? void 0 : participant.userId);
-    return (_jsxs("div", Object.assign({ className: "str-video__participant-placeholder", style: style, ref: ref }, { children: [(!participant.image || error) &&
-                (name ? (_jsx("div", Object.assign({ className: "str-video__participant-placeholder--initials-fallback" }, { children: _jsx("div", { children: name[0] }) }))) : (_jsx("div", { children: "Video is disabled" }))), participant.image && !error && (_jsx("img", { onError: () => setError(true), alt: "participant-placeholder", className: clsx('str-video__participant-placeholder--avatar', {
-                    'str-video__participant-placeholder--avatar-speaking': participant.isSpeaking,
-                }), src: participant.image }))] })));
+    return (_jsxs("div", Object.assign({ className: "str-video__video-placeholder", style: style, ref: ref }, { children: [(!participant.image || error) &&
+                (name ? (_jsx("div", Object.assign({ className: "str-video__video-placeholder__initials-fallback" }, { children: _jsx("div", { children: name[0] }) }))) : (_jsx("div", { children: "Video is disabled" }))), participant.image && !error && (_jsx("img", { onError: () => setError(true), alt: "video-placeholder", className: "str-video__video-placeholder__avatar", src: participant.image }))] })));
 });
 //# sourceMappingURL=VideoPlaceholder.js.map

package/dist/src/core/components/Video/VideoPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlaceholder.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/VideoPlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAO5B,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAGxC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,MAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAA,CAAC;IAEtD,OAAO,CACL,6BAAK,SAAS,EAAC,oCAAoC,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,iBACvE,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK,CAAC;gBAC5B,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,4BAAK,SAAS,EAAC,uDAAuD,gBACpE,wBAAM,IAAI,CAAC,CAAC,CAAC,GAAO,IAChB,CACP,CAAC,CAAC,CAAC,CACF,8CAA4B,CAC7B,CAAC,EACH,WAAW,CAAC,KAAK,IAAI,CAAC,KAAK,IAAI,CAC9B,cACE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,yBAAyB,EAC7B,SAAS,EAAE,IAAI,CAAC,4CAA4C,EAAE;oBAC5D,qDAAqD,EACnD,WAAW,CAAC,UAAU;iBACzB,CAAC,EACF,GAAG,EAAE,WAAW,CAAC,KAAK,GACtB,CACH,KACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"VideoPlaceholder.js","sourceRoot":"","sources":["../../../../../src/core/components/Video/VideoPlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyB,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAGxC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,MAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,CAAA,CAAC;IAEtD,OAAO,CACL,6BAAK,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,iBACjE,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK,CAAC;gBAC5B,CAAC,IAAI,CAAC,CAAC,CAAC,CACN,4BAAK,SAAS,EAAC,iDAAiD,gBAC9D,wBAAM,IAAI,CAAC,CAAC,CAAC,GAAO,IAChB,CACP,CAAC,CAAC,CAAC,CACF,8CAA4B,CAC7B,CAAC,EACH,WAAW,CAAC,KAAK,IAAI,CAAC,KAAK,IAAI,CAC9B,cACE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAC,mBAAmB,EACvB,SAAS,EAAC,sCAAsC,EAChD,GAAG,EAAE,WAAW,CAAC,KAAK,GACtB,CACH,KACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/src/core/components/index.d.ts

@@ -1,5 +1,5 @@
 export * from './Audio';
-export * from './ParticipantBox';
+export * from './ParticipantView';
 export { Video } from './Video';
-export type { VideoProps } from './Video';
+export type { BaseVideoProps, VideoProps } from './Video';
 export * from './CallLayout';

package/dist/src/core/components/index.js

@@ -1,5 +1,5 @@
 export * from './Audio';
-export * from './ParticipantBox';
+export * from './ParticipantView';
 export { Video } from './Video';
 export * from './CallLayout';
 //# sourceMappingURL=index.js.map

package/dist/src/core/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAElC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,cAAc,cAAc,CAAC"}

package/dist/src/core/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useAudioPublisher';
 export * from './useVideoPublisher';
+export * from './useTrackElementVisibility';

package/dist/src/core/hooks/index.js

@@ -1,3 +1,4 @@
 export * from './useAudioPublisher';
 export * from './useVideoPublisher';
+export * from './useTrackElementVisibility';
 //# sourceMappingURL=index.js.map

package/dist/src/core/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC"}

package/dist/src/core/hooks/useTrackElementVisibility.d.ts

@@ -0,0 +1,6 @@
+import { ViewportTracker } from '@stream-io/video-client';
+export declare const useTrackElementVisibility: <T extends HTMLElement>({ trackedElement, viewportTracker: propsViewportTracker, sessionId, }: {
+    trackedElement: T | null;
+    sessionId: string;
+    viewportTracker?: ViewportTracker | undefined;
+}) => void;

package/dist/src/core/hooks/useTrackElementVisibility.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { VisibilityState } from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+export const useTrackElementVisibility = ({ trackedElement, viewportTracker: propsViewportTracker, sessionId, }) => {
+    const call = useCall();
+    const viewportTracker = propsViewportTracker !== null && propsViewportTracker !== void 0 ? propsViewportTracker : call === null || call === void 0 ? void 0 : call.viewportTracker;
+    useEffect(() => {
+        if (!trackedElement || !viewportTracker || !call)
+            return;
+        const unobserve = viewportTracker.observe(trackedElement, (entry) => {
+            call.state.updateParticipant(sessionId, (p) => (Object.assign(Object.assign({}, p), { viewportVisibilityState: entry.isIntersecting
+                    ? VisibilityState.VISIBLE
+                    : VisibilityState.INVISIBLE })));
+        });
+        return () => {
+            unobserve();
+            // reset visibility state to UNKNOWN upon cleanup
+            // so that the layouts that are not actively observed
+            // can still function normally (runtime layout switching)
+            call.state.updateParticipant(sessionId, (p) => (Object.assign(Object.assign({}, p), { viewportVisibilityState: VisibilityState.UNKNOWN })));
+        };
+    }, [trackedElement, viewportTracker, call, sessionId]);
+};
+//# sourceMappingURL=useTrackElementVisibility.js.map

package/dist/src/core/hooks/useTrackElementVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackElementVisibility.js","sourceRoot":"","sources":["../../../../src/core/hooks/useTrackElementVisibility.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAmB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,eAAe,EAAE,oBAAoB,EACrC,SAAS,GAKV,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,eAAe,GAAG,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI;YAAE,OAAO;QAEzD,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;YAClE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB,EAAE,KAAK,CAAC,cAAc;oBAC3C,CAAC,CAAC,eAAe,CAAC,OAAO;oBACzB,CAAC,CAAC,eAAe,CAAC,SAAS,IAC7B,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,SAAS,EAAE,CAAC;YACZ,iDAAiD;YACjD,qDAAqD;YACrD,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iCAC1C,CAAC,KACJ,uBAAuB,EAAE,eAAe,CAAC,OAAO,IAChD,CAAC,CAAC;QACN,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC"}

package/dist/src/utilities/applyElementRef.d.ts

@@ -0,0 +1,2 @@
+import type { ForwardedRef } from 'react';
+export declare const applyElementRef: <T extends HTMLElement | null>(ref: ForwardedRef<T>, element: T) => void;

package/dist/src/utilities/applyElementRef.js

@@ -0,0 +1,8 @@
+export const applyElementRef = (ref, element) => {
+    if (!ref)
+        return;
+    if (typeof ref === 'function')
+        return ref(element);
+    ref.current = element;
+};
+//# sourceMappingURL=applyElementRef.js.map

package/dist/src/utilities/applyElementRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyElementRef.js","sourceRoot":"","sources":["../../../src/utilities/applyElementRef.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,GAAoB,EACpB,OAAU,EACV,EAAE;IACF,IAAI,CAAC,GAAG;QAAE,OAAO;IAEjB,IAAI,OAAO,GAAG,KAAK,UAAU;QAAE,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;IAEnD,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;AACxB,CAAC,CAAC"}

package/dist/src/utilities/chunk.d.ts

@@ -0,0 +1 @@
+export declare const chunk: <T extends unknown[]>(array: T, size: number) => T[];

package/dist/src/utilities/chunk.js

@@ -0,0 +1,5 @@
+export const chunk = (array, size) => {
+    const chunkCount = Math.ceil(array.length / size);
+    return Array.from({ length: chunkCount }, (_, index) => array.slice(size * index, size * index + size));
+};
+//# sourceMappingURL=chunk.js.map

package/dist/src/utilities/chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk.js","sourceRoot":"","sources":["../../../src/utilities/chunk.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAsB,KAAQ,EAAE,IAAY,EAAE,EAAE;IACnE,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAElD,OAAO,KAAK,CAAC,IAAI,CACf,EAAE,MAAM,EAAE,UAAU,EAAE,EACtB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAM,CAClE,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/utilities/index.d.ts

@@ -0,0 +1,3 @@
+export * from './isComponentType';
+export * from './chunk';
+export * from './applyElementRef';

package/dist/src/utilities/index.js

@@ -0,0 +1,4 @@
+export * from './isComponentType';
+export * from './chunk';
+export * from './applyElementRef';
+//# sourceMappingURL=index.js.map

package/dist/src/utilities/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}

package/dist/src/utilities/isComponentType.d.ts

@@ -0,0 +1,2 @@
+import { ComponentType, ReactElement } from 'react';
+export declare const isComponentType: <T extends {}>(elementOrComponent?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | ComponentType<T> | null | undefined) => elementOrComponent is ComponentType<T>;

package/dist/src/utilities/isComponentType.js

@@ -0,0 +1,7 @@
+import { isValidElement } from 'react';
+export const isComponentType = (elementOrComponent) => {
+    return elementOrComponent === null
+        ? false
+        : !isValidElement(elementOrComponent);
+};
+//# sourceMappingURL=isComponentType.js.map

package/dist/src/utilities/isComponentType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isComponentType.js","sourceRoot":"","sources":["../../../src/utilities/isComponentType.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAgB,MAAM,OAAO,CAAC;AAEpE,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,kBAA2D,EACnB,EAAE;IAC1C,OAAO,kBAAkB,KAAK,IAAI;QAChC,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAC1C,CAAC,CAAC"}

package/package.json

@@ -25,9 +25,9 @@
     "@floating-ui/react": "^0.22.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
-    "@stream-io/i18n": "^0.0.1-alpha.18",
-    "@stream-io/video-client": "^0.0.1-alpha.141",
-    "@stream-io/video-react-bindings": "^0.0.1-alpha.29",
+    "@stream-io/i18n": "^0.0.1-alpha.20",
+    "@stream-io/video-client": "^0.0.1-alpha.143",
+    "@stream-io/video-react-bindings": "^0.0.1-alpha.31",
     "clsx": "^1.2.1",
     "rxjs": "~7.8.1"
   },
@@ -36,7 +36,7 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@stream-io/video-styling": "^0.0.1-alpha.11",
+    "@stream-io/video-styling": "^0.0.1-alpha.13",
     "@types/rimraf": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -45,5 +45,5 @@
     "typedoc": "^0.24.7",
     "typescript": "^4.9.5"
   },
-  "version": "0.0.1-alpha.33"
+  "version": "0.0.1-alpha.35"
 }

package/src/components/Button/CompositeButton.tsx

@@ -1,14 +1,11 @@
 import clsx from 'clsx';
 import { MenuToggle, ToggleMenuButtonProps } from '../Menu';
-import {
-  ComponentType,
-  forwardRef,
-  isValidElement,
-  PropsWithChildren,
-} from 'react';
-import { IconButton } from './IconButton';
+import { ComponentType, forwardRef, PropsWithChildren } from 'react';
 import { Placement } from '@floating-ui/react';
 
+import { IconButton } from './IconButton';
+import { isComponentType } from '../../utilities';
+
 export type IconButtonWithMenuProps = PropsWithChildren<{
   active?: boolean;
   Menu?: ComponentType | JSX.Element;
@@ -16,12 +13,6 @@ export type IconButtonWithMenuProps = PropsWithChildren<{
   menuPlacement?: Placement;
 }>;
 
-const isComponentType = (
-  elementOrComponent: ComponentType | JSX.Element,
-): elementOrComponent is ComponentType => {
-  return !isValidElement(elementOrComponent);
-};
-
 export const CompositeButton = forwardRef<
   HTMLDivElement,
   IconButtonWithMenuProps

package/src/components/StreamCall/CallParticipantsScreenView.tsx

@@ -5,7 +5,7 @@ import {
   useLocalParticipant,
   useParticipants,
 } from '@stream-io/video-react-bindings';
-import { ParticipantBox } from '../../core/components/ParticipantBox/ParticipantBox';
+import { ParticipantView, DefaultParticipantViewUI } from '../../core';
 import { Video } from '../Video';
 
 import { useVerticalScrollPosition } from './hooks';
@@ -60,7 +60,6 @@ export const CallParticipantsScreenView = (props: { call: Call }) => {
               <Video
                 className="str-video__screen-share"
                 participant={firstScreenSharingParticipant}
-                call={call}
                 kind="screen"
                 autoPlay
                 muted
@@ -104,11 +103,11 @@ export const CallParticipantsScreenView = (props: { call: Call }) => {
         >
           <div className="str-video__call-participants-screen-view__participants">
             {allParticipants.map((participant) => (
-              <ParticipantBox
+              <ParticipantView
                 key={participant.sessionId}
                 participant={participant}
-                call={call}
                 sinkId={localParticipant?.audioOutputDeviceId}
+                ParticipantViewUI={DefaultParticipantViewUI}
               />
             ))}
           </div>

package/src/components/StreamCall/CallParticipantsView.tsx

@@ -1,23 +1,22 @@
 import { Call } from '@stream-io/video-client';
-import { ParticipantBox } from '../../core/components/ParticipantBox/ParticipantBox';
+import { DefaultParticipantViewUI, ParticipantView } from '../../core';
 import {
   useLocalParticipant,
   useParticipants,
 } from '@stream-io/video-react-bindings';
 
 export const CallParticipantsView = (props: { call: Call }) => {
-  const { call } = props;
   const localParticipant = useLocalParticipant();
   const participants = useParticipants();
   const grid = `str-video__grid-${participants.length || 1}`;
   return (
     <div className={`str-video__call-participants-view ${grid}`}>
       {participants.map((participant) => (
-        <ParticipantBox
+        <ParticipantView
           key={participant.sessionId}
           participant={participant}
-          call={call}
           sinkId={localParticipant?.audioOutputDeviceId}
+          ParticipantViewUI={DefaultParticipantViewUI}
         />
       ))}
     </div>

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

@@ -6,43 +6,38 @@ import {
   useRemoteParticipants,
 } from '@stream-io/video-react-bindings';
 import {
-  Call,
   StreamVideoLocalParticipant,
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import clsx from 'clsx';
 
-import { ParticipantBox } from '../ParticipantBox';
+import {
+  ParticipantView,
+  DefaultParticipantViewUI,
+  ParticipantViewProps,
+} from '../ParticipantView';
 import { Audio } from '../Audio';
 import { IconButton } from '../../../components';
+import { chunk } from '../../../utilities';
 
 const GROUP_SIZE = 16;
 
 type PaginatedGridLayoutGroupProps = {
-  /**
-   * The call object.
-   */
-  call: Call;
-
   /**
    * The group of participants to render.
    */
   group: Array<StreamVideoParticipant | StreamVideoLocalParticipant>;
+} & Pick<ParticipantViewProps, 'VideoPlaceholder'> &
+  Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
 
-  /**
-   * Turns on/off the status indicator icons (mute, connection quality, etc...)
-   * on the participant boxes.
-   */
-  indicatorsVisible?: boolean;
-};
 const PaginatedGridLayoutGroup = ({
-  call,
   group,
-  indicatorsVisible = true,
+  VideoPlaceholder,
+  ParticipantViewUI,
 }: PaginatedGridLayoutGroupProps) => {
   return (
     <div
-      className={clsx('str-video__paginated-grid-layout--group', {
+      className={clsx('str-video__paginated-grid-layout__group', {
         'str-video__paginated-grid-layout--one': group.length === 1,
         'str-video__paginated-grid-layout--two-four':
           group.length >= 2 && group.length <= 4,
@@ -51,12 +46,12 @@ const PaginatedGridLayoutGroup = ({
       })}
     >
       {group.map((participant) => (
-        <ParticipantBox
+        <ParticipantView
           key={participant.sessionId}
           participant={participant}
-          call={call}
-          indicatorsVisible={indicatorsVisible}
           muteAudio
+          VideoPlaceholder={VideoPlaceholder}
+          ParticipantViewUI={ParticipantViewUI}
         />
       ))}
     </div>
@@ -74,23 +69,18 @@ export type PaginatedGridLayoutProps = {
    */
   excludeLocalParticipant?: boolean;
 
-  /**
-   * Turns on/off the status indicator icons (mute, connection quality, etc...)
-   * on the participant boxes.
-   */
-  indicatorsVisible?: boolean;
-
   /**
    * Turns on/off the pagination arrows.
    */
   pageArrowsVisible?: boolean;
-};
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
 
 export const PaginatedGridLayout = ({
   groupSize = GROUP_SIZE,
   excludeLocalParticipant = false,
-  indicatorsVisible = true,
   pageArrowsVisible = true,
+  VideoPlaceholder,
+  ParticipantViewUI = DefaultParticipantViewUI,
 }: PaginatedGridLayoutProps) => {
   const [page, setPage] = useState(0);
 
@@ -122,6 +112,7 @@ export const PaginatedGridLayout = ({
   const selectedGroup = participantGroups[page];
 
   if (!call) return null;
+
   return (
     <>
       {remoteParticipants.map((participant) => (
@@ -132,7 +123,7 @@ export const PaginatedGridLayout = ({
           sinkId={localParticipant?.audioOutputDeviceId}
         />
       ))}
-      <div className="str-video__paginated-grid-layout--wrapper">
+      <div className="str-video__paginated-grid-layout__wrapper">
         <div className="str-video__paginated-grid-layout">
           {pageArrowsVisible && pageCount > 1 && (
             <IconButton
@@ -145,9 +136,9 @@ export const PaginatedGridLayout = ({
           )}
           {selectedGroup && (
             <PaginatedGridLayoutGroup
-              call={call}
               group={participantGroups[page]}
-              indicatorsVisible={indicatorsVisible}
+              VideoPlaceholder={VideoPlaceholder}
+              ParticipantViewUI={ParticipantViewUI}
             />
           )}
           {pageArrowsVisible && pageCount > 1 && (
@@ -166,13 +157,3 @@ export const PaginatedGridLayout = ({
     </>
   );
 };
-
-// TODO: move to utilities
-const chunk = <T extends unknown[]>(array: T, size = GROUP_SIZE) => {
-  const chunkCount = Math.ceil(array.length / size);
-
-  return Array.from(
-    { length: chunkCount },
-    (_, index) => array.slice(size * index, size * index + size) as T,
-  );
-};

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

@@ -16,11 +16,37 @@ import {
   useParticipants,
 } from '@stream-io/video-react-bindings';
 
-import { ParticipantBox } from '../ParticipantBox';
+import {
+  ParticipantView,
+  DefaultParticipantViewUI,
+  ParticipantViewProps,
+  ParticipantViewUIProps,
+} from '../ParticipantView';
 import { IconButton } from '../../../components';
 import { useHorizontalScrollPosition } from '../../../components/StreamCall/hooks';
 
-export const SpeakerLayout = () => {
+export type SpeakerLayoutProps = {
+  ParticipantViewUISpotlight?: ParticipantViewProps['ParticipantViewUI'];
+  ParticipantViewUIBar?: ParticipantViewProps['ParticipantViewUI'];
+} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
+
+const DefaultParticipantViewUIBar = ({
+  participant,
+}: ParticipantViewUIProps) => (
+  <DefaultParticipantViewUI participant={participant} menuPlacement="top-end" />
+);
+
+const DefaultParticipantViewUISpotlight = ({
+  participant,
+}: ParticipantViewUIProps) => (
+  <DefaultParticipantViewUI participant={participant} />
+);
+
+export const SpeakerLayout = ({
+  ParticipantViewUIBar = DefaultParticipantViewUIBar,
+  ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight,
+  VideoPlaceholder,
+}: SpeakerLayoutProps) => {
   const call = useCall();
   const [participantInSpotlight, ...otherParticipants] = useParticipants();
   const [scrollWrapper, setScrollWrapper] = useState<HTMLDivElement | null>(
@@ -69,56 +95,57 @@ export const SpeakerLayout = () => {
 
   const isSpeakerScreenSharing = hasScreenShare(participantInSpotlight);
   return (
-    <div className="str-video__speaker-layout--wrapper">
+    <div className="str-video__speaker-layout__wrapper">
       <div className="str-video__speaker-layout">
-        <div className="str-video__speaker-layout--spotlight">
+        <div className="str-video__speaker-layout__spotlight">
           {participantInSpotlight && (
-            <ParticipantBox
+            <ParticipantView
               participant={participantInSpotlight}
-              call={call}
               muteAudio={isSpeakerScreenSharing}
               videoKind={isSpeakerScreenSharing ? 'screen' : 'video'}
               sinkId={localParticipant?.audioOutputDeviceId}
+              ParticipantViewUI={ParticipantViewUISpotlight}
+              VideoPlaceholder={VideoPlaceholder}
             />
           )}
         </div>
         {otherParticipants.length > 0 && (
-          <div className="str-video__speaker-layout--participants-bar-buttons-wrapper">
+          <div className="str-video__speaker-layout__participants-bar-buttons-wrapper">
             {scrollPosition && scrollPosition !== 'start' && (
               <IconButton
                 onClick={scrollStartClickHandler}
                 icon="caret-left"
-                className="str-video__speaker-layout--participants-bar-button-left"
+                className="str-video__speaker-layout__participants-bar--button-left"
               />
             )}
             <div
-              className="str-video__speaker-layout--participants-bar-wrapper"
+              className="str-video__speaker-layout__participants-bar-wrapper"
               ref={setScrollWrapper}
             >
-              <div className="str-video__speaker-layout--participants-bar">
+              <div className="str-video__speaker-layout__participants-bar">
                 {isSpeakerScreenSharing && (
                   <div
-                    className="str-video__speaker-layout--participant-tile"
+                    className="str-video__speaker-layout__participant-tile"
                     key={participantInSpotlight.sessionId}
                   >
-                    <ParticipantBox
+                    <ParticipantView
                       participant={participantInSpotlight}
-                      call={call}
                       sinkId={localParticipant?.audioOutputDeviceId}
-                      toggleMenuPosition="top"
+                      ParticipantViewUI={ParticipantViewUIBar}
+                      VideoPlaceholder={VideoPlaceholder}
                     />
                   </div>
                 )}
                 {otherParticipants.map((participant) => (
                   <div
-                    className="str-video__speaker-layout--participant-tile"
+                    className="str-video__speaker-layout__participant-tile"
                     key={participant.sessionId}
                   >
-                    <ParticipantBox
+                    <ParticipantView
                       participant={participant}
-                      call={call}
                       sinkId={localParticipant?.audioOutputDeviceId}
-                      toggleMenuPosition="top"
+                      ParticipantViewUI={ParticipantViewUIBar}
+                      VideoPlaceholder={VideoPlaceholder}
                     />
                   </div>
                 ))}
@@ -128,7 +155,7 @@ export const SpeakerLayout = () => {
               <IconButton
                 onClick={scrollEndClickHandler}
                 icon="caret-right"
-                className="str-video__speaker-layout--participants-bar-button-right"
+                className="str-video__speaker-layout__participants-bar--button-right"
               />
             )}
           </div>