@stream-io/video-react-sdk 1.4.5 → 1.6.0

package/dist/index.cjs.js

@@ -4,10 +4,10 @@ var videoClient = require('@stream-io/video-client');
 var videoReactBindings = require('@stream-io/video-react-bindings');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var react$1 = require('@floating-ui/react');
 var clsx = require('clsx');
 var reactDom = require('react-dom');
 var videoFiltersWeb = require('@stream-io/video-filters-web');
-var react$1 = require('@floating-ui/react');
 
 const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     const call = videoReactBindings.useCall();
@@ -44,167 +44,6 @@ ParticipantsAudio.displayName = 'ParticipantsAudio';
 const ParticipantViewContext = react.createContext(undefined);
 const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
 
-const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
-    const [error, setError] = react.useState(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(!imageSrc || error) && name && (jsxRuntime.jsx(AvatarFallback, { className: className, style: style, names: [name] })), imageSrc && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', className), src: imageSrc, style: style, ...rest }))] }));
-};
-const AvatarFallback = ({ className, names, style, }) => {
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
-};
-
-/**
- * The context for the background filters.
- */
-const BackgroundFiltersContext = react.createContext(undefined);
-/**
- * A hook to access the background filters context API.
- */
-const useBackgroundFilters = () => {
-    const context = react.useContext(BackgroundFiltersContext);
-    if (!context) {
-        throw new Error('useBackgroundFilters must be used within a BackgroundFiltersProvider');
-    }
-    return context;
-};
-/**
- * A provider component that enables the use of background filters in your app.
- *
- * Please make sure you have the `@stream-io/video-filters-web` package installed
- * in your project before using this component.
- */
-const BackgroundFiltersProvider = (props) => {
-    const { children, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = 'high', tfFilePath, modelFilePath, basePath, onError, } = props;
-    const [backgroundFilter, setBackgroundFilter] = react.useState(bgFilterFromProps);
-    const [backgroundImage, setBackgroundImage] = react.useState(bgImageFromProps);
-    const [backgroundBlurLevel, setBackgroundBlurLevel] = react.useState(bgBlurLevelFromProps);
-    const applyBackgroundImageFilter = react.useCallback((imageUrl) => {
-        setBackgroundFilter('image');
-        setBackgroundImage(imageUrl);
-    }, []);
-    const applyBackgroundBlurFilter = react.useCallback((blurLevel = 'high') => {
-        setBackgroundFilter('blur');
-        setBackgroundBlurLevel(blurLevel);
-    }, []);
-    const disableBackgroundFilter = react.useCallback(() => {
-        setBackgroundFilter(undefined);
-        setBackgroundImage(undefined);
-        setBackgroundBlurLevel('high');
-    }, []);
-    const [isSupported, setIsSupported] = react.useState(false);
-    react.useEffect(() => {
-        videoFiltersWeb.isPlatformSupported().then(setIsSupported);
-    }, []);
-    const [tfLite, setTfLite] = react.useState();
-    react.useEffect(() => {
-        // don't try to load TFLite if the platform is not supported
-        if (!isSupported)
-            return;
-        videoFiltersWeb.loadTFLite({ basePath, modelFilePath, tfFilePath })
-            .then(setTfLite)
-            .catch((err) => console.error('Failed to load TFLite', err));
-    }, [basePath, isSupported, modelFilePath, tfFilePath]);
-    const handleError = react.useCallback((error) => {
-        videoClient.getLogger(['filters'])('warn', 'Filter encountered an error and will be disabled');
-        disableBackgroundFilter();
-        onError?.(error);
-    }, [disableBackgroundFilter, onError]);
-    return (jsxRuntime.jsxs(BackgroundFiltersContext.Provider, { value: {
-            isSupported,
-            isReady: !!tfLite,
-            backgroundImage,
-            backgroundBlurLevel,
-            backgroundFilter,
-            disableBackgroundFilter,
-            applyBackgroundBlurFilter,
-            applyBackgroundImageFilter,
-            backgroundImages,
-            tfFilePath,
-            modelFilePath,
-            basePath,
-            onError: handleError,
-        }, children: [children, tfLite && jsxRuntime.jsx(BackgroundFilters, { tfLite: tfLite })] }));
-};
-const BackgroundFilters = (props) => {
-    const call = videoReactBindings.useCall();
-    const { children, start } = useRenderer(props.tfLite);
-    const { backgroundFilter, onError } = useBackgroundFilters();
-    const handleErrorRef = react.useRef(undefined);
-    handleErrorRef.current = onError;
-    react.useEffect(() => {
-        if (!call || !backgroundFilter)
-            return;
-        const { unregister } = call.camera.registerFilter((ms) => start(ms, (error) => handleErrorRef.current?.(error)));
-        return () => {
-            unregister();
-        };
-    }, [backgroundFilter, call, start]);
-    return children;
-};
-const useRenderer = (tfLite) => {
-    const { backgroundFilter, backgroundBlurLevel, backgroundImage } = useBackgroundFilters();
-    const videoRef = react.useRef(null);
-    const canvasRef = react.useRef(null);
-    const bgImageRef = react.useRef(null);
-    const [videoSize, setVideoSize] = react.useState({
-        width: 1920,
-        height: 1080,
-    });
-    const start = react.useCallback((ms, onError) => {
-        let outputStream;
-        let renderer;
-        const output = new Promise((resolve, reject) => {
-            if (!backgroundFilter) {
-                reject(new Error('No filter specified'));
-                return;
-            }
-            const videoEl = videoRef.current;
-            const canvasEl = canvasRef.current;
-            const bgImageEl = bgImageRef.current;
-            if (!videoEl || !canvasEl || (backgroundImage && !bgImageEl)) {
-                // You should start renderer in effect or event handlers
-                reject(new Error('Renderer started before elements are ready'));
-                return;
-            }
-            videoEl.srcObject = ms;
-            videoEl.play().then(() => {
-                const [track] = ms.getVideoTracks();
-                if (!track) {
-                    reject(new Error('No video tracks in input media stream'));
-                    return;
-                }
-                const trackSettings = track.getSettings();
-                reactDom.flushSync(() => setVideoSize({
-                    width: trackSettings.width ?? 0,
-                    height: trackSettings.height ?? 0,
-                }));
-                renderer = videoFiltersWeb.createRenderer(tfLite, videoEl, canvasEl, {
-                    backgroundFilter,
-                    backgroundBlurLevel,
-                    backgroundImage: bgImageEl ?? undefined,
-                }, onError);
-                outputStream = canvasEl.captureStream();
-                resolve(outputStream);
-            }, () => {
-                reject(new Error('Could not play the source video stream'));
-            });
-        });
-        return {
-            output,
-            stop: () => {
-                renderer?.dispose();
-                videoRef.current && (videoRef.current.srcObject = null);
-                outputStream && videoClient.disposeOfMediaStream(outputStream);
-            },
-        };
-    }, [backgroundBlurLevel, backgroundFilter, backgroundImage, tfLite]);
-    const children = (jsxRuntime.jsxs("div", { className: "str-video__background-filters", children: [jsxRuntime.jsx("video", { className: clsx('str-video__background-filters__video', videoSize.height > videoSize.width &&
-                    'str-video__background-filters__video--tall'), ref: videoRef, playsInline: true, muted: true, controls: false, ...videoSize }), backgroundImage && (jsxRuntime.jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: bgImageRef, src: backgroundImage, ...videoSize })), jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
-    return {
-        start,
-        children,
-    };
-};
-
 const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: offsetInPx = 10, }) => {
     const { refs, x, y, update, elements: { domReference, floating }, context, } = react$1.useFloating({
         placement,
@@ -552,8 +391,426 @@ const GenericMenuButtonItem = ({ children, ...rest }) => {
     return (jsxRuntime.jsx("li", { className: "str-video__generic-menu--item", children: jsxRuntime.jsx("button", { ...rest, children: children }) }));
 };
 
-const Icon = ({ className, icon }) => (jsxRuntime.jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`, className) }));
-
+const Icon = ({ className, icon }) => (jsxRuntime.jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`, className) }));
+
+const ParticipantActionsContextMenu = () => {
+    const { participant, participantViewElement, videoElement } = useParticipantViewContext();
+    const [fullscreenModeOn, setFullscreenModeOn] = react.useState(!!document.fullscreenElement);
+    const [pictureInPictureElement, setPictureInPictureElement] = react.useState(document.pictureInPictureElement);
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const { pin, sessionId, userId } = participant;
+    const hasAudioTrack = videoClient.hasAudio(participant);
+    const hasVideoTrack = videoClient.hasVideo(participant);
+    const hasScreenShareTrack = videoClient.hasScreenShare(participant);
+    const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
+    const blockUser = () => call?.blockUser(userId);
+    const muteAudio = () => call?.muteUser(userId, 'audio');
+    const muteVideo = () => call?.muteUser(userId, 'video');
+    const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
+    const muteScreenShareAudio = () => call?.muteUser(userId, 'screenshare_audio');
+    const grantPermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            grant_permissions: [permission],
+        });
+    };
+    const revokePermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            revoke_permissions: [permission],
+        });
+    };
+    const toggleParticipantPin = () => {
+        if (pin) {
+            call?.unpin(sessionId);
+        }
+        else {
+            call?.pin(sessionId);
+        }
+    };
+    const pinForEveryone = () => {
+        call
+            ?.pinForEveryone({
+            user_id: userId,
+            session_id: sessionId,
+        })
+            .catch((err) => {
+            console.error(`Failed to pin participant ${userId}`, err);
+        });
+    };
+    const unpinForEveryone = () => {
+        call
+            ?.unpinForEveryone({
+            user_id: userId,
+            session_id: sessionId,
+        })
+            .catch((err) => {
+            console.error(`Failed to unpin participant ${userId}`, err);
+        });
+    };
+    const toggleFullscreenMode = () => {
+        if (!fullscreenModeOn) {
+            return participantViewElement?.requestFullscreen().catch(console.error);
+        }
+        return document.exitFullscreen().catch(console.error);
+    };
+    react.useEffect(() => {
+        // handles the case when fullscreen mode is toggled externally,
+        // e.g., by pressing ESC key or some other keyboard shortcut
+        const handleFullscreenChange = () => {
+            setFullscreenModeOn(!!document.fullscreenElement);
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+    react.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) {
+            return videoElement
+                .requestPictureInPicture()
+                .catch(console.error);
+        }
+        return document.exitPictureInPicture().catch(console.error);
+    };
+    const { close } = useMenuContext() || {};
+    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
+                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+                }) })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
+                    direction: pictureInPictureElement === videoElement
+                        ? t('Leave')
+                        : t('Enter'),
+                }) })), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+};
+
+const isComponentType = (elementOrComponent) => {
+    return elementOrComponent === null
+        ? false
+        : !react.isValidElement(elementOrComponent);
+};
+
+const chunk = (array, size) => {
+    const chunkCount = Math.ceil(array.length / size);
+    return Array.from({ length: chunkCount }, (_, index) => array.slice(size * index, size * index + size));
+};
+
+const applyElementToRef = (ref, element) => {
+    if (!ref)
+        return;
+    if (typeof ref === 'function')
+        return ref(element);
+    ref.current = element;
+};
+
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+const BaseVideo = react.forwardRef(function BaseVideo({ stream, ...rest }, ref) {
+    const [videoElement, setVideoElement] = react.useState(null);
+    react.useEffect(() => {
+        if (!videoElement || !stream)
+            return;
+        if (stream === videoElement.srcObject)
+            return;
+        videoElement.srcObject = stream;
+        if (videoClient.Browsers.isSafari() || videoClient.Browsers.isFirefox()) {
+            // Firefox and Safari have some timing issue
+            setTimeout(() => {
+                videoElement.srcObject = stream;
+                videoElement.play().catch((e) => {
+                    console.error(`Failed to play stream`, e);
+                });
+            }, 0);
+        }
+        return () => {
+            videoElement.pause();
+            videoElement.srcObject = null;
+        };
+    }, [stream, videoElement]);
+    return (jsxRuntime.jsx("video", { autoPlay: true, playsInline: true, ...rest, ref: (element) => {
+            applyElementToRef(ref, element);
+            setVideoElement(element);
+        } }));
+});
+
+const DefaultVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder({ participant, style }, ref) {
+    const { t } = videoReactBindings.useI18n();
+    const [error, setError] = react.useState(false);
+    const name = participant.name || participant.userId;
+    return (jsxRuntime.jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
+                (name ? (jsxRuntime.jsx(InitialsFallback, { name: name })) : (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__no-video-label", children: t('Video is disabled') }))), participant.image && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "video-placeholder", 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 (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
+};
+
+const Video$1 = ({ enabled, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs, ...rest }) => {
+    const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
+    const call = videoReactBindings.useCall();
+    const [videoElement, setVideoElement] = react.useState(null);
+    // start with true, will flip once the video starts playing
+    const [isVideoPaused, setIsVideoPaused] = react.useState(true);
+    const [isWideMode, setIsWideMode] = react.useState(true);
+    const stream = trackType === 'videoTrack'
+        ? videoStream
+        : trackType === 'screenShareTrack'
+            ? screenShareStream
+            : undefined;
+    react.useLayoutEffect(() => {
+        if (!call || !videoElement || trackType === 'none')
+            return;
+        const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, trackType, sessionId, videoElement]);
+    react.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'
+        ? videoClient.hasVideo(participant)
+        : trackType === 'screenShareTrack'
+            ? videoClient.hasScreenShare(participant)
+            : false;
+    const isInvisible = trackType === 'none' ||
+        viewportVisibilityState?.[trackType] === videoClient.VisibilityState.INVISIBLE;
+    const hasNoVideoOrInvisible = !enabled || !isPublishingTrack || isInvisible;
+    const mirrorVideo = mirror === undefined
+        ? isLocalParticipant && trackType === 'videoTrack'
+        : mirror;
+    const isScreenShareTrack = trackType === 'screenShareTrack';
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hasNoVideoOrInvisible && (jsxRuntime.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);
+                } })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsxRuntime.jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+};
+Video$1.displayName = 'Video';
+
+const useTrackElementVisibility = ({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }) => {
+    const call = videoReactBindings.useCall();
+    const manager = propsDynascaleManager ?? call?.dynascaleManager;
+    react.useEffect(() => {
+        if (!trackedElement || !manager || !call || trackType === 'none')
+            return;
+        const unobserve = manager.trackElementVisibility(trackedElement, sessionId, trackType);
+        return () => {
+            unobserve();
+        };
+    }, [trackedElement, manager, call, sessionId, trackType]);
+};
+
+const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
+    const [error, setError] = react.useState(false);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(!imageSrc || error) && name && (jsxRuntime.jsx(AvatarFallback, { className: className, style: style, names: [name] })), imageSrc && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', className), src: imageSrc, style: style, ...rest }))] }));
+};
+const AvatarFallback = ({ className, names, style, }) => {
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
+};
+
+/**
+ * The context for the background filters.
+ */
+const BackgroundFiltersContext = react.createContext(undefined);
+/**
+ * A hook to access the background filters context API.
+ */
+const useBackgroundFilters = () => {
+    const context = react.useContext(BackgroundFiltersContext);
+    if (!context) {
+        throw new Error('useBackgroundFilters must be used within a BackgroundFiltersProvider');
+    }
+    return context;
+};
+/**
+ * A provider component that enables the use of background filters in your app.
+ *
+ * Please make sure you have the `@stream-io/video-filters-web` package installed
+ * in your project before using this component.
+ */
+const BackgroundFiltersProvider = (props) => {
+    const { children, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = 'high', tfFilePath, modelFilePath, basePath, onError, } = props;
+    const [backgroundFilter, setBackgroundFilter] = react.useState(bgFilterFromProps);
+    const [backgroundImage, setBackgroundImage] = react.useState(bgImageFromProps);
+    const [backgroundBlurLevel, setBackgroundBlurLevel] = react.useState(bgBlurLevelFromProps);
+    const applyBackgroundImageFilter = react.useCallback((imageUrl) => {
+        setBackgroundFilter('image');
+        setBackgroundImage(imageUrl);
+    }, []);
+    const applyBackgroundBlurFilter = react.useCallback((blurLevel = 'high') => {
+        setBackgroundFilter('blur');
+        setBackgroundBlurLevel(blurLevel);
+    }, []);
+    const disableBackgroundFilter = react.useCallback(() => {
+        setBackgroundFilter(undefined);
+        setBackgroundImage(undefined);
+        setBackgroundBlurLevel('high');
+    }, []);
+    const [isSupported, setIsSupported] = react.useState(false);
+    react.useEffect(() => {
+        videoFiltersWeb.isPlatformSupported().then(setIsSupported);
+    }, []);
+    const [tfLite, setTfLite] = react.useState();
+    react.useEffect(() => {
+        // don't try to load TFLite if the platform is not supported
+        if (!isSupported)
+            return;
+        videoFiltersWeb.loadTFLite({ basePath, modelFilePath, tfFilePath })
+            .then(setTfLite)
+            .catch((err) => console.error('Failed to load TFLite', err));
+    }, [basePath, isSupported, modelFilePath, tfFilePath]);
+    const handleError = react.useCallback((error) => {
+        videoClient.getLogger(['filters'])('warn', 'Filter encountered an error and will be disabled');
+        disableBackgroundFilter();
+        onError?.(error);
+    }, [disableBackgroundFilter, onError]);
+    return (jsxRuntime.jsxs(BackgroundFiltersContext.Provider, { value: {
+            isSupported,
+            isReady: !!tfLite,
+            backgroundImage,
+            backgroundBlurLevel,
+            backgroundFilter,
+            disableBackgroundFilter,
+            applyBackgroundBlurFilter,
+            applyBackgroundImageFilter,
+            backgroundImages,
+            tfFilePath,
+            modelFilePath,
+            basePath,
+            onError: handleError,
+        }, children: [children, tfLite && jsxRuntime.jsx(BackgroundFilters, { tfLite: tfLite })] }));
+};
+const BackgroundFilters = (props) => {
+    const call = videoReactBindings.useCall();
+    const { children, start } = useRenderer(props.tfLite);
+    const { backgroundFilter, onError } = useBackgroundFilters();
+    const handleErrorRef = react.useRef(undefined);
+    handleErrorRef.current = onError;
+    react.useEffect(() => {
+        if (!call || !backgroundFilter)
+            return;
+        const { unregister } = call.camera.registerFilter((ms) => start(ms, (error) => handleErrorRef.current?.(error)));
+        return () => {
+            unregister();
+        };
+    }, [backgroundFilter, call, start]);
+    return children;
+};
+const useRenderer = (tfLite) => {
+    const { backgroundFilter, backgroundBlurLevel, backgroundImage } = useBackgroundFilters();
+    const videoRef = react.useRef(null);
+    const canvasRef = react.useRef(null);
+    const bgImageRef = react.useRef(null);
+    const [videoSize, setVideoSize] = react.useState({
+        width: 1920,
+        height: 1080,
+    });
+    const start = react.useCallback((ms, onError) => {
+        let outputStream;
+        let renderer;
+        const output = new Promise((resolve, reject) => {
+            if (!backgroundFilter) {
+                reject(new Error('No filter specified'));
+                return;
+            }
+            const videoEl = videoRef.current;
+            const canvasEl = canvasRef.current;
+            const bgImageEl = bgImageRef.current;
+            if (!videoEl || !canvasEl || (backgroundImage && !bgImageEl)) {
+                // You should start renderer in effect or event handlers
+                reject(new Error('Renderer started before elements are ready'));
+                return;
+            }
+            videoEl.srcObject = ms;
+            videoEl.play().then(() => {
+                const [track] = ms.getVideoTracks();
+                if (!track) {
+                    reject(new Error('No video tracks in input media stream'));
+                    return;
+                }
+                const trackSettings = track.getSettings();
+                reactDom.flushSync(() => setVideoSize({
+                    width: trackSettings.width ?? 0,
+                    height: trackSettings.height ?? 0,
+                }));
+                renderer = videoFiltersWeb.createRenderer(tfLite, videoEl, canvasEl, {
+                    backgroundFilter,
+                    backgroundBlurLevel,
+                    backgroundImage: bgImageEl ?? undefined,
+                }, onError);
+                outputStream = canvasEl.captureStream();
+                resolve(outputStream);
+            }, () => {
+                reject(new Error('Could not play the source video stream'));
+            });
+        });
+        return {
+            output,
+            stop: () => {
+                renderer?.dispose();
+                videoRef.current && (videoRef.current.srcObject = null);
+                outputStream && videoClient.disposeOfMediaStream(outputStream);
+            },
+        };
+    }, [backgroundBlurLevel, backgroundFilter, backgroundImage, tfLite]);
+    const children = (jsxRuntime.jsxs("div", { className: "str-video__background-filters", children: [jsxRuntime.jsx("video", { className: clsx('str-video__background-filters__video', videoSize.height > videoSize.width &&
+                    'str-video__background-filters__video--tall'), ref: videoRef, playsInline: true, muted: true, controls: false, ...videoSize }), backgroundImage && (jsxRuntime.jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: bgImageRef, src: backgroundImage, ...videoSize })), jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
+    return {
+        start,
+        children,
+    };
+};
+
 const IconButton = react.forwardRef(function IconButton(props, ref) {
     const { icon, enabled, variant, onClick, className, ...rest } = props;
     return (jsxRuntime.jsx("button", { className: clsx('str-video__call-controls__button', className, {
@@ -565,26 +822,7 @@ const IconButton = react.forwardRef(function IconButton(props, ref) {
         }, ref: ref, ...rest, children: jsxRuntime.jsx(Icon, { icon: icon }) }));
 });
 
-const isComponentType = (elementOrComponent) => {
-    return elementOrComponent === null
-        ? false
-        : !react.isValidElement(elementOrComponent);
-};
-
-const chunk = (array, size) => {
-    const chunkCount = Math.ceil(array.length / size);
-    return Array.from({ length: chunkCount }, (_, index) => array.slice(size * index, size * index + size));
-};
-
-const applyElementToRef = (ref, element) => {
-    if (!ref)
-        return;
-    if (typeof ref === 'function')
-        return ref(element);
-    ref.current = element;
-};
-
-const CompositeButton = react.forwardRef(function CompositeButton({ caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
+const CompositeButton = react.forwardRef(function CompositeButton({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button', className, {
             'str-video__composite-button--caption': caption,
             'str-video__composite-button--menu': Menu,
@@ -592,10 +830,11 @@ const CompositeButton = react.forwardRef(function CompositeButton({ caption, chi
                     'str-video__composite-button__button-group--active': active,
                     'str-video__composite-button__button-group--active-primary': active && variant === 'primary',
                     'str-video__composite-button__button-group--active-secondary': active && variant === 'secondary',
+                    'str-video__composite-button__button-group--disabled': disabled,
                 }), children: [jsxRuntime.jsx("button", { type: "button", className: "str-video__composite-button__button", onClick: (e) => {
                             e.preventDefault();
                             onClick?.(e);
-                        }, ...restButtonProps, children: children }), Menu && (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+                        }, disabled: disabled, ...restButtonProps, children: children }), Menu && (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
 });
 const DefaultToggleMenuButton = react.forwardRef(function DefaultToggleMenuButton({ menuShown }, ref) {
     return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
@@ -966,7 +1205,7 @@ const DropDownSelectOption = (props) => {
             'str-video__dropdown-option--selected': selected,
         }), ref: ref, ...getItemProps({
             onClick: () => handleSelect(index),
-        }), children: [jsxRuntime.jsx(Icon, { className: "str-video__dropdown-icon", icon: icon }), jsxRuntime.jsx("span", { className: "str-video__dropdown-label", children: label })] }));
+        }), children: [icon && jsxRuntime.jsx(Icon, { className: "str-video__dropdown-icon", icon: icon }), jsxRuntime.jsx("span", { className: "str-video__dropdown-label", children: label })] }));
 };
 const DropDownSelect = (props) => {
     const { children, icon, handleSelect, defaultSelectedLabel, defaultSelectedIndex, } = props;
@@ -1771,125 +2010,6 @@ const StreamTheme = ({ as: Component = 'div', className, children, ...props }) =
     return (jsxRuntime.jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
 };
 
-const DefaultVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder({ participant, style }, ref) {
-    const { t } = videoReactBindings.useI18n();
-    const [error, setError] = react.useState(false);
-    const name = participant.name || participant.userId;
-    return (jsxRuntime.jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
-                (name ? (jsxRuntime.jsx(InitialsFallback, { name: name })) : (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__no-video-label", children: t('Video is disabled') }))), participant.image && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "video-placeholder", 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 (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
-};
-
-const Video$1 = ({ trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs, ...rest }) => {
-    const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
-    const call = videoReactBindings.useCall();
-    const [videoElement, setVideoElement] = react.useState(null);
-    // start with true, will flip once the video starts playing
-    const [isVideoPaused, setIsVideoPaused] = react.useState(true);
-    const [isWideMode, setIsWideMode] = react.useState(true);
-    const stream = trackType === 'videoTrack'
-        ? videoStream
-        : trackType === 'screenShareTrack'
-            ? screenShareStream
-            : undefined;
-    react.useLayoutEffect(() => {
-        if (!call || !videoElement || trackType === 'none')
-            return;
-        const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
-        return () => {
-            cleanup?.();
-        };
-    }, [call, trackType, sessionId, videoElement]);
-    react.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'
-        ? videoClient.hasVideo(participant)
-        : trackType === 'screenShareTrack'
-            ? videoClient.hasScreenShare(participant)
-            : false;
-    const isInvisible = trackType === 'none' ||
-        viewportVisibilityState?.[trackType] === videoClient.VisibilityState.INVISIBLE;
-    const hasNoVideoOrInvisible = !isPublishingTrack || isInvisible;
-    const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
-    const isScreenShareTrack = trackType === 'screenShareTrack';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hasNoVideoOrInvisible && (jsxRuntime.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);
-                } })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsxRuntime.jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
-};
-Video$1.displayName = 'Video';
-
-/**
- * @description Extends video element with `stream` property
- * (`srcObject`) to reactively handle stream changes
- */
-const BaseVideo = react.forwardRef(function BaseVideo({ stream, ...rest }, ref) {
-    const [videoElement, setVideoElement] = react.useState(null);
-    react.useEffect(() => {
-        if (!videoElement || !stream)
-            return;
-        if (stream === videoElement.srcObject)
-            return;
-        videoElement.srcObject = stream;
-        if (videoClient.Browsers.isSafari() || videoClient.Browsers.isFirefox()) {
-            // Firefox and Safari have some timing issue
-            setTimeout(() => {
-                videoElement.srcObject = stream;
-                videoElement.play().catch((e) => {
-                    console.error(`Failed to play stream`, e);
-                });
-            }, 0);
-        }
-        return () => {
-            videoElement.pause();
-            videoElement.srcObject = null;
-        };
-    }, [stream, videoElement]);
-    return (jsxRuntime.jsx("video", { autoPlay: true, playsInline: true, ...rest, ref: (element) => {
-            applyElementToRef(ref, element);
-            setVideoElement(element);
-        } }));
-});
-
 const DefaultDisabledVideoPreview = () => {
     const { t } = videoReactBindings.useI18n();
     return (jsxRuntime.jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
@@ -1918,123 +2038,6 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
     return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
 };
 
-const ParticipantActionsContextMenu = () => {
-    const { participant, participantViewElement, videoElement } = useParticipantViewContext();
-    const [fullscreenModeOn, setFullscreenModeOn] = react.useState(!!document.fullscreenElement);
-    const [pictureInPictureElement, setPictureInPictureElement] = react.useState(document.pictureInPictureElement);
-    const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
-    const { pin, sessionId, userId } = participant;
-    const hasAudioTrack = videoClient.hasAudio(participant);
-    const hasVideoTrack = videoClient.hasVideo(participant);
-    const hasScreenShareTrack = videoClient.hasScreenShare(participant);
-    const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
-    const blockUser = () => call?.blockUser(userId);
-    const muteAudio = () => call?.muteUser(userId, 'audio');
-    const muteVideo = () => call?.muteUser(userId, 'video');
-    const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
-    const muteScreenShareAudio = () => call?.muteUser(userId, 'screenshare_audio');
-    const grantPermission = (permission) => () => {
-        call?.updateUserPermissions({
-            user_id: userId,
-            grant_permissions: [permission],
-        });
-    };
-    const revokePermission = (permission) => () => {
-        call?.updateUserPermissions({
-            user_id: userId,
-            revoke_permissions: [permission],
-        });
-    };
-    const toggleParticipantPin = () => {
-        if (pin) {
-            call?.unpin(sessionId);
-        }
-        else {
-            call?.pin(sessionId);
-        }
-    };
-    const pinForEveryone = () => {
-        call
-            ?.pinForEveryone({
-            user_id: userId,
-            session_id: sessionId,
-        })
-            .catch((err) => {
-            console.error(`Failed to pin participant ${userId}`, err);
-        });
-    };
-    const unpinForEveryone = () => {
-        call
-            ?.unpinForEveryone({
-            user_id: userId,
-            session_id: sessionId,
-        })
-            .catch((err) => {
-            console.error(`Failed to unpin participant ${userId}`, err);
-        });
-    };
-    const toggleFullscreenMode = () => {
-        if (!fullscreenModeOn) {
-            return participantViewElement?.requestFullscreen().catch(console.error);
-        }
-        return document.exitFullscreen().catch(console.error);
-    };
-    react.useEffect(() => {
-        // handles the case when fullscreen mode is toggled externally,
-        // e.g., by pressing ESC key or some other keyboard shortcut
-        const handleFullscreenChange = () => {
-            setFullscreenModeOn(!!document.fullscreenElement);
-        };
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        return () => {
-            document.removeEventListener('fullscreenchange', handleFullscreenChange);
-        };
-    }, []);
-    react.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) {
-            return videoElement
-                .requestPictureInPicture()
-                .catch(console.error);
-        }
-        return document.exitPictureInPicture().catch(console.error);
-    };
-    const { close } = useMenuContext() || {};
-    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
-                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-                }) })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
-                    direction: pictureInPictureElement === videoElement
-                        ? t('Leave')
-                        : t('Enter'),
-                }) })), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
-};
-
-const useTrackElementVisibility = ({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }) => {
-    const call = videoReactBindings.useCall();
-    const manager = propsDynascaleManager ?? call?.dynascaleManager;
-    react.useEffect(() => {
-        if (!trackedElement || !manager || !call || trackType === 'none')
-            return;
-        const unobserve = manager.trackElementVisibility(trackedElement, sessionId, trackType);
-        return () => {
-            unobserve();
-        };
-    }, [trackedElement, manager, call, sessionId, trackType]);
-};
-
 const ToggleButton = react.forwardRef(function ToggleButton(props, ref) {
     return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
 });
