@stream-io/video-react-sdk 1.43.2 → 2.0.0-beta.1

package/dist/embedded.cjs.js

@@ -4,7 +4,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var videoReactBindings = require('@stream-io/video-react-bindings');
 var videoClient = require('@stream-io/video-client');
-var react$1 = require('@floating-ui/react');
+var i18n = require('@stream-io/i18n');
+var react$1 = require('@stream-io/i18n/react');
+var react$2 = require('@floating-ui/react');
 var clsx = require('clsx');
 
 const Audio = react.memo(function AudioRender({ participant, trackType = 'audioTrack', ...rest }) {
@@ -39,18 +41,169 @@ const ParticipantsAudio = (props) => {
 };
 ParticipantsAudio.displayName = 'ParticipantsAudio';
 
+/**
+ * The SDK's bundled translation data: the keys that cannot carry an inline `defaultValue` at their
+ * call site. `Streami18n` layers it under *every* language, so a partial dictionary never knocks
+ * these out.
+ *
+ * Empty, and that is the intended steady state. The four lookups this SDK resolved from a runtime
+ * value — the only candidates for an entry here — are written as `switch` statements over literal
+ * `t()` calls instead, so every branch carries its own English copy inline and the codegen reads it
+ * straight off the call site. Nothing is left without a default. `timestamp.*` / `duration.*`
+ * formatter expressions would also live here; this SDK has none yet.
+ *
+ * Adding an entry later needs no wiring. `Streami18n` already spreads this into the core options and
+ * `scripts/generate-i18n-keys.mts` already reads this path, so a new key reaches `keys.ts` on the
+ * next `build-translations` run — where a key nothing references, or one that shadows an inline
+ * default, fails a codegen guard.
+ */
+const runtimeDefaults = {};
+
+/**
+ * Wrapper around [i18next](https://www.i18next.com/) for this SDK's translations. Pass an instance
+ * to `<StreamVideo i18nInstance={…}>` to control the language and the copy.
+ *
+ * The implementation lives in `@stream-io/i18n`, shared with the React Native SDK and with Chat.
+ * What this subclass adds is what is this package's own: its bundled translation data, and the two
+ * type parameters — core cannot supply either, because the key catalog is generated from *this*
+ * package's `t()` call sites.
+ *
+ * ## Overriding some of the English copy
+ *
+ * ```ts
+ * const i18n = new Streami18n({
+ *   translationsForLanguage: {
+ *     'common.participants.label': 'People',
+ *   },
+ * });
+ * ```
+ *
+ * ## Adding a language
+ *
+ * ```ts
+ * import 'dayjs/locale/nl';
+ *
+ * const i18n = new Streami18n({ language: 'nl' });
+ * i18n.registerTranslation('nl', {
+ *   'callControls.cancelCallButton.leaveCall.title': 'Verlaten',
+ * });
+ * ```
+ *
+ * No dayjs locale file defines `calendar` — that field belongs to the calendar plugin — so a
+ * language whose relative dates must read natively needs the locale import *and* a `calendar`
+ * config passed as the third argument.
+ *
+ * Type your dictionary as `TranslationDictionary` to turn a typo or a key removed in a later major
+ * into a compile error. A **partial dictionary is safe**: any key you leave out renders the English
+ * copy that ships inline at each call site, never a raw dotted path — so there is no need to
+ * translate everything before shipping a language.
+ *
+ * Reactivity goes through `i18n.state`, a `StateStore`. `setLanguage()` returns nothing — the new
+ * `t` is published to that store, which the provider subscribes to.
+ */
+class Streami18n extends i18n.Streami18n {
+    constructor(options = {}) {
+        super({
+            ...options,
+            // Merged, not replaced. Spreading `options` over a literal would let an integrator supplying
+            // one entry silently drop the SDK's own bundled data, which then renders as raw keys.
+            runtimeDefaults: { ...runtimeDefaults, ...options.runtimeDefaults },
+        });
+    }
+}
+
+/**
+ * The `t` in force before i18next has initialized, and the context's default.
+ *
+ * Core's factory, instantiated against this SDK's catalog so it is typed exactly like the real `t`.
+ * It honours the inline `defaultValue` each prose call site passes, which is what stops raw dotted
+ * keys flashing on the first frame.
+ */
+const defaultTranslatorFunction = i18n.createDefaultTranslatorFunction();
+/**
+ * Built from the shared factory in `@stream-io/i18n/react`.
+ *
+ * A **default value** is supplied rather than making the hook throw, and that is deliberate: it
+ * matches what `useI18n` did before this module existed, and it is what lets the `embedded/`
+ * components — which are used standalone, outside any provider — render correct English instead of
+ * crashing. Chat's React Native SDK throws instead; hence core exposes this as a factory.
+ */
+const { TranslationContext, TranslationProvider, useTranslationContext } = react$1.createTranslationContext({
+    defaultValue: {
+        t: defaultTranslatorFunction,
+        tDateTimeParser: i18n.defaultDateTimeParser,
+    },
+    displayName: 'StreamVideoTranslationContext',
+});
+/**
+ * Reads `t` and `tDateTimeParser` from the closest provider.
+ *
+ * Works outside a provider too — the default translator renders each call site's inline English.
+ *
+ * The name is `useI18n` rather than core's `useTranslationContext` because ~500 call sites in this
+ * SDK already import it; renaming them is churn with no payoff.
+ *
+ * @example
+ * const { t } = useI18n();
+ * const label = t('callControls.cancelCallButton.leaveCall.title', 'Leave call');
+ */
+const useI18n = useTranslationContext;
+
+/**
+ * Resolves the translation context value: creates or adopts a {@link Streami18n} instance,
+ * registers the supplied dictionaries, initializes it and keeps `t` fresh across language changes.
+ *
+ * `init()` and the store subscription belong to `useStreami18nState` in `@stream-io/i18n/react`,
+ * shared with the React Native SDK.
+ */
+const useStreami18n = ({ i18nInstance, language, translations, }) => {
+    // Lazy `useState`, not `useMemo`: `new Streami18n()` is a real allocation with identity that must
+    // survive a re-render, and this repo lints `react-hooks/purity` as an error — `useMemo` is a
+    // cache React is free to drop, so constructing there is a purity violation. A later change to
+    // `i18nInstance` is ignored on purpose; swapping the instance mid-tree is not a supported move.
+    const [i18n] = react.useState(() => {
+        const instance = i18nInstance ?? new Streami18n({ language });
+        // Registered here rather than in an effect. `useStreami18nState` calls `init()` from its own
+        // effect, which runs *before* any effect declared below it in this hook — so a dictionary
+        // registered in an effect would arrive after i18next was already initialized, and the first
+        // `init()` would warn that the language has no dictionary.
+        if (translations) {
+            for (const [code, dictionary] of Object.entries(translations)) {
+                instance.registerTranslation(code, dictionary);
+            }
+        }
+        return instance;
+    });
+    // No `onInitError` handler: core already logs a warning and leaves the instance usable, with `t`
+    // still rendering each call site's inline English. Pass one only to surface init failures
+    // somewhere other than the console.
+    const translators = react$1.useStreami18nState(i18n);
+    react.useEffect(() => {
+        // Guarded on the current value: `setLanguage` re-runs the formatter factories and a full
+        // i18next `changeLanguage`, and the first render already constructed the instance with
+        // `language`. Undefined means "leave whatever the instance was configured with".
+        if (!language || i18n.currentLanguage === language)
+            return;
+        i18n.setLanguage(language);
+    }, [i18n, language]);
+    // Returned as-is: `useStreami18nState` already caches this object and only produces a new one
+    // when `t` or `tDateTimeParser` actually changes, so wrapping it in a `useMemo` would add a
+    // second cache over a stable value.
+    return translators;
+};
+
 const ParticipantViewContext = react.createContext(undefined);
 const useParticipantViewContext = () => react.useContext(ParticipantViewContext);
 
 const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: offsetInPx = 10, }) => {
-    const { refs, x, y, update, elements: { domReference, floating }, context, } = react$1.useFloating({
+    const { refs, x, y, update, elements: { domReference, floating }, context, } = react$2.useFloating({
         placement,
         strategy,
         middleware: [
-            react$1.offset(offsetInPx),
-            react$1.shift(),
-            react$1.flip(),
-            react$1.size({
+            react$2.offset(offsetInPx),
+            react$2.shift(),
+            react$2.flip(),
+            react$2.size({
                 padding: 10,
                 apply: ({ availableHeight, elements }) => {
                     Object.assign(elements.floating.style, {
@@ -65,7 +218,7 @@ const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: off
     react.useEffect(() => {
         if (!domReference || !floating)
             return;
-        const cleanup = react$1.autoUpdate(domReference, floating, update);
+        const cleanup = react$2.autoUpdate(domReference, floating, update);
         return () => cleanup();
     }, [domReference, floating, update]);
     return { refs, x, y, domReference, floating, strategy, context };
@@ -177,7 +330,7 @@ const useRequestPermission = (permission) => {
  * 2. Maps the device list to a format more suitable for rendering.
  */
 function useDeviceList(devices, selectedDeviceId) {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     return react.useMemo(() => {
         let selectedDeviceInfo = null;
         let selectedIndex = null;
@@ -193,7 +346,7 @@ function useDeviceList(devices, selectedDeviceId) {
         if (selectedDeviceInfo === null || selectedIndex === null) {
             const defaultDevice = {
                 deviceId: 'default',
-                label: t('Default'),
+                label: t('common.default.label', 'Default'),
                 isSelected: true,
             };
             selectedDeviceInfo = defaultDevice;
@@ -333,7 +486,7 @@ const useMenuContext = () => {
 };
 const MenuPortal = ({ children, refs, }) => {
     const [portalRoot, setPortalRoot] = react.useState(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: setPortalRoot, className: "str-video__portal" }), jsxRuntime.jsx(react$1.FloatingOverlay, { children: jsxRuntime.jsx(react$1.FloatingPortal, { root: portalRoot, children: jsxRuntime.jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: setPortalRoot, className: "str-video__portal" }), jsxRuntime.jsx(react$2.FloatingOverlay, { children: jsxRuntime.jsx(react$2.FloatingPortal, { root: portalRoot, children: jsxRuntime.jsx("div", { className: "str-video__portal-content", ref: refs.setFloating, children: children }) }) })] }));
 };
 const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', offset, visualType = MenuVisualType.MENU, children, onToggle, }) => {
     const [menuShown, setMenuShown] = react.useState(false);
@@ -395,6 +548,7 @@ const GenericMenu = ({ children, onItemClick, }) => {
 const GenericMenuButtonItem = ({ children, ...rest }) => {
     return (jsxRuntime.jsx("li", { className: "str-video__generic-menu--item", children: jsxRuntime.jsx("button", { ...rest, children: children }) }));
 };
+const GenericMenuSeparator = () => (jsxRuntime.jsx("li", { className: "str-video__generic-menu--separator", role: "separator" }));
 
 const Icon = ({ className, icon }) => (jsxRuntime.jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`, className) }));
 
@@ -423,7 +577,7 @@ const ParticipantActionsContextMenu = () => {
     const [fullscreenModeOn, setFullscreenModeOn] = react.useState(!!document.fullscreenElement);
     const call = videoReactBindings.useCall();
     const isPiP = usePictureInPictureState(videoElement ?? undefined);
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { pin, sessionId, userId } = participant;
     const hasAudioTrack = videoClient.hasAudio(participant);
     const hasVideoTrack = videoClient.hasVideo(participant);
@@ -495,12 +649,14 @@ const ParticipantActionsContextMenu = () => {
         return document.exitPictureInPicture().catch(console.error);
     };
     const { close } = useMenuContext() || {};
-    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.KICK_USER], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsxRuntime.jsx(Icon, { icon: "kick-user" }), t('Kick')] }) }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement &&
-                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
-                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-                }) })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
-                    direction: isPiP ? t('Leave') : t('Enter'),
-                }) })), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+    return (jsxRuntime.jsxs(GenericMenu, { onItemClick: close, children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), pin
+                        ? t('participantView.unpin.label', 'Unpin')
+                        : t('participantView.actionsMenu.pin.label', 'Pin')] }), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.PIN_FOR_EVERYONE], children: [jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('participantView.actionsMenu.pinForEveryone.label', 'Pin for everyone')] }), jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsxRuntime.jsx(Icon, { icon: "pin" }), t('participantView.actionsMenu.unpinForEveryone.label', 'Unpin for everyone')] })] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsxRuntime.jsx(Icon, { icon: "not-allowed" }), t('participantView.actionsMenu.block.label', 'Block')] }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.KICK_USER], children: jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsxRuntime.jsx(Icon, { icon: "kick-user" }), t('participantView.actionsMenu.kick.label', 'Kick')] }) }), jsxRuntime.jsx(GenericMenuSeparator, {}), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsxRuntime.jsx(Icon, { icon: "camera-off-outline" }), t('participantView.actionsMenu.turnOffVideo.label', 'Turn off video')] })), hasScreenShareTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), t('participantView.actionsMenu.turnOffScreenShare.label', 'Turn off screen share')] })), hasAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('participantView.actionsMenu.muteAudio.label', 'Mute audio')] })), hasScreenShareAudioTrack && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsxRuntime.jsx(Icon, { icon: "no-audio" }), t('participantView.actionsMenu.muteScreenShareAudio.label', 'Mute screen share audio')] }))] }), participantViewElement &&
+                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: [jsxRuntime.jsx(Icon, { icon: "fullscreen" }), fullscreenModeOn
+                        ? t('participantView.actionsMenu.leaveFullscreen.label', 'Leave fullscreen')
+                        : t('participantView.actionsMenu.enterFullscreen.label', 'Enter fullscreen')] })), videoElement && document.pictureInPictureEnabled && (jsxRuntime.jsxs(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: [jsxRuntime.jsx(Icon, { icon: "pip" }), isPiP
+                        ? t('participantView.actionsMenu.leavePip.label', 'Leave picture-in-picture')
+                        : t('participantView.actionsMenu.enterPip.label', 'Enter picture-in-picture')] })), jsxRuntime.jsx(GenericMenuSeparator, {}), jsxRuntime.jsxs(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_AUDIO), children: t('participantView.actionsMenu.allowAudio.label', 'Allow audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SEND_VIDEO), children: t('participantView.actionsMenu.allowVideo.label', 'Allow video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: grantPermission(videoClient.OwnCapability.SCREENSHARE), children: t('participantView.actionsMenu.allowScreenSharing.label', 'Allow screen sharing') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_AUDIO), children: t('participantView.actionsMenu.disableAudio.label', 'Disable audio') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SEND_VIDEO), children: t('participantView.actionsMenu.disableVideo.label', 'Disable video') }), jsxRuntime.jsx(GenericMenuButtonItem, { onClick: revokePermission(videoClient.OwnCapability.SCREENSHARE), children: t('participantView.actionsMenu.disableScreenSharing.label', 'Disable screen sharing') })] })] }));
 };
 
 const isComponentType = (elementOrComponent) => {
@@ -565,34 +721,39 @@ const BaseVideo = react.forwardRef(function BaseVideoRender({ stream, ...rest },
         } }));
 });
 
-const BaseVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
+const variantClasses = ({ size = 'md', showOutline }) => [
+    `str-video__avatar--size-${size}`,
+    showOutline && 'str-video__avatar--outlined',
+];
+const Avatar = ({ imageSrc, name, style, className, size = 'md', showOutline, ...rest }) => {
     const [error, setError] = react.useState(false);
+    if (!imageSrc || error) {
+        return name ? (jsxRuntime.jsx(AvatarFallback, { className: className, style: style, names: name.split(/\s+/).filter(Boolean), size: size, showOutline: showOutline })) : null;
+    }
+    return (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', variantClasses({ size, showOutline }), className), src: imageSrc, style: style, ...rest }));
+};
+const AvatarFallback = ({ className, names, style, size = 'md', showOutline, }) => {
+    const isCompact = size === 'xs' || size === 'sm';
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', variantClasses({ size, showOutline }), className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0]?.[0], !isCompact && names[1]?.[0]] }) }));
+};
+
+const BaseVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
     const name = participant.name || participant.userId;
-    return (jsxRuntime.jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
-                (name ? (jsxRuntime.jsx(InitialsFallback, { name: name })) : (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))), participant.image && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: name, className: "str-video__video-placeholder__avatar", src: participant.image }))] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(participant.image || name) && (jsxRuntime.jsx(Avatar, { size: "2xl", showOutline: true, imageSrc: participant.image, name: name })), !participant.image && !name && (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))] }));
 });
-const InitialsFallback = (props) => {
-    const { name } = props;
-    const initials = name
-        .split(' ')
-        .slice(0, 2)
-        .map((n) => n[0])
-        .join('');
-    return (jsxRuntime.jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
-};
 
 const DefaultVideoPlaceholder = react.forwardRef(function DefaultVideoPlaceholderRender(props, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('common.videoDisabled.text', 'Video is disabled') }));
 });
 
 const DefaultPictureInPicturePlaceholder = react.forwardRef(function DefaultPictureInPicturePlaceholderRender(props, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('videoPlaceholder.videoPlayingInPopup.text', 'Video is playing in a popup') }));
 });
 
 const ABSOLUTE_POSITION_STYLE = { position: 'absolute' };
-const Video$1 = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, refs, ...rest }) => {
+const Video = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, refs, ...rest }) => {
     const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
     const call = videoReactBindings.useCall();
     const [videoElement, setVideoElement] = react.useState(null);
@@ -666,7 +827,7 @@ const Video$1 = ({ enabled = true, mirror, trackType, participant, className, Vi
                     refs?.setVideoElement?.(element);
                 } })), isPiP && PictureInPicturePlaceholder && (jsxRuntime.jsx(PictureInPicturePlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsxRuntime.jsx(VideoPlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
 };
-Video$1.displayName = 'Video';
+Video.displayName = 'Video';
 
 const useTrackElementVisibility = ({ trackedElement, sessionId, trackType, }) => {
     const call = videoReactBindings.useCall();
@@ -677,14 +838,6 @@ const useTrackElementVisibility = ({ trackedElement, sessionId, trackType, }) =>
     }, [trackedElement, call, sessionId, trackType]);
 };
 
-const Avatar = ({ imageSrc, name, style, className, ...rest }) => {
-    const [error, setError] = react.useState(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(!imageSrc || error) && name && (jsxRuntime.jsx(AvatarFallback, { className: className, style: style, names: [name] })), imageSrc && !error && (jsxRuntime.jsx("img", { onError: () => setError(true), alt: "avatar", className: clsx('str-video__avatar', className), src: imageSrc, style: style, ...rest }))] }));
-};
-const AvatarFallback = ({ className, names, style, }) => {
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
-};
-
 const BackgroundFiltersProviderImpl = react.lazy(() => Promise.resolve().then(function () { return require('./embedded-BackgroundFilters-DMStbSEg.cjs.js'); }).then((m) => ({
     default: m.BackgroundFiltersProvider,
 })));
@@ -713,43 +866,44 @@ const BackgroundFiltersProvider = (props) => {
     return (jsxRuntime.jsx(react.Suspense, { fallback: SuspenseFallback, children: jsxRuntime.jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
 };
 
-const IconButton = react.forwardRef(function IconButtonRender(props, ref) {
-    const { icon, enabled, variant, onClick, className, ...rest } = props;
-    return (jsxRuntime.jsx("button", { className: clsx('str-video__call-controls__button', className, {
-            [`str-video__call-controls__button--variant-${variant}`]: variant,
-            'str-video__call-controls__button--enabled': enabled,
-        }), onClick: (e) => {
-            e.preventDefault();
-            onClick?.(e);
-        }, ref: ref, ...rest, children: jsxRuntime.jsx(Icon, { icon: icon }) }));
+/**
+ * A compact badge for counts, notifications and error markers.
+ *
+ * Without `icon` it is a pill that grows with its content; with `icon` it is a
+ * circle of the size given by `size`.
+ *
+ * The badge carries no positioning of its own — whatever it annotates places
+ * it. For the call controls, rendering a badge among `CompositeButton`'s
+ * children anchors it to the top-right corner of the button.
+ */
+const Badge = react.forwardRef(function BadgeRender({ variant = 'default', size = 'sm', icon, className, children, ...rest }, ref) {
+    return (jsxRuntime.jsx("span", { ref: ref, className: clsx('str-video__badge', `str-video__badge--${variant}`, `str-video__badge--size-${size}`, icon && 'str-video__badge--icon', className), ...rest, children: icon ? jsxRuntime.jsx(Icon, { icon: icon }) : children }));
 });
 
-const CompositeButton = react.forwardRef(function CompositeButtonRender({ disabled, caption, children, className, active, Menu, menuPlacement, menuOffset, title, ToggleMenuButton = DefaultToggleMenuButton, variant, onClick, onMenuToggle, ...restButtonProps }, ref) {
-    return (jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button', className, {
-            'str-video__composite-button--caption': caption,
-            'str-video__composite-button--menu': Menu,
-        }), title: title, ref: ref, children: [jsxRuntime.jsxs("div", { className: clsx('str-video__composite-button__button-group', {
-                    'str-video__composite-button__button-group--active': active,
-                    'str-video__composite-button__button-group--active-primary': active && variant === 'primary',
-                    'str-video__composite-button__button-group--active-secondary': active && variant === 'secondary',
-                    'str-video__composite-button__button-group--disabled': disabled,
-                }), children: [jsxRuntime.jsx("button", { type: "button", className: "str-video__composite-button__button", onClick: (e) => {
-                            e.preventDefault();
-                            onClick?.(e);
-                        }, disabled: disabled, ...restButtonProps, children: children }), Menu && (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu }))] }), caption && (jsxRuntime.jsx("div", { className: "str-video__composite-button__caption", children: caption }))] }));
+const Button = react.forwardRef(function ButtonRender({ variant = 'primary', appearance = 'solid', size = 'md', active, className, type = 'button', children, ...rest }, ref) {
+    return (jsxRuntime.jsx("button", { ref: ref, type: type, className: clsx('str-video__button', `str-video__button--${variant}`, `str-video__button--${appearance}`, `str-video__button--size-${size}`, className), ...rest, "aria-pressed": active ?? rest['aria-pressed'], children: children }));
 });
-const DefaultToggleMenuButton = react.forwardRef(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
-    return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__menu-toggle-button', {
-            'str-video__menu-toggle-button--active': menuShown,
-        }), icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
+
+const IconButton = react.forwardRef(function IconButtonRender({ icon, className, ...props }, ref) {
+    return (jsxRuntime.jsx(Button, { ref: ref, className: clsx('str-video__button--icon-only', className), ...props, children: jsxRuntime.jsx(Icon, { icon: icon }) }));
 });
 
-const TextButton = ({ children, ...rest }) => {
-    return (jsxRuntime.jsx("button", { ...rest, className: "str-video__text-button", children: children }));
-};
+const CompositeButton = react.forwardRef(function CompositeButtonRender({ appearance, caption, children, className, disabled, Menu, menuOffset, menuPlacement, onMenuToggle, active, size = 'md', title, ToggleMenuButton = CompositeCaret, variant = 'secondary', ...buttonProps }, ref) {
+    return (jsxRuntime.jsxs("div", { ref: ref, title: title, className: clsx('str-video__composite-button', `str-video__composite-button--${variant}`, `str-video__composite-button--size-${size}`, `str-video__composite-button--${appearance ?? 'solid'}`, Menu && 'str-video__composite-button--menu', className), children: [jsxRuntime.jsxs("div", { className: "str-video__composite-button__group", children: [jsxRuntime.jsx(Button, { variant: variant, appearance: appearance, size: size, disabled: disabled, active: active, className: "str-video__composite-button__action str-video__button--icon-only", ...buttonProps, children: children }), Menu &&
+                        (disabled ? (jsxRuntime.jsx(CompositeCaret, { menuShown: false, disabled: true })) : (jsxRuntime.jsx(MenuToggle, { offset: menuOffset, placement: menuPlacement, ToggleButton: ToggleMenuButton, onToggle: onMenuToggle, children: isComponentType(Menu) ? jsxRuntime.jsx(Menu, {}) : Menu })))] }), caption && (jsxRuntime.jsx("span", { className: "str-video__composite-button__caption", children: caption }))] }));
+});
+const CompositeCaret = react.forwardRef(function CompositeCaretRender({ menuShown, disabled }, ref) {
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__composite-button__caret", size: "xs", appearance: "ghost", disabled: disabled, "aria-label": t('common.toggleMenu.ariaLabel', 'Toggle menu'), "aria-haspopup": "menu", "aria-expanded": menuShown, icon: menuShown ? 'caret-down' : 'caret-up', ref: ref }));
+});
 
+const ICON_BY_STATE = {
+    success: 'checkmark',
+    error: 'exclamation-circle-fill',
+    loading: 'loading',
+};
 const Notification = (props) => {
-    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, iconClassName = 'str-video__notification__icon', close, } = props;
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, state, close, } = props;
     const { refs, x, y, strategy } = useFloatingUIPreset({
         placement,
         strategy: 'absolute',
@@ -762,12 +916,13 @@ const Notification = (props) => {
         }, visibilityTimeout);
         return () => clearTimeout(timeout);
     }, [isVisible, resetIsVisible, visibilityTimeout]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: clsx('str-video__notification', className), ref: refs.setFloating, style: {
+    const icon = state && `str-video__icon str-video__icon--${ICON_BY_STATE[state]}`;
+    return (jsxRuntime.jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: clsx('str-video__notification', state && `str-video__notification--${state}`, close && 'str-video__notification--dismissible', className), ref: refs.setFloating, style: {
                     position: strategy,
                     top: y ?? 0,
                     left: x ?? 0,
                     overflowY: 'auto',
-                }, children: [iconClassName && jsxRuntime.jsx("i", { className: iconClassName }), jsxRuntime.jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsxRuntime.jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
+                }, children: [icon && jsxRuntime.jsx("i", { className: icon }), jsxRuntime.jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsxRuntime.jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
 };
 
 const PermissionNotification = (props) => {
@@ -790,22 +945,23 @@ const PermissionNotification = (props) => {
     }, [hasPermission]);
     const resetIsVisible = react.useCallback(() => setShowNotification(undefined), []);
     if (isAwaitingApproval) {
-        return (jsxRuntime.jsx(Notification, { isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
+        return (jsxRuntime.jsx(Notification, { state: "loading", isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
     }
-    return (jsxRuntime.jsx(Notification, { isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
+    return (jsxRuntime.jsx(Notification, { state: showNotification === 'granted' ? 'success' : 'error', isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
 };
 
 const SpeakingWhileMutedNotification = ({ children, text, placement, }) => {
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { isSpeakingWhileMuted } = useMicrophoneState();
-    const { t } = videoReactBindings.useI18n();
-    const message = text ?? t('You are muted. Unmute to speak.');
+    const { t } = useI18n();
+    const message = text ??
+        t('notification.speakingWhileMuted.text', 'You are muted. Unmute to speak.');
     return (jsxRuntime.jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, placement: placement || 'top-start', children: children }));
 };
 
 const MicCaptureErrorNotification = ({ children, text, placement, }) => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const [isVisible, setIsVisible] = react.useState(false);
     react.useEffect(() => {
         if (!call)
@@ -815,8 +971,8 @@ const MicCaptureErrorNotification = ({ children, text, placement, }) => {
         });
     }, [call]);
     const message = text ??
-        t('Your microphone is not capturing audio. Please check your setup.');
-    return (jsxRuntime.jsx(Notification, { message: message, isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
+        t('notification.micCaptureError.text', 'Your microphone is not capturing audio. Please check your setup.');
+    return (jsxRuntime.jsx(Notification, { message: message, state: "error", isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
 };
 
 const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
@@ -824,22 +980,20 @@ const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
 };
 
 const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
-    const arrowRef = react.useRef(null);
-    const { refs, x, y, strategy, context } = useFloatingUIPreset({
+    const { refs, x, y, strategy } = useFloatingUIPreset({
         placement: tooltipPlacement,
         strategy: 'absolute',
-        middleware: [react$1.arrow({ element: arrowRef })],
     });
     react.useEffect(() => {
         refs.setReference(referenceElement);
     }, [referenceElement, refs]);
     if (!visible)
         return null;
-    return (jsxRuntime.jsxs("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
             position: strategy,
             top: y ?? 0,
             left: x ?? 0,
-        }, children: [jsxRuntime.jsx(react$1.FloatingArrow, { ref: arrowRef, context: context, fill: "var(--str-video__tooltip--background-color)" }), children] }));
+        }, children: children }));
 };
 
 const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
@@ -891,18 +1045,18 @@ function isNotAllowedError(error) {
 }
 
 const RecordEndConfirmation = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse } = videoReactBindings.useToggleCallRecording();
     const { close } = useMenuContext();
     const handleClick = createCallControlHandler(props, toggleCallRecording);
-    return (jsxRuntime.jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxRuntime.jsxs("div", { className: "str-video__end-recording__header", children: [jsxRuntime.jsx(Icon, { icon: "recording-on" }), jsxRuntime.jsx("h2", { className: "str-video__end-recording__heading", children: t('End recording') })] }), jsxRuntime.jsx("p", { className: "str-video__end-recording__description", children: t('Are you sure you want end the recording?') }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__actions", children: [jsxRuntime.jsx(CompositeButton, { variant: "secondary", onClick: close, children: t('Cancel') }), jsxRuntime.jsx(CompositeButton, { variant: "primary", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? jsxRuntime.jsx(LoadingIndicator, {}) : t('End recording') })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__end-recording__confirmation", children: [jsxRuntime.jsxs("div", { className: "str-video__end-recording__header", children: [jsxRuntime.jsx(Icon, { icon: "recording-on" }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__text", children: [jsxRuntime.jsx("h2", { className: "str-video__end-recording__heading", children: t('callControls.recordCallButton.endRecording.title', 'End recording') }), jsxRuntime.jsx("p", { className: "str-video__end-recording__description", children: t('callControls.recordCallButton.confirmEndRecording.description', 'Are you sure you want end the recording?') })] })] }), jsxRuntime.jsxs("div", { className: "str-video__end-recording__actions", children: [jsxRuntime.jsx(Button, { variant: "destructive", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (t('callControls.recordCallButton.endRecording.title', 'End recording')) }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", onClick: close, children: t('common.cancel.label', 'Cancel') })] })] }));
 };
 const ToggleEndRecordingMenuButton = react.forwardRef(function ToggleEndRecordingMenuButtonRender(props, ref) {
-    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: true, variant: "secondary", "data-testid": "recording-stop-button", children: jsxRuntime.jsx(Icon, { icon: "recording-off" }) }));
+    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: true, variant: "destructive", "data-testid": "recording-stop-button", children: jsxRuntime.jsx(Icon, { icon: "recording-off" }) }));
 });
 const RecordCallConfirmationButton = (props) => {
     const { caption } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } = videoReactBindings.useToggleCallRecording();
     const handleClick = createCallControlHandler(props, toggleCallRecording);
     if (isCallRecordingInProgress) {
@@ -912,12 +1066,13 @@ const RecordCallConfirmationButton = (props) => {
             ], children: jsxRuntime.jsx(MenuToggle, { ToggleButton: ToggleEndRecordingMenuButton, visualType: MenuVisualType.PORTAL, children: jsxRuntime.jsx(RecordEndConfirmation, { onError: props.onError }) }) }));
     }
     const title = isAwaitingResponse
-        ? t('Waiting for recording to start...')
-        : (caption ?? t('Record call'));
+        ? t('callControls.recordCallButton.waitingRecordingStart.title', 'Waiting for recording to start...')
+        : (caption ??
+            t('callControls.recordCallButton.recordCall.title', 'Record call'));
     return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [
             videoClient.OwnCapability.START_RECORD_CALL,
             videoClient.OwnCapability.STOP_RECORD_CALL,
-        ], children: jsxRuntime.jsx(WithTooltip, { title: title, children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: "secondary", "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (jsxRuntime.jsx(Icon, { icon: "recording-off" })) }) }) }));
+        ], children: jsxRuntime.jsx(WithTooltip, { title: title, children: jsxRuntime.jsx(CompositeButton, { active: isCallRecordingInProgress, caption: caption, variant: isCallRecordingInProgress ? 'destructive' : 'secondary', "data-testid": "recording-start-button", onClick: isAwaitingResponse ? undefined : handleClick, children: isAwaitingResponse ? (jsxRuntime.jsx(LoadingIndicator, {})) : (jsxRuntime.jsx(Icon, { icon: "recording-off" })) }) }) }));
 };
 
 const defaultEmojiReactionMap = {
@@ -977,8 +1132,8 @@ const ReactionsButton = ({ reactions = defaultReactions, }) => {
     return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx(MenuToggle, { placement: "top", ToggleButton: ToggleReactionsMenuButton, visualType: MenuVisualType.MENU, children: jsxRuntime.jsx(DefaultReactionsMenu, { reactions: reactions }) }) }));
 };
 const ToggleReactionsMenuButton = react.forwardRef(function ToggleReactionsMenuButtonRender({ menuShown }, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(WithTooltip, { title: t('Reactions'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, variant: "primary", children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }) }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(WithTooltip, { title: t('callControls.reactionsButton.reactions.title', 'Reactions'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, children: jsxRuntime.jsx(Icon, { icon: "reactions" }) }) }));
 });
 const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
     const call = videoReactBindings.useCall();
@@ -993,7 +1148,7 @@ const DefaultReactionsMenu = ({ reactions, layout = 'horizontal', }) => {
 };
 
 const ScreenShareButton = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { caption, optimisticUpdates } = props;
     const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } = videoReactBindings.useCallStateHooks();
     const isSomeoneScreenSharing = useHasOngoingScreenShare();
@@ -1015,7 +1170,10 @@ const ScreenShareButton = (props) => {
             await screenShare.toggle();
         }
     });
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsxRuntime.jsx(WithTooltip, { title: caption ?? t('Share screen'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: "primary", "data-testid": isSomeoneScreenSharing
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.screenShareButton.permissionGranted.text', 'You can now share your screen.'), messageAwaitingApproval: t('callControls.screenShareButton.awaitingApproval.text', 'Awaiting for an approval to share screen.'), messageRevoked: t('callControls.screenShareButton.permissionRevoked.text', 'You can no longer share your screen.'), children: jsxRuntime.jsx(WithTooltip, { title: caption ??
+                    t('callControls.screenShareButton.shareScreen.title', 'Share screen'), children: jsxRuntime.jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: isSomeoneScreenSharing || amIScreenSharing
+                        ? 'primary'
+                        : 'secondary', "data-testid": isSomeoneScreenSharing
                         ? 'screen-share-stop-button'
                         : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsxRuntime.jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
 };
@@ -1071,7 +1229,7 @@ const DeviceLevelIndicator = ({ deviceId }) => {
 const DeviceAudioPreviewItem = ({ device, onSelect, }) => {
     if (device.deviceId === 'default')
         return null;
-    return (jsxRuntime.jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsxRuntime.jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), device.label, jsxRuntime.jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
+    return (jsxRuntime.jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsxRuntime.jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), jsxRuntime.jsx("span", { className: "str-video__device-settings__option__label", children: device.label }), jsxRuntime.jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
 };
 
 const SelectContext = react.createContext({});
@@ -1081,12 +1239,12 @@ const Select = (props) => {
     const [activeIndex, setActiveIndex] = react.useState(null);
     const [selectedIndex, setSelectedIndex] = react.useState(defaultSelectedIndex);
     const [selectedLabel, setSelectedLabel] = react.useState(defaultSelectedLabel);
-    const { refs, context } = react$1.useFloating({
+    const { refs, context } = react$2.useFloating({
         placement: 'bottom-start',
         open: isOpen,
         onOpenChange: setIsOpen,
-        whileElementsMounted: react$1.autoUpdate,
-        middleware: [react$1.flip()],
+        whileElementsMounted: react$2.autoUpdate,
+        middleware: [react$2.flip()],
     });
     const elementsRef = react.useRef([]);
     const labelsRef = react.useRef([]);
@@ -1106,34 +1264,34 @@ const Select = (props) => {
             handleSelect(index);
         }
     };
-    const listNav = react$1.useListNavigation(context, {
+    const listNav = react$2.useListNavigation(context, {
         listRef: elementsRef,
         activeIndex,
         selectedIndex,
         onNavigate: setActiveIndex,
     });
-    const typeahead = react$1.useTypeahead(context, {
+    const typeahead = react$2.useTypeahead(context, {
         listRef: labelsRef,
         activeIndex,
         selectedIndex,
         onMatch: handleTypeaheadMatch,
     });
-    const click = react$1.useClick(context);
-    const dismiss = react$1.useDismiss(context);
-    const role = react$1.useRole(context, { role: 'listbox' });
-    const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([listNav, typeahead, click, dismiss, role]);
+    const click = react$2.useClick(context);
+    const dismiss = react$2.useDismiss(context);
+    const role = react$2.useRole(context, { role: 'listbox' });
+    const { getReferenceProps, getFloatingProps, getItemProps } = react$2.useInteractions([listNav, typeahead, click, dismiss, role]);
     const selectContext = react.useMemo(() => ({
         activeIndex,
         selectedIndex,
         getItemProps,
         handleSelect,
     }), [activeIndex, selectedIndex, getItemProps, handleSelect]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__dropdown", children: [jsxRuntime.jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxRuntime.jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), selectedLabel] }), jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsxRuntime.jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsxRuntime.jsx(react$1.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsxRuntime.jsx(react$1.FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__dropdown", children: [jsxRuntime.jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxRuntime.jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), jsxRuntime.jsx("span", { className: "str-video__dropdown-selected__text", children: selectedLabel })] }), jsxRuntime.jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsxRuntime.jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsxRuntime.jsx(react$2.FloatingFocusManager, { context: context, modal: false, children: jsxRuntime.jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsxRuntime.jsx(react$2.FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
 };
 const DropDownSelectOption = (props) => {
     const { selected, label, icon } = props;
     const { getItemProps, handleSelect } = react.useContext(SelectContext);
-    const { ref, index } = react$1.useListItem();
+    const { ref, index } = react$2.useListItem();
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__dropdown-option', {
             'str-video__dropdown-option--selected': selected,
         }), ref: ref, ...getItemProps({
@@ -1149,7 +1307,7 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
     return (jsxRuntime.jsxs("label", { className: clsx('str-video__device-settings__option', {
             'str-video__device-settings__option--selected': selected,
             'str-video__device-settings__option--disabled': disabled,
-        }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
+        }), htmlFor: id, children: [jsxRuntime.jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), jsxRuntime.jsx("span", { className: "str-video__device-settings__option__label", children: label })] }));
 };
 const DeviceSelectorList = (props) => {
     const { devices = [], selectedDeviceId, title, type, onChange, children, } = props;
@@ -1209,8 +1367,8 @@ const SpeakerTest = (props) => {
     const { selectedDevice } = useSpeakerState();
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
-    const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.43.2"}/assets/piano.mp3`, } = props;
+    const { t } = useI18n();
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"2.0.0-beta.1"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1245,7 +1403,9 @@ const SpeakerTest = (props) => {
         }
     }, [isPlaying, audioUrl]);
     const handleAudioEnded = react.useCallback(() => setIsPlaying(false), []);
-    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-test", children: [jsxRuntime.jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsxRuntime.jsx(CompositeButton, { className: "str-video__speaker-test__button", onClick: handleStartTest, type: "button", children: jsxRuntime.jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), isPlaying ? t('Stop test') : t('Test speaker')] }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-test", children: [jsxRuntime.jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsxRuntime.jsx(CompositeButton, { className: "str-video__speaker-test__button", appearance: "outline", size: "sm", onClick: handleStartTest, type: "button", children: jsxRuntime.jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), isPlaying
+                            ? t('deviceSettings.speakerTest.stopTest.label', 'Stop test')
+                            : t('deviceSettings.speakerTest.testSpeaker.label', 'Test speaker')] }) })] }));
 };
 
 const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
@@ -1253,7 +1413,7 @@ const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible =
     const { microphone, selectedDevice, devices } = useMicrophoneState();
     return (jsxRuntime.jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
             await microphone.select(deviceId);
-        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(AudioVolumeIndicator, {})] })) }));
+        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AudioVolumeIndicator, {}), jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" })] })) }));
 };
 const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
     const { useSpeakerState } = videoReactBindings.useCallStateHooks();
