@stream-io/video-react-sdk 0.4.26 → 0.5.0

package/dist/index.es.js

@@ -1,12 +1,13 @@
-import { SfuModels, Browsers, VisibilityState, OwnCapability, name, CallingState, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, setSdkInfo } from '@stream-io/video-client';
+import { SfuModels, OwnCapability, name, CallingState, VisibilityState, Browsers, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, setSdkInfo } from '@stream-io/video-client';
 export * from '@stream-io/video-client';
-import { useCall, useI18n, useCallStateHooks, useHasPermissions, Restricted, useConnectedUser, StreamCallProvider, StreamVideoProvider } from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks, useI18n, Restricted, useConnectedUser, StreamCallProvider, StreamVideoProvider } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1, isValidElement, forwardRef, useLayoutEffect, useCallback, useRef, createContext, useContext, useMemo } from 'react';
+import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, forwardRef, isValidElement, useLayoutEffect } from 'react';
 import clsx from 'clsx';
-import { useFloating, offset, shift, flip, size, autoUpdate } from '@floating-ui/react';
-import { ResponsiveLine } from '@nivo/line';
+import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
+import { Chart, CategoryScale, LinearScale, LineElement, PointElement } from 'chart.js';
+import { Line } from 'react-chartjs-2';
 
 const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     const call = useCall();
@@ -38,146 +39,8 @@ const ParticipantsAudio = (props) => {
         }) }));
 };
 
