@stream-io/video-react-sdk 1.32.4 → 1.33.0

package/dist/embedded.cjs.js

@@ -0,0 +1,3410 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var videoReactBindings = require('@stream-io/video-react-bindings');
+var videoClient = require('@stream-io/video-client');
+var react$1 = require('@floating-ui/react');
+var clsx = require('clsx');
+
+const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
+    const call = videoReactBindings.useCall();
+    const [audioElement, setAudioElement] = react.useState(null);
+    const { userId, sessionId } = participant;
+    react.useEffect(() => {
+        if (!call || !audioElement)
+            return;
+        const cleanup = call.bindAudioElement(audioElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, sessionId, audioElement, trackType]);
+    return (jsxRuntime.jsx("audio", { autoPlay: true, ...rest, ref: setAudioElement, "data-user-id": userId, "data-session-id": sessionId, "data-track-type": trackType }));
+};
+Audio.displayName = 'Audio';
+
+const ParticipantsAudio = (props) => {
+    const { participants, audioProps } = props;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: participants.map((participant) => {
+            if (participant.isLocalParticipant)
+                return null;
+            const { audioStream, screenShareAudioStream, sessionId } = participant;
+            const hasAudioTrack = videoClient.hasAudio(participant);
+            const audioTrackElement = hasAudioTrack && audioStream && (jsxRuntime.jsx(Audio, { ...audioProps, trackType: "audioTrack", participant: participant }));
+            const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
+            const screenShareAudioTrackElement = hasScreenShareAudioTrack &&
+                screenShareAudioStream && (jsxRuntime.jsx(Audio, { ...audioProps, trackType: "screenShareAudioTrack", participant: participant }));
+            return (jsxRuntime.jsxs(react.Fragment, { children: [audioTrackElement, screenShareAudioTrackElement] }, sessionId));
+        }) }));
+};
+ParticipantsAudio.displayName = 'ParticipantsAudio';
+
+const ParticipantViewContext = react.createContext(undefined);
+const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
+
+const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: offsetInPx = 10, }) => {
+    const { refs, x, y, update, elements: { domReference, floating }, context, } = react$1.useFloating({
+        placement,
+        strategy,
+        middleware: [
+            react$1.offset(offsetInPx),
+            react$1.shift(),
+            react$1.flip(),
+            react$1.size({
+                padding: 10,
+                apply: ({ availableHeight, elements }) => {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+            ...middleware,
+        ],
+    });
+    // handle window resizing
+    react.useEffect(() => {
+        if (!domReference || !floating)
+            return;
+        const cleanup = react$1.autoUpdate(domReference, floating, update);
+        return () => cleanup();
+    }, [domReference, floating, update]);
+    return { refs, x, y, domReference, floating, strategy, context };
+};
+
+const SCROLL_THRESHOLD = 10;
+/**
+ * Hook which observes element's scroll position and returns text value based on the
+ * position of the scrollbar (`top`, `bottom`, `between` and `null` if no scrollbar is available)
+ */
+const useVerticalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD) => {
+    const [scrollPosition, setScrollPosition] = react.useState(null);
+    react.useEffect(() => {
+        if (!scrollElement)
+            return;
+        const scrollHandler = () => {
+            const element = scrollElement;
+            const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;
+            if (!hasVerticalScrollbar)
+                return setScrollPosition(null);
+            const isAtTheTop = element.scrollTop <= threshold;
+            if (isAtTheTop)
+                return setScrollPosition('top');
+            const isAtTheBottom = Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= threshold;
+            if (isAtTheBottom)
+                return setScrollPosition('bottom');
+            setScrollPosition('between');
+        };
+        const resizeObserver = new ResizeObserver(scrollHandler);
+        resizeObserver.observe(scrollElement);
+        scrollElement.addEventListener('scroll', scrollHandler);
+        return () => {
+            scrollElement.removeEventListener('scroll', scrollHandler);
+            resizeObserver.disconnect();
+        };
+    }, [scrollElement, threshold]);
+    return scrollPosition;
+};
+const useHorizontalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD) => {
+    const [scrollPosition, setScrollPosition] = react.useState(null);
+    react.useEffect(() => {
+        if (!scrollElement)
+            return;
+        const scrollHandler = () => {
+            const element = scrollElement;
+            const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
+            if (!hasHorizontalScrollbar)
+                return setScrollPosition(null);
+            const isAtTheStart = element.scrollLeft <= threshold;
+            if (isAtTheStart)
+                return setScrollPosition('start');
+            const isAtTheEnd = Math.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) <= threshold;
+            if (isAtTheEnd)
+                return setScrollPosition('end');
+            setScrollPosition('between');
+        };
+        const resizeObserver = new ResizeObserver(scrollHandler);
+        resizeObserver.observe(scrollElement);
+        scrollElement.addEventListener('scroll', scrollHandler);
+        return () => {
+            scrollElement.removeEventListener('scroll', scrollHandler);
+            resizeObserver.disconnect();
+        };
+    }, [scrollElement, threshold]);
+    return scrollPosition;
+};
+
+const useRequestPermission = (permission) => {
+    const call = videoReactBindings.useCall();
+    const { useHasPermissions } = videoReactBindings.useCallStateHooks();
+    const hasPermission = useHasPermissions(permission);
+    const [isAwaitingPermission, setIsAwaitingPermission] = react.useState(false); // TODO: load with possibly pending state
+    react.useEffect(() => {
+        const reset = () => setIsAwaitingPermission(false);
+        if (hasPermission)
+            reset();
+    }, [hasPermission]);
+    const requestPermission = react.useCallback(async () => {
+        if (hasPermission)
+            return true;
+        const canRequestPermission = !!call?.permissionsContext.canRequest(permission);
+        if (isAwaitingPermission || !canRequestPermission)
+            return false;
+        setIsAwaitingPermission(true);
+        try {
+            await call?.requestPermissions({
+                permissions: [permission],
+            });
+        }
+        catch (error) {
+            setIsAwaitingPermission(false);
+            throw new Error(`requestPermission failed: ${error}`);
+        }
+        return false;
+    }, [call, hasPermission, isAwaitingPermission, permission]);
+    return {
+        requestPermission,
+        hasPermission,
+        canRequestPermission: !!call?.permissionsContext.canRequest(permission),
+        isAwaitingPermission,
+    };
+};
+
+/**
+ * Utility hook that helps render a list of devices or implement a device selector.
+ * Compared to someting like `useCameraState().devices`, it has some handy features:
+ * 1. Adds the "Default" device to the list if applicable (either the user did not
+ * select a device, or a previously selected device is no longer available).
+ * 2. Maps the device list to a format more suitable for rendering.
+ */
+function useDeviceList(devices, selectedDeviceId) {
+    const { t } = videoReactBindings.useI18n();
+    return react.useMemo(() => {
+        let selectedDeviceInfo = null;
+        let selectedIndex = null;
+        const deviceList = devices.map((d, i) => {
+            const isSelected = d.deviceId === selectedDeviceId;
+            const device = { deviceId: d.deviceId, label: d.label, isSelected };
+            if (isSelected) {
+                selectedDeviceInfo = device;
+                selectedIndex = i;
+            }
+            return device;
+        });
+        if (selectedDeviceInfo === null || selectedIndex === null) {
+            const defaultDevice = {
+                deviceId: 'default',
+                label: t('Default'),
+                isSelected: true,
+            };
+            selectedDeviceInfo = defaultDevice;
+            selectedIndex = 0;
+            deviceList.unshift(defaultDevice);
+        }
+        return { deviceList, selectedDeviceInfo, selectedIndex };
+    }, [devices, selectedDeviceId, t]);
+}
+
+/**
+ * Enables drag-to-scroll functionality with momentum scrolling on a scrollable element.
+ *
+ * This hook allows users to click and drag to scroll an element, with momentum scrolling
+ * that continues after the drag ends. The drag only activates after moving beyond a threshold
+ *  distance, which prevents accidental drags from clicks.
+ *
+ * @param element - The HTML element to enable drag to scroll on.
+ * @param options - Options for customizing the drag-to-scroll behavior.
+ */
+function useDragToScroll(element, options = {}) {
+    const stateRef = react.useRef({
+        isDragging: false,
+        isPointerActive: false,
+        prevX: 0,
+        prevY: 0,
+        velocityX: 0,
+        velocityY: 0,
+        rafId: 0,
+        startX: 0,
+        startY: 0,
+    });
+    react.useEffect(() => {
+        if (!element || !options.enabled)
+            return;
+        const { decay = 0.95, minVelocity = 0.5, dragThreshold = 5 } = options;
+        const state = stateRef.current;
+        const stopMomentum = () => {
+            if (state.rafId) {
+                cancelAnimationFrame(state.rafId);
+                state.rafId = 0;
+            }
+            state.velocityX = 0;
+            state.velocityY = 0;
+        };
+        const momentumStep = () => {
+            state.velocityX *= decay;
+            state.velocityY *= decay;
+            element.scrollLeft -= state.velocityX;
+            element.scrollTop -= state.velocityY;
+            if (Math.abs(state.velocityX) < minVelocity &&
+                Math.abs(state.velocityY) < minVelocity) {
+                state.rafId = 0;
+                return;
+            }
+            state.rafId = requestAnimationFrame(momentumStep);
+        };
+        const onPointerDown = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            stopMomentum();
+            state.isDragging = false;
+            state.isPointerActive = true;
+            state.prevX = e.clientX;
+            state.prevY = e.clientY;
+            state.startX = e.clientX;
+            state.startY = e.clientY;
+        };
+        const onPointerMove = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            if (!state.isPointerActive)
+                return;
+            const dx = e.clientX - state.startX;
+            const dy = e.clientY - state.startY;
+            if (!state.isDragging && Math.hypot(dx, dy) > dragThreshold) {
+                state.isDragging = true;
+                e.preventDefault();
+            }
+            if (!state.isDragging)
+                return;
+            const moveDx = e.clientX - state.prevX;
+            const moveDy = e.clientY - state.prevY;
+            element.scrollLeft -= moveDx;
+            element.scrollTop -= moveDy;
+            state.velocityX = moveDx;
+            state.velocityY = moveDy;
+            state.prevX = e.clientX;
+            state.prevY = e.clientY;
+        };
+        const onPointerUpOrCancel = () => {
+            const wasDragging = state.isDragging;
+            state.isDragging = false;
+            state.isPointerActive = false;
+            state.prevX = 0;
+            state.prevY = 0;
+            state.startX = 0;
+            state.startY = 0;
+            if (!wasDragging) {
+                stopMomentum();
+                return;
+            }
+            if (Math.hypot(state.velocityX, state.velocityY) < minVelocity) {
+                stopMomentum();
+                return;
+            }
+            state.rafId = requestAnimationFrame(momentumStep);
+        };
+        element.addEventListener('pointerdown', onPointerDown);
+        element.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUpOrCancel);
+        window.addEventListener('pointercancel', onPointerUpOrCancel);
+        return () => {
+            element.removeEventListener('pointerdown', onPointerDown);
+            element.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUpOrCancel);
+            window.removeEventListener('pointercancel', onPointerUpOrCancel);
+            stopMomentum();
+        };
+    }, [element, options]);
+}
+
+var MenuVisualType;
+(function (MenuVisualType) {
+    MenuVisualType["PORTAL"] = "portal";
+    MenuVisualType["MENU"] = "menu";
+})(MenuVisualType || (MenuVisualType = {}));
+/**
+ * Used to provide utility APIs to the components rendered inside the portal.
+ */
+const MenuContext = react.createContext({});
+/**
+ * Access to the closes MenuContext.
+ */
+const useMenuContext = () => {
+    return react.useContext(MenuContext);
+};
+const MenuPortal = ({ children, refs, }) => {
+    const [portalRoot, setPortalRoot] = react.useState(null);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: setPortalRoot, className: "str-video__portal" }), jsxRuntime.jsx(react$1.FloatingOverlay, { children: jsxRuntime.jsx(react$1.FloatingPortal, { root: portalRoot, children: jsxRuntime.jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
+};
+const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = MenuVisualType.MENU, children, onToggle, }) => {
+    const [menuShown, setMenuShown] = react.useState(false);
+    const toggleHandler = react.useRef(onToggle);
+    toggleHandler.current = onToggle;
+    const { floating, domReference, refs, x, y } = useFloatingUIPreset({
+        placement,
+        strategy,
+        offset,
+    });
+    react.useEffect(() => {
+        const parentDocument = domReference?.ownerDocument;
+        const handleClick = (event) => {
+            if (!floating && domReference?.contains(event.target)) {
+                setMenuShown(true);
+                toggleHandler.current?.(true);
+            }
+            else if (floating && !floating?.contains(event.target)) {
+                setMenuShown(false);
+                toggleHandler.current?.(false);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key && // key can be undefined in some browsers
+                event.key.toLowerCase() === 'escape' &&
+                !event.altKey &&
+                !event.ctrlKey) {
+                setMenuShown(false);
+                toggleHandler.current?.(false);
+            }
+        };
+        parentDocument?.addEventListener('click', handleClick, { capture: true });
+        parentDocument?.addEventListener('keydown', handleKeyDown);
+        return () => {
+            parentDocument?.removeEventListener('click', handleClick, {
+                capture: true,
+            });
+            parentDocument?.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [floating, domReference]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuShown && (jsxRuntime.jsx(MenuContext.Provider, { value: { close: () => setMenuShown(false) }, children: visualType === MenuVisualType.PORTAL ? (jsxRuntime.jsx(MenuPortal, { refs: refs, children: children })) : visualType === MenuVisualType.MENU ? (jsxRuntime.jsx("div", { className: "str-video__menu-container", ref: refs.setFloating, style: {
+                        position: strategy,
+                        top: y ?? 0,
+                        left: x ?? 0,
+                        overflowY: 'auto',
+                    }, role: "menu", children: children })) : null })), jsxRuntime.jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
+};
+
+const GenericMenu = ({ children, onItemClick, }) => {
+    const ref = react.useRef(null);
+    return (jsxRuntime.jsx("ul", { className: "str-video__generic-menu", ref: ref, onClick: (e) => {
+            if (onItemClick &&
+                e.target !== ref.current &&
+                ref.current?.contains(e.target)) {
+                onItemClick(e);
+            }
+        }, children: children }));
+};
+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) }));
+
+function usePictureInPictureState(videoElement) {
+    const [isPiP, setIsPiP] = react.useState(document.pictureInPictureElement === videoElement);
+    if (!videoElement && isPiP)
+        setIsPiP(false);
+    react.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;
+}
+
+const ParticipantActionsContextMenu = () => {
+    const { participant, participantViewElement, videoElement } = useParticipantViewContext();
+    const [fullscreenModeOn, setFullscreenModeOn] = react.useState(!!document.fullscreenElement);
+    const call = videoReactBindings.useCall();
+    const isPiP = usePictureInPictureState(videoElement ?? undefined);
+    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 kickUser = () => call?.kickUser({ user_id: 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);
+        };
+    }, []);
+    const togglePictureInPicture = () => {
+        if (videoElement && !isPiP) {
+            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.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.KICK_USER], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsxRuntime.jsx(Icon, { icon: "kick-user" }), t('Kick')] }) }), 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 &&
+                typeof participantViewElement.requestFullscreen !== 'undefined' && (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: isPiP ? 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;
+};
+
+/**
+ * Normalizes a string for diacritic-insensitive comparison.
+ * E.g., "Éva" becomes "eva", allowing "eva" to match "Éva".
+ */
+const normalizeString = (value) => value
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .toLowerCase();
+
+/**
+ * @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 BaseVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
+    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: children }))), participant.image && !error && (jsxRuntime.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 (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
+};
+
+const DefaultVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder(props, ref) {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
+});
+
+const DefaultPictureInPicturePlaceholder = react.forwardRef(function DefaultPictureInPicturePlaceholder(props, ref) {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
+});
+
+const Video$1 = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, 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 isPiP = usePictureInPictureState(videoElement ?? undefined);
+    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 ||
+        videoClient.hasPausedTrack(participant, trackType);
+    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);
+                } })), isPiP && PictureInPicturePlaceholder && (jsxRuntime.jsx(PictureInPicturePlaceholder, { style: { position: 'absolute' }, participant: participant })), (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]] }) }));
+};
+
+const BackgroundFiltersProviderImpl = react.lazy(() => Promise.resolve().then(function () { return require('./embedded-BackgroundFilters-Zu84SkRR.cjs.js'); }).then((m) => ({
+    default: m.BackgroundFiltersProvider,
+})));
+/**
+ * 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 { SuspenseFallback = null, ...filterProps } = props;
+    return (jsxRuntime.jsx(react.Suspense, { fallback: SuspenseFallback, children: jsxRuntime.jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
+};
+
+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, {
+            [`str-video__call-controls__button--variant-${variant}`]: variant,
+            'str-video__call-controls__button--enabled': enabled,
+        }), onClick: (e) => {
+            e.preventDefault();
+            onClick?.(e);
+        }, ref: ref, ...rest, children: jsxRuntime.jsx(Icon, { icon: icon }) }));
+});
+
+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,
+        }), title: title, ref: ref, children: [jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button__button-group', {
+                    '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);
+                        }, 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', {
+            'str-video__menu-toggle-button--active': menuShown,
+        }), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
+});
+
+const TextButton = ({ children, ...rest }) => {
+    return (jsxRuntime.jsx("button", { ...rest, className: "str-video__text-button", children: children }));
+};
+
+const Notification = (props) => {
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, iconClassName = 'str-video__notification__icon', close, } = props;
+    const { refs, x, y, strategy } = useFloatingUIPreset({
+        placement,
+        strategy: 'absolute',
+    });
+    react.useEffect(() => {
+        if (!isVisible || !visibilityTimeout || !resetIsVisible)
+            return;
+        const timeout = setTimeout(() => {
+            resetIsVisible();
+        }, visibilityTimeout);
+        return () => clearTimeout(timeout);
+    }, [isVisible, resetIsVisible, visibilityTimeout]);
+    return (jsxRuntime.jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: clsx('str-video__notification', className), ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y ?? 0,
+                    left: x ?? 0,
+                    overflowY: 'auto',
+                }, children: [iconClassName && jsxRuntime.jsx("i", { className: iconClassName }), jsxRuntime.jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsxRuntime.jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
+};
+
+const PermissionNotification = (props) => {
+    const { permission, isAwaitingApproval, messageApproved, messageAwaitingApproval, messageRevoked, visibilityTimeout = 3500, children, } = props;
+    const { useHasPermissions } = videoReactBindings.useCallStateHooks();
+    const hasPermission = useHasPermissions(permission);
+    const prevHasPermission = react.useRef(hasPermission);
+    const [showNotification, setShowNotification] = react.useState();
+    react.useEffect(() => {
+        if (prevHasPermission.current === hasPermission)
+            return;
+        if (hasPermission) {
+            setShowNotification('granted');
+            prevHasPermission.current = true;
+        }
+        else {
+            setShowNotification('revoked');
+            prevHasPermission.current = false;
+        }
+    }, [hasPermission]);
+    const resetIsVisible = react.useCallback(() => setShowNotification(undefined), []);
+    if (isAwaitingApproval) {
+        return (jsxRuntime.jsx(Notification, { isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
+    }
+    return (jsxRuntime.jsx(Notification, { isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
+};
+
+const SpeakingWhileMutedNotification = ({ children, text, placement, }) => {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { isSpeakingWhileMuted } = useMicrophoneState();
+    const { t } = videoReactBindings.useI18n();
+    const message = text ?? t('You are muted. Unmute to speak.');
+    return (jsxRuntime.jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, placement: placement || 'top-start', children: children }));
+};
+
+const MicCaptureErrorNotification = ({ children, text, placement, }) => {
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const [isVisible, setIsVisible] = react.useState(false);
+    react.useEffect(() => {
+        if (!call)
+            return;
+        return call.on('mic.capture_report', (event) => {
+            setIsVisible(!event.capturesAudio);
+        });
+    }, [call]);
+    const message = text ??
+        t('Your microphone is not capturing audio. Please check your setup.');
+    return (jsxRuntime.jsx(Notification, { message: message, isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
+};
+
+const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
+    return (jsxRuntime.jsxs("div", { className: clsx('str-video__loading-indicator', className), title: tooltip, children: [jsxRuntime.jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && jsxRuntime.jsx("p", { className: "str-video__loading-indicator-text", children: text })] }));
+};
+
+const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
+    const arrowRef = react.useRef(null);
+    const { refs, x, y, strategy, context } = useFloatingUIPreset({
+        placement: tooltipPlacement,
+        strategy: 'absolute',
+        middleware: [react$1.arrow({ element: arrowRef })],
+    });
+    react.useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    if (!visible)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+        }, children: [jsxRuntime.jsx(react$1.FloatingArrow, { ref: arrowRef, context: context, fill: "var(--str-video__tooltip--background-color)" }), children] }));
+};
+
+const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
+    const [tooltipVisible, setTooltipVisible] = react.useState(false);
+    const handleMouseEnter = react.useCallback((e) => {
+        setTooltipVisible(true);
+        onMouseEnter?.(e);
+    }, [onMouseEnter]);
+    const handleMouseLeave = react.useCallback((e) => {
+        setTooltipVisible(false);
+        onMouseLeave?.(e);
+    }, [onMouseLeave]);
+    return { handleMouseEnter, handleMouseLeave, tooltipVisible };
+};
+
+// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component
+const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, tooltipDisabled, ...props }) => {
+    const { handleMouseEnter, handleMouseLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const [tooltipAnchor, setTooltipAnchor] = react.useState(null);
+    const tooltipActuallyVisible = !tooltipDisabled && Boolean(title) && tooltipVisible;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipActuallyVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsxRuntime.jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
+};
+
+const RecordEndConfirmation = () => {
+    const { t } = videoReactBindings.useI18n();
+    const { toggleCallRecording, isAwaitingResponse } = videoReactBindings.useToggleCallRecording();
+    const { close } = useMenuContext();
+    return (jsxRuntime.jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxRuntime.jsxs("div", { className: "str-video__end-recording__header", children: [jsxRuntime.jsx(Icon, { icon: "recording-on" }), jsxRuntime.jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsxRuntime.jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__actions", children: [jsxRuntime.jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsxRuntime.jsx(CompositeButton, { variant: "primary", onClick: toggleCallRecording, children: isAwaitingResponse ? jsxRuntime.jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
+};
+const ToggleEndRecordingMenuButton = react.forwardRef(function ToggleEndRecordingMenuButton(props, ref) {
+    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsxRuntime.jsx(Icon, { icon: "recording-off" }) }));
+});
+const RecordCallConfirmationButton = ({ caption, }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
+    if (isCallRecordingInProgress) {
+        return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
+                videoClient.OwnCapability.START_RECORD_CALL,
+                videoClient.OwnCapability.STOP_RECORD_CALL,
+            ], children: jsxRuntime.jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: MenuVisualType.PORTAL, children: jsxRuntime.jsx(RecordEndConfirmation, {}) }) }));
+    }
+    const title = isAwaitingResponse
+        ? t('Waiting for recording to start...')
+        : (caption ?? t('Record call'));
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
+            videoClient.OwnCapability.START_RECORD_CALL,
+            videoClient.OwnCapability.STOP_RECORD_CALL,
+        ], children: jsxRuntime.jsx(WithTooltip, { title: title, children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : toggleCallRecording, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (jsxRuntime.jsx(Icon, { icon: "recording-off" })) }) }) }));
+};
+
+const defaultEmojiReactionMap = {
+    ':like:': '👍',
+    ':raise-hand:': '✋',
+    ':fireworks:': '🎉',
+    ':dislike:': '👎',
+    ':heart:': '❤️',
+    ':smile:': '😀',
+};
+const Reaction = ({ participant: { reaction, sessionId }, hideAfterTimeoutInMs = 5500, emojiReactionMap = defaultEmojiReactionMap, }) => {
+    const call = videoReactBindings.useCall();
+    react.useEffect(() => {
+        if (!call || !reaction)
+            return;
+        const timeoutId = setTimeout(() => {
+            call.resetReaction(sessionId);
+        }, hideAfterTimeoutInMs);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [call, hideAfterTimeoutInMs, reaction, sessionId]);
+    if (!reaction)
+        return null;
+    const { emoji_code: emojiCode } = reaction;
+    return (jsxRuntime.jsx("div", { className: "str-video__reaction", children: jsxRuntime.jsx("span", { className: "str-video__reaction__emoji", children: emojiCode && emojiReactionMap[emojiCode] }) }));
+};
+
+const defaultReactions = [
+    {
+        type: 'reaction',
+        emoji_code: ':like:',
+    },
+    {
+        // TODO OL: use `prompt` type?
+        type: 'raised-hand',
+        emoji_code: ':raise-hand:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':fireworks:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':dislike:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':heart:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':smile:',
+    },
+];
+const ReactionsButton = ({ reactions = defaultReactions, }) => {
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(MenuToggle, { placement: "top", ToggleButton: ToggleReactionsMenuButton, visualType: MenuVisualType.MENU, children: jsxRuntime.jsx(DefaultReactionsMenu, { reactions: reactions }) }) }));
+};
+const ToggleReactionsMenuButton = react.forwardRef(function ToggleReactionsMenuButton({ menuShown }, ref) {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }) }));
+});
+const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
+    const call = videoReactBindings.useCall();
+    const { close } = useMenuContext();
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__reactions-menu', {
+            'str-video__reactions-menu--horizontal': layout === 'horizontal',
+            'str-video__reactions-menu--vertical': layout === 'vertical',
+        }), children: reactions.map((reaction) => (jsxRuntime.jsx("button", { type: "button", className: "str-video__reactions-menu__button", onClick: () => {
+                call?.sendReaction(reaction);
+                close?.();
+            }, children: reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code] }, reaction.emoji_code))) }));
+};
+
+/**
+ * Wraps an event handler, silencing and logging exceptions (excluding the NotAllowedError
+ * DOMException, which is a normal situation handled by the SDK)
+ *
+ * @param props component props, including the onError callback
+ * @param handler event handler to wrap
+ */
+const createCallControlHandler = (props, handler) => {
+    return async () => {
+        try {
+            await handler();
+        }
+        catch (error) {
+            if (props.onError) {
+                props.onError(error);
+                return;
+            }
+            if (!isNotAllowedError(error)) {
+                console.error('Call control handler failed', error);
+            }
+        }
+    };
+};
+function isNotAllowedError(error) {
+    return error instanceof DOMException && error.name === 'NotAllowedError';
+}
+
+const ScreenShareButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption, optimisticUpdates } = props;
+    const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } = videoReactBindings.useCallStateHooks();
+    const isSomeoneScreenSharing = useHasOngoingScreenShare();
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SCREENSHARE);
+    const callSettings = useCallSettings();
+    const isScreenSharingAllowed = callSettings?.screensharing.enabled;
+    const { screenShare, optionsAwareIsMute, isTogglePending } = useScreenShareState({
+        optimisticUpdates,
+    });
+    const amIScreenSharing = !optionsAwareIsMute;
+    const disableScreenShareButton = (!amIScreenSharing &&
+        (isSomeoneScreenSharing || isScreenSharingAllowed === false)) ||
+        (!optimisticUpdates && isTogglePending);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await screenShare.toggle();
+        }
+    });
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsxRuntime.jsx(WithTooltip, { title: caption ?? t('Share screen'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: "primary", "data-testid": isSomeoneScreenSharing
+                        ? 'screen-share-stop-button'
+                        : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsxRuntime.jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
+};
+
+const AudioVolumeIndicator = () => {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const [audioLevel, setAudioLevel] = react.useState(0);
+    react.useEffect(() => {
+        if (!isEnabled || !mediaStream)
+            return;
+        const disposeSoundDetector = videoClient.createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        return () => {
+            disposeSoundDetector().catch(console.error);
+        };
+    }, [isEnabled, mediaStream]);
+    return (jsxRuntime.jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsxRuntime.jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
+};
+
+const SelectContext = react.createContext({});
+const Select = (props) => {
+    const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
+    const [isOpen, setIsOpen] = react.useState(false);
+    const [activeIndex, setActiveIndex] = react.useState(null);
+    const [selectedIndex, setSelectedIndex] = react.useState(defaultSelectedIndex);
+    const [selectedLabel, setSelectedLabel] = react.useState(defaultSelectedLabel);
+    const { refs, context } = react$1.useFloating({
+        placement: 'bottom-start',
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: react$1.autoUpdate,
+        middleware: [react$1.flip()],
+    });
+    const elementsRef = react.useRef([]);
+    const labelsRef = react.useRef([]);
+    const handleSelect = react.useCallback((index) => {
+        setSelectedIndex(index);
+        handleSelectProp(index || 0);
+        setIsOpen(false);
+        if (index !== null) {
+            setSelectedLabel(labelsRef.current[index]);
+        }
+    }, [handleSelectProp]);
+    const handleTypeaheadMatch = (index) => {
+        if (isOpen) {
+            setActiveIndex(index);
+        }
+        else {
+            handleSelect(index);
+        }
+    };
+    const listNav = react$1.useListNavigation(context, {
+        listRef: elementsRef,
+        activeIndex,
+        selectedIndex,
+        onNavigate: setActiveIndex,
+    });
+    const typeahead = react$1.useTypeahead(context, {
+        listRef: labelsRef,
+        activeIndex,
+        selectedIndex,
+        onMatch: handleTypeaheadMatch,
+    });
+    const click = react$1.useClick(context);
+    const dismiss = react$1.useDismiss(context);
+    const role = react$1.useRole(context, { role: 'listbox' });
+    const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([listNav, typeahead, click, dismiss, role]);
+    const selectContext = react.useMemo(() => ({
+        activeIndex,
+        selectedIndex,
+        getItemProps,
+        handleSelect,
+    }), [activeIndex, selectedIndex, getItemProps, handleSelect]);
+    return (jsxRuntime.jsxs("div", { className: "str-video__dropdown", children: [jsxRuntime.jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxRuntime.jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), selectedLabel] }), jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsxRuntime.jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsxRuntime.jsx(react$1.FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
+};
+const DropDownSelectOption = (props) => {
+    const { selected, label, icon } = props;
+    const { getItemProps, handleSelect } = react.useContext(SelectContext);
+    const { ref, index } = react$1.useListItem();
+    return (jsxRuntime.jsxs("div", { className: clsx('str-video__dropdown-option', {
+            'str-video__dropdown-option--selected': selected,
+        }), ref: ref, ...getItemProps({
+            onClick: () => handleSelect(index),
+        }), 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;
+    return (jsxRuntime.jsx(Select, { icon: icon, handleSelect: handleSelect, defaultSelectedIndex: defaultSelectedIndex, defaultSelectedLabel: defaultSelectedLabel, children: children }));
+};
+
+const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, defaultChecked, value, }) => {
+    return (jsxRuntime.jsxs("label", { className: clsx('str-video__device-settings__option', {
+            'str-video__device-settings__option--selected': selected,
+            'str-video__device-settings__option--disabled': disabled,
+        }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
+};
+const DeviceSelectorList = (props) => {
+    const { devices = [], selectedDeviceId, title, type, onChange, children, } = props;
+    const { close } = useMenuContext();
+    const { deviceList } = useDeviceList(devices, selectedDeviceId);
+    return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), deviceList.map((device) => {
+                return (jsxRuntime.jsx(DeviceSelectorOption, { id: `${type}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
+                        const deviceId = e.target.value;
+                        if (deviceId !== 'default') {
+                            onChange?.(deviceId);
+                        }
+                        close?.();
+                    }, name: type, selected: device.isSelected }, device.deviceId));
+            }), children] }));
+};
+const DeviceSelectorDropdown = (props) => {
+    const { devices = [], selectedDeviceId, title, onChange, icon } = props;
+    const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(devices, selectedDeviceId);
+    const handleSelect = react.useCallback((index) => {
+        const deviceId = deviceList[index].deviceId;
+        if (deviceId !== 'default') {
+            onChange?.(deviceId);
+        }
+    }, [deviceList, onChange]);
+    return (jsxRuntime.jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsxRuntime.jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), jsxRuntime.jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: selectedDeviceInfo.label, handleSelect: handleSelect, children: deviceList.map((device) => (jsxRuntime.jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.isSelected }, device.deviceId))) })] }));
+};
+const DeviceSelector = (props) => {
+    const { visualType = 'list', icon, ...rest } = props;
+    if (visualType === 'list') {
+        return jsxRuntime.jsx(DeviceSelectorList, { ...rest });
+    }
+    return jsxRuntime.jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
+};
+
+/**
+ * SpeakerTest component that plays a test audio through the selected speaker.
+ * This allows users to verify their audio output device is working correctly.
+ */
+const SpeakerTest = (props) => {
+    const { useSpeakerState } = videoReactBindings.useCallStateHooks();
+    const { selectedDevice } = useSpeakerState();
+    const audioElementRef = react.useRef(null);
+    const [isPlaying, setIsPlaying] = react.useState(false);
+    const { t } = videoReactBindings.useI18n();
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.33.0"}/assets/piano.mp3`, } = props;
+    // Update audio output device when selection changes
+    react.useEffect(() => {
+        const audio = audioElementRef.current;
+        if (!audio || !selectedDevice)
+            return;
+        // Set the sinkId to route audio to the selected speaker
+        if ('setSinkId' in audio) {
+            audio.setSinkId(selectedDevice).catch((err) => {
+                console.error('Failed to set audio output device:', err);
+            });
+        }
+    }, [selectedDevice]);
+    const handleStartTest = react.useCallback(async () => {
+        const audio = audioElementRef.current;
+        if (!audio)
+            return;
+        audio.src = audioUrl;
+        try {
+            if (isPlaying) {
+                audio.pause();
+                audio.currentTime = 0;
+                setIsPlaying(false);
+            }
+            else {
+                await audio.play();
+                setIsPlaying(true);
+            }
+        }
+        catch (err) {
+            console.error('Failed to play test audio:', err);
+            setIsPlaying(false);
+        }
+    }, [isPlaying, audioUrl]);
+    const handleAudioEnded = react.useCallback(() => setIsPlaying(false), []);
+    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-test", children: [jsxRuntime.jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsxRuntime.jsx(CompositeButton, { className: "str-video__speaker-test__button", onClick: handleStartTest, type: "button", children: jsxRuntime.jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), isPlaying ? t('Stop test') : t('Test speaker')] }) })] }));
+};
+
+const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { microphone, selectedDevice, devices } = useMicrophoneState();
+    return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
+            await microphone.select(deviceId);
+        }, title: title, visualType: visualType, icon: "mic", children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(AudioVolumeIndicator, {})] })) }));
+};
+const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
+    const { useSpeakerState } = videoReactBindings.useCallStateHooks();
+    const { speaker, selectedDevice, devices, isDeviceSelectionSupported } = useSpeakerState();
+    if (!isDeviceSelectionSupported)
+        return null;
+    return (jsxRuntime.jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
+            speaker.select(deviceId);
+        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
+};
+
+const DeviceSelectorVideo = ({ title, visualType, }) => {
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { camera, devices, selectedDevice } = useCameraState();
+    return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], type: "videoinput", selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
+            await camera.select(deviceId);
+        }, title: title, visualType: visualType, icon: "camera" }));
+};
+
+react.forwardRef(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+            'str-video__device-settings__button--active': menuShown,
+        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
+});
+
+const ToggleAudioPreviewButton = (props) => {
+    const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { t } = videoReactBindings.useI18n();
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { microphone, hasBrowserPermission, isPromptingPermission, optionsAwareIsMute, isTogglePending, } = useMicrophoneState({ optimisticUpdates });
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, () => microphone.toggle());
+    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
+            ? t('Check your browser audio permissions')
+            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
+                ? 'preview-audio-unmute-button'
+                : 'preview-audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                setTooltipDisabled(shown);
+                onMenuToggle?.(shown);
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+};
+const ToggleAudioPublishingButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption, Menu = jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { microphone, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useMicrophoneState({ optimisticUpdates });
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await microphone.toggle();
+        }
+    });
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now speak.'), messageAwaitingApproval: t('Awaiting for an approval to speak.'), messageRevoked: t('You can no longer speak.'), children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
+                    ? t('You have no permission to share your audio')
+                    : !hasBrowserPermission
+                        ? t('Check your browser mic permissions')
+                        : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                        !hasPermission ||
+                        // disable button while the toggle action is pending when not using optimistic updates
+                        (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                        setTooltipDisabled(shown);
+                        onMenuToggle?.(shown);
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
+};
+
+const ToggleVideoPreviewButton = (props) => {
+    const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { t } = videoReactBindings.useI18n();
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { camera, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useCameraState({ optimisticUpdates });
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, () => camera.toggle());
+    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
+            ? t('Check your browser video permissions')
+            : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
+                ? 'preview-video-unmute-button'
+                : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                setTooltipDisabled(shown);
+                onMenuToggle?.(shown);
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }));
+};
+const ToggleVideoPublishingButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption, Menu = jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
+    const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.OwnCapability.SEND_VIDEO);
+    const { useCameraState, useCallSettings } = videoReactBindings.useCallStateHooks();
+    const { camera, optionsAwareIsMute, hasBrowserPermission, isPromptingPermission, isTogglePending, } = useCameraState({ optimisticUpdates });
+    const callSettings = useCallSettings();
+    const isPublishingVideoAllowed = callSettings?.video.enabled;
+    const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
+    const handleClick = createCallControlHandler(props, async () => {
+        if (!hasPermission) {
+            await requestPermission();
+        }
+        else {
+            await camera.toggle();
+        }
+    });
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
+                    ? t('You have no permission to share your video')
+                    : !hasBrowserPermission
+                        ? t('Check your browser video permissions')
+                        : !isPublishingVideoAllowed
+                            ? t('Video publishing is disabled by the system')
+                            : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+                        !hasPermission ||
+                        !isPublishingVideoAllowed ||
+                        (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
+                        setTooltipDisabled(shown);
+                        onMenuToggle?.(shown);
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                            !hasPermission ||
+                            !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" }))] }) }) }) }));
+};
+
+const EndCallMenu = (props) => {
+    const { onLeave, onEnd } = props;
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.END_CALL], children: jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
+};
+const CancelCallToggleMenuButton = react.forwardRef(function CancelCallToggleMenuButton({ menuShown }, ref) {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
+});
+const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
+    const call = videoReactBindings.useCall();
+    const handleLeave = react.useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            try {
+                await call.leave();
+                onLeave?.();
+            }
+            catch (err) {
+                console.error(`Failed to leave call`, err);
+                onLeave?.(err);
+            }
+        }
+    }, [onClick, onLeave, call]);
+    const handleEndCall = react.useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            try {
+                await call.endCall();
+                onLeave?.();
+            }
+            catch (err) {
+                console.error(`Failed to end call`, err);
+                onLeave?.(err);
+            }
+        }
+    }, [onClick, onLeave, call]);
+    return (jsxRuntime.jsx(MenuToggle, { placement: "top-start", ToggleButton: CancelCallToggleMenuButton, children: jsxRuntime.jsx(EndCallMenu, { onEnd: handleEndCall, onLeave: handleLeave }) }));
+};
+
+react.lazy(() => Promise.resolve().then(function () { return require('./embedded-CallStatsLatencyChart-CpL1M_s0.cjs.js'); }));
+var Status;
+(function (Status) {
+    Status["GOOD"] = "Good";
+    Status["OK"] = "Ok";
+    Status["BAD"] = "Bad";
+})(Status || (Status = {}));
+
+react.forwardRef(function ToggleMenuButton(props, ref) {
+    const { t } = videoReactBindings.useI18n();
+    const { caption, menuShown } = props;
+    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, caption: caption, title: caption || t('Statistics'), "data-testid": "stats-button", children: jsxRuntime.jsx(Icon, { icon: "stats" }) }));
+});
+
+const BlockedUserListing = ({ data }) => {
+    if (!data.length)
+        return null;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: "str-video__participant-listing", children: data.map((userId) => (jsxRuntime.jsx(BlockedUserListingItem, { userId: userId }, userId))) }) }));
+};
+const BlockedUserListingItem = ({ userId }) => {
+    const call = videoReactBindings.useCall();
+    const unblockUserClickHandler = () => {
+        if (userId)
+            call?.unblockUser(userId);
+    };
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsx(TextButton, { onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
+};
+
+const CallParticipantListHeader = ({ onClose, }) => {
+    const { useParticipants, useAnonymousParticipantCount } = videoReactBindings.useCallStateHooks();
+    const participants = useParticipants();
+    const anonymousParticipantCount = useAnonymousParticipantCount();
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
+};
+
+const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
+    const isAudioOn = videoClient.hasAudio(participant);
+    const isVideoOn = videoClient.hasVideo(participant);
+    const isPinnedOn = videoClient.isPinned(participant);
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsxRuntime.jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsxRuntime.jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
+};
+const MediaIndicator = (props) => (jsxRuntime.jsx(WithTooltip, { ...props }));
+const DefaultDisplayName = ({ participant }) => {
+    const connectedUser = videoReactBindings.useConnectedUser();
+    const { t } = videoReactBindings.useI18n();
+    const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';
+    const nameOrId = participant.name || participant.userId || t('Unknown');
+    let displayName;
+    if (!participant.name) {
+        displayName = meFlag || nameOrId || t('Unknown');
+    }
+    else if (meFlag) {
+        displayName = `${nameOrId} (${meFlag})`;
+    }
+    else {
+        displayName = nameOrId;
+    }
+    return (jsxRuntime.jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
+};
+const ToggleButton$2 = react.forwardRef(function ToggleButton(props, ref) {
+    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+
+const CallParticipantListing = ({ data, }) => (jsxRuntime.jsx("div", { className: "str-video__participant-listing", children: data.map((participant) => (jsxRuntime.jsx(CallParticipantListingItem, { participant: participant }, participant.sessionId))) }));
+
+const EmptyParticipantSearchList = () => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__participant-list--empty", children: t('No participants found') }));
+};
+
+const SearchInput = ({ exitSearch, isActive, ...rest }) => {
+    const [inputElement, setInputElement] = react.useState(null);
+    react.useEffect(() => {
+        if (!inputElement)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key.toLowerCase() === 'escape')
+                exitSearch();
+        };
+        inputElement.addEventListener('keydown', handleKeyDown);
+        return () => {
+            inputElement.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [exitSearch, inputElement]);
+    return (jsxRuntime.jsxs("div", { className: clsx('str-video__search-input__container', {
+            'str-video__search-input__container--active': isActive,
+        }), children: [jsxRuntime.jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsxRuntime.jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsxRuntime.jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsxRuntime.jsx("span", { className: "str-video__search-input__icon" }))] }));
+};
+
+function SearchResults({ EmptySearchResultComponent, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }) {
+    if (searchQueryInProgress) {
+        return (jsxRuntime.jsx("div", { className: "str-video__search-results--loading", children: jsxRuntime.jsx(LoadingIndicator$1, {}) }));
+    }
+    if (!searchResults.length) {
+        return jsxRuntime.jsx(EmptySearchResultComponent, {});
+    }
+    return jsxRuntime.jsx(SearchResultList, { data: searchResults });
+}
+
+const useSearch = ({ debounceInterval = 200, searchFn, searchQuery = '', }) => {
+    const [searchResults, setSearchResults] = react.useState([]);
+    const [searchQueryInProgress, setSearchQueryInProgress] = react.useState(false);
+    const searchFnRef = react.useRef(searchFn);
+    searchFnRef.current = searchFn;
+    react.useEffect(() => {
+        if (!searchQuery.length) {
+            setSearchQueryInProgress(false);
+            setSearchResults([]);
+            return;
+        }
+        setSearchQueryInProgress(true);
+        const timeout = setTimeout(async () => {
+            try {
+                const results = await searchFnRef.current(searchQuery);
+                setSearchResults(results);
+            }
+            catch (error) {
+                console.error(error);
+            }
+            finally {
+                setSearchQueryInProgress(false);
+            }
+        }, debounceInterval);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [debounceInterval, searchQuery]);
+    return {
+        searchQueryInProgress,
+        searchResults,
+    };
+};
+
+const UserListTypes = {
+    active: 'Active users',
+    blocked: 'Blocked users',
+};
+const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearchFn, debounceSearchInterval, }) => {
+    const [searchQuery, setSearchQuery] = react.useState('');
+    const [userListType, setUserListType] = react.useState('active');
+    const exitSearch = react.useCallback(() => setSearchQuery(''), []);
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list", children: [jsxRuntime.jsx(CallParticipantListHeader, { onClose: onClose }), jsxRuntime.jsx(SearchInput, { value: searchQuery, onChange: ({ currentTarget }) => setSearchQuery(currentTarget.value), exitSearch: exitSearch, isActive: !!searchQuery }), jsxRuntime.jsx(CallParticipantListContentHeader, { userListType: userListType, setUserListType: setUserListType }), jsxRuntime.jsxs("div", { className: "str-video__participant-list__content", children: [userListType === 'active' && (jsxRuntime.jsx(ActiveUsersSearchResults, { searchQuery: searchQuery, activeUsersSearchFn: activeUsersSearchFn, debounceSearchInterval: debounceSearchInterval })), userListType === 'blocked' && (jsxRuntime.jsx(BlockedUsersSearchResults, { searchQuery: searchQuery, blockedUsersSearchFn: blockedUsersSearchFn, debounceSearchInterval: debounceSearchInterval }))] })] }));
+};
+const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const muteAll = react.useCallback(() => {
+        call?.muteAllUsers('audio');
+    }, [call]);
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(TextButton, { onClick: muteAll, children: t('Mute all') }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
+};
+const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
+    const { useParticipants } = videoReactBindings.useCallStateHooks();
+    const participants = useParticipants({ sortBy: videoClient.name });
+    const activeUsersSearchFn = react.useCallback(async (queryString) => {
+        const normalizedQuery = normalizeString(queryString);
+        const queryRegExp = new RegExp(normalizedQuery, 'i');
+        return participants.filter((p) => normalizeString(p.name).match(queryRegExp));
+    }, [participants]);
+    const { searchQueryInProgress, searchResults } = useSearch({
+        searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,
+        debounceInterval: debounceSearchInterval,
+        searchQuery,
+    });
+    return (jsxRuntime.jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : participants, SearchResultList: CallParticipantListing }));
+};
+const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnFromProps, debounceSearchInterval, searchQuery, }) => {
+    const { useCallBlockedUserIds } = videoReactBindings.useCallStateHooks();
+    const blockedUsers = useCallBlockedUserIds();
+    const blockedUsersSearchFn = react.useCallback(async (queryString) => {
+        const queryRegExp = new RegExp(queryString, 'i');
+        return blockedUsers.filter((userId) => userId.match(queryRegExp));
+    }, [blockedUsers]);
+    const { searchQueryInProgress, searchResults } = useSearch({
+        searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,
+        debounceInterval: debounceSearchInterval,
+        searchQuery,
+    });
+    return (jsxRuntime.jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
+};
+const ToggleButton$1 = react.forwardRef(function ToggleButton(props, ref) {
+    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
+});
+
+const NoiseCancellationContext = react.createContext(null);
+const NoiseCancellationProvider = (props) => {
+    const { children, noiseCancellation } = props;
+    const call = videoReactBindings.useCall();
+    const { useCallSettings, useHasPermissions } = videoReactBindings.useCallStateHooks();
+    const settings = useCallSettings();
+    const noiseCancellationAllowed = !!(settings &&
+        settings.audio.noise_cancellation &&
+        settings.audio.noise_cancellation.mode !==
+            videoClient.NoiseCancellationSettingsModeEnum.DISABLED);
+    const hasCapability = useHasPermissions(videoClient.OwnCapability.ENABLE_NOISE_CANCELLATION);
+    const [isSupportedByBrowser, setIsSupportedByBrowser] = react.useState();
+    react.useEffect(() => {
+        const result = noiseCancellation.isSupported();
+        if (typeof result === 'boolean') {
+            setIsSupportedByBrowser(result);
+        }
+        else {
+            result
+                .then((s) => setIsSupportedByBrowser(s))
+                .catch((err) => console.error(`Can't determine if noise cancellation is supported`, err));
+        }
+    }, [noiseCancellation]);
+    const isSupported = isSupportedByBrowser && hasCapability && noiseCancellationAllowed;
+    const [isEnabled, setIsEnabled] = react.useState(false);
+    const deinit = react.useRef(undefined);
+    react.useEffect(() => {
+        if (!call || !isSupported)
+            return;
+        noiseCancellation.isEnabled().then((e) => setIsEnabled(e));
+        const unsubscribe = noiseCancellation.on('change', (v) => setIsEnabled(v));
+        const init = (deinit.current || Promise.resolve())
+            .then(() => noiseCancellation.init({ tracer: call.tracer }))
+            .then(() => call.microphone.enableNoiseCancellation(noiseCancellation))
+            .catch((e) => console.error(`Can't initialize noise cancellation`, e));
+        return () => {
+            deinit.current = init
+                .then(() => call.microphone.disableNoiseCancellation())
+                .then(() => noiseCancellation.dispose())
+                .then(() => unsubscribe());
+        };
+    }, [call, isSupported, noiseCancellation]);
+    const contextValue = react.useMemo(() => ({
+        isSupported,
+        isEnabled,
+        setSuppressionLevel: (level) => {
+            if (!noiseCancellation)
+                return;
+            noiseCancellation.setSuppressionLevel(level);
+        },
+        setEnabled: (enabledOrSetter) => {
+            if (!noiseCancellation)
+                return;
+            const enable = typeof enabledOrSetter === 'function'
+                ? enabledOrSetter(isEnabled)
+                : enabledOrSetter;
+            if (enable) {
+                noiseCancellation.enable().catch((err) => {
+                    console.error('Failed to enable noise cancellation', err);
+                });
+            }
+            else {
+                noiseCancellation.disable().catch((err) => {
+                    console.error('Failed to disable noise cancellation', err);
+                });
+            }
+        },
+    }), [isEnabled, isSupported, noiseCancellation]);
+    return (jsxRuntime.jsx(NoiseCancellationContext.Provider, { value: contextValue, children: children }));
+};
+
+({
+    [videoClient.CallingState.JOINING]: 'Joining',
+    [videoClient.CallingState.RINGING]: 'Ringing',
+    [videoClient.CallingState.MIGRATING]: 'Migrating',
+    [videoClient.CallingState.RECONNECTING]: 'Re-connecting',
+    [videoClient.CallingState.RECONNECTING_FAILED]: 'Failed',
+    [videoClient.CallingState.OFFLINE]: 'No internet connection',
+    [videoClient.CallingState.IDLE]: '',
+    [videoClient.CallingState.UNKNOWN]: '',
+    [videoClient.CallingState.JOINED]: 'Joined',
+    [videoClient.CallingState.LEFT]: 'Left call',
+});
+
+const byNameOrId = (a, b) => {
+    if (a.name && b.name && a.name < b.name)
+        return -1;
+    if (a.name && b.name && a.name > b.name)
+        return 1;
+    if (a.id < b.id)
+        return -1;
+    if (a.id > b.id)
+        return 1;
+    return 0;
+};
+const PermissionRequests = () => {
+    const call = videoReactBindings.useCall();
+    const { useLocalParticipant, useHasPermissions } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const [expanded, setExpanded] = react.useState(false);
+    const [permissionRequests, setPermissionRequests] = react.useState([]);
+    const canUpdateCallPermissions = useHasPermissions(videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS);
+    const localUserId = localParticipant?.userId;
+    react.useEffect(() => {
+        if (!call || !canUpdateCallPermissions)
+            return;
+        return call.on('call.permission_request', (event) => {
+            if (event.user.id !== localUserId) {
+                setPermissionRequests((requests) => [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)));
+            }
+        });
+    }, [call, canUpdateCallPermissions, localUserId]);
+    const handleUpdatePermission = (request, type) => {
+        return async () => {
+            const { user, permissions } = request;
+            switch (type) {
+                case 'grant':
+                    await call?.grantPermissions(user.id, permissions);
+                    break;
+                case 'revoke':
+                    await call?.revokePermissions(user.id, permissions);
+                    break;
+            }
+            setPermissionRequests((requests) => requests.filter((r) => r !== request));
+        };
+    };
+    const { refs, x, y, strategy } = useFloatingUIPreset({
+        placement: 'bottom',
+        strategy: 'absolute',
+    });
+    // don't render anything if there are no permission requests
+    if (permissionRequests.length === 0)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxRuntime.jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxRuntime.jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsxRuntime.jsx(Button, { type: "button", onClick: () => {
+                            setExpanded((e) => !e);
+                        }, children: expanded ? 'Hide requests' : 'Show requests' })] }), expanded && (jsxRuntime.jsx(PermissionRequestList, { ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y ?? 0,
+                    left: x ?? 0,
+                    overflowY: 'auto',
+                }, permissionRequests: permissionRequests, handleUpdatePermission: handleUpdatePermission }))] }));
+};
+const PermissionRequestList = react.forwardRef(function PermissionRequestList(props, ref) {
+    const { permissionRequests, handleUpdatePermission, ...rest } = props;
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
+            const { user, permissions } = request;
+            return (jsxRuntime.jsx(react.Fragment, { children: permissions.map((permission) => (jsxRuntime.jsxs("div", { className: "str-video__permission-request", children: [jsxRuntime.jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--allow", type: "button", onClick: handleUpdatePermission(request, 'grant'), children: t('Allow') }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'revoke'), children: t('Revoke') }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'dismiss'), children: t('Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
+        }) }));
+});
+const Button = (props) => {
+    const { className, ...rest } = props;
+    return (jsxRuntime.jsx("button", { className: clsx('str-video__permission-request__button', className), ...rest }));
+};
+const messageForPermission = (userName, permission, t) => {
+    switch (permission) {
+        case videoClient.OwnCapability.SEND_AUDIO:
+            return t('{{ userName }} is requesting to speak', { userName });
+        case videoClient.OwnCapability.SEND_VIDEO:
+            return t('{{ userName }} is requesting to share their camera', {
+                userName,
+            });
+        case videoClient.OwnCapability.SCREENSHARE:
+            return t('{{ userName }} is requesting to present their screen', {
+                userName,
+            });
+        default:
+            return t('{{ userName }} is requesting permission: {{ permission }}', {
+                userName,
+                permission,
+            });
+    }
+};
+
+const StreamTheme = ({ as: Component = 'div', className, children, ...props }) => {
+    return (jsxRuntime.jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
+};
+
+const DefaultDisabledVideoPreview = () => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
+};
+const DefaultNoCameraPreview = () => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('No camera found') }));
+};
+const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, }) => {
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { devices, status, isMute, mediaStream } = useCameraState();
+    let contents;
+    if (isMute && devices?.length === 0) {
+        contents = jsxRuntime.jsx(NoCameraPreview, {});
+    }
+    else if (status === 'enabled') {
+        const loading = !mediaStream;
+        contents = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mediaStream && (jsxRuntime.jsx(BaseVideo, { stream: mediaStream, className: clsx('str-video__video-preview', {
+                        'str-video__video-preview--mirror': mirror,
+                        'str-video__video-preview--loading': loading,
+                    }) })), loading && jsxRuntime.jsx(StartingCameraPreview, {})] }));
+    }
+    else {
+        contents = jsxRuntime.jsx(DisabledVideoPreview, {});
+    }
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
+};
+
+const ToggleButton = react.forwardRef(function ToggleButton(props, ref) {
+    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+const DefaultScreenShareOverlay = () => {
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const stopScreenShare = () => {
+        call?.screenShare.disable().catch((err) => {
+            console.error('Failed to stop screen sharing:', err);
+        });
+    };
+    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, type: "button", className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
+};
+const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, }) => {
+    const { participant, trackType } = useParticipantViewContext();
+    const isScreenSharing = videoClient.hasScreenShare(participant);
+    if (participant.isLocalParticipant &&
+        isScreenSharing &&
+        trackType === 'screenShareTrack') {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DefaultScreenShareOverlay, {}), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showMenuButton && (jsxRuntime.jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsxRuntime.jsx(ParticipantActionsContextMenu$1, {}) })), jsxRuntime.jsx(Reaction, { participant: participant }), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+};
+const ParticipantDetails = ({ indicatorsVisible = true, }) => {
+    const { participant, trackType } = useParticipantViewContext();
+    const { isLocalParticipant, connectionQuality, pin, sessionId, name, userId, } = participant;
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const connectionQualityAsString = !!connectionQuality &&
+        videoClient.SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
+    const hasAudioTrack = videoClient.hasAudio(participant);
+    const hasVideoTrack = videoClient.hasVideo(participant);
+    const canUnpin = !!pin && pin.isLocalPin;
+    const isTrackPaused = trackType !== 'none' ? videoClient.hasPausedTrack(participant, trackType) : false;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && canUnpin && (
+                        // TODO: remove this monstrosity once we have a proper design
+                        jsxRuntime.jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
+                    connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
+};
+const SpeechIndicator = () => {
+    const { participant } = useParticipantViewContext();
+    const { isSpeaking, isDominantSpeaker } = participant;
+    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', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
+    const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
+    const hasAudioTrack = videoClient.hasAudio(participant);
+    const hasVideoTrack = videoClient.hasVideo(participant);
+    const hasScreenShareAudioTrack = videoClient.hasScreenShareAudio(participant);
+    const [trackedElement, setTrackedElement] = react.useState(null);
+    const [contextVideoElement, setContextVideoElement] = react.useState(null);
+    const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] = react.useState(null);
+    // TODO: allow to pass custom ViewportTracker instance from props
+    useTrackElementVisibility({
+        sessionId,
+        trackedElement,
+        trackType,
+    });
+    const { useIncomingVideoSettings } = videoReactBindings.useCallStateHooks();
+    const { isParticipantVideoEnabled } = useIncomingVideoSettings();
+    const participantViewContextValue = react.useMemo(() => ({
+        participant,
+        participantViewElement: trackedElement,
+        videoElement: contextVideoElement,
+        videoPlaceholderElement: contextVideoPlaceholderElement,
+        trackType,
+    }), [
+        contextVideoElement,
+        contextVideoPlaceholderElement,
+        participant,
+        trackedElement,
+        trackType,
+    ]);
+    const videoRefs = react.useMemo(() => ({
+        setVideoElement: (element) => {
+            setVideoElement?.(element);
+            setContextVideoElement(element);
+        },
+        setVideoPlaceholderElement: (element) => {
+            setVideoPlaceholderElement?.(element);
+            setContextVideoPlaceholderElement(element);
+        },
+    }), [setVideoElement, setVideoPlaceholderElement]);
+    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, PictureInPicturePlaceholder: PictureInPicturePlaceholder, 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';
+
+// re-exporting the StreamCallProvider as StreamCall
+const StreamCall = videoReactBindings.StreamCallProvider;
+StreamCall.displayName = 'StreamCall';
+
+var Joining = "Joining";
+var Mic = "Mic";
+var Ringing = "Ringing";
+var Speakers = "Speakers";
+var Video = "Video";
+var Live = "Live";
+var Reactions = "Reactions";
+var Statistics = "Statistics";
+var Invite = "Invite";
+var Join = "Join";
+var You = "You";
+var Me = "Me";
+var Unknown = "Unknown";
+var Default = "Default";
+var Refresh = "Refresh";
+var Allow = "Allow";
+var Revoke = "Revoke";
+var Dismiss = "Dismiss";
+var Pinned = "Pinned";
+var Unpin = "Unpin";
+var Pin = "Pin";
+var Block = "Block";
+var Kick = "Kick";
+var Enter = "Enter";
+var Leave = "Leave";
+var Participants = "Participants";
+var Anonymous = ", and ({{ count }}) anonymous";
+var Speaker = "Speaker";
+var Microphone = "Microphone";
+var Backstage = "Backstage";
+var en = {
+	Joining: Joining,
+	Mic: Mic,
+	"No internet connection": "No internet connection",
+	"Re-connecting": "Re-connecting",
+	Ringing: Ringing,
+	"Screen Share": "Screen Share",
+	"Select a Camera": "Select a Camera",
+	"Select a Mic": "Select a Mic",
+	"Select Speakers": "Select Speakers",
+	Speakers: Speakers,
+	Video: Video,
+	"You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
+	"Background filters performance is degraded. Consider disabling filters for better performance.": "Background filters performance is degraded. Consider disabling filters for better performance.",
+	Live: Live,
+	"Livestream starts soon": "Livestream starts soon",
+	"Livestream starts at {{ time }}": "Livestream starts at {{ time }}",
+	"{{ count }} participants joined early_one": "{{ count }} participant joined early",
+	"{{ count }} participants joined early_other": "{{ count }} participants joined early",
+	"You can now speak.": "You can now speak.",
+	"Awaiting for an approval to speak.": "Awaiting for an approval to speak.",
+	"You can no longer speak.": "You can no longer speak.",
+	"You can now share your video.": "You can now share your video.",
+	"Awaiting for an approval to share your video.": "Awaiting for an approval to share your video.",
+	"You can no longer share your video.": "You can no longer share your video.",
+	"Waiting for recording to stop...": "Waiting for recording to stop...",
+	"Waiting for recording to start...": "Waiting for recording to start...",
+	"Record call": "Record call",
+	Reactions: Reactions,
+	Statistics: Statistics,
+	"You can now share your screen.": "You can now share your screen.",
+	"Awaiting for an approval to share screen.": "Awaiting for an approval to share screen.",
+	"You can no longer share your screen.": "You can no longer share your screen.",
+	"Share screen": "Share screen",
+	"Incoming Call...": "Incoming Call...",
+	"Calling...": "Calling...",
+	"Mute All": "Mute All",
+	Invite: Invite,
+	Join: Join,
+	You: You,
+	Me: Me,
+	Unknown: Unknown,
+	"Toggle device menu": "Toggle device menu",
+	Default: Default,
+	"Call Recordings": "Call Recordings",
+	Refresh: Refresh,
+	"Check your browser video permissions": "Check your browser video permissions",
+	"Video publishing is disabled by the system": "Video publishing is disabled by the system",
+	"You have no permission to share your video": "You have no permission to share your video",
+	"You have no permission to share your audio": "You have no permission to share your audio",
+	"You are presenting your screen": "You are presenting your screen",
+	"Stop Screen Sharing": "Stop Screen Sharing",
+	Allow: Allow,
+	Revoke: Revoke,
+	Dismiss: Dismiss,
+	"Microphone on": "Microphone on",
+	"Microphone off": "Microphone off",
+	"Camera on": "Camera on",
+	"Camera off": "Camera off",
+	"No camera found": "No camera found",
+	"Video is disabled": "Video is disabled",
+	Pinned: Pinned,
+	Unpin: Unpin,
+	Pin: Pin,
+	"Pin for everyone": "Pin for everyone",
+	"Unpin for everyone": "Unpin for everyone",
+	Block: Block,
+	Kick: Kick,
+	"Turn off video": "Turn off video",
+	"Turn off screen share": "Turn off screen share",
+	"Mute audio": "Mute audio",
+	"Mute screen share audio": "Mute screen share audio",
+	"Allow audio": "Allow audio",
+	"Allow video": "Allow video",
+	"Allow screen sharing": "Allow screen sharing",
+	"Disable audio": "Disable audio",
+	"Disable video": "Disable video",
+	"Disable screen sharing": "Disable screen sharing",
+	Enter: Enter,
+	Leave: Leave,
+	"Leave call": "Leave call",
+	"End call for all": "End call for all",
+	"{{ direction }} fullscreen": "{{ direction }} fullscreen",
+	"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
+	"Dominant Speaker": "Dominant Speaker",
+	"Poor connection quality": "Poor connection quality. Please check your internet connection.",
+	"Video paused due to insufficient bandwidth": "Video paused due to insufficient bandwidth",
+	Participants: Participants,
+	Anonymous: Anonymous,
+	"No participants found": "No participants found",
+	"Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
+	"{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
+	"{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",
+	"{{ userName }} is requesting to share their camera": "{{ userName }} is requesting to share their camera",
+	"{{ userName }} is requesting to present their screen": "{{ userName }} is requesting to present their screen",
+	"{{ userName }} is requesting permission: {{ permission }}": "{{ userName }} is requesting permission: {{ permission }}",
+	"Applying...": "Applying...",
+	"Disable blur": "Disable blur",
+	"Blur background": "Blur background",
+	"Migrating...": "Migrating...",
+	"Reconnecting...": "Reconnecting...",
+	"You are offline. Check your internet connection.": "You are offline. Check your internet connection.",
+	"Failed to restore connection. Please try again.": "Failed to restore connection. Please try again.",
+	"Failed to join. Please try again.": "Failed to join. Please try again.",
+	"Set up your call before joining": "Set up your call before joining",
+	"Please grant your browser permission to access your camera and microphone.": "Please grant your browser permission to access your camera and microphone.",
+	"Start call": "Start call",
+	Speaker: Speaker,
+	Microphone: Microphone,
+	Backstage: Backstage,
+	"Go Live": "Go Live",
+	"Stop Live": "End Live",
+	"Enter Backstage": "Enter Backstage",
+	"Prepare your livestream": "Prepare your livestream",
+	"Ready to go live": "Ready to go live",
+	"Stream is ready!": "Stream is ready!",
+	"Waiting for the livestream to start": "Waiting for the livestream to start",
+	"{{ count }} waiting": "{{ count }} waiting",
+	"Join Stream": "Join Stream",
+	"Join automatically when stream starts": "Join automatically when stream starts",
+	"Display name": "Display name",
+	"Permission needed": "Permission needed",
+	"Call ended": "Call ended",
+	"Rejoin call": "Rejoin call",
+	"Left by mistake?": "Left by mistake?",
+	"Help us improve": "Help us improve",
+	"Leave feedback": "Leave feedback",
+	"Failed to rejoin. Please try again.": "Failed to rejoin. Please try again.",
+	"Share your feedback": "Share your feedback",
+	"Tell us about your experience...": "Tell us about your experience...",
+	"Submit feedback": "Submit feedback",
+	"Feedback message": "Feedback message",
+	"How was your call quality?": "How was your call quality?",
+	"Rate {{ count }} star_one": "Rate {{ count }} star",
+	"Rate {{ count }} star_other": "Rate {{ count }} stars",
+	"Thank you!": "Thank you!",
+	"Your feedback helps improve call quality.": "Your feedback helps improve call quality."
+};
+
+const translations = { en };
+
+const StreamVideo = (props) => {
+    return (jsxRuntime.jsx(videoReactBindings.StreamVideoProvider, { translationsOverrides: translations, ...props }));
+};
+StreamVideo.displayName = 'StreamVideo';
+
+function applyFilter(obj, filter) {
+    if ('$and' in filter) {
+        return filter.$and.every((f) => applyFilter(obj, f));
+    }
+    if ('$or' in filter) {
+        return filter.$or.some((f) => applyFilter(obj, f));
+    }
+    if ('$not' in filter) {
+        return !applyFilter(obj, filter.$not);
+    }
+    return checkConditions(obj, filter);
+}
+const isDateString = (value) => typeof value === 'string' &&
+    /^((?:(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}(?:\.\d+)?))(Z|[+-]\d{2}:\d{2})?)$/.test(value);
+function checkConditions(obj, conditions) {
+    let match = true;
+    for (const key of Object.keys(conditions)) {
+        const operator = conditions[key];
+        const maybeOperator = operator && typeof operator === 'object';
+        let value = obj[key];
+        if (value instanceof Date) {
+            value = value.getTime();
+        }
+        else if (isDateString(value)) {
+            value = new Date(value).getTime();
+        }
+        if (maybeOperator && '$eq' in operator) {
+            const eqOperator = operator;
+            const eqOperatorValue = isDateString(eqOperator.$eq)
+                ? new Date(eqOperator.$eq).getTime()
+                : eqOperator.$eq;
+            match && (match = eqOperatorValue === value);
+        }
+        else if (maybeOperator && '$neq' in operator) {
+            const neqOperator = operator;
+            match && (match = neqOperator.$neq !== value);
+        }
+        else if (maybeOperator && '$in' in operator) {
+            const inOperator = operator;
+            match && (match = inOperator.$in.includes(value));
+        }
+        else if (maybeOperator && '$contains' in operator) {
+            if (Array.isArray(value)) {
+                const containsOperator = operator;
+                match && (match = value.includes(containsOperator.$contains));
+            }
+            else {
+                match = false;
+            }
+        }
+        else if (maybeOperator && '$gt' in operator) {
+            const gtOperator = operator;
+            const gtOperatorValue = isDateString(gtOperator.$gt)
+                ? new Date(gtOperator.$gt).getTime()
+                : gtOperator.$gt;
+            match && (match = value > gtOperatorValue);
+        }
+        else if (maybeOperator && '$gte' in operator) {
+            const gteOperator = operator;
+            const gteOperatorValue = isDateString(gteOperator.$gte)
+                ? new Date(gteOperator.$gte).getTime()
+                : gteOperator.$gte;
+            match && (match = value >= gteOperatorValue);
+        }
+        else if (maybeOperator && '$lt' in operator) {
+            const ltOperator = operator;
+            const ltOperatorValue = isDateString(ltOperator.$lt)
+                ? new Date(ltOperator.$lt).getTime()
+                : ltOperator.$lt;
+            match && (match = value < ltOperatorValue);
+        }
+        else if (maybeOperator && '$lte' in operator) {
+            const lteOperator = operator;
+            const lteOperatorValue = isDateString(lteOperator.$lte)
+                ? new Date(lteOperator.$lte).getTime()
+                : lteOperator.$lte;
+            match && (match = value <= lteOperatorValue);
+            // } else if (maybeOperator && '$autocomplete' in operator) {
+            // TODO: regexp solution maybe?
+            // match &&= false;
+        }
+        else {
+            const eqValue = operator;
+            match && (match = eqValue === value);
+        }
+        if (!match) {
+            return false;
+        }
+    }
+    return true;
+}
+
+const useFilteredParticipants = ({ excludeLocalParticipant = false, filterParticipants, }) => {
+    const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
+    const allParticipants = useParticipants();
+    const remoteParticipants = useRemoteParticipants();
+    return react.useMemo(() => {
+        const unfilteredParticipants = excludeLocalParticipant
+            ? remoteParticipants
+            : allParticipants;
+        return filterParticipants
+            ? applyParticipantsFilter(unfilteredParticipants, filterParticipants)
+            : unfilteredParticipants;
+    }, [
+        allParticipants,
+        remoteParticipants,
+        excludeLocalParticipant,
+        filterParticipants,
+    ]);
+};
+const applyParticipantsFilter = (participants, filter) => {
+    const filterCallback = typeof filter === 'function'
+        ? filter
+        : (participant) => applyFilter({
+            userId: participant.userId,
+            isSpeaking: participant.isSpeaking,
+            isDominantSpeaker: participant.isDominantSpeaker,
+            name: participant.name,
+            roles: participant.roles,
+            isPinned: videoClient.isPinned(participant),
+            hasVideo: videoClient.hasVideo(participant),
+            hasAudio: videoClient.hasAudio(participant),
+            hasScreenShare: videoClient.hasScreenShare(participant),
+        }, filter);
+    return participants.filter(filterCallback);
+};
+const usePaginatedLayoutSortPreset = (call) => {
+    react.useEffect(() => {
+        if (!call)
+            return;
+        call.setSortParticipantsBy(videoClient.paginatedLayoutSortPreset);
+        return () => {
+            resetSortPreset(call);
+        };
+    }, [call]);
+};
+const useSpeakerLayoutSortPreset = (call, isOneOnOneCall) => {
+    react.useEffect(() => {
+        if (!call)
+            return;
+        // always show the remote participant in the spotlight
+        if (isOneOnOneCall) {
+            call.setSortParticipantsBy(videoClient.combineComparators(videoClient.screenSharing, loggedIn));
+        }
+        else {
+            call.setSortParticipantsBy(videoClient.speakerLayoutSortPreset);
+        }
+        return () => {
+            resetSortPreset(call);
+        };
+    }, [call, isOneOnOneCall]);
+};
+const useRawRemoteParticipants = () => {
+    const { useRawParticipants } = videoReactBindings.useCallStateHooks();
+    const rawParticipants = useRawParticipants();
+    return react.useMemo(() => rawParticipants.filter((p) => !p.isLocalParticipant), [rawParticipants]);
+};
+const resetSortPreset = (call) => {
+    // reset the sorting to the default for the call type
+    const callConfig = videoClient.CallTypes.get(call.type);
+    call.setSortParticipantsBy(callConfig.options.sortParticipantsBy || videoClient.defaultSortPreset);
+};
+const loggedIn = (a, b) => {
+    if (a.isLocalParticipant)
+        return 1;
+    if (b.isLocalParticipant)
+        return -1;
+    return 0;
+};
+
+const LivestreamLayout = (props) => {
+    const { useParticipants, useHasOngoingScreenShare } = videoReactBindings.useCallStateHooks();
+    const call = videoReactBindings.useCall();
+    const participants = useParticipants();
+    const [currentSpeaker] = participants;
+    const remoteParticipants = useRawRemoteParticipants();
+    const hasOngoingScreenShare = useHasOngoingScreenShare();
+    const presenter = hasOngoingScreenShare
+        ? participants.find(videoClient.hasScreenShare)
+        : undefined;
+    usePaginatedLayoutSortPreset(call);
+    const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+    const overlay = ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showMuteButton: props.showMuteButton, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
+    const floatingParticipantOverlay = hasOngoingScreenShare &&
+        (ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay
+        // these elements aren't needed for the video feed
+        , { 
+            // these elements aren't needed for the video feed
+            showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true, enableFullScreen: floatingParticipantProps?.enableFullScreen ?? true })));
+    return (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && 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, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
+                : true }))] }));
+};
+LivestreamLayout.displayName = 'LivestreamLayout';
+const ParticipantOverlay = (props) => {
+    const { enableFullScreen = true, showParticipantCount = true, humanizeParticipantCount = true, showDuration = true, showLiveBadge = true, showMuteButton = true, showSpeakerName = false, } = props;
+    const overlayBarVisible = enableFullScreen ||
+        showParticipantCount ||
+        showDuration ||
+        showLiveBadge ||
+        showMuteButton ||
+        showSpeakerName;
+    const { participant, participantViewElement } = useParticipantViewContext();
+    const { useParticipantCount, useSpeakerState } = videoReactBindings.useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const duration = useUpdateCallDuration();
+    const toggleFullScreen = useToggleFullScreen();
+    const { speaker, volume } = useSpeakerState();
+    const isSpeakerMuted = volume === 0;
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
+                                ? videoClient.humanize(participantCount)
+                                : participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' }))] }), jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsxRuntime.jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+                                'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen &&
+                            participantViewElement &&
+                            typeof participantViewElement.requestFullscreen !==
+                                'undefined' && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
+};
+const useUpdateCallDuration = () => {
+    const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
+    const isCallLive = useIsCallLive();
+    const session = useCallSession();
+    const [duration, setDuration] = react.useState(() => {
+        if (!session || !session.live_started_at)
+            return 0;
+        const liveStartTime = new Date(session.live_started_at);
+        const now = new Date();
+        return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
+    });
+    react.useEffect(() => {
+        if (!isCallLive)
+            return;
+        const interval = setInterval(() => {
+            setDuration((d) => d + 1);
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [isCallLive]);
+    return duration;
+};
+const useToggleFullScreen = () => {
+    const { participantViewElement } = useParticipantViewContext();
+    const [isFullscreen, setIsFullscreen] = react.useState(!!document.fullscreenElement);
+    react.useEffect(() => {
+        const handler = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener('fullscreenchange', handler);
+        return () => {
+            document.removeEventListener('fullscreenchange', handler);
+        };
+    }, []);
+    return react.useCallback(() => {
+        if (isFullscreen) {
+            document.exitFullscreen().catch((err) => {
+                console.error('Failed to exit fullscreen', err);
+            });
+        }
+        else {
+            participantViewElement?.requestFullscreen().catch((err) => {
+                console.error('Failed to enter fullscreen', err);
+            });
+        }
+    }, [isFullscreen, participantViewElement]);
+};
+const formatDuration = (durationInMs) => {
+    const days = Math.floor(durationInMs / 86400);
+    const hours = Math.floor(durationInMs / 3600);
+    const minutes = Math.floor((durationInMs % 3600) / 60);
+    const seconds = durationInMs % 60;
+    return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+};
+
+const GROUP_SIZE = 16;
+const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPicturePlaceholder, 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, mirror: mirror, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
+};
+const PaginatedGridLayout = (props) => {
+    const { groupSize = (props.groupSize || 0) > 0
+        ? props.groupSize || GROUP_SIZE
+        : GROUP_SIZE, excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, PictureInPicturePlaceholder, muted, } = props;
+    const [page, setPage] = react.useState(0);
+    const [paginatedGridLayoutWrapperElement, setPaginatedGridLayoutWrapperElement,] = react.useState(null);
+    const call = videoReactBindings.useCall();
+    const remoteParticipants = useRawRemoteParticipants();
+    const participants = useFilteredParticipants({
+        excludeLocalParticipant,
+        filterParticipants,
+    });
+    usePaginatedLayoutSortPreset(call);
+    react.useEffect(() => {
+        if (!paginatedGridLayoutWrapperElement || !call)
+            return;
+        const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);
+        return () => cleanup();
+    }, [paginatedGridLayoutWrapperElement, call]);
+    // only used to render video elements
+    const participantGroups = react.useMemo(() => chunk(participants, groupSize), [participants, groupSize]);
+    const pageCount = participantGroups.length;
+    // update page when page count is reduced and selected page no longer exists
+    react.useEffect(() => {
+        if (page > pageCount - 1) {
+            setPage(Math.max(0, pageCount - 1));
+        }
+    }, [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: [!muted && 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, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), 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';
+
+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] = react.useState({
+        vertical: typeof limit === 'number' ? limit : null,
+        horizontal: typeof limit === 'number' ? limit : null,
+    });
+    react.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;
+};
+
+const DefaultParticipantViewUIBar = () => (jsxRuntime.jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, muted, enableDragToScroll = false, }) => {
+    const call = videoReactBindings.useCall();
+    const { useParticipants } = videoReactBindings.useCallStateHooks();
+    const allParticipants = useParticipants();
+    const remoteParticipants = useRawRemoteParticipants();
+    const [participantInSpotlight, ...otherParticipants] = useFilteredParticipants({ excludeLocalParticipant, filterParticipants });
+    const [participantsBarWrapperElement, setParticipantsBarWrapperElement] = react.useState(null);
+    const [participantsBarElement, setParticipantsBarElement] = react.useState(null);
+    const [buttonsWrapperElement, setButtonsWrapperElement] = react.useState(null);
+    const isSpeakerScreenSharing = participantInSpotlight && videoClient.hasScreenShare(participantInSpotlight);
+    const hardLimit = useCalculateHardLimit(buttonsWrapperElement, participantsBarElement, participantsBarLimit);
+    const isVertical = participantsBarPosition === 'left' || participantsBarPosition === 'right';
+    const isHorizontal = participantsBarPosition === 'top' || participantsBarPosition === 'bottom';
+    react.useEffect(() => {
+        if (!participantsBarWrapperElement || !call)
+            return;
+        const cleanup = call.setViewport(participantsBarWrapperElement);
+        return () => cleanup();
+    }, [participantsBarWrapperElement, call]);
+    const isOneOnOneCall = allParticipants.length === 2;
+    useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+    useDragToScroll(participantsBarWrapperElement, {
+        enabled: enableDragToScroll,
+    });
+    let participantsWithAppliedLimit = otherParticipants;
+    const hardLimitToApply = isVertical
+        ? hardLimit.vertical
+        : hardLimit.horizontal;
+    if (typeof participantsBarLimit !== 'undefined' &&
+        hardLimitToApply !== null) {
+        participantsWithAppliedLimit = otherParticipants.slice(0, 
+        // subtract 1 if speaker is sharing screen as
+        // that one is rendered independently from otherParticipants array
+        hardLimitToApply - (isSpeakerScreenSharing ? 1 : 0));
+    }
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
+    if (!call)
+        return null;
+    const renderParticipantsBar = participantsBarPosition &&
+        (participantsWithAppliedLimit.length > 0 || isSpeakerScreenSharing);
+    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-layout__wrapper", children: [!muted && 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, mirror: mirror, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder })) }), renderParticipantsBar && (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, PictureInPicturePlaceholder: PictureInPicturePlaceholder, 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, PictureInPicturePlaceholder: PictureInPicturePlaceholder, 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, }) => {
+    const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
+    const scrollStartClickHandler = () => {
+        scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
+    };
+    const scrollEndClickHandler = () => {
+        scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (jsxRuntime.jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (jsxRuntime.jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
+};
+const VerticalScrollButtons = ({ scrollWrapper, }) => {
+    const scrollPosition = useVerticalScrollPosition(scrollWrapper);
+    const scrollTopClickHandler = () => {
+        scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
+    };
+    const scrollBottomClickHandler = () => {
+        scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsxRuntime.jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsxRuntime.jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
+};
+
+const defaultConfiguration = {
+    layout: 'SpeakerTop',
+    onError: undefined,
+};
+const ConfigurationContext = react.createContext(defaultConfiguration);
+const ConfigurationProvider = ({ children, layout = 'SpeakerTop', onError, }) => {
+    const value = react.useMemo(() => ({ layout, onError }), [layout, onError]);
+    return (jsxRuntime.jsx(ConfigurationContext.Provider, { value: value, children: children }));
+};
+/**
+ * Hook to access embedded configuration settings.
+ */
+const useEmbeddedConfiguration = () => {
+    return react.useContext(ConfigurationContext);
+};
+
+/**
+ * Hook that creates a StreamVideoClient and connects the user.
+ * Disconnects and cleans up on unmount or when props change.
+ *
+ */
+const useInitializeVideoClient = ({ apiKey, user, token, tokenProvider, logLevel, handleError, }) => {
+    const [client, setClient] = react.useState();
+    const tokenProviderRef = react.useRef(tokenProvider);
+    tokenProviderRef.current = tokenProvider;
+    react.useEffect(() => {
+        if (!apiKey)
+            return;
+        const options = logLevel ? { logLevel } : undefined;
+        let _client;
+        try {
+            if (user?.type === 'guest') {
+                const streamUser = {
+                    id: user.id,
+                    type: 'guest',
+                    name: user.name,
+                    image: user.image,
+                };
+                _client = new videoClient.StreamVideoClient({
+                    apiKey,
+                    user: streamUser,
+                    options,
+                });
+            }
+            else if (user?.type === 'anonymous') {
+                const streamUser = {
+                    id: '!anon',
+                    type: 'anonymous',
+                    name: user.name,
+                    image: user.image,
+                };
+                _client = new videoClient.StreamVideoClient({
+                    apiKey,
+                    user: streamUser,
+                    token,
+                    tokenProvider: tokenProviderRef.current,
+                    options,
+                });
+            }
+            else {
+                const streamUser = {
+                    id: user.id,
+                    name: user.name,
+                    image: user.image,
+                };
+                const currentTokenProvider = tokenProviderRef.current;
+                _client = new videoClient.StreamVideoClient({
+                    apiKey,
+                    user: streamUser,
+                    ...(token
+                        ? {
+                            token,
+                            ...(currentTokenProvider
+                                ? { tokenProvider: currentTokenProvider }
+                                : {}),
+                        }
+                        : { tokenProvider: currentTokenProvider }),
+                    options,
+                });
+            }
+            setClient(_client);
+        }
+        catch (err) {
+            handleError(err);
+        }
+        return () => {
+            _client
+                ?.disconnectUser()
+                .catch((err) => console.error('Failed to disconnect user:', err));
+            setClient(undefined);
+        };
+    }, [
+        apiKey,
+        user.id,
+        user.type,
+        user.name,
+        user.image,
+        token,
+        logLevel,
+        handleError,
+    ]);
+    return client;
+};
+
+/**
+ * Hook to initialize and manage a Call instance.
+ */
+const useInitializeCall = ({ client, callType, callId, handleError, }) => {
+    const [call, setCall] = react.useState();
+    react.useEffect(() => {
+        if (!client || !callId)
+            return;
+        let cancelled = false;
+        const _call = client.call(callType, callId);
+        _call
+            .get()
+            .then(() => {
+            if (!cancelled)
+                setCall(_call);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            handleError(err);
+        });
+        return () => {
+            cancelled = true;
+            setCall(undefined);
+            if (_call.state.callingState !== videoClient.CallingState.LEFT) {
+                _call
+                    .leave()
+                    .catch((err) => console.error('Failed to leave call:', err));
+            }
+        };
+    }, [client, callType, callId, handleError]);
+    return call;
+};
+
+const BlurToggleButton = () => {
+    const { t } = videoReactBindings.useI18n();
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { isMute } = useCameraState();
+    const { isSupported, isReady, isLoading, backgroundFilter, applyBackgroundBlurFilter, disableBackgroundFilter, } = useBackgroundFilters();
+    const isBlurred = backgroundFilter === 'blur';
+    const isDisabled = !isReady || isLoading || isMute;
+    const handleClick = react.useCallback(() => {
+        if (isDisabled)
+            return;
+        if (isBlurred) {
+            disableBackgroundFilter();
+        }
+        else {
+            applyBackgroundBlurFilter('high');
+        }
+    }, [
+        applyBackgroundBlurFilter,
+        disableBackgroundFilter,
+        isBlurred,
+        isDisabled,
+    ]);
+    const getLabel = () => {
+        if (isLoading)
+            return t('Applying...');
+        return isBlurred ? t('Disable blur') : t('Blur background');
+    };
+    if (!isSupported)
+        return null;
+    return (jsxRuntime.jsxs("button", { type: "button", className: clsx('str-video__embedded-blur-toggle', isBlurred && 'str-video__embedded-blur-toggle--active'), disabled: isDisabled, "aria-pressed": isBlurred, onClick: handleClick, children: [jsxRuntime.jsx(Icon, { icon: "blur-icon" }), jsxRuntime.jsx("span", { children: getLabel() })] }));
+};
+const CameraMenuWithBlur = () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), jsxRuntime.jsx("div", { className: "str-video__embedded-blur-toggle-container", children: jsxRuntime.jsx(BlurToggleButton, {}) })] }));
+};
+
+const CallEndedScreen = ({ onJoin, onFeedback, }) => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Call ended') }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-actions", children: [onJoin && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Left by mistake?') }), jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), t('Rejoin call')] })] }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__ended-divider" })] })), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Help us improve') }), jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onFeedback, children: [jsxRuntime.jsx(Icon, { icon: "feedback" }), t('Leave feedback')] })] })] })] }));
+};
+
+const StarRating = ({ value, onChange }) => {
+    const { t } = videoReactBindings.useI18n();
+    const [hovered, setHovered] = react.useState(0);
+    const displayValue = hovered || value;
+    const getStarClasses = (star) => clsx('str-video__embedded-call-feedback__star', star <= displayValue && 'str-video__embedded-call-feedback__star--active');
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__rating-section", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__rating-label", children: t('How was your call quality?') }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__stars", onMouseLeave: () => setHovered(0), children: [1, 2, 3, 4, 5].map((star) => (jsxRuntime.jsx("button", { type: "button", className: getStarClasses(star), onClick: () => onChange(star), onMouseEnter: () => setHovered(star), "aria-label": t('Rate {{ count }} star', { count: star }), children: jsxRuntime.jsx(Icon, { icon: "star-filled" }) }, star))) })] }));
+};
+
+const RatingScreen = ({ onSubmit }) => {
+    const { t } = videoReactBindings.useI18n();
+    const [rating, setRating] = react.useState(0);
+    const [message, setMessage] = react.useState('');
+    const handleSubmit = () => {
+        if (rating > 0)
+            onSubmit(rating, message);
+    };
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Share your feedback') }), jsxRuntime.jsx(StarRating, { value: rating, onChange: setRating }), jsxRuntime.jsx("textarea", { "aria-label": t('Feedback message'), className: "str-video__embedded-call-feedback__textarea", placeholder: t('Tell us about your experience...'), value: message, onChange: (e) => setMessage(e.target.value), rows: 3 }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__actions", children: jsxRuntime.jsx("button", { type: "button", className: "str-video__button", onClick: handleSubmit, disabled: rating === 0, children: t('Submit feedback') }) })] }));
+};
+
+const ThankYouScreen = () => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__checkmark", children: jsxRuntime.jsx(Icon, { icon: "checkmark" }) }), jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Thank you!') }), jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__subtitle", children: t('Your feedback helps improve call quality.') })] }));
+};
+
+const CallFeedback = ({ onJoin }) => {
+    const call = videoReactBindings.useCall();
+    const { onError } = useEmbeddedConfiguration();
+    const [state, setState] = react.useState('ended');
+    const onFeedback = react.useCallback(() => setState('rating'), []);
+    const handleSubmit = react.useCallback(async (rating, message) => {
+        if (!call)
+            return;
+        const clampedRating = Math.min(Math.max(1, rating), 5);
+        try {
+            await call.submitFeedback(clampedRating, {
+                reason: message,
+                custom: { message },
+            });
+        }
+        catch (err) {
+            onError?.(err);
+        }
+        finally {
+            setState('submitted');
+        }
+    }, [call, onError]);
+    return (jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback", children: state === 'submitted' ? (jsxRuntime.jsx(ThankYouScreen, {})) : state === 'rating' ? (jsxRuntime.jsx(RatingScreen, { onSubmit: handleSubmit })) : (jsxRuntime.jsx(CallEndedScreen, { onJoin: onJoin, onFeedback: onFeedback })) }));
+};
+
+const ConnectionNotification = () => {
+    const { t } = videoReactBindings.useI18n();
+    const { useCallCallingState } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const isOffline = callingState === videoClient.CallingState.OFFLINE;
+    const isReconnecting = callingState === videoClient.CallingState.RECONNECTING;
+    const isMigrating = callingState === videoClient.CallingState.MIGRATING;
+    const isJoining = callingState === videoClient.CallingState.JOINING;
+    const hasFailedToRecover = callingState === videoClient.CallingState.RECONNECTING_FAILED;
+    const showError = isOffline || hasFailedToRecover;
+    const showLoading = isJoining || isReconnecting || isMigrating;
+    if (showError) {
+        return (jsxRuntime.jsx("div", { className: "str-video__embedded-connection-notification", children: jsxRuntime.jsx(Notification, { isVisible: true, placement: "bottom", message: isOffline
+                    ? t('You are offline. Check your internet connection.')
+                    : t('Failed to restore connection. Please try again.') }) }));
+    }
+    if (showLoading) {
+        return (jsxRuntime.jsx("div", { className: "str-video__embedded-connection-notification", children: jsxRuntime.jsx(Notification, { isVisible: true, placement: "bottom", iconClassName: null, message: jsxRuntime.jsx(LoadingIndicator, { text: isMigrating
+                        ? t('Migrating...')
+                        : isJoining
+                            ? t('Joining')
+                            : t('Reconnecting...') }) }) }));
+    }
+    return null;
+};
+
+const EmbeddedParticipantViewUI = () => {
+    const { participantViewElement, trackType } = useParticipantViewContext();
+    const handleDoubleClick = react.useCallback(() => {
+        if (!participantViewElement)
+            return;
+        if (typeof participantViewElement.requestFullscreen === 'undefined')
+            return;
+        if (!document.fullscreenElement) {
+            participantViewElement.requestFullscreen().catch(console.error);
+        }
+        else {
+            document.exitFullscreen().catch(console.error);
+        }
+    }, [participantViewElement]);
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__embedded-participant-view-ui', trackType === 'screenShareTrack' &&
+            'str-video__embedded-participant-view-ui--screen-share'), onDoubleClick: handleDoubleClick, children: jsxRuntime.jsx(DefaultParticipantViewUI, {}) }));
+};
+
+const JoinError = ({ onJoin }) => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-join-error", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-join-error__title", children: t('Failed to join the call') }), jsxRuntime.jsx("p", { className: "str-video__embedded-join-error__message", children: t("We couldn't connect to the server. Please check your connection and try again.") }), jsxRuntime.jsxs("button", { type: "button", className: "str-video__button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), t('Try again')] })] }));
+};
+
+const ToggleMenuButton$1 = react.forwardRef(function ToggleMenuButton(props, ref) {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { selectedDevice: selectedMic, devices: microphones } = useMicrophoneState();
+    return (jsxRuntime.jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsxRuntime.jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "mic" }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: microphones?.find((m) => m.deviceId === selectedMic)
+                    ?.label || 'Default' }), jsxRuntime.jsx(Icon, { icon: props.menuShown ? 'chevron-down' : 'chevron-up' })] }));
+});
+const ToggleMicButton = () => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton$1, visualType: MenuVisualType.MENU, children: [jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }));
+};
+
+const ToggleMenuButton = react.forwardRef(function ToggleMenuButton(props, ref) {
+    const { useCameraState } = videoReactBindings.useCallStateHooks();
+    const { selectedDevice: selectedCamera, devices: cameras } = useCameraState();
+    return (jsxRuntime.jsxs("button", { ref: ref, className: "str-video__embedded-lobby__device-button", children: [jsxRuntime.jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: "camera" }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: cameras?.find((c) => c.deviceId === selectedCamera)
+                    ?.label || 'Default' }), jsxRuntime.jsx(Icon, { icon: props.menuShown ? 'chevron-down' : 'chevron-up' })] }));
+});
+const ToggleCameraButton = () => {
+    return (jsxRuntime.jsx(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton, visualType: MenuVisualType.MENU, children: jsxRuntime.jsx(CameraMenuWithBlur, {}) }));
+};
+
+const DisabledDeviceButton = ({ icon, label, }) => (jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__device-button str-video__embedded-lobby__device-button--disabled", children: [jsxRuntime.jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: icon }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: label })] }));
+
+const DisabledVideoPreview = () => {
+    const { t } = videoReactBindings.useI18n();
+    const user = videoReactBindings.useConnectedUser();
+    const { useCameraState, useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+    const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+    const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
+    return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__no-permission", children: hasBrowserMediaPermission ? (jsxRuntime.jsx(Avatar, { imageSrc: user?.image, name: user?.name || user?.id })) : (t('Please grant your browser permission to access your camera and microphone.')) }));
+};
+const NoCameraPreview = () => {
+    const { t } = videoReactBindings.useI18n();
+    const { useCameraState, useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+    const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+    const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
+    if (!hasBrowserMediaPermission) {
+        return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__no-permission", children: t('Please grant your browser permission to access your camera and microphone.') }));
+    }
+    return (jsxRuntime.jsx("div", { className: "str-video__video-preview__no-camera-preview", children: t('No camera found') }));
+};
+
+const DeviceControls = ({ isVideoEnabled }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { useCameraState, useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+    const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__video-preview", children: [jsxRuntime.jsx(VideoPreview, { DisabledVideoPreview: DisabledVideoPreview, NoCameraPreview: NoCameraPreview }), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__media-toggle", children: [jsxRuntime.jsx(ToggleAudioPreviewButton, { Menu: null }), isVideoEnabled && jsxRuntime.jsx(ToggleVideoPreviewButton, { Menu: null })] })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__media", children: [hasMicPermission ? (jsxRuntime.jsx(ToggleMicButton, {})) : (jsxRuntime.jsx(DisabledDeviceButton, { icon: "mic", label: t('Permission needed') })), isVideoEnabled &&
+                        (hasCameraPermission ? (jsxRuntime.jsx(ToggleCameraButton, {})) : (jsxRuntime.jsx(DisabledDeviceButton, { icon: "camera", label: t('Permission needed') })))] })] }));
+};
+
+/**
+ * Lobby component - Device setup screen before joining a call.
+ */
+const Lobby = ({ onJoin, title, joinLabel }) => {
+    const { t } = videoReactBindings.useI18n();
+    const user = videoReactBindings.useConnectedUser();
+    const { useCameraState, useCallSettings } = videoReactBindings.useCallStateHooks();
+    const { isMute } = useCameraState();
+    const settings = useCallSettings();
+    const isVideoEnabled = settings?.video.enabled ?? true;
+    const resolvedJoinLabel = joinLabel ?? t('Join');
+    const resolvedTitle = title ?? t('Set up your call before joining');
+    return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__content", children: [jsxRuntime.jsx("h1", { className: "str-video__embedded-lobby__heading", children: resolvedTitle }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-lobby__camera', isMute && 'str-video__embedded-lobby__camera--off'), children: jsxRuntime.jsx(DeviceControls, { isVideoEnabled: isVideoEnabled }) }), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__display-name", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__display-name-label", children: t('Display name') }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__display-name-value", children: user?.name }), jsxRuntime.jsxs("button", { className: "str-video__button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon", icon: "login" }), resolvedJoinLabel] })] })] }) }));
+};
+
+const ViewersCount = ({ count }) => (jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration__viewers", children: [jsxRuntime.jsx(Icon, { icon: "eye", className: "str-video__embedded-livestream-duration__eye-icon" }), jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__count", children: videoClient.humanize(count) })] }));
+
+const Layouts = {
+    Livestream: {
+        Component: LivestreamLayout,
+        props: {
+            showLiveBadge: false,
+            showParticipantCount: false,
+            showDuration: false,
+        },
+    },
+    PaginatedGrid: {
+        Component: PaginatedGridLayout,
+        props: { groupSize: 16, ParticipantViewUI: EmbeddedParticipantViewUI },
+    },
+    SpeakerLeft: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'left',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+    SpeakerRight: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'right',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+    SpeakerTop: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'top',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+    SpeakerBottom: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'bottom',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+};
+const EMPTY_PROPS = {};
+const VALID_LAYOUTS = Object.keys(Layouts);
+const isValidLayout = (layout) => VALID_LAYOUTS.includes(layout);
+/**
+ * Hook to manage layout selection.
+ * Returns the layout Component and its props.
+ */
+const useLayout = () => {
+    const { layout: configuredLayout } = useEmbeddedConfiguration();
+    const { useHasOngoingScreenShare } = videoReactBindings.useCallStateHooks();
+    const hasScreenShare = useHasOngoingScreenShare();
+    const defaultLayout = isValidLayout(configuredLayout ?? '')
+        ? configuredLayout
+        : 'SpeakerTop';
+    const [layout, setLayout] = react.useState(defaultLayout);
+    react.useEffect(() => {
+        if (hasScreenShare) {
+            setLayout((currentLayout) => {
+                if (currentLayout.startsWith('Speaker'))
+                    return currentLayout;
+                return 'SpeakerRight';
+            });
+        }
+        else {
+            setLayout(defaultLayout);
+        }
+    }, [hasScreenShare, defaultLayout]);
+    const { Component, props = EMPTY_PROPS } = Layouts[layout];
+    return { Component, props };
+};
+
+/**
+ * Hook that lazily loads the noise cancellation module from @stream-io/audio-filters-web.
+ * Skips loading if the server-side noise cancellation setting is disabled.
+ * Returns the NoiseCancellation instance when loaded, or undefined if unavailable.
+ * The `ready` flag becomes `true` once loading completes (even on failure),
+ * or immediately if noise cancellation is disabled by server settings.
+ */
+const useNoiseCancellationLoader = (call) => {
+    const [noiseCancellation, setNoiseCancellation] = react.useState();
+    const [ready, setReady] = react.useState(false);
+    const ncLoader = react.useRef(undefined);
+    const ncSettings = call?.state.settings?.audio?.noise_cancellation;
+    const isNoiseCancellationEnabled = !!(ncSettings && ncSettings.mode !== videoClient.NoiseCancellationSettingsModeEnum.DISABLED);
+    react.useEffect(() => {
+        if (!call)
+            return;
+        if (!isNoiseCancellationEnabled) {
+            setReady(true);
+            return;
+        }
+        const load = (ncLoader.current || Promise.resolve())
+            .then(() => import('@stream-io/audio-filters-web'))
+            .then(({ NoiseCancellation }) => {
+            const nc = new NoiseCancellation({});
+            setNoiseCancellation(nc);
+        })
+            .catch((err) => {
+            console.warn('[EmbeddedStreamClient] Failed to load noise cancellation. ' +
+                'Make sure @stream-io/audio-filters-web is installed.', err);
+        })
+            .finally(() => {
+            setReady(true);
+        });
+        return () => {
+            ncLoader.current = load.then(() => {
+                setNoiseCancellation(undefined);
+                setReady(false);
+            });
+        };
+    }, [call, isNoiseCancellationEnabled]);
+    return { noiseCancellation, ready };
+};
+
+/**
+ * Hook to prevent screen from going to sleep during active calls.
+ * Uses the Screen Wake Lock API when available.
+ */
+const useWakeLock = () => {
+    const { useCallCallingState } = videoReactBindings.useCallStateHooks();
+    const callState = useCallCallingState();
+    react.useEffect(() => {
+        if (callState !== videoClient.CallingState.JOINED || !('wakeLock' in navigator))
+            return;
+        let interrupted = false;
+        let wakeLockSentinel = null;
+        navigator.wakeLock
+            .request('screen')
+            .then((wls) => {
+            if (interrupted)
+                return wls.release();
+            wakeLockSentinel = wls;
+        })
+            .catch((error) => console.debug(`Couldn't setup WakeLock due to: ${error}`));
+        return () => {
+            interrupted = true;
+            wakeLockSentinel?.release();
+        };
+    }, [callState]);
+};
+
+const formatElapsed = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    const pad = (n) => String(n).padStart(2, '0');
+    return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+};
+/**
+ * Returns a live-updating formatted elapsed duration string
+ * computed from the given start date.
+ */
+const useCallDuration = (startedAt) => {
+    const startedAtDate = react.useMemo(() => (startedAt ? new Date(startedAt).getTime() : undefined), [startedAt]);
+    const [elapsed, setElapsed] = react.useState('');
+    react.useEffect(() => {
+        if (!startedAtDate)
+            return;
+        const update = () => {
+            const seconds = Math.max(0, Math.floor((Date.now() - startedAtDate) / 1000));
+            setElapsed(formatElapsed(seconds));
+        };
+        update();
+        const interval = setInterval(update, 1000);
+        return () => clearInterval(interval);
+    }, [startedAtDate]);
+    return { elapsed };
+};
+
+/**
+ * Hook that initializes the Stream Video client and call.
+ * Combines useInitializeVideoClient, useInitializeCall, and useNoiseCancellationLoader.
+ */
+const useEmbeddedClient = ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, handleError, }) => {
+    const client = useInitializeVideoClient({
+        apiKey,
+        user,
+        token,
+        tokenProvider,
+        logLevel,
+        handleError,
+    });
+    const call = useInitializeCall({
+        client,
+        callType,
+        callId,
+        handleError,
+    });
+    react.useEffect(() => {
+        if (!call)
+            return;
+        call.tracer.trace('embedded.initialized', { callType });
+    }, [call, callType]);
+    const { noiseCancellation, ready: noiseCancellationReady } = useNoiseCancellationLoader(call);
+    return {
+        client,
+        call,
+        noiseCancellation,
+        noiseCancellationReady,
+    };
+};
+
+/**
+ * Distinguishes a temporary live pause (host went backstage) from a real
+ * call end. Returns `true` when the viewer was kicked because the host
+ * paused the livestream — not because the call was fully terminated.
+ *
+ * Resets to `false` on rejoin or when `call.ended` (real end) arrives.
+ */
+const useIsLivestreamPaused = () => {
+    const call = videoReactBindings.useCall();
+    const { useCallCallingState } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const [isPaused, setIsPaused] = react.useState(false);
+    react.useEffect(() => {
+        if (!call)
+            return;
+        const unsubSfu = call.on('callEnded', (e) => {
+            if (e.reason === videoClient.SfuModels.CallEndedReason.LIVE_ENDED) {
+                setIsPaused(true);
+            }
+        });
+        const unsubEnded = call.on('call.ended', () => {
+            setIsPaused(false);
+        });
+        return () => {
+            unsubSfu();
+            unsubEnded();
+        };
+    }, [call]);
+    react.useEffect(() => {
+        if (callingState === videoClient.CallingState.JOINED) {
+            setIsPaused(false);
+        }
+    }, [callingState]);
+    return isPaused;
+};
+
+const NoiseCancellationWrapper = ({ noiseCancellation, children, }) => {
+    if (!noiseCancellation) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    }
+    return (jsxRuntime.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] = react.useState(false);
+    const onErrorStable = videoReactBindings.useEffectEvent(onError ?? console.error);
+    const handleError = react.useCallback((error) => {
+        setShowError(true);
+        onErrorStable(error);
+    }, [onErrorStable]);
+    const { client, call, noiseCancellation, noiseCancellationReady } = useEmbeddedClient({
+        apiKey,
+        user,
+        callId,
+        callType,
+        token,
+        tokenProvider,
+        logLevel,
+        handleError,
+    });
+    if (showError) {
+        return (jsxRuntime.jsx(StreamTheme, { className: "str-video__embedded", children: jsxRuntime.jsx("div", { className: "str-video__embedded-error", children: jsxRuntime.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 (jsxRuntime.jsx(StreamTheme, { className: "str-video__embedded", children: jsxRuntime.jsx(LoadingIndicator, { className: "str-video__embedded-loading" }) }));
+    }
+    return (jsxRuntime.jsx(StreamVideo, { client: client, children: jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(ConfigurationProvider, { layout: layout, onError: onErrorStable, children: jsxRuntime.jsx(BackgroundFiltersProvider, { children: jsxRuntime.jsx(NoiseCancellationWrapper, { noiseCancellation: noiseCancellation, children: jsxRuntime.jsx(StreamTheme, { className: "str-video__embedded", style: theme, children: children }) }) }) }) }) }));
+};
+
+/**
+ * Renders the active call control bar
+ */
+const CallControls = ({ showParticipants, onToggleParticipants, }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { useCallSession } = videoReactBindings.useCallStateHooks();
+    const session = useCallSession();
+    const startedAt = session?.started_at;
+    const { elapsed } = useCallDuration(startedAt);
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), startedAt && (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-duration str-video__embedded-desktop", children: [jsxRuntime.jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsxRuntime.jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] }))] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ScreenShareButton, {}) }) }), jsxRuntime.jsx(RecordCallConfirmationButton, {}), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: onToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] }));
+};
+
+/**
+ * Renders the call header bar with elapsed time and leave/end call button.
+ */
+const CallHeader = () => {
+    const { useCallSession } = videoReactBindings.useCallStateHooks();
+    const session = useCallSession();
+    const startedAt = session?.started_at;
+    const { elapsed } = useCallDuration(startedAt);
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [startedAt && (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-duration", children: [jsxRuntime.jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsxRuntime.jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] })), jsxRuntime.jsx(CancelCallConfirmButton, {})] }));
+};
+
+/**
+ * CallLayout renders the active call experience with layout, controls and sidebar.
+ */
+const CallLayout = () => {
+    useWakeLock();
+    const [showParticipants, setShowParticipants] = react.useState(false);
+    const { Component: LayoutComponent, props: layoutProps } = useLayout();
+    const handleToggleParticipants = react.useCallback(() => {
+        setShowParticipants((prev) => !prev);
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsx(PermissionRequests, {}), jsxRuntime.jsx("div", { className: "str-video__embedded-notifications", children: jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(SpeakingWhileMutedNotification, {}) }) }), jsxRuntime.jsx(CallHeader, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleToggleParticipants }) })) })] }), jsxRuntime.jsx(CallControls, { showParticipants: showParticipants, onToggleParticipants: handleToggleParticipants })] }));
+};
+
+/**
+ * CallStateRouter is the state decider component that manages view state transitions.
+ */
+const CallStateRouter = () => {
+    const call = videoReactBindings.useCall();
+    const { useCallCallingState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const callingState = useCallCallingState();
+    const { onError } = useEmbeddedConfiguration();
+    const [joinError, setJoinError] = react.useState(false);
+    const handleJoin = react.useCallback(async () => {
+        if (!call)
+            return;
+        setJoinError(false);
+        try {
+            if (call.state.callingState !== videoClient.CallingState.JOINED) {
+                await call.join();
+            }
+        }
+        catch (e) {
+            onError?.(e);
+            setJoinError(true);
+        }
+    }, [call, onError]);
+    if (joinError) {
+        return jsxRuntime.jsx(JoinError, { onJoin: handleJoin });
+    }
+    if (callingState === videoClient.CallingState.IDLE ||
+        callingState === videoClient.CallingState.UNKNOWN) {
+        return jsxRuntime.jsx(Lobby, { onJoin: handleJoin });
+    }
+    if (callingState === videoClient.CallingState.JOINING && !localParticipant) {
+        return jsxRuntime.jsx(LoadingIndicator, { className: "str-video__embedded-loading" });
+    }
+    if (callingState === videoClient.CallingState.LEFT) {
+        return jsxRuntime.jsx(CallFeedback, { onJoin: handleJoin });
+    }
+    return jsxRuntime.jsx(CallLayout, {});
+};
+
+/**
+ * Drop-in video call component that renders a lobby, active call,
+ * and post-call feedback screen. Handles client and call setup internally.
+ */
+const EmbeddedCall = ({ children, ...props }) => (jsxRuntime.jsxs(EmbeddedClientProvider, { ...props, children: [jsxRuntime.jsx(CallStateRouter, {}), children] }));
+
+const HostLayout = ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { useParticipantCount, useCallSession } = videoReactBindings.useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const session = useCallSession();
+    const { elapsed } = useCallDuration(session?.live_started_at);
+    const { Component: LayoutComponent, props: layoutProps } = useLayout();
+    const [showParticipants, setShowParticipants] = react.useState(false);
+    const handleCloseParticipants = react.useCallback(() => {
+        setShowParticipants(false);
+    }, []);
+    const handleToggleParticipants = react.useCallback(() => {
+        setShowParticipants((prev) => !prev);
+    }, []);
+    const livestreamStatus = (jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", "aria-live": "polite", "aria-atomic": "true", children: [jsxRuntime.jsx("span", { className: isLive
+                    ? 'str-video__embedded-livestream-duration__live-badge'
+                    : 'str-video__embedded-livestream-duration__backstage-badge', children: isLive ? t('Live') : t('Backstage') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), isLive && elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsx(PermissionRequests, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [livestreamStatus, jsxRuntime.jsx(CancelCallConfirmButton, {})] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: livestreamStatus })] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ScreenShareButton, {}) }) }), jsxRuntime.jsx(RecordCallConfirmationButton, {}), isBackstageEnabled && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL], children: isLive ? (jsxRuntime.jsx(WithTooltip, { title: t('End Stream'), children: jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-end-stream-button", onClick: onStopLive, children: [jsxRuntime.jsx(Icon, { icon: "call-end" }), jsxRuntime.jsx("span", { children: t('Stop Live') })] }) })) : (jsxRuntime.jsx(WithTooltip, { title: t('Start Stream'), children: jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-go-live-button", onClick: onGoLive, children: [jsxRuntime.jsx(Icon, { icon: "streaming" }), jsxRuntime.jsx("span", { children: t('Go Live') })] }) })) })), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] })] }));
+};
+
+const HostStateRouter = () => {
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const { onError } = useEmbeddedConfiguration();
+    const { useCallCallingState, useIsCallLive, useCallSettings, useLocalParticipant, } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const isLive = useIsCallLive();
+    const localParticipant = useLocalParticipant();
+    const settings = useCallSettings();
+    const isBackstageEnabled = settings?.backstage?.enabled ?? true;
+    const [joinError, setJoinError] = react.useState(false);
+    const handleJoin = react.useCallback(async () => {
+        if (!call)
+            return;
+        setJoinError(false);
+        try {
+            if (callingState !== videoClient.CallingState.JOINED) {
+                await call.join();
+            }
+        }
+        catch (err) {
+            onError?.(err);
+            setJoinError(true);
+        }
+    }, [call, onError, callingState]);
+    const handleGoLive = react.useCallback(async () => {
+        if (!call)
+            return;
+        try {
+            await call.goLive();
+        }
+        catch (err) {
+            onError?.(err);
+        }
+    }, [call, onError]);
+    const handleStopLive = react.useCallback(async () => {
+        if (!call)
+            return;
+        try {
+            await call.stopLive();
+        }
+        catch (err) {
+            onError?.(err);
+        }
+    }, [call, onError]);
+    if (joinError) {
+        return jsxRuntime.jsx(JoinError, { onJoin: handleJoin });
+    }
+    if (callingState === videoClient.CallingState.IDLE ||
+        callingState === videoClient.CallingState.UNKNOWN) {
+        return (jsxRuntime.jsx(Lobby, { onJoin: handleJoin, title: isBackstageEnabled
+                ? t('Prepare your livestream')
+                : t('Ready to go live'), joinLabel: isBackstageEnabled ? t('Enter Backstage') : t('Go Live') }));
+    }
+    if (callingState === videoClient.CallingState.JOINING && !localParticipant) {
+        return jsxRuntime.jsx(LoadingIndicator, { className: "str-video__embedded-loading" });
+    }
+    if (callingState === videoClient.CallingState.LEFT) {
+        return jsxRuntime.jsx(CallFeedback, { onJoin: handleJoin });
+    }
+    return (jsxRuntime.jsx(HostLayout, { isLive: isLive, isBackstageEnabled: isBackstageEnabled, onGoLive: handleGoLive, onStopLive: handleStopLive }));
+};
+
+const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
+    if (!startsAt)
+        return false;
+    const now = Date.now();
+    const earliestJoin = +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
+    return now >= earliestJoin && now < +startsAt;
+};
+const ViewerLobby = ({ onJoin }) => {
+    const { t } = videoReactBindings.useI18n();
+    const { useCallStartsAt, useCallEndedAt, useHasPermissions, useParticipantCount, useIsCallLive, useCallSettings, } = videoReactBindings.useCallStateHooks();
+    const startsAt = useCallStartsAt();
+    const endedAt = useCallEndedAt();
+    const canJoinEndedCall = useHasPermissions(videoClient.OwnCapability.JOIN_ENDED_CALL);
+    const participantCount = useParticipantCount();
+    const isLive = useIsCallLive();
+    const settings = useCallSettings();
+    const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
+    const [autoJoin, setAutoJoin] = react.useState(false);
+    const [startsAtPassed, setStartsAtPassed] = react.useState(() => !!startsAt && startsAt.getTime() < Date.now());
+    const [canJoinEarly, setCanJoinEarly] = react.useState(() => checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+    const canJoin = (isLive || canJoinEarly) && (!endedAt || canJoinEndedCall);
+    react.useEffect(() => {
+        if (canJoin && autoJoin) {
+            onJoin();
+        }
+    }, [canJoin, autoJoin, onJoin]);
+    react.useEffect(() => {
+        if (!canJoinEarly) {
+            const handle = setInterval(() => {
+                setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+            }, 1000);
+            return () => clearInterval(handle);
+        }
+    }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+    react.useEffect(() => {
+        if (!startsAt || startsAtPassed)
+            return;
+        const check = () => {
+            if (startsAt.getTime() < Date.now()) {
+                setStartsAtPassed(true);
+            }
+        };
+        const interval = setInterval(check, 1000);
+        return () => clearInterval(interval);
+    }, [startsAt, startsAtPassed]);
+    const getStartsAtMessage = () => {
+        if (!startsAt)
+            return null;
+        if (startsAtPassed) {
+            return t('Livestream starts soon');
+        }
+        return t('Livestream starts at {{ time }}', {
+            time: startsAt.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+            }),
+        });
+    };
+    return (jsxRuntime.jsx("div", { className: "str-video__embedded-viewer-lobby", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-viewer-lobby__content", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-viewer-lobby__icon", children: jsxRuntime.jsx(Icon, { icon: "streaming" }) }), jsxRuntime.jsx("h2", { className: "str-video__embedded-viewer-lobby__title", children: canJoin
+                        ? t('Stream is ready!')
+                        : t('Waiting for the livestream to start') }), !canJoin && getStartsAtMessage() && (jsxRuntime.jsx("p", { className: "str-video__embedded-viewer-lobby__starts-at", children: getStartsAtMessage() })), participantCount > 0 && jsxRuntime.jsx(ViewersCount, { count: participantCount }), jsxRuntime.jsx("div", { className: "str-video__embedded-viewer-lobby__actions", children: canJoin ? (jsxRuntime.jsx("button", { className: "str-video__button", onClick: onJoin, children: t('Join Stream') })) : (jsxRuntime.jsxs("label", { className: "str-video__embedded-viewer-lobby__auto-join", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoJoin, onChange: (e) => setAutoJoin(e.target.checked) }), jsxRuntime.jsx("span", { children: t('Join automatically when stream starts') })] })) })] }) }));
+};
+
+const ViewerLayout = () => {
+    useWakeLock();
+    const { t } = videoReactBindings.useI18n();
+    const { useParticipantCount, useCallSession } = videoReactBindings.useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const session = useCallSession();
+    const { elapsed } = useCallDuration(session?.live_started_at);
+    const { Component: LayoutComponent, props: layoutProps } = useLayout();
+    const [showParticipants, setShowParticipants] = react.useState(false);
+    const handleCloseParticipants = react.useCallback(() => {
+        setShowParticipants(false);
+    }, []);
+    const handleToggleParticipants = react.useCallback(() => {
+        setShowParticipants((prev) => !prev);
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('Live') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }), jsxRuntime.jsx(CancelCallConfirmButton, {})] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('Live') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }) })] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] })] }));
+};
+
+const ViewerStateRouter = () => {
+    const call = videoReactBindings.useCall();
+    const { onError } = useEmbeddedConfiguration();
+    const { useCallCallingState, useCallEndedAt, useHasPermissions, useLocalParticipant, } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const localParticipant = useLocalParticipant();
+    const endedAt = useCallEndedAt();
+    const canJoinEndedCall = useHasPermissions(videoClient.OwnCapability.JOIN_ENDED_CALL);
+    const isLivestreamPaused = useIsLivestreamPaused();
+    const [joinError, setJoinError] = react.useState(false);
+    const handleJoin = react.useCallback(async () => {
+        if (!call)
+            return;
+        setJoinError(false);
+        try {
+            if (call.state.callingState !== videoClient.CallingState.JOINED) {
+                await call.join();
+            }
+        }
+        catch (e) {
+            onError?.(e);
+            setJoinError(true);
+        }
+    }, [call, onError]);
+    react.useEffect(() => {
+        if (!call || callingState !== videoClient.CallingState.LEFT)
+            return;
+        return call.on('call.live_started', () => {
+            call.get().catch((e) => {
+                onError?.(e);
+            });
+        });
+    }, [call, callingState, onError]);
+    if (joinError) {
+        return jsxRuntime.jsx(JoinError, { onJoin: handleJoin });
+    }
+    switch (callingState) {
+        case videoClient.CallingState.IDLE:
+        case videoClient.CallingState.UNKNOWN:
+            return jsxRuntime.jsx(ViewerLobby, { onJoin: handleJoin });
+        case videoClient.CallingState.JOINING:
+            if (!localParticipant) {
+                return jsxRuntime.jsx(LoadingIndicator, { className: "str-video__embedded-loading" });
+            }
+            break;
+        case videoClient.CallingState.LEFT: {
+            if (isLivestreamPaused) {
+                return jsxRuntime.jsx(ViewerLobby, { onJoin: handleJoin });
+            }
+            return (jsxRuntime.jsx(CallFeedback, { onJoin: !endedAt || canJoinEndedCall ? handleJoin : undefined }));
+        }
+    }
+    return jsxRuntime.jsx(ViewerLayout, {});
+};
+
+const LivestreamUI = () => {
+    const { useHasPermissions } = videoReactBindings.useCallStateHooks();
+    const isHost = useHasPermissions(videoClient.OwnCapability.JOIN_BACKSTAGE);
+    if (isHost) {
+        return jsxRuntime.jsx(HostStateRouter, {});
+    }
+    return jsxRuntime.jsx(ViewerStateRouter, {});
+};
+
+/**
+ * Drop-in livestream component. Renders host or viewer UI based on permissions.
+ */
+const EmbeddedLivestream = ({ children, ...props }) => (jsxRuntime.jsxs(EmbeddedClientProvider, { ...props, children: [jsxRuntime.jsx(LivestreamUI, {}), children] }));
+
+exports.EmbeddedCall = EmbeddedCall;
+exports.EmbeddedLivestream = EmbeddedLivestream;
+//# sourceMappingURL=embedded.cjs.js.map