@@ -1262,7 +1422,7 @@ const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = tru
         return null;
     return (jsxRuntime.jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
             speaker.select(deviceId);
-        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
+        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && jsxRuntime.jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl }) }));
 };
 
 const DeviceVideoPreview = ({ deviceId }) => {
@@ -1310,34 +1470,37 @@ const DeviceSelectorVideo = ({ title, visualType, }) => {
 };
 
 react.forwardRef(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(IconButton, { active: menuShown, size: "sm", variant: "secondary", className: clsx('str-video__device-settings__button', {
             'str-video__device-settings__button--active': menuShown,
-        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
+        }), title: t('deviceSettings.toggleDeviceMenu.title', 'Toggle device menu'), icon: "device-settings", ref: ref }));
 });
 
 const ToggleAudioPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorAudioInput, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useMicrophoneState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { microphone, hasBrowserPermission, isPromptingPermission, optionsAwareIsMute, isTogglePending, } = useMicrophoneState({ optimisticUpdates });
     const localParticipant = useLocalParticipant();
     const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.AUDIO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => microphone.toggle());
-    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
-            ? t('Check your browser audio permissions')
-            : isSystemMuted
-                ? t('Microphone is paused by your system')
-                : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
+    return (jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+            ? t('common.waitingForPermission.title', 'Waiting for permission')
+            : !hasBrowserPermission
+                ? t('callControls.toggleAudioButton.checkBrowserAudioPermissions.title', 'Check your browser audio permissions')
+                : isSystemMuted
+                    ? t('callControls.toggleAudioButton.microphonePausedBySystem.title', 'Microphone is paused by your system')
+                    : (caption ??
+                        t('callControls.toggleAudioButton.mic.title', 'Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
                 ? 'preview-audio-unmute-button'
                 : 'preview-audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }));
 };
 const ToggleAudioPublishingButton = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.RequestPermissionRequestPermissionsEnum.SEND_AUDIO);
     const { useMicrophoneState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
@@ -1353,43 +1516,49 @@ const ToggleAudioPublishingButton = (props) => {
             await microphone.toggle();
         }
     });
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now speak.'), messageAwaitingApproval: t('Awaiting for an approval to speak.'), messageRevoked: t('You can no longer speak.'), children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
-                    ? t('You have no permission to share your audio')
-                    : !hasBrowserPermission
-                        ? t('Check your browser mic permissions')
-                        : isSystemMuted
-                            ? t('Microphone is paused by your system')
-                            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.toggleAudioButton.permissionGranted.text', 'You can now speak.'), messageAwaitingApproval: t('callControls.toggleAudioButton.awaitingApproval.text', 'Awaiting for an approval to speak.'), messageRevoked: t('callControls.toggleAudioButton.permissionRevoked.text', 'You can no longer speak.'), children: jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+                    ? t('common.waitingForPermission.title', 'Waiting for permission')
+                    : !hasPermission
+                        ? t('callControls.toggleAudioButton.noPermissionToShareAudio.title', 'You have no permission to share your audio')
+                        : !hasBrowserPermission
+                            ? t('callControls.toggleAudioButton.checkBrowserMicPermissions.title', 'Check your browser mic permissions')
+                            : isSystemMuted
+                                ? t('callControls.toggleAudioButton.microphonePausedBySystem.title', 'Microphone is paused by your system')
+                                : (caption ??
+                                    t('callControls.toggleAudioButton.mic.title', 'Mic')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         // disable button while the toggle action is pending when not using optimistic updates
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && hasPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }) }) }));
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || !hasPermission || isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }) }) }));
 };
 
 const ToggleVideoPreviewButton = (props) => {
     const { caption, Menu = DeviceSelectorVideo, menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCameraState, useLocalParticipant } = videoReactBindings.useCallStateHooks();
     const { camera, hasBrowserPermission, isPromptingPermission, isTogglePending, optionsAwareIsMute, } = useCameraState({ optimisticUpdates });
     const localParticipant = useLocalParticipant();
     const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(videoClient.SfuModels.TrackType.VIDEO);
     const [tooltipDisabled, setTooltipDisabled] = react.useState(false);
     const handleClick = createCallControlHandler(props, () => camera.toggle());
-    return (jsxRuntime.jsx(WithTooltip, { title: !hasBrowserPermission
-            ? t('Check your browser video permissions')
-            : isSystemMuted
-                ? t('Camera is paused by your system')
-                : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
+    return (jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+            ? t('common.waitingForPermission.title', 'Waiting for permission')
+            : !hasBrowserPermission
+                ? t('callControls.toggleVideoButton.checkBrowserVideoPermissions.title', 'Check your browser video permissions')
+                : isSystemMuted
+                    ? t('callControls.toggleVideoButton.cameraPausedBySystem.title', 'Camera is paused by your system')
+                    : (caption ??
+                        t('callControls.toggleVideoButton.video.title', 'Video')), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: optionsAwareIsMute ? 'destructive' : 'secondary', "data-testid": optionsAwareIsMute
                 ? 'preview-video-unmute-button'
                 : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }));
+            }, children: [jsxRuntime.jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }));
 };
 const ToggleVideoPublishingButton = (props) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { caption, Menu = jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), menuPlacement = 'top', onMenuToggle, optimisticUpdates, ...restCompositeButtonProps } = props;
     const { hasPermission, requestPermission, isAwaitingPermission } = useRequestPermission(videoClient.RequestPermissionRequestPermissionsEnum.SEND_VIDEO);
     const { useCameraState, useCallSettings, useLocalParticipant } = videoReactBindings.useCallStateHooks();
