@stream-io/video-react-sdk 1.41.0 → 2.0.0-beta.0

package/dist/esm/src/core/components/StreamCall/StreamCall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamCall.js","sources":["../../../../../../../../src/core/components/StreamCall/StreamCall.tsx"],"sourcesContent":["import { ComponentType, PropsWithChildren } from 'react';\nimport {\n  StreamCallProvider,\n  StreamCallProviderProps,\n} from '@stream-io/video-react-bindings';\n\n// re-exporting the StreamCallProvider as StreamCall\nexport const StreamCall: ComponentType<\n  PropsWithChildren<StreamCallProviderProps>\n> = StreamCallProvider;\n\nStreamCall.displayName = 'StreamCall';\n"],"names":[],"mappings":";;AAMA;AACO,MAAM,UAAU,GAEnB;AAEJ,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/src/core/components/StreamVideo/StreamVideo.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { StreamVideoProvider } from '@stream-io/video-react-bindings';
+import { translations } from '../../../translations/index.js';
+
+const StreamVideo = (props) => {
+    return (jsx(StreamVideoProvider, { translationsOverrides: translations, ...props }));
+};
+StreamVideo.displayName = 'StreamVideo';
+
+export { StreamVideo };
+//# sourceMappingURL=StreamVideo.js.map

package/dist/esm/src/core/components/StreamVideo/StreamVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamVideo.js","sources":["../../../../../../../../src/core/components/StreamVideo/StreamVideo.tsx"],"sourcesContent":["import {\n  StreamVideoProps,\n  StreamVideoProvider,\n} from '@stream-io/video-react-bindings';\nimport { PropsWithChildren } from 'react';\nimport { translations } from '../../../translations';\n\nexport const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {\n  return (\n    <StreamVideoProvider translationsOverrides={translations} {...props} />\n  );\n};\n\nStreamVideo.displayName = 'StreamVideo';\n"],"names":["_jsx"],"mappings":";;;;AAOO,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;IACxE,QACEA,GAAA,CAAC,mBAAmB,EAAA,EAAC,qBAAqB,EAAE,YAAY,EAAA,GAAM,KAAK,EAAA,CAAI;AAE3E;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/src/core/components/Video/BaseVideo.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { Browsers } from '@stream-io/video-client';
+import { applyElementToRef } from '../../../utilities/applyElementToRef.js';
+
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+const BaseVideo = forwardRef(function BaseVideoRender({ stream, ...rest }, ref) {
+    const [videoElement, setVideoElement] = useState(null);
+    useEffect(() => {
+        if (!videoElement || !stream)
+            return;
+        if (stream === videoElement.srcObject)
+            return;
+        videoElement.srcObject = stream;
+        let timeoutId;
+        if (Browsers.isSafari() || Browsers.isFirefox()) {
+            // Firefox and Safari have some timing issue
+            timeoutId = setTimeout(() => {
+                videoElement.srcObject = stream;
+                videoElement.play().catch((e) => {
+                    console.error(`Failed to play stream`, e);
+                });
+            }, 0);
+        }
+        return () => {
+            clearTimeout(timeoutId);
+            videoElement.pause();
+            videoElement.srcObject = null;
+        };
+    }, [stream, videoElement]);
+    return (jsx("video", { autoPlay: true, playsInline: true, ...rest, ref: (element) => {
+            applyElementToRef(ref, element);
+            setVideoElement(element);
+        } }));
+});
+
+export { BaseVideo };
+//# sourceMappingURL=BaseVideo.js.map

