@stream-io/video-react-sdk 1.14.0 → 1.14.2

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

@@ -39,7 +39,11 @@ export type PaginatedGridLayoutProps = {
      * @default true
      */
     pageArrowsVisible?: boolean;
-} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
+    /**
+     * Whether the layout is muted. Defaults to `false`.
+     */
+    muted?: boolean;
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 export declare const PaginatedGridLayout: {
     (props: PaginatedGridLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;

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

@@ -0,0 +1,43 @@
+import { ParticipantViewProps } from '../ParticipantView';
+import { ParticipantFilter, ParticipantPredicate } from './hooks';
+export type PipLayoutProps = {
+    /**
+     * Whether to exclude the local participant from the grid.
+     * @default false
+     */
+    excludeLocalParticipant?: boolean;
+    /**
+     * Predicate to filter call participants or a filter object.
+     * @example
+     * // With a predicate:
+     * <PipLayout
+     *   filterParticipants={p => p.roles.includes('student')}
+     * />
+     * @example
+     * // With a filter object:
+     * <PipLayout
+     *   filterParticipants={{
+     *     $or: [
+     *       { roles: { $contains: 'student' } },
+     *       { isPinned: true },
+     *     ],
+     *   }}
+     * />
+     */
+    filterParticipants?: ParticipantPredicate | ParticipantFilter;
+    /**
+     * When set to `false` disables mirroring of the local partipant's video.
+     * @default true
+     */
+    mirrorLocalParticipantVideo?: boolean;
+} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
+export declare const PipLayout: {
+    Pip: {
+        (props: PipLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    Host: {
+        (): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

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

@@ -53,8 +53,12 @@ export type SpeakerLayoutProps = {
      * @default true
      */
     pageArrowsVisible?: boolean;
+    /**
+     * Whether the layout is muted. Defaults to `false`.
+     */
+    muted?: boolean;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 export declare const SpeakerLayout: {
-    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, filterParticipants, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, filterParticipants, pageArrowsVisible, muted, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -2,6 +2,8 @@ import { Call, StreamVideoParticipant } from '@stream-io/video-client';
 import { Filter } from '../../../utilities/filter';
 export type FilterableParticipant = Pick<StreamVideoParticipant, 'userId' | 'isSpeaking' | 'isDominantSpeaker' | 'name' | 'roles'> & {
     isPinned: boolean;
+    hasVideo: boolean;
+    hasAudio: boolean;
 };
 export type ParticipantFilter = Filter<FilterableParticipant>;
 export type ParticipantPredicate = (paritcipant: StreamVideoParticipant) => boolean;

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

@@ -1,4 +1,6 @@
 export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
+export * from './PipLayout';
+export { useFilteredParticipants } from './hooks';
 export type { FilterableParticipant, ParticipantFilter, ParticipantPredicate, } from './hooks';

package/dist/src/hooks/useFloatingUIPreset.d.ts

@@ -12,12 +12,12 @@ export declare const useFloatingUIPreset: ({ middleware, placement, strategy, of
     y: number;
     domReference: Element | null;
     floating: HTMLElement | null;
-    strategy: import("@floating-ui/utils").Strategy | undefined;
+    strategy: import("@floating-ui/react").Strategy | undefined;
     context: {
         x: number;
         y: number;
-        placement: import("@floating-ui/utils").Placement;
-        strategy: import("@floating-ui/utils").Strategy;
+        placement: import("@floating-ui/react").Placement;
+        strategy: import("@floating-ui/react").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
         update: () => void;
@@ -27,7 +27,7 @@ export declare const useFloatingUIPreset: ({ middleware, placement, strategy, of
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
-        floatingId: string;
+        floatingId: string | undefined;
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -29,10 +29,10 @@
     "*.css"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.19.0",
+    "@floating-ui/react": "^0.27.6",
+    "@stream-io/video-client": "1.19.2",
     "@stream-io/video-filters-web": "0.1.7",
-    "@stream-io/video-react-bindings": "1.5.12",
+    "@stream-io/video-react-bindings": "1.5.14",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -46,7 +46,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
     "@stream-io/audio-filters-web": "^0.2.3",
-    "@stream-io/video-styling": "^1.1.2",
+    "@stream-io/video-styling": "^1.1.3",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",

package/src/components/Menu/MenuToggle.tsx

@@ -98,6 +98,8 @@ export const MenuToggle = <E extends HTMLElement>({
   });
 
   useEffect(() => {
+    const parentDocument = domReference?.ownerDocument;
+
     const handleClick = (event: MouseEvent) => {
       if (!floating && domReference?.contains(event.target as Node)) {
         setMenuShown(true);
@@ -119,11 +121,13 @@ export const MenuToggle = <E extends HTMLElement>({
         toggleHandler.current?.(false);
       }
     };
-    document?.addEventListener('click', handleClick, { capture: true });
-    document?.addEventListener('keydown', handleKeyDown);
+    parentDocument?.addEventListener('click', handleClick, { capture: true });
+    parentDocument?.addEventListener('keydown', handleKeyDown);
     return () => {
-      document?.removeEventListener('click', handleClick, { capture: true });
-      document?.removeEventListener('keydown', handleKeyDown);
+      parentDocument?.removeEventListener('click', handleClick, {
+        capture: true,
+      });
+      parentDocument?.removeEventListener('keydown', handleKeyDown);
     };
   }, [floating, domReference]);
 

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

@@ -106,7 +106,15 @@ export type PaginatedGridLayoutProps = {
    * @default true
    */
   pageArrowsVisible?: boolean;
-} & Pick<ParticipantViewProps, 'ParticipantViewUI' | 'VideoPlaceholder'>;
+
+  /**
+   * Whether the layout is muted. Defaults to `false`.
+   */
+  muted?: boolean;
+} & Pick<
+  ParticipantViewProps,
+  'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'
+>;
 
 export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
   const {
@@ -119,6 +127,8 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
     pageArrowsVisible = true,
     VideoPlaceholder,
     ParticipantViewUI = DefaultParticipantViewUI,
+    PictureInPicturePlaceholder,
+    muted,
   } = props;
   const [page, setPage] = useState(0);
   const [
@@ -169,7 +179,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
       className="str-video__paginated-grid-layout__wrapper"
       ref={setPaginatedGridLayoutWrapperElement}
     >
-      <ParticipantsAudio participants={remoteParticipants} />
+      {!muted && <ParticipantsAudio participants={remoteParticipants} />}
       <div className="str-video__paginated-grid-layout">
         {pageArrowsVisible && pageCount > 1 && (
           <IconButton
@@ -186,6 +196,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
             mirror={mirror}
             VideoPlaceholder={VideoPlaceholder}
             ParticipantViewUI={ParticipantViewUI}
+            PictureInPicturePlaceholder={PictureInPicturePlaceholder}
           />
         )}
         {pageArrowsVisible && pageCount > 1 && (

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

@@ -0,0 +1,110 @@
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useEffect, useState } from 'react';
+
+import { ParticipantsAudio } from '../Audio';
+import {
+  DefaultParticipantViewUI,
+  ParticipantView,
+  ParticipantViewProps,
+} from '../ParticipantView';
+import {
+  ParticipantFilter,
+  ParticipantPredicate,
+  useFilteredParticipants,
+  usePaginatedLayoutSortPreset,
+} from './hooks';
+
+export type PipLayoutProps = {
+  /**
+   * Whether to exclude the local participant from the grid.
+   * @default false
+   */
+  excludeLocalParticipant?: boolean;
+
+  /**
+   * Predicate to filter call participants or a filter object.
+   * @example
+   * // With a predicate:
+   * <PipLayout
+   *   filterParticipants={p => p.roles.includes('student')}
+   * />
+   * @example
+   * // With a filter object:
+   * <PipLayout
+   *   filterParticipants={{
+   *     $or: [
+   *       { roles: { $contains: 'student' } },
+   *       { isPinned: true },
+   *     ],
+   *   }}
+   * />
+   */
+  filterParticipants?: ParticipantPredicate | ParticipantFilter;
+
+  /**
+   * When set to `false` disables mirroring of the local partipant's video.
+   * @default true
+   */
+  mirrorLocalParticipantVideo?: boolean;
+} & Pick<
+  ParticipantViewProps,
+  'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'
+>;
+
+const Pip = (props: PipLayoutProps) => {
+  const {
+    excludeLocalParticipant = false,
+    filterParticipants,
+    mirrorLocalParticipantVideo = true,
+    VideoPlaceholder,
+    ParticipantViewUI = DefaultParticipantViewUI,
+    PictureInPicturePlaceholder,
+  } = props;
+  const [layoutWrapperElement, setLayoutWrapperElement] =
+    useState<HTMLDivElement | null>(null);
+
+  const call = useCall();
+  const participants = useFilteredParticipants({
+    excludeLocalParticipant,
+    filterParticipants,
+  });
+
+  usePaginatedLayoutSortPreset(call);
+
+  useEffect(() => {
+    if (!layoutWrapperElement || !call) return;
+    return call.setViewport(layoutWrapperElement);
+  }, [layoutWrapperElement, call]);
+
+  const mirror = mirrorLocalParticipantVideo ? undefined : false;
+
+  if (!call) return null;
+
+  return (
+    <div className="str-video__pip-layout" ref={setLayoutWrapperElement}>
+      {participants.map((participant) => (
+        <ParticipantView
+          key={participant.sessionId}
+          participant={participant}
+          muteAudio
+          mirror={mirror}
+          VideoPlaceholder={VideoPlaceholder}
+          PictureInPicturePlaceholder={PictureInPicturePlaceholder}
+          ParticipantViewUI={ParticipantViewUI}
+        />
+      ))}
+    </div>
+  );
+};
+
+Pip.displayName = 'PipLayout.Pip';
+
+const Host = () => {
+  const { useRemoteParticipants } = useCallStateHooks();
+  const remoteParticipants = useRemoteParticipants();
+  return <ParticipantsAudio participants={remoteParticipants} />;
+};
+
+Host.displayName = 'PipLayout.Host';
+
+export const PipLayout = { Pip, Host };

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

@@ -27,25 +27,30 @@ 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.
    * 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;
+
   /**
    * When set to `true` will exclude the local participant from layout.
    * @default false
    */
   excludeLocalParticipant?: boolean;
+
   /**
    * Predicate to filter call participants or a filter object.
    * @example
@@ -65,16 +70,23 @@ export type SpeakerLayoutProps = {
    * />
    */
   filterParticipants?: ParticipantPredicate | ParticipantFilter;
+
   /**
    * When set to `false` disables mirroring of the local participant's video.
    * @default true
    */
   mirrorLocalParticipantVideo?: boolean;
+
   /**
    * Turns on/off the pagination arrows.
    * @default true
    */
   pageArrowsVisible?: boolean;
+
+  /**
+   * Whether the layout is muted. Defaults to `false`.
+   */
+  muted?: boolean;
 } & Pick<
   ParticipantViewProps,
   'VideoPlaceholder' | 'PictureInPicturePlaceholder'
@@ -95,6 +107,7 @@ export const SpeakerLayout = ({
   excludeLocalParticipant = false,
   filterParticipants,
   pageArrowsVisible = true,
+  muted,
 }: SpeakerLayoutProps) => {
   const call = useCall();
   const { useParticipants, useRemoteParticipants } = useCallStateHooks();
@@ -160,7 +173,7 @@ export const SpeakerLayout = ({
     (participantsWithAppliedLimit.length > 0 || isSpeakerScreenSharing);
   return (
     <div className="str-video__speaker-layout__wrapper">
-      <ParticipantsAudio participants={remoteParticipants} />
+      {!muted && <ParticipantsAudio participants={remoteParticipants} />}
       <div
         className={clsx(
           'str-video__speaker-layout',

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

@@ -5,6 +5,8 @@ import {
   combineComparators,
   Comparator,
   defaultSortPreset,
+  hasAudio,
+  hasVideo,
   isPinned,
   paginatedLayoutSortPreset,
   screenSharing,
@@ -17,7 +19,11 @@ import { applyFilter, Filter } from '../../../utilities/filter';
 export type FilterableParticipant = Pick<
   StreamVideoParticipant,
   'userId' | 'isSpeaking' | 'isDominantSpeaker' | 'name' | 'roles'
-> & { isPinned: boolean };
+> & {
+  isPinned: boolean;
+  hasVideo: boolean;
+  hasAudio: boolean;
+};
 
 export type ParticipantFilter = Filter<FilterableParticipant>;
 export type ParticipantPredicate = (
@@ -66,6 +72,8 @@ export const applyParticipantsFilter = (
               name: participant.name,
               roles: participant.roles,
               isPinned: isPinned(participant),
+              hasVideo: hasVideo(participant),
+              hasAudio: hasAudio(participant),
             },
             filter,
           );

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

@@ -1,6 +1,8 @@
 export * from './LivestreamLayout';
 export * from './PaginatedGridLayout';
 export * from './SpeakerLayout';
+export * from './PipLayout';
+export { useFilteredParticipants } from './hooks';
 export type {
   FilterableParticipant,
   ParticipantFilter,