@@ -1407,36 +1576,37 @@ const ToggleVideoPublishingButton = (props) => {
             await camera.toggle();
         }
     });
-    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsxRuntime.jsx(WithTooltip, { title: !hasPermission
-                    ? t('You have no permission to share your video')
-                    : !hasBrowserPermission
-                        ? t('Check your browser video permissions')
-                        : !isPublishingVideoAllowed
-                            ? t('Video publishing is disabled by the system')
-                            : isSystemMuted
-                                ? t('Camera is paused by your system')
-                                : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+    return (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], children: jsxRuntime.jsx(PermissionNotification, { permission: videoClient.OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.toggleVideoButton.permissionGranted.text', 'You can now share your video.'), messageAwaitingApproval: t('callControls.toggleVideoButton.awaitingApproval.text', 'Awaiting for an approval to share your video.'), messageRevoked: t('callControls.toggleVideoButton.permissionRevoked.text', 'You can no longer share your video.'), children: jsxRuntime.jsx(WithTooltip, { title: isPromptingPermission
+                    ? t('common.waitingForPermission.title', 'Waiting for permission')
+                    : !hasPermission
+                        ? t('callControls.toggleVideoButton.noPermissionToShareVideo.title', 'You have no permission to share your video')
+                        : !hasBrowserPermission
+                            ? t('callControls.toggleVideoButton.checkBrowserVideoPermissions.title', 'Check your browser video permissions')
+                            : !isPublishingVideoAllowed
+                                ? t('callControls.toggleVideoButton.videoPublishingDisabled.title', 'Video publishing is disabled by the system')
+                                : isSystemMuted
+                                    ? t('callControls.toggleVideoButton.cameraPausedBySystem.title', 'Camera is paused by your system')
+                                    : caption ||
+                                        t('callControls.toggleVideoButton.video.title', 'Video'), tooltipDisabled: tooltipDisabled, children: jsxRuntime.jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         !isPublishingVideoAllowed ||
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                    }, children: [jsxRuntime.jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), isPromptingPermission ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission ||
                             !hasPermission ||
-                            !isPublishingVideoAllowed) && (jsxRuntime.jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsxRuntime.jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
-                            hasBrowserPermission &&
-                            hasPermission &&
-                            isPublishingVideoAllowed && (jsxRuntime.jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }));
+                            !isPublishingVideoAllowed ||
+                            isSystemMuted ? (jsxRuntime.jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }) }) }));
 };
 
 const EndCallMenu = (props) => {
     const { onLeave, onEnd } = props;
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__leave", type: "button", "data-testid": "leave-call-button", onClick: onLeave, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__leave-icon", icon: "logout" }), t('Leave call')] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.END_CALL], children: jsxRuntime.jsxs("button", { className: "str-video__button str-video__end-call__end", type: "button", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon str-video__end-call__end-icon", icon: "call-end" }), t('End call for all')] }) })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__end-call__confirmation", children: [jsxRuntime.jsxs(Button, { variant: "secondary", appearance: "outline", className: "str-video__end-call__leave", "data-testid": "leave-call-button", onClick: onLeave, children: [jsxRuntime.jsx(Icon, { icon: "logout" }), t('callControls.cancelCallButton.leaveCall.title', 'Leave call')] }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.END_CALL], children: jsxRuntime.jsxs(Button, { variant: "destructive", className: "str-video__end-call__end", "data-testid": "end-call-for-all-button", onClick: onEnd, children: [jsxRuntime.jsx(Icon, { icon: "call-end" }), t('callControls.cancelCallButton.endCallForAll.label', 'End call for all')] }) })] }));
 };
 const CancelCallToggleMenuButton = react.forwardRef(function CancelCallToggleMenuButtonRender({ menuShown }, ref) {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx(WithTooltip, { title: t('Leave call'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: menuShown ? 'active' : 'danger', "data-testid": "leave-call-button", ref: ref }) }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(WithTooltip, { title: t('callControls.cancelCallButton.leaveCall.title', 'Leave call'), tooltipDisabled: menuShown, children: jsxRuntime.jsx(IconButton, { icon: menuShown ? 'close' : 'call-end', variant: "destructive", "data-testid": "leave-call-button", ref: ref }) }));
 });
 const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     const call = videoReactBindings.useCall();
