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

package/dist/esm/src/components/RingingCall/RingingCallControls.js

@@ -5,15 +5,19 @@ import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import 'react';
 import 'clsx';
 import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '../CallControls/RecordCallButton.js';
 import '../CallControls/ReactionsButton.js';
-import '../Button/CompositeButton.js';
+import '../Button/Button.js';
 import '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
+import '../Badge/Badge.js';
 import '../DeviceSettings/DeviceSettings.js';
 import '../DropdownSelect/DropdownSelect.js';
 import '../Menu/MenuToggle.js';
 import { CancelCallButton } from '../CallControls/CancelCallButton.js';
-import '../CallControls/CallStatsButton.js';
 
 const RingingCallControls = () => {
     const call = useCall();
@@ -22,7 +26,7 @@ const RingingCallControls = () => {
     if (!call)
         return null;
     const buttonsDisabled = callCallingState !== CallingState.RINGING;
-    return (jsx("div", { className: "str-video__pending-call-controls", children: call.isCreatedByMe ? (jsx(CancelCallButton, { disabled: buttonsDisabled })) : (jsxs(Fragment, { children: [jsx(AcceptCallButton, { disabled: buttonsDisabled }), jsx(CancelCallButton, { onClick: () => {
+    return (jsx("div", { className: "str-video__pending-call-controls", children: call.isCreatedByMe ? (jsx(CancelCallButton, { size: "sm", disabled: buttonsDisabled })) : (jsxs(Fragment, { children: [jsx(AcceptCallButton, { disabled: buttonsDisabled }), jsx(CancelCallButton, { size: "sm", onClick: () => {
                         const reason = call.isCreatedByMe ? 'cancel' : 'decline';
                         call.leave({ reject: true, reason }).catch((err) => {
                             console.error(`Failed to reject`, err);

package/dist/esm/src/components/RingingCall/RingingCallControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"RingingCallControls.js","sources":["../../../../../../../src/components/RingingCall/RingingCallControls.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { AcceptCallButton, CancelCallButton } from '../CallControls';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport const RingingCallControls = () => {\n  const call = useCall();\n  const { useCallCallingState } = useCallStateHooks();\n  const callCallingState = useCallCallingState();\n\n  if (!call) return null;\n\n  const buttonsDisabled = callCallingState !== CallingState.RINGING;\n  return (\n    <div className=\"str-video__pending-call-controls\">\n      {call.isCreatedByMe ? (\n        <CancelCallButton disabled={buttonsDisabled} />\n      ) : (\n        <>\n          <AcceptCallButton disabled={buttonsDisabled} />\n          <CancelCallButton\n            onClick={() => {\n              const reason = call.isCreatedByMe ? 'cancel' : 'decline';\n              call.leave({ reject: true, reason }).catch((err) => {\n                console.error(`Failed to reject`, err);\n              });\n            }}\n            disabled={buttonsDisabled}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;AAIO,MAAM,mBAAmB,GAAG,MAAK;AACtC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,MAAM,eAAe,GAAG,gBAAgB,KAAK,YAAY,CAAC,OAAO;AACjE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAC9C,IAAI,CAAC,aAAa,IACjBA,GAAA,CAAC,gBAAgB,EAAA,EAAC,QAAQ,EAAE,eAAe,EAAA,CAAI,KAE/CC,4BACED,GAAA,CAAC,gBAAgB,IAAC,QAAQ,EAAE,eAAe,EAAA,CAAI,EAC/CA,GAAA,CAAC,gBAAgB,IACf,OAAO,EAAE,MAAK;AACZ,wBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,SAAS;AACxD,wBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AACjD,4BAAA,OAAO,CAAC,KAAK,CAAC,kBAAkB,EAAE,GAAG,CAAC;AACxC,wBAAA,CAAC,CAAC;oBACJ,CAAC,EACD,QAAQ,EAAE,eAAe,GACzB,CAAA,EAAA,CACD,CACJ,EAAA,CACG;AAEV;;;;"}
+{"version":3,"file":"RingingCallControls.js","sources":["../../../../../../../src/components/RingingCall/RingingCallControls.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { AcceptCallButton, CancelCallButton } from '../CallControls';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport const RingingCallControls = () => {\n  const call = useCall();\n  const { useCallCallingState } = useCallStateHooks();\n  const callCallingState = useCallCallingState();\n\n  if (!call) return null;\n\n  const buttonsDisabled = callCallingState !== CallingState.RINGING;\n  return (\n    <div className=\"str-video__pending-call-controls\">\n      {call.isCreatedByMe ? (\n        <CancelCallButton size=\"sm\" disabled={buttonsDisabled} />\n      ) : (\n        <>\n          <AcceptCallButton disabled={buttonsDisabled} />\n          <CancelCallButton\n            size=\"sm\"\n            onClick={() => {\n              const reason = call.isCreatedByMe ? 'cancel' : 'decline';\n              call.leave({ reject: true, reason }).catch((err) => {\n                console.error(`Failed to reject`, err);\n              });\n            }}\n            disabled={buttonsDisabled}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,mBAAmB,GAAG,MAAK;AACtC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,MAAM,eAAe,GAAG,gBAAgB,KAAK,YAAY,CAAC,OAAO;IACjE,QACEA,aAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAC9C,IAAI,CAAC,aAAa,IACjBA,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAE,eAAe,EAAA,CAAI,KAEzDC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,IAAC,gBAAgB,EAAA,EAAC,QAAQ,EAAE,eAAe,EAAA,CAAI,EAC/CA,GAAA,CAAC,gBAAgB,IACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAK;AACZ,wBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,QAAQ,GAAG,SAAS;AACxD,wBAAA,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AACjD,4BAAA,OAAO,CAAC,KAAK,CAAC,kBAAkB,EAAE,GAAG,CAAC;AACxC,wBAAA,CAAC,CAAC;oBACJ,CAAC,EACD,QAAQ,EAAE,eAAe,GACzB,CAAA,EAAA,CACD,CACJ,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/components/Search/SearchInput.js

@@ -20,7 +20,7 @@ const SearchInput = ({ exitSearch, isActive, ...rest }) => {
     }, [inputElement]);
     return (jsxs("div", { className: clsx('str-video__search-input__container', {
             'str-video__search-input__container--active': isActive,
-        }), children: [jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsx("span", { className: "str-video__search-input__icon" }))] }));
+        }), children: [jsx("span", { className: "str-video__search-input__icon" }), jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive && (jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsx("span", { className: "str-video__search-input__icon--active" }) }))] }));
 };
 
 export { SearchInput };

package/dist/esm/src/components/Search/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useState } from 'react';\nimport { useEffectEvent } from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\n\ntype SearchInputProps = ComponentProps<'input'> & {\n  /**\n   * Resets the search to its initial state.\n   * The function is called when Esc key or inputs clear button are pressed\n   */\n  exitSearch: () => void;\n  /**\n   * Flag to signal, whether search input elements should be rendered as active\n   */\n  isActive: boolean;\n};\nexport const SearchInput = ({\n  exitSearch,\n  isActive,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(\n    null,\n  );\n  const onExitSearch = useEffectEvent(exitSearch);\n  useEffect(() => {\n    if (!inputElement) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key.toLowerCase() === 'escape') onExitSearch();\n    };\n\n    inputElement.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      inputElement.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [inputElement]);\n\n  return (\n    <div\n      className={clsx('str-video__search-input__container', {\n        'str-video__search-input__container--active': isActive,\n      })}\n    >\n      <input placeholder=\"Search\" {...rest} ref={setInputElement} />\n      {isActive ? (\n        <button\n          className=\"str-video__search-input__clear-btn\"\n          onClick={exitSearch}\n        >\n          <span className=\"str-video__search-input__icon--active\" />\n        </button>\n      ) : (\n        <span className=\"str-video__search-input__icon\" />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAeO,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACU,KAAI;IACrB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;AACD,IAAA,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC;IAC/C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;AAEnB,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ;AAAE,gBAAA,YAAY,EAAE;AACtD,QAAA,CAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAEvD,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,QAAQ;SACvD,CAAC,EAAA,QAAA,EAAA,CAEFC,eAAO,WAAW,EAAC,QAAQ,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,eAAe,EAAA,CAAI,EAC7D,QAAQ,IACPA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,oCAAoC,EAC9C,OAAO,EAAE,UAAU,YAEnBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uCAAuC,EAAA,CAAG,GACnD,KAETA,cAAM,SAAS,EAAC,+BAA+B,EAAA,CAAG,CACnD,CAAA,EAAA,CACG;AAEV;;;;"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useState } from 'react';\nimport { useEffectEvent } from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\n\ntype SearchInputProps = ComponentProps<'input'> & {\n  /**\n   * Resets the search to its initial state.\n   * The function is called when Esc key or inputs clear button are pressed\n   */\n  exitSearch: () => void;\n  /**\n   * Flag to signal, whether search input elements should be rendered as active\n   */\n  isActive: boolean;\n};\nexport const SearchInput = ({\n  exitSearch,\n  isActive,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(\n    null,\n  );\n  const onExitSearch = useEffectEvent(exitSearch);\n  useEffect(() => {\n    if (!inputElement) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key.toLowerCase() === 'escape') onExitSearch();\n    };\n\n    inputElement.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      inputElement.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [inputElement]);\n\n  return (\n    <div\n      className={clsx('str-video__search-input__container', {\n        'str-video__search-input__container--active': isActive,\n      })}\n    >\n      <span className=\"str-video__search-input__icon\" />\n      <input placeholder=\"Search\" {...rest} ref={setInputElement} />\n      {isActive && (\n        <button\n          className=\"str-video__search-input__clear-btn\"\n          onClick={exitSearch}\n        >\n          <span className=\"str-video__search-input__icon--active\" />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAeO,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACU,KAAI;IACrB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;AACD,IAAA,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC;IAC/C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;AAEnB,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ;AAAE,gBAAA,YAAY,EAAE;AACtD,QAAA,CAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAEvD,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,QAAQ;AACvD,SAAA,CAAC,aAEFC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+BAA+B,EAAA,CAAG,EAClDA,GAAA,CAAA,OAAA,EAAA,EAAO,WAAW,EAAC,QAAQ,KAAK,IAAI,EAAE,GAAG,EAAE,eAAe,GAAI,EAC7D,QAAQ,KACPA,gBACE,SAAS,EAAC,oCAAoC,EAC9C,OAAO,EAAE,UAAU,EAAA,QAAA,EAEnBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uCAAuC,EAAA,CAAG,GACnD,CACV,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/components/StreamTheme/StreamTheme.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const StreamTheme = ({ as: Component = 'div', className, children, ...props }) => {
-    return (jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
+const StreamTheme = ({ as: Component = 'div', className, children, theme = 'str-video__theme-dark', ...props }) => {
+    return (jsx(Component, { ...props, className: clsx('str-video', theme, className), children: children }));
 };
 
 export { StreamTheme };

package/dist/esm/src/components/StreamTheme/StreamTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"StreamTheme.js","sources":["../../../../../../../src/components/StreamTheme/StreamTheme.tsx"],"sourcesContent":["import { ElementType, HTMLProps, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nexport type StreamThemeProps = HTMLProps<HTMLElement> & {\n  as?: ElementType;\n};\n\nexport const StreamTheme = ({\n  as: Component = 'div',\n  className,\n  children,\n  ...props\n}: PropsWithChildren<StreamThemeProps>) => {\n  return (\n    <Component {...props} className={clsx('str-video', className)}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;MAOa,WAAW,GAAG,CAAC,EAC1B,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAC4B,KAAI;AACxC,IAAA,QACEA,GAAA,CAAC,SAAS,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,YAC1D,QAAQ,EAAA,CACC;AAEhB;;;;"}
+{"version":3,"file":"StreamTheme.js","sources":["../../../../../../../src/components/StreamTheme/StreamTheme.tsx"],"sourcesContent":["import { ElementType, HTMLProps, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nexport type StreamThemeProps = HTMLProps<HTMLElement> & {\n  as?: ElementType;\n  theme?: string;\n};\n\nexport const StreamTheme = ({\n  as: Component = 'div',\n  className,\n  children,\n  theme = 'str-video__theme-dark',\n  ...props\n}: PropsWithChildren<StreamThemeProps>) => {\n  return (\n    <Component {...props} className={clsx('str-video', theme, className)}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;AAQO,MAAM,WAAW,GAAG,CAAC,EAC1B,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,uBAAuB,EAC/B,GAAG,KAAK,EAC4B,KAAI;IACxC,QACEA,IAAC,SAAS,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,YACjE,QAAQ,EAAA,CACC;AAEhB;;;;"}

package/dist/esm/src/components/Tooltip/Tooltip.js

@@ -1,28 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
 import clsx from 'clsx';
 import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset.js';
 import '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '@stream-io/video-client';
-import { arrow, FloatingArrow } from '@floating-ui/react';
 
 const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
-    const arrowRef = useRef(null);
-    const { refs, x, y, strategy, context } = useFloatingUIPreset({
+    const { refs, x, y, strategy } = useFloatingUIPreset({
         placement: tooltipPlacement,
         strategy: 'absolute',
-        middleware: [arrow({ element: arrowRef })],
     });
     useEffect(() => {
         refs.setReference(referenceElement);
     }, [referenceElement, refs]);
     if (!visible)
         return null;
-    return (jsxs("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+    return (jsx("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
             position: strategy,
             top: y ?? 0,
             left: x ?? 0,
-        }, children: [jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "var(--str-video__tooltip--background-color)" }), children] }));
+        }, children: children }));
 };
 
 export { Tooltip };

package/dist/esm/src/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useFloatingUIPreset } from '../../hooks';\nimport { FloatingArrow, Placement, arrow } from '@floating-ui/react';\n\nexport type TooltipProps<T extends HTMLElement> = PropsWithChildren<{\n  /** Reference element to which the tooltip should attach to */\n  referenceElement: T | null;\n  /** Additional class applied to the tooltip root element */\n  tooltipClassName?: string;\n  /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */\n  offset?: [number, number];\n  /** Popper's placement property defining default position of the tooltip, default 'top' */\n  tooltipPlacement?: Placement;\n  /** Tells component whether to render its contents */\n  visible?: boolean;\n}>;\n\nexport const Tooltip = <T extends HTMLElement>({\n  children,\n  referenceElement,\n  tooltipClassName,\n  tooltipPlacement = 'top',\n  visible = false,\n}: TooltipProps<T>) => {\n  const arrowRef = useRef<SVGSVGElement>(null);\n  const { refs, x, y, strategy, context } = useFloatingUIPreset({\n    placement: tooltipPlacement,\n    strategy: 'absolute',\n    middleware: [arrow({ element: arrowRef })],\n  });\n\n  useEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      className={clsx('str-video__tooltip', tooltipClassName)}\n      ref={refs.setFloating}\n      style={{\n        position: strategy,\n        top: y ?? 0,\n        left: x ?? 0,\n      }}\n    >\n      <FloatingArrow\n        ref={arrowRef}\n        context={context}\n        fill=\"var(--str-video__tooltip--background-color)\"\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;MAkBa,OAAO,GAAG,CAAwB,EAC7C,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GAAG,KAAK,EACxB,OAAO,GAAG,KAAK,GACC,KAAI;AACpB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC;AAC5C,IAAA,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,mBAAmB,CAAC;AAC5D,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC3C,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC;AACrC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAE5B,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;AAEzB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC,IAAI,CAAC;YACX,IAAI,EAAE,CAAC,IAAI,CAAC;AACb,SAAA,EAAA,QAAA,EAAA,CAEDC,IAAC,aAAa,EAAA,EACZ,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,6CAA6C,EAAA,CAClD,EACD,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { useFloatingUIPreset } from '../../hooks';\nimport { Placement } from '@floating-ui/react';\n\nexport type TooltipProps<T extends HTMLElement> = PropsWithChildren<{\n  /** Reference element to which the tooltip should attach to */\n  referenceElement: T | null;\n  /** Additional class applied to the tooltip root element */\n  tooltipClassName?: string;\n  /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */\n  offset?: [number, number];\n  /** Popper's placement property defining default position of the tooltip, default 'top' */\n  tooltipPlacement?: Placement;\n  /** Tells component whether to render its contents */\n  visible?: boolean;\n}>;\n\nexport const Tooltip = <T extends HTMLElement>({\n  children,\n  referenceElement,\n  tooltipClassName,\n  tooltipPlacement = 'top',\n  visible = false,\n}: TooltipProps<T>) => {\n  const { refs, x, y, strategy } = useFloatingUIPreset({\n    placement: tooltipPlacement,\n    strategy: 'absolute',\n  });\n\n  useEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      className={clsx('str-video__tooltip', tooltipClassName)}\n      ref={refs.setFloating}\n      style={{\n        position: strategy,\n        top: y ?? 0,\n        left: x ?? 0,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;MAkBa,OAAO,GAAG,CAAwB,EAC7C,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GAAG,KAAK,EACxB,OAAO,GAAG,KAAK,GACC,KAAI;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC;AACnD,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC;AACrC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAE5B,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;AAEzB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC,IAAI,CAAC;YACX,IAAI,EAAE,CAAC,IAAI,CAAC;SACb,EAAA,QAAA,EAEA,QAAQ,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/components/VideoPreview/VideoPreview.js

@@ -1,21 +1,50 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import clsx from 'clsx';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { createSoundDetector } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { BaseVideo } from '../../core/components/Video/BaseVideo.js';
 import '../../core/components/Video/Video.js';
 import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
 
 const DefaultDisabledVideoPreview = () => {
     const { t } = useI18n();
-    return (jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
+    return (jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('common.videoDisabled.text', 'Video is disabled') }));
 };
 const DefaultNoCameraPreview = () => {
     const { t } = useI18n();
-    return (jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('No camera found') }));
+    return (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 } = useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const [isSpeaking, setIsSpeaking] = useState(false);
+    useEffect(() => {
+        if (!enabled || !isEnabled || !mediaStream) {
+            setIsSpeaking(false);
+            return;
+        }
+        const dispose = 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 } = useCallStateHooks();
     const { devices, status, isMute, mediaStream } = useCameraState();
+    const isSpeaking = useLocalSpeaking(speakingIndicatorVisible);
     let contents;
     if (isMute && devices?.length === 0) {
         contents = jsx(NoCameraPreview, {});
@@ -30,7 +59,9 @@ const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = Default
     else {
         contents = jsx(DisabledVideoPreview, {});
     }
-    return (jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
+    return (jsx("div", { className: clsx('str-video__video-preview-container', className, {
+            'str-video__video-preview-container--speaking': isSpeaking,
+        }), children: contents }));
 };
 
 export { VideoPreview };

package/dist/esm/src/components/VideoPreview/VideoPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPreview.js","sources":["../../../../../../../src/components/VideoPreview/VideoPreview.tsx"],"sourcesContent":["import { ComponentType } from 'react';\nimport clsx from 'clsx';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { BaseVideo } from '../../core/components/Video';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst DefaultDisabledVideoPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__disabled-video-preview\">\n      {t('Video is disabled')}\n    </div>\n  );\n};\n\nconst DefaultNoCameraPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__no-camera-preview\">\n      {t('No camera found')}\n    </div>\n  );\n};\n\nexport type VideoPreviewProps = {\n  /**\n   * Additional CSS class name to apply to the root element.\n   */\n  className?: string;\n  /**\n   * Enforces mirroring of the video on the X axis. Defaults to true.\n   */\n  mirror?: boolean;\n  /**\n   * Component rendered when user turns off the video.\n   */\n  DisabledVideoPreview?: ComponentType;\n  /**\n   * Component rendered when no camera devices are available.\n   */\n  NoCameraPreview?: ComponentType;\n  /**\n   * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).\n   */\n  StartingCameraPreview?: ComponentType;\n};\n\nexport const VideoPreview = ({\n  className,\n  mirror = true,\n  DisabledVideoPreview = DefaultDisabledVideoPreview,\n  NoCameraPreview = DefaultNoCameraPreview,\n  StartingCameraPreview = LoadingIndicator,\n}: VideoPreviewProps) => {\n  const { useCameraState } = useCallStateHooks();\n  const { devices, status, isMute, mediaStream } = useCameraState();\n\n  let contents;\n  if (isMute && devices?.length === 0) {\n    contents = <NoCameraPreview />;\n  } else if (status === 'enabled') {\n    const loading = !mediaStream;\n    contents = (\n      <>\n        {mediaStream && (\n          <BaseVideo\n            stream={mediaStream}\n            className={clsx('str-video__video-preview', {\n              'str-video__video-preview--mirror': mirror,\n              'str-video__video-preview--loading': loading,\n            })}\n          />\n        )}\n        {loading && <StartingCameraPreview />}\n      </>\n    );\n  } else {\n    contents = <DisabledVideoPreview />;\n  }\n\n  return (\n    <div className={clsx('str-video__video-preview-container', className)}>\n      {contents}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAMA,MAAM,2BAA2B,GAAG,MAAK;AACvC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC9D,CAAC,CAAC,mBAAmB,CAAC,EAAA,CACnB;AAEV,CAAC;AAED,MAAM,sBAAsB,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACzD,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACjB;AAEV,CAAC;AAyBM,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,MAAM,GAAG,IAAI,EACb,oBAAoB,GAAG,2BAA2B,EAClD,eAAe,GAAG,sBAAsB,EACxC,qBAAqB,GAAG,gBAAgB,GACtB,KAAI;AACtB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE;AAEjE,IAAA,IAAI,QAAQ;IACZ,IAAI,MAAM,IAAI,OAAO,EAAE,MAAM,KAAK,CAAC,EAAE;AACnC,QAAA,QAAQ,GAAGA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG;IAChC;AAAO,SAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AAC/B,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW;AAC5B,QAAA,QAAQ,IACNC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,WAAW,KACVF,IAAC,SAAS,EAAA,EACR,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,IAAI,CAAC,0BAA0B,EAAE;AAC1C,wBAAA,kCAAkC,EAAE,MAAM;AAC1C,wBAAA,mCAAmC,EAAE,OAAO;qBAC7C,CAAC,EAAA,CACF,CACH,EACA,OAAO,IAAIA,IAAC,qBAAqB,EAAA,EAAA,CAAG,CAAA,EAAA,CACpC,CACJ;IACH;SAAO;AACL,QAAA,QAAQ,GAAGA,GAAA,CAAC,oBAAoB,EAAA,EAAA,CAAG;IACrC;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE,SAAS,CAAC,EAAA,QAAA,EAClE,QAAQ,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"VideoPreview.js","sources":["../../../../../../../src/components/VideoPreview/VideoPreview.tsx"],"sourcesContent":["import { ComponentType, useEffect, useState } from 'react';\nimport clsx from 'clsx';\nimport { createSoundDetector } from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport { BaseVideo } from '../../core/components/Video';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst DefaultDisabledVideoPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__disabled-video-preview\">\n      {t('common.videoDisabled.text', 'Video is disabled')}\n    </div>\n  );\n};\n\nconst DefaultNoCameraPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__no-camera-preview\">\n      {t('common.noCameraFound.text', 'No camera found')}\n    </div>\n  );\n};\n\n/**\n * Reports whether the local user is currently speaking, before they join the\n * call. `MicrophoneManager` only runs its detector while the microphone is\n * muted (for `speakingWhileMuted`), so this mirrors `AudioVolumeIndicator` and\n * runs one on the live microphone stream instead.\n */\nconst useLocalSpeaking = (enabled: boolean) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { isEnabled, mediaStream } = useMicrophoneState();\n  const [isSpeaking, setIsSpeaking] = useState(false);\n\n  useEffect(() => {\n    if (!enabled || !isEnabled || !mediaStream) {\n      setIsSpeaking(false);\n      return;\n    }\n\n    const dispose = createSoundDetector(\n      mediaStream,\n      ({ isSoundDetected }) => setIsSpeaking(isSoundDetected),\n      { detectionFrequencyInMs: 80, destroyStreamOnStop: false },\n    );\n\n    return () => {\n      setIsSpeaking(false);\n      dispose().catch(console.error);\n    };\n  }, [enabled, isEnabled, mediaStream]);\n\n  return isSpeaking;\n};\n\nexport type VideoPreviewProps = {\n  /**\n   * Additional CSS class name to apply to the root element.\n   */\n  className?: string;\n  /**\n   * Enforces mirroring of the video on the X axis. Defaults to true.\n   */\n  mirror?: boolean;\n  /**\n   * Component rendered when user turns off the video.\n   */\n  DisabledVideoPreview?: ComponentType;\n  /**\n   * Component rendered when no camera devices are available.\n   */\n  NoCameraPreview?: ComponentType;\n  /**\n   * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).\n   */\n  StartingCameraPreview?: ComponentType;\n  /**\n   * Outlines the preview while the local user is speaking. Requires the\n   * microphone to be enabled. Defaults to false.\n   */\n  speakingIndicatorVisible?: boolean;\n};\n\nexport const VideoPreview = ({\n  className,\n  mirror = true,\n  DisabledVideoPreview = DefaultDisabledVideoPreview,\n  NoCameraPreview = DefaultNoCameraPreview,\n  StartingCameraPreview = LoadingIndicator,\n  speakingIndicatorVisible = false,\n}: VideoPreviewProps) => {\n  const { useCameraState } = useCallStateHooks();\n  const { devices, status, isMute, mediaStream } = useCameraState();\n  const isSpeaking = useLocalSpeaking(speakingIndicatorVisible);\n\n  let contents;\n  if (isMute && devices?.length === 0) {\n    contents = <NoCameraPreview />;\n  } else if (status === 'enabled') {\n    const loading = !mediaStream;\n    contents = (\n      <>\n        {mediaStream && (\n          <BaseVideo\n            stream={mediaStream}\n            className={clsx('str-video__video-preview', {\n              'str-video__video-preview--mirror': mirror,\n              'str-video__video-preview--loading': loading,\n            })}\n          />\n        )}\n        {loading && <StartingCameraPreview />}\n      </>\n    );\n  } else {\n    contents = <DisabledVideoPreview />;\n  }\n\n  return (\n    <div\n      className={clsx('str-video__video-preview-container', className, {\n        'str-video__video-preview-container--speaking': isSpeaking,\n      })}\n    >\n      {contents}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/src/core/components/CallLayout/LivestreamLayout.js

@@ -1,14 +1,37 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useState, useEffect, useCallback } from 'react';
-import { useCallStateHooks, useI18n, useCall } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, useCall } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { humanize, hasScreenShare } from '@stream-io/video-client';
 import { useParticipantViewContext } from '../ParticipantView/ParticipantViewContext.js';
 import '../../../components/Menu/MenuToggle.js';
+import { Icon } from '../../../components/Icon/Icon.js';
 import { ParticipantView } from '../ParticipantView/ParticipantView.js';
 import '../ParticipantView/DefaultParticipantViewUI.js';
+import '../ParticipantView/ConnectionQualityIndicator.js';
 import '../Audio/Audio.js';
 import { ParticipantsAudio } from '../Audio/ParticipantsAudio.js';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
+import { IconButton } from '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../Video/Video.js';
+import '../Video/BaseVideo.js';
+import '../Video/DefaultVideoPlaceholder.js';
 import { useRawRemoteParticipants, usePaginatedLayoutSortPreset } from './hooks.js';
 
 const LivestreamLayout = (props) => {
@@ -55,17 +78,20 @@ const BackstageLayout = (props) => {
         return () => clearInterval(interval);
     }, [startsAt, startsAtPassed]);
     return (jsx("div", { className: "str-video__livestream-layout__wrapper", children: jsxs("div", { className: "str-video__livestream-layout__backstage", children: [startsAt && (jsx("span", { className: "str-video__livestream-layout__starts-at", children: startsAtPassed
-                        ? t('Livestream starts soon')
-                        : t('Livestream starts at {{ time }}', {
+                        ? t('livestream.backstage.startsSoon.text', 'Livestream starts soon')
+                        : t('livestream.backstage.startsAt.text', 'Livestream starts at {{ time }}', {
                             time: startsAt.toLocaleTimeString([], {
                                 hour: '2-digit',
                                 minute: '2-digit',
                             }),
-                        }) })), showEarlyParticipantCount && (jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
-                        count: humanizeParticipantCount
-                            ? humanize(participantCount)
-                            : participantCount,
-                    }) }))] }) }));
+                        }) })), showEarlyParticipantCount && (jsxs("span", { className: "str-video__livestream-layout__early-viewers-count", children: [jsx(Icon, { icon: "livestream-viewers" }), t('livestream.backstage.participantsJoinedEarly.text', {
+                            count: participantCount,
+                            formattedCount: humanizeParticipantCount
+                                ? humanize(participantCount)
+                                : participantCount,
+                            defaultValue_one: '{{ formattedCount }} participant joined early',
+                            defaultValue_other: '{{ formattedCount }} participants joined early',
+                        })] }))] }) }));
 };
 BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props) => {
@@ -84,13 +110,13 @@ const ParticipantOverlay = (props) => {
     const { speaker, volume } = useSpeakerState();
     const isSpeakerMuted = volume === 0;
     const { t } = useI18n();
-    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
-                                ? humanize(participantCount)
-                                : participantCount })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' }))] }), jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsxs("span", { className: "str-video__livestream-layout__live-badge", children: [jsx("span", { className: "str-video__livestream-layout__live-badge__dot", "aria-hidden": "true" }), t('common.live.label', 'Live')] })), showParticipantCount && (jsxs("span", { className: "str-video__livestream-layout__viewers-count", children: [jsx(Icon, { icon: "livestream-viewers" }), humanizeParticipantCount
+                                    ? humanize(participantCount)
+                                    : participantCount] })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: jsx("span", { children: participant.name || participant.userId || '' }) }))] }), jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (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' && (jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
+                                'undefined' && (jsx(IconButton, { icon: "fullscreen", variant: "secondary", appearance: "solid", size: "sm", className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = useCallStateHooks();

package/dist/esm/src/core/components/CallLayout/LivestreamLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"LivestreamLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/LivestreamLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ComponentType,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  useCall,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { hasScreenShare, humanize } from '@stream-io/video-client';\nimport { ParticipantView, useParticipantViewContext } from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport {\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type LivestreamLayoutProps = {\n  /**\n   * Whether the livestream is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n\n  /**\n   * Whether to show the participant count. Defaults to `true`.\n   */\n  showParticipantCount?: boolean;\n\n  /**\n   * Whether to humanize the participant count. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 100_000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n\n  /**\n   * Whether to enable fullscreen mode. Defaults to `true`.\n   */\n  enableFullScreen?: boolean;\n\n  /**\n   * Whether to show the duration of the call. Defaults to `true`.\n   */\n  showDuration?: boolean;\n\n  /**\n   * Whether to show the live badge. Defaults to `true`.\n   */\n  showLiveBadge?: boolean;\n\n  /**\n   * Whether to show the speaker name. Defaults to `false`.\n   */\n  showSpeakerName?: boolean;\n\n  /**\n   * Whether to show the mute button. Defaults to `true`.\n   */\n  showMuteButton?: boolean;\n\n  /**\n   * When set to `false` disables mirroring of the local participant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * The props to pass to the floating participant element.\n   */\n  floatingParticipantProps?: LivestreamLayoutProps & {\n    /**\n     * The position of the floating participant element. Defaults to `top-right`.\n     */\n    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n  };\n\n  /**\n   * Override the default participant view overlay UI.\n   */\n  ParticipantViewUI?: ComponentType | ReactElement | null;\n};\n\nexport const LivestreamLayout = (props: LivestreamLayoutProps) => {\n  const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();\n  const call = useCall();\n  const participants = useParticipants();\n  const [currentSpeaker] = participants;\n  const remoteParticipants = useRawRemoteParticipants();\n  const hasOngoingScreenShare = useHasOngoingScreenShare();\n  const presenter = hasOngoingScreenShare\n    ? participants.find(hasScreenShare)\n    : undefined;\n\n  usePaginatedLayoutSortPreset(call);\n\n  const { floatingParticipantProps, muted, ParticipantViewUI } = props;\n  const overlay = ParticipantViewUI ?? (\n    <ParticipantOverlay\n      showParticipantCount={props.showParticipantCount}\n      showDuration={props.showDuration}\n      showLiveBadge={props.showLiveBadge}\n      showMuteButton={props.showMuteButton}\n      showSpeakerName={props.showSpeakerName}\n      enableFullScreen={props.enableFullScreen}\n    />\n  );\n\n  const floatingParticipantOverlay =\n    hasOngoingScreenShare &&\n    (ParticipantViewUI ?? (\n      <ParticipantOverlay\n        // these elements aren't needed for the video feed\n        showParticipantCount={\n          floatingParticipantProps?.showParticipantCount ?? false\n        }\n        showDuration={floatingParticipantProps?.showDuration ?? false}\n        showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}\n        showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}\n        enableFullScreen={floatingParticipantProps?.enableFullScreen ?? true}\n      />\n    ));\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      {hasOngoingScreenShare && presenter && (\n        <ParticipantView\n          className=\"str-video__livestream-layout__screen-share\"\n          participant={presenter}\n          ParticipantViewUI={overlay}\n          trackType=\"screenShareTrack\"\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n      {currentSpeaker && (\n        <ParticipantView\n          className={clsx(\n            hasOngoingScreenShare &&\n              clsx(\n                'str-video__livestream-layout__floating-participant',\n                `str-video__livestream-layout__floating-participant--${\n                  floatingParticipantProps?.position ?? 'top-right'\n                }`,\n              ),\n          )}\n          participant={currentSpeaker}\n          ParticipantViewUI={floatingParticipantOverlay || overlay}\n          mirror={\n            props.mirrorLocalParticipantVideo !== false ? undefined : false\n          }\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n    </div>\n  );\n};\n\nLivestreamLayout.displayName = 'LivestreamLayout';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type BackstageLayoutProps = {\n  /**\n   * Whether to show the counter for participants that joined before\n   * the livestream went live. Defaults to `true`.\n   */\n  showEarlyParticipantCount?: boolean;\n\n  /**\n   * Show the participant count in a humanized format. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 10_0000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n};\n\nexport const BackstageLayout = (props: BackstageLayoutProps) => {\n  const { showEarlyParticipantCount = true, humanizeParticipantCount = true } =\n    props;\n  const { useParticipantCount, useCallStartsAt } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const startsAt = useCallStartsAt();\n  const { t } = useI18n();\n  const [startsAtPassed, setStartsAtPassed] = useState(\n    () => !!startsAt && startsAt.getTime() < Date.now(),\n  );\n\n  useEffect(() => {\n    if (!startsAt || startsAtPassed) return;\n\n    const check = () => {\n      if (startsAt.getTime() < Date.now()) {\n        setStartsAtPassed(true);\n      }\n    };\n\n    const interval = setInterval(check, 1000);\n    return () => clearInterval(interval);\n  }, [startsAt, startsAtPassed]);\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      <div className=\"str-video__livestream-layout__backstage\">\n        {startsAt && (\n          <span className=\"str-video__livestream-layout__starts-at\">\n            {startsAtPassed\n              ? t('Livestream starts soon')\n              : t('Livestream starts at {{ time }}', {\n                  time: startsAt.toLocaleTimeString([], {\n                    hour: '2-digit',\n                    minute: '2-digit',\n                  }),\n                })}\n          </span>\n        )}\n        {showEarlyParticipantCount && (\n          <span className=\"str-video__livestream-layout__early-viewers-count\">\n            {t('{{ count }} participants joined early', {\n              count: humanizeParticipantCount\n                ? humanize(participantCount)\n                : participantCount,\n            })}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nBackstageLayout.displayName = 'BackstageLayout';\n\nconst ParticipantOverlay = (props: {\n  enableFullScreen?: boolean;\n  showParticipantCount?: boolean;\n  humanizeParticipantCount?: boolean;\n  showDuration?: boolean;\n  showLiveBadge?: boolean;\n  showSpeakerName?: boolean;\n  showMuteButton?: boolean;\n}) => {\n  const {\n    enableFullScreen = true,\n    showParticipantCount = true,\n    humanizeParticipantCount = true,\n    showDuration = true,\n    showLiveBadge = true,\n    showMuteButton = true,\n    showSpeakerName = false,\n  } = props;\n  const overlayBarVisible =\n    enableFullScreen ||\n    showParticipantCount ||\n    showDuration ||\n    showLiveBadge ||\n    showMuteButton ||\n    showSpeakerName;\n  const { participant, participantViewElement } = useParticipantViewContext();\n  const { useParticipantCount, useSpeakerState } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const duration = useUpdateCallDuration();\n  const toggleFullScreen = useToggleFullScreen();\n  const { speaker, volume } = useSpeakerState();\n  const isSpeakerMuted = volume === 0;\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__livestream-layout__overlay\">\n      {overlayBarVisible && (\n        <div className=\"str-video__livestream-layout__overlay__bar\">\n          <div className=\"str-video__livestream-layout__overlay__bar-left\">\n            {showLiveBadge && (\n              <span className=\"str-video__livestream-layout__live-badge\">\n                {t('Live')}\n              </span>\n            )}\n            {showParticipantCount && (\n              <span className=\"str-video__livestream-layout__viewers-count\">\n                {humanizeParticipantCount\n                  ? humanize(participantCount)\n                  : participantCount}\n              </span>\n            )}\n            {showSpeakerName && (\n              <span\n                className=\"str-video__livestream-layout__speaker-name\"\n                title={participant.name || participant.userId || ''}\n              >\n                {participant.name || participant.userId || ''}\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-center\">\n            {showDuration && (\n              <span className=\"str-video__livestream-layout__duration\">\n                {formatDuration(duration)}\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-right\">\n            {showMuteButton && (\n              <span\n                className={clsx(\n                  'str-video__livestream-layout__mute-button',\n                  isSpeakerMuted &&\n                    'str-video__livestream-layout__mute-button--muted',\n                )}\n                onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}\n              />\n            )}\n            {enableFullScreen &&\n              participantViewElement &&\n              typeof participantViewElement.requestFullscreen !==\n                'undefined' && (\n                <span\n                  className=\"str-video__livestream-layout__go-fullscreen\"\n                  onClick={toggleFullScreen}\n                />\n              )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst useUpdateCallDuration = () => {\n  const { useIsCallLive, useCallSession } = useCallStateHooks();\n  const isCallLive = useIsCallLive();\n  const session = useCallSession();\n  const [duration, setDuration] = useState(() => {\n    if (!session || !session.live_started_at) return 0;\n    const liveStartTime = new Date(session.live_started_at);\n    const now = new Date();\n    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);\n  });\n\n  useEffect(() => {\n    if (!isCallLive) return;\n    const interval = setInterval(() => {\n      setDuration((d) => d + 1);\n    }, 1000);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [isCallLive]);\n\n  return duration;\n};\n\nconst useToggleFullScreen = () => {\n  const { participantViewElement } = useParticipantViewContext();\n  const [isFullscreen, setIsFullscreen] = useState(\n    !!document.fullscreenElement,\n  );\n  useEffect(() => {\n    const handler = () => setIsFullscreen(!!document.fullscreenElement);\n    document.addEventListener('fullscreenchange', handler);\n    return () => {\n      document.removeEventListener('fullscreenchange', handler);\n    };\n  }, []);\n  return useCallback(() => {\n    if (isFullscreen) {\n      document.exitFullscreen().catch((err) => {\n        console.error('Failed to exit fullscreen', err);\n      });\n    } else {\n      participantViewElement?.requestFullscreen().catch((err) => {\n        console.error('Failed to enter fullscreen', err);\n      });\n    }\n  }, [isFullscreen, participantViewElement]);\n};\n\nconst formatDuration = (durationInMs: number) => {\n  const days = Math.floor(durationInMs / 86400);\n  const hours = Math.floor(durationInMs / 3600);\n  const minutes = Math.floor((durationInMs % 3600) / 60);\n  const seconds = durationInMs % 60;\n\n  return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${\n    minutes < 10 ? '0' : ''\n  }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"LivestreamLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/LivestreamLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ComponentType,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { hasScreenShare, humanize } from '@stream-io/video-client';\nimport { ParticipantView, useParticipantViewContext } from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport { Icon, IconButton } from '../../../components';\nimport {\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type LivestreamLayoutProps = {\n  /**\n   * Whether the livestream is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n\n  /**\n   * Whether to show the participant count. Defaults to `true`.\n   */\n  showParticipantCount?: boolean;\n\n  /**\n   * Whether to humanize the participant count. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 100_000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n\n  /**\n   * Whether to enable fullscreen mode. Defaults to `true`.\n   */\n  enableFullScreen?: boolean;\n\n  /**\n   * Whether to show the duration of the call. Defaults to `true`.\n   */\n  showDuration?: boolean;\n\n  /**\n   * Whether to show the live badge. Defaults to `true`.\n   */\n  showLiveBadge?: boolean;\n\n  /**\n   * Whether to show the speaker name. Defaults to `false`.\n   */\n  showSpeakerName?: boolean;\n\n  /**\n   * Whether to show the mute button. Defaults to `true`.\n   */\n  showMuteButton?: boolean;\n\n  /**\n   * When set to `false` disables mirroring of the local participant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * The props to pass to the floating participant element.\n   */\n  floatingParticipantProps?: LivestreamLayoutProps & {\n    /**\n     * The position of the floating participant element. Defaults to `top-right`.\n     */\n    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n  };\n\n  /**\n   * Override the default participant view overlay UI.\n   */\n  ParticipantViewUI?: ComponentType | ReactElement | null;\n};\n\nexport const LivestreamLayout = (props: LivestreamLayoutProps) => {\n  const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();\n  const call = useCall();\n  const participants = useParticipants();\n  const [currentSpeaker] = participants;\n  const remoteParticipants = useRawRemoteParticipants();\n  const hasOngoingScreenShare = useHasOngoingScreenShare();\n  const presenter = hasOngoingScreenShare\n    ? participants.find(hasScreenShare)\n    : undefined;\n\n  usePaginatedLayoutSortPreset(call);\n\n  const { floatingParticipantProps, muted, ParticipantViewUI } = props;\n  const overlay = ParticipantViewUI ?? (\n    <ParticipantOverlay\n      showParticipantCount={props.showParticipantCount}\n      showDuration={props.showDuration}\n      showLiveBadge={props.showLiveBadge}\n      showMuteButton={props.showMuteButton}\n      showSpeakerName={props.showSpeakerName}\n      enableFullScreen={props.enableFullScreen}\n    />\n  );\n\n  const floatingParticipantOverlay =\n    hasOngoingScreenShare &&\n    (ParticipantViewUI ?? (\n      <ParticipantOverlay\n        // these elements aren't needed for the video feed\n        showParticipantCount={\n          floatingParticipantProps?.showParticipantCount ?? false\n        }\n        showDuration={floatingParticipantProps?.showDuration ?? false}\n        showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}\n        showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}\n        enableFullScreen={floatingParticipantProps?.enableFullScreen ?? true}\n      />\n    ));\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      {hasOngoingScreenShare && presenter && (\n        <ParticipantView\n          className=\"str-video__livestream-layout__screen-share\"\n          participant={presenter}\n          ParticipantViewUI={overlay}\n          trackType=\"screenShareTrack\"\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n      {currentSpeaker && (\n        <ParticipantView\n          className={clsx(\n            hasOngoingScreenShare &&\n              clsx(\n                'str-video__livestream-layout__floating-participant',\n                `str-video__livestream-layout__floating-participant--${\n                  floatingParticipantProps?.position ?? 'top-right'\n                }`,\n              ),\n          )}\n          participant={currentSpeaker}\n          ParticipantViewUI={floatingParticipantOverlay || overlay}\n          mirror={\n            props.mirrorLocalParticipantVideo !== false ? undefined : false\n          }\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n    </div>\n  );\n};\n\nLivestreamLayout.displayName = 'LivestreamLayout';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type BackstageLayoutProps = {\n  /**\n   * Whether to show the counter for participants that joined before\n   * the livestream went live. Defaults to `true`.\n   */\n  showEarlyParticipantCount?: boolean;\n\n  /**\n   * Show the participant count in a humanized format. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 10_0000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n};\n\nexport const BackstageLayout = (props: BackstageLayoutProps) => {\n  const { showEarlyParticipantCount = true, humanizeParticipantCount = true } =\n    props;\n  const { useParticipantCount, useCallStartsAt } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const startsAt = useCallStartsAt();\n  const { t } = useI18n();\n  const [startsAtPassed, setStartsAtPassed] = useState(\n    () => !!startsAt && startsAt.getTime() < Date.now(),\n  );\n\n  useEffect(() => {\n    if (!startsAt || startsAtPassed) return;\n\n    const check = () => {\n      if (startsAt.getTime() < Date.now()) {\n        setStartsAtPassed(true);\n      }\n    };\n\n    const interval = setInterval(check, 1000);\n    return () => clearInterval(interval);\n  }, [startsAt, startsAtPassed]);\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      <div className=\"str-video__livestream-layout__backstage\">\n        {startsAt && (\n          <span className=\"str-video__livestream-layout__starts-at\">\n            {startsAtPassed\n              ? t(\n                  'livestream.backstage.startsSoon.text',\n                  'Livestream starts soon',\n                )\n              : t(\n                  'livestream.backstage.startsAt.text',\n                  'Livestream starts at {{ time }}',\n                  {\n                    time: startsAt.toLocaleTimeString([], {\n                      hour: '2-digit',\n                      minute: '2-digit',\n                    }),\n                  },\n                )}\n          </span>\n        )}\n        {showEarlyParticipantCount && (\n          <span className=\"str-video__livestream-layout__early-viewers-count\">\n            <Icon icon=\"livestream-viewers\" />\n            {/*\n              `count` stays the raw number so i18next can pick a plural form;\n              `formattedCount` carries the (possibly humanized) display string.\n              Behaviour change: with humanizing on, a count of 1 now renders the\n              singular - previously the humanized string defeated plural\n              selection and `_other` always won.\n            */}\n            {t('livestream.backstage.participantsJoinedEarly.text', {\n              count: participantCount,\n              formattedCount: humanizeParticipantCount\n                ? humanize(participantCount)\n                : participantCount,\n              defaultValue_one: '{{ formattedCount }} participant joined early',\n              defaultValue_other:\n                '{{ formattedCount }} participants joined early',\n            })}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nBackstageLayout.displayName = 'BackstageLayout';\n\nconst ParticipantOverlay = (props: {\n  enableFullScreen?: boolean;\n  showParticipantCount?: boolean;\n  humanizeParticipantCount?: boolean;\n  showDuration?: boolean;\n  showLiveBadge?: boolean;\n  showSpeakerName?: boolean;\n  showMuteButton?: boolean;\n}) => {\n  const {\n    enableFullScreen = true,\n    showParticipantCount = true,\n    humanizeParticipantCount = true,\n    showDuration = true,\n    showLiveBadge = true,\n    showMuteButton = true,\n    showSpeakerName = false,\n  } = props;\n  const overlayBarVisible =\n    enableFullScreen ||\n    showParticipantCount ||\n    showDuration ||\n    showLiveBadge ||\n    showMuteButton ||\n    showSpeakerName;\n  const { participant, participantViewElement } = useParticipantViewContext();\n  const { useParticipantCount, useSpeakerState } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const duration = useUpdateCallDuration();\n  const toggleFullScreen = useToggleFullScreen();\n  const { speaker, volume } = useSpeakerState();\n  const isSpeakerMuted = volume === 0;\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__livestream-layout__overlay\">\n      {overlayBarVisible && (\n        <div className=\"str-video__livestream-layout__overlay__bar\">\n          <div className=\"str-video__livestream-layout__overlay__bar-left\">\n            {showLiveBadge && (\n              <span className=\"str-video__livestream-layout__live-badge\">\n                <span\n                  className=\"str-video__livestream-layout__live-badge__dot\"\n                  aria-hidden=\"true\"\n                />\n                {t('common.live.label', 'Live')}\n              </span>\n            )}\n            {showParticipantCount && (\n              <span className=\"str-video__livestream-layout__viewers-count\">\n                <Icon icon=\"livestream-viewers\" />\n                {humanizeParticipantCount\n                  ? humanize(participantCount)\n                  : participantCount}\n              </span>\n            )}\n            {showSpeakerName && (\n              <span\n                className=\"str-video__livestream-layout__speaker-name\"\n                title={participant.name || participant.userId || ''}\n              >\n                <span>{participant.name || participant.userId || ''}</span>\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-center\">\n            {showDuration && (\n              <span className=\"str-video__livestream-layout__duration\">\n                {formatDuration(duration)}\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-right\">\n            {showMuteButton && (\n              <IconButton\n                icon={isSpeakerMuted ? 'speaker-off' : 'speaker'}\n                variant=\"secondary\"\n                appearance=\"solid\"\n                size=\"sm\"\n                className={clsx(\n                  'str-video__livestream-layout__mute-button',\n                  isSpeakerMuted &&\n                    'str-video__livestream-layout__mute-button--muted',\n                )}\n                onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}\n              />\n            )}\n            {enableFullScreen &&\n              participantViewElement &&\n              typeof participantViewElement.requestFullscreen !==\n                'undefined' && (\n                <IconButton\n                  icon=\"fullscreen\"\n                  variant=\"secondary\"\n                  appearance=\"solid\"\n                  size=\"sm\"\n                  className=\"str-video__livestream-layout__go-fullscreen\"\n                  onClick={toggleFullScreen}\n                />\n              )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst useUpdateCallDuration = () => {\n  const { useIsCallLive, useCallSession } = useCallStateHooks();\n  const isCallLive = useIsCallLive();\n  const session = useCallSession();\n  const [duration, setDuration] = useState(() => {\n    if (!session || !session.live_started_at) return 0;\n    const liveStartTime = new Date(session.live_started_at);\n    const now = new Date();\n    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);\n  });\n\n  useEffect(() => {\n    if (!isCallLive) return;\n    const interval = setInterval(() => {\n      setDuration((d) => d + 1);\n    }, 1000);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [isCallLive]);\n\n  return duration;\n};\n\nconst useToggleFullScreen = () => {\n  const { participantViewElement } = useParticipantViewContext();\n  const [isFullscreen, setIsFullscreen] = useState(\n    !!document.fullscreenElement,\n  );\n  useEffect(() => {\n    const handler = () => setIsFullscreen(!!document.fullscreenElement);\n    document.addEventListener('fullscreenchange', handler);\n    return () => {\n      document.removeEventListener('fullscreenchange', handler);\n    };\n  }, []);\n  return useCallback(() => {\n    if (isFullscreen) {\n      document.exitFullscreen().catch((err) => {\n        console.error('Failed to exit fullscreen', err);\n      });\n    } else {\n      participantViewElement?.requestFullscreen().catch((err) => {\n        console.error('Failed to enter fullscreen', err);\n      });\n    }\n  }, [isFullscreen, participantViewElement]);\n};\n\nconst formatDuration = (durationInMs: number) => {\n  const days = Math.floor(durationInMs / 86400);\n  const hours = Math.floor(durationInMs / 3600);\n  const minutes = Math.floor((durationInMs % 3600) / 60);\n  const seconds = durationInMs % 60;\n\n  return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${\n    minutes < 10 ? '0' : ''\n  }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FO,MAAM,gBAAgB,GAAG,CAAC,KAA4B,KAAI;IAC/D,MAAM,EAAE,eAAe,EAAE,wBAAwB,EAAE,GAAG,iBAAiB,EAAE;AACzE,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,CAAC,cAAc,CAAC,GAAG,YAAY;AACrC,IAAA,MAAM,kBAAkB,GAAG,wBAAwB,EAAE;AACrD,IAAA,MAAM,qBAAqB,GAAG,wBAAwB,EAAE;IACxD,MAAM,SAAS,GAAG;AAChB,UAAE,YAAY,CAAC,IAAI,CAAC,cAAc;UAChC,SAAS;IAEb,4BAA4B,CAAC,IAAI,CAAC;IAElC,MAAM,EAAE,wBAAwB,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,KAAK;IACpE,MAAM,OAAO,GAAG,iBAAiB,KAC/BA,GAAA,CAAC,kBAAkB,IACjB,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,EAChD,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAA,CACxC,CACH;IAED,MAAM,0BAA0B,GAC9B,qBAAqB;AACrB,SAAC,iBAAiB,KAChBA,GAAA,CAAC;;;;AAEC,YAAA,oBAAoB,EAClB,wBAAwB,EAAE,oBAAoB,IAAI,KAAK,EAEzD,YAAY,EAAE,wBAAwB,EAAE,YAAY,IAAI,KAAK,EAC7D,aAAa,EAAE,wBAAwB,EAAE,aAAa,IAAI,KAAK,EAC/D,eAAe,EAAE,wBAAwB,EAAE,eAAe,IAAI,IAAI,EAClE,gBAAgB,EAAE,wBAAwB,EAAE,gBAAgB,IAAI,IAAI,EAAA,CACpE,CACH,CAAC;AAEJ,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACnD,CAAC,KAAK,IAAID,IAAC,iBAAiB,EAAA,EAAC,YAAY,EAAE,kBAAkB,GAAI,EACjE,qBAAqB,IAAI,SAAS,KACjCA,GAAA,CAAC,eAAe,IACd,SAAS,EAAC,4CAA4C,EACtD,WAAW,EAAE,SAAS,EACtB,iBAAiB,EAAE,OAAO,EAC1B,SAAS,EAAC,kBAAkB,EAC5B,SAAS;yBACT,CACH,EACA,cAAc,KACbA,GAAA,CAAC,eAAe,EAAA,EACd,SAAS,EAAE,IAAI,CACb,qBAAqB;AACnB,oBAAA,IAAI,CACF,oDAAoD,EACpD,uDACE,wBAAwB,EAAE,QAAQ,IAAI,WACxC,CAAA,CAAE,CACH,CACJ,EACD,WAAW,EAAE,cAAc,EAC3B,iBAAiB,EAAE,0BAA0B,IAAI,OAAO,EACxD,MAAM,EACJ,KAAK,CAAC,2BAA2B,KAAK,KAAK,GAAG,SAAS,GAAG,KAAK,EAEjE,SAAS;yBACT,CACH,CAAA,EAAA,CACG;AAEV;AAEA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;AAuB1C,MAAM,eAAe,GAAG,CAAC,KAA2B,KAAI;IAC7D,MAAM,EAAE,yBAAyB,GAAG,IAAI,EAAE,wBAAwB,GAAG,IAAI,EAAE,GACzE,KAAK;IACP,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AACpE,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,QAAQ,GAAG,eAAe,EAAE;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,MAAM,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CACpD;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,QAAQ,IAAI,cAAc;YAAE;QAEjC,MAAM,KAAK,GAAG,MAAK;YACjB,IAAI,QAAQ,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,EAAE;gBACnC,iBAAiB,CAAC,IAAI,CAAC;YACzB;AACF,QAAA,CAAC;QAED,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC;AACzC,QAAA,OAAO,MAAM,aAAa,CAAC,QAAQ,CAAC;AACtC,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;AAE9B,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EACpDC,cAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACrD,QAAQ,KACPD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,yCAAyC,YACtD;AACC,0BAAE,CAAC,CACC,sCAAsC,EACtC,wBAAwB;AAE5B,0BAAE,CAAC,CACC,oCAAoC,EACpC,iCAAiC,EACjC;AACE,4BAAA,IAAI,EAAE,QAAQ,CAAC,kBAAkB,CAAC,EAAE,EAAE;AACpC,gCAAA,IAAI,EAAE,SAAS;AACf,gCAAA,MAAM,EAAE,SAAS;6BAClB,CAAC;yBACH,CACF,EAAA,CACA,CACR,EACA,yBAAyB,KACxBC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,CACjED,IAAC,IAAI,EAAA,EAAC,IAAI,EAAC,oBAAoB,GAAG,EAQjC,CAAC,CAAC,mDAAmD,EAAE;AACtD,4BAAA,KAAK,EAAE,gBAAgB;AACvB,4BAAA,cAAc,EAAE;AACd,kCAAE,QAAQ,CAAC,gBAAgB;AAC3B,kCAAE,gBAAgB;AACpB,4BAAA,gBAAgB,EAAE,+CAA+C;AACjE,4BAAA,kBAAkB,EAChB,gDAAgD;AACnD,yBAAA,CAAC,CAAA,EAAA,CACG,CACR,CAAA,EAAA,CACG,EAAA,CACF;AAEV;AAEA,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,kBAAkB,GAAG,CAAC,KAQ3B,KAAI;AACH,IAAA,MAAM,EACJ,gBAAgB,GAAG,IAAI,EACvB,oBAAoB,GAAG,IAAI,EAC3B,wBAAwB,GAAG,IAAI,EAC/B,YAAY,GAAG,IAAI,EACnB,aAAa,GAAG,IAAI,EACpB,cAAc,GAAG,IAAI,EACrB,eAAe,GAAG,KAAK,GACxB,GAAG,KAAK;IACT,MAAM,iBAAiB,GACrB,gBAAgB;QAChB,oBAAoB;QACpB,YAAY;QACZ,aAAa;QACb,cAAc;AACd,QAAA,eAAe;IACjB,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,EAAE;IAC3E,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AACpE,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,QAAQ,GAAG,qBAAqB,EAAE;AACxC,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;IAC9C,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE;AAC7C,IAAA,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC;AACnC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EACnD,iBAAiB,KAChBC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CACzDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC7D,aAAa,KACZA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CACxDD,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,+CAA+C,EAAA,aAAA,EAC7C,MAAM,EAAA,CAClB,EACD,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAA,EAAA,CAC1B,CACR,EACA,oBAAoB,KACnBC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,CAC3DD,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,oBAAoB,EAAA,CAAG,EACjC;AACC,sCAAE,QAAQ,CAAC,gBAAgB;sCACzB,gBAAgB,CAAA,EAAA,CACf,CACR,EACA,eAAe,KACdA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM,IAAI,EAAE,YAEnDA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM,IAAI,EAAE,EAAA,CAAQ,EAAA,CACtD,CACR,CAAA,EAAA,CACG,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,YAC/D,YAAY,KACXA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACrD,cAAc,CAAC,QAAQ,CAAC,GACpB,CACR,EAAA,CACG,EACNC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC9D,cAAc,KACbD,GAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAE,cAAc,GAAG,aAAa,GAAG,SAAS,EAChD,OAAO,EAAC,WAAW,EACnB,UAAU,EAAC,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,IAAI,CACb,2CAA2C,EAC3C,cAAc;gCACZ,kDAAkD,CACrD,EACD,OAAO,EAAE,MAAM,OAAO,CAAC,SAAS,CAAC,cAAc,GAAG,CAAC,GAAG,CAAC,CAAC,EAAA,CACxD,CACH,EACA,gBAAgB;4BACf,sBAAsB;4BACtB,OAAO,sBAAsB,CAAC,iBAAiB;AAC7C,gCAAA,WAAW,KACXA,GAAA,CAAC,UAAU,IACT,IAAI,EAAC,YAAY,EACjB,OAAO,EAAC,WAAW,EACnB,UAAU,EAAC,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,6CAA6C,EACvD,OAAO,EAAE,gBAAgB,EAAA,CACzB,CACH,CAAA,EAAA,CACC,CAAA,EAAA,CACF,CACP,EAAA,CACG;AAEV,CAAC;AAED,MAAM,qBAAqB,GAAG,MAAK;IACjC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC7D,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;IAChC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,MAAK;AAC5C,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe;AAAE,YAAA,OAAO,CAAC;QAClD,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;AACvD,QAAA,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE;AACtB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,aAAa,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC;AACrE,IAAA,CAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,UAAU;YAAE;AACjB,QAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAK;YAChC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC,EAAE,IAAI,CAAC;AACR,QAAA,OAAO,MAAK;YACV,aAAa,CAAC,QAAQ,CAAC;AACzB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAEhB,IAAA,OAAO,QAAQ;AACjB,CAAC;AAED,MAAM,mBAAmB,GAAG,MAAK;AAC/B,IAAA,MAAM,EAAE,sBAAsB,EAAE,GAAG,yBAAyB,EAAE;AAC9D,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAC7B;IACD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,OAAO,GAAG,MAAM,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;AACnE,QAAA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC;AACtD,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,OAAO,CAAC;AAC3D,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IACN,OAAO,WAAW,CAAC,MAAK;QACtB,IAAI,YAAY,EAAE;YAChB,QAAQ,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AACtC,gBAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,GAAG,CAAC;AACjD,YAAA,CAAC,CAAC;QACJ;aAAO;YACL,sBAAsB,EAAE,iBAAiB,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AACxD,gBAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,GAAG,CAAC;AAClD,YAAA,CAAC,CAAC;QACJ;AACF,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,sBAAsB,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,YAAoB,KAAI;IAC9C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;IAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAC7C,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,GAAG,IAAI,IAAI,EAAE,CAAC;AACtD,IAAA,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE;IAEjC,OAAO,CAAA,EAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,GAAG,GAAG,EAAE,CAAA,EACzD,OAAO,GAAG,EAAE,GAAG,GAAG,GAAG,EACvB,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,OAAO,GAAG,EAAE,GAAG,GAAG,GAAG,EAAE,CAAA,EAAG,OAAO,CAAA,CAAE;AACnD,CAAC;;;;"}

package/dist/esm/src/core/components/CallLayout/PaginatedGridLayout.js

@@ -1,29 +1,32 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo } from 'react';
 import { useCall } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import clsx from 'clsx';
 import '@stream-io/video-client';
 import '../ParticipantView/ParticipantViewContext.js';
 import '../../../components/Menu/MenuToggle.js';
 import { ParticipantView } from '../ParticipantView/ParticipantView.js';
 import { DefaultParticipantViewUI } from '../ParticipantView/DefaultParticipantViewUI.js';
+import '../ParticipantView/ConnectionQualityIndicator.js';
 import '../Audio/Audio.js';
 import { ParticipantsAudio } from '../Audio/ParticipantsAudio.js';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import { IconButton } from '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
 import '../../../components/CallControls/ReactionsButton.js';
 import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../Video/Video.js';
 import '../Video/BaseVideo.js';
@@ -40,6 +43,7 @@ const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPi
         }), children: group.map((participant) => (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;
@@ -71,7 +75,7 @@ const PaginatedGridLayout = (props) => {
     const mirror = mirrorLocalParticipantVideo ? undefined : false;
     if (!call)
         return null;
-    return (jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+    return (jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (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 && (jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (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';
 

package/dist/esm/src/core/components/CallLayout/PaginatedGridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatedGridLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { StreamVideoParticipant } from '@stream-io/video-client';\nimport clsx from 'clsx';\n\nimport {\n  DefaultParticipantViewUI,\n  ParticipantView,\n  ParticipantViewProps,\n} from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport { IconButton } from '../../../components';\nimport { chunk } from '../../../utilities';\nimport {\n  ParticipantFilter,\n  ParticipantPredicate,\n  useFilteredParticipants,\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\nconst GROUP_SIZE = 16;\n\ntype PaginatedGridLayoutGroupProps = {\n  /**\n   * The group of participants to render.\n   */\n  group: Array<StreamVideoParticipant>;\n} & Pick<\n  ParticipantViewProps,\n  'VideoPlaceholder' | 'PictureInPicturePlaceholder' | 'mirror'\n> &\n  Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;\n\nconst PaginatedGridLayoutGroup = ({\n  group,\n  mirror,\n  VideoPlaceholder,\n  PictureInPicturePlaceholder,\n  ParticipantViewUI,\n}: PaginatedGridLayoutGroupProps) => {\n  return (\n    <div\n      data-group-size={group.length}\n      className={clsx('str-video__paginated-grid-layout__group', {\n        'str-video__paginated-grid-layout--one': group.length === 1,\n        'str-video__paginated-grid-layout--two-four':\n          group.length >= 2 && group.length <= 4,\n        'str-video__paginated-grid-layout--five-nine':\n          group.length >= 5 && group.length <= 9,\n      })}\n    >\n      {group.map((participant) => (\n        <ParticipantView\n          key={participant.sessionId}\n          participant={participant}\n          muteAudio\n          mirror={mirror}\n          VideoPlaceholder={VideoPlaceholder}\n          PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          ParticipantViewUI={ParticipantViewUI}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type PaginatedGridLayoutProps = {\n  /**\n   * The number of participants to display per page.\n   */\n  groupSize?: number;\n\n  /**\n   * Whether to exclude the local participant from the grid.\n   * @default false\n   */\n  excludeLocalParticipant?: boolean;\n\n  /**\n   * Predicate to filter call participants or a filter object.\n   * @example\n   * // With a predicate:\n   * <PaginatedGridLayout\n   *   filterParticipants={p => p.roles.includes('student')}\n   * />\n   * @example\n   * // With a filter object:\n   * <PaginatedGridLayout\n   *   filterParticipants={{\n   *     $or: [\n   *       { roles: { $contains: 'student' } },\n   *       { isPinned: true },\n   *     ],\n   *   }}\n   * />\n   */\n  filterParticipants?: ParticipantPredicate | ParticipantFilter;\n\n  /**\n   * When set to `false` disables mirroring of the local partipant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * Turns on/off the pagination arrows.\n   * @default true\n   */\n  pageArrowsVisible?: boolean;\n\n  /**\n   * Whether the layout is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n} & Pick<\n  ParticipantViewProps,\n  'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'\n>;\n\nexport const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {\n  const {\n    groupSize = (props.groupSize || 0) > 0\n      ? props.groupSize || GROUP_SIZE\n      : GROUP_SIZE,\n    excludeLocalParticipant = false,\n    filterParticipants,\n    mirrorLocalParticipantVideo = true,\n    pageArrowsVisible = true,\n    VideoPlaceholder,\n    ParticipantViewUI = DefaultParticipantViewUI,\n    PictureInPicturePlaceholder,\n    muted,\n  } = props;\n  const [page, setPage] = useState(0);\n  const [\n    paginatedGridLayoutWrapperElement,\n    setPaginatedGridLayoutWrapperElement,\n  ] = useState<HTMLDivElement | null>(null);\n\n  const call = useCall();\n  const remoteParticipants = useRawRemoteParticipants();\n  const participants = useFilteredParticipants({\n    excludeLocalParticipant,\n    filterParticipants,\n  });\n\n  usePaginatedLayoutSortPreset(call);\n\n  useEffect(() => {\n    if (!paginatedGridLayoutWrapperElement || !call) return;\n\n    const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);\n\n    return () => cleanup?.();\n  }, [paginatedGridLayoutWrapperElement, call]);\n\n  // only used to render video elements\n  const participantGroups = useMemo(\n    () => chunk(participants, groupSize),\n    [participants, groupSize],\n  );\n\n  const pageCount = participantGroups.length;\n\n  // update page when page count is reduced and selected page no longer exists\n  useEffect(() => {\n    if (page > pageCount - 1) {\n      setPage(Math.max(0, pageCount - 1));\n    }\n  }, [page, pageCount]);\n\n  const selectedGroup = participantGroups[page];\n  const mirror = mirrorLocalParticipantVideo ? undefined : false;\n\n  if (!call) return null;\n\n  return (\n    <div\n      className=\"str-video__paginated-grid-layout__wrapper\"\n      ref={setPaginatedGridLayoutWrapperElement}\n    >\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      <div className=\"str-video__paginated-grid-layout\">\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            icon=\"caret-left\"\n            disabled={page === 0}\n            onClick={() =>\n              setPage((currentPage) => Math.max(0, currentPage - 1))\n            }\n          />\n        )}\n        {selectedGroup && (\n          <PaginatedGridLayoutGroup\n            group={selectedGroup}\n            mirror={mirror}\n            VideoPlaceholder={VideoPlaceholder}\n            ParticipantViewUI={ParticipantViewUI}\n            PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          />\n        )}\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            disabled={page === pageCount - 1}\n            icon=\"caret-right\"\n            onClick={() =>\n              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nPaginatedGridLayout.displayName = 'PaginatedGridLayout';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"PaginatedGridLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { StreamVideoParticipant } from '@stream-io/video-client';\nimport clsx from 'clsx';\n\nimport {\n  DefaultParticipantViewUI,\n  ParticipantView,\n  ParticipantViewProps,\n} from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport { IconButton } from '../../../components';\nimport { chunk } from '../../../utilities';\nimport {\n  ParticipantFilter,\n  ParticipantPredicate,\n  useFilteredParticipants,\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\nconst GROUP_SIZE = 16;\n\ntype PaginatedGridLayoutGroupProps = {\n  /**\n   * The group of participants to render.\n   */\n  group: Array<StreamVideoParticipant>;\n} & Pick<\n  ParticipantViewProps,\n  'VideoPlaceholder' | 'PictureInPicturePlaceholder' | 'mirror'\n> &\n  Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;\n\nconst PaginatedGridLayoutGroup = ({\n  group,\n  mirror,\n  VideoPlaceholder,\n  PictureInPicturePlaceholder,\n  ParticipantViewUI,\n}: PaginatedGridLayoutGroupProps) => {\n  return (\n    <div\n      data-group-size={group.length}\n      className={clsx('str-video__paginated-grid-layout__group', {\n        'str-video__paginated-grid-layout--one': group.length === 1,\n        'str-video__paginated-grid-layout--two-four':\n          group.length >= 2 && group.length <= 4,\n        'str-video__paginated-grid-layout--five-nine':\n          group.length >= 5 && group.length <= 9,\n      })}\n    >\n      {group.map((participant) => (\n        <ParticipantView\n          key={participant.sessionId}\n          participant={participant}\n          muteAudio\n          mirror={mirror}\n          VideoPlaceholder={VideoPlaceholder}\n          PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          ParticipantViewUI={ParticipantViewUI}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type PaginatedGridLayoutProps = {\n  /**\n   * The number of participants to display per page.\n   */\n  groupSize?: number;\n\n  /**\n   * Whether to exclude the local participant from the grid.\n   * @default false\n   */\n  excludeLocalParticipant?: boolean;\n\n  /**\n   * Predicate to filter call participants or a filter object.\n   * @example\n   * // With a predicate:\n   * <PaginatedGridLayout\n   *   filterParticipants={p => p.roles.includes('student')}\n   * />\n   * @example\n   * // With a filter object:\n   * <PaginatedGridLayout\n   *   filterParticipants={{\n   *     $or: [\n   *       { roles: { $contains: 'student' } },\n   *       { isPinned: true },\n   *     ],\n   *   }}\n   * />\n   */\n  filterParticipants?: ParticipantPredicate | ParticipantFilter;\n\n  /**\n   * When set to `false` disables mirroring of the local partipant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * Turns on/off the pagination arrows.\n   * @default true\n   */\n  pageArrowsVisible?: boolean;\n\n  /**\n   * Whether the layout is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n} & Pick<\n  ParticipantViewProps,\n  'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'\n>;\n\nexport const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {\n  const { t } = useI18n();\n  const {\n    groupSize = (props.groupSize || 0) > 0\n      ? props.groupSize || GROUP_SIZE\n      : GROUP_SIZE,\n    excludeLocalParticipant = false,\n    filterParticipants,\n    mirrorLocalParticipantVideo = true,\n    pageArrowsVisible = true,\n    VideoPlaceholder,\n    ParticipantViewUI = DefaultParticipantViewUI,\n    PictureInPicturePlaceholder,\n    muted,\n  } = props;\n  const [page, setPage] = useState(0);\n  const [\n    paginatedGridLayoutWrapperElement,\n    setPaginatedGridLayoutWrapperElement,\n  ] = useState<HTMLDivElement | null>(null);\n\n  const call = useCall();\n  const remoteParticipants = useRawRemoteParticipants();\n  const participants = useFilteredParticipants({\n    excludeLocalParticipant,\n    filterParticipants,\n  });\n\n  usePaginatedLayoutSortPreset(call);\n\n  useEffect(() => {\n    if (!paginatedGridLayoutWrapperElement || !call) return;\n\n    const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);\n\n    return () => cleanup?.();\n  }, [paginatedGridLayoutWrapperElement, call]);\n\n  // only used to render video elements\n  const participantGroups = useMemo(\n    () => chunk(participants, groupSize),\n    [participants, groupSize],\n  );\n\n  const pageCount = participantGroups.length;\n\n  // update page when page count is reduced and selected page no longer exists\n  useEffect(() => {\n    if (page > pageCount - 1) {\n      setPage(Math.max(0, pageCount - 1));\n    }\n  }, [page, pageCount]);\n\n  const selectedGroup = participantGroups[page];\n  const mirror = mirrorLocalParticipantVideo ? undefined : false;\n\n  if (!call) return null;\n\n  return (\n    <div\n      className=\"str-video__paginated-grid-layout__wrapper\"\n      ref={setPaginatedGridLayoutWrapperElement}\n    >\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      <div className=\"str-video__paginated-grid-layout\">\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            size=\"sm\"\n            variant=\"secondary\"\n            icon=\"caret-left\"\n            aria-label={t(\n              'callLayout.paginatedGridLayout.previousPage.ariaLabel',\n              'Previous page',\n            )}\n            disabled={page === 0}\n            onClick={() =>\n              setPage((currentPage) => Math.max(0, currentPage - 1))\n            }\n          />\n        )}\n        {selectedGroup && (\n          <PaginatedGridLayoutGroup\n            group={selectedGroup}\n            mirror={mirror}\n            VideoPlaceholder={VideoPlaceholder}\n            ParticipantViewUI={ParticipantViewUI}\n            PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          />\n        )}\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            size=\"sm\"\n            variant=\"secondary\"\n            disabled={page === pageCount - 1}\n            icon=\"caret-right\"\n            aria-label={t(\n              'callLayout.paginatedGridLayout.nextPage.ariaLabel',\n              'Next page',\n            )}\n            onClick={() =>\n              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nPaginatedGridLayout.displayName = 'PaginatedGridLayout';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}