@stream-io/video-react-sdk 1.6.6 → 1.7.0

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

@@ -33,8 +33,8 @@ export type SpeakerLayoutProps = {
      * @default true
      */
     pageArrowsVisible?: boolean;
-} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
+} & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 export declare const SpeakerLayout: {
-    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -41,7 +41,7 @@ export type ParticipantViewProps = {
      * Custom class applied to the root DOM element.
      */
     className?: string;
-} & Pick<VideoProps, 'VideoPlaceholder'>;
+} & Pick<VideoProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 export declare const ParticipantView: import("react").ForwardRefExoticComponent<{
     /**
      * The participant whose video/audio stream we want to play.
@@ -82,4 +82,4 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
      * Custom class applied to the root DOM element.
      */
     className?: string;
-} & Pick<VideoProps, "VideoPlaceholder"> & import("react").RefAttributes<HTMLDivElement>>;
+} & Pick<VideoProps, "VideoPlaceholder" | "PictureInPicturePlaceholder"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,3 @@
+import { type BaseVideoPlaceholderProps } from './BaseVideoPlaceholder';
+export type PictureInPicturePlaceholderProps = BaseVideoPlaceholderProps;
+export declare const DefaultPictureInPicturePlaceholder: import("react").ForwardRefExoticComponent<Omit<BaseVideoPlaceholderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, ComponentType } from 'react';
 import { StreamVideoParticipant, VideoTrackType } from '@stream-io/video-client';
 import { VideoPlaceholderProps } from './DefaultVideoPlaceholder';
+import { PictureInPicturePlaceholderProps } from './DefaultPictureInPicturePlaceholder';
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
     /**
      * Pass false to disable rendering video and render fallback
@@ -28,6 +29,15 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
      * @default DefaultVideoPlaceholder
      */
     VideoPlaceholder?: ComponentType<VideoPlaceholderProps> | null;
+    /**
+     * Override the default UI that's dispayed in place of the video when it's playing
+     * in picture-in-picture. Set it to `null` if you wish to display the browser's default
+     * placeholder.
+     *
+     * @default DefaultPictureInPicturePlaceholder
+     */
+    PictureInPicturePlaceholder?: ComponentType<PictureInPicturePlaceholderProps> | null;
+    /**
     /**
      * An object with setRef functions
      * meant for exposing some of the internal elements of this component.
@@ -43,9 +53,10 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
          * @param element the video placeholder element.
          */
         setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