@@ -1473,20 +1643,6 @@ const CancelCallConfirmButton = ({ onClick, onLeave, }) => {
     return (jsxRuntime.jsx(MenuToggle, { placement: "top-start", ToggleButton: CancelCallToggleMenuButton, children: jsxRuntime.jsx(EndCallMenu, { onEnd: handleEndCall, onLeave: handleLeave }) }));
 };
 
-react.lazy(() => Promise.resolve().then(function () { return require('./embedded-CallStatsLatencyChart-CpL1M_s0.cjs.js'); }));
-var Status;
-(function (Status) {
-    Status["GOOD"] = "Good";
-    Status["OK"] = "Ok";
-    Status["BAD"] = "Bad";
-})(Status || (Status = {}));
-
-react.forwardRef(function ToggleMenuButtonRender(props, ref) {
-    const { t } = videoReactBindings.useI18n();
-    const { caption, menuShown } = props;
-    return (jsxRuntime.jsx(CompositeButton, { ref: ref, active: menuShown, caption: caption, title: caption || t('Statistics'), "data-testid": "stats-button", children: jsxRuntime.jsx(Icon, { icon: "stats" }) }));
-});
-
 const BlockedUserListing = ({ data }) => {
     if (!data.length)
         return null;
@@ -1498,34 +1654,43 @@ const BlockedUserListingItem = ({ userId }) => {
         if (userId)
             call?.unblockUser(userId);
     };
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsx(TextButton, { onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.BLOCK_USERS], children: jsxRuntime.jsx(Button, { appearance: "ghost", size: "xs", variant: "secondary", onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
 };
 
 const CallParticipantListHeader = ({ onClose, }) => {
     const { useParticipants, useAnonymousParticipantCount } = videoReactBindings.useCallStateHooks();
     const participants = useParticipants();
     const anonymousParticipantCount = useAnonymousParticipantCount();
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('common.participants.label', 'Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('participantList.anonymousCount.text', ', and ({{ anonymousCount }}) anonymous', { anonymousCount: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
 const CallParticipantListingItem = react.memo(function CallParticipantListingItemRender({ participant, DisplayName = DefaultDisplayName, }) {
     const isAudioOn = videoClient.hasAudio(participant);
     const isVideoOn = videoClient.hasVideo(participant);
     const isPinnedOn = videoClient.isPinned(participant);
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsxRuntime.jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsxRuntime.jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(MediaIndicator, { title: isAudioOn
+                            ? t('participantList.microphoneOn.title', 'Microphone on')
+                            : t('participantList.microphoneOff.title', 'Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsxRuntime.jsx(MediaIndicator, { title: isVideoOn
+                            ? t('participantList.cameraOn.title', 'Camera on')
+                            : t('participantList.cameraOff.title', 'Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsxRuntime.jsx(MediaIndicator, { title: t('participantList.pinned.title', 'Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
 });
 CallParticipantListingItem.displayName = 'CallParticipantListingItem';
 const MediaIndicator = (props) => (jsxRuntime.jsx(WithTooltip, { ...props }));
 const DefaultDisplayName = ({ participant }) => {
     const connectedUser = videoReactBindings.useConnectedUser();
-    const { t } = videoReactBindings.useI18n();
-    const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';
-    const nameOrId = participant.name || participant.userId || t('Unknown');
+    const { t } = useI18n();
+    const meFlag = participant.userId === connectedUser?.id
+        ? t('participantList.me.text', 'Me')
+        : '';
+    const nameOrId = participant.name ||
+        participant.userId ||
+        t('participantList.unknown.text', 'Unknown');
     let displayName;
     if (!participant.name) {
-        displayName = meFlag || nameOrId || t('Unknown');
+        displayName =
+            meFlag || nameOrId || t('participantList.unknown.text', 'Unknown');
     }
     else if (meFlag) {
         displayName = `${nameOrId} (${meFlag})`;
@@ -1536,14 +1701,14 @@ const DefaultDisplayName = ({ participant }) => {
     return (jsxRuntime.jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
 };
 const ToggleButton$2 = react.forwardRef(function ToggleButtonRender(props, ref) {
-    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__participant-listing-item__menu-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, icon: "ellipsis" }));
 });
 
 const CallParticipantListing = ({ data, }) => (jsxRuntime.jsx("div", { className: "str-video__participant-listing", children: data.map((participant) => (jsxRuntime.jsx(CallParticipantListingItem, { participant: participant }, participant.sessionId))) }));
 
 const EmptyParticipantSearchList = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str-video__participant-list--empty", children: t('No participants found') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__participant-list--empty", children: t('participantList.noParticipantsFound.text', 'No participants found') }));
 };
 
 const SearchInput = ({ exitSearch, isActive, ...rest }) => {
@@ -1563,7 +1728,7 @@ const SearchInput = ({ exitSearch, isActive, ...rest }) => {
     }, [inputElement]);
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__search-input__container', {
             'str-video__search-input__container--active': isActive,
-        }), children: [jsxRuntime.jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsxRuntime.jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsxRuntime.jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsxRuntime.jsx("span", { className: "str-video__search-input__icon" }))] }));
+        }), children: [jsxRuntime.jsx("span", { className: "str-video__search-input__icon" }), jsxRuntime.jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive && (jsxRuntime.jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsxRuntime.jsx("span", { className: "str-video__search-input__icon--active" }) }))] }));
 };
 
 function SearchResults({ EmptySearchResultComponent, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }) {
@@ -1622,11 +1787,11 @@ const CallParticipantsList = ({ onClose, activeUsersSearchFn, blockedUsersSearch
 };
 const CallParticipantListContentHeader = ({ userListType, setUserListType, }) => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const muteAll = react.useCallback(() => {
         call?.muteAllUsers('audio');
     }, [call]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(TextButton, { onClick: muteAll, children: t('Mute all') }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__participant-list__content-header", children: [jsxRuntime.jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsxRuntime.jsx(Button, { appearance: "ghost", size: "xs", variant: "secondary", onClick: muteAll, children: t('participantList.muteAll.label', 'Mute all') }) })) }), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$1, children: jsxRuntime.jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsxRuntime.jsx(GenericMenuButtonItem, { "aria-current": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
 };
 const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
     const { useParticipants } = videoReactBindings.useCallStateHooks();
@@ -1667,7 +1832,7 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
     return (jsxRuntime.jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
 };
 const ToggleButton$1 = react.forwardRef(function ToggleButtonRender(props, ref) {
-    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__participant-list__filter-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, icon: "filter" }));
 });
 
 const NoiseCancellationContext = react.createContext(null);
@@ -1748,19 +1913,6 @@ const NoiseCancellationProvider = (props) => {
     return (jsxRuntime.jsx(NoiseCancellationContext.Provider, { value: contextValue, children: children }));
 };
 