-const isComponentType = (elementOrComponent) => {
-    return elementOrComponent === null
-        ? false
-        : !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 = forwardRef(({ stream, ...rest }, ref) => {
-    const [videoElement, setVideoElement] = useState(null);
-    useEffect(() => {
-        if (!videoElement || !stream)
-            return;
-        if (stream === videoElement.srcObject)
-            return;
-        videoElement.srcObject = stream;
-        if (Browsers.isSafari() || 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 (jsx("video", { autoPlay: true, playsInline: true, ...rest, ref: (element) => {
-            applyElementToRef(ref, element);
-            setVideoElement(element);
-        } }));
-});
-
-const DefaultVideoPlaceholder = forwardRef(({ participant, style }, ref) => {
-    const { t } = useI18n();
-    const [error, setError] = useState(false);
-    const name = participant.name || participant.userId;
-    return (jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
-                (name ? (jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: jsx("div", { children: name[0] }) })) : (jsx("div", { children: t('Video is disabled') }))), participant.image && !error && (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 = useCall();
-    const [videoElement, setVideoElement] = useState(null);
-    // start with true, will flip once the video starts playing
-    const [isVideoPaused, setIsVideoPaused] = useState(true);
-    const [isWideMode, setIsWideMode] = useState(true);
-    const stream = trackType === 'videoTrack'
-        ? videoStream
-        : trackType === 'screenShareTrack'
-            ? screenShareStream
-            : undefined;
-    useLayoutEffect(() => {
-        if (!call || !videoElement || trackType === 'none')
-            return;
-        const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
-        return () => {
-            cleanup?.();
-        };
-    }, [call, trackType, sessionId, videoElement]);
-    useEffect(() => {
-        if (!stream || !videoElement)
-            return;
-        const [track] = stream.getVideoTracks();
-        if (!track)
-            return;
-        const handlePlayPause = () => {
-            setIsVideoPaused(videoElement.paused);
-            const { width = 0, height = 0 } = track.getSettings();
-            setIsWideMode(width >= height);
-        };
-        // playback may have started before we had a chance to
-        // attach the 'play/pause' event listener, so we set the state
-        // here to make sure it's in sync
-        setIsVideoPaused(videoElement.paused);
-        videoElement.addEventListener('play', handlePlayPause);
-        videoElement.addEventListener('pause', handlePlayPause);
-        track.addEventListener('unmute', handlePlayPause);
-        return () => {
-            videoElement.removeEventListener('play', handlePlayPause);
-            videoElement.removeEventListener('pause', handlePlayPause);
-            track.removeEventListener('unmute', handlePlayPause);
-            // reset the 'pause' state once we unmount the video element
-            setIsVideoPaused(true);
-        };
-    }, [stream, videoElement]);
-    if (!call)
-        return null;
-    const isPublishingTrack = trackType === 'videoTrack'
-        ? publishedTracks.includes(SfuModels.TrackType.VIDEO)
-        : trackType === 'screenShareTrack'
-            ? publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE)
-            : false;
-    const isInvisible = trackType === 'none' ||
-        viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
-    const hasNoVideoOrInvisible = !isPublishingTrack || isInvisible;
-    const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
-    const isScreenShareTrack = trackType === 'screenShareTrack';
-    return (jsxs(Fragment, { children: [!hasNoVideoOrInvisible && (jsx("video", { ...rest, className: clsx('str-video__video', className, {
-                    'str-video__video--not-playing': isVideoPaused,
-                    'str-video__video--tall': !isWideMode,
-                    'str-video__video--mirror': mirrorVideo,
-                    'str-video__video--screen-share': isScreenShareTrack,
-                }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
-                    setVideoElement(element);
-                    refs?.setVideoElement?.(element);
-                } })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
-};
-
-const useTrackElementVisibility = ({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }) => {
-    const call = useCall();
-    const manager = propsDynascaleManager ?? call?.dynascaleManager;
-    useEffect(() => {
-        if (!trackedElement || !manager || !call || trackType === 'none')
-            return;
-        const unobserve = manager.trackElementVisibility(trackedElement, sessionId, trackType);
-        return () => {
-            unobserve();
-        };
-    }, [trackedElement, manager, call, sessionId, trackType]);
-};
+const ParticipantViewContext = createContext(undefined);
+const useParticipantViewContext = () => useContext(ParticipantViewContext);
 
 const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
     const [error, setError] = useState(false);
@@ -187,12 +50,12 @@ const AvatarFallback = ({ className, names, style, }) => {
     return (jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
 };
 
-const useFloatingUIPreset = ({ placement, strategy, }) => {
+const useFloatingUIPreset = ({ placement, strategy, offset: offsetInPx = 10, }) => {
     const { refs, x, y, update, elements: { domReference, floating }, } = useFloating({
         placement,
         strategy,
         middleware: [
-            offset(10),
+            offset(offsetInPx),
             shift(),
             flip(),
             size({
@@ -428,6 +291,7 @@ const useToggleCallRecording = () => {
 
 const useRequestPermission = (permission) => {
     const call = useCall();
+    const { useHasPermissions } = useCallStateHooks();
     const hasPermission = useHasPermissions(permission);
     const [isAwaitingPermission, setIsAwaitingPermission] = useState(false); // TODO: load with possibly pending state
     useEffect(() => {
@@ -461,11 +325,31 @@ const useRequestPermission = (permission) => {
     };
 };
 
-const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', children, }) => {
+var MenuVisualType;
+(function (MenuVisualType) {
+    MenuVisualType["PORTAL"] = "portal";
+    MenuVisualType["MENU"] = "menu";
+})(MenuVisualType || (MenuVisualType = {}));
+/**
+ * Used to provide utility APIs to the components rendered inside the portal.
+ */
+const MenuContext = createContext({});
+/**
+ * Access to the closes MenuContext.
+ */
+const useMenuContext = () => {
+    return useContext(MenuContext);
+};
+const MenuPortal = ({ children, refs, }) => {
+    const portalId = useMemo(() => `str-video-portal-${Math.random().toString(36).substring(2, 9)}`, []);
+    return (jsxs(Fragment, { children: [jsx("div", { id: portalId, className: "str-video__portal" }), jsx(FloatingOverlay, { children: jsx(FloatingPortal, { id: portalId, children: jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
+};
+const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = MenuVisualType.MENU, children, }) => {
     const [menuShown, setMenuShown] = useState(false);
     const { floating, domReference, refs, x, y } = useFloatingUIPreset({
         placement,
         strategy,
+        offset,
     });
     useEffect(() => {
         const handleClick = (event) => {
@@ -490,24 +374,31 @@ const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolut
             document?.removeEventListener('keydown', handleKeyDown);
         };
     }, [floating, domReference]);
-    return (jsxs(Fragment, { children: [menuShown && (jsx("div", { className: "str-video__menu-container", ref: refs.setFloating, style: {
-                    position: strategy,
-                    top: y ?? 0,
-                    left: x ?? 0,
-                    overflowY: 'auto',
-                }, children: children })), jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
-};
-
-const GenericMenu = ({ children }) => {
-    return jsx("ul", { className: "str-video__generic-menu", children: children });
+    return (jsxs(Fragment, { children: [menuShown && (jsx(MenuContext.Provider, { value: { close: () => setMenuShown(false) }, children: visualType === MenuVisualType.PORTAL ? (jsx(MenuPortal, { refs: refs, children: children })) : visualType === MenuVisualType.MENU ? (jsx("div", { className: "str-video__menu-container", ref: refs.setFloating, style: {
+                        position: strategy,
+                        top: y ?? 0,
+                        left: x ?? 0,
+                        overflowY: 'auto',
+                    }, children: children })) : null })), jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
+};
+
+const GenericMenu = ({ children, onItemClick, }) => {
+    const ref = useRef(null);
+    return (jsx("ul", { className: "str-video__generic-menu", ref: ref, onClick: (e) => {
+            if (onItemClick &&
+                e.target !== ref.current &&
+                ref.current?.contains(e.target)) {
+                onItemClick(e);
+            }
+        }, children: children }));
 };
 const GenericMenuButtonItem = ({ children, ...rest }) => {
     return (jsx("li", { className: "str-video__generic-menu--item", children: jsx("button", { ...rest, children: children }) }));
 };
 
-const Icon = ({ icon }) => (jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`) }));
+const Icon = ({ className, icon }) => (jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`, className) }));
 
-const IconButton = forwardRef((props, ref) => {
+const IconButton = forwardRef(function IconButton(props, ref) {
     const { icon, enabled, variant, onClick, className, ...rest } = props;
     return (jsx("button", { className: clsx('str-video__call-controls__button', className, {
             [`str-video__call-controls__button--variant-${variant}`]: variant,
@@ -518,86 +409,43 @@ const IconButton = forwardRef((props, ref) => {
         }, ref: ref, ...rest, children: jsx(Icon, { icon: icon }) }));
 });
 
-const CompositeButton = forwardRef(({ caption, children, active, Menu, menuPlacement }, ref) => {
-    return (jsxs("div", { className: "str-video__composite-button", ref: ref, children: [jsxs("div", { className: clsx('str-video__composite-button__button-group', {
-                    'str-video__composite-button__button-group--active': active,
-                }), children: [children, Menu && (jsx(MenuToggle, { placement: menuPlacement, ToggleButton: ToggleMenuButton$2, children: isComponentType(Menu) ? jsx(Menu, {}) : Menu }))] }), caption && (jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
-});
-const ToggleMenuButton$2 = forwardRef(({ menuShown }, ref) => {
-    const { t } = useI18n();
-    return (jsx(IconButton, { className: 'str-video__menu-toggle-button', icon: menuShown ? 'caret-down' : 'caret-up', title: t('Toggle device menu'), ref: ref }));
-});
-
-const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
-    const { refs, x, y, strategy } = useFloatingUIPreset({
-        placement: tooltipPlacement,
-        strategy: 'absolute',
-    });
-    useEffect(() => {
-        refs.setReference(referenceElement);
-    }, [referenceElement, refs]);
-    if (!visible)
-        return null;
-    return (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 isComponentType = (elementOrComponent) => {
+    return elementOrComponent === null
+        ? false
+        : !isValidElement(elementOrComponent);
 };
 
-const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
-    const [tooltipVisible, setTooltipVisible] = useState(false);
-    const handleMouseEnter = useCallback((e) => {
-        setTooltipVisible(true);
-        onMouseEnter?.(e);
-    }, [onMouseEnter]);
-    const handleMouseLeave = useCallback((e) => {
-        setTooltipVisible(false);
-        onMouseLeave?.(e);
-    }, [onMouseLeave]);
-    return { handleMouseEnter, handleMouseLeave, tooltipVisible };
+const chunk = (array, size) => {
+    const chunkCount = Math.ceil(array.length / size);
+    return Array.from({ length: chunkCount }, (_, index) => array.slice(size * index, size * index + size));
 };
 
-// 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] = useState(null);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
+const applyElementToRef = (ref, element) => {
+    if (!ref)
+        return;
+    if (typeof ref === 'function')
+        return ref(element);
+    ref.current = element;
 };
 
-const CopyToClipboardButton = forwardRef(({ Button, className, copyValue, onClick, onError, onSuccess, ...restProps }, ref) => {
-    const handleClick = 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 ? jsx(Button, { ...props }) : jsx("button", { ...props });
+const CompositeButton = forwardRef(function CompositeButton({ caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, ...restButtonProps }, ref) {
+    return (jsxs("div", { className: clsx('str-video__composite-button', className, {
+            'str-video__composite-button--caption': caption,
+            'str-video__composite-button--menu': Menu,
+        }), title: title, ref: ref, children: [jsxs("div", { className: clsx('str-video__composite-button__button-group', {
+                    'str-video__composite-button__button-group--active': active,
+                    'str-video__composite-button__button-group--active-primary': active && variant === 'primary',
+                    'str-video__composite-button__button-group--active-secondary': active && variant === 'secondary',
+                }), children: [jsx("button", { type: "button", className: "str-video__composite-button__button", onClick: (e) => {
+                            e.preventDefault();
+                            onClick?.(e);
+                        }, ...restButtonProps, children: children }), Menu && (jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, children: isComponentType(Menu) ? jsx(Menu, {}) : Menu }))] }), caption && (jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+});
+const DefaultToggleMenuButton = forwardRef(function DefaultToggleMenuButton({ menuShown }, ref) {
+    return (jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
+            'str-video__menu-toggle-button--active': menuShown,
+        }), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
 });
-const CopyToClipboardButtonWithPopup = ({ dismissAfterMs = 1500, onErrorMessage = 'Failed to copy', onSuccessMessage = 'Copied to clipboard', popupClassName, popupPlacement, ...restProps }) => {
-    const [tooltipText, setTooltipText] = useState('');
-    const [tooltipAnchor, setTooltipAnchor] = useState(null);
-    const setTemporaryPopup = useCallback((popupText) => {
-        setTooltipText(popupText);
-        setTimeout(() => setTooltipText(''), dismissAfterMs);
-    }, [dismissAfterMs]);
-    const onSuccess = useCallback(() => setTemporaryPopup(onSuccessMessage), [onSuccessMessage, setTemporaryPopup]);
-    const onError = useCallback(() => setTemporaryPopup(onErrorMessage), [onErrorMessage, setTemporaryPopup]);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { tooltipClassName: clsx('str-video__copy-to-clipboard-button__popup', popupClassName), tooltipPlacement: popupPlacement, referenceElement: tooltipAnchor, visible: !!tooltipText, children: tooltipText }), jsx(CopyToClipboardButton, { ...restProps, onError: onError, onSuccess: onSuccess, ref: setTooltipAnchor })] }));
-};
 
 const TextButton = ({ children, ...rest }) => {
     return (jsx("button", { ...rest, className: "str-video__text-button", children: children }));
@@ -614,11 +462,11 @@ const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
             onAccept?.();
         }
     }, [onClick, onAccept, call]);
-    return (jsx(IconButton, { disabled: disabled, icon: "call-accept", variant: "success", onClick: handleClick }));
+    return (jsx(IconButton, { disabled: disabled, icon: "call-accept", variant: "success", "data-testid": "accept-call-button", onClick: handleClick }));
 };
 
 const Notification = (props) => {
-    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', iconClassName = 'str-video__notification__icon', } = props;
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', iconClassName = 'str-video__notification__icon', close, } = props;
     const { refs, x, y, strategy } = useFloatingUIPreset({
         placement,
         strategy: 'absolute',
@@ -636,11 +484,12 @@ const Notification = (props) => {
                     top: y ?? 0,
                     left: x ?? 0,
                     overflowY: 'auto',
-                }, children: [iconClassName && jsx("i", { className: iconClassName }), jsx("span", { className: "str-video__notification__message", children: message })] })), children] }));
+                }, children: [iconClassName && jsx("i", { className: iconClassName }), jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
 };
 
 const PermissionNotification = (props) => {
     const { permission, isAwaitingApproval, messageApproved, messageAwaitingApproval, messageRevoked, visibilityTimeout = 3500, children, } = props;
+    const { useHasPermissions } = useCallStateHooks();
     const hasPermission = useHasPermissions(permission);
     const prevHasPermission = useRef(hasPermission);
     const [showNotification, setShowNotification] = useState();
@@ -661,158 +510,237 @@ const PermissionNotification = (props) => {
     return (jsx(Notification, { isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
 };
 
-const SpeakingWhileMutedNotification = ({ children, text, }) => {
+const SpeakingWhileMutedNotification = ({ children, text, placement, }) => {
     const { useMicrophoneState } = useCallStateHooks();
     const { isSpeakingWhileMuted } = useMicrophoneState();
     const { t } = useI18n();
     const message = text ?? t('You are muted. Unmute to speak.');
-    return (jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, children: children }));
+    return (jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, placement: placement || 'top-start', children: children }));
+};
+
+const RecordingInProgressNotification = ({ children, text, }) => {
+    const { t } = useI18n();
+    const { isCallRecordingInProgress } = useToggleCallRecording();
+    const [isVisible, setVisible] = useState(false);
+    const message = text ?? t('Recording in progress...');
+    useEffect(() => {
+        if (isCallRecordingInProgress) {
+            setVisible(true);
+        }
+        else {
+            setVisible(false);
+        }
+    }, [isCallRecordingInProgress]);
+    return (jsx(Notification, { message: message, iconClassName: "str-video__icon str-video__icon--recording-on", isVisible: isVisible, placement: "top-start", close: () => setVisible(false), children: children }));
 };
 
 const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
     return (jsxs("div", { className: clsx('str-video__loading-indicator', className), title: tooltip, children: [jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && jsx("p", { className: "str-video__loading-indicator-text", children: text })] }));
 };
 
-const RecordCallButton = ({ caption = 'Record', }) => {
-    const call = useCall();
+const RecordEndConfirmation = () => {
+    const { t } = useI18n();
+    const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();
+    const { close } = useMenuContext();
+    return (jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxs("div", { className: "str-video__end-recording__header", children: [jsx(Icon, { icon: "recording-on" }), jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxs("div", { className: "str-video__end-recording__actions", children: [jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsx(CompositeButton, { variant: "primary", onClick: toggleCallRecording, children: isAwaitingResponse ? jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
+};
+const ToggleEndRecordingMenuButton = forwardRef(function ToggleEndRecordingMenuButton(props, ref) {
+    return (jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsx(Icon, { icon: "recording-off" }) }));
+});
+const RecordCallConfirmationButton = ({ caption, }) => {
     const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    if (isCallRecordingInProgress) {
+        return (jsx(Restricted, { requiredGrants: [
+                OwnCapability.START_RECORD_CALL,
+                OwnCapability.STOP_RECORD_CALL,
+            ], children: jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: MenuVisualType.PORTAL, children: jsx(RecordEndConfirmation, {}) }) }));
+    }
     return (jsx(Restricted, { requiredGrants: [
             OwnCapability.START_RECORD_CALL,
             OwnCapability.STOP_RECORD_CALL,
-        ], children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, children: isAwaitingResponse ? (jsx(LoadingIndicator, { tooltip: isCallRecordingInProgress
-                    ? t('Waiting for recording to stop...')
-                    : t('Waiting for recording to start...') })) : (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 })) }) }));
+        ], children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, title: caption || t('Record call'), variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : toggleCallRecording, children: isAwaitingResponse ? (jsx(LoadingIndicator, { tooltip: t('Waiting for recording to start...') })) : (jsx(Icon, { icon: "recording-off" })) }) }));
 };
-
-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 (jsx("div", { className: "str-video__call-stats-line-chart-container", children: jsx(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 RecordCallButton = ({ caption }) => {
+    const { t } = useI18n();
+    const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = useToggleCallRecording();
+    let title = caption || t('Record call');
+    if (isAwaitingResponse) {
+        title = isCallRecordingInProgress
+            ? t('Waiting for recording to stop...')
+            : t('Waiting for recording to start...');
+    }
+    return (jsx(Restricted, { requiredGrants: [
+            OwnCapability.START_RECORD_CALL,
+            OwnCapability.STOP_RECORD_CALL,
+        ], children: jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": isCallRecordingInProgress
+                ? 'recording-stop-button'
+                : 'recording-start-button', title: title, onClick: isAwaitingResponse ? undefined : toggleCallRecording, children: isAwaitingResponse ? (jsx(LoadingIndicator, {})) : (jsx(Icon, { icon: isCallRecordingInProgress ? 'recording-on' : 'recording-off' })) }) }));
 };
 
-const CallStats = () => {
-    const [latencyBuffer, setLatencyBuffer] = useState(() => {
-        const now = Date.now();
-        return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
-    });
-    const [publishBitrate, setPublishBitrate] = useState('-');
-    const [subscribeBitrate, setSubscribeBitrate] = useState('-');
-    const previousStats = useRef();
-    const { useCallStatsReport } = useCallStateHooks();
-    const callStatsReport = useCallStatsReport();
-    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 (jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxs(Fragment, { children: [jsx("h3", { children: "Call Latency" }), jsx(CallStatsLatencyChart, { values: latencyBuffer }), jsx("h3", { children: "Call performance" }), jsxs("div", { className: "str-video__call-stats__card-container", children: [jsx(StatCard, { label: "Region", value: callStatsReport.datacenter }), jsx(StatCard, { label: "Latency", value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.` }), jsx(StatCard, { label: "Receive jitter", value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.` }), jsx(StatCard, { label: "Publish jitter", value: `${callStatsReport.publisherStats.averageJitterInMs} ms.` }), jsx(StatCard, { label: "Publish resolution", value: toFrameSize(callStatsReport.publisherStats) }), jsx(StatCard, { label: "Publish quality drop reason", value: callStatsReport.publisherStats.qualityLimitationReasons }), jsx(StatCard, { label: "Receiving resolution", value: toFrameSize(callStatsReport.subscriberStats) }), jsx(StatCard, { label: "Receive quality drop reason", value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsx(StatCard, { label: "Publish bitrate", value: publishBitrate }), jsx(StatCard, { label: "Receiving bitrate", value: subscribeBitrate })] })] })) }));
-};
-const StatCard = (props) => {
-    const { label, value } = props;
-    return (jsxs("div", { className: "str-video__call-stats__card", children: [jsx("div", { className: "str-video__call-stats__card_label", children: label }), jsx("div", { className: "str-video__call-stats__card_value", children: value })] }));
+const defaultEmojiReactionMap = {
+    ':like:': '👍',
+    ':raise-hand:': '✋',
+    ':fireworks:': '🎉',
+    ':dislike:': '👎',
+    ':heart:': '❤️',
+    ':smile:': '😀',
 };
-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 Reaction = ({ participant: { reaction, sessionId }, hideAfterTimeoutInMs = 5500, emojiReactionMap = defaultEmojiReactionMap, }) => {
+    const call = useCall();
+    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 (jsx("div", { className: "str-video__reaction", children: jsx("span", { className: "str-video__reaction__emoji", children: emojiCode && emojiReactionMap[emojiCode] }) }));
 };
-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 defaultReactions = [
+    {
+        type: 'reaction',
+        emoji_code: ':like:',
+    },
+    {
+        // TODO OL: use `prompt` type?
+        type: 'raised-hand',
+        emoji_code: ':raise-hand:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':fireworks:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':dislike:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':heart:',
+    },
+    {
+        type: 'reaction',
+        emoji_code: ':smile:',
+    },
+];
+const ReactionsButton = ({ reactions = defaultReactions, }) => {
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx(MenuToggle, { placement: "top", ToggleButton: ToggleReactionsMenuButton, visualType: MenuVisualType.MENU, children: jsx(DefaultReactionsMenu, { reactions: reactions }) }) }));
 };
-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 ToggleReactionsMenuButton = forwardRef(function ToggleReactionsMenuButton({ menuShown }, ref) {
+    const { t } = useI18n();
+    return (jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", title: t('Reactions'), children: jsx(Icon, { icon: "reactions" }) }));
+});
+const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
+    const call = useCall();
+    return (jsx("div", { className: clsx('str-video__reactions-menu', {
+            'str-video__reactions-menu--horizontal': layout === 'horizontal',
+            'str-video__reactions-menu--vertical': layout === 'vertical',
+        }), children: reactions.map((reaction) => (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 CallStatsButton = () => (jsx(MenuToggle, { placement: "top-end", ToggleButton: ToggleMenuButton$1, children: jsx(CallStats, {}) }));
-const ToggleMenuButton$1 = forwardRef(({ menuShown }, ref) => (jsx(CompositeButton, { ref: ref, active: menuShown, caption: 'Stats', children: jsx(IconButton, { icon: "stats", title: "Statistics" }) })));
-
 const ScreenShareButton = (props) => {
     const { t } = useI18n();
-    const { caption = t('Screen Share') } = props;
-    const { useHasOngoingScreenShare, useScreenShareState } = useCallStateHooks();
+    const { caption } = props;
+    const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } = useCallStateHooks();
     const isSomeoneScreenSharing = useHasOngoingScreenShare();
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SCREENSHARE);
+    const callSettings = useCallSettings();
+    const isScreenSharingAllowed = callSettings?.screensharing.enabled;
     const { screenShare, isMute: amIScreenSharing } = useScreenShareState();
     const disableScreenShareButton = amIScreenSharing
-        ? isSomeoneScreenSharing
+        ? isSomeoneScreenSharing || isScreenSharingAllowed === false
         : false;
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(PermissionNotification, { permission: 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: jsx(CompositeButton, { active: isSomeoneScreenSharing, caption: caption, children: jsx(IconButton, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off', title: t('Share screen'), disabled: disableScreenShareButton, onClick: async () => {
-                        if (!hasPermission) {
-                            await requestPermission();
-                        }
-                        else {
-                            await screenShare.toggle();
-                        }
-                    } }) }) }) }));
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(PermissionNotification, { permission: 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: jsx(CompositeButton, { active: isSomeoneScreenSharing, caption: caption, title: caption || t('Share screen'), variant: "primary", "data-testid": isSomeoneScreenSharing
+                    ? 'screen-share-stop-button'
+                    : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: async () => {
+                    if (!hasPermission) {
+                        await requestPermission();
+                    }
+                    else {
+                        await screenShare.toggle();
+                    }
+                }, children: jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }));
+};
+
+const SelectContext = createContext({});
+const Select = (props) => {
+    const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [selectedIndex, setSelectedIndex] = useState(defaultSelectedIndex);
+    const [selectedLabel, setSelectedLabel] = useState(defaultSelectedLabel);
+    const { refs, context } = useFloating({
+        placement: 'bottom-start',
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [flip()],
+    });
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const handleSelect = useCallback((index) => {
+        setSelectedIndex(index);
+        handleSelectProp(index || 0);
+        setIsOpen(false);
+        if (index !== null) {
+            setSelectedLabel(labelsRef.current[index]);
+        }
+    }, [handleSelectProp]);
+    const handleTypeaheadMatch = (index) => {
+        if (isOpen) {
+            setActiveIndex(index);
+        }
+        else {
+            handleSelect(index);
+        }
+    };
+    const listNav = useListNavigation(context, {
+        listRef: elementsRef,
+        activeIndex,
+        selectedIndex,
+        onNavigate: setActiveIndex,
+    });
+    const typeahead = useTypeahead(context, {
+        listRef: labelsRef,
+        activeIndex,
+        selectedIndex,
+        onMatch: handleTypeaheadMatch,
+    });
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'listbox' });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNav, typeahead, click, dismiss, role]);
+    const selectContext = useMemo(() => ({
+        activeIndex,
+        selectedIndex,
+        getItemProps,
+        handleSelect,
+    }), [activeIndex, selectedIndex, getItemProps, handleSelect]);
+    return (jsxs("div", { className: "str-video__dropdown", children: [jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), selectedLabel] }), jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsx(FloatingFocusManager, { context: context, modal: false, children: jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
+};
+const DropDownSelectOption = (props) => {
+    const { selected, label, icon } = props;
+    const { getItemProps, handleSelect } = useContext(SelectContext);
+    const { ref, index } = useListItem();
+    return (jsxs("div", { className: clsx('str-video__dropdown-option', {
+            'str-video__dropdown-option--selected': selected,
+        }), ref: ref, ...getItemProps({
+            onClick: () => handleSelect(index),
+        }), children: [jsx(Icon, { className: "str-video__dropdown-icon", icon: icon }), jsx("span", { className: "str-video__dropdown-label", children: label })] }));
+};
+const DropDownSelect = (props) => {
+    const { children, icon, handleSelect, defaultSelectedLabel, defaultSelectedIndex, } = props;
+    return (jsx(Select, { icon: icon, handleSelect: handleSelect, defaultSelectedIndex: defaultSelectedIndex, defaultSelectedLabel: defaultSelectedLabel, children: children }));
 };
 
 const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, defaultChecked, value, }) => {
@@ -821,9 +749,8 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
             'str-video__device-settings__option--disabled': disabled,
         }), htmlFor: id, children: [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();
+const DeviceSelectorList = (props) => {
+    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, type, onChange, } = props;
     // 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.
@@ -832,46 +759,71 @@ const DeviceSelector = (props) => {
         !devices.find((d) => d.deviceId === selectedDeviceId)) {
         selectedDeviceId = devices[0].deviceId;
     }
-    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), !devices.length ? (jsx(DeviceSelectorOption, { id: `${inputGroupName}--default`, label: "Default", name: inputGroupName, defaultChecked: true, value: "default" })) : (devices.map((device) => {
-                return (jsx(DeviceSelectorOption, { id: `${inputGroupName}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [title && (jsx("div", { className: "str-video__device-settings__device-selector-title", children: title })), !devices.length ? (jsx(DeviceSelectorOption, { id: `${type}--default`, label: "Default", name: type, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+                return (jsx(DeviceSelectorOption, { id: `${type}--${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));
+                    }, name: type, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
             }))] }));
 };
+const DeviceSelectorDropdown = (props) => {
+    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, onChange, icon, } = props;
+    // 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;
+    }
+    const selectedIndex = devices.findIndex((d) => d.deviceId === selectedDeviceId);
+    const handleSelect = useCallback((index) => {
+        onChange?.(devices[index].deviceId);
+    }, [devices, onChange]);
+    return (jsxs("div", { className: "str-video__device-settings__device-kind", children: [jsx("div", { className: "str-video__device-settings__device-selector-title", children: title }), jsx(DropDownSelect, { icon: icon, defaultSelectedIndex: selectedIndex, defaultSelectedLabel: devices[selectedIndex]?.label, handleSelect: handleSelect, children: devices.map((device) => {
+                    return (jsx(DropDownSelectOption, { icon: icon, label: device.label, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
+                }) })] }));
+};
+const DeviceSelector = (props) => {
+    const { visualType = 'list', icon, placeholder, ...rest } = props;
+    if (visualType === 'list') {
+        return jsx(DeviceSelectorList, { ...rest });
+    }
+    return (jsx(DeviceSelectorDropdown, { ...rest, icon: icon, placeholder: placeholder }));
+};
 
-const DeviceSelectorAudioInput = ({ title, }) => {
-    const { t } = useI18n();
+const DeviceSelectorAudioInput = ({ title, visualType, }) => {
     const { useMicrophoneState } = useCallStateHooks();
     const { microphone, selectedDevice, devices } = useMicrophoneState();
-    return (jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
+    return (jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
             await microphone.select(deviceId);
-        }, title: title || t('Select a Mic') }));
+        }, title: title, visualType: visualType, icon: "mic" }));
 };
-const DeviceSelectorAudioOutput = ({ title, }) => {
-    const { t } = useI18n();
+const DeviceSelectorAudioOutput = ({ title, visualType, }) => {
     const { useSpeakerState } = useCallStateHooks();
     const { speaker, selectedDevice, devices, isDeviceSelectionSupported } = useSpeakerState();
     if (!isDeviceSelectionSupported)
         return null;
-    return (jsx(DeviceSelector, { devices: devices, selectedDeviceId: selectedDevice, onChange: (deviceId) => {
+    return (jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
             speaker.select(deviceId);
-        }, title: title || t('Select Speakers') }));
+        }, title: title, visualType: visualType, icon: "speaker" }));
 };
 
-const DeviceSelectorVideo = ({ title }) => {
-    const { t } = useI18n();
+const DeviceSelectorVideo = ({ title, visualType, }) => {
     const { useCameraState } = useCallStateHooks();
     const { camera, devices, selectedDevice } = useCameraState();
-    return (jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
+    return (jsx(DeviceSelector, { devices: devices || [], type: "videoinput", selectedDeviceId: selectedDevice, onChange: async (deviceId) => {
             await camera.select(deviceId);
-        }, title: title || t('Select a Camera') }));
+        }, title: title, visualType: visualType, icon: "camera" }));
 };
 
-const DeviceSettings = () => {
-    return (jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleMenuButton, children: jsx(Menu, {}) }));
+const DeviceSettings = ({ visualType = MenuVisualType.MENU, }) => {
+    return (jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleDeviceSettingsMenuButton, visualType: visualType, children: jsx(Menu, {}) }));
 };
-const Menu = () => (jsxs("div", { className: "str-video__device-settings", children: [jsx(DeviceSelectorVideo, {}), jsx(DeviceSelectorAudioInput, {}), jsx(DeviceSelectorAudioOutput, {})] }));
-const ToggleMenuButton = forwardRef(({ menuShown }, ref) => {
+const Menu = () => {
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__device-settings", children: [jsx(DeviceSelectorVideo, { title: t('Select a Camera') }), jsx(DeviceSelectorAudioInput, { title: t('Select a Mic') }), jsx(DeviceSelectorAudioOutput, { title: t('Select Speakers') })] }));
+};
+const ToggleDeviceSettingsMenuButton = forwardRef(function ToggleDeviceSettingsMenuButton({ menuShown }, ref) {
     const { t } = useI18n();
     return (jsx(IconButton, { className: clsx('str-video__device-settings__button', {
             'str-video__device-settings__button--active': menuShown,
@@ -879,53 +831,103 @@ const ToggleMenuButton = forwardRef(({ menuShown }, ref) => {
 });
 
 const ToggleAudioPreviewButton = (props) => {
+    const { caption, Menu, menuPlacement, ...restCompositeButtonProps } = props;
     const { t } = useI18n();
-    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
     const { useMicrophoneState } = useCallStateHooks();
-    const { microphone, isMute } = useMicrophoneState();
-    return (jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption || t('Mic'), children: jsx(IconButton, { icon: !isMute ? 'mic' : 'mic-off', onClick: () => microphone.toggle() }) }));
+    const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
+    return (jsxs(CompositeButton, { active: isMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", title: !hasBrowserPermission
+            ? t('Check your browser audio permissions')
+            : caption || t('Mic'), disabled: !hasBrowserPermission, "data-testid": isMute ? 'preview-audio-unmute-button' : 'preview-audio-mute-button', onClick: () => microphone.toggle(), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, children: [jsx(Icon, { icon: !isMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" }))] }));
 };
 const ToggleAudioPublishingButton = (props) => {
     const { t } = useI18n();
-    const { caption = t('Mic'), Menu = DeviceSelectorAudioInput } = props;
+    const { caption, Menu = jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SEND_AUDIO);
     const { useMicrophoneState } = useCallStateHooks();
-    const { microphone, isMute } = useMicrophoneState();
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(PermissionNotification, { permission: 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: jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption, children: jsx(IconButton, { icon: isMute ? 'mic-off' : 'mic', onClick: async () => {
-                        if (!hasPermission) {
-                            await requestPermission();
-                        }
-                        else {
-                            await microphone.toggle();
-                        }
-                    } }) }) }) }));
+    const { microphone, isMute, hasBrowserPermission } = useMicrophoneState();
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(PermissionNotification, { permission: 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: jsxs(CompositeButton, { active: isMute, caption: caption, title: !hasPermission
+                    ? t('You have no permission to share your audio')
+                    : !hasBrowserPermission
+                        ? t('Check your browser mic permissions')
+                        : caption || t('Mic'), variant: "secondary", disabled: !hasBrowserPermission || !hasPermission, "data-testid": isMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: async () => {
+                    if (!hasPermission) {
+                        await requestPermission();
+                    }
+                    else {
+                        await microphone.toggle();
+                    }
+                }, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, children: [jsx(Icon, { icon: isMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }));
 };
 
 const ToggleVideoPreviewButton = (props) => {
+    const { caption, ...restCompositeButtonProps } = props;
     const { t } = useI18n();
-    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
     const { useCameraState } = useCallStateHooks();
-    const { camera, isMute } = useCameraState();
-    return (jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption, children: jsx(IconButton, { icon: !isMute ? 'camera' : 'camera-off', onClick: () => camera.toggle() }) }));
+    const { camera, isMute, hasBrowserPermission } = useCameraState();
+    return (jsxs(CompositeButton, { active: isMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), title: !hasBrowserPermission
+            ? t('Check your browser video permissions')
+            : caption || t('Video'), variant: "secondary", "data-testid": isMute ? 'preview-video-unmute-button' : 'preview-video-mute-button', onClick: () => camera.toggle(), disabled: !hasBrowserPermission, ...restCompositeButtonProps, children: [jsx(Icon, { icon: !isMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" }))] }));
 };
 const ToggleVideoPublishingButton = (props) => {
     const { t } = useI18n();
-    const { caption = t('Video'), Menu = DeviceSelectorVideo } = props;
+    const { caption, Menu = jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(OwnCapability.SEND_VIDEO);
-    const { useCameraState } = useCallStateHooks();
-    const { camera, isMute } = useCameraState();
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(PermissionNotification, { permission: 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: jsx(CompositeButton, { Menu: Menu, active: isMute, caption: caption, children: jsx(IconButton, { icon: isMute ? 'camera-off' : 'camera', onClick: async () => {
-                        if (!hasPermission) {
-                            await requestPermission();
-                        }
-                        else {
-                            await camera.toggle();
-                        }
-                    } }) }) }) }));
+    const { useCameraState, useCallSettings } = useCallStateHooks();
+    const { camera, isMute, hasBrowserPermission } = useCameraState();
+    const callSettings = useCallSettings();
+    const isPublishingVideoAllowed = callSettings?.video.enabled;
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(PermissionNotification, { permission: 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: jsxs(CompositeButton, { active: isMute, caption: caption, variant: "secondary", title: !hasPermission
+                    ? t('You have no permission to share your video')
+                    : !hasBrowserPermission
+                        ? t('Check your browser video permissions')
+                        : !isPublishingVideoAllowed
+                            ? t('Video publishing is disabled by the system')
+                            : caption || t('Video'), disabled: !hasBrowserPermission || !hasPermission || !isPublishingVideoAllowed, "data-testid": isMute ? 'video-unmute-button' : 'video-mute-button', onClick: async () => {
+                    if (!hasPermission) {
+                        await requestPermission();
+                    }
+                    else {
+                        await camera.toggle();
+                    }
+                }, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, children: [jsx(Icon, { icon: isMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                        !hasPermission ||
+                        !isPublishingVideoAllowed) && (jsx("span", { className: "str-video__no-media-permission", children: "!" }))] }) }) }));
+};
+
+const EndCallMenu = (props) => {
+    const { onLeave, onEnd } = props;
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsx(Restricted, { requiredGrants: [OwnCapability.END_CALL], children: jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
+};
+const CancelCallToggleMenuButton = forwardRef(function CancelCallToggleMenuButton(props, ref) {
+    const { t } = useI18n();
+    return (jsx(IconButton, { icon: "call-end", variant: "danger", title: t('Leave call'), "data-testid": "leave-call-button", ref: ref }));
+});
+const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
+    const call = useCall();
+    const handleLeave = useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            await call.leave();
+            onLeave?.();
+        }
+    }, [onClick, onLeave, call]);
+    const handleEndCall = useCallback(async (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        else if (call) {
+            await call.endCall();
+            onLeave?.();
+        }
+    }, [onClick, onLeave, call]);
+    return (jsx(MenuToggle, { placement: "top-start", ToggleButton: CancelCallToggleMenuButton, children: jsx(EndCallMenu, { onEnd: handleEndCall, onLeave: handleLeave }) }));
 };
-
 const CancelCallButton = ({ disabled, onClick, onLeave, }) => {
     const call = useCall();
+    const { t } = useI18n();
     const handleClick = useCallback(async (e) => {
         if (onClick) {
             onClick(e);
@@ -935,81 +937,202 @@ const CancelCallButton = ({ disabled, onClick, onLeave, }) => {
             onLeave?.();
         }
     }, [onClick, onLeave, call]);
-    return (jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", onClick: handleClick }));
+    return (jsx(IconButton, { disabled: disabled, icon: "call-end", variant: "danger", title: t('Leave call'), "data-testid": "cancel-call-button", onClick: handleClick }));
 };
 
-const CallControls = ({ onLeave }) => (jsxs("div", { className: "str-video__call-controls", children: [jsx(RecordCallButton, {}), jsx(CallStatsButton, {}), jsx(ScreenShareButton, {}), jsx(SpeakingWhileMutedNotification, { children: jsx(ToggleAudioPublishingButton, {}) }), jsx(ToggleVideoPublishingButton, {}), jsx(CancelCallButton, { onLeave: onLeave })] }));
+const CallControls = ({ onLeave }) => (jsxs("div", { className: "str-video__call-controls", children: [jsx(RecordCallButton, {}), jsx(ReactionsButton, {}), jsx(ScreenShareButton, {}), jsx(SpeakingWhileMutedNotification, { children: jsx(ToggleAudioPublishingButton, {}) }), jsx(ToggleVideoPublishingButton, {}), jsx(CancelCallButton, { onLeave: onLeave })] }));
 
-const defaultEmojiReactionMap = {
-    ':like:': '👍',
-    ':raise-hand:': '✋',
-    ':fireworks:': '🎉',
-    ':dislike:': '👎',
-    ':heart:': '❤️',
-    ':smile:': '😀',
+Chart.register(CategoryScale, LinearScale, LineElement, PointElement);
+const CallStatsLatencyChart = (props) => {
+    const { values } = props;
+    let max = 0;
+    const data = {
+        labels: values.map((point) => {
+            const date = new Date(point.x * 1000);
+            return `${date.getHours()}:${date.getMinutes()}`;
+        }),
+        datasets: [
+            {
+                data: values.map((point) => {
+                    const { y } = point;
+                    max = Math.max(max, y);
+                    return point;
+                }),
+                borderColor: '#00e2a1',
+                backgroundColor: '#00e2a1',
+            },
+        ],
+    };
+    const options = useMemo(() => {
+        return {
+            maintainAspectRatio: false,
+            animation: {
+                duration: 0,
+            },
+            elements: {
+                line: {
+                    borderWidth: 1,
+                },
+                point: {
+                    radius: 2,
+                },
+            },
+            scales: {
+                y: {
+                    position: 'right',
+                    stacked: true,
+                    min: 0,
+                    max: Math.max(180, Math.ceil((max + 10) / 10) * 10),
+                    grid: {
+                        display: true,
+                        color: '#979ca0',
+                    },
+                    ticks: {
+                        stepSize: 30,
+                    },
+                },
+                x: {
+                    grid: {
+                        display: false,
+                    },
+                    ticks: {
+                        display: false,
+                    },
+                },
+            },
+        };
+    }, [max]);
+    return (jsx("div", { className: "str-video__call-stats-line-chart-container", children: jsx(Line, { options: options, data: data, className: "str-video__call-stats__latencychart" }) }));
+};
+
+var Statuses;
+(function (Statuses) {
+    Statuses["GOOD"] = "Good";
+    Statuses["OK"] = "Ok";
+    Statuses["BAD"] = "Bad";
+})(Statuses || (Statuses = {}));
+const statsStatus = ({ value, lowBound, highBound, }) => {
+    if (value <= lowBound) {
+        return Statuses.GOOD;
+    }
+    if (value >= lowBound && value <= highBound) {
+        return Statuses.OK;
+    }
+    if (value >= highBound) {
+        return Statuses.BAD;
+    }
+    return Statuses.GOOD;
 };
-const Reaction = ({ participant: { reaction, sessionId }, hideAfterTimeoutInMs = 5500, emojiReactionMap = defaultEmojiReactionMap, }) => {
-    const call = useCall();
+const CallStats = (props) => {
+    const { latencyLowBound = 75, latencyHighBound = 400 } = props;
+    const [latencyBuffer, setLatencyBuffer] = useState(() => {
+        const now = Date.now();
+        return Array.from({ length: 20 }, (_, i) => ({ x: now + i, y: 0 }));
+    });
+    const { t } = useI18n();
+    const [publishBitrate, setPublishBitrate] = useState('-');
+    const [subscribeBitrate, setSubscribeBitrate] = useState('-');
+    const previousStats = useRef();
+    const { useCallStatsReport } = useCallStateHooks();
+    const callStatsReport = useCallStatsReport();
     useEffect(() => {
-        if (!call || !reaction)
+        if (!callStatsReport)
             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 (jsx("div", { className: "str-video__reaction", children: jsx("span", { className: "str-video__reaction__emoji", children: emojiCode && emojiReactionMap[emojiCode] }) }));
+        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]);
+    const latencyComparison = {
+        lowBound: latencyLowBound,
+        highBound: latencyHighBound,
+        value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
+    };
+    return (jsx("div", { className: "str-video__call-stats", children: callStatsReport && (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__call-stats__header", children: [jsxs("h3", { className: "str-video__call-stats__heading", children: [jsx(Icon, { className: "str-video__call-stats__icon", icon: "call-latency" }), t('Call Latency')] }), jsx("p", { className: "str-video__call-stats__description", children: t('Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.') })] }), jsx("div", { className: "str-video__call-stats__latencychart", children: jsx(CallStatsLatencyChart, { values: latencyBuffer }) }), jsxs("div", { className: "str-video__call-stats__header", children: [jsxs("h3", { className: "str-video__call-stats__heading", children: [jsx(Icon, { className: "str-video__call-stats__icon", icon: "network-quality" }), t('Call performance')] }), jsx("p", { className: "str-video__call-stats__description", children: t('Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.') })] }), jsxs("div", { className: "str-video__call-stats__card-container", children: [jsx(StatCard, { label: "Region", value: callStatsReport.datacenter }), jsx(StatCard, { label: "Latency", value: `${callStatsReport.publisherStats.averageRoundTripTimeInMs} ms.`, comparison: latencyComparison }), jsx(StatCard, { label: "Receive jitter", value: `${callStatsReport.subscriberStats.averageJitterInMs} ms.`, comparison: {
+                                ...latencyComparison,
+                                value: callStatsReport.subscriberStats.averageJitterInMs,
+                            } }), jsx(StatCard, { label: "Publish jitter", value: `${callStatsReport.publisherStats.averageJitterInMs} ms.`, comparison: {
+                                ...latencyComparison,
+                                value: callStatsReport.publisherStats.averageJitterInMs,
+                            } }), jsx(StatCard, { label: "Publish resolution", value: toFrameSize(callStatsReport.publisherStats) }), jsx(StatCard, { label: "Publish quality drop reason", value: callStatsReport.publisherStats.qualityLimitationReasons }), jsx(StatCard, { label: "Receiving resolution", value: toFrameSize(callStatsReport.subscriberStats) }), jsx(StatCard, { label: "Receive quality drop reason", value: callStatsReport.subscriberStats.qualityLimitationReasons }), jsx(StatCard, { label: "Publish bitrate", value: publishBitrate }), jsx(StatCard, { label: "Receiving bitrate", value: subscribeBitrate })] })] })) }));
+};
+const StatCardExplanation = (props) => {
+    const { description } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+    });
+    const hover = useHover(context);
+    const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
+    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__call-explanation", ref: refs.setReference, ...getReferenceProps(), children: jsx(Icon, { className: "str-video__call-explanation__icon", icon: "info" }) }), isOpen && (jsx("div", { className: "str-video__call-explanation__description", ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: description }))] }));
 };
-
-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 StatsTag = ({ children, status = Statuses.GOOD, }) => {
+    return (jsx("div", { className: clsx('str-video__call-stats__tag', {
+            'str-video__call-stats__tag--good': status === Statuses.GOOD,
+            'str-video__call-stats__tag--ok': status === Statuses.OK,
+            'str-video__call-stats__tag--bad': status === Statuses.BAD,
+        }), children: jsx("div", { className: "str-video__call-stats__tag__text", children: children }) }));
+};
+const StatCard = (props) => {
+    const { label, value, description, comparison } = props;
     const { t } = useI18n();
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx(CompositeButton, { active: false, caption: t('Reactions'), menuPlacement: "top-start", Menu: jsx(DefaultReactionsMenu, { reactions: reactions }), children: jsx(IconButton, { icon: "reactions", title: t('Reactions'), onClick: () => {
-                    console.log('Reactions');
-                } }) }) }));
+    const status = comparison ? statsStatus(comparison) : undefined;
+    return (jsxs("div", { className: "str-video__call-stats__card", children: [jsxs("div", { className: "str-video__call-stats__card-content", children: [jsxs("div", { className: "str-video__call-stats__card-label", children: [label, description && jsx(StatCardExplanation, { description: description })] }), jsx("div", { className: "str-video__call-stats__card-value", children: value })] }), comparison && status && jsx(StatsTag, { status: status, children: t(status) })] }));
 };
-const DefaultReactionsMenu = ({ reactions, }) => {
-    const call = useCall();
-    return (jsx("div", { className: "str-video__reactions-menu", children: reactions.map((reaction) => (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 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 = () => (jsx(MenuToggle, { placement: "top-end", ToggleButton: ToggleMenuButton, children: jsx(CallStats, {}) }));
+const ToggleMenuButton = forwardRef(function ToggleMenuButton(props, ref) {
+    const { t } = useI18n();
+    const { caption, menuShown } = props;
+    return (jsx(CompositeButton, { ref: ref, active: menuShown, caption: caption, title: caption || t('Statistics'), "data-testid": "stats-button", children: jsx(Icon, { icon: "stats" }) }));
+});
+
 const ToggleAudioOutputButton = (props) => {
     const { t } = useI18n();
-    const { caption = t('Speakers'), Menu = DeviceSelectorAudioOutput } = props;
-    return (jsx(CompositeButton, { Menu: Menu, caption: caption, children: jsx(IconButton, { icon: "speaker" }) }));
+    const { caption, Menu } = props;
+    return (jsx(CompositeButton, { Menu: Menu, caption: caption, title: caption || t('Speakers'), "data-testid": "audio-output-button", children: jsx(Icon, { icon: "speaker" }) }));
 };
 
 const BlockedUserListing = ({ data }) => {
@@ -1031,146 +1154,76 @@ const CallParticipantListHeader = ({ onClose, }) => {
     const participants = useParticipants();
     const anonymousParticipantCount = useAnonymousParticipantCount();
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__participant-list-header", children: [jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["(", participants.length, ")"] }), anonymousParticipantCount > 0 && (jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsx("button", { onClick: onClose, className: "str-video__participant-list-header__close-button", children: jsx("span", { className: "str-video__participant-list-header__close-button--icon" }) })] }));
+    return (jsxs("div", { className: "str-video__participant-list-header", children: [jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
-const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
-    const isAudioOn = participant.publishedTracks.includes(SfuModels.TrackType.AUDIO);
-    const isVideoOn = participant.publishedTracks.includes(SfuModels.TrackType.VIDEO);
-    const isPinned = !!participant.pin;
-    const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx(DisplayName, { participant: participant }), jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [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'}`) }), 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 && (jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsx(ParticipantActionsContextMenu, { participant: participant }) })] })] }));
-};
-const MediaIndicator = (props) => (jsx(WithTooltip, { ...props }));
-// todo: implement display device flag
-const DefaultDisplayName = ({ participant }) => {
-    const connectedUser = useConnectedUser();
-    const { t } = 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 (jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
-};
-const ToggleButton$2 = forwardRef((props, ref) => {
-    return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
-});
-const ParticipantActionsContextMenu = ({ participant, participantViewElement, videoElement, }) => {
-    const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
-    const [pictureInPictureElement, setPictureInPictureElement] = useState(document.pictureInPictureElement);
-    const call = useCall();
-    const { t } = useI18n();
-    const { pin, publishedTracks, sessionId, userId } = participant;
-    const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
-    const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
-    const hasScreenShare = publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
-    const hasScreenShareAudio = publishedTracks.includes(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));
-    };
-    useEffect(() => {
-        // handles the case when fullscreen mode is toggled externally,
-        // e.g., by pressing ESC key or some other keyboard shortcut
-        const handleFullscreenChange = () => {
-            setFullscreenModeOn(!!document.fullscreenElement);
-        };
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        return () => {
-            document.removeEventListener('fullscreenchange', handleFullscreenChange);
-        };
-    }, []);
+const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
+    const { refs, x, y, strategy } = useFloatingUIPreset({
+        placement: tooltipPlacement,
+        strategy: 'absolute',
+    });
     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 (jsxs(GenericMenu, { children: [jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPinnedAt, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxs(Restricted, { requiredGrants: [OwnCapability.PIN_FOR_EVERYONE], children: [jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxs(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], children: [jsxs(GenericMenuButtonItem, { disabled: !hasVideo, onClick: muteVideo, children: [jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] }), jsxs(GenericMenuButtonItem, { disabled: !hasScreenShare, onClick: muteScreenShare, children: [jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] }), jsxs(GenericMenuButtonItem, { disabled: !hasAudio, onClick: muteAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute audio')] }), jsxs(GenericMenuButtonItem, { disabled: !hasScreenShareAudio, onClick: muteScreenShareAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] })] }), participantViewElement && (jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
-                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-                }) })), videoElement && document.pictureInPictureEnabled && (jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
-                    direction: pictureInPictureElement === videoElement
-                        ? t('Leave')
-                        : t('Enter'),
-                }) })), jsxs(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    if (!visible)
+        return null;
+    return (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] = useState(false);
+    const handleMouseEnter = useCallback((e) => {
+        setTooltipVisible(true);
+        onMouseEnter?.(e);
+    }, [onMouseEnter]);
+    const handleMouseLeave = 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] = useState(null);
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
+};
+
+const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
+    const isAudioOn = participant.publishedTracks.includes(SfuModels.TrackType.AUDIO);
+    const isVideoOn = participant.publishedTracks.includes(SfuModels.TrackType.VIDEO);
+    const isPinned = !!participant.pin;
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsx(DisplayName, { participant: participant }), jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [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'}`) }), 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 && (jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
+};
+const MediaIndicator = (props) => (jsx(WithTooltip, { ...props }));
+const DefaultDisplayName = ({ participant }) => {
+    const connectedUser = useConnectedUser();
+    const { t } = 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 (jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
+};
+const ToggleButton$2 = forwardRef(function ToggleButton(props, ref) {
+    return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+});
+
 const CallParticipantListing = ({ data, }) => (jsx("div", { className: "str-video__participant-listing", children: data.map((participant) => (jsx(CallParticipantListingItem, { participant: participant }, participant.sessionId))) }));
 
 const EmptyParticipantSearchList = () => {
@@ -1211,8 +1264,11 @@ const useSearch = ({ debounceInterval, searchFn, searchQuery = '', }) => {
     const [searchResults, setSearchResults] = useState([]);
     const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);
     useEffect(() => {
-        if (!searchQuery.length)
-            return setSearchResults([]);
+        if (!searchQuery.length) {
+            setSearchQueryInProgress(false);
+            setSearchResults([]);
+            return;
+        }
         setSearchQueryInProgress(true);
         const timeout = setTimeout(async () => {
             try {
@@ -1245,14 +1301,14 @@ const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearch
     const [searchQuery, setSearchQuery] = useState('');
     const [userListType, setUserListType] = useState('active');
     const exitSearch = useCallback(() => setSearchQuery(''), []);
-    return (jsxs("div", { className: "str-video__participant-list", children: [jsx(CallParticipantListHeader, { onClose: onClose }), jsx(SearchInput, { value: searchQuery, onChange: ({ currentTarget }) => setSearchQuery(currentTarget.value), exitSearch: exitSearch, isActive: !!searchQuery }), jsx(CallParticipantListContentHeader, { userListType: userListType, setUserListType: setUserListType }), jsxs("div", { className: "str-video__participant-list__content", children: [userListType === 'active' && (jsx(ActiveUsersSearchResults, { searchQuery: searchQuery, activeUsersSearchFn: activeUsersSearchFn, debounceSearchInterval: debounceSearchInterval })), userListType === 'blocked' && (jsx(BlockedUsersSearchResults, { searchQuery: searchQuery, blockedUsersSearchFn: blockedUsersSearchFn, debounceSearchInterval: debounceSearchInterval }))] }), jsx("div", { className: "str-video__participant-list__footer", children: jsx(CopyToClipboardButtonWithPopup, { Button: InviteLinkButton, copyValue: typeof window !== 'undefined' ? window.location.href : '' }) })] }));
+    return (jsxs("div", { className: "str-video__participant-list", children: [jsx(CallParticipantListHeader, { onClose: onClose }), jsx(SearchInput, { value: searchQuery, onChange: ({ currentTarget }) => setSearchQuery(currentTarget.value), exitSearch: exitSearch, isActive: !!searchQuery }), jsx(CallParticipantListContentHeader, { userListType: userListType, setUserListType: setUserListType }), jsxs("div", { className: "str-video__participant-list__content", children: [userListType === 'active' && (jsx(ActiveUsersSearchResults, { searchQuery: searchQuery, activeUsersSearchFn: activeUsersSearchFn, debounceSearchInterval: debounceSearchInterval })), userListType === 'blocked' && (jsx(BlockedUsersSearchResults, { searchQuery: searchQuery, blockedUsersSearchFn: blockedUsersSearchFn, debounceSearchInterval: debounceSearchInterval }))] })] }));
 };
 const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
     const call = useCall();
     const muteAll = () => {
         call?.muteAllUsers('audio');
     };
-    return (jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxs("div", { className: "str-video__participant-list__content-header-title", children: [jsx("span", { children: UserListTypes[userListType] }), userListType === 'active' && (jsx(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsx(TextButton, { onClick: muteAll, children: "Mute all" }) }))] }), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
+    return (jsxs("div", { className: "str-video__participant-list__content-header", children: [jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsx(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsx(TextButton, { onClick: muteAll, children: "Mute all" }) })) }), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (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 } = useCallStateHooks();
@@ -1286,10 +1342,9 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
     });
     return (jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
 };
-const ToggleButton$1 = forwardRef((props, ref) => {
+const ToggleButton$1 = forwardRef(function ToggleButton(props, ref) {
     return jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
 });
-const InviteLinkButton = forwardRef(({ className, ...props }, ref) => (jsxs("button", { ...props, className: clsx('str-video__invite-link-button', className), ref: ref, children: [jsx("div", { className: "str-video__invite-participant-icon" }), jsx("div", { className: "str-video__invite-link-button__text", children: "Invite Link" })] })));
 
 const CallPreview = (props) => {
     const { className, style } = props;
@@ -1309,15 +1364,17 @@ const CallPreview = (props) => {
 };
 
 const CallRecordingListHeader = ({ callRecordings, onRefresh, }) => {
-    return (jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxs("div", { className: "str-video__call-recording-list__title", children: [jsx("span", { children: "Call Recordings" }), callRecordings.length ? jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), jsx(IconButton, { icon: "refresh", title: "Refresh", onClick: onRefresh })] }));
+    const { t } = useI18n();
+    return (jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxs("div", { className: "str-video__call-recording-list__title", children: [jsx("span", { children: t('Call Recordings') }), callRecordings.length ? jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), onRefresh && (jsx(IconButton, { icon: "refresh", title: t('Refresh'), onClick: onRefresh }))] }));
 };
 
+const dateFormat = (date) => {
+    const format = new Date(date);
+    return format.toTimeString().split(' ')[0];
+};
 const CallRecordingListItem = ({ recording, }) => {
-    return (jsxs("div", { className: "str-video__call-recording-list-item", children: [jsx("div", { className: "str-video__call-recording-list-item__info", children: jsx("div", { className: "str-video__call-recording-list-item__created", children: new Date(recording.end_time).toLocaleString() }) }), jsxs("div", { className: "str-video__call-recording-list-item__actions", children: [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: jsx("span", { className: clsx('str-video__call-recording-list-item__action-button-icon', 'str-video__download-button--icon') }) }), jsx(CopyToClipboardButtonWithPopup, { Button: CopyUrlButton, copyValue: recording.url })] })] }));
+    return (jsxs("li", { className: "str-video__call-recording-list__item", children: [jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__filename", children: recording.filename }), jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__time", children: dateFormat(recording.start_time) }), jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__time", children: dateFormat(recording.end_time) }), jsx("div", { className: "str-video__call-recording-list__table-cell str-video__call-recording-list__download", children: 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: jsx(Icon, { icon: "download" }) }) })] }));
 };
-const CopyUrlButton = forwardRef((props, ref) => {
-    return (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: jsx("span", { className: clsx('str-video__call-recording-list-item__action-button-icon', 'str-video__copy-button--icon') }) }));
-});
 
 const EmptyCallRecordingListing = () => {
     return (jsxs("div", { className: "str-video__call-recording-list__listing str-video__call-recording-list__listing--empty", children: [jsx("div", { className: "str-video__call-recording-list__listing--icon-empty" }), jsx("p", { className: "str-video__call-recording-list__listing--text-empty", children: "No recordings available" })] }));
@@ -1328,7 +1385,7 @@ const LoadingCallRecordingListing = ({ callRecordings, }) => {
 };
 
 const CallRecordingList = ({ callRecordings, CallRecordingListHeader: CallRecordingListHeader$1 = CallRecordingListHeader, CallRecordingListItem: CallRecordingListItem$1 = CallRecordingListItem, EmptyCallRecordingList = EmptyCallRecordingListing, loading, LoadingCallRecordingList = LoadingCallRecordingListing, onRefresh, }) => {
-    return (jsxs("div", { className: "str-video__call-recording-list", children: [jsx(CallRecordingListHeader$1, { callRecordings: callRecordings, onRefresh: onRefresh }), jsx("div", { className: "str-video__call-recording-list__listing", children: loading ? (jsx(LoadingCallRecordingList, { callRecordings: callRecordings })) : callRecordings.length ? (callRecordings.map((recording) => (jsx(CallRecordingListItem$1, { recording: recording }, recording.filename)))) : (jsx(EmptyCallRecordingList, {})) })] }));
+    return (jsxs("div", { className: "str-video__call-recording-list", children: [jsx(CallRecordingListHeader$1, { callRecordings: callRecordings, onRefresh: onRefresh }), jsx("div", { className: "str-video__call-recording-list__listing", children: loading ? (jsx(LoadingCallRecordingList, { callRecordings: callRecordings })) : callRecordings.length ? (jsxs(Fragment, { children: [jsx("ul", { className: "str-video__call-recording-list__list", children: jsxs("li", { className: "str-video__call-recording-list__item", children: [jsx("div", { className: "str-video__call-recording-list__filename", children: "Name" }), jsx("div", { className: "str-video__call-recording-list__time", children: "Start time" }), jsx("div", { className: "str-video__call-recording-list__time", children: "End time" }), jsx("div", { className: "str-video__call-recording-list__download" })] }) }), jsx("ul", { className: "str-video__call-recording-list__list", children: callRecordings.map((recording) => (jsx(CallRecordingListItem$1, { recording: recording }, recording.filename))) })] })) : (jsx(EmptyCallRecordingList, {})) })] }));
 };
 
 const RingingCallControls = () => {
@@ -1394,7 +1451,7 @@ const byNameOrId = (a, b) => {
 };
 const PermissionRequests = () => {
     const call = useCall();
-    const { useLocalParticipant } = useCallStateHooks();
+    const { useLocalParticipant, useHasPermissions } = useCallStateHooks();
     const localParticipant = useLocalParticipant();
     const [expanded, setExpanded] = useState(false);
     const [permissionRequests, setPermissionRequests] = useState([]);
@@ -1403,16 +1460,11 @@ const PermissionRequests = () => {
     useEffect(() => {
         if (!call || !canUpdateCallPermissions)
             return;
-        const unsubscribe = call.on('call.permission_request', (event) => {
-            if (event.type !== 'call.permission_request')
-                return;
+        return call.on('call.permission_request', (event) => {
             if (event.user.id !== localUserId) {
                 setPermissionRequests((requests) => [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)));
             }
         });
-        return () => {
-            unsubscribe();
-        };
     }, [call, canUpdateCallPermissions, localUserId]);
     const handleUpdatePermission = (request, type) => {
         return async () => {
@@ -1444,7 +1496,7 @@ const PermissionRequests = () => {
                     overflowY: 'auto',
                 }, permissionRequests: permissionRequests, handleUpdatePermission: handleUpdatePermission }))] }));
 };
-const PermissionRequestList = forwardRef((props, ref) => {
+const PermissionRequestList = forwardRef(function PermissionRequestList(props, ref) {
     const { permissionRequests, handleUpdatePermission, ...rest } = props;
     const { t } = useI18n();
     return (jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
@@ -1480,6 +1532,124 @@ const StreamTheme = ({ as: Component = 'div', className, children, ...props }) =
     return (jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
 };
 
+const DefaultVideoPlaceholder = forwardRef(function DefaultVideoPlaceholder({ participant, style }, ref) {
+    const { t } = useI18n();
+    const [error, setError] = useState(false);
+    const name = participant.name || participant.userId;
+    return (jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
+                (name ? (jsx(InitialsFallback, { name: name })) : (jsx("div", { className: "str-video__video-placeholder__no-video-label", children: t('Video is disabled') }))), participant.image && !error && (jsx("img", { onError: () => setError(true), alt: "video-placeholder", className: "str-video__video-placeholder__avatar", src: participant.image }))] }));
+});
+const InitialsFallback = (props) => {
+    const { name } = props;
+    const initials = name
+        .split(' ')
+        .slice(0, 2)
+        .map((n) => n[0])
+        .join('');
+    return (jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
+};
+
+const Video$1 = ({ trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, refs, ...rest }) => {
+    const { sessionId, videoStream, screenShareStream, publishedTracks, viewportVisibilityState, isLocalParticipant, userId, } = participant;
+    const call = useCall();
+    const [videoElement, setVideoElement] = useState(null);
+    // start with true, will flip once the video starts playing
+    const [isVideoPaused, setIsVideoPaused] = useState(true);
+    const [isWideMode, setIsWideMode] = useState(true);
+    const stream = trackType === 'videoTrack'
+        ? videoStream
+        : trackType === 'screenShareTrack'
+            ? screenShareStream
+            : undefined;
+    useLayoutEffect(() => {
+        if (!call || !videoElement || trackType === 'none')
+            return;
+        const cleanup = call.bindVideoElement(videoElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, trackType, sessionId, videoElement]);
+    useEffect(() => {
+        if (!stream || !videoElement)
+            return;
+        const [track] = stream.getVideoTracks();
+        if (!track)
+            return;
+        const handlePlayPause = () => {
+            setIsVideoPaused(videoElement.paused);
+            const { width = 0, height = 0 } = track.getSettings();
+            setIsWideMode(width >= height);
+        };
+        // playback may have started before we had a chance to
+        // attach the 'play/pause' event listener, so we set the state
+        // here to make sure it's in sync
+        setIsVideoPaused(videoElement.paused);
+        videoElement.addEventListener('play', handlePlayPause);
+        videoElement.addEventListener('pause', handlePlayPause);
+        track.addEventListener('unmute', handlePlayPause);
+        return () => {
+            videoElement.removeEventListener('play', handlePlayPause);
+            videoElement.removeEventListener('pause', handlePlayPause);
+            track.removeEventListener('unmute', handlePlayPause);
+            // reset the 'pause' state once we unmount the video element
+            setIsVideoPaused(true);
+        };
+    }, [stream, videoElement]);
+    if (!call)
+        return null;
+    const isPublishingTrack = trackType === 'videoTrack'
+        ? publishedTracks.includes(SfuModels.TrackType.VIDEO)
+        : trackType === 'screenShareTrack'
+            ? publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE)
+            : false;
+    const isInvisible = trackType === 'none' ||
+        viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
+    const hasNoVideoOrInvisible = !isPublishingTrack || isInvisible;
+    const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
+    const isScreenShareTrack = trackType === 'screenShareTrack';
+    return (jsxs(Fragment, { children: [!hasNoVideoOrInvisible && (jsx("video", { ...rest, className: clsx('str-video__video', className, {
+                    'str-video__video--not-playing': isVideoPaused,
+                    'str-video__video--tall': !isWideMode,
+                    'str-video__video--mirror': mirrorVideo,
+                    'str-video__video--screen-share': isScreenShareTrack,
+                }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
+                    setVideoElement(element);
+                    refs?.setVideoElement?.(element);
+                } })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+};
+
+/**
+ * @description Extends video element with `stream` property
+ * (`srcObject`) to reactively handle stream changes
+ */
+const BaseVideo = forwardRef(function BaseVideo({ stream, ...rest }, ref) {
+    const [videoElement, setVideoElement] = useState(null);
+    useEffect(() => {
+        if (!videoElement || !stream)
+            return;
+        if (stream === videoElement.srcObject)
+            return;
+        videoElement.srcObject = stream;
+        if (Browsers.isSafari() || 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 (jsx("video", { autoPlay: true, playsInline: true, ...rest, ref: (element) => {
+            applyElementToRef(ref, element);
+            setVideoElement(element);
+        } }));
+});
+
 const DefaultDisabledVideoPreview = () => {
     const { t } = useI18n();
     return (jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
@@ -1508,10 +1678,124 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
     return (jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
 };
 
-const ParticipantViewContext = createContext(undefined);
-const useParticipantViewContext = () => useContext(ParticipantViewContext);
+const ParticipantActionsContextMenu = () => {
+    const { participant, participantViewElement, videoElement } = useParticipantViewContext();
+    const [fullscreenModeOn, setFullscreenModeOn] = useState(!!document.fullscreenElement);
+    const [pictureInPictureElement, setPictureInPictureElement] = useState(document.pictureInPictureElement);
+    const call = useCall();
+    const { t } = useI18n();
+    const { pin, publishedTracks, sessionId, userId } = participant;
+    const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
+    const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
+    const hasScreenShare = publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+    const hasScreenShareAudio = publishedTracks.includes(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 toggleParticipantPin = () => {
+        if (pin) {
+            call?.unpin(sessionId);
+        }
+        else {
+            call?.pin(sessionId);
+        }
+    };
+    const pinForEveryone = () => {
+        call
+            ?.pinForEveryone({
+            user_id: userId,
+            session_id: sessionId,
+        })
+            .catch((err) => {
+            console.error(`Failed to pin participant ${userId}`, err);
+        });
+    };
+    const unpinForEveryone = () => {
+        call
+            ?.unpinForEveryone({
+            user_id: userId,
+            session_id: sessionId,
+        })
+            .catch((err) => {
+            console.error(`Failed to unpin participant ${userId}`, err);
+        });
+    };
+    const toggleFullscreenMode = () => {
+        if (!fullscreenModeOn) {
+            return participantViewElement?.requestFullscreen().catch(console.error);
+        }
+        return document.exitFullscreen().catch(console.error);
+    };
+    useEffect(() => {
+        // handles the case when fullscreen mode is toggled externally,
+        // e.g., by pressing ESC key or some other keyboard shortcut
+        const handleFullscreenChange = () => {
+            setFullscreenModeOn(!!document.fullscreenElement);
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+    useEffect(() => {
+        if (!videoElement)
+            return;
+        const handlePiP = () => {
+            setPictureInPictureElement(document.pictureInPictureElement);
+        };
+        videoElement.addEventListener('enterpictureinpicture', handlePiP);
+        videoElement.addEventListener('leavepictureinpicture', handlePiP);
+        return () => {
+            videoElement.removeEventListener('enterpictureinpicture', handlePiP);
+            videoElement.removeEventListener('leavepictureinpicture', handlePiP);
+        };
+    }, [videoElement]);
+    const togglePictureInPicture = () => {
+        if (videoElement && pictureInPictureElement !== videoElement) {
+            return videoElement
+                .requestPictureInPicture()
+                .catch(console.error);
+        }
+        return document.exitPictureInPicture().catch(console.error);
+    };
+    const { close } = useMenuContext() || {};
+    return (jsxs(GenericMenu, { onItemClick: close, children: [jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxs(Restricted, { requiredGrants: [OwnCapability.PIN_FOR_EVERYONE], children: [jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxs(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], children: [hasVideo && (jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShare && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudio && (jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudio && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement && (jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
+                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
+                }) })), videoElement && document.pictureInPictureEnabled && (jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
+                    direction: pictureInPictureElement === videoElement
+                        ? t('Leave')
+                        : t('Enter'),
+                }) })), jsxs(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+};
+
+const useTrackElementVisibility = ({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }) => {
+    const call = useCall();
+    const manager = propsDynascaleManager ?? call?.dynascaleManager;
+    useEffect(() => {
+        if (!trackedElement || !manager || !call || trackType === 'none')
+            return;
+        const unobserve = manager.trackElementVisibility(trackedElement, sessionId, trackType);
+        return () => {
+            unobserve();
+        };
+    }, [trackedElement, manager, call, sessionId, trackType]);
+};
 
-const ToggleButton = forwardRef((props, ref) => {
+const ToggleButton = forwardRef(function ToggleButton(props, ref) {
     return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
 });
 const DefaultScreenShareOverlay = () => {
@@ -1522,8 +1806,8 @@ const DefaultScreenShareOverlay = () => {
     };
     return (jsxs("div", { className: "str-video__screen-share-overlay", children: [jsx(Icon, { icon: "screen-share-off" }), jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxs("button", { onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
 };
-const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-end', showMenuButton = true, }) => {
-    const { participant, participantViewElement, trackType, videoElement } = useParticipantViewContext();
+const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, }) => {
+    const { participant, trackType } = useParticipantViewContext();
     const { publishedTracks } = participant;
     const hasScreenShare = publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
     if (participant.isLocalParticipant &&
@@ -1531,11 +1815,11 @@ const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'b
         trackType === 'screenShareTrack') {
         return (jsxs(Fragment, { children: [jsx(DefaultScreenShareOverlay, {}), jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
     }
-    return (jsxs(Fragment, { children: [showMenuButton && (jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsx(ParticipantActionsContextMenu, { participantViewElement: participantViewElement, participant: participant, videoElement: videoElement }) })), jsx(Reaction, { participant: participant }), jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
+    return (jsxs(Fragment, { children: [showMenuButton && (jsx(MenuToggle, { strategy: "fixed", placement: menuPlacement, ToggleButton: ToggleButton, children: jsx(ParticipantActionsContextMenu$1, {}) })), jsx(Reaction, { participant: participant }), jsx(ParticipantDetails, { indicatorsVisible: indicatorsVisible })] }));
 };
 const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const { participant } = useParticipantViewContext();
-    const { isDominantSpeaker, isLocalParticipant, connectionQuality, publishedTracks, pin, sessionId, name, userId, } = participant;
+    const { isLocalParticipant, connectionQuality, publishedTracks, pin, sessionId, name, userId, } = participant;
     const call = useCall();
     const { t } = useI18n();
     const connectionQualityAsString = !!connectionQuality &&
@@ -1543,13 +1827,18 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
     const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
     const canUnpin = !!pin && pin.isLocalPin;
-    return (jsx("div", { className: "str-video__participant-details", children: jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isDominantSpeaker && (jsx("span", { className: "str-video__participant-details__name--dominant_speaker", title: t('Dominant speaker') })), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
-                        connectionQuality === SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) })), indicatorsVisible && !hasAudio && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
-                // TODO: remove this monstrosity once we have a proper design
-                jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), style: { cursor: 'pointer' }, className: "str-video__participant-details__name--pinned" }))] }) }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: "str-video__participant-details", children: jsxs("span", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && !hasAudio && (jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && !hasVideo && (jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && canUnpin && (
+                        // TODO: remove this monstrosity once we have a proper design
+                        jsx("span", { title: t('Unpin'), onClick: () => call?.unpin(sessionId), className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsx(Notification, { isVisible: isLocalParticipant &&
+                    connectionQuality === SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
+};
+const SpeechIndicator = () => {
+    const { participant } = useParticipantViewContext();
+    const { isSpeaking, isDominantSpeaker } = participant;
+    return (jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" })] }));
 };
 
-const ParticipantView = forwardRef(({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) => {
+const ParticipantView = forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
     const { isLocalParticipant, isSpeaking, isDominantSpeaker, publishedTracks, sessionId, } = participant;
     const hasAudio = publishedTracks.includes(SfuModels.TrackType.AUDIO);
     const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
@@ -1602,11 +1891,13 @@ var Speakers = "Speakers";
 var Video = "Video";
 var Live = "Live";
 var Reactions = "Reactions";
+var Statistics = "Statistics";
 var Invite = "Invite";
 var Join = "Join";
 var You = "You";
 var Me = "Me";
 var Unknown = "Unknown";
+var Refresh = "Refresh";
 var Allow = "Allow";
 var Revoke = "Revoke";
 var Dismiss = "Dismiss";
@@ -1642,6 +1933,7 @@ var en = {
 	"Waiting for recording to start...": "Waiting for recording to start...",
 	"Record call": "Record call",
 	Reactions: Reactions,
+	Statistics: Statistics,
 	"You can now share your screen.": "You can now share your screen.",
 	"Awaiting for an approval to share screen.": "Awaiting for an approval to share screen.",
 	"You can no longer share your screen.": "You can no longer share your screen.",
@@ -1655,6 +1947,12 @@ var en = {
 	Me: Me,
 	Unknown: Unknown,
 	"Toggle device menu": "Toggle device menu",
+	"Call Recordings": "Call Recordings",
+	Refresh: Refresh,
+	"Check your browser video permissions": "Check your browser video permissions",
+	"Video publishing is disabled by the system": "Video publishing is disabled by the system",
+	"You have no permission to share your video": "You have no permission to share your video",
+	"You have no permission to share your audio": "You have no permission to share your audio",
 	"You are presenting your screen": "You are presenting your screen",
 	"Stop Screen Sharing": "Stop Screen Sharing",
 	Allow: Allow,
@@ -1684,6 +1982,8 @@ var en = {
 	"Disable screen sharing": "Disable screen sharing",
 	Enter: Enter,
 	Leave: Leave,
+	"Leave call": "Leave call",
+	"End call for all": "End call for all",
 	"{{ direction }} fullscreen": "{{ direction }} fullscreen",
 	"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
 	"Dominant Speaker": "Dominant Speaker",
@@ -1977,7 +2277,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.4.26" ).split('.');
+const [major, minor, patch] = ("0.5.0" ).split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -1985,5 +2285,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, Avatar, AvatarFallback, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CallStatsLatencyChart, CancelCallButton, CompositeButton, CopyToClipboardButton, CopyToClipboardButtonWithPopup, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useHorizontalScrollPosition, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
+export { AcceptCallButton, Audio, Avatar, AvatarFallback, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CallStatsLatencyChart, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StatCardExplanation, StatsTag, Statuses, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useHorizontalScrollPosition, useMenuContext, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map