+        setPictureInPicturePlaceholderElement?: (element: HTMLDivElement | null) => void;
     };
 };
 export declare const Video: {
-    ({ enabled, mirror, trackType, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ enabled, mirror, trackType, participant, className, VideoPlaceholder, PictureInPicturePlaceholder, refs, ...rest }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -0,0 +1 @@
+export declare function usePictureInPictureState(videoElement?: HTMLVideoElement): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -32,9 +32,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.8.3",
+    "@stream-io/video-client": "1.9.0",
     "@stream-io/video-filters-web": "0.1.4",
-    "@stream-io/video-react-bindings": "1.1.3",
+    "@stream-io/video-react-bindings": "1.1.5",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"
@@ -48,7 +48,7 @@
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
     "@stream-io/audio-filters-web": "^0.2.2",
-    "@stream-io/video-styling": "^1.1.0",
+    "@stream-io/video-styling": "^1.1.1",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",

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

@@ -20,13 +20,17 @@ type PaginatedGridLayoutGroupProps = {
    * The group of participants to render.
    */
   group: Array<StreamVideoParticipant>;
-} & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'mirror'> &
+} & Pick<
+  ParticipantViewProps,
+  'VideoPlaceholder' | 'PictureInPicturePlaceholder' | 'mirror'
+> &
   Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
 
 const PaginatedGridLayoutGroup = ({
   group,
   mirror,
   VideoPlaceholder,
+  PictureInPicturePlaceholder,
   ParticipantViewUI,
 }: PaginatedGridLayoutGroupProps) => {
   return (
@@ -46,6 +50,7 @@ const PaginatedGridLayoutGroup = ({
           muteAudio
           mirror={mirror}
           VideoPlaceholder={VideoPlaceholder}
+          PictureInPicturePlaceholder={PictureInPicturePlaceholder}
           ParticipantViewUI={ParticipantViewUI}
         />
       ))}

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

@@ -51,7 +51,10 @@ export type SpeakerLayoutProps = {
    * @default true
    */
   pageArrowsVisible?: boolean;
-} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
+} & Pick<
+  ParticipantViewProps,
+  'VideoPlaceholder' | 'PictureInPicturePlaceholder'
+>;
 
 const DefaultParticipantViewUIBar = () => (
   <DefaultParticipantViewUI menuPlacement="top-end" />
@@ -61,6 +64,7 @@ export const SpeakerLayout = ({
   ParticipantViewUIBar = DefaultParticipantViewUIBar,
   ParticipantViewUISpotlight = DefaultParticipantViewUI,
   VideoPlaceholder,
+  PictureInPicturePlaceholder,
   participantsBarPosition = 'bottom',
   participantsBarLimit,
   mirrorLocalParticipantVideo = true,
@@ -151,6 +155,7 @@ export const SpeakerLayout = ({
               }
               ParticipantViewUI={ParticipantViewUISpotlight}
               VideoPlaceholder={VideoPlaceholder}
+              PictureInPicturePlaceholder={PictureInPicturePlaceholder}
             />
           )}
         </div>
@@ -176,6 +181,7 @@ export const SpeakerLayout = ({
                       participant={participantInSpotlight}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      PictureInPicturePlaceholder={PictureInPicturePlaceholder}
                       mirror={mirror}
                       muteAudio={true}
                     />
@@ -190,6 +196,7 @@ export const SpeakerLayout = ({
                       participant={participant}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      PictureInPicturePlaceholder={PictureInPicturePlaceholder}
                       mirror={mirror}
                       muteAudio={true}
                     />

package/src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx

@@ -14,6 +14,7 @@ import {
   useMenuContext,
 } from '../../../components/Menu';
 import { Icon } from '../../../components/Icon';
+import { usePictureInPictureState } from '../../hooks/usePictureInPictureState';
 
 export const ParticipantActionsContextMenu = () => {
   const { participant, participantViewElement, videoElement } =
@@ -21,10 +22,8 @@ export const ParticipantActionsContextMenu = () => {
   const [fullscreenModeOn, setFullscreenModeOn] = useState(
     !!document.fullscreenElement,
   );
-  const [pictureInPictureElement, setPictureInPictureElement] = useState(
-    document.pictureInPictureElement,
-  );
   const call = useCall();
+  const isPiP = usePictureInPictureState(videoElement ?? undefined);
   const { t } = useI18n();
 
   const { pin, sessionId, userId } = participant;
@@ -104,24 +103,8 @@ export const ParticipantActionsContextMenu = () => {
     };
   }, []);
 
-  useEffect(() => {
-    if (!videoElement) return;
-
-    const handlePiP = () => {
-      setPictureInPictureElement(document.pictureInPictureElement);
-    };
-
-    videoElement.addEventListener('enterpictureinpicture', handlePiP);
-    videoElement.addEventListener('leavepictureinpicture', handlePiP);
-
-    return () => {
-      videoElement.removeEventListener('enterpictureinpicture', handlePiP);
-      videoElement.removeEventListener('leavepictureinpicture', handlePiP);
-    };
-  }, [videoElement]);
-
   const togglePictureInPicture = () => {
-    if (videoElement && pictureInPictureElement !== videoElement) {
+    if (videoElement && !isPiP) {
       return videoElement
         .requestPictureInPicture()
         .catch(console.error) as Promise<void>;
@@ -198,10 +181,7 @@ export const ParticipantActionsContextMenu = () => {
       {videoElement && document.pictureInPictureEnabled && (
         <GenericMenuButtonItem onClick={togglePictureInPicture}>
           {t('{{ direction }} picture-in-picture', {
-            direction:
-              pictureInPictureElement === videoElement
-                ? t('Leave')
-                : t('Enter'),
+            direction: isPiP ? t('Leave') : t('Enter'),
           })}
         </GenericMenuButtonItem>
       )}

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -68,7 +68,7 @@ export type ParticipantViewProps = {
    * Custom class applied to the root DOM element.
    */
   className?: string;
-} & Pick<VideoProps, 'VideoPlaceholder'>;
+} & Pick<VideoProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 
 export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
   function ParticipantView(
@@ -80,6 +80,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
       refs: { setVideoElement, setVideoPlaceholderElement } = {},
       className,
       VideoPlaceholder,
+      PictureInPicturePlaceholder,
       ParticipantViewUI = DefaultParticipantViewUI as ComponentType,
     },
     ref,
@@ -175,6 +176,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
           )}
           <Video
             VideoPlaceholder={VideoPlaceholder}
+            PictureInPicturePlaceholder={PictureInPicturePlaceholder}
             participant={participant}
             trackType={trackType}
             refs={videoRefs}

package/src/core/components/Video/BaseVideoPlaceholder.tsx

@@ -0,0 +1,49 @@
+import { ComponentProps, RefAttributes, forwardRef, useState } from 'react';
+import type { StreamVideoParticipant } from '@stream-io/video-client';
+
+export type BaseVideoPlaceholderProps = {
+  participant: StreamVideoParticipant;
+} & RefAttributes<HTMLDivElement> &
+  ComponentProps<'div'>;
+
+export const BaseVideoPlaceholder = forwardRef<
+  HTMLDivElement,
+  BaseVideoPlaceholderProps
+>(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
+  const [error, setError] = useState(false);
+  const name = participant.name || participant.userId;
+  return (
+    <div className="str-video__video-placeholder" style={style} ref={ref}>
+      {(!participant.image || error) &&
+        (name ? (
+          <InitialsFallback name={name} />
+        ) : (
+          <div className="str-video__video-placeholder__no-video-label">
+            {children}
+          </div>
+        ))}
+      {participant.image && !error && (
+        <img
+          onError={() => setError(true)}
+          alt={name}
+          className="str-video__video-placeholder__avatar"
+          src={participant.image}
+        />
+      )}
+    </div>
+  );
+});
+
+const InitialsFallback = (props: { name: string }) => {
+  const { name } = props;
+  const initials = name
+    .split(' ')
+    .slice(0, 2)
+    .map((n) => n[0])
+    .join('');
+  return (
+    <div className="str-video__video-placeholder__initials-fallback">
+      {initials}
+    </div>
+  );
+};

package/src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import {
+  BaseVideoPlaceholder,
+  type BaseVideoPlaceholderProps,
+} from './BaseVideoPlaceholder';
+
+export type PictureInPicturePlaceholderProps = BaseVideoPlaceholderProps;
+
+export const DefaultPictureInPicturePlaceholder = forwardRef<
+  HTMLDivElement,
+  PictureInPicturePlaceholderProps
+>(function DefaultPictureInPicturePlaceholder(props, ref) {
+  const { t } = useI18n();
+  return (
+    <BaseVideoPlaceholder ref={ref} {...props}>
+      {t('Video is playing in a popup')}
+    </BaseVideoPlaceholder>
+  );
+});

package/src/core/components/Video/DefaultVideoPlaceholder.tsx

@@ -1,51 +1,20 @@
-import { ComponentProps, RefAttributes, forwardRef, useState } from 'react';
+import { forwardRef } from 'react';
 import { useI18n } from '@stream-io/video-react-bindings';
-import type { StreamVideoParticipant } from '@stream-io/video-client';
+import {
+  BaseVideoPlaceholder,
+  type BaseVideoPlaceholderProps,
+} from './BaseVideoPlaceholder';
 
-export type VideoPlaceholderProps = {
-  participant: StreamVideoParticipant;
-} & RefAttributes<HTMLDivElement> &
-  ComponentProps<'div'>;
+export type VideoPlaceholderProps = BaseVideoPlaceholderProps;
 
 export const DefaultVideoPlaceholder = forwardRef<
   HTMLDivElement,
   VideoPlaceholderProps
->(function DefaultVideoPlaceholder({ participant, style }, ref) {
+>(function DefaultVideoPlaceholder(props, ref) {
   const { t } = useI18n();
-  const [error, setError] = useState(false);
-  const name = participant.name || participant.userId;
   return (
-    <div className="str-video__video-placeholder" style={style} ref={ref}>
-      {(!participant.image || error) &&
-        (name ? (
-          <InitialsFallback name={name} />
-        ) : (
-          <div className="str-video__video-placeholder__no-video-label">
-            {t('Video is disabled')}
-          </div>
-        ))}
-      {participant.image && !error && (
-        <img
-          onError={() => setError(true)}
-          alt="video-placeholder"
-          className="str-video__video-placeholder__avatar"
-          src={participant.image}
-        />
-      )}
-    </div>
+    <BaseVideoPlaceholder ref={ref} {...props}>
+      {t('Video is disabled')}
+    </BaseVideoPlaceholder>
   );
 });
-
-const InitialsFallback = (props: { name: string }) => {
-  const { name } = props;
-  const initials = name
-    .split(' ')
-    .slice(0, 2)
-    .map((n) => n[0])
-    .join('');
-  return (
-    <div className="str-video__video-placeholder__initials-fallback">
-      {initials}
-    </div>
-  );
-};

package/src/core/components/Video/Video.tsx

@@ -18,6 +18,11 @@ import {
   VideoPlaceholderProps,
 } from './DefaultVideoPlaceholder';
 import { useCall } from '@stream-io/video-react-bindings';
+import { usePictureInPictureState } from '../../hooks/usePictureInPictureState';
+import {
+  DefaultPictureInPicturePlaceholder,
+  PictureInPicturePlaceholderProps,
+} from './DefaultPictureInPicturePlaceholder';
 
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
   /**
@@ -46,6 +51,15 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
    * @default DefaultVideoPlaceholder
    */
   VideoPlaceholder?: ComponentType<VideoPlaceholderProps> | null;
+  /**
+   * Override the default UI that's dispayed in place of the video when it's playing
+   * in picture-in-picture. Set it to `null` if you wish to display the browser's default
+   * placeholder.
+   *
+   * @default DefaultPictureInPicturePlaceholder
+   */
+  PictureInPicturePlaceholder?: ComponentType<PictureInPicturePlaceholderProps> | null;
+  /**
   /**
    * An object with setRef functions
    * meant for exposing some of the internal elements of this component.
@@ -61,6 +75,9 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
      * @param element the video placeholder element.
      */
     setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;
+    setPictureInPicturePlaceholderElement?: (
+      element: HTMLDivElement | null,
+    ) => void;
   };
 };
 
@@ -71,6 +88,7 @@ export const Video = ({
   participant,
   className,
   VideoPlaceholder = DefaultVideoPlaceholder,
+  PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder,
   refs,
   ...rest
 }: VideoProps) => {
@@ -90,6 +108,7 @@ export const Video = ({
   // start with true, will flip once the video starts playing
   const [isVideoPaused, setIsVideoPaused] = useState(true);
   const [isWideMode, setIsWideMode] = useState(true);
+  const isPiP = usePictureInPictureState(videoElement ?? undefined);
 
   const stream =
     trackType === 'videoTrack'
@@ -177,6 +196,12 @@ export const Video = ({
           }}
         />
       )}
+      {isPiP && (
+        <DefaultPictureInPicturePlaceholder
+          style={{ position: 'absolute' }}
+          participant={participant}
+        />
+      )}
       {/* TODO: add condition to "hold" the placeholder until track unmutes as well */}
       {(hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (
         <VideoPlaceholder

package/src/core/hooks/usePictureInPictureState.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+export function usePictureInPictureState(videoElement?: HTMLVideoElement) {
+  const [isPiP, setIsPiP] = useState(
+    document.pictureInPictureElement === videoElement,
+  );
+
+  if (!videoElement && isPiP) setIsPiP(false);
+
+  useEffect(() => {
+    if (!videoElement) return;
+
+    const handlePiP = () => {
+      setIsPiP(document.pictureInPictureElement === videoElement);
+    };
+
+    videoElement.addEventListener('enterpictureinpicture', handlePiP);
+    videoElement.addEventListener('leavepictureinpicture', handlePiP);
+
+    return () => {
+      videoElement.removeEventListener('enterpictureinpicture', handlePiP);
+      videoElement.removeEventListener('leavepictureinpicture', handlePiP);
+    };
+  }, [videoElement]);
+
+  return isPiP;
+}