-({
-    [videoClient.CallingState.JOINING]: 'Joining',
-    [videoClient.CallingState.RINGING]: 'Ringing',
-    [videoClient.CallingState.MIGRATING]: 'Migrating',
-    [videoClient.CallingState.RECONNECTING]: 'Re-connecting',
-    [videoClient.CallingState.RECONNECTING_FAILED]: 'Failed',
-    [videoClient.CallingState.OFFLINE]: 'No internet connection',
-    [videoClient.CallingState.IDLE]: '',
-    [videoClient.CallingState.UNKNOWN]: '',
-    [videoClient.CallingState.JOINED]: 'Joined',
-    [videoClient.CallingState.LEFT]: 'Left call',
-});
-
 const byNameOrId = (a, b) => {
     if (a.name && b.name && a.name < b.name)
         return -1;
@@ -1810,7 +1962,7 @@ const PermissionRequests = () => {
     // don't render anything if there are no permission requests
     if (permissionRequests.length === 0)
         return null;
-    return (jsxRuntime.jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxRuntime.jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxRuntime.jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsxRuntime.jsx(Button, { type: "button", onClick: () => {
+    return (jsxRuntime.jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxRuntime.jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxRuntime.jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button", onClick: () => {
                             setExpanded((e) => !e);
                         }, children: expanded ? 'Hide requests' : 'Show requests' })] }), expanded && (jsxRuntime.jsx(PermissionRequestList, { ref: refs.setFloating, style: {
                     position: strategy,
@@ -1821,51 +1973,71 @@ const PermissionRequests = () => {
 };
 const PermissionRequestList = react.forwardRef(function PermissionRequestListRender(props, ref) {
     const { permissionRequests, handleUpdatePermission, ...rest } = props;
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     return (jsxRuntime.jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
             const { user, permissions } = request;
-            return (jsxRuntime.jsx(react.Fragment, { children: permissions.map((permission) => (jsxRuntime.jsxs("div", { className: "str-video__permission-request", children: [jsxRuntime.jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--allow", type: "button", onClick: handleUpdatePermission(request, 'grant'), children: t('Allow') }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'revoke'), children: t('Revoke') }), jsxRuntime.jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'dismiss'), children: t('Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
+            return (jsxRuntime.jsx(react.Fragment, { children: permissions.map((permission) => (jsxRuntime.jsxs("div", { className: "str-video__permission-request", children: [jsxRuntime.jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsxRuntime.jsx(Button, { variant: "primary", appearance: "solid", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--allow", onClick: handleUpdatePermission(request, 'grant'), children: t('common.allow.label', 'Allow') }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--reject", onClick: handleUpdatePermission(request, 'revoke'), children: t('common.revoke.label', 'Revoke') }), jsxRuntime.jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--reject", onClick: handleUpdatePermission(request, 'dismiss'), children: t('common.dismiss.label', 'Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
         }) }));
 });
-const Button = (props) => {
-    const { className, ...rest } = props;
-    return (jsxRuntime.jsx("button", { className: clsx('str-video__permission-request__button', className), ...rest }));
-};
 const messageForPermission = (userName, permission, t) => {
     switch (permission) {
         case videoClient.OwnCapability.SEND_AUDIO:
-            return t('{{ userName }} is requesting to speak', { userName });
+            return t('permissions.requestingToSpeak.text', '{{ userName }} is requesting to speak', { userName });
         case videoClient.OwnCapability.SEND_VIDEO:
-            return t('{{ userName }} is requesting to share their camera', {
+            return t('permissions.requestingCamera.text', '{{ userName }} is requesting to share their camera', {
                 userName,
             });
         case videoClient.OwnCapability.SCREENSHARE:
-            return t('{{ userName }} is requesting to present their screen', {
+            return t('permissions.requestingScreenShare.text', '{{ userName }} is requesting to present their screen', {
                 userName,
             });
         default:
-            return t('{{ userName }} is requesting permission: {{ permission }}', {
+            return t('permissions.requestingPermission.text', '{{ userName }} is requesting permission: {{ permission }}', {
                 userName,
                 permission,
             });
     }
 };
 
-const StreamTheme = ({ as: Component = 'div', className, children, ...props }) => {
-    return (jsxRuntime.jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
+const StreamTheme = ({ as: Component = 'div', className, children, theme = 'str-video__theme-dark', ...props }) => {
+    return (jsxRuntime.jsx(Component, { ...props, className: clsx('str-video', theme, className), children: children }));
 };
 
 const DefaultDisabledVideoPreview = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('common.videoDisabled.text', 'Video is disabled') }));
 };
 const DefaultNoCameraPreview = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('No camera found') }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('common.noCameraFound.text', 'No camera found') }));
 };
-const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, }) => {
+/**
+ * Reports whether the local user is currently speaking, before they join the
+ * call. `MicrophoneManager` only runs its detector while the microphone is
+ * muted (for `speakingWhileMuted`), so this mirrors `AudioVolumeIndicator` and
+ * runs one on the live microphone stream instead.
+ */
+const useLocalSpeaking = (enabled) => {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const [isSpeaking, setIsSpeaking] = react.useState(false);
+    react.useEffect(() => {
+        if (!enabled || !isEnabled || !mediaStream) {
+            setIsSpeaking(false);
+            return;
+        }
+        const dispose = videoClient.createSoundDetector(mediaStream, ({ isSoundDetected }) => setIsSpeaking(isSoundDetected), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        return () => {
+            setIsSpeaking(false);
+            dispose().catch(console.error);
+        };
+    }, [enabled, isEnabled, mediaStream]);
+    return isSpeaking;
+};
+const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, speakingIndicatorVisible = false, }) => {
     const { useCameraState } = videoReactBindings.useCallStateHooks();
     const { devices, status, isMute, mediaStream } = useCameraState();
+    const isSpeaking = useLocalSpeaking(speakingIndicatorVisible);
     let contents;
     if (isMute && devices?.length === 0) {
         contents = jsxRuntime.jsx(NoCameraPreview, {});
@@ -1880,21 +2052,43 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
     else {
         contents = jsxRuntime.jsx(DisabledVideoPreview, {});
     }
-    return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
+    return (jsxRuntime.jsx("div", { className: clsx('str-video__video-preview-container', className, {
+            'str-video__video-preview-container--speaking': isSpeaking,
+        }), children: contents }));
+};
+
+/** How many of the three bars are lit, per quality level. */
+const ACTIVE_BARS = {
+    [videoClient.SfuModels.ConnectionQuality.POOR]: 1,
+    [videoClient.SfuModels.ConnectionQuality.GOOD]: 2,
+    [videoClient.SfuModels.ConnectionQuality.EXCELLENT]: 3,
+};
+const BAR_COUNT = 3;
+/**
+ * Three ascending bars showing a participant's connection quality.
+ */
+const ConnectionQualityIndicator = ({ quality, title, className, }) => {
+    const activeBars = ACTIVE_BARS[quality];
+    if (!activeBars)
+        return null;
+    const level = videoClient.SfuModels.ConnectionQuality[quality].toLowerCase();
+    return (jsxRuntime.jsx("span", { className: clsx('str-video__connection-quality-indicator', `str-video__connection-quality-indicator--${level}`, className), title: title ?? level, children: Array.from({ length: BAR_COUNT }, (_, index) => (jsxRuntime.jsx("span", { className: clsx('str-video__connection-quality-indicator__bar', index < activeBars &&
+                'str-video__connection-quality-indicator__bar--active') }, index))) }));
 };
 
 const ToggleButton = react.forwardRef(function ToggleButtonRender(props, ref) {
-    return jsxRuntime.jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+    const { t } = useI18n();
+    return (jsxRuntime.jsx(IconButton, { className: "str-video__participant-view__menu-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, title: t('participantView.moreOptions.title', 'More options'), icon: "ellipsis" }));
 });
 const DefaultScreenShareOverlay = () => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const stopScreenShare = () => {
         call?.screenShare.disable().catch((err) => {
             console.error('Failed to stop screen sharing:', err);
         });
     };
-    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('You are presenting your screen') }), jsxRuntime.jsxs("button", { onClick: stopScreenShare, type: "button", className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), " ", t('Stop Screen Sharing')] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__screen-share-overlay", children: [jsxRuntime.jsx(Icon, { icon: "screen-share-off" }), jsxRuntime.jsx("span", { className: "str-video__screen-share-overlay__title", children: t('common.presentingYourScreen.text', 'You are presenting your screen') }), jsxRuntime.jsxs(Button, { variant: "destructive", onClick: stopScreenShare, className: "str-video__screen-share-overlay__button", children: [jsxRuntime.jsx(Icon, { icon: "close" }), ' ', t('participantView.stopScreenSharing.label', 'Stop Screen Sharing')] })] }));
 };
 /**
  * Rendered over a remote participant's tile when the browser's autoplay policy
@@ -1903,8 +2097,8 @@ const DefaultScreenShareOverlay = () => {
  */
 const DefaultAudioBlockedNotification = () => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("button", { type: "button", className: "str-video__audio-blocked-notification", onClick: call?.resumeAudio, "aria-live": "polite", children: jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__message", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__text", children: [jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__title", children: t('Audio is blocked by your system') }), jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__subtitle", children: t('Click or tap to play audio') })] })] }) }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("button", { type: "button", className: "str-video__audio-blocked-notification", onClick: call?.resumeAudio, "aria-live": "polite", children: jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__message", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), jsxRuntime.jsxs("span", { className: "str-video__audio-blocked-notification__text", children: [jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__title", children: t('participantView.audioBlocked.title', 'Audio is blocked by your system') }), jsxRuntime.jsx("span", { className: "str-video__audio-blocked-notification__subtitle", children: t('participantView.audioBlocked.description', 'Click or tap to play audio') })] })] }) }));
 };
 const DefaultParticipantViewUI = ({ indicatorsVisible = true, menuPlacement = 'bottom-start', showMenuButton = true, ParticipantActionsContextMenu: ParticipantActionsContextMenu$1 = ParticipantActionsContextMenu, AudioBlockedNotification = DefaultAudioBlockedNotification, }) => {
     const { participant, trackType } = useParticipantViewContext();
@@ -1925,17 +2119,17 @@ const ParticipantDetails = ({ indicatorsVisible = true, }) => {
     const { participant, trackType } = useParticipantViewContext();
     const { isLocalParticipant, connectionQuality, pin, sessionId, name, userId, } = participant;
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
-    const connectionQualityAsString = !!connectionQuality &&
-        videoClient.SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
+    const { t } = useI18n();
     const hasAudioTrack = videoClient.hasAudio(participant);
     const hasVideoTrack = videoClient.hasVideo(participant);
     const canUnpin = !!pin && pin.isLocalPin;
     const isTrackPaused = trackType !== 'none' ? videoClient.hasPausedTrack(participant, trackType) : false;
     const isAudioConnecting = videoReactBindings.useIsAudioConnecting(participant);
     const isVideoConnecting = videoReactBindings.useIsVideoConnecting(participant);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("div", { className: "str-video__participant-details__name", children: [name || userId, indicatorsVisible && isAudioConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && isVideoConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--video-connecting", tooltip: t('Video is connecting...') })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && pin && (jsxRuntime.jsx("span", { title: canUnpin ? t('Unpin') : t('Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { isVisible: isLocalParticipant &&
-                    connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('Poor connection quality'), children: connectionQualityAsString && (jsxRuntime.jsx("span", { className: clsx('str-video__participant-details__connection-quality', `str-video__participant-details__connection-quality--${connectionQualityAsString}`), title: connectionQualityAsString })) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "str-video__participant-details", children: jsxRuntime.jsxs("div", { className: "str-video__participant-details__name", children: [jsxRuntime.jsx("span", { className: "str-video__participant-details__name-text", children: name || userId }), indicatorsVisible && isAudioConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--audio-connecting", tooltip: t('participantView.audioConnecting.title', 'Audio is connecting...') })), indicatorsVisible && !hasAudioTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--audio-muted" })), indicatorsVisible && isVideoConnecting && (jsxRuntime.jsx(LoadingIndicator, { className: "str-video__participant-details__name--video-connecting", tooltip: t('participantView.videoConnecting.title', 'Video is connecting...') })), indicatorsVisible && !hasVideoTrack && (jsxRuntime.jsx("span", { className: "str-video__participant-details__name--video-muted" })), indicatorsVisible && isTrackPaused && (jsxRuntime.jsx("span", { title: t('participantView.videoPausedInsufficientBandwidth.title', 'Video paused due to insufficient bandwidth'), className: "str-video__participant-details__name--track-paused" })), indicatorsVisible && pin && (jsxRuntime.jsx("span", { title: canUnpin
+                                ? t('participantView.unpin.label', 'Unpin')
+                                : t('participantList.pinned.title', 'Pinned'), onClick: canUnpin ? () => call?.unpin(sessionId) : undefined, className: "str-video__participant-details__name--pinned" })), indicatorsVisible && jsxRuntime.jsx(SpeechIndicator, {})] }) }), indicatorsVisible && (jsxRuntime.jsx(Notification, { state: "error", isVisible: isLocalParticipant &&
+                    connectionQuality === videoClient.SfuModels.ConnectionQuality.POOR, message: t('participantView.connectionQuality.poor.text', 'Poor connection quality. Please check your internet connection.'), children: connectionQuality && (jsxRuntime.jsx(ConnectionQualityIndicator, { quality: connectionQuality })) }))] }));
 };
 const SpeechIndicator = () => {
     const { participant } = useParticipantViewContext();
@@ -1985,7 +2179,7 @@ const ParticipantView = react.memo(react.forwardRef(function ParticipantViewRend
             applyElementToRef(ref, element);
             setTrackedElement(element);
         }, className: clsx('str-video__participant-view', isDominantSpeaker &&
-            'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
+            'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
                         trackType !== 'videoTrack' ||
                         isParticipantVideoEnabled(participant.sessionId), mirror: mirror, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
 }));
@@ -1995,185 +2189,27 @@ ParticipantView.displayName = 'ParticipantView';
 const StreamCall = videoReactBindings.StreamCallProvider;
 StreamCall.displayName = 'StreamCall';
 