@@ -2077,7 +2080,7 @@ const SpeechIndicator = () => {
     return (jsxRuntime.jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" })] }));
 };
 
-const ParticipantView = react.forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
+const ParticipantView = react.forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
     const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
     const hasAudioTrack = videoClient.hasAudio(participant);
     const hasVideoTrack = videoClient.hasVideo(participant);
@@ -2091,6 +2094,8 @@ const ParticipantView = react.forwardRef(function ParticipantView({ participant,
         trackedElement,
         trackType,
     });
+    const { useIncomingVideoSettings } = videoReactBindings.useCallStateHooks();
+    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
     const participantViewContextValue = react.useMemo(() => ({
         participant,
         participantViewElement: trackedElement,
@@ -2117,7 +2122,9 @@ const ParticipantView = react.forwardRef(function ParticipantView({ participant,
     return (jsxRuntime.jsx("div", { "data-testid": "participant-view", ref: (element) => {
             applyElementToRef(ref, element);
             setTrackedElement(element);
-        }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
+        }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
+                        trackType !== 'videoTrack' ||
+                        isParticipantVideoEnabled(participant.sessionId), mirror: mirror, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
 });
 ParticipantView.displayName = 'ParticipantView';
 
@@ -2306,7 +2313,7 @@ const LivestreamLayout = (props) => {
         showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true }));
     return (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsxRuntime.jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: Overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
                 : true })), currentSpeaker && (jsxRuntime.jsx(ParticipantView, { className: clsx(hasOngoingScreenShare &&
-                    clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: FloatingParticipantOverlay || Overlay, muteAudio // audio is rendered by ParticipantsAudio
+                    clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: FloatingParticipantOverlay || Overlay, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
                 : true }))] }));
 };
 const ParticipantOverlay = (props) => {
@@ -2368,17 +2375,17 @@ const formatDuration = (durationInMs) => {
 };
 
 const GROUP_SIZE = 16;
-const PaginatedGridLayoutGroup = ({ group, VideoPlaceholder, ParticipantViewUI, }) => {
+const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, ParticipantViewUI, }) => {
     return (jsxRuntime.jsx("div", { className: clsx('str-video__paginated-grid-layout__group', {
             'str-video__paginated-grid-layout--one': group.length === 1,
             'str-video__paginated-grid-layout--two-four': group.length >= 2 && group.length <= 4,
             'str-video__paginated-grid-layout--five-nine': group.length >= 5 && group.length <= 9,
-        }), children: group.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
+        }), children: group.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
 };
 const PaginatedGridLayout = (props) => {
     const { groupSize = (props.groupSize || 0) > 0
         ? props.groupSize || GROUP_SIZE
-        : GROUP_SIZE, excludeLocalParticipant = false, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
+        : GROUP_SIZE, excludeLocalParticipant = false, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, } = props;
     const [page, setPage] = react.useState(0);
     const [paginatedGridLayoutWrapperElement, setPaginatedGridLayoutWrapperElement,] = react.useState(null);
     const call = videoReactBindings.useCall();
@@ -2402,9 +2409,10 @@ const PaginatedGridLayout = (props) => {
         }
     }, [page, pageCount]);
     const selectedGroup = participantGroups[page];
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
     if (!call)
         return null;