package/dist/esm/src/core/components/Video/BaseVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVideo.js","sources":["../../../../../../../../src/core/components/Video/BaseVideo.tsx"],"sourcesContent":["import { ComponentPropsWithRef, forwardRef, useEffect, useState } from 'react';\nimport { Browsers } from '@stream-io/video-client';\n\nimport { applyElementToRef } from '../../../utilities';\n\nexport type BaseVideoProps = ComponentPropsWithRef<'video'> & {\n  stream?: MediaStream;\n};\n\n/**\n * @description Extends video element with `stream` property\n * (`srcObject`) to reactively handle stream changes\n */\nexport const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(\n  function BaseVideoRender({ stream, ...rest }, ref) {\n    const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(\n      null,\n    );\n\n    useEffect(() => {\n      if (!videoElement || !stream) return;\n      if (stream === videoElement.srcObject) return;\n\n      videoElement.srcObject = stream;\n      let timeoutId: ReturnType<typeof setTimeout> | undefined;\n      if (Browsers.isSafari() || Browsers.isFirefox()) {\n        // Firefox and Safari have some timing issue\n        timeoutId = setTimeout(() => {\n          videoElement.srcObject = stream;\n          videoElement.play().catch((e) => {\n            console.error(`Failed to play stream`, e);\n          });\n        }, 0);\n      }\n\n      return () => {\n        clearTimeout(timeoutId);\n        videoElement.pause();\n        videoElement.srcObject = null;\n      };\n    }, [stream, videoElement]);\n\n    return (\n      <video\n        autoPlay\n        playsInline\n        {...rest}\n        ref={(element) => {\n          applyElementToRef(ref, element);\n          setVideoElement(element);\n        }}\n      />\n    );\n  },\n);\n"],"names":["_jsx"],"mappings":";;;;;AASA;;;AAGG;AACI,MAAM,SAAS,GAAG,UAAU,CACjC,SAAS,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAA;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;IAED,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM;YAAE;AAC9B,QAAA,IAAI,MAAM,KAAK,YAAY,CAAC,SAAS;YAAE;AAEvC,QAAA,YAAY,CAAC,SAAS,GAAG,MAAM;AAC/B,QAAA,IAAI,SAAoD;QACxD,IAAI,QAAQ,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC,SAAS,EAAE,EAAE;;AAE/C,YAAA,SAAS,GAAG,UAAU,CAAC,MAAK;AAC1B,gBAAA,YAAY,CAAC,SAAS,GAAG,MAAM;gBAC/B,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAI;AAC9B,oBAAA,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC;AAC3C,gBAAA,CAAC,CAAC;YACJ,CAAC,EAAE,CAAC,CAAC;QACP;AAEA,QAAA,OAAO,MAAK;YACV,YAAY,CAAC,SAAS,CAAC;YACvB,YAAY,CAAC,KAAK,EAAE;AACpB,YAAA,YAAY,CAAC,SAAS,GAAG,IAAI;AAC/B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAE1B,IAAA,QACEA,GAAA,CAAA,OAAA,EAAA,EACE,QAAQ,EAAA,IAAA,EACR,WAAW,EAAA,IAAA,EAAA,GACP,IAAI,EACR,GAAG,EAAE,CAAC,OAAO,KAAI;AACf,YAAA,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC;YAC/B,eAAe,CAAC,OAAO,CAAC;QAC1B,CAAC,EAAA,CACD;AAEN,CAAC;;;;"}

package/dist/esm/src/core/components/Video/BaseVideoPlaceholder.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+
+const BaseVideoPlaceholder = forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
+    const [error, setError] = useState(false);
+    const name = participant.name || participant.userId;
+    return (jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
+                (name ? (jsx(InitialsFallback, { name: name })) : (jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))), participant.image && !error && (jsx("img", { onError: () => setError(true), alt: name, className: "str-video__video-placeholder__avatar", src: participant.image }))] }));
+});
+const InitialsFallback = (props) => {
+    const { name } = props;
+    const initials = name
+        .split(' ')
+        .slice(0, 2)
+        .map((n) => n[0])
+        .join('');
+    return (jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
+};
+
+export { BaseVideoPlaceholder };
+//# sourceMappingURL=BaseVideoPlaceholder.js.map

package/dist/esm/src/core/components/Video/BaseVideoPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/BaseVideoPlaceholder.tsx"],"sourcesContent":["import { ComponentProps, RefAttributes, forwardRef, useState } from 'react';\nimport type { StreamVideoParticipant } from '@stream-io/video-client';\n\nexport type BaseVideoPlaceholderProps = {\n  participant: StreamVideoParticipant;\n} & RefAttributes<HTMLDivElement> &\n  ComponentProps<'div'>;\n\nexport const BaseVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  BaseVideoPlaceholderProps\n>(function DefaultVideoPlaceholder({ participant, style, children }, ref) {\n  const [error, setError] = useState(false);\n  const name = participant.name || participant.userId;\n  return (\n    <div className=\"str-video__video-placeholder\" style={style} ref={ref}>\n      {(!participant.image || error) &&\n        (name ? (\n          <InitialsFallback name={name} />\n        ) : (\n          <div className=\"str-video__video-placeholder__no-video-label\">\n            {children}\n          </div>\n        ))}\n      {participant.image && !error && (\n        <img\n          onError={() => setError(true)}\n          alt={name}\n          className=\"str-video__video-placeholder__avatar\"\n          src={participant.image}\n        />\n      )}\n    </div>\n  );\n});\n\nconst InitialsFallback = (props: { name: string }) => {\n  const { name } = props;\n  const initials = name\n    .split(' ')\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join('');\n  return (\n    <div className=\"str-video__video-placeholder__initials-fallback\">\n      {initials}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAQO,MAAM,oBAAoB,GAAG,UAAU,CAG5C,SAAS,uBAAuB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAA;IACtE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzC,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM;IACnD,QACEA,cAAK,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,aACjE,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK;AAC3B,iBAAC,IAAI,IACHC,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,KAEhCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC1D,QAAQ,EAAA,CACL,CACP,CAAC,EACH,WAAW,CAAC,KAAK,IAAI,CAAC,KAAK,KAC1BA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAE,IAAI,EACT,SAAS,EAAC,sCAAsC,EAChD,GAAG,EAAE,WAAW,CAAC,KAAK,EAAA,CACtB,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAED,MAAM,gBAAgB,GAAG,CAAC,KAAuB,KAAI;AACnD,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;IACtB,MAAM,QAAQ,GAAG;SACd,KAAK,CAAC,GAAG;AACT,SAAA,KAAK,CAAC,CAAC,EAAE,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SACf,IAAI,CAAC,EAAE,CAAC;IACX,QACEA,aAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC7D,QAAQ,EAAA,CACL;AAEV,CAAC;;;;"}

package/dist/esm/src/core/components/Video/DefaultPictureInPicturePlaceholder.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { BaseVideoPlaceholder } from './BaseVideoPlaceholder.js';
+
+const DefaultPictureInPicturePlaceholder = forwardRef(function DefaultPictureInPicturePlaceholderRender(props, ref) {
+    const { t } = useI18n();
+    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
+});
+
+export { DefaultPictureInPicturePlaceholder };
+//# sourceMappingURL=DefaultPictureInPicturePlaceholder.js.map

package/dist/esm/src/core/components/Video/DefaultPictureInPicturePlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultPictureInPicturePlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type PictureInPicturePlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultPictureInPicturePlaceholder = forwardRef<\n  HTMLDivElement,\n  PictureInPicturePlaceholderProps\n>(function DefaultPictureInPicturePlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t('Video is playing in a popup')}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AASO,MAAM,kCAAkC,GAAG,UAAU,CAG1D,SAAS,wCAAwC,CAAC,KAAK,EAAE,GAAG,EAAA;AAC5D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CAAC,6BAA6B,CAAC,EAAA,CACZ;AAE3B,CAAC;;;;"}

package/dist/esm/src/core/components/Video/DefaultVideoPlaceholder.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useI18n } from '@stream-io/video-react-bindings';
+import { BaseVideoPlaceholder } from './BaseVideoPlaceholder.js';
+
+const DefaultVideoPlaceholder = forwardRef(function DefaultVideoPlaceholderRender(props, ref) {
+    const { t } = useI18n();
+    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
+});
+
+export { DefaultVideoPlaceholder };
+//# sourceMappingURL=DefaultVideoPlaceholder.js.map

package/dist/esm/src/core/components/Video/DefaultVideoPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultVideoPlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type VideoPlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  VideoPlaceholderProps\n>(function DefaultVideoPlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t('Video is disabled')}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AASO,MAAM,uBAAuB,GAAG,UAAU,CAG/C,SAAS,6BAA6B,CAAC,KAAK,EAAE,GAAG,EAAA;AACjD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CAAC,mBAAmB,CAAC,EAAA,CACF;AAE3B,CAAC;;;;"}

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

@@ -0,0 +1,88 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useLayoutEffect, useEffect } from 'react';
+import { hasVideo, hasScreenShare, VisibilityState, hasPausedTrack } from '@stream-io/video-client';
+import clsx from 'clsx';
+import { DefaultVideoPlaceholder } from './DefaultVideoPlaceholder.js';
+import { useCall } from '@stream-io/video-react-bindings';
+import { usePictureInPictureState } from '../../hooks/usePictureInPictureState.js';
+import { DefaultPictureInPicturePlaceholder } from './DefaultPictureInPicturePlaceholder.js';
+
+const ABSOLUTE_POSITION_STYLE = { position: 'absolute' };
+const Video = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, refs, ...rest }) => {
+    const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
+    const call = useCall();
+    const [videoElement, setVideoElement] = useState(null);
+    // 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'
+        ? videoStream
+        : trackType === 'screenShareTrack'
+            ? screenShareStream
+            : undefined;
+    useLayoutEffect(() => {
+        if (!call || !videoElement || trackType === 'none')
+            return;
+        const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, trackType, sessionId, videoElement]);
+    useEffect(() => {
+        if (!stream || !videoElement)
+            return;
+        const [track] = stream.getVideoTracks();
+        if (!track)
+            return;
+        const handlePlayPause = () => {
+            setIsVideoPaused(videoElement.paused);
+            const { width = 0, height = 0 } = track.getSettings();
+            setIsWideMode(width >= height);
+        };
+        // playback may have started before we had a chance to
+        // attach the 'play/pause' event listener, so we set the state
+        // here to make sure it's in sync
+        setIsVideoPaused(videoElement.paused);
+        videoElement.addEventListener('play', handlePlayPause);
+        videoElement.addEventListener('pause', handlePlayPause);
+        track.addEventListener('unmute', handlePlayPause);
+        return () => {
+            videoElement.removeEventListener('play', handlePlayPause);
+            videoElement.removeEventListener('pause', handlePlayPause);
+            track.removeEventListener('unmute', handlePlayPause);
+            // reset the 'pause' state once we unmount the video element
+            setIsVideoPaused(true);
+        };
+    }, [stream, videoElement]);
+    if (!call)
+        return null;
+    const isPublishingTrack = trackType === 'videoTrack'
+        ? hasVideo(participant)
+        : trackType === 'screenShareTrack'
+            ? hasScreenShare(participant)
+            : false;
+    const isInvisible = trackType === 'none' ||
+        viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
+    const hasNoVideoOrInvisible = !enabled ||
+        !isPublishingTrack ||
+        isInvisible ||
+        hasPausedTrack(participant, trackType);
+    const mirrorVideo = mirror === undefined
+        ? isLocalParticipant && trackType === 'videoTrack'
+        : mirror;
+    const isScreenShareTrack = trackType === 'screenShareTrack';
+    return (jsxs(Fragment, { children: [!hasNoVideoOrInvisible && (jsx("video", { ...rest, className: clsx('str-video__video', className, {
+                    'str-video__video--not-playing': isVideoPaused,
+                    'str-video__video--tall': !isWideMode,
+                    'str-video__video--mirror': mirrorVideo,
+                    'str-video__video--screen-share': isScreenShareTrack,
+                }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
+                    setVideoElement(element);
+                    refs?.setVideoElement?.(element);
+                } })), isPiP && PictureInPicturePlaceholder && (jsx(PictureInPicturePlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+};
+Video.displayName = 'Video';
+
+export { Video };
+//# sourceMappingURL=Video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sources":["../../../../../../../../src/core/components/Video/Video.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  CSSProperties,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport {\n  hasPausedTrack,\n  hasScreenShare,\n  hasVideo,\n  StreamVideoParticipant,\n  VideoTrackType,\n  VisibilityState,\n} from '@stream-io/video-client';\nimport clsx from 'clsx';\nimport {\n  DefaultVideoPlaceholder,\n  VideoPlaceholderProps,\n} from './DefaultVideoPlaceholder';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { usePictureInPictureState } from '../../hooks/usePictureInPictureState';\nimport {\n  DefaultPictureInPicturePlaceholder,\n  PictureInPicturePlaceholderProps,\n} from './DefaultPictureInPicturePlaceholder';\n\nconst ABSOLUTE_POSITION_STYLE: CSSProperties = { position: 'absolute' };\n\nexport type VideoProps = ComponentPropsWithoutRef<'video'> & {\n  /**\n   * Pass false to disable rendering video and render fallback\n   * even if the participant has published video.\n   * @default true\n   */\n  enabled?: boolean;\n  /**\n   * Forces the video to be mirrored or unmirrored. By default, video track\n   * from the local participant is mirrored, and all other videos are not mirrored.\n   */\n  mirror?: boolean;\n  /**\n   * The track type to display.\n   */\n  trackType: VideoTrackType | 'none';\n  /**\n   * The participant represented by this video element.\n   */\n  participant: StreamVideoParticipant;\n  /**\n   * Override the default UI that's visible when a participant turned off their video.\n   * Set it to `null` if you wish to disable the video placeholder.\n   *\n   * @default DefaultVideoPlaceholder\n   */\n  VideoPlaceholder?: ComponentType<VideoPlaceholderProps> | null;\n  /**\n   * Override the default UI that's dispayed in place of the video when it's playing\n   * in picture-in-picture. Set it to `null` if you wish to display the browser's default\n   * placeholder.\n   *\n   * @default DefaultPictureInPicturePlaceholder\n   */\n  PictureInPicturePlaceholder?: ComponentType<PictureInPicturePlaceholderProps> | null;\n  /**\n  /**\n   * An object with setRef functions\n   * meant for exposing some of the internal elements of this component.\n   */\n  refs?: {\n    /**\n     * The video element that's used to play the video stream.\n     * @param element the video element.\n     */\n    setVideoElement?: (element: HTMLVideoElement | null) => void;\n    /**\n     * The video placeholder element that's used when the video stream is not playing.\n     * @param element the video placeholder element.\n     */\n    setVideoPlaceholderElement?: (element: HTMLDivElement | null) => void;\n    setPictureInPicturePlaceholderElement?: (\n      element: HTMLDivElement | null,\n    ) => void;\n  };\n};\n\nexport const Video = ({\n  enabled = true,\n  mirror,\n  trackType,\n  participant,\n  className,\n  VideoPlaceholder = DefaultVideoPlaceholder,\n  PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder,\n  refs,\n  ...rest\n}: VideoProps) => {\n  const {\n    sessionId,\n    videoStream,\n    screenShareStream,\n    viewportVisibilityState,\n    isLocalParticipant,\n    userId,\n  } = participant;\n\n  const call = useCall();\n  const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(\n    null,\n  );\n  // start with true, will flip once the video starts playing\n  const [isVideoPaused, setIsVideoPaused] = useState(true);\n  const [isWideMode, setIsWideMode] = useState(true);\n  const isPiP = usePictureInPictureState(videoElement ?? undefined);\n\n  const stream =\n    trackType === 'videoTrack'\n      ? videoStream\n      : trackType === 'screenShareTrack'\n        ? screenShareStream\n        : undefined;\n\n  useLayoutEffect(() => {\n    if (!call || !videoElement || trackType === 'none') return;\n\n    const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);\n\n    return () => {\n      cleanup?.();\n    };\n  }, [call, trackType, sessionId, videoElement]);\n\n  useEffect(() => {\n    if (!stream || !videoElement) return;\n\n    const [track] = stream.getVideoTracks();\n    if (!track) return;\n\n    const handlePlayPause = () => {\n      setIsVideoPaused(videoElement.paused);\n\n      const { width = 0, height = 0 } = track.getSettings();\n      setIsWideMode(width >= height);\n    };\n\n    // playback may have started before we had a chance to\n    // attach the 'play/pause' event listener, so we set the state\n    // here to make sure it's in sync\n    setIsVideoPaused(videoElement.paused);\n\n    videoElement.addEventListener('play', handlePlayPause);\n    videoElement.addEventListener('pause', handlePlayPause);\n    track.addEventListener('unmute', handlePlayPause);\n    return () => {\n      videoElement.removeEventListener('play', handlePlayPause);\n      videoElement.removeEventListener('pause', handlePlayPause);\n      track.removeEventListener('unmute', handlePlayPause);\n\n      // reset the 'pause' state once we unmount the video element\n      setIsVideoPaused(true);\n    };\n  }, [stream, videoElement]);\n\n  if (!call) return null;\n\n  const isPublishingTrack =\n    trackType === 'videoTrack'\n      ? hasVideo(participant)\n      : trackType === 'screenShareTrack'\n        ? hasScreenShare(participant)\n        : false;\n\n  const isInvisible =\n    trackType === 'none' ||\n    viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;\n\n  const hasNoVideoOrInvisible =\n    !enabled ||\n    !isPublishingTrack ||\n    isInvisible ||\n    hasPausedTrack(participant, trackType);\n  const mirrorVideo =\n    mirror === undefined\n      ? isLocalParticipant && trackType === 'videoTrack'\n      : mirror;\n  const isScreenShareTrack = trackType === 'screenShareTrack';\n  return (\n    <>\n      {!hasNoVideoOrInvisible && (\n        <video\n          {...rest}\n          className={clsx('str-video__video', className, {\n            'str-video__video--not-playing': isVideoPaused,\n            'str-video__video--tall': !isWideMode,\n            'str-video__video--mirror': mirrorVideo,\n            'str-video__video--screen-share': isScreenShareTrack,\n          })}\n          data-user-id={userId}\n          data-session-id={sessionId}\n          ref={(element) => {\n            setVideoElement(element);\n            refs?.setVideoElement?.(element);\n          }}\n        />\n      )}\n      {isPiP && PictureInPicturePlaceholder && (\n        <PictureInPicturePlaceholder\n          style={ABSOLUTE_POSITION_STYLE}\n          participant={participant}\n        />\n      )}\n      {/* TODO: add condition to \"hold\" the placeholder until track unmutes as well */}\n      {(hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (\n        <VideoPlaceholder\n          style={ABSOLUTE_POSITION_STYLE}\n          participant={participant}\n          ref={refs?.setVideoPlaceholderElement}\n        />\n      )}\n    </>\n  );\n};\n\nVideo.displayName = 'Video';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/src/core/hooks/useCalculateHardLimit.js

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+
+const useCalculateHardLimit = (
+/**
+ * Element that stretches to 100% of the whole layout component
+ */
+wrapperElement, 
+/**
+ * Element that directly hosts individual `ParticipantView` (or wrapper) elements
+ */
+hostElement, limit) => {
+    const [calculatedLimit, setCalculatedLimit] = useState({
+        vertical: typeof limit === 'number' ? limit : null,
+        horizontal: typeof limit === 'number' ? limit : null,
+    });
+    useEffect(() => {
+        if (!hostElement ||
+            !wrapperElement ||
+            typeof limit === 'number' ||
+            typeof limit === 'undefined')
+            return;
+        let childWidth = null;
+        let childHeight = 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;
+                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;
+};
+
+export { useCalculateHardLimit };
+//# sourceMappingURL=useCalculateHardLimit.js.map

package/dist/esm/src/core/hooks/useCalculateHardLimit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalculateHardLimit.js","sources":["../../../../../../../src/core/hooks/useCalculateHardLimit.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport const useCalculateHardLimit = (\n  /**\n   * Element that stretches to 100% of the whole layout component\n   */\n  wrapperElement: HTMLDivElement | null,\n  /**\n   * Element that directly hosts individual `ParticipantView` (or wrapper) elements\n   */\n  hostElement: HTMLDivElement | null,\n  limit?: 'dynamic' | number,\n) => {\n  const [calculatedLimit, setCalculatedLimit] = useState<{\n    vertical: number | null;\n    horizontal: number | null;\n  }>({\n    vertical: typeof limit === 'number' ? limit : null,\n    horizontal: typeof limit === 'number' ? limit : null,\n  });\n\n  useEffect(() => {\n    if (\n      !hostElement ||\n      !wrapperElement ||\n      typeof limit === 'number' ||\n      typeof limit === 'undefined'\n    )\n      return;\n\n    let childWidth: number | null = null;\n    let childHeight: number | null = null;\n\n    const resizeObserver = new ResizeObserver((entries, observer) => {\n      // this part should ideally run as little times as possible\n      // get child measurements and disconnect\n      // does not consider dynamically sized children\n      // this hook is for SpeakerLayout use only, where children in the bar are fixed size\n      if (entries.length > 1) {\n        const child = hostElement.firstChild as HTMLElement | null;\n\n        if (child) {\n          childHeight = child.clientHeight;\n          childWidth = child.clientWidth;\n          observer.unobserve(hostElement);\n        }\n      }\n\n      // keep the state at { vertical: 1, horizontal: 1 }\n      // until we get the proper child measurements\n      if (childHeight === null || childWidth === null) return;\n\n      const vertical = Math.floor(wrapperElement.clientHeight / childHeight);\n      const horizontal = Math.floor(wrapperElement.clientWidth / childWidth);\n\n      setCalculatedLimit((pv) => {\n        if (pv.vertical !== vertical || pv.horizontal !== horizontal)\n          return { vertical, horizontal };\n        return pv;\n      });\n    });\n\n    resizeObserver.observe(wrapperElement);\n    resizeObserver.observe(hostElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [hostElement, limit, wrapperElement]);\n\n  return calculatedLimit;\n};\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB,GAAG;AACnC;;AAEG;AACH,cAAqC;AACrC;;AAEG;AACH,WAAkC,EAClC,KAA0B,KACxB;AACF,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAGnD;AACD,QAAA,QAAQ,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,IAAI;AAClD,QAAA,UAAU,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,IAAI;AACrD,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IACE,CAAC,WAAW;AACZ,YAAA,CAAC,cAAc;YACf,OAAO,KAAK,KAAK,QAAQ;YACzB,OAAO,KAAK,KAAK,WAAW;YAE5B;QAEF,IAAI,UAAU,GAAkB,IAAI;QACpC,IAAI,WAAW,GAAkB,IAAI;QAErC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,QAAQ,KAAI;;;;;AAK9D,YAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACtB,gBAAA,MAAM,KAAK,GAAG,WAAW,CAAC,UAAgC;gBAE1D,IAAI,KAAK,EAAE;AACT,oBAAA,WAAW,GAAG,KAAK,CAAC,YAAY;AAChC,oBAAA,UAAU,GAAG,KAAK,CAAC,WAAW;AAC9B,oBAAA,QAAQ,CAAC,SAAS,CAAC,WAAW,CAAC;gBACjC;YACF;;;AAIA,YAAA,IAAI,WAAW,KAAK,IAAI,IAAI,UAAU,KAAK,IAAI;gBAAE;AAEjD,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,GAAG,WAAW,CAAC;AACtE,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,GAAG,UAAU,CAAC;AAEtE,YAAA,kBAAkB,CAAC,CAAC,EAAE,KAAI;gBACxB,IAAI,EAAE,CAAC,QAAQ,KAAK,QAAQ,IAAI,EAAE,CAAC,UAAU,KAAK,UAAU;AAC1D,oBAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE;AACjC,gBAAA,OAAO,EAAE;AACX,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;AAEF,QAAA,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC;AACtC,QAAA,cAAc,CAAC,OAAO,CAAC,WAAW,CAAC;AAEnC,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;AAExC,IAAA,OAAO,eAAe;AACxB;;;;"}

package/dist/esm/src/core/hooks/usePictureInPictureState.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function usePictureInPictureState(videoElement) {
+    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;
+}
+
+export { usePictureInPictureState };
+//# sourceMappingURL=usePictureInPictureState.js.map

package/dist/esm/src/core/hooks/usePictureInPictureState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePictureInPictureState.js","sources":["../../../../../../../src/core/hooks/usePictureInPictureState.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport function usePictureInPictureState(videoElement?: HTMLVideoElement) {\n  const [isPiP, setIsPiP] = useState(\n    document.pictureInPictureElement === videoElement,\n  );\n\n  if (!videoElement && isPiP) setIsPiP(false);\n\n  useEffect(() => {\n    if (!videoElement) return;\n\n    const handlePiP = () => {\n      setIsPiP(document.pictureInPictureElement === videoElement);\n    };\n\n    videoElement.addEventListener('enterpictureinpicture', handlePiP);\n    videoElement.addEventListener('leavepictureinpicture', handlePiP);\n\n    return () => {\n      videoElement.removeEventListener('enterpictureinpicture', handlePiP);\n      videoElement.removeEventListener('leavepictureinpicture', handlePiP);\n    };\n  }, [videoElement]);\n\n  return isPiP;\n}\n"],"names":[],"mappings":";;AAEM,SAAU,wBAAwB,CAAC,YAA+B,EAAA;AACtE,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,QAAQ,CAAC,uBAAuB,KAAK,YAAY,CAClD;IAED,IAAI,CAAC,YAAY,IAAI,KAAK;QAAE,QAAQ,CAAC,KAAK,CAAC;IAE3C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;QAEnB,MAAM,SAAS,GAAG,MAAK;AACrB,YAAA,QAAQ,CAAC,QAAQ,CAAC,uBAAuB,KAAK,YAAY,CAAC;AAC7D,QAAA,CAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AACjE,QAAA,YAAY,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AAEjE,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AACpE,YAAA,YAAY,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,SAAS,CAAC;AACtE,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,OAAO,KAAK;AACd;;;;"}

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

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+
+const useTrackElementVisibility = ({ trackedElement, sessionId, trackType, }) => {
+    const call = useCall();
+    useEffect(() => {
+        if (!trackedElement || !call || trackType === 'none')
+            return;
+        return call.trackElementVisibility(trackedElement, sessionId, trackType);
+    }, [trackedElement, call, sessionId, trackType]);
+};
+
+export { useTrackElementVisibility };
+//# sourceMappingURL=useTrackElementVisibility.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackElementVisibility.js","sources":["../../../../../../../src/core/hooks/useTrackElementVisibility.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { VideoTrackType } from '@stream-io/video-client';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport const useTrackElementVisibility = <T extends HTMLElement>({\n  trackedElement,\n  sessionId,\n  trackType,\n}: {\n  trackedElement: T | null;\n  sessionId: string;\n  trackType: VideoTrackType | 'none';\n}) => {\n  const call = useCall();\n  useEffect(() => {\n    if (!trackedElement || !call || trackType === 'none') return;\n    return call.trackElementVisibility(trackedElement, sessionId, trackType);\n  }, [trackedElement, call, sessionId, trackType]);\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,SAAS,EACT,SAAS,GAKV,KAAI;AACH,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,IAAI,SAAS,KAAK,MAAM;YAAE;QACtD,OAAO,IAAI,CAAC,sBAAsB,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC;IAC1E,CAAC,EAAE,CAAC,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAClD;;;;"}

package/dist/esm/src/embedded/EmbeddedClientProvider.js

@@ -0,0 +1,83 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useEffectEvent } from '@stream-io/video-react-bindings';
+import '../core/components/Audio/Audio.js';
+import '../core/components/Audio/ParticipantsAudio.js';
+import '@stream-io/video-client';
+import '../core/components/ParticipantView/ParticipantViewContext.js';
+import '../components/Menu/MenuToggle.js';
+import 'clsx';
+import '../core/components/ParticipantView/ParticipantView.js';
+import '../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import { StreamCall } from '../core/components/StreamCall/StreamCall.js';
+import { StreamVideo } from '../core/components/StreamVideo/StreamVideo.js';
+import '../core/components/Video/BaseVideo.js';
+import '../core/components/Video/Video.js';
+import '../core/components/CallLayout/LivestreamLayout.js';
+import '../core/components/CallLayout/PaginatedGridLayout.js';
+import '../core/components/CallLayout/SpeakerLayout.js';
+import '../core/components/CallLayout/PipLayout/Pip.js';
+import '../core/components/CallLayout/PipLayout/Host.js';
+import '../core/components/CallLayout/PipLayout/Grid.js';
+import { BackgroundFiltersProvider } from '../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../components/Button/CompositeButton.js';
+import '../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../components/CallControls/RecordCallButton.js';
+import '../components/CallControls/ReactionsButton.js';
+import '../components/DeviceSettings/DeviceSettings.js';
+import '../components/DropdownSelect/DropdownSelect.js';
+import '../components/CallControls/CancelCallButton.js';
+import '../components/CallControls/CallStatsButton.js';
+import '../components/CallParticipantsList/CallParticipantsList.js';
+import '../components/CallParticipantsList/CallParticipantListingItem.js';
+import { LoadingIndicator } from '../components/LoadingIndicator/LoadingIndicator.js';
+import '../components/CallStats/CallStats.js';
+import { NoiseCancellationProvider } from '../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../components/RingingCall/RingingCall.js';
+import '../components/Permissions/PermissionRequests.js';
+import { StreamTheme } from '../components/StreamTheme/StreamTheme.js';
+import '../core/components/Video/DefaultVideoPlaceholder.js';
+import { ConfigurationProvider } from './context/ConfigurationContext.js';
+import './shared/Lobby/ToggleMicButton.js';
+import './shared/Lobby/ToggleCameraButton.js';
+import { useEmbeddedClient } from './hooks/useEmbeddedClient.js';
+
+const NoiseCancellationWrapper = ({ noiseCancellation, children, }) => {
+    if (!noiseCancellation) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx(NoiseCancellationProvider, { noiseCancellation: noiseCancellation, children: children }));
+};
+/**
+ * Shared provider wrapper for embedded components.
+ * Handles client/call initialization and wraps children with all necessary providers.
+ */
+const EmbeddedClientProvider = ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, onError, layout, theme, children, }) => {
+    const [showError, setShowError] = useState(false);
+    const onErrorStable = useEffectEvent(onError ?? console.error);
+    const handleError = useCallback((error) => {
+        setShowError(true);
+        onErrorStable(error);
+    }, [onErrorStable]);
+    const { client, call, noiseCancellation, noiseCancellationReady } = useEmbeddedClient({
+        apiKey,
+        user,
+        callId,
+        callType,
+        token,
+        tokenProvider,
+        logLevel,
+        handleError,
+    });
+    if (showError) {
+        return (jsx(StreamTheme, { className: "str-video__embedded", children: jsx("div", { className: "str-video__embedded-error", children: jsx("p", { className: "str-video__embedded-error__message", children: "An error occurred while initializing the client. Please try again later." }) }) }));
+    }
+    if (!call || !client || !noiseCancellationReady) {
+        return (jsx(StreamTheme, { className: "str-video__embedded", children: jsx(LoadingIndicator, { className: "str-video__embedded-loading" }) }));
+    }
+    return (jsx(StreamVideo, { client: client, children: jsx(StreamCall, { call: call, children: jsx(ConfigurationProvider, { layout: layout, onError: onErrorStable, children: jsx(BackgroundFiltersProvider, { children: jsx(NoiseCancellationWrapper, { noiseCancellation: noiseCancellation, children: jsx(StreamTheme, { className: "str-video__embedded", style: theme, children: children }) }) }) }) }) }));
+};
+
+export { EmbeddedClientProvider };
+//# sourceMappingURL=EmbeddedClientProvider.js.map

package/dist/esm/src/embedded/EmbeddedClientProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedClientProvider.js","sources":["../../../../../../src/embedded/EmbeddedClientProvider.tsx"],"sourcesContent":["import { useCallback, useState, type ReactNode } from 'react';\nimport type { INoiseCancellation } from '@stream-io/audio-filters-web';\nimport { useEffectEvent as useEffectEventShim } from '@stream-io/video-react-bindings';\n\nimport { StreamCall, StreamVideo } from '../core';\nimport {\n  StreamTheme,\n  BackgroundFiltersProvider,\n  NoiseCancellationProvider,\n} from '../components';\nimport { ConfigurationProvider } from './context';\nimport { useEmbeddedClient } from './hooks';\nimport type { LogLevel, TokenProvider } from '@stream-io/video-client';\nimport type { EmbeddedUser, LayoutOption } from './types';\nimport { LoadingIndicator } from '../components';\n\nexport interface EmbeddedClientProviderProps {\n  apiKey: string;\n  user: EmbeddedUser;\n  callId: string;\n  callType: string;\n  token?: string;\n  tokenProvider?: TokenProvider;\n  logLevel?: LogLevel;\n  onError?: (error: any) => void;\n  layout?: LayoutOption;\n  theme?: Record<string, string>;\n  children: ReactNode;\n}\n\nconst NoiseCancellationWrapper = ({\n  noiseCancellation,\n  children,\n}: {\n  noiseCancellation?: INoiseCancellation;\n  children: ReactNode;\n}) => {\n  if (!noiseCancellation) {\n    return <>{children}</>;\n  }\n\n  return (\n    <NoiseCancellationProvider noiseCancellation={noiseCancellation}>\n      {children}\n    </NoiseCancellationProvider>\n  );\n};\n\n/**\n * Shared provider wrapper for embedded components.\n * Handles client/call initialization and wraps children with all necessary providers.\n */\nexport const EmbeddedClientProvider = ({\n  apiKey,\n  user,\n  callId,\n  callType,\n  token,\n  tokenProvider,\n  logLevel,\n  onError,\n  layout,\n  theme,\n  children,\n}: EmbeddedClientProviderProps) => {\n  const [showError, setShowError] = useState<boolean>(false);\n\n  const onErrorStable = useEffectEventShim(onError ?? console.error);\n  const handleError = useCallback(\n    (error: any) => {\n      setShowError(true);\n      onErrorStable(error);\n    },\n    [onErrorStable],\n  );\n\n  const { client, call, noiseCancellation, noiseCancellationReady } =\n    useEmbeddedClient({\n      apiKey,\n      user,\n      callId,\n      callType,\n      token,\n      tokenProvider,\n      logLevel,\n      handleError,\n    });\n\n  if (showError) {\n    return (\n      <StreamTheme className=\"str-video__embedded\">\n        <div className=\"str-video__embedded-error\">\n          <p className=\"str-video__embedded-error__message\">\n            An error occurred while initializing the client. Please try again\n            later.\n          </p>\n        </div>\n      </StreamTheme>\n    );\n  }\n\n  if (!call || !client || !noiseCancellationReady) {\n    return (\n      <StreamTheme className=\"str-video__embedded\">\n        <LoadingIndicator className=\"str-video__embedded-loading\" />\n      </StreamTheme>\n    );\n  }\n\n  return (\n    <StreamVideo client={client}>\n      <StreamCall call={call}>\n        <ConfigurationProvider layout={layout} onError={onErrorStable}>\n          <BackgroundFiltersProvider>\n            <NoiseCancellationWrapper noiseCancellation={noiseCancellation}>\n              <StreamTheme className=\"str-video__embedded\" style={theme}>\n                {children}\n              </StreamTheme>\n            </NoiseCancellationWrapper>\n          </BackgroundFiltersProvider>\n        </ConfigurationProvider>\n      </StreamCall>\n    </StreamVideo>\n  );\n};\n"],"names":["_jsx","_Fragment","useEffectEventShim"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,wBAAwB,GAAG,CAAC,EAChC,iBAAiB,EACjB,QAAQ,GAIT,KAAI;IACH,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;IACxB;IAEA,QACED,GAAA,CAAC,yBAAyB,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EAC5D,QAAQ,EAAA,CACiB;AAEhC,CAAC;AAED;;;AAGG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,GACoB,KAAI;IAChC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAE1D,MAAM,aAAa,GAAGE,cAAkB,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC;AAClE,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAU,KAAI;QACb,YAAY,CAAC,IAAI,CAAC;QAClB,aAAa,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC,EACD,CAAC,aAAa,CAAC,CAChB;IAED,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAC/D,iBAAiB,CAAC;QAChB,MAAM;QACN,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,aAAa;QACb,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IAEJ,IAAI,SAAS,EAAE;QACb,QACEF,IAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,YAC1CA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACxCA,WAAG,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,0EAAA,EAAA,CAG7C,EAAA,CACA,EAAA,CACM;IAElB;IAEA,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,sBAAsB,EAAE;AAC/C,QAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAC1CA,GAAA,CAAC,gBAAgB,IAAC,SAAS,EAAC,6BAA6B,EAAA,CAAG,EAAA,CAChD;IAElB;IAEA,QACEA,GAAA,CAAC,WAAW,EAAA,EAAC,MAAM,EAAE,MAAM,EAAA,QAAA,EACzBA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,QAAA,EACpBA,GAAA,CAAC,qBAAqB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAA,QAAA,EAC3DA,GAAA,CAAC,yBAAyB,EAAA,EAAA,QAAA,EACxBA,GAAA,CAAC,wBAAwB,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EAC5DA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACtD,QAAQ,EAAA,CACG,EAAA,CACW,EAAA,CACD,EAAA,CACN,EAAA,CACb,EAAA,CACD;AAElB;;;;"}

package/dist/esm/src/embedded/call/CallControls.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { OwnCapability } from '@stream-io/video-client';
+import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import { CompositeButton } from '../../components/Button/CompositeButton.js';
+import '../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import { MicCaptureErrorNotification } from '../../components/Notification/MicCaptureErrorNotification.js';
+import { RecordCallConfirmationButton } from '../../components/CallControls/RecordCallButton.js';
+import { ReactionsButton } from '../../components/CallControls/ReactionsButton.js';
+import { ScreenShareButton } from '../../components/CallControls/ScreenShareButton.js';
+import { ToggleAudioPublishingButton } from '../../components/CallControls/ToggleAudioButton.js';
+import { ToggleVideoPublishingButton } from '../../components/CallControls/ToggleVideoButton.js';
+import { CancelCallConfirmButton } from '../../components/CallControls/CancelCallButton.js';
+import '../../components/CallControls/CallStatsButton.js';
+import { Icon } from '../../components/Icon/Icon.js';
+import '../../components/DeviceSettings/DeviceSettings.js';
+import '../../components/DropdownSelect/DropdownSelect.js';
+import '../../components/Menu/MenuToggle.js';
+import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from '../../components/DeviceSettings/DeviceSelectorAudio.js';
+import { WithTooltip } from '../../components/Tooltip/WithTooltip.js';
+import '../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../components/CallStats/CallStats.js';
+import '../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../components/RingingCall/RingingCall.js';
+import '../../components/Permissions/PermissionRequests.js';
+import '../../core/components/Video/Video.js';
+import '../../core/components/Video/BaseVideo.js';
+import '../../core/components/Video/DefaultVideoPlaceholder.js';
+import '../../core/components/Audio/Audio.js';
+import '../../core/components/Audio/ParticipantsAudio.js';
+import '../../core/components/ParticipantView/ParticipantViewContext.js';
+import '../../core/components/ParticipantView/ParticipantView.js';
+import '../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../core/components/StreamCall/StreamCall.js';
+import '../../core/components/StreamVideo/StreamVideo.js';
+import '../../core/components/CallLayout/LivestreamLayout.js';
+import '../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../core/components/CallLayout/SpeakerLayout.js';
+import '../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../core/components/CallLayout/PipLayout/Host.js';
+import '../../core/components/CallLayout/PipLayout/Grid.js';
+import '../context/ConfigurationContext.js';
+import { CameraMenuWithBlur } from '../shared/BlurToggleButton/BlurToggleButton.js';
+import '../shared/Lobby/ToggleMicButton.js';
+import '../shared/Lobby/ToggleCameraButton.js';
+import { useCallDuration } from '../hooks/useCallDuration.js';
+
+/**
+ * Renders the active call control bar
+ */
+const CallControls = ({ showParticipants, onToggleParticipants, }) => {
+    const { t } = useI18n();
+    const { useCallSession } = useCallStateHooks();
+    const session = useCallSession();
+    const startedAt = session?.started_at;
+    const { elapsed } = useCallDuration(startedAt);
+    return (jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), startedAt && (jsxs("div", { className: "str-video__embedded-call-duration str-video__embedded-desktop", children: [jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] }))] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ScreenShareButton, {}) }) }), jsx(RecordCallConfirmationButton, {}), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: onToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] }));
+};
+
+export { CallControls };
+//# sourceMappingURL=CallControls.js.map

package/dist/esm/src/embedded/call/CallControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallControls.js","sources":["../../../../../../../src/embedded/call/CallControls.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport {\n  CancelCallConfirmButton,\n  CompositeButton,\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MicCaptureErrorNotification,\n  ReactionsButton,\n  RecordCallConfirmationButton,\n  ScreenShareButton,\n  ToggleAudioPublishingButton,\n  ToggleVideoPublishingButton,\n  WithTooltip,\n} from '../../components';\n\nimport { useCallDuration } from '../hooks';\nimport { CameraMenuWithBlur } from '../shared';\n\ninterface CallControlsProps {\n  showParticipants: boolean;\n  onToggleParticipants: () => void;\n}\n\n/**\n * Renders the active call control bar\n */\nexport const CallControls = ({\n  showParticipants,\n  onToggleParticipants,\n}: CallControlsProps) => {\n  const { t } = useI18n();\n  const { useCallSession } = useCallStateHooks();\n  const session = useCallSession();\n  const startedAt = session?.started_at;\n  const { elapsed } = useCallDuration(startedAt);\n\n  return (\n    <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n      <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-mobile\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        {startedAt && (\n          <div className=\"str-video__embedded-call-duration str-video__embedded-desktop\">\n            <Icon\n              icon=\"verified\"\n              className=\"str-video__embedded-call-duration__icon\"\n            />\n            <span className=\"str-video__embedded-call-duration__time\">\n              {elapsed}\n            </span>\n          </div>\n        )}\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_AUDIO]}\n          hasPermissionsOnly\n        >\n          <MicCaptureErrorNotification>\n            <ToggleAudioPublishingButton\n              Menu={\n                <>\n                  <DeviceSelectorAudioInput\n                    visualType=\"list\"\n                    title={t('Microphone')}\n                  />\n                  <DeviceSelectorAudioOutput\n                    visualType=\"list\"\n                    title={t('Speaker')}\n                  />\n                </>\n              }\n              menuPlacement=\"top\"\n            />\n          </MicCaptureErrorNotification>\n        </Restricted>\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_VIDEO]}\n          hasPermissionsOnly\n        >\n          <ToggleVideoPublishingButton\n            Menu={<CameraMenuWithBlur />}\n            menuPlacement=\"top\"\n          />\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ScreenShareButton />\n          </div>\n        </Restricted>\n        <RecordCallConfirmationButton />\n        <div className=\"str-video__embedded-desktop\">\n          <CancelCallConfirmButton />\n        </div>\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n        <WithTooltip title={t('Participants')}>\n          <CompositeButton\n            active={showParticipants}\n            aria-label={t('Participants')}\n            aria-pressed={showParticipants}\n            onClick={onToggleParticipants}\n          >\n            <Icon icon=\"participants\" />\n          </CompositeButton>\n        </WithTooltip>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}