-var Joining = "Joining";
-var Mic = "Mic";
-var Ringing = "Ringing";
-var Speakers = "Speakers";
-var Video = "Video";
-var Live = "Live";
-var Reactions = "Reactions";
-var Statistics = "Statistics";
-var Invite = "Invite";
-var Join = "Join";
-var You = "You";
-var Me = "Me";
-var Unknown = "Unknown";
-var Default = "Default";
-var Refresh = "Refresh";
-var Allow = "Allow";
-var Revoke = "Revoke";
-var Dismiss = "Dismiss";
-var Pinned = "Pinned";
-var Unpin = "Unpin";
-var Pin = "Pin";
-var Block = "Block";
-var Kick = "Kick";
-var Enter = "Enter";
-var Leave = "Leave";
-var Participants = "Participants";
-var Anonymous = ", and ({{ count }}) anonymous";
-var Speaker = "Speaker";
-var Microphone = "Microphone";
-var Backstage = "Backstage";
-var en = {
-	Joining: Joining,
-	Mic: Mic,
-	"No internet connection": "No internet connection",
-	"Re-connecting": "Re-connecting",
-	Ringing: Ringing,
-	"Screen Share": "Screen Share",
-	"Select a Camera": "Select a Camera",
-	"Select a Mic": "Select a Mic",
-	"Select Speakers": "Select Speakers",
-	Speakers: Speakers,
-	Video: Video,
-	"You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
-	"Background filters performance is degraded. Consider disabling filters for better performance.": "Background filters performance is degraded. Consider disabling filters for better performance.",
-	Live: Live,
-	"Livestream starts soon": "Livestream starts soon",
-	"Livestream starts at {{ time }}": "Livestream starts at {{ time }}",
-	"{{ count }} participants joined early_one": "{{ count }} participant joined early",
-	"{{ count }} participants joined early_other": "{{ count }} participants joined early",
-	"You can now speak.": "You can now speak.",
-	"Awaiting for an approval to speak.": "Awaiting for an approval to speak.",
-	"You can no longer speak.": "You can no longer speak.",
-	"You can now share your video.": "You can now share your video.",
-	"Awaiting for an approval to share your video.": "Awaiting for an approval to share your video.",
-	"You can no longer share your video.": "You can no longer share your video.",
-	"Waiting for recording to stop...": "Waiting for recording to stop...",
-	"Waiting for recording to start...": "Waiting for recording to start...",
-	"Record call": "Record call",
-	Reactions: Reactions,
-	Statistics: Statistics,
-	"You can now share your screen.": "You can now share your screen.",
-	"Awaiting for an approval to share screen.": "Awaiting for an approval to share screen.",
-	"You can no longer share your screen.": "You can no longer share your screen.",
-	"Share screen": "Share screen",
-	"Incoming Call...": "Incoming Call...",
-	"Calling...": "Calling...",
-	"Mute All": "Mute All",
-	Invite: Invite,
-	Join: Join,
-	You: You,
-	Me: Me,
-	Unknown: Unknown,
-	"Toggle device menu": "Toggle device menu",
-	Default: Default,
-	"Call Recordings": "Call Recordings",
-	Refresh: Refresh,
-	"Check your browser video permissions": "Check your browser video permissions",
-	"Video publishing is disabled by the system": "Video publishing is disabled by the system",
-	"You have no permission to share your video": "You have no permission to share your video",
-	"You have no permission to share your audio": "You have no permission to share your audio",
-	"You are presenting your screen": "You are presenting your screen",
-	"Stop Screen Sharing": "Stop Screen Sharing",
-	"Audio is blocked by your system": "Audio is blocked by your system",
-	"Click or tap to play audio": "Click or tap to play audio",
-	Allow: Allow,
-	Revoke: Revoke,
-	Dismiss: Dismiss,
-	"Microphone on": "Microphone on",
-	"Microphone off": "Microphone off",
-	"Microphone is paused by your system": "Microphone is paused by your system",
-	"Camera on": "Camera on",
-	"Camera off": "Camera off",
-	"Camera is paused by your system": "Camera is paused by your system",
-	"No camera found": "No camera found",
-	"Video is disabled": "Video is disabled",
-	Pinned: Pinned,
-	Unpin: Unpin,
-	Pin: Pin,
-	"Pin for everyone": "Pin for everyone",
-	"Unpin for everyone": "Unpin for everyone",
-	Block: Block,
-	Kick: Kick,
-	"Turn off video": "Turn off video",
-	"Turn off screen share": "Turn off screen share",
-	"Mute audio": "Mute audio",
-	"Mute screen share audio": "Mute screen share audio",
-	"Allow audio": "Allow audio",
-	"Allow video": "Allow video",
-	"Allow screen sharing": "Allow screen sharing",
-	"Disable audio": "Disable audio",
-	"Disable video": "Disable video",
-	"Disable screen sharing": "Disable screen sharing",
-	Enter: Enter,
-	Leave: Leave,
-	"Leave call": "Leave call",
-	"End call for all": "End call for all",
-	"{{ direction }} fullscreen": "{{ direction }} fullscreen",
-	"{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
-	"Dominant Speaker": "Dominant Speaker",
-	"Poor connection quality": "Poor connection quality. Please check your internet connection.",
-	"Video paused due to insufficient bandwidth": "Video paused due to insufficient bandwidth",
-	"Audio is connecting...": "Audio is connecting...",
-	"Video is connecting...": "Video is connecting...",
-	Participants: Participants,
-	Anonymous: Anonymous,
-	"No participants found": "No participants found",
-	"Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
-	"{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
-	"{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",
-	"{{ userName }} is requesting to share their camera": "{{ userName }} is requesting to share their camera",
-	"{{ userName }} is requesting to present their screen": "{{ userName }} is requesting to present their screen",
-	"{{ userName }} is requesting permission: {{ permission }}": "{{ userName }} is requesting permission: {{ permission }}",
-	"Applying...": "Applying...",
-	"Disable blur": "Disable blur",
-	"Blur background": "Blur background",
-	"Migrating...": "Migrating...",
-	"Reconnecting...": "Reconnecting...",
-	"You are offline. Check your internet connection.": "You are offline. Check your internet connection.",
-	"Failed to restore connection. Please try again.": "Failed to restore connection. Please try again.",
-	"Failed to join. Please try again.": "Failed to join. Please try again.",
-	"Set up your call before joining": "Set up your call before joining",
-	"Please grant your browser permission to access your camera and microphone.": "Please grant your browser permission to access your camera and microphone.",
-	"Start call": "Start call",
-	Speaker: Speaker,
-	Microphone: Microphone,
-	Backstage: Backstage,
-	"Go Live": "Go Live",
-	"Stop Live": "End Live",
-	"Enter Backstage": "Enter Backstage",
-	"Prepare your livestream": "Prepare your livestream",
-	"Ready to go live": "Ready to go live",
-	"Stream is ready!": "Stream is ready!",
-	"Waiting for the livestream to start": "Waiting for the livestream to start",
-	"{{ count }} waiting": "{{ count }} waiting",
-	"Join Stream": "Join Stream",
-	"Join automatically when stream starts": "Join automatically when stream starts",
-	"Display name": "Display name",
-	"Permission needed": "Permission needed",
-	"Call ended": "Call ended",
-	"Rejoin call": "Rejoin call",
-	"Left by mistake?": "Left by mistake?",
-	"Help us improve": "Help us improve",
-	"Leave feedback": "Leave feedback",
-	"Failed to rejoin. Please try again.": "Failed to rejoin. Please try again.",
-	"Share your feedback": "Share your feedback",
-	"Tell us about your experience...": "Tell us about your experience...",
-	"Submit feedback": "Submit feedback",
-	"Feedback message": "Feedback message",
-	"How was your call quality?": "How was your call quality?",
-	"Rate {{ count }} star_one": "Rate {{ count }} star",
-	"Rate {{ count }} star_other": "Rate {{ count }} stars",
-	"Thank you!": "Thank you!",
-	"Your feedback helps improve call quality.": "Your feedback helps improve call quality."
-};
-
-const translations = { en };
-
-const StreamVideo = (props) => {
-    return (jsxRuntime.jsx(videoReactBindings.StreamVideoProvider, { translationsOverrides: translations, ...props }));
+/**
+ * StreamVideo is the root provider of the SDK: it provides the client to the component tree and
+ * mounts the SDK's translation context.
+ *
+ * The i18n runtime lives here rather than in `@stream-io/video-react-bindings` because the key
+ * catalog is generated from *this* package's `t()` call sites.
+ *
+ * This also fixes a real bug in the previous implementation, which rendered
+ * `<StreamVideoProvider translationsOverrides={translations} {...props} />`. Because `{...props}`
+ * came last, an integrator passing `translationsOverrides` *replaced* the SDK's bundled strings
+ * instead of merging with them, leaving every untranslated key rendering as a raw dotted path.
+ * `useStreami18n` layers integrator dictionaries over the SDK's own defaults, so a partial
+ * dictionary is now safe.
+ */
+const StreamVideo = ({ children, client, i18nInstance, language, translations, }) => {
+    const translationContext = useStreami18n({
+        i18nInstance,
+        language,
+        translations,
+    });
+    return (jsxRuntime.jsx(videoReactBindings.StreamVideoProvider, { client: client, children: jsxRuntime.jsx(TranslationProvider, { value: translationContext, children: children }) }));
 };
 StreamVideo.displayName = 'StreamVideo';
 
@@ -2364,14 +2400,14 @@ const ParticipantOverlay = (props) => {
     const toggleFullScreen = useToggleFullScreen();
     const { speaker, volume } = useSpeakerState();
     const isSpeakerMuted = volume === 0;
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
-                                ? videoClient.humanize(participantCount)
-                                : participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' }))] }), jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsxRuntime.jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+    const { t } = useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsxRuntime.jsxs("span", { className: "str-video__livestream-layout__live-badge", children: [jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge__dot", "aria-hidden": "true" }), t('common.live.label', 'Live')] })), showParticipantCount && (jsxRuntime.jsxs("span", { className: "str-video__livestream-layout__viewers-count", children: [jsxRuntime.jsx(Icon, { icon: "livestream-viewers" }), humanizeParticipantCount
+                                    ? videoClient.humanize(participantCount)
+                                    : participantCount] })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: jsxRuntime.jsx("span", { children: participant.name || participant.userId || '' }) }))] }), jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsxRuntime.jsx(IconButton, { icon: isSpeakerMuted ? 'speaker-off' : 'speaker', variant: "secondary", appearance: "solid", size: "sm", className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
                                 'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen &&
                             participantViewElement &&
                             typeof participantViewElement.requestFullscreen !==
-                                'undefined' && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
+                                'undefined' && (jsxRuntime.jsx(IconButton, { icon: "fullscreen", variant: "secondary", appearance: "solid", size: "sm", className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
@@ -2436,6 +2472,7 @@ const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPi
         }), children: group.map((participant) => (jsxRuntime.jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
 };
 const PaginatedGridLayout = (props) => {
+    const { t } = useI18n();
     const { groupSize = (props.groupSize || 0) > 0
         ? props.groupSize || GROUP_SIZE
         : GROUP_SIZE, excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, PictureInPicturePlaceholder, muted, } = props;
@@ -2467,7 +2504,7 @@ const PaginatedGridLayout = (props) => {
     const mirror = mirrorLocalParticipantVideo ? undefined : false;
     if (!call)
         return null;
-    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxRuntime.jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", icon: "caret-left", "aria-label": t('callLayout.paginatedGridLayout.previousPage.ariaLabel', 'Previous page'), disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsxRuntime.jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", disabled: page === pageCount - 1, icon: "caret-right", "aria-label": t('callLayout.paginatedGridLayout.nextPage.ariaLabel', 'Next page'), onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
 };
 PaginatedGridLayout.displayName = 'PaginatedGridLayout';
 
@@ -2572,6 +2609,7 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
 };
 SpeakerLayout.displayName = 'SpeakerLayout';
 const HorizontalScrollButtons = ({ scrollWrapper, }) => {
+    const { t } = useI18n();
     const scrollPosition = useHorizontalScrollPosition(scrollWrapper);
     const scrollStartClickHandler = () => {
         scrollWrapper?.scrollBy({ left: -150, behavior: 'smooth' });
@@ -2579,9 +2617,10 @@ const HorizontalScrollButtons = ({ scrollWrapper, }) => {
     const scrollEndClickHandler = () => {
         scrollWrapper?.scrollBy({ left: 150, behavior: 'smooth' });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (jsxRuntime.jsx(IconButton, { onClick: scrollStartClickHandler, icon: "caret-left", className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (jsxRuntime.jsx(IconButton, { onClick: scrollEndClickHandler, icon: "caret-right", className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'start' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollStartClickHandler, icon: "caret-left", "aria-label": t('callLayout.speakerLayout.scrollParticipantsLeft.ariaLabel', 'Scroll participants left'), className: "str-video__speaker-layout__participants-bar--button-left" })), scrollPosition && scrollPosition !== 'end' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollEndClickHandler, icon: "caret-right", "aria-label": t('callLayout.speakerLayout.scrollParticipantsRight.ariaLabel', 'Scroll participants right'), className: "str-video__speaker-layout__participants-bar--button-right" }))] }));
 };
 const VerticalScrollButtons = ({ scrollWrapper, }) => {
+    const { t } = useI18n();
     const scrollPosition = useVerticalScrollPosition(scrollWrapper);
     const scrollTopClickHandler = () => {
         scrollWrapper?.scrollBy({ top: -150, behavior: 'smooth' });
@@ -2589,7 +2628,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
     const scrollBottomClickHandler = () => {
         scrollWrapper?.scrollBy({ top: 150, behavior: 'smooth' });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsxRuntime.jsx(IconButton, { onClick: scrollTopClickHandler, icon: "caret-up", className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsxRuntime.jsx(IconButton, { onClick: scrollBottomClickHandler, icon: "caret-down", className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [scrollPosition && scrollPosition !== 'top' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollTopClickHandler, icon: "caret-up", "aria-label": t('callLayout.speakerLayout.scrollParticipantsUp.ariaLabel', 'Scroll participants up'), className: "str-video__speaker-layout__participants-bar--button-top" })), scrollPosition && scrollPosition !== 'bottom' && (jsxRuntime.jsx(IconButton, { size: "sm", variant: "secondary", onClick: scrollBottomClickHandler, icon: "caret-down", "aria-label": t('callLayout.speakerLayout.scrollParticipantsDown.ariaLabel', 'Scroll participants down'), className: "str-video__speaker-layout__participants-bar--button-bottom" }))] }));
 };
 
 const defaultConfiguration = {
@@ -2731,7 +2770,7 @@ const useInitializeCall = ({ client, callType, callId, handleError, }) => {
 };
 
 const BlurToggleButton = () => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCameraState } = videoReactBindings.useCallStateHooks();
     const { isMute } = useCameraState();
     const { isSupported, isReady, isLoading, backgroundFilter, applyBackgroundBlurFilter, disableBackgroundFilter, } = useBackgroundFilters();
@@ -2754,44 +2793,59 @@ const BlurToggleButton = () => {
     ]);
     const getLabel = () => {
         if (isLoading)
-            return t('Applying...');
-        return isBlurred ? t('Disable blur') : t('Blur background');
+            return t('callControls.blurToggleButton.applying.label', 'Applying...');
+        return isBlurred
+            ? t('callControls.blurToggleButton.disableBlur.label', 'Disable blur')
+            : t('callControls.blurToggleButton.blurBackground.label', 'Blur background');
     };
     if (!isSupported)
         return null;
-    return (jsxRuntime.jsxs("button", { type: "button", className: clsx('str-video__embedded-blur-toggle', isBlurred && 'str-video__embedded-blur-toggle--active'), disabled: isDisabled, "aria-pressed": isBlurred, onClick: handleClick, children: [jsxRuntime.jsx(Icon, { icon: "blur-icon" }), jsxRuntime.jsx("span", { children: getLabel() })] }));
+    return (jsxRuntime.jsxs(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__embedded-blur-toggle", disabled: isDisabled, active: isBlurred, onClick: handleClick, children: [jsxRuntime.jsx(Icon, { icon: "blur-icon" }), jsxRuntime.jsx("span", { children: getLabel() })] }));
 };
 const CameraMenuWithBlur = () => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorVideo, { visualType: "list" }), jsxRuntime.jsx("div", { className: "str-video__embedded-blur-toggle-container", children: jsxRuntime.jsx(BlurToggleButton, {}) })] }));
 };
 