-    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
 };
 PaginatedGridLayout.displayName = 'PaginatedGridLayout';
 
@@ -2464,7 +2472,7 @@ hostElement, limit) => {
 };
 
 const DefaultParticipantViewUIBar = () => (jsxRuntime.jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
-const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, excludeLocalParticipant = false, pageArrowsVisible = true, }) => {
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, pageArrowsVisible = true, }) => {
     const call = videoReactBindings.useCall();
     const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
     const allParticipants = useParticipants();
@@ -2498,10 +2506,11 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
         // that one is rendered independently from otherParticipants array
         hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0));
     }
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
     if (!call)
         return null;
     return (jsxRuntime.jsxs("div", { className: "str-video__speaker-layout__wrapper", children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: clsx('str-video__speaker-layout', participantsBarPosition &&
-                    `str-video__speaker-layout--variant-${participantsBarPosition}`), children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__spotlight", children: participantInSpotlight && (jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) }), participantsWithAppliedLimit.length > 0 && participantsBarPosition && (jsxRuntime.jsxs("div", { ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper", children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement, children: jsxRuntime.jsxs("div", { ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar", children: [isSpeakerScreenSharing && (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }, participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }, participant.sessionId)))] }) }), pageArrowsVisible && isVertical && (jsxRuntime.jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), pageArrowsVisible && isHorizontal && (jsxRuntime.jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] }))] })] }));
+                    `str-video__speaker-layout--variant-${participantsBarPosition}`), children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__spotlight", children: participantInSpotlight && (jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, mirror: mirror, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) }), participantsWithAppliedLimit.length > 0 && participantsBarPosition && (jsxRuntime.jsxs("div", { ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper", children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement, children: jsxRuntime.jsxs("div", { ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar", children: [isSpeakerScreenSharing && (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, mirror: mirror, muteAudio: true }) }, participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, mirror: mirror, muteAudio: true }) }, participant.sessionId)))] }) }), pageArrowsVisible && isVertical && (jsxRuntime.jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), pageArrowsVisible && isHorizontal && (jsxRuntime.jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] }))] })] }));
 };
 SpeakerLayout.displayName = 'SpeakerLayout';
 const HorizontalScrollButtons = ({ scrollWrapper, }) => {
@@ -2547,7 +2556,7 @@ const LivestreamPlayer = (props) => {
     return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
 };
 
-const [major, minor, patch] = ("1.4.5").split('.');
+const [major, minor, patch] = ("1.6.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,