@stream-io/video-react-sdk 0.3.41 → 0.3.42

package/dist/index.cjs.js

@@ -0,0 +1,2737 @@
+'use strict';
+
+var videoClient = require('@stream-io/video-client');
+var videoReactBindings = require('@stream-io/video-react-bindings');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('clsx');
+var rxjs = require('rxjs');
+var operators = require('rxjs/operators');
+var react$1 = require('@floating-ui/react');
+var line = require('@nivo/line');
+
+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 }));
+};
+
+const ParticipantsAudio = (props) => {
+    const { participants, audioProps } = props;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: participants.map((participant) => {
+            if (participant.isLocalParticipant)
+                return null;
+            const hasAudio = participant.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+            const hasScreenShareAudio = participant.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE_AUDIO);
+            if (hasAudio && participant.audioStream) {
+                return (react.createElement(Audio, { ...audioProps, trackType: "audioTrack", participant: participant, key: participant.sessionId }));
+            }
+            if (hasScreenShareAudio && participant.screenShareAudioStream) {
+                return (react.createElement(Audio, { ...audioProps, trackType: "screenShareAudioTrack", participant: participant, key: participant.sessionId }));
+            }
+            return null;
+        }) }));
+};
+
+const isComponentType = (elementOrComponent) => {
+    return elementOrComponent === null
+        ? false
+        : !react.isValidElement(elementOrComponent);
+};
+
+const chunk = (array, size) => {
+    const chunkCount = Math.ceil(array.length / size);
+    return Array.from({ length: chunkCount }, (_, index) => array.slice(size * index, size * index + size));
+};
+
+const applyElementToRef = (ref, element) => {
+    if (!ref)
+        return;
+    if (typeof ref === 'function')
+        return ref(element);
+    ref.current = element;
+};
+
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+const BaseVideo = react.forwardRef(({ stream, ...rest }, ref) => {
+    const [videoElement, setVideoElement] = react.useState(null);
+    react.useEffect(() => {
+        if (!videoElement || !stream)
+            return;
+        if (stream === videoElement.srcObject)
+            return;
+        videoElement.srcObject = stream;
+        if (videoClient.Browsers.isSafari() || videoClient.Browsers.isFirefox()) {
+            // Firefox and Safari have some timing issue
+            setTimeout(() => {
+                videoElement.srcObject = stream;
+                videoElement.play().catch((e) => {
+                    console.error(`Failed to play stream`, e);
+                });
+            }, 0);
+        }
+        return () => {
+            videoElement.pause();
+            videoElement.srcObject = null;
+        };
+    }, [stream, videoElement]);
+    return (jsxRuntime.jsx("video", { autoPlay: true, playsInline: true, ...rest, ref: (element) => {
+            applyElementToRef(ref, element);
+            setVideoElement(element);
+        } }));
+});
+
+const DefaultVideoPlaceholder = react.forwardRef(({ participant, style }, 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("div", { className: "str-video__video-placeholder__initials-fallback", children: jsxRuntime.jsx("div", { children: name[0] }) })) : (jsxRuntime.jsx("div", { children: "Video is disabled" }))), participant.image && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "video-placeholder", className: "str-video__video-placeholder__avatar", src: participant.image }))] }));
+});
+
+const Video$1 = ({ trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs, ...rest }) => {
+    const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLocalParticipant, userId, } = participant;
+    const call = videoReactBindings.useCall();
+    const [videoElement, setVideoElement] = react.useState(null);
+    // start with true, will flip once the video starts playing
+    const [isVideoPaused, setIsVideoPaused] = react.useState(true);
+    const [isWideMode, setIsWideMode] = react.useState(true);
+    const stream = trackType === 'videoTrack'
+        ? videoStream
+        : trackType === 'screenShareTrack'
+            ? screenShareStream
+            : undefined;
+    react.useLayoutEffect(() => {
+        if (!call || !videoElement || trackType === 'none')
+            return;
+        const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, trackType, sessionId, videoElement]);
+    react.useEffect(() => {
+        if (!stream || !videoElement)
+            return;
+        const [track] = stream.getVideoTracks();
+        if (!track)
+            return;
+        const handlePlayPause = () => {
+            setIsVideoPaused(videoElement.paused);
+            const { width = 0, height = 0 } = track.getSettings();
+            setIsWideMode(width >= height);
+        };
+        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);
+        };
+    }, [stream, videoElement]);
+    if (!call)
+        return null;
+    const isPublishingTrack = trackType === 'videoTrack'
+        ? publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO)
+        : trackType === 'screenShareTrack'
+            ? publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE)
+            : false;
+    const isInvisible = trackType === 'none' ||
+        viewportVisibilityState?.[trackType] === videoClient.VisibilityState.INVISIBLE;
+    const hasNoVideoOrInvisible = !isPublishingTrack || isInvisible;
+    const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
+    const isScreenShareTrack = trackType === 'screenShareTrack';
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hasNoVideoOrInvisible && (jsxRuntime.jsx("video", { ...rest, className: clsx(className, 'str-video__video', {
+                    'str-video__video--not-playing': isVideoPaused,
+                    'str-video__video--tall': !isWideMode,
+                    'str-video__video--mirror': mirrorVideo,
+                    'str-video__video--screen-share': isScreenShareTrack,
+                }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
+                    setVideoElement(element);
+                    refs?.setVideoElement?.(element);
+                } })), (hasNoVideoOrInvisible || isVideoPaused) && (jsxRuntime.jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+};
+
+const useHasBrowserPermissions = (permissionName) => {
+    const [canSubscribe, enableSubscription] = react.useState(false);
+    react.useEffect(() => {
+        let permissionState;
+        const handlePermissionChange = (e) => {
+            const { state } = e.target;
+            enableSubscription(state === 'granted');
+        };
+        const checkPermissions = async () => {
+            try {
+                permissionState = await navigator.permissions.query({
+                    name: permissionName,
+                });
+                permissionState.addEventListener('change', handlePermissionChange);
+                enableSubscription(permissionState.state === 'granted');
+            }
+            catch (e) {
+                // permission does not exist - cannot be queried
+                // an example would be Firefox - camera, neither microphone perms can be queried
+                enableSubscription(true);
+            }
+        };
+        checkPermissions();
+        return () => {
+            permissionState?.removeEventListener('change', handlePermissionChange);
+        };
+    }, [permissionName]);
+    return canSubscribe;
+};
+/**
+ * Observes changes in connected devices and maintains an up-to-date array of connected MediaDeviceInfo objects.
+ * @param observeDevices
+ * @category Device Management
+ */
+const useDevices = (observeDevices) => {
+    const [devices, setDevices] = react.useState([]);
+    react.useEffect(() => {
+        const subscription = observeDevices().subscribe(setDevices);
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [observeDevices]);
+    return devices;
+};
+/**
+ * Observes changes and maintains an array of connected video input devices
+ * @category Device Management
+ */
+const useVideoDevices = () => useDevices(videoClient.getVideoDevices);
+/**
+ * Observes changes and maintains an array of connected audio input devices
+ * @category Device Management
+ */
+const useAudioInputDevices = () => useDevices(videoClient.getAudioDevices);
+/**
+ * Observes changes and maintains an array of connected audio output devices
+ * @category Device Management
+ */
+const useAudioOutputDevices = () => useDevices(videoClient.getAudioOutputDevices);
+/**
+ * Verifies that newly selected device id exists among the registered devices.
+ * If the selected device id is not found among existing devices, switches to the default device.
+ * The media devices are observed only if a given permission ('camera' resp. 'microphone') is granted in browser.
+ * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
+ * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
+ * @param canObserve
+ * @param devices$
+ * @param switchToDefaultDevice
+ * @param selectedDeviceId
+ * @category Device Management
+ */
+const useDeviceFallback = (canObserve, devices$, switchToDefaultDevice, selectedDeviceId) => {
+    react.useEffect(() => {
+        if (!canObserve)
+            return;
+        const validateDeviceId = devices$.pipe().subscribe((devices) => {
+            const deviceFound = devices.find((device) => device.deviceId === selectedDeviceId);
+            if (!deviceFound)
+                switchToDefaultDevice();
+        });
+        return () => {
+            validateDeviceId.unsubscribe();
+        };
+    }, [canObserve, devices$, selectedDeviceId, switchToDefaultDevice]);
+};
+/**
+ * Verifies that newly selected video device id exists among the registered devices.
+ * If the selected device id is not found among existing devices, switches to the default video device.
+ * The media devices are observed only if 'camera' permission is granted in browser.
+ * It is integrators responsibility to instruct users how to enable required permissions.
+ * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
+ * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
+ * @param switchToDefaultDevice
+ * @param canObserve
+ * @param selectedDeviceId
+ * @category Device Management
+ */
+const useVideoDeviceFallback = (switchToDefaultDevice, canObserve, selectedDeviceId) => useDeviceFallback(canObserve, videoClient.getVideoDevices(), switchToDefaultDevice, selectedDeviceId);
+/**
+ * Verifies that newly selected audio input device id exists among the registered devices.
+ * If the selected device id is not found among existing devices, switches to the default audio input device.
+ * The media devices are observed only if 'microphone' permission is granted in browser.
+ * It is integrators responsibility to instruct users how to enable required permissions.
+ * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
+ * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
+ * @param switchToDefaultDevice
+ * @param canObserve
+ * @param selectedDeviceId
+ * @category Device Management
+ */
+const useAudioInputDeviceFallback = (switchToDefaultDevice, canObserve, selectedDeviceId) => useDeviceFallback(canObserve, videoClient.getAudioDevices(), switchToDefaultDevice, selectedDeviceId);
+/**
+ * Verifies that newly selected audio output device id exists among the registered devices.
+ * If the selected device id is not found among existing devices, switches to the default audio output device.
+ * The media devices are observed only if 'microphone' permission is granted in browser.
+ * It is integrators responsibility to instruct users how to enable required permissions.
+ * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
+ * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
+ * @param switchToDefaultDevice
+ * @param canObserve
+ * @param selectedDeviceId
+ * @category Device Management
+ */
+const useAudioOutputDeviceFallback = (switchToDefaultDevice, canObserve, selectedDeviceId) => useDeviceFallback(canObserve, videoClient.getAudioOutputDevices(), switchToDefaultDevice, selectedDeviceId);
+/**
+ * Observes devices of certain kind are made unavailable and executes onDisconnect callback.
+ * @param observeDevices
+ * @param onDisconnect
+ * @category Device Management
+ */
+const useOnUnavailableDevices = (observeDevices, onDisconnect) => {
+    react.useEffect(() => {
+        const subscription = observeDevices
+            .pipe(rxjs.pairwise())
+            .subscribe(([prev, current]) => {
+            if (prev.length > 0 && current.length === 0)
+                onDisconnect();
+        });
+        return () => subscription.unsubscribe();
+    }, [observeDevices, onDisconnect]);
+};
+/**
+ * Observes disconnect of all video devices and executes onDisconnect callback.
+ * @param onDisconnect
+ * @category Device Management
+ */
+const useOnUnavailableVideoDevices = (onDisconnect) => useOnUnavailableDevices(videoClient.getVideoDevices(), onDisconnect);
+/**
+ * Observes disconnect of all audio input devices and executes onDisconnect callback.
+ * @param onDisconnect
+ * @category Device Management
+ */
+const useOnUnavailableAudioInputDevices = (onDisconnect) => useOnUnavailableDevices(videoClient.getAudioDevices(), onDisconnect);
+/**
+ * Observes disconnect of all audio output devices and executes onDisconnect callback.
+ * @param onDisconnect
+ * @category Device Management
+ */
+const useOnUnavailableAudioOutputDevices = (onDisconnect) => useOnUnavailableDevices(videoClient.getAudioOutputDevices(), onDisconnect);
+
+/**
+ * @internal
+ * @category Device Management
+ */
+const useAudioPublisher = ({ initialAudioMuted, audioDeviceId, }) => {
+    const call = videoReactBindings.useCall();
+    const { useCallState, useCallCallingState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const callState = useCallState();
+    const callingState = useCallCallingState();
+    const participant = useLocalParticipant();
+    const hasBrowserPermissionAudioInput = useHasBrowserPermissions('microphone');
+    const { localParticipant$ } = callState;
+    const isPublishingAudio = participant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const publishAudioStream = react.useCallback(async () => {
+        if (!call)
+            return;
+        if (!call.permissionsContext.hasPermission(videoClient.OwnCapability.SEND_AUDIO)) {
+            throw new Error(`No permission to publish audio`);
+        }
+        try {
+            const audioStream = await videoClient.getAudioStream({
+                deviceId: audioDeviceId,
+            });
+            await call.publishAudioStream(audioStream);
+        }
+        catch (e) {
+            console.log('Failed to publish audio stream', e);
+        }
+    }, [audioDeviceId, call]);
+    const lastAudioDeviceId = react.useRef(audioDeviceId);
+    react.useEffect(() => {
+        if (callingState === videoClient.CallingState.JOINED &&
+            audioDeviceId !== lastAudioDeviceId.current) {
+            lastAudioDeviceId.current = audioDeviceId;
+            publishAudioStream().catch((e) => {
+                console.error('Failed to publish audio stream', e);
+            });
+        }
+    }, [audioDeviceId, callingState, publishAudioStream]);
+    const initialPublishRun = react.useRef(false);
+    react.useEffect(() => {
+        if (callingState === videoClient.CallingState.JOINED &&
+            !initialPublishRun.current &&
+            !initialAudioMuted) {
+            // automatic publishing should happen only when joining the call
+            // from the lobby, and the audio is not muted
+            publishAudioStream().catch((e) => {
+                console.error('Failed to publish audio stream', e);
+            });
+            initialPublishRun.current = true;
+        }
+    }, [callingState, initialAudioMuted, publishAudioStream]);
+    react.useEffect(() => {
+        if (!localParticipant$ || !hasBrowserPermissionAudioInput)
+            return;
+        const subscription = videoClient.watchForDisconnectedAudioDevice(localParticipant$.pipe(rxjs.map((p) => p?.audioDeviceId))).subscribe(async () => {
+            if (!call)
+                return;
+            call.setAudioDevice(undefined);
+            await call.stopPublish(videoClient.SfuModels.TrackType.AUDIO);
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [hasBrowserPermissionAudioInput, localParticipant$, call]);
+    react.useEffect(() => {
+        if (!participant?.audioStream || !call || !isPublishingAudio)
+            return;
+        const [track] = participant.audioStream.getAudioTracks();
+        const selectedAudioDeviceId = track.getSettings().deviceId;
+        const republishDefaultDevice = videoClient.watchForAddedDefaultAudioDevice().subscribe(async () => {
+            if (!(call &&
+                participant.audioStream &&
+                selectedAudioDeviceId === 'default'))
+                return;
+            // We need to stop the original track first in order
+            // we can retrieve the new default device stream
+            track.stop();
+            const audioStream = await videoClient.getAudioStream({
+                deviceId: 'default',
+            });
+            await call.publishAudioStream(audioStream);
+        });
+        const handleTrackEnded = async () => {
+            if (selectedAudioDeviceId === audioDeviceId) {
+                const audioStream = await videoClient.getAudioStream({
+                    deviceId: audioDeviceId,
+                });
+                await call.publishAudioStream(audioStream);
+            }
+        };
+        track.addEventListener('ended', handleTrackEnded);
+        return () => {
+            track.removeEventListener('ended', handleTrackEnded);
+            republishDefaultDevice.unsubscribe();
+        };
+    }, [audioDeviceId, call, participant?.audioStream, isPublishingAudio]);
+    return publishAudioStream;
+};
+
+const useQueryParams = () => {
+    return react.useMemo(() => typeof window === 'undefined'
+        ? null
+        : new URLSearchParams(window.location.search), []);
+};
+/**
+ * Internal purpose hook. Enables certain development mode tools.
+ */
+const useIsDebugMode = () => {
+    const params = useQueryParams();
+    return !!params?.get('debug');
+};
+const useDebugPreferredVideoCodec = () => {
+    const params = useQueryParams();
+    return params?.get('video_codec');
+};
+
+/**
+ * @internal
+ * @category Device Management
+ */
+const useVideoPublisher = ({ initialVideoMuted, videoDeviceId, }) => {
+    const call = videoReactBindings.useCall();
+    const { useCallState, useCallCallingState, useLocalParticipant, useCallSettings, } = videoReactBindings.useCallStateHooks();
+    const callState = useCallState();
+    const callingState = useCallCallingState();
+    const participant = useLocalParticipant();
+    const hasBrowserPermissionVideoInput = useHasBrowserPermissions('camera');
+    const { localParticipant$ } = callState;
+    const preferredCodec = useDebugPreferredVideoCodec();
+    const isPublishingVideo = participant?.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const settings = useCallSettings();
+    const videoSettings = settings?.video;
+    const targetResolution = videoSettings?.target_resolution;
+    const publishVideoStream = react.useCallback(async () => {
+        if (!call)
+            return;
+        if (!call.permissionsContext.hasPermission(videoClient.OwnCapability.SEND_VIDEO)) {
+            throw new Error(`No permission to publish video`);
+        }
+        try {
+            const videoStream = await videoClient.getVideoStream({
+                deviceId: videoDeviceId,
+                width: targetResolution?.width,
+                height: targetResolution?.height,
+                facingMode: toFacingMode(videoSettings?.camera_facing),
+            });
+            await call.publishVideoStream(videoStream, { preferredCodec });
+        }
+        catch (e) {
+            console.log('Failed to publish video stream', e);
+        }
+    }, [
+        call,
+        preferredCodec,
+        targetResolution?.height,
+        targetResolution?.width,
+        videoDeviceId,
+        videoSettings?.camera_facing,
+    ]);
+    const lastVideoDeviceId = react.useRef(videoDeviceId);
+    react.useEffect(() => {
+        if (callingState === videoClient.CallingState.JOINED &&
+            videoDeviceId !== lastVideoDeviceId.current) {
+            lastVideoDeviceId.current = videoDeviceId;
+            publishVideoStream().catch((e) => {
+                console.error('Failed to publish video stream', e);
+            });
+        }
+    }, [publishVideoStream, videoDeviceId, callingState]);
+    const initialPublishRun = react.useRef(false);
+    react.useEffect(() => {
+        if (callingState === videoClient.CallingState.JOINED &&
+            !initialPublishRun.current &&
+            !initialVideoMuted) {
+            // automatic publishing should happen only when joining the call
+            // from the lobby, and the video is not muted
+            publishVideoStream().catch((e) => {
+                console.error('Failed to publish video stream', e);
+            });
+            initialPublishRun.current = true;
+        }
+    }, [callingState, initialVideoMuted, publishVideoStream]);
+    react.useEffect(() => {
+        if (!localParticipant$ || !hasBrowserPermissionVideoInput)
+            return;
+        const subscription = videoClient.watchForDisconnectedVideoDevice(localParticipant$.pipe(operators.map((p) => p?.videoDeviceId))).subscribe(async () => {
+            if (!call)
+                return;
+            call.setVideoDevice(undefined);
+            await call.stopPublish(videoClient.SfuModels.TrackType.VIDEO);
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [hasBrowserPermissionVideoInput, localParticipant$, call]);
+    react.useEffect(() => {
+        if (!participant?.videoStream || !call || !isPublishingVideo)
+            return;
+        const [track] = participant.videoStream.getVideoTracks();
+        const selectedVideoDeviceId = track.getSettings().deviceId;
+        const republishDefaultDevice = videoClient.watchForAddedDefaultVideoDevice().subscribe(async () => {
+            if (!(call &&
+                participant.videoStream &&
+                selectedVideoDeviceId === 'default'))
+                return;
+            // We need to stop the original track first in order
+            // we can retrieve the new default device stream
+            track.stop();
+            const videoStream = await videoClient.getVideoStream({
+                deviceId: 'default',
+            });
+            await call.publishVideoStream(videoStream);
+        });
+        const handleTrackEnded = async () => {
+            if (selectedVideoDeviceId === videoDeviceId) {
+                const videoStream = await videoClient.getVideoStream({
+                    deviceId: videoDeviceId,
+                });
+                await call.publishVideoStream(videoStream);
+            }
+        };
+        track.addEventListener('ended', handleTrackEnded);
+        return () => {
+            track.removeEventListener('ended', handleTrackEnded);
+            republishDefaultDevice.unsubscribe();
+        };
+    }, [videoDeviceId, call, participant?.videoStream, isPublishingVideo]);
+    return publishVideoStream;
+};
+const toFacingMode = (value) => {
+    switch (value) {
+        case videoClient.VideoSettingsCameraFacingEnum.FRONT:
+            return 'user';
+        case videoClient.VideoSettingsCameraFacingEnum.BACK:
+            return 'environment';
+        default:
+            return undefined;
+    }
+};
+
+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 useFloatingUIPreset = ({ placement, strategy, }) => {
+    const { refs, x, y, update, elements: { domReference, floating }, } = react$1.useFloating({
+        placement,
+        strategy,
+        middleware: [
+            react$1.offset(10),
+            react$1.shift(),
+            react$1.flip(),
+            react$1.size({
+                padding: 10,
+                apply: ({ availableHeight, elements }) => {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+        ],
+    });
+    // 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 };
+};
+
+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 hasPermission = videoReactBindings.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,
+    };
+};
+
+const useToggleAudioMuteState = () => {
+    const { publishAudioStream, stopPublishingAudio } = useMediaDevices();
+    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const { isAwaitingPermission, requestPermission } = useRequestPermission(videoClient.OwnCapability.SEND_AUDIO);
+    // to keep the toggle function as stable as possible
+    const isAudioMutedReference = react.useRef(false);
+    isAudioMutedReference.current = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const toggleAudioMuteState = react.useCallback(async () => {
+        if (isAudioMutedReference.current) {
+            const canPublish = await requestPermission();
+            if (canPublish)
+                return publishAudioStream();
+        }
+        if (!isAudioMutedReference.current)
+            await stopPublishingAudio();
+    }, [publishAudioStream, requestPermission, stopPublishingAudio]);
+    return { toggleAudioMuteState, isAwaitingPermission };
+};
+
+const useToggleVideoMuteState = () => {
+    const { publishVideoStream, stopPublishingVideo } = useMediaDevices();
+    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const { isAwaitingPermission, requestPermission } = useRequestPermission(videoClient.OwnCapability.SEND_VIDEO);
+    // to keep the toggle function as stable as possible
+    const isVideoMutedReference = react.useRef(false);
+    isVideoMutedReference.current = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const toggleVideoMuteState = react.useCallback(async () => {
+        if (isVideoMutedReference.current) {
+            const canPublish = await requestPermission();
+            if (canPublish)
+                return publishVideoStream();
+        }
+        if (!isVideoMutedReference.current)
+            await stopPublishingVideo();
+    }, [publishVideoStream, requestPermission, stopPublishingVideo]);
+    return { toggleVideoMuteState, isAwaitingPermission };
+};
+
+const useToggleScreenShare = () => {
+    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const call = videoReactBindings.useCall();
+    const isScreenSharingReference = react.useRef(false);
+    const { isAwaitingPermission, requestPermission } = useRequestPermission(videoClient.OwnCapability.SCREENSHARE);
+    const isScreenSharing = !!localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
+    isScreenSharingReference.current = isScreenSharing;
+    const toggleScreenShare = react.useCallback(async () => {
+        if (!isScreenSharingReference.current) {
+            const canPublish = await requestPermission();
+            if (!canPublish)
+                return;
+            const stream = await videoClient.getScreenShareStream().catch((e) => {
+                console.log(`Can't share screen: ${e}`);
+            });
+            if (stream) {
+                return call?.publishScreenShareStream(stream);
+            }
+        }
+        await call?.stopPublish(videoClient.SfuModels.TrackType.SCREEN_SHARE);
+    }, [call, requestPermission]);
+    return { toggleScreenShare, isAwaitingPermission, isScreenSharing };
+};
+
+const useToggleCallRecording = () => {
+    const call = videoReactBindings.useCall();
+    const { useIsCallRecordingInProgress } = videoReactBindings.useCallStateHooks();
+    const isCallRecordingInProgress = useIsCallRecordingInProgress();
+    const [isAwaitingResponse, setIsAwaitingResponse] = react.useState(false);
+    // TODO: add permissions
+    react.useEffect(() => {
+        // we wait until call.recording_started/stopped event to flips the
+        // `isCallRecordingInProgress` state variable.
+        // Once the flip happens, we remove the loading indicator
+        setIsAwaitingResponse((isAwaiting) => {
+            if (isAwaiting)
+                return false;
+            return isAwaiting;
+        });
+    }, [isCallRecordingInProgress]);
+    const toggleCallRecording = react.useCallback(async () => {
+        try {
+            setIsAwaitingResponse(true);
+            if (isCallRecordingInProgress) {
+                await call?.stopRecording();
+            }
+            else {
+                await call?.startRecording();
+            }
+        }
+        catch (e) {
+            console.error(`Failed start recording`, e);
+        }
+    }, [call, isCallRecordingInProgress]);
+    return { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress };
+};
+
+const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', children, }) => {
+    const [menuShown, setMenuShown] = react.useState(false);
+    const { floating, domReference, refs, x, y } = useFloatingUIPreset({
+        placement,
+        strategy,
+    });
+    react.useEffect(() => {
+        const handleClick = (event) => {
+            if (!floating && domReference?.contains(event.target)) {
+                setMenuShown(true);
+            }
+            else if (floating && !floating?.contains(event.target)) {
+                setMenuShown(false);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key.toLowerCase() === 'escape' &&
+                !event.altKey &&
+                !event.ctrlKey) {
+                setMenuShown(false);
+            }
+        };
+        document?.addEventListener('click', handleClick, { capture: true });
+        document?.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document?.removeEventListener('click', handleClick, { capture: true });
+            document?.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [floating, domReference]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuShown && (jsxRuntime.jsx("div", { className: "str-video__menu-container", ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y ?? 0,
+                    left: x ?? 0,
+                    overflowY: 'auto',
+                }, children: children })), jsxRuntime.jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
+};
+
+const GenericMenu = ({ children }) => {
+    return jsxRuntime.jsx("ul", { className: "str-video__generic-menu", 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 = ({ icon }) => (jsxRuntime.jsx("span", { className: clsx.clsx('str-video__icon', icon && `str-video__icon--${icon}`) }));
+
+const IconButton = react.forwardRef((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(({ caption, children, active, Menu, menuPlacement }, ref) => {
+    return (jsxRuntime.jsxs("div", { className: "str-video__composite-button", ref: ref, children: [jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button__button-group', {
+                    'str-video__composite-button__button-group--active': active,
+                }), children: [children, Menu && (jsxRuntime.jsx(MenuToggle, { placement: menuPlacement, ToggleButton: ToggleMenuButton$2, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+});
+const ToggleMenuButton$2 = react.forwardRef(({ menuShown }, ref) => (jsxRuntime.jsx(IconButton, { className: 'str-video__menu-toggle-button', icon: menuShown ? 'caret-down' : 'caret-up', title: "Toggle device menu", ref: ref })));
+
+const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
+    const { refs, x, y, strategy } = useFloatingUIPreset({
+        placement: tooltipPlacement,
+        strategy: 'absolute',
+    });
+    react.useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    if (!visible)
+        return null;
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            overflowY: 'auto',
+        }, children: 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, ...props }) => {
+    const { handleMouseEnter, handleMouseLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const [tooltipAnchor, setTooltipAnchor] = react.useState(null);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsxRuntime.jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
+};
+
+const CopyToClipboardButton = react.forwardRef(({ Button, className, copyValue, onClick, onError, onSuccess, ...restProps }, ref) => {
+    const handleClick = react.useCallback(async (event) => {
+        if (onClick)
+            onClick(event);
+        const value = typeof copyValue === 'function' ? copyValue() : copyValue;
+        try {
+            await navigator?.clipboard.writeText(value);
+            onSuccess?.(event.target);
+        }
+        catch (error) {
+            onError?.(event.target, error);
+        }
+    }, [copyValue, onClick, onError, onSuccess]);
+    const props = {
+        ...restProps,
+        ref: ref,
+        className: clsx('str-video__copy-to-clipboard-button', className),
+        onClick: handleClick,
+    };
+    return Button ? jsxRuntime.jsx(Button, { ...props }) : jsxRuntime.jsx("button", { ...props });
+});
+const CopyToClipboardButtonWithPopup = ({ dismissAfterMs = 1500, onErrorMessage = 'Failed to copy', onSuccessMessage = 'Copied to clipboard', popupClassName, popupPlacement, ...restProps }) => {
+    const [tooltipText, setTooltipText] = react.useState('');
+    const [tooltipAnchor, setTooltipAnchor] = react.useState(null);
+    const setTemporaryPopup = react.useCallback((popupText) => {
+        setTooltipText(popupText);
+        setTimeout(() => setTooltipText(''), dismissAfterMs);
+    }, [dismissAfterMs]);
+    const onSuccess = react.useCallback(() => setTemporaryPopup(onSuccessMessage), [onSuccessMessage, setTemporaryPopup]);
+    const onError = react.useCallback(() => setTemporaryPopup(onErrorMessage), [onErrorMessage, setTemporaryPopup]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { tooltipClassName: clsx('str-video__copy-to-clipboard-button__popup', popupClassName), tooltipPlacement: popupPlacement, referenceElement: tooltipAnchor, visible: !!tooltipText, children: tooltipText }), jsxRuntime.jsx(CopyToClipboardButton, { ...restProps, onError: onError, onSuccess: onSuccess, ref: setTooltipAnchor })] }));
+};
+
+const TextButton = ({ children, ...rest }) => {
+    return (jsxRuntime.jsx("button", { ...rest, className: "str-video__text-button", children: children }));
+};
+
+const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
+    const call = videoReactBindings.useCall();
+    const handleClick = react.useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            await call.join();
+            onAccept?.();
+        }
+    }, [onClick, onAccept, call]);
+    return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-accept", variant: "success", onClick: handleClick }));
+};
+
+const Notification = (props) => {
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', iconClassName = 'str-video__notification__icon', } = 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", { ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: "str-video__notification", 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 })] })), children] }));
+};
+
+const PermissionNotification = (props) => {
+    const { permission, isAwaitingApproval, messageApproved, messageAwaitingApproval, messageRevoked, visibilityTimeout = 3500, children, } = props;
+    const hasPermission = videoReactBindings.useHasPermissions(permission);
+    const prevHasPermission = react.useRef(hasPermission);
+    const [showNotification, setShowNotification] = react.useState();
+    react.useEffect(() => {
+        if (hasPermission && !prevHasPermission.current) {
+            setShowNotification('granted');
+            prevHasPermission.current = true;
+        }
+        else if (!hasPermission && prevHasPermission.current) {
+            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, }) => {
+    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const { getAudioStream } = useMediaDevices();
+    const { t } = videoReactBindings.useI18n();
+    const message = text ?? t('You are muted. Unmute to speak.');
+    const isAudioMute = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const audioDeviceId = localParticipant?.audioDeviceId;
+    const [isSpeakingWhileMuted, setIsSpeakingWhileMuted] = react.useState(false);
+    react.useEffect(() => {
+        // do nothing when not muted
+        if (!isAudioMute)
+            return;
+        const disposeSoundDetector = getAudioStream({
+            deviceId: audioDeviceId,
+        }).then((audioStream) => videoClient.createSoundDetector(audioStream, ({ isSoundDetected }) => {
+            setIsSpeakingWhileMuted((isNotified) => isNotified ? isNotified : isSoundDetected);
+        }));
+        disposeSoundDetector.catch((err) => {
+            console.error('Error while creating sound detector', err);
+        });
+        return () => {
+            disposeSoundDetector
+                .then((dispose) => dispose())
+                .catch((err) => {
+                console.error('Error while disposing sound detector', err);
+            });
+            setIsSpeakingWhileMuted(false);
+        };
+    }, [audioDeviceId, getAudioStream, isAudioMute]);
+    react.useEffect(() => {
+        if (!isSpeakingWhileMuted)
+            return;
+        const timeout = setTimeout(() => {
+            setIsSpeakingWhileMuted(false);
+        }, 3500);
+        return () => {
+            clearTimeout(timeout);
+            setIsSpeakingWhileMuted(false);
+        };
+    }, [isSpeakingWhileMuted]);
+    return (jsxRuntime.jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, children: children }));
+};
+
+const CallControls = ({ onLeave }) => (jsxRuntime.jsxs("div", { className: "str-video__call-controls", children: [jsxRuntime.jsx(RecordCallButton, {}), jsxRuntime.jsx(CallStatsButton, {}), jsxRuntime.jsx(ScreenShareButton, {}), jsxRuntime.jsx(SpeakingWhileMutedNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, {}) }), jsxRuntime.jsx(ToggleVideoPublishingButton, {}), jsxRuntime.jsx(CancelCallButton, { onLeave: onLeave })] }));
+
+const CallStatsLatencyChart = (props) => {
+    const { values } = props;
+    let max = 0;
+    const data = values.map((point) => {
+        const { y } = point;
+        max = Math.max(max, y);
+        return point;
+    });
+    return (jsxRuntime.jsx("div", { className: "str-video__call-stats-line-chart-container", children: jsxRuntime.jsx(line.ResponsiveLine, { colors: { scheme: 'blues' }, data: [
+                {
+                    id: 'Latency',
+                    data: data,
+                },
+            ], animate: false, margin: { top: 10, right: 5, bottom: 5, left: 30 }, enablePoints: true, enableGridX: false, enableGridY: true, enableSlices: "x", isInteractive: true, useMesh: false, xScale: { type: 'point' }, yScale: {
+                type: 'linear',
+                min: 0,
+                max: max < 220 ? 220 : max + 30,
+                nice: true,
+            }, theme: {
+                axis: {
+                    ticks: {
+                        text: {
+                            fill: '#FCFCFD',
+                        },
+                        line: {
+                            stroke: '#FCFCFD',
+                        },
+                    },
+                },
+                grid: {
+                    line: {
+                        strokeWidth: 0.1,
+                    },
+                },
+            } }) }));
+};
+
+const CallStats = () => {
+    const [latencyBuffer, setLatencyBuffer] = react.useState(() => {
+        const now = Date.now();
+        return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
+    });
+    const [publishBitrate, setPublishBitrate] = react.useState('-');
+    const [subscribeBitrate, setSubscribeBitrate] = react.useState('-');
+    const previousStats = react.useRef();
+    const { useCallStatsReport } = videoReactBindings.useCallStateHooks();
+    const callStatsReport = useCallStatsReport();
+    react.useEffect(() => {
+        if (!callStatsReport)
+            return;
+        if (!previousStats.current) {
+            previousStats.current = callStatsReport;
+            return;
+        }
+        const previousCallStatsReport = previousStats.current;
+        setPublishBitrate(() => {
+            return calculatePublishBitrate(previousCallStatsReport, callStatsReport);
+        });
+        setSubscribeBitrate(() => {
+            return calculateSubscribeBitrate(previousCallStatsReport, callStatsReport);
+        });
+        setLatencyBuffer((latencyBuf) => {
+            const newLatencyBuffer = latencyBuf.slice(-19);
+            newLatencyBuffer.push({
+                x: callStatsReport.timestamp,
+                y: callStatsReport.publisherStats.averageRoundTripTimeInMs,
+            });
+            return newLatencyBuffer;
+        });
+        previousStats.current = callStatsReport;
+    }, [callStatsReport]);
+    return (jsxRuntime.jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h3", { children: "Call Latency" }), jsxRuntime.jsx(CallStatsLatencyChart, { values: latencyBuffer }), jsxRuntime.jsx("h3", { children: "Call performance" }), jsxRuntime.jsxs("div", { className: "str-video__call-stats__card-container", children: [jsxRuntime.jsx(StatCard, { label: "Region", value: callStatsReport.datacenter }), jsxRuntime.jsx(StatCard, { label: "Latency", value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.` }), jsxRuntime.jsx(StatCard, { label: "Receive jitter", value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.` }), jsxRuntime.jsx(StatCard, { label: "Publish jitter", value: `${callStatsReport.publisherStats.averageJitterInMs} ms.` }), jsxRuntime.jsx(StatCard, { label: "Publish resolution", value: toFrameSize(callStatsReport.publisherStats) }), jsxRuntime.jsx(StatCard, { label: "Publish quality drop reason", value: callStatsReport.publisherStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: "Receiving resolution", value: toFrameSize(callStatsReport.subscriberStats) }), jsxRuntime.jsx(StatCard, { label: "Receive quality drop reason", value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsxRuntime.jsx(StatCard, { label: "Publish bitrate", value: publishBitrate }), jsxRuntime.jsx(StatCard, { label: "Receiving bitrate", value: subscribeBitrate })] })] })) }));
+};
+const StatCard = (props) => {
+    const { label, value } = props;
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-stats__card", children: [jsxRuntime.jsx("div", { className: "str-video__call-stats__card_label", children: label }), jsxRuntime.jsx("div", { className: "str-video__call-stats__card_value", children: value })] }));
+};
+const toFrameSize = (stats) => {
+    const { highestFrameWidth: w, highestFrameHeight: h, highestFramesPerSecond: fps, } = stats;
+    let size = `-`;
+    if (w && h) {
+        size = `${w}x${h}`;
+        if (fps) {
+            size += `@${fps}fps.`;
+        }
+    }
+    return size;
+};
+const calculatePublishBitrate = (previousCallStatsReport, callStatsReport) => {
+    const { publisherStats: { totalBytesSent: previousTotalBytesSent, timestamp: previousTimestamp, }, } = previousCallStatsReport;
+    const { publisherStats: { totalBytesSent, timestamp }, } = callStatsReport;
+    const bytesSent = totalBytesSent - previousTotalBytesSent;
+    const timeElapsed = timestamp - previousTimestamp;
+    return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+const calculateSubscribeBitrate = (previousCallStatsReport, callStatsReport) => {
+    const { subscriberStats: { totalBytesReceived: previousTotalBytesReceived, timestamp: previousTimestamp, }, } = previousCallStatsReport;
+    const { subscriberStats: { totalBytesReceived, timestamp }, } = callStatsReport;
+    const bytesReceived = totalBytesReceived - previousTotalBytesReceived;
+    const timeElapsed = timestamp - previousTimestamp;
+    return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
+};
+
+const CallStatsButton = () => (jsxRuntime.jsx(MenuToggle, { placement: "top-end", ToggleButton: ToggleMenuButton$1, children: jsxRuntime.jsx(CallStats, {}) }));
+const ToggleMenuButton$1 = react.forwardRef(({ menuShown }, ref) => (jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, caption: 'Stats', children: jsxRuntime.jsx(IconButton, { icon: "stats", title: "Statistics" }) })));
+
+const CancelCallButton = ({ disabled, onClick, onLeave, }) => {
+    const call = videoReactBindings.useCall();
+    const handleClick = react.useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            await call.leave();
+            onLeave?.();
+        }
+    }, [onClick, onLeave, call]);
+    return (jsxRuntime.jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", onClick: handleClick }));
+};
+
+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, }) => {
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(CompositeButton, { active: false, caption: t('Reactions'), menuPlacement: "top-start", Menu: jsxRuntime.jsx(DefaultReactionsMenu, { reactions: reactions }), children: jsxRuntime.jsx(IconButton, { icon: "reactions", title: t('Reactions'), onClick: () => {
+                    console.log('Reactions');
+                } }) }) }));
+};
+const DefaultReactionsMenu = ({ reactions, }) => {
+    const call = videoReactBindings.useCall();
+    return (jsxRuntime.jsx("div", { className: "str-video__reactions-menu", children: reactions.map((reaction) => (jsxRuntime.jsx("button", { type: "button", className: "str-video__reactions-menu__button", onClick: () => {
+                call?.sendReaction(reaction);
+            }, children: reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code] }, reaction.emoji_code))) }));
+};
+
+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 RecordCallButton = ({ caption = 'Record', }) => {
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
+            videoClient.OwnCapability.START_RECORD_CALL,
+            videoClient.OwnCapability.STOP_RECORD_CALL,
+        ], children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, { tooltip: isCallRecordingInProgress
+                    ? t('Waiting for recording to stop...')
+                    : t('Waiting for recording to start...') })) : (jsxRuntime.jsx(IconButton
+            // FIXME OL: sort out this ambiguity
+            , { 
+                // FIXME OL: sort out this ambiguity
+                enabled: !!call, disabled: !call, icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off', title: t('Record call'), onClick: toggleCallRecording })) }) }));
+};
+
+const ScreenShareButton = ({ caption = 'Screen Share', }) => {
+    const call = videoReactBindings.useCall();
+    const { useHasOngoingScreenShare } = videoReactBindings.useCallStateHooks();
+    const isSomeoneScreenSharing = useHasOngoingScreenShare();
+    const { t } = videoReactBindings.useI18n();
+    const { toggleScreenShare, isAwaitingPermission, isScreenSharing } = useToggleScreenShare();
+    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(CompositeButton, { active: isSomeoneScreenSharing, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isScreenSharing ? 'screen-share-on' : 'screen-share-off', title: t('Share screen'), disabled: (!isScreenSharing && isSomeoneScreenSharing) || !call, onClick: toggleScreenShare }) }) }) }));
+};
+
+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 DeviceSelector = (props) => {
+    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, onChange, } = props;
+    const inputGroupName = title.replace(' ', '-').toLowerCase();
+    // sometimes the browser (Chrome) will report the system-default device
+    // with an id of 'default'. In case when it doesn't, we'll select the first
+    // available device.
+    let selectedDeviceId = selectedDeviceFromProps;
+    if (devices.length > 0 &&
+        !devices.find((d) => d.deviceId === selectedDeviceId)) {
+        selectedDeviceId = devices[0].deviceId;
+    }
+    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 }), !devices.length ? (jsxRuntime.jsx(DeviceSelectorOption, { id: `${inputGroupName}--default`, label: "Default", name: inputGroupName, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+                return (jsxRuntime.jsx(DeviceSelectorOption, { id: `${inputGroupName}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
+                        onChange?.(e.target.value);
+                    }, name: inputGroupName, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
+            }))] }));
+};
+
+const DeviceSelectorAudioInput = ({ title = 'Select a Mic', }) => {
+    const { selectedAudioInputDeviceId, switchDevice } = useMediaDevices();
+    const audioInputDevices = useAudioInputDevices();
+    return (jsxRuntime.jsx(DeviceSelector, { devices: audioInputDevices, selectedDeviceId: selectedAudioInputDeviceId, onChange: (deviceId) => {
+            switchDevice('audioinput', deviceId);
+        }, title: title }));
+};
+const DeviceSelectorAudioOutput = ({ title = 'Select Speakers', }) => {
+    const { isAudioOutputChangeSupported, selectedAudioOutputDeviceId, switchDevice, } = useMediaDevices();
+    const audioOutputDevices = useAudioOutputDevices();
+    if (!isAudioOutputChangeSupported)
+        return null;
+    return (jsxRuntime.jsx(DeviceSelector, { devices: audioOutputDevices, selectedDeviceId: selectedAudioOutputDeviceId, onChange: (deviceId) => {
+            switchDevice('audiooutput', deviceId);
+        }, title: title }));
+};
+
+const DeviceSelectorVideo = ({ title }) => {
+    const { selectedVideoDeviceId, switchDevice } = useMediaDevices();
+    const videoDevices = useVideoDevices();
+    return (jsxRuntime.jsx(DeviceSelector, { devices: videoDevices, selectedDeviceId: selectedVideoDeviceId, onChange: (deviceId) => {
+            switchDevice('videoinput', deviceId);
+        }, title: title || 'Select a Camera' }));
+};
+
+const DeviceSettings = () => {
+    return (jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleMenuButton, children: jsxRuntime.jsx(Menu, {}) }));
+};
+const Menu = () => (jsxRuntime.jsxs("div", { className: "str-video__device-settings", children: [jsxRuntime.jsx(DeviceSelectorVideo, {}), jsxRuntime.jsx(DeviceSelectorAudioInput, {}), jsxRuntime.jsx(DeviceSelectorAudioOutput, {})] }));
+const ToggleMenuButton = react.forwardRef(({ menuShown }, ref) => (jsxRuntime.jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+        'str-video__device-settings__button--active': menuShown,
+    }), title: "Toggle device menu", icon: "device-settings", ref: ref })));
+
+const ToggleAudioPreviewButton = (props) => {
+    const { initialAudioEnabled, toggleInitialAudioMuteState } = useMediaDevices();
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
+    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: !initialAudioEnabled, caption: caption || t('Mic'), children: jsxRuntime.jsx(IconButton, { icon: initialAudioEnabled ? 'mic' : 'mic-off', onClick: toggleInitialAudioMuteState }) }));
+};
+const ToggleAudioPublishingButton = (props) => {
+    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
+    const isAudioMute = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const { toggleAudioMuteState: handleClick, isAwaitingPermission } = useToggleAudioMuteState();
+    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(CompositeButton, { Menu: Menu, active: isAudioMute, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isAudioMute ? 'mic-off' : 'mic', onClick: handleClick }) }) }) }));
+};
+
+const ToggleAudioOutputButton = (props) => {
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
+    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: true, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: "speaker" }) }));
+};
+
+const ToggleVideoPreviewButton = (props) => {
+    const { toggleInitialVideoMuteState, initialVideoState } = useMediaDevices();
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
+    return (jsxRuntime.jsx(CompositeButton, { Menu: Menu, active: !initialVideoState.enabled, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: initialVideoState.enabled ? 'camera' : 'camera-off', onClick: toggleInitialVideoMuteState }) }));
+};
+const ToggleVideoPublishingButton = (props) => {
+    const { useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const { t } = videoReactBindings.useI18n();
+    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
+    const isVideoMute = !localParticipant?.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const { toggleVideoMuteState: handleClick, isAwaitingPermission } = useToggleVideoMuteState();
+    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(CompositeButton, { Menu: Menu, active: isVideoMute, caption: caption, children: jsxRuntime.jsx(IconButton, { icon: isVideoMute ? 'camera-off' : 'camera', onClick: handleClick }) }) }) }));
+};
+
+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("button", { onClick: onClose, className: "str-video__participant-list-header__close-button", children: jsxRuntime.jsx("span", { className: "str-video__participant-list-header__close-button--icon" }) })] }));
+};
+
+const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
+    const isAudioOn = participant.publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const isVideoOn = participant.publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const isPinned = !!participant.pin;
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [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'}`) }), isPinned && (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(ParticipantActionsContextMenu, { participant: participant }) })] })] }));
+};
+const MediaIndicator = (props) => (jsxRuntime.jsx(WithTooltip, { ...props }));
+// todo: implement display device flag
+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((props, ref) => {
+    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+const ParticipantActionsContextMenu = ({ participant, participantViewElement, videoElement, }) => {
+    const [fullscreenModeOn, setFullscreenModeOn] = react.useState(!!document.fullscreenElement);
+    const [pictureInPictureElement, setPictureInPictureElement] = react.useState(document.pictureInPictureElement);
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const { pin, publishedTracks, sessionId, userId } = participant;
+    const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const hasScreenShare = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
+    const hasScreenShareAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE_AUDIO);
+    const blockUser = () => call?.blockUser(userId);
+    const muteAudio = () => call?.muteUser(userId, 'audio');
+    const muteVideo = () => call?.muteUser(userId, 'video');
+    const muteScreenShare = () => call?.muteUser(userId, 'screenshare');
+    const muteScreenShareAudio = () => call?.muteUser(userId, 'screenshare_audio');
+    const grantPermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            grant_permissions: [permission],
+        });
+    };
+    const revokePermission = (permission) => () => {
+        call?.updateUserPermissions({
+            user_id: userId,
+            revoke_permissions: [permission],
+        });
+    };
+    const toggleParticipantPinnedAt = () => {
+        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()
+                .then(() => setFullscreenModeOn(true))
+                .catch(console.error);
+        }
+        document
+            .exitFullscreen()
+            .catch(console.error)
+            .finally(() => setFullscreenModeOn(false));
+    };
+    react.useEffect(() => {
+        if (!videoElement)
+            return;
+        const handlePictureInPicture = () => {
+            setPictureInPictureElement(document.pictureInPictureElement);
+        };
+        videoElement.addEventListener('enterpictureinpicture', handlePictureInPicture);
+        videoElement.addEventListener('leavepictureinpicture', handlePictureInPicture);
+        return () => {
+            videoElement.removeEventListener('enterpictureinpicture', handlePictureInPicture);
+            videoElement.removeEventListener('leavepictureinpicture', handlePictureInPicture);
+        };
+    }, [videoElement]);
+    const togglePictureInPicture = () => {
+        if (videoElement && pictureInPictureElement !== videoElement) {
+            return videoElement
+                .requestPictureInPicture()
+                .catch(console.error);
+        }
+        document.exitPictureInPicture().catch(console.error);
+    };
+    return (jsxRuntime.jsxs(GenericMenu, { children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPinnedAt, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { disabled: !hasVideo, onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { disabled: !hasScreenShare, onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { disabled: !hasAudio, onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { disabled: !hasScreenShareAudio, onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] })] }), participantViewElement && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
+                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+                }) })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
+                    direction: pictureInPictureElement === videoElement
+                        ? t('Leave')
+                        : t('Enter'),
+                }) })), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+};
+
+const 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" }))] }));
+};
+
+const 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, searchFn, searchQuery = '', }) => {
+    const [searchResults, setSearchResults] = react.useState([]);
+    const [searchQueryInProgress, setSearchQueryInProgress] = react.useState(false);
+    react.useEffect(() => {
+        if (!searchQuery.length)
+            return setSearchResults([]);
+        setSearchQueryInProgress(true);
+        const timeout = setTimeout(async () => {
+            try {
+                const results = await searchFn(searchQuery);
+                setSearchResults(results);
+            }
+            catch (error) {
+                console.error(error);
+            }
+            finally {
+                setSearchQueryInProgress(false);
+            }
+        }, debounceInterval);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [debounceInterval, searchFn, searchQuery]);
+    return {
+        searchQueryInProgress,
+        searchResults,
+    };
+};
+
+const UserListTypes = {
+    active: 'Active users',
+    blocked: 'Blocked users',
+};
+const DEFAULT_DEBOUNCE_SEARCH_INTERVAL = 200;
+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 }))] }), jsxRuntime.jsx("div", { className: "str-video__participant-list__footer", children: jsxRuntime.jsx(CopyToClipboardButtonWithPopup, { Button: InviteLinkButton, copyValue: typeof window !== 'undefined' ? window.location.href : '' }) })] }));
+};
+const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
+    const call = videoReactBindings.useCall();
+    const muteAll = () => {
+        call?.muteAllUsers('audio');
+    };
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header-title", children: [jsxRuntime.jsx("span", { children: UserListTypes[userListType] }), userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(TextButton, { onClick: muteAll, children: "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 = DEFAULT_DEBOUNCE_SEARCH_INTERVAL, }) => {
+    const { useParticipants } = videoReactBindings.useCallStateHooks();
+    const participants = useParticipants({ sortBy: videoClient.name });
+    const activeUsersSearchFn = react.useCallback((queryString) => {
+        const queryRegExp = new RegExp(queryString, 'i');
+        return Promise.resolve(participants.filter((participant) => {
+            return participant.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 = DEFAULT_DEBOUNCE_SEARCH_INTERVAL, searchQuery, }) => {
+    const { useCallBlockedUserIds } = videoReactBindings.useCallStateHooks();
+    const blockedUsers = useCallBlockedUserIds();
+    const blockedUsersSearchFn = react.useCallback((queryString) => {
+        const queryRegExp = new RegExp(queryString, 'i');
+        return Promise.resolve(blockedUsers.filter((blockedUser) => {
+            return blockedUser.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((props, ref) => {
+    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
+});
+const InviteLinkButton = react.forwardRef(({ className, ...props }, ref) => (jsxRuntime.jsxs("button", { ...props, className: clsx.clsx('str-video__invite-link-button', className), ref: ref, children: [jsxRuntime.jsx("div", { className: "str-video__invite-participant-icon" }), jsxRuntime.jsx("div", { className: "str-video__invite-link-button__text", children: "Invite Link" })] })));
+
+const CallPreview = (props) => {
+    const { className, style } = props;
+    const call = videoReactBindings.useCall();
+    const { useCallThumbnail } = videoReactBindings.useCallStateHooks();
+    const thumbnail = useCallThumbnail();
+    const [imageRef, setImageRef] = react.useState(null);
+    react.useEffect(() => {
+        if (!imageRef || !call)
+            return;
+        const cleanup = call.bindCallThumbnailElement(imageRef);
+        return () => cleanup();
+    }, [imageRef, call]);
+    if (!thumbnail)
+        return null;
+    return (jsxRuntime.jsx("img", { className: clsx('str-video__call-preview', className), style: style, alt: "Call Preview Thumbnail", ref: setImageRef }));
+};
+
+const CallRecordingListHeader = ({ callRecordings, onRefresh, }) => {
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxRuntime.jsxs("div", { className: "str-video__call-recording-list__title", children: [jsxRuntime.jsx("span", { children: "Call Recordings" }), callRecordings.length ? jsxRuntime.jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), jsxRuntime.jsx(IconButton, { icon: "refresh", title: "Refresh", onClick: onRefresh })] }));
+};
+
+const CallRecordingListItem = ({ recording, }) => {
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-recording-list-item", children: [jsxRuntime.jsx("div", { className: "str-video__call-recording-list-item__info", children: jsxRuntime.jsx("div", { className: "str-video__call-recording-list-item__created", children: new Date(recording.end_time).toLocaleString() }) }), jsxRuntime.jsxs("div", { className: "str-video__call-recording-list-item__actions", children: [jsxRuntime.jsx("a", { className: clsx('str-video__call-recording-list-item__action-button', 'str-video__call-recording-list-item__action-button--download'), role: "button", href: recording.url, download: recording.filename, title: "Download the recording", children: jsxRuntime.jsx("span", { className: clsx('str-video__call-recording-list-item__action-button-icon', 'str-video__download-button--icon') }) }), jsxRuntime.jsx(CopyToClipboardButtonWithPopup, { Button: CopyUrlButton, copyValue: recording.url })] })] }));
+};
+const CopyUrlButton = react.forwardRef((props, ref) => {
+    return (jsxRuntime.jsx("button", { ...props, className: clsx('str-video__call-recording-list-item__action-button', 'str-video__call-recording-list-item__action-button--copy-link'), ref: ref, title: "Copy the recording link", children: jsxRuntime.jsx("span", { className: clsx('str-video__call-recording-list-item__action-button-icon', 'str-video__copy-button--icon') }) }));
+});
+
+const EmptyCallRecordingListing = () => {
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-recording-list__listing str-video__call-recording-list__listing--empty", children: [jsxRuntime.jsx("div", { className: "str-video__call-recording-list__listing--icon-empty" }), jsxRuntime.jsx("p", { className: "str-video__call-recording-list__listing--text-empty", children: "No recordings available" })] }));
+};
+
+const LoadingCallRecordingListing = ({ callRecordings, }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [callRecordings.map((recording) => (jsxRuntime.jsx(CallRecordingListItem, { recording: recording }, recording.filename))), jsxRuntime.jsx(LoadingIndicator, { text: "Recording getting ready" })] }));
+};
+
+const CallRecordingList = ({ callRecordings, CallRecordingListHeader: CallRecordingListHeader$1 = CallRecordingListHeader, CallRecordingListItem: CallRecordingListItem$1 = CallRecordingListItem, EmptyCallRecordingList = EmptyCallRecordingListing, loading, LoadingCallRecordingList = LoadingCallRecordingListing, onRefresh, }) => {
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-recording-list", children: [jsxRuntime.jsx(CallRecordingListHeader$1, { callRecordings: callRecordings, onRefresh: onRefresh }), jsxRuntime.jsx("div", { className: "str-video__call-recording-list__listing", children: loading ? (jsxRuntime.jsx(LoadingCallRecordingList, { callRecordings: callRecordings })) : callRecordings.length ? (callRecordings.map((recording) => (jsxRuntime.jsx(CallRecordingListItem$1, { recording: recording }, recording.filename)))) : (jsxRuntime.jsx(EmptyCallRecordingList, {})) })] }));
+};
+
+const RingingCallControls = () => {
+    const call = videoReactBindings.useCall();
+    const { useCallCallingState } = videoReactBindings.useCallStateHooks();
+    const callCallingState = useCallCallingState();
+    if (!call)
+        return null;
+    const buttonsDisabled = callCallingState !== videoClient.CallingState.RINGING;
+    return (jsxRuntime.jsx("div", { className: "str-video__pending-call-controls", children: call.isCreatedByMe ? (jsxRuntime.jsx(CancelCallButton, { disabled: buttonsDisabled })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AcceptCallButton, { disabled: buttonsDisabled }), jsxRuntime.jsx(CancelCallButton, { onClick: () => call.leave({ reject: true }), disabled: buttonsDisabled })] })) }));
+};
+
+const CALLING_STATE_TO_LABEL = {
+    [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 RingingCall = (props) => {
+    const { includeSelf = false, totalMembersToShow = 3 } = props;
+    const call = videoReactBindings.useCall();
+    const { t } = videoReactBindings.useI18n();
+    const { useCallCallingState, useCallMembers } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const members = useCallMembers();
+    const connectedUser = videoReactBindings.useConnectedUser();
+    if (!call)
+        return null;
+    // take the first N members to show their avatars
+    const membersToShow = (members || [])
+        .slice(0, totalMembersToShow)
+        .map(({ user }) => user)
+        .filter((user) => user.id !== connectedUser?.id || includeSelf);
+    if (includeSelf &&
+        !membersToShow.find((user) => user.id === connectedUser?.id)) {
+        // if the current user is not in the initial batch of members,
+        // replace the first item in membersToShow array with the current user
+        const self = members.find(({ user }) => user.id === connectedUser?.id);
+        if (self) {
+            membersToShow.splice(0, 1, self.user);
+        }
+    }
+    const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];
+    return (jsxRuntime.jsxs("div", { className: "str-video__call-panel str-video__call-panel--ringing", children: [jsxRuntime.jsx("div", { className: "str-video__call-panel__members-list", children: membersToShow.map((user) => (jsxRuntime.jsxs("div", { className: "str-video__call-panel__member-box", children: [jsxRuntime.jsx(Avatar, { name: user.name, imageSrc: user.image }), user.name && (jsxRuntime.jsx("div", { className: "str-video__member_details", children: jsxRuntime.jsx("span", { className: "str-video__member_name", children: user.name }) }))] }, user.id))) }), callingStateLabel && (jsxRuntime.jsx("div", { className: "str-video__call-panel__calling-state-label", children: t(callingStateLabel) })), [videoClient.CallingState.RINGING, videoClient.CallingState.JOINING].includes(callingState) && (jsxRuntime.jsx(RingingCallControls, {}))] }));
+};
+
+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 } = videoReactBindings.useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const [expanded, setExpanded] = react.useState(false);
+    const [permissionRequests, setPermissionRequests] = react.useState([]);
+    const canUpdateCallPermissions = videoReactBindings.useHasPermissions(videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS);
+    react.useEffect(() => {
+        if (!call || !canUpdateCallPermissions)
+            return;
+        const unsubscribe = call.on('call.permission_request', (event) => {
+            if (event.type !== 'call.permission_request')
+                return;
+            if (event.user.id !== localParticipant?.userId) {
+                setPermissionRequests((requests) => [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)));
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [call, canUpdateCallPermissions, localParticipant]);
+    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((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 = () => {
+    return jsxRuntime.jsx("div", { children: "Video is disabled" });
+};
+const DefaultNoCameraPreview = () => {
+    return jsxRuntime.jsx("div", { children: "No camera found" });
+};
+const DefaultVideoErrorPreview = ({ message }) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { children: "Error:" }), jsxRuntime.jsx("p", { children: message || 'Unexpected error happened' })] }));
+};
+const VideoPreview = ({ mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, VideoErrorPreview = DefaultVideoErrorPreview, }) => {
+    const [stream, setStream] = react.useState();
+    const { selectedVideoDeviceId, getVideoStream, initialVideoState, setInitialVideoState, } = useMediaDevices();
+    // When there are 0 video devices (e.g. when laptop lid closed),
+    // we do not restart the video automatically when the device is again available,
+    // but rather leave turning the video on manually to the user.
+    useOnUnavailableVideoDevices(() => setInitialVideoState(DEVICE_STATE.stopped));
+    const videoDevices = useVideoDevices();
+    react.useEffect(() => {
+        if (!initialVideoState.enabled)
+            return;
+        getVideoStream({ deviceId: selectedVideoDeviceId })
+            .then((s) => {
+            setStream((previousStream) => {
+                if (previousStream) {
+                    videoClient.disposeOfMediaStream(previousStream);
+                }
+                return s;
+            });
+        })
+            .catch((e) => setInitialVideoState({
+            ...DEVICE_STATE.error,
+            message: e.message,
+        }));
+        return () => {
+            setStream(undefined);
+        };
+    }, [
+        initialVideoState,
+        getVideoStream,
+        selectedVideoDeviceId,
+        setInitialVideoState,
+        videoDevices.length,
+    ]);
+    react.useEffect(() => {
+        if (initialVideoState.type === 'stopped') {
+            setStream(undefined);
+        }
+    }, [initialVideoState]);
+    const handleOnPlay = react.useCallback(() => {
+        setInitialVideoState(DEVICE_STATE.playing);
+    }, [setInitialVideoState]);
+    let contents;
+    if (initialVideoState.type === 'error') {
+        contents = jsxRuntime.jsx(VideoErrorPreview, {});
+    }
+    else if (initialVideoState.type === 'stopped' && !videoDevices.length) {
+        contents = jsxRuntime.jsx(NoCameraPreview, {});
+    }
+    else if (initialVideoState.enabled) {
+        const loading = initialVideoState.type === 'starting';
+        contents = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stream && (jsxRuntime.jsx(BaseVideo, { stream: stream, className: clsx('str-video__video-preview', {
+                        'str-video__video-preview--mirror': mirror,
+                        'str-video__video-preview--loading': loading,
+                    }), onPlay: handleOnPlay })), loading && jsxRuntime.jsx(StartingCameraPreview, {})] }));
+    }
+    else {
+        contents = jsxRuntime.jsx(DisabledVideoPreview, {});
+    }
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container'), children: contents }));
+};
+
+const DebugParticipantPublishQuality = (props) => {
+    const { call, participant } = props;
+    const [quality, setQuality] = react.useState();
+    const [publishStats, setPublishStats] = react.useState(() => ({
+        f: true,
+        h: true,
+        q: true,
+    }));
+    react.useEffect(() => {
+        return call.on('changePublishQuality', (event) => {
+            if (event.eventPayload.oneofKind !== 'changePublishQuality')
+                return;
+            const { videoSenders } = event.eventPayload.changePublishQuality;
+            // FIXME OL: support additional layers (like screenshare)
+            const [videoLayer] = videoSenders.map(({ layers }) => {
+                return layers.map((l) => ({ [l.name]: l.active }));
+            });
+            setPublishStats((s) => ({
+                ...s,
+                ...videoLayer,
+            }));
+        });
+    }, [call]);
+    return (jsxRuntime.jsxs("select", { title: `Published tracks: ${JSON.stringify(publishStats)}`, value: quality, onChange: (e) => {
+            const value = e.target.value;
+            setQuality(value);
+            let w = 960;
+            let h = 540;
+            if (value === 'h') {
+                w = w / 2; // 480
+                h = h / 2; // 270
+            }
+            else if (value === 'q') {
+                w = w / 4; // 240
+                h = h / 4; // 135
+            }
+            call.updateSubscriptionsPartial('video', {
+                [participant.sessionId]: {
+                    dimension: {
+                        width: w,
+                        height: h,
+                    },
+                },
+            });
+        }, children: [jsxRuntime.jsx("option", { value: "f", children: "High (f)" }), jsxRuntime.jsx("option", { value: "h", children: "Medium (h)" }), jsxRuntime.jsx("option", { value: "q", children: "Low (q)" })] }));
+};
+
+const DebugStatsView = (props) => {
+    const { call, mediaStream, sessionId, userId } = props;
+    const { useCallStatsReport } = videoReactBindings.useCallStateHooks();
+    const callStatsReport = useCallStatsReport();
+    react.useEffect(() => {
+        call.startReportingStatsFor(sessionId);
+        return () => {
+            call.stopReportingStatsFor(sessionId);
+        };
+    }, [call, sessionId]);
+    const reportForTracks = callStatsReport?.participants[sessionId];
+    const trackStats = reportForTracks?.flatMap((report) => report.streams);
+    const previousWidth = react.useRef({ f: 0, h: 0, q: 0 });
+    const previousHeight = react.useRef({ f: 0, h: 0, q: 0 });
+    trackStats?.forEach((track) => {
+        if (track.kind !== 'video')
+            return;
+        const { frameWidth = 0, frameHeight = 0, rid = '' } = track;
+        if (frameWidth !== previousWidth.current[rid] ||
+            frameHeight !== previousHeight.current[rid]) {
+            const trackSize = `${frameWidth}x${frameHeight}`;
+            console.log(`Track stats (${userId}/${sessionId}): ${rid}(${trackSize})`);
+            previousWidth.current[rid] = frameWidth;
+            previousHeight.current[rid] = frameHeight;
+        }
+    });
+    const { refs, strategy, y, x } = useFloatingUIPreset({
+        placement: 'top',
+        strategy: 'absolute',
+    });
+    const [isPopperOpen, setIsPopperOpen] = react.useState(false);
+    const [videoTrack] = mediaStream?.getVideoTracks() ?? [];
+    const settings = videoTrack?.getSettings();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "str-video__debug__track-stats-icon", tabIndex: 0, ref: refs.setReference, title: settings &&
+                    `${settings.width}x${settings.height}@${Math.round(settings.frameRate || 0)}`, onClick: () => {
+                    setIsPopperOpen((v) => !v);
+                } }), isPopperOpen && (jsxRuntime.jsxs("div", { className: "str-video__debug__track-stats str-video__call-stats", ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y ?? 0,
+                    left: x ?? 0,
+                    overflowY: 'auto',
+                }, children: [jsxRuntime.jsx("h3", { children: "Participant stats" }), jsxRuntime.jsx("div", { className: "str-video__call-stats__card-container", children: trackStats
+                            ?.map((track) => {
+                            if (track.kind === 'video') {
+                                return (jsxRuntime.jsx(StatCard, { label: `${track.kind}: ${track.codec} ` +
+                                        (track.rid ? ` (${track.rid})` : ''), value: `${track.frameWidth || 0}x${track.frameHeight || 0}@${track.framesPerSecond || 0}fps` }, `${track.rid}/${track.ssrc}/${track.codec}/${track.kind}`));
+                            }
+                            else if (track.kind === 'audio') {
+                                return (jsxRuntime.jsx(StatCard, { label: track.codec || 'N/A', value: `Jitter: ${track.jitter || 0}ms` }, `${track.ssrc}/${track.codec}/${track.kind}`));
+                            }
+                            return null;
+                        })
+                            .filter(Boolean) }), reportForTracks?.map((report, index) => (jsxRuntime.jsx("pre", { children: JSON.stringify(unwrapStats(report.rawStats), null, 2) }, index)))] }))] }));
+};
+const unwrapStats = (rawStats) => {
+    const decodedStats = {};
+    rawStats?.forEach((s) => {
+        decodedStats[s.id] = s;
+    });
+    return decodedStats;
+};
+
+const ToggleButton = react.forwardRef((props, ref) => {
+    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+const DefaultScreenShareOverlay = () => {
+    const call = videoReactBindings.useCall();
+    const stopScreenShare = () => {
+        call?.stopPublish(videoClient.SfuModels.TrackType.SCREEN_SHARE).catch(console.error);
+    };
+    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: "You are presenting your screen" }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " Stop Screen Sharing"] })] }));
+};
+const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
+    const { participant, participantViewElement, trackType, videoElement } = useParticipantViewContext();
+    const { publishedTracks } = participant;
+    const hasScreenShare = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
+    if (participant.isLocalParticipant &&
+        hasScreenShare &&
+        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, { participantViewElement: participantViewElement, participant: participant, videoElement: videoElement }) })), jsxRuntime.jsx(Reaction, { participant: participant }), jsxRuntime.jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+};
+const ParticipantDetails = ({ indicatorsVisible = true, }) => {
+    const { participant } = useParticipantViewContext();
+    const { isDominantSpeaker, isLocalParticipant, connectionQuality, publishedTracks, pin, sessionId, name, userId, videoStream, } = participant;
+    const call = videoReactBindings.useCall();
+    const connectionQualityAsString = !!connectionQuality &&
+        videoClient.SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
+    const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const canUnpin = !!pin && pin.isLocalPin;
+    const isDebugMode = useIsDebugMode();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-details", children: [jsxRuntime.jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isDominantSpeaker && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--dominant_speaker", title: "Dominant speaker" })), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
+                            connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: "Poor connection quality. Please check your internet connection.", children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx.clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) })), indicatorsVisible && !hasAudio && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
+                    // TODO: remove this monstrosity once we have a proper design
+                    jsxRuntime.jsx("span", { title: "Unpin", onClick: () => call?.unpin(sessionId), style: { cursor: 'pointer' }, className: "str-video__participant-details__name--pinned" }))] }), isDebugMode && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DebugParticipantPublishQuality, { participant: participant, call: call }), jsxRuntime.jsx(DebugStatsView, { call: call, sessionId: sessionId, userId: userId, mediaStream: videoStream })] }))] }));
+};
+
+const ParticipantViewContext = react.createContext(undefined);
+const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
+const ParticipantView = react.forwardRef(({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
+    const { isLocalParticipant, isSpeaking, isDominantSpeaker, publishedTracks, sessionId, } = participant;
+    const hasAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(videoClient.SfuModels.TrackType.VIDEO);
+    const hasScreenShareAudio = publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE_AUDIO);
+    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 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', !hasVideo && 'str-video__participant-view--no-video', !hasAudio && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudio && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudio && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, participant: participant, trackType: trackType, refs: videoRefs, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
+});
+
+const DEVICE_STATE_TOGGLE = {
+    starting: 'stopped',
+    playing: 'stopped',
+    stopped: 'starting',
+    uninitialized: 'starting',
+    error: 'starting',
+};
+/**
+ * Exclude types from documentation site, but we should still add doc comments
+ * @internal
+ */
+const DEVICE_STATE = {
+    starting: { type: 'starting', enabled: true },
+    playing: { type: 'playing', enabled: true },
+    stopped: { type: 'stopped', enabled: false },
+    uninitialized: { type: 'uninitialized', enabled: false },
+    error: { type: 'error', message: '', enabled: false },
+};
+const DEFAULT_DEVICE_ID = 'default';
+const MediaDevicesContext = react.createContext(null);
+/**
+ * Context provider that internally puts in place mechanisms that:
+ * 1. fall back to selecting a default device when trying to switch to a non-existent device
+ * 2. fall back to a default device when an active device is disconnected
+ * 3. stop publishing a media stream when a non-default device is disconnected
+ * 4. republish a media stream from the newly connected default device
+ * 5. republish a media stream when a new device is selected
+ *
+ * Provides `MediaDevicesContextAPI` that allow the integrators to handle:
+ * 1. the initial device state enablement (for example apt for lobby scenario)
+ * 2. media stream retrieval and disposal
+ * 3. media stream publishing
+ * 4. specific device selection
+ * @param params
+ * @returns
+ *
+ * @category Device Management
+ */
+const MediaDevicesProvider = ({ children, initialAudioEnabled, initialVideoEnabled, initialVideoInputDeviceId = DEFAULT_DEVICE_ID, initialAudioOutputDeviceId = DEFAULT_DEVICE_ID, initialAudioInputDeviceId = DEFAULT_DEVICE_ID, }) => {
+    const call = videoReactBindings.useCall();
+    const { useCallCallingState, useCallState, useCallSettings } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const callState = useCallState();
+    const { localParticipant$ } = callState;
+    const hasBrowserPermissionVideoInput = useHasBrowserPermissions('camera');
+    const hasBrowserPermissionAudioInput = useHasBrowserPermissions('microphone');
+    const [selectedAudioInputDeviceId, selectAudioInputDeviceId] = react.useState(initialAudioInputDeviceId);
+    const [selectedAudioOutputDeviceId, selectAudioOutputDeviceId] = react.useState(initialAudioOutputDeviceId);
+    const [selectedVideoDeviceId, selectVideoDeviceId] = react.useState(initialVideoInputDeviceId);
+    const [isAudioOutputChangeSupported] = react.useState(() => videoClient.checkIfAudioOutputChangeSupported());
+    const [initAudioEnabled, setInitialAudioEnabled] = react.useState(!!initialAudioEnabled);
+    const [initialVideoState, setInitialVideoState] = react.useState(() => initialVideoEnabled ? DEVICE_STATE.starting : DEVICE_STATE.uninitialized);
+    const settings = useCallSettings();
+    react.useEffect(() => {
+        if (!settings)
+            return;
+        const { audio, video } = settings;
+        if (typeof initialAudioEnabled === 'undefined' && audio.mic_default_on) {
+            setInitialAudioEnabled(audio.mic_default_on);
+        }
+        if (typeof initialVideoEnabled === 'undefined' && video.camera_default_on) {
+            setInitialVideoState(DEVICE_STATE.starting);
+        }
+    }, [initialAudioEnabled, initialVideoEnabled, settings]);
+    const publishVideoStream = useVideoPublisher({
+        initialVideoMuted: !initialVideoState.enabled,
+        videoDeviceId: selectedVideoDeviceId,
+    });
+    const publishAudioStream = useAudioPublisher({
+        initialAudioMuted: !initAudioEnabled,
+        audioDeviceId: selectedAudioInputDeviceId,
+    });
+    const stopPublishingAudio = react.useCallback(async () => {
+        if (callingState === videoClient.CallingState.IDLE ||
+            callingState === videoClient.CallingState.RINGING) {
+            setInitialAudioEnabled(false);
+        }
+        else {
+            call?.stopPublish(videoClient.SfuModels.TrackType.AUDIO);
+        }
+    }, [call, callingState]);
+    const stopPublishingVideo = react.useCallback(async () => {
+        if (callingState === videoClient.CallingState.IDLE ||
+            callingState === videoClient.CallingState.RINGING) {
+            setInitialVideoState(DEVICE_STATE.stopped);
+        }
+        else {
+            call?.stopPublish(videoClient.SfuModels.TrackType.VIDEO);
+        }
+    }, [call, callingState]);
+    const toggleInitialAudioMuteState = react.useCallback(() => setInitialAudioEnabled((prev) => !prev), []);
+    const toggleInitialVideoMuteState = react.useCallback(() => setInitialVideoState((prev) => {
+        const newType = DEVICE_STATE_TOGGLE[prev.type];
+        return DEVICE_STATE[newType];
+    }), []);
+    const switchDevice = react.useCallback((kind, deviceId) => {
+        if (kind === 'videoinput') {
+            selectVideoDeviceId(deviceId);
+        }
+        if (kind === 'audioinput') {
+            selectAudioInputDeviceId(deviceId);
+        }
+        if (kind === 'audiooutput') {
+            selectAudioOutputDeviceId(deviceId);
+        }
+    }, []);
+    useAudioInputDeviceFallback(() => switchDevice('audioinput', DEFAULT_DEVICE_ID), hasBrowserPermissionAudioInput, selectedAudioInputDeviceId);
+    useAudioOutputDeviceFallback(() => switchDevice('audiooutput', DEFAULT_DEVICE_ID), 
+    // audiooutput devices can be enumerated only with microphone permissions
+    hasBrowserPermissionAudioInput, selectedAudioOutputDeviceId);
+    useVideoDeviceFallback(() => switchDevice('videoinput', DEFAULT_DEVICE_ID), hasBrowserPermissionVideoInput, selectedVideoDeviceId);
+    react.useEffect(() => {
+        if (!call || callingState !== videoClient.CallingState.JOINED)
+            return;
+        call.setAudioOutputDevice(selectedAudioOutputDeviceId);
+    }, [call, callingState, selectedAudioOutputDeviceId]);
+    react.useEffect(() => {
+        // audiooutput devices can be enumerated only with microphone permissions
+        if (!localParticipant$ || !hasBrowserPermissionAudioInput)
+            return;
+        const subscription = videoClient.watchForDisconnectedAudioOutputDevice(localParticipant$.pipe(rxjs.map((p) => p?.audioOutputDeviceId))).subscribe(async () => {
+            selectAudioOutputDeviceId(DEFAULT_DEVICE_ID);
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [hasBrowserPermissionAudioInput, localParticipant$]);
+    const contextValue = {
+        disposeOfMediaStream: videoClient.disposeOfMediaStream,
+        getAudioStream: videoClient.getAudioStream,
+        getVideoStream: videoClient.getVideoStream,
+        isAudioOutputChangeSupported,
+        selectedAudioInputDeviceId,
+        selectedAudioOutputDeviceId,
+        selectedVideoDeviceId,
+        switchDevice,
+        initialAudioEnabled: initAudioEnabled,
+        initialVideoState,
+        setInitialAudioEnabled,
+        setInitialVideoState,
+        toggleInitialAudioMuteState,
+        toggleInitialVideoMuteState,
+        publishAudioStream,
+        publishVideoStream,
+        stopPublishingAudio,
+        stopPublishingVideo,
+    };
+    return (jsxRuntime.jsx(MediaDevicesContext.Provider, { value: contextValue, children: children }));
+};
+/**
+ * Context consumer retrieving MediaDevicesContextAPI.
+ * @returns
+ *
+ * @category Device Management
+ */
+const useMediaDevices = () => {
+    const value = react.useContext(MediaDevicesContext);
+    if (!value) {
+        console.warn(`Null MediaDevicesContext`);
+    }
+    return value;
+};
+
+const StreamCall = ({ children, call, mediaDevicesProviderProps, }) => {
+    return (jsxRuntime.jsx(videoReactBindings.StreamCallProvider, { call: call, children: jsxRuntime.jsx(MediaDevicesProvider, { ...mediaDevicesProviderProps, children: children }) }));
+};
+
+var Joining = "Joining";
+var Mic = "Mic";
+var Ringing = "Ringing";
+var Speakers = "Speakers";
+var Video = "Video";
+var Live = "Live";
+var Reactions = "Reactions";
+var Invite = "Invite";
+var Join = "Join";
+var You = "You";
+var Me = "Me";
+var Unknown = "Unknown";
+var Allow = "Allow";
+var Revoke = "Revoke";
+var Dismiss = "Dismiss";
+var Pinned = "Pinned";
+var Unpin = "Unpin";
+var Pin = "Pin";
+var Block = "Block";
+var Enter = "Enter";
+var Leave = "Leave";
+var Participants = "Participants";
+var Anonymous = ", and ({{ count }}) anonymous";
+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.",
+	Live: Live,
+	"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,
+	"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,
+	Allow: Allow,
+	Revoke: Revoke,
+	Dismiss: Dismiss,
+	"Microphone on": "Microphone on",
+	"Microphone off": "Microphone off",
+	"Camera on": "Camera on",
+	"Camera off": "Camera off",
+	Pinned: Pinned,
+	Unpin: Unpin,
+	Pin: Pin,
+	"Pin for everyone": "Pin for everyone",
+	"Unpin for everyone": "Unpin for everyone",
+	Block: Block,
+	"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,
+	"{{ direction }} fullscreen": "{{ direction }} fullscreen",
+	"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
+	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 }}"
+};
+
+const translations = { en };
+
+const StreamVideo = (props) => {
+    return (jsxRuntime.jsx(videoReactBindings.StreamVideoProvider, { translationsOverrides: translations, ...props }));
+};
+
+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 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, useRemoteParticipants, useHasOngoingScreenShare } = videoReactBindings.useCallStateHooks();
+    const call = videoReactBindings.useCall();
+    const [currentSpeaker, ...otherParticipants] = useParticipants();
+    const remoteParticipants = useRemoteParticipants();
+    const hasOngoingScreenShare = useHasOngoingScreenShare();
+    const presenter = hasOngoingScreenShare
+        ? hasScreenShare$1(currentSpeaker) && currentSpeaker
+        : otherParticipants.find(hasScreenShare$1);
+    usePaginatedLayoutSortPreset(call);
+    const Overlay = (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName }));
+    const { floatingParticipantProps } = props;
+    const FloatingParticipantOverlay = hasOngoingScreenShare && (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 }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsxRuntime.jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: Overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
+                : true })), currentSpeaker && (jsxRuntime.jsx(ParticipantView, { className: clsx(hasOngoingScreenShare &&
+                    clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: FloatingParticipantOverlay || Overlay, muteAudio // audio is rendered by ParticipantsAudio
+                : true }))] }));
+};
+const hasScreenShare$1 = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
+const ParticipantOverlay = (props) => {
+    const { enableFullScreen = true, showParticipantCount = true, showDuration = true, showLiveBadge = true, showSpeakerName = false, } = props;
+    const { participant } = useParticipantViewContext();
+    const { useParticipantCount } = videoReactBindings.useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const duration = useUpdateCallDuration();
+    const toggleFullScreen = useToggleFullScreen();
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", 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: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (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(false);
+    return react.useCallback(() => {
+        if (isFullscreen) {
+            document.exitFullscreen().then(() => {
+                setIsFullscreen(false);
+            });
+        }
+        else {
+            participantViewElement?.requestFullscreen().then(() => {
+                setIsFullscreen(true);
+            });
+        }
+    }, [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, VideoPlaceholder, ParticipantViewUI, }) => {
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__paginated-grid-layout__group', {
+            'str-video__paginated-grid-layout--one': group.length === 1,
+            'str-video__paginated-grid-layout--two-four': group.length >= 2 && group.length <= 4,
+            'str-video__paginated-grid-layout--five-nine': group.length >= 5 && group.length <= 9,
+        }), children: group.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
+};
+const PaginatedGridLayout = ({ groupSize = GROUP_SIZE, excludeLocalParticipant = false, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }) => {
+    const [page, setPage] = react.useState(0);
+    const [paginatedGridLayoutWrapperElement, setPaginatedGridLayoutWrapperElement,] = react.useState(null);
+    const call = videoReactBindings.useCall();
+    const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
+    const participants = useParticipants();
+    // used to render audio elements
+    const remoteParticipants = useRemoteParticipants();
+    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(excludeLocalParticipant ? remoteParticipants : participants, groupSize), [excludeLocalParticipant, remoteParticipants, 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];
+    if (!call)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: participantGroups[page], VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+};
+
+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 DefaultParticipantViewUISpotlight = () => jsxRuntime.jsx(DefaultParticipantViewUI, {});
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, }) => {
+    const call = videoReactBindings.useCall();
+    const { useParticipants, useRemoteParticipants } = videoReactBindings.useCallStateHooks();
+    const [participantInSpotlight, ...otherParticipants] = useParticipants();
+    const remoteParticipants = useRemoteParticipants();
+    const [participantsBarWrapperElement, setParticipantsBarWrapperElement] = react.useState(null);
+    const [participantsBarElement, setParticipantsBarElement] = react.useState(null);
+    const [buttonsWrapperElement, setButtonsWrapperElement] = react.useState(null);
+    const isSpeakerScreenSharing = 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 = otherParticipants.length === 1;
+    useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+    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));
+    }
+    if (!call)
+        return null;
+    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-layout__wrapper", children: [jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: clsx('str-video__speaker-layout', participantsBarPosition &&
+                    `str-video__speaker-layout--variant-${participantsBarPosition}`), children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__spotlight", children: participantInSpotlight && (jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, muteAudio: true, trackType: isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack', ParticipantViewUI: ParticipantViewUISpotlight, VideoPlaceholder: VideoPlaceholder })) }), participantsWithAppliedLimit.length > 0 && participantsBarPosition && (jsxRuntime.jsxs("div", { ref: setButtonsWrapperElement, className: "str-video__speaker-layout__participants-bar-buttons-wrapper", children: [jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participants-bar-wrapper", ref: setParticipantsBarWrapperElement, children: jsxRuntime.jsxs("div", { ref: setParticipantsBarElement, className: "str-video__speaker-layout__participants-bar", children: [isSpeakerScreenSharing && (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participantInSpotlight, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }, participantInSpotlight.sessionId)), participantsWithAppliedLimit.map((participant) => (jsxRuntime.jsx("div", { className: "str-video__speaker-layout__participant-tile", children: jsxRuntime.jsx(ParticipantView, { participant: participant, ParticipantViewUI: ParticipantViewUIBar, VideoPlaceholder: VideoPlaceholder, muteAudio: true }) }, participant.sessionId)))] }) }), isVertical && (jsxRuntime.jsx(VerticalScrollButtons, { scrollWrapper: participantsBarWrapperElement })), isHorizontal && (jsxRuntime.jsx(HorizontalScrollButtons, { scrollWrapper: participantsBarWrapperElement }))] }))] })] }));
+};
+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 hasScreenShare = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
+
+const [major, minor, patch] = ("0.3.42" ).split('.');
+videoClient.setSdkInfo({
+    type: videoClient.SfuModels.SdkType.REACT,
+    major,
+    minor,
+    patch,
+});
+
+exports.AcceptCallButton = AcceptCallButton;
+exports.Audio = Audio;
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.BaseVideo = BaseVideo;
+exports.CallControls = CallControls;
+exports.CallParticipantListing = CallParticipantListing;
+exports.CallParticipantListingItem = CallParticipantListingItem;
+exports.CallParticipantsList = CallParticipantsList;
+exports.CallPreview = CallPreview;
+exports.CallRecordingList = CallRecordingList;
+exports.CallRecordingListHeader = CallRecordingListHeader;
+exports.CallRecordingListItem = CallRecordingListItem;
+exports.CallStatsButton = CallStatsButton;
+exports.CancelCallButton = CancelCallButton;
+exports.CompositeButton = CompositeButton;
+exports.CopyToClipboardButton = CopyToClipboardButton;
+exports.CopyToClipboardButtonWithPopup = CopyToClipboardButtonWithPopup;
+exports.DEVICE_STATE = DEVICE_STATE;
+exports.DefaultParticipantViewUI = DefaultParticipantViewUI;
+exports.DefaultReactionsMenu = DefaultReactionsMenu;
+exports.DefaultScreenShareOverlay = DefaultScreenShareOverlay;
+exports.DefaultVideoPlaceholder = DefaultVideoPlaceholder;
+exports.DeviceSelector = DeviceSelector;
+exports.DeviceSelectorAudioInput = DeviceSelectorAudioInput;
+exports.DeviceSelectorAudioOutput = DeviceSelectorAudioOutput;
+exports.DeviceSelectorVideo = DeviceSelectorVideo;
+exports.DeviceSettings = DeviceSettings;
+exports.EmptyCallRecordingListing = EmptyCallRecordingListing;
+exports.GenericMenu = GenericMenu;
+exports.GenericMenuButtonItem = GenericMenuButtonItem;
+exports.Icon = Icon;
+exports.IconButton = IconButton;
+exports.LivestreamLayout = LivestreamLayout;
+exports.LoadingCallRecordingListing = LoadingCallRecordingListing;
+exports.LoadingIndicator = LoadingIndicator;
+exports.MediaDevicesProvider = MediaDevicesProvider;
+exports.MenuToggle = MenuToggle;
+exports.Notification = Notification;
+exports.PaginatedGridLayout = PaginatedGridLayout;
+exports.ParticipantActionsContextMenu = ParticipantActionsContextMenu;
+exports.ParticipantDetails = ParticipantDetails;
+exports.ParticipantView = ParticipantView;
+exports.ParticipantsAudio = ParticipantsAudio;
+exports.PermissionNotification = PermissionNotification;
+exports.PermissionRequestList = PermissionRequestList;
+exports.PermissionRequests = PermissionRequests;
+exports.ReactionsButton = ReactionsButton;
+exports.RecordCallButton = RecordCallButton;
+exports.RingingCall = RingingCall;
+exports.RingingCallControls = RingingCallControls;
+exports.ScreenShareButton = ScreenShareButton;
+exports.SearchInput = SearchInput;
+exports.SearchResults = SearchResults;
+exports.SpeakerLayout = SpeakerLayout;
+exports.SpeakingWhileMutedNotification = SpeakingWhileMutedNotification;
+exports.StreamCall = StreamCall;
+exports.StreamTheme = StreamTheme;
+exports.StreamVideo = StreamVideo;
+exports.TextButton = TextButton;
+exports.ToggleAudioOutputButton = ToggleAudioOutputButton;
+exports.ToggleAudioPreviewButton = ToggleAudioPreviewButton;
+exports.ToggleAudioPublishingButton = ToggleAudioPublishingButton;
+exports.ToggleVideoPreviewButton = ToggleVideoPreviewButton;
+exports.ToggleVideoPublishingButton = ToggleVideoPublishingButton;
+exports.Tooltip = Tooltip;
+exports.Video = Video$1;
+exports.VideoPreview = VideoPreview;
+exports.WithTooltip = WithTooltip;
+exports.defaultReactions = defaultReactions;
+exports.translations = translations;
+exports.useAudioInputDeviceFallback = useAudioInputDeviceFallback;
+exports.useAudioInputDevices = useAudioInputDevices;
+exports.useAudioOutputDeviceFallback = useAudioOutputDeviceFallback;
+exports.useAudioOutputDevices = useAudioOutputDevices;
+exports.useAudioPublisher = useAudioPublisher;
+exports.useDeviceFallback = useDeviceFallback;
+exports.useDevices = useDevices;
+exports.useHasBrowserPermissions = useHasBrowserPermissions;
+exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
+exports.useMediaDevices = useMediaDevices;
+exports.useOnUnavailableAudioInputDevices = useOnUnavailableAudioInputDevices;
+exports.useOnUnavailableAudioOutputDevices = useOnUnavailableAudioOutputDevices;
+exports.useOnUnavailableDevices = useOnUnavailableDevices;
+exports.useOnUnavailableVideoDevices = useOnUnavailableVideoDevices;
+exports.useParticipantViewContext = useParticipantViewContext;
+exports.useToggleAudioMuteState = useToggleAudioMuteState;
+exports.useToggleVideoMuteState = useToggleVideoMuteState;
+exports.useTrackElementVisibility = useTrackElementVisibility;
+exports.useVerticalScrollPosition = useVerticalScrollPosition;
+exports.useVideoDeviceFallback = useVideoDeviceFallback;
+exports.useVideoDevices = useVideoDevices;
+exports.useVideoPublisher = useVideoPublisher;
+Object.keys(videoClient).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return videoClient[k]; }
+    });
+});
+Object.keys(videoReactBindings).forEach(function (k) {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+        enumerable: true,
+        get: function () { return videoReactBindings[k]; }
+    });
+});
+//# sourceMappingURL=index.cjs.js.map