+const CallDuration = ({ elapsed }) => {
+    if (!elapsed)
+        return null;
+    const secondsAt = elapsed.lastIndexOf(':') + 1;
+    const leading = elapsed.slice(0, secondsAt);
+    const seconds = elapsed.slice(secondsAt);
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-duration", children: [jsxRuntime.jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsxRuntime.jsxs("span", { className: "str-video__embedded-call-duration__time", children: [jsxRuntime.jsx("span", { className: "str-video__embedded-call-duration__time-leading", children: leading }), seconds] })] }));
+};
+
 const CallEndedScreen = ({ onJoin, onFeedback, }) => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Call ended') }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-actions", children: [onJoin && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Left by mistake?') }), jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), t('Rejoin call')] })] }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__ended-divider" })] })), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Help us improve') }), jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onFeedback, children: [jsxRuntime.jsx(Icon, { icon: "feedback" }), t('Leave feedback')] })] })] })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('callFeedback.callEndedScreen.callEnded.title', 'Call ended') }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-actions", children: [onJoin && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('callFeedback.callEndedScreen.leftByMistake.text', 'Left by mistake?') }), jsxRuntime.jsxs(Button, { variant: "secondary", appearance: "outline", className: "str-video__embedded-call-feedback__ended-button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), t('callFeedback.callEndedScreen.rejoinCall.label', 'Rejoin call')] })] }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__ended-divider" })] })), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('callFeedback.callEndedScreen.helpUsImprove.text', 'Help us improve') }), jsxRuntime.jsxs(Button, { variant: "secondary", appearance: "outline", className: "str-video__embedded-call-feedback__ended-button", onClick: onFeedback, children: [jsxRuntime.jsx(Icon, { icon: "feedback" }), t('callFeedback.callEndedScreen.leaveFeedback.label', 'Leave feedback')] })] })] })] }));
 };
 
 const StarRating = ({ value, onChange }) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const [hovered, setHovered] = react.useState(0);
     const displayValue = hovered || value;
     const getStarClasses = (star) => clsx('str-video__embedded-call-feedback__star', star <= displayValue && 'str-video__embedded-call-feedback__star--active');
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__rating-section", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__rating-label", children: t('How was your call quality?') }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__stars", onMouseLeave: () => setHovered(0), children: [1, 2, 3, 4, 5].map((star) => (jsxRuntime.jsx("button", { type: "button", className: getStarClasses(star), onClick: () => onChange(star), onMouseEnter: () => setHovered(star), "aria-label": t('Rate {{ count }} star', { count: star }), children: jsxRuntime.jsx(Icon, { icon: "star-filled" }) }, star))) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__rating-section", children: [jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__rating-label", children: t('callFeedback.starRating.howWasCallQuality.text', 'How was your call quality?') }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__stars", onMouseLeave: () => setHovered(0), children: [1, 2, 3, 4, 5].map((star) => (jsxRuntime.jsx("button", { type: "button", className: getStarClasses(star), onClick: () => onChange(star), onMouseEnter: () => setHovered(star), "aria-label": t('callFeedback.starRating.rateStars.ariaLabel', {
+                        count: star,
+                        defaultValue_one: 'Rate {{ count }} star',
+                        defaultValue_other: 'Rate {{ count }} stars',
+                    }), children: jsxRuntime.jsx(Icon, { icon: "star-filled" }) }, star))) })] }));
 };
 
 const RatingScreen = ({ onSubmit }) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const [rating, setRating] = react.useState(0);
     const [message, setMessage] = react.useState('');
     const handleSubmit = () => {
         if (rating > 0)
             onSubmit(rating, message);
     };
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Share your feedback') }), jsxRuntime.jsx(StarRating, { value: rating, onChange: setRating }), jsxRuntime.jsx("textarea", { "aria-label": t('Feedback message'), className: "str-video__embedded-call-feedback__textarea", placeholder: t('Tell us about your experience...'), value: message, onChange: (e) => setMessage(e.target.value), rows: 3 }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__actions", children: jsxRuntime.jsx("button", { type: "button", className: "str-video__button", onClick: handleSubmit, disabled: rating === 0, children: t('Submit feedback') }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('callFeedback.ratingScreen.shareYourFeedback.title', 'Share your feedback') }), jsxRuntime.jsx(StarRating, { value: rating, onChange: setRating }), jsxRuntime.jsx("textarea", { "aria-label": t('callFeedback.ratingScreen.feedbackMessage.ariaLabel', 'Feedback message'), className: "str-video__embedded-call-feedback__textarea", placeholder: t('callFeedback.ratingScreen.tellUsAboutExperience.placeholder', 'Tell us about your experience...'), value: message, onChange: (e) => setMessage(e.target.value), rows: 3 }), jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__actions", children: jsxRuntime.jsx(Button, { size: "sm", onClick: handleSubmit, disabled: rating === 0, children: t('callFeedback.ratingScreen.submitFeedback.label', 'Submit feedback') }) })] }));
 };
 
 const ThankYouScreen = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__checkmark", children: jsxRuntime.jsx(Icon, { icon: "checkmark" }) }), jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Thank you!') }), jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__subtitle", children: t('Your feedback helps improve call quality.') })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-call-feedback__checkmark", children: jsxRuntime.jsx(Icon, { icon: "checkmark" }) }), jsxRuntime.jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('callFeedback.thankYouScreen.thankYou.title', 'Thank you!') }), jsxRuntime.jsx("p", { className: "str-video__embedded-call-feedback__subtitle", children: t('callFeedback.thankYouScreen.feedbackHelpsImprove.text', 'Your feedback helps improve call quality.') })] }));
 };
 
 const CallFeedback = ({ onJoin }) => {
@@ -2820,7 +2874,7 @@ const CallFeedback = ({ onJoin }) => {
 };
 
 const ConnectionNotification = () => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCallCallingState } = videoReactBindings.useCallStateHooks();
     const callingState = useCallCallingState();
     const isOffline = callingState === videoClient.CallingState.OFFLINE;
@@ -2831,16 +2885,16 @@ const ConnectionNotification = () => {
     const showError = isOffline || hasFailedToRecover;
     const showLoading = isJoining || isReconnecting || isMigrating;
     if (showError) {
-        return (jsxRuntime.jsx("div", { className: "str-video__embedded-connection-notification", children: jsxRuntime.jsx(Notification, { isVisible: true, placement: "bottom", message: isOffline
-                    ? t('You are offline. Check your internet connection.')
-                    : t('Failed to restore connection. Please try again.') }) }));
+        return (jsxRuntime.jsx("div", { className: "str-video__embedded-connection-notification", children: jsxRuntime.jsx(Notification, { isVisible: true, state: "error", placement: "bottom", message: isOffline
+                    ? t('connectionNotification.offline.text', 'You are offline. Check your internet connection.')
+                    : t('connectionNotification.failedToRestore.text', 'Failed to restore connection. Please try again.') }) }));
     }
     if (showLoading) {
-        return (jsxRuntime.jsx("div", { className: "str-video__embedded-connection-notification", children: jsxRuntime.jsx(Notification, { isVisible: true, placement: "bottom", iconClassName: null, message: jsxRuntime.jsx(LoadingIndicator, { text: isMigrating
-                        ? t('Migrating...')
-                        : isJoining
-                            ? t('Joining')
-                            : t('Reconnecting...') }) }) }));
+        return (jsxRuntime.jsx("div", { className: "str-video__embedded-connection-notification", children: jsxRuntime.jsx(Notification, { isVisible: true, state: "loading", placement: "bottom", message: isMigrating
+                    ? t('connectionNotification.migrating.text', 'Migrating...')
+                    : isJoining
+                        ? t('connectionNotification.joining.text', 'Joining')
+                        : t('connectionNotification.reconnecting.text', 'Reconnecting...') }) }));
     }
     return null;
 };
@@ -2864,8 +2918,8 @@ const EmbeddedParticipantViewUI = () => {
 };
 
 const JoinError = ({ onJoin }) => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-join-error", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-join-error__title", children: t('Failed to join the call') }), jsxRuntime.jsx("p", { className: "str-video__embedded-join-error__message", children: t("We couldn't connect to the server. Please check your connection and try again.") }), jsxRuntime.jsxs("button", { type: "button", className: "str-video__button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), t('Try again')] })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-join-error", children: [jsxRuntime.jsx("h2", { className: "str-video__embedded-join-error__title", children: t('joinError.failedToJoin.title', 'Failed to join the call') }), jsxRuntime.jsx("p", { className: "str-video__embedded-join-error__message", children: t('joinError.couldNotConnect.text', "We couldn't connect to the server. Please check your connection and try again.") }), jsxRuntime.jsxs(Button, { size: "sm", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), t('common.tryAgain.label', 'Try again')] })] }));
 };
 
 const ToggleMenuButton$1 = react.forwardRef(function ToggleMenuButtonRender(props, ref) {
@@ -2875,8 +2929,8 @@ const ToggleMenuButton$1 = react.forwardRef(function ToggleMenuButtonRender(prop
                     ?.label || 'Default' }), jsxRuntime.jsx(Icon, { icon: props.menuShown ? 'chevron-down' : 'chevron-up' })] }));
 });
 const ToggleMicButton = () => {
-    const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton$1, visualType: MenuVisualType.MENU, children: [jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }));
+    const { t } = useI18n();
+    return (jsxRuntime.jsxs(MenuToggle, { placement: "top-start", ToggleButton: ToggleMenuButton$1, visualType: MenuVisualType.MENU, children: [jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') })] }));
 };
 
 const ToggleMenuButton = react.forwardRef(function ToggleMenuButtonRender(props, ref) {
@@ -2892,48 +2946,49 @@ const ToggleCameraButton = () => {
 const DisabledDeviceButton = ({ icon, label, }) => (jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__device-button str-video__embedded-lobby__device-button--disabled", children: [jsxRuntime.jsx(Icon, { className: "str-video__embedded-lobby__device-button-icon", icon: icon }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__device-button-label", children: label })] }));
 
 const DisabledVideoPreview = () => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const user = videoReactBindings.useConnectedUser();
     const { useCameraState, useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { hasBrowserPermission: hasCameraPermission } = useCameraState();
     const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
     const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
-    return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__no-permission", children: hasBrowserMediaPermission ? (jsxRuntime.jsx(Avatar, { imageSrc: user?.image, name: user?.name || user?.id })) : (t('Please grant your browser permission to access your camera and microphone.')) }));
+    return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__no-permission", children: hasBrowserMediaPermission ? (jsxRuntime.jsx(Avatar, { imageSrc: user?.image, name: user?.name || user?.id })) : (t('lobby.videoPreviewFallbacks.grantBrowserPermission.text', 'Please grant your browser permission to access your camera and microphone.')) }));
 };
 const NoCameraPreview = () => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCameraState, useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { hasBrowserPermission: hasCameraPermission } = useCameraState();
     const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
     const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
     if (!hasBrowserMediaPermission) {
-        return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__no-permission", children: t('Please grant your browser permission to access your camera and microphone.') }));
+        return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__no-permission", children: t('lobby.videoPreviewFallbacks.grantBrowserPermission.text', 'Please grant your browser permission to access your camera and microphone.') }));
     }
-    return (jsxRuntime.jsx("div", { className: "str-video__video-preview__no-camera-preview", children: t('No camera found') }));
+    return (jsxRuntime.jsx("div", { className: "str-video__video-preview__no-camera-preview", children: t('common.noCameraFound.text', 'No camera found') }));
 };
 
 const DeviceControls = ({ isVideoEnabled }) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
+    const user = videoReactBindings.useConnectedUser();
     const { useCameraState, useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { hasBrowserPermission: hasCameraPermission } = useCameraState();
     const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__video-preview", children: [jsxRuntime.jsx(VideoPreview, { DisabledVideoPreview: DisabledVideoPreview, NoCameraPreview: NoCameraPreview }), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__media-toggle", children: [jsxRuntime.jsx(ToggleAudioPreviewButton, { Menu: null }), isVideoEnabled && jsxRuntime.jsx(ToggleVideoPreviewButton, { Menu: null })] })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__media", children: [hasMicPermission ? (jsxRuntime.jsx(ToggleMicButton, {})) : (jsxRuntime.jsx(DisabledDeviceButton, { icon: "mic", label: t('Permission needed') })), isVideoEnabled &&
-                        (hasCameraPermission ? (jsxRuntime.jsx(ToggleCameraButton, {})) : (jsxRuntime.jsx(DisabledDeviceButton, { icon: "camera", label: t('Permission needed') })))] })] }));
+    const displayName = user?.name || user?.id;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__video-preview", children: [jsxRuntime.jsx(VideoPreview, { DisabledVideoPreview: DisabledVideoPreview, NoCameraPreview: NoCameraPreview }), displayName && (jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__participant-label", children: jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__participant-label-text", children: displayName }) })), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__media-toggle", children: [jsxRuntime.jsx(ToggleAudioPreviewButton, { Menu: null }), isVideoEnabled && jsxRuntime.jsx(ToggleVideoPreviewButton, { Menu: null })] })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__media", children: [hasMicPermission ? (jsxRuntime.jsx(ToggleMicButton, {})) : (jsxRuntime.jsx(DisabledDeviceButton, { icon: "mic", label: t('lobby.deviceControls.permissionNeeded.label', 'Permission needed') })), isVideoEnabled &&
+                        (hasCameraPermission ? (jsxRuntime.jsx(ToggleCameraButton, {})) : (jsxRuntime.jsx(DisabledDeviceButton, { icon: "camera", label: t('lobby.deviceControls.permissionNeeded.label', 'Permission needed') })))] })] }));
 };
 
 /**
  * Lobby component - Device setup screen before joining a call.
  */
 const Lobby = ({ onJoin, title, joinLabel }) => {
-    const { t } = videoReactBindings.useI18n();
-    const user = videoReactBindings.useConnectedUser();
+    const { t } = useI18n();
     const { useCameraState, useCallSettings } = videoReactBindings.useCallStateHooks();
     const { isMute } = useCameraState();
     const settings = useCallSettings();
     const isVideoEnabled = settings?.video.enabled ?? true;
-    const resolvedJoinLabel = joinLabel ?? t('Join');
-    const resolvedTitle = title ?? t('Set up your call before joining');
-    return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__content", children: [jsxRuntime.jsx("h1", { className: "str-video__embedded-lobby__heading", children: resolvedTitle }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-lobby__camera', isMute && 'str-video__embedded-lobby__camera--off'), children: jsxRuntime.jsx(DeviceControls, { isVideoEnabled: isVideoEnabled }) }), jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__display-name", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-lobby__display-name-label", children: t('Display name') }), jsxRuntime.jsx("span", { className: "str-video__embedded-lobby__display-name-value", children: user?.name }), jsxRuntime.jsxs("button", { className: "str-video__button", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { className: "str-video__button__icon", icon: "login" }), resolvedJoinLabel] })] })] }) }));
+    const resolvedJoinLabel = joinLabel ?? t('lobby.join.label', 'Join');
+    const resolvedTitle = title ?? t('lobby.setUpYourCall.title', 'Set up your call before joining');
+    return (jsxRuntime.jsx("div", { className: "str-video__embedded-lobby", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__content", children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-lobby__title", children: [jsxRuntime.jsx(Icon, { icon: "language", className: "str-video__embedded-lobby__title-icon" }), jsxRuntime.jsx("h1", { className: "str-video__embedded-lobby__heading", children: resolvedTitle })] }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-lobby__camera', isMute && 'str-video__embedded-lobby__camera--off'), children: jsxRuntime.jsx(DeviceControls, { isVideoEnabled: isVideoEnabled }) }), jsxRuntime.jsxs(Button, { className: "str-video__embedded-lobby__join", onClick: onJoin, children: [jsxRuntime.jsx(Icon, { icon: "login" }), resolvedJoinLabel] })] }) }));
 };
 
 const ViewersCount = ({ count }) => (jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration__viewers", children: [jsxRuntime.jsx(Icon, { icon: "eye", className: "str-video__embedded-livestream-duration__eye-icon" }), jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__count", children: videoClient.humanize(count) })] }));
@@ -3223,12 +3278,12 @@ const EmbeddedClientProvider = ({ apiKey, user, callId, callType, token, tokenPr
  * Renders the active call control bar
  */
 const CallControls = ({ showParticipants, onToggleParticipants, }) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCallSession } = videoReactBindings.useCallStateHooks();
     const session = useCallSession();
     const startedAt = session?.started_at;
     const { elapsed } = useCallDuration(startedAt);
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), startedAt && (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-duration str-video__embedded-desktop", children: [jsxRuntime.jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsxRuntime.jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] }))] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ScreenShareButton, {}) }) }), jsxRuntime.jsx(RecordCallConfirmationButton, {}), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: onToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), startedAt && (jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CallDuration, { elapsed: elapsed }) }))] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') }), jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ScreenShareButton, {}) }) }), jsxRuntime.jsx(RecordCallConfirmationButton, {}), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('common.participants.label', 'Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('common.participants.label', 'Participants'), "aria-pressed": showParticipants, onClick: onToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] }));
 };
 
 /**
@@ -3239,7 +3294,7 @@ const CallHeader = () => {
     const session = useCallSession();
     const startedAt = session?.started_at;
     const { elapsed } = useCallDuration(startedAt);
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [startedAt && (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-duration", children: [jsxRuntime.jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsxRuntime.jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] })), jsxRuntime.jsx(CancelCallConfirmButton, {})] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [startedAt && jsxRuntime.jsx(CallDuration, { elapsed: elapsed }), jsxRuntime.jsx(CancelCallConfirmButton, {})] }));
 };
 
 /**
@@ -3252,7 +3307,7 @@ const CallLayout = () => {
     const handleToggleParticipants = react.useCallback(() => {
         setShowParticipants((prev) => !prev);
     }, []);
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsx(PermissionRequests, {}), jsxRuntime.jsx("div", { className: "str-video__embedded-notifications", children: jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(SpeakingWhileMutedNotification, {}) }) }), jsxRuntime.jsx(CallHeader, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleToggleParticipants }) })) })] }), jsxRuntime.jsx(CallControls, { showParticipants: showParticipants, onToggleParticipants: handleToggleParticipants })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsx(PermissionRequests, {}), jsxRuntime.jsx("div", { className: "str-video__embedded-notifications", children: jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(SpeakingWhileMutedNotification, { placement: "top" }) }) }), jsxRuntime.jsx(CallHeader, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleToggleParticipants }) })) })] }), jsxRuntime.jsx(CallControls, { showParticipants: showParticipants, onToggleParticipants: handleToggleParticipants })] }));
 };
 
 /**
@@ -3302,7 +3357,7 @@ const CallStateRouter = () => {
 const EmbeddedCall = ({ children, ...props }) => (jsxRuntime.jsxs(EmbeddedClientProvider, { ...props, children: [jsxRuntime.jsx(CallStateRouter, {}), children] }));
 
 const HostLayout = ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useParticipantCount, useCallSession } = videoReactBindings.useCallStateHooks();
     const participantCount = useParticipantCount();
     const session = useCallSession();
@@ -3317,13 +3372,15 @@ const HostLayout = ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }) => {
     }, []);
     const livestreamStatus = (jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", "aria-live": "polite", "aria-atomic": "true", children: [jsxRuntime.jsx("span", { className: isLive
                     ? 'str-video__embedded-livestream-duration__live-badge'
-                    : 'str-video__embedded-livestream-duration__backstage-badge', children: isLive ? t('Live') : t('Backstage') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), isLive && elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }));
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsx(PermissionRequests, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [livestreamStatus, jsxRuntime.jsx(CancelCallConfirmButton, {})] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: livestreamStatus })] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ScreenShareButton, {}) }) }), jsxRuntime.jsx(RecordCallConfirmationButton, {}), isBackstageEnabled && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL], children: isLive ? (jsxRuntime.jsx(WithTooltip, { title: t('End Stream'), children: jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-end-stream-button", onClick: onStopLive, children: [jsxRuntime.jsx(Icon, { icon: "call-end" }), jsxRuntime.jsx("span", { children: t('Stop Live') })] }) })) : (jsxRuntime.jsx(WithTooltip, { title: t('Start Stream'), children: jsxRuntime.jsxs("button", { type: "button", className: "str-video__embedded-go-live-button", onClick: onGoLive, children: [jsxRuntime.jsx(Icon, { icon: "streaming" }), jsxRuntime.jsx("span", { children: t('Go Live') })] }) })) })), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] })] }));
+                    : 'str-video__embedded-livestream-duration__backstage-badge', children: isLive
+                    ? t('common.live.label', 'Live')
+                    : t('livestreamHost.backstage.text', 'Backstage') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), isLive && elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsx(PermissionRequests, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [livestreamStatus, jsxRuntime.jsx(CancelCallConfirmButton, {})] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: livestreamStatus })] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SCREENSHARE], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ScreenShareButton, {}) }) }), jsxRuntime.jsx(RecordCallConfirmationButton, {}), isBackstageEnabled && (jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.UPDATE_CALL], children: isLive ? (jsxRuntime.jsx(WithTooltip, { title: t('livestreamHost.endStream.title', 'End Stream'), children: jsxRuntime.jsxs(Button, { variant: "secondary", size: "sm", className: "str-video__embedded-end-stream-button", onClick: onStopLive, children: [jsxRuntime.jsx(Icon, { icon: "call-end" }), jsxRuntime.jsx("span", { children: t('livestreamHost.endLive.label', 'End Live') })] }) })) : (jsxRuntime.jsx(WithTooltip, { title: t('livestreamHost.startStream.title', 'Start Stream'), children: jsxRuntime.jsxs(Button, { variant: "primary", size: "sm", className: "str-video__embedded-go-live-button", onClick: onGoLive, children: [jsxRuntime.jsx(Icon, { icon: "streaming" }), jsxRuntime.jsx("span", { children: t('livestreamHost.goLive.label', 'Go Live') })] }) })) })), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('common.participants.label', 'Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('common.participants.label', 'Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] })] }));
 };
 
 const HostStateRouter = () => {
     const call = videoReactBindings.useCall();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { onError } = useEmbeddedConfiguration();
     const { useCallCallingState, useIsCallLive, useCallSettings, useLocalParticipant, } = videoReactBindings.useCallStateHooks();
     const callingState = useCallCallingState();
@@ -3372,8 +3429,10 @@ const HostStateRouter = () => {
     if (callingState === videoClient.CallingState.IDLE ||
         callingState === videoClient.CallingState.UNKNOWN) {
         return (jsxRuntime.jsx(Lobby, { onJoin: handleJoin, title: isBackstageEnabled
-                ? t('Prepare your livestream')
-                : t('Ready to go live'), joinLabel: isBackstageEnabled ? t('Enter Backstage') : t('Go Live') }));
+                ? t('livestreamHost.prepareLivestream.title', 'Prepare your livestream')
+                : t('livestreamHost.readyToGoLive.title', 'Ready to go live'), joinLabel: isBackstageEnabled
+                ? t('livestreamHost.enterBackstage.label', 'Enter Backstage')
+                : t('livestreamHost.goLive.label', 'Go Live') }));
     }
     if (callingState === videoClient.CallingState.JOINING && !localParticipant) {
         return jsxRuntime.jsx(LoadingIndicator, { className: "str-video__embedded-loading" });
@@ -3392,7 +3451,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return now >= earliestJoin && now < +startsAt;
 };
 const ViewerLobby = ({ onJoin }) => {
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useCallStartsAt, useCallEndedAt, useHasPermissions, useParticipantCount, useIsCallLive, useCallSettings, } = videoReactBindings.useCallStateHooks();
     const startsAt = useCallStartsAt();
     const endedAt = useCallEndedAt();
@@ -3433,9 +3492,9 @@ const ViewerLobby = ({ onJoin }) => {
         if (!startsAt)
             return null;
         if (startsAtPassed) {
-            return t('Livestream starts soon');
+            return t('livestream.backstage.startsSoon.text', 'Livestream starts soon');
         }
-        return t('Livestream starts at {{ time }}', {
+        return t('livestream.backstage.startsAt.text', 'Livestream starts at {{ time }}', {
             time: startsAt.toLocaleTimeString([], {
                 hour: '2-digit',
                 minute: '2-digit',
@@ -3443,13 +3502,13 @@ const ViewerLobby = ({ onJoin }) => {
         });
     };
     return (jsxRuntime.jsx("div", { className: "str-video__embedded-viewer-lobby", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-viewer-lobby__content", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-viewer-lobby__icon", children: jsxRuntime.jsx(Icon, { icon: "streaming" }) }), jsxRuntime.jsx("h2", { className: "str-video__embedded-viewer-lobby__title", children: canJoin
-                        ? t('Stream is ready!')
-                        : t('Waiting for the livestream to start') }), !canJoin && getStartsAtMessage() && (jsxRuntime.jsx("p", { className: "str-video__embedded-viewer-lobby__starts-at", children: getStartsAtMessage() })), participantCount > 0 && jsxRuntime.jsx(ViewersCount, { count: participantCount }), jsxRuntime.jsx("div", { className: "str-video__embedded-viewer-lobby__actions", children: canJoin ? (jsxRuntime.jsx("button", { className: "str-video__button", onClick: onJoin, children: t('Join Stream') })) : (jsxRuntime.jsxs("label", { className: "str-video__embedded-viewer-lobby__auto-join", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoJoin, onChange: (e) => setAutoJoin(e.target.checked) }), jsxRuntime.jsx("span", { children: t('Join automatically when stream starts') })] })) })] }) }));
+                        ? t('livestreamViewer.lobby.streamReady.title', 'Stream is ready!')
+                        : t('livestreamViewer.lobby.waitingForStart.title', 'Waiting for the livestream to start') }), !canJoin && getStartsAtMessage() && (jsxRuntime.jsx("p", { className: "str-video__embedded-viewer-lobby__starts-at", children: getStartsAtMessage() })), participantCount > 0 && jsxRuntime.jsx(ViewersCount, { count: participantCount }), jsxRuntime.jsx("div", { className: "str-video__embedded-viewer-lobby__actions", children: canJoin ? (jsxRuntime.jsx(Button, { size: "sm", onClick: onJoin, children: t('livestreamViewer.lobby.joinStream.label', 'Join Stream') })) : (jsxRuntime.jsxs("label", { className: "str-video__embedded-viewer-lobby__auto-join", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoJoin, onChange: (e) => setAutoJoin(e.target.checked) }), jsxRuntime.jsx("span", { children: t('livestreamViewer.lobby.joinAutomatically.text', 'Join automatically when stream starts') })] })) })] }) }));
 };
 
 const ViewerLayout = () => {
     useWakeLock();
-    const { t } = videoReactBindings.useI18n();
+    const { t } = useI18n();
     const { useParticipantCount, useCallSession } = videoReactBindings.useCallStateHooks();
     const participantCount = useParticipantCount();
     const session = useCallSession();
@@ -3462,7 +3521,7 @@ const ViewerLayout = () => {
     const handleToggleParticipants = react.useCallback(() => {
         setShowParticipants((prev) => !prev);
     }, []);
-    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('Live') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }), jsxRuntime.jsx(CancelCallConfirmButton, {})] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('Live') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }) })] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsxRuntime.jsx(ConnectionNotification, {}), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-header", children: [jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('common.live.label', 'Live') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }), jsxRuntime.jsx(CancelCallConfirmButton, {})] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-layout", children: [jsxRuntime.jsx("div", { className: "str-video__embedded-layout__stage", children: jsxRuntime.jsx(LayoutComponent, { ...layoutProps }) }), jsxRuntime.jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsxRuntime.jsx("div", { className: "str-video__embedded-participants", children: jsxRuntime.jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxRuntime.jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-mobile", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('common.live.label', 'Live') }), jsxRuntime.jsx(ViewersCount, { count: participantCount }), elapsed && (jsxRuntime.jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }) })] }), jsxRuntime.jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsxRuntime.jsx(MicCaptureErrorNotification, { children: jsxRuntime.jsx(ToggleAudioPublishingButton, { Menu: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') }), jsxRuntime.jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') })] }), menuPlacement: "top" }) }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsxRuntime.jsx(ToggleVideoPublishingButton, { Menu: jsxRuntime.jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsxRuntime.jsx(videoReactBindings.Restricted, { requiredGrants: [videoClient.OwnCapability.CREATE_REACTION], children: jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(ReactionsButton, {}) }) }), jsxRuntime.jsx("div", { className: "str-video__embedded-desktop", children: jsxRuntime.jsx(CancelCallConfirmButton, {}) })] }), jsxRuntime.jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsxRuntime.jsx(WithTooltip, { title: t('common.participants.label', 'Participants'), children: jsxRuntime.jsx(CompositeButton, { active: showParticipants, "aria-label": t('common.participants.label', 'Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsxRuntime.jsx(Icon, { icon: "participants" }) }) }) })] })] }));
 };
 
 const ViewerStateRouter = () => {