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

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownSelect.js","sources":["../../../../../../../src/components/DropdownSelect/DropdownSelect.tsx"],"sourcesContent":["import {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListItem,\n  useListNavigation,\n  useRole,\n  useTypeahead,\n} from '@floating-ui/react';\n\nimport { Icon } from '../Icon';\n\ninterface SelectContextValue {\n  activeIndex: number | null;\n  selectedIndex: number | null;\n  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];\n  handleSelect: (index: number | null) => void;\n}\n\nconst SelectContext = createContext<SelectContextValue>(\n  {} as SelectContextValue,\n);\n\nconst Select = (props: {\n  children: ReactNode;\n  icon?: string;\n  defaultSelectedLabel: string;\n  defaultSelectedIndex: number;\n  handleSelect: (index: number) => void;\n}) => {\n  const {\n    children,\n    icon,\n    defaultSelectedLabel,\n    defaultSelectedIndex,\n    handleSelect: handleSelectProp,\n  } = props;\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [selectedIndex, setSelectedIndex] = useState<number | null>(\n    defaultSelectedIndex,\n  );\n  const [selectedLabel, setSelectedLabel] = useState<string | null>(\n    defaultSelectedLabel,\n  );\n\n  const { refs, context } = useFloating({\n    placement: 'bottom-start',\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [flip()],\n  });\n\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const labelsRef = useRef<Array<string | null>>([]);\n\n  const handleSelect = useCallback(\n    (index: number | null) => {\n      setSelectedIndex(index);\n      handleSelectProp(index || 0);\n      setIsOpen(false);\n      if (index !== null) {\n        setSelectedLabel(labelsRef.current[index]);\n      }\n    },\n    [handleSelectProp],\n  );\n\n  const handleTypeaheadMatch = (index: number | null) => {\n    if (isOpen) {\n      setActiveIndex(index);\n    } else {\n      handleSelect(index);\n    }\n  };\n\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n  });\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    selectedIndex,\n    onMatch: handleTypeaheadMatch,\n  });\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'listbox' });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [listNav, typeahead, click, dismiss, role],\n  );\n\n  const selectContext = useMemo(\n    () => ({\n      activeIndex,\n      selectedIndex,\n      getItemProps,\n      handleSelect,\n    }),\n    [activeIndex, selectedIndex, getItemProps, handleSelect],\n  );\n\n  return (\n    <div className=\"str-video__dropdown\">\n      <div\n        className=\"str-video__dropdown-selected\"\n        ref={refs.setReference}\n        tabIndex={0}\n        {...getReferenceProps()}\n      >\n        <label className=\"str-video__dropdown-selected__label\">\n          {icon && (\n            <Icon className=\"str-video__dropdown-selected__icon\" icon={icon} />\n          )}\n          {selectedLabel}\n        </label>\n        <Icon\n          className=\"str-video__dropdown-selected__chevron\"\n          icon={isOpen ? 'chevron-up' : 'chevron-down'}\n        />\n      </div>\n      <SelectContext.Provider value={selectContext}>\n        {isOpen && (\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              className=\"str-video__dropdown-list\"\n              ref={refs.setFloating}\n              {...getFloatingProps()}\n            >\n              <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>\n                {children}\n              </FloatingList>\n            </div>\n          </FloatingFocusManager>\n        )}\n      </SelectContext.Provider>\n    </div>\n  );\n};\n\nexport type DropDownSelectOptionProps = {\n  label: string;\n  selected?: boolean;\n  icon?: string;\n};\n\nexport const DropDownSelectOption = (props: DropDownSelectOptionProps) => {\n  const { selected, label, icon } = props;\n  const { getItemProps, handleSelect } = useContext(SelectContext);\n  const { ref, index } = useListItem();\n  return (\n    <div\n      className={clsx('str-video__dropdown-option', {\n        'str-video__dropdown-option--selected': selected,\n      })}\n      ref={ref}\n      {...getItemProps({\n        onClick: () => handleSelect(index),\n      })}\n    >\n      {icon && <Icon className=\"str-video__dropdown-icon\" icon={icon} />}\n      <span className=\"str-video__dropdown-label\">{label}</span>\n    </div>\n  );\n};\n\nexport const DropDownSelect = (props: {\n  icon?: string;\n  defaultSelectedLabel: string;\n  defaultSelectedIndex: number;\n  handleSelect: (index: number) => void;\n  children:\n    | ReactElement<DropDownSelectOptionProps>\n    | ReactElement<DropDownSelectOptionProps>[];\n}) => {\n  const {\n    children,\n    icon,\n    handleSelect,\n    defaultSelectedLabel,\n    defaultSelectedIndex,\n  } = props;\n  return (\n    <Select\n      icon={icon}\n      handleSelect={handleSelect}\n      defaultSelectedIndex={defaultSelectedIndex}\n      defaultSelectedLabel={defaultSelectedLabel}\n    >\n      {children}\n    </Select>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"DropdownSelect.js","sources":["../../../../../../../src/components/DropdownSelect/DropdownSelect.tsx"],"sourcesContent":["import {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListItem,\n  useListNavigation,\n  useRole,\n  useTypeahead,\n} from '@floating-ui/react';\n\nimport { Icon } from '../Icon';\n\ninterface SelectContextValue {\n  activeIndex: number | null;\n  selectedIndex: number | null;\n  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];\n  handleSelect: (index: number | null) => void;\n}\n\nconst SelectContext = createContext<SelectContextValue>(\n  {} as SelectContextValue,\n);\n\nconst Select = (props: {\n  children: ReactNode;\n  icon?: string;\n  defaultSelectedLabel: string;\n  defaultSelectedIndex: number;\n  handleSelect: (index: number) => void;\n}) => {\n  const {\n    children,\n    icon,\n    defaultSelectedLabel,\n    defaultSelectedIndex,\n    handleSelect: handleSelectProp,\n  } = props;\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [selectedIndex, setSelectedIndex] = useState<number | null>(\n    defaultSelectedIndex,\n  );\n  const [selectedLabel, setSelectedLabel] = useState<string | null>(\n    defaultSelectedLabel,\n  );\n\n  const { refs, context } = useFloating({\n    placement: 'bottom-start',\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [flip()],\n  });\n\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const labelsRef = useRef<Array<string | null>>([]);\n\n  const handleSelect = useCallback(\n    (index: number | null) => {\n      setSelectedIndex(index);\n      handleSelectProp(index || 0);\n      setIsOpen(false);\n      if (index !== null) {\n        setSelectedLabel(labelsRef.current[index]);\n      }\n    },\n    [handleSelectProp],\n  );\n\n  const handleTypeaheadMatch = (index: number | null) => {\n    if (isOpen) {\n      setActiveIndex(index);\n    } else {\n      handleSelect(index);\n    }\n  };\n\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n  });\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    selectedIndex,\n    onMatch: handleTypeaheadMatch,\n  });\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'listbox' });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [listNav, typeahead, click, dismiss, role],\n  );\n\n  const selectContext = useMemo(\n    () => ({\n      activeIndex,\n      selectedIndex,\n      getItemProps,\n      handleSelect,\n    }),\n    [activeIndex, selectedIndex, getItemProps, handleSelect],\n  );\n\n  return (\n    <div className=\"str-video__dropdown\">\n      <div\n        className=\"str-video__dropdown-selected\"\n        ref={refs.setReference}\n        tabIndex={0}\n        {...getReferenceProps()}\n      >\n        <label className=\"str-video__dropdown-selected__label\">\n          {icon && (\n            <Icon className=\"str-video__dropdown-selected__icon\" icon={icon} />\n          )}\n          <span className=\"str-video__dropdown-selected__text\">\n            {selectedLabel}\n          </span>\n        </label>\n        <Icon\n          className=\"str-video__dropdown-selected__chevron\"\n          icon={isOpen ? 'chevron-up' : 'chevron-down'}\n        />\n      </div>\n      <SelectContext.Provider value={selectContext}>\n        {isOpen && (\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              className=\"str-video__dropdown-list\"\n              ref={refs.setFloating}\n              {...getFloatingProps()}\n            >\n              <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>\n                {children}\n              </FloatingList>\n            </div>\n          </FloatingFocusManager>\n        )}\n      </SelectContext.Provider>\n    </div>\n  );\n};\n\nexport type DropDownSelectOptionProps = {\n  label: string;\n  selected?: boolean;\n  icon?: string;\n};\n\nexport const DropDownSelectOption = (props: DropDownSelectOptionProps) => {\n  const { selected, label, icon } = props;\n  const { getItemProps, handleSelect } = useContext(SelectContext);\n  const { ref, index } = useListItem();\n  return (\n    <div\n      className={clsx('str-video__dropdown-option', {\n        'str-video__dropdown-option--selected': selected,\n      })}\n      ref={ref}\n      {...getItemProps({\n        onClick: () => handleSelect(index),\n      })}\n    >\n      {icon && <Icon className=\"str-video__dropdown-icon\" icon={icon} />}\n      <span className=\"str-video__dropdown-label\">{label}</span>\n    </div>\n  );\n};\n\nexport const DropDownSelect = (props: {\n  icon?: string;\n  defaultSelectedLabel: string;\n  defaultSelectedIndex: number;\n  handleSelect: (index: number) => void;\n  children:\n    | ReactElement<DropDownSelectOptionProps>\n    | ReactElement<DropDownSelectOptionProps>[];\n}) => {\n  const {\n    children,\n    icon,\n    handleSelect,\n    defaultSelectedLabel,\n    defaultSelectedIndex,\n  } = props;\n  return (\n    <Select\n      icon={icon}\n      handleSelect={handleSelect}\n      defaultSelectedIndex={defaultSelectedIndex}\n      defaultSelectedLabel={defaultSelectedLabel}\n    >\n      {children}\n    </Select>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/Menu/GenericMenu.js

@@ -14,6 +14,7 @@ const GenericMenu = ({ children, onItemClick, }) => {
 const GenericMenuButtonItem = ({ children, ...rest }) => {
     return (jsx("li", { className: "str-video__generic-menu--item", children: jsx("button", { ...rest, children: children }) }));
 };
+const GenericMenuSeparator = () => (jsx("li", { className: "str-video__generic-menu--separator", role: "separator" }));
 
-export { GenericMenu, GenericMenuButtonItem };
+export { GenericMenu, GenericMenuButtonItem, GenericMenuSeparator };
 //# sourceMappingURL=GenericMenu.js.map

package/dist/esm/src/components/Menu/GenericMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"GenericMenu.js","sources":["../../../../../../../src/components/Menu/GenericMenu.tsx"],"sourcesContent":["import { ComponentProps, MouseEvent, PropsWithChildren, useRef } from 'react';\n\nexport const GenericMenu = ({\n  children,\n  onItemClick,\n}: PropsWithChildren<{\n  onItemClick?: (e: MouseEvent) => void;\n}>) => {\n  const ref = useRef<HTMLUListElement>(null);\n  return (\n    <ul\n      className=\"str-video__generic-menu\"\n      ref={ref}\n      onClick={(e) => {\n        if (\n          onItemClick &&\n          e.target !== ref.current &&\n          ref.current?.contains(e.target as Node)\n        ) {\n          onItemClick(e);\n        }\n      }}\n    >\n      {children}\n    </ul>\n  );\n};\n\nexport const GenericMenuButtonItem = ({\n  children,\n  ...rest\n}: Omit<ComponentProps<'button'>, 'ref'>) => {\n  return (\n    <li className=\"str-video__generic-menu--item\">\n      <button {...rest}>{children}</button>\n    </li>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;AAEO,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,WAAW,GAGX,KAAI;AACJ,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC;AAC1C,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,YAAA,IACE,WAAW;AACX,gBAAA,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO;gBACxB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EACvC;gBACA,WAAW,CAAC,CAAC,CAAC;YAChB;AACF,QAAA,CAAC,EAAA,QAAA,EAEA,QAAQ,EAAA,CACN;AAET;AAEO,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,GAAG,IAAI,EAC+B,KAAI;AAC1C,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAC3CA,GAAA,CAAA,QAAA,EAAA,EAAA,GAAY,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAU,EAAA,CAClC;AAET;;;;"}
+{"version":3,"file":"GenericMenu.js","sources":["../../../../../../../src/components/Menu/GenericMenu.tsx"],"sourcesContent":["import { ComponentProps, MouseEvent, PropsWithChildren, useRef } from 'react';\n\nexport const GenericMenu = ({\n  children,\n  onItemClick,\n}: PropsWithChildren<{\n  onItemClick?: (e: MouseEvent) => void;\n}>) => {\n  const ref = useRef<HTMLUListElement>(null);\n  return (\n    <ul\n      className=\"str-video__generic-menu\"\n      ref={ref}\n      onClick={(e) => {\n        if (\n          onItemClick &&\n          e.target !== ref.current &&\n          ref.current?.contains(e.target as Node)\n        ) {\n          onItemClick(e);\n        }\n      }}\n    >\n      {children}\n    </ul>\n  );\n};\n\nexport const GenericMenuButtonItem = ({\n  children,\n  ...rest\n}: Omit<ComponentProps<'button'>, 'ref'>) => {\n  return (\n    <li className=\"str-video__generic-menu--item\">\n      <button {...rest}>{children}</button>\n    </li>\n  );\n};\n\nexport const GenericMenuSeparator = () => (\n  <li className=\"str-video__generic-menu--separator\" role=\"separator\" />\n);\n"],"names":["_jsx"],"mappings":";;;AAEO,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,WAAW,GAGX,KAAI;AACJ,IAAA,MAAM,GAAG,GAAG,MAAM,CAAmB,IAAI,CAAC;AAC1C,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAC,yBAAyB,EACnC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,CAAC,CAAC,KAAI;AACb,YAAA,IACE,WAAW;AACX,gBAAA,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO;gBACxB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EACvC;gBACA,WAAW,CAAC,CAAC,CAAC;YAChB;AACF,QAAA,CAAC,EAAA,QAAA,EAEA,QAAQ,EAAA,CACN;AAET;AAEO,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,GAAG,IAAI,EAC+B,KAAI;AAC1C,IAAA,QACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAC3CA,GAAA,CAAA,QAAA,EAAA,EAAA,GAAY,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAU,EAAA,CAClC;AAET;AAEO,MAAM,oBAAoB,GAAG,OAClCA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,oCAAoC,EAAC,IAAI,EAAC,WAAW,EAAA,CAAG;;;;"}

package/dist/esm/src/components/Menu/MenuToggle.js

@@ -3,6 +3,9 @@ import { createContext, useState, useRef, useEffect, useContext } from 'react';
 import { FloatingOverlay, FloatingPortal } from '@floating-ui/react';
 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';
 
 var MenuVisualType;

package/dist/esm/src/components/Menu/MenuToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuToggle.js","sources":["../../../../../../../src/components/Menu/MenuToggle.tsx"],"sourcesContent":["import {\n  ComponentType,\n  createContext,\n  PropsWithChildren,\n  RefAttributes,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  FloatingOverlay,\n  FloatingPortal,\n  Placement,\n  Strategy,\n  UseFloatingReturn,\n} from '@floating-ui/react';\n\nimport { useFloatingUIPreset } from '../../hooks';\n\nexport type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {\n  menuShown: boolean;\n} & RefAttributes<E>;\n\nexport enum MenuVisualType {\n  PORTAL = 'portal',\n  MENU = 'menu',\n}\n\nexport type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{\n  ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;\n  placement?: Placement;\n  strategy?: Strategy;\n  offset?: number;\n  visualType?: MenuVisualType;\n  onToggle?: (menuShown: boolean) => void;\n}>;\n\nexport type MenuContextValue = {\n  close?: () => void;\n};\n\n/**\n * Used to provide utility APIs to the components rendered inside the portal.\n */\nconst MenuContext = createContext<MenuContextValue>({});\n\n/**\n * Access to the closes MenuContext.\n */\nexport const useMenuContext = (): MenuContextValue => {\n  return useContext(MenuContext);\n};\n\nconst MenuPortal = ({\n  children,\n  refs,\n}: PropsWithChildren<{\n  refs: UseFloatingReturn['refs'];\n}>) => {\n  const [portalRoot, setPortalRoot] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <>\n      <div ref={setPortalRoot} className=\"str-video__portal\" />\n      <FloatingOverlay>\n        <FloatingPortal root={portalRoot}>\n          <div className=\"str-video__portal-content\" ref={refs.setFloating}>\n            {children}\n          </div>\n        </FloatingPortal>\n      </FloatingOverlay>\n    </>\n  );\n};\n\nexport const MenuToggle = <E extends HTMLElement>({\n  ToggleButton,\n  placement = 'top-start',\n  strategy = 'absolute',\n  offset,\n  visualType = MenuVisualType.MENU,\n  children,\n  onToggle,\n}: MenuToggleProps<E>) => {\n  const [menuShown, setMenuShown] = useState(false);\n  const toggleHandler = useRef(onToggle);\n  toggleHandler.current = onToggle;\n\n  const { floating, domReference, refs, x, y } = useFloatingUIPreset({\n    placement,\n    strategy,\n    offset,\n  });\n\n  useEffect(() => {\n    const parentDocument = domReference?.ownerDocument;\n\n    const handleClick = (event: MouseEvent) => {\n      if (!floating && domReference?.contains(event.target as Node)) {\n        setMenuShown(true);\n        toggleHandler.current?.(true);\n      } else if (floating && !floating?.contains(event.target as Node)) {\n        setMenuShown(false);\n        toggleHandler.current?.(false);\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key && // key can be undefined in some browsers\n        event.key.toLowerCase() === 'escape' &&\n        !event.altKey &&\n        !event.ctrlKey\n      ) {\n        setMenuShown(false);\n        toggleHandler.current?.(false);\n      }\n    };\n    parentDocument?.addEventListener('click', handleClick, { capture: true });\n    parentDocument?.addEventListener('keydown', handleKeyDown);\n    return () => {\n      parentDocument?.removeEventListener('click', handleClick, {\n        capture: true,\n      });\n      parentDocument?.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [floating, domReference]);\n\n  return (\n    <>\n      {menuShown && (\n        <MenuContext.Provider value={{ close: () => setMenuShown(false) }}>\n          {visualType === MenuVisualType.PORTAL ? (\n            <MenuPortal refs={refs} children={children} />\n          ) : visualType === MenuVisualType.MENU ? (\n            <div\n              className=\"str-video__menu-container\"\n              ref={refs.setFloating}\n              style={{\n                position: strategy,\n                top: y ?? 0,\n                left: x ?? 0,\n                overflowY: 'auto',\n              }}\n              role=\"menu\"\n              children={children}\n            />\n          ) : null}\n        </MenuContext.Provider>\n      )}\n      <ToggleButton menuShown={menuShown} ref={refs.setReference} />\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"MenuToggle.js","sources":["../../../../../../../src/components/Menu/MenuToggle.tsx"],"sourcesContent":["import {\n  ComponentType,\n  createContext,\n  PropsWithChildren,\n  RefAttributes,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  FloatingOverlay,\n  FloatingPortal,\n  Placement,\n  Strategy,\n  UseFloatingReturn,\n} from '@floating-ui/react';\n\nimport { useFloatingUIPreset } from '../../hooks';\n\nexport type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {\n  menuShown: boolean;\n} & RefAttributes<E>;\n\nexport enum MenuVisualType {\n  PORTAL = 'portal',\n  MENU = 'menu',\n}\n\nexport type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{\n  ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;\n  placement?: Placement;\n  strategy?: Strategy;\n  offset?: number;\n  visualType?: MenuVisualType;\n  onToggle?: (menuShown: boolean) => void;\n}>;\n\nexport type MenuContextValue = {\n  close?: () => void;\n};\n\n/**\n * Used to provide utility APIs to the components rendered inside the portal.\n */\nconst MenuContext = createContext<MenuContextValue>({});\n\n/**\n * Access to the closes MenuContext.\n */\nexport const useMenuContext = (): MenuContextValue => {\n  return useContext(MenuContext);\n};\n\nconst MenuPortal = ({\n  children,\n  refs,\n}: PropsWithChildren<{\n  refs: UseFloatingReturn['refs'];\n}>) => {\n  const [portalRoot, setPortalRoot] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <>\n      <div ref={setPortalRoot} className=\"str-video__portal\" />\n      <FloatingOverlay>\n        <FloatingPortal root={portalRoot}>\n          <div className=\"str-video__portal-content\" ref={refs.setFloating}>\n            {children}\n          </div>\n        </FloatingPortal>\n      </FloatingOverlay>\n    </>\n  );\n};\n\nexport const MenuToggle = <E extends HTMLElement>({\n  ToggleButton,\n  placement = 'top-start',\n  strategy = 'absolute',\n  offset,\n  visualType = MenuVisualType.MENU,\n  children,\n  onToggle,\n}: MenuToggleProps<E>) => {\n  const [menuShown, setMenuShown] = useState(false);\n  const toggleHandler = useRef(onToggle);\n  toggleHandler.current = onToggle;\n\n  const { floating, domReference, refs, x, y } = useFloatingUIPreset({\n    placement,\n    strategy,\n    offset,\n  });\n\n  useEffect(() => {\n    const parentDocument = domReference?.ownerDocument;\n\n    const handleClick = (event: MouseEvent) => {\n      if (!floating && domReference?.contains(event.target as Node)) {\n        setMenuShown(true);\n        toggleHandler.current?.(true);\n      } else if (floating && !floating?.contains(event.target as Node)) {\n        setMenuShown(false);\n        toggleHandler.current?.(false);\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key && // key can be undefined in some browsers\n        event.key.toLowerCase() === 'escape' &&\n        !event.altKey &&\n        !event.ctrlKey\n      ) {\n        setMenuShown(false);\n        toggleHandler.current?.(false);\n      }\n    };\n    parentDocument?.addEventListener('click', handleClick, { capture: true });\n    parentDocument?.addEventListener('keydown', handleKeyDown);\n    return () => {\n      parentDocument?.removeEventListener('click', handleClick, {\n        capture: true,\n      });\n      parentDocument?.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [floating, domReference]);\n\n  return (\n    <>\n      {menuShown && (\n        <MenuContext.Provider value={{ close: () => setMenuShown(false) }}>\n          {visualType === MenuVisualType.PORTAL ? (\n            <MenuPortal refs={refs} children={children} />\n          ) : visualType === MenuVisualType.MENU ? (\n            <div\n              className=\"str-video__menu-container\"\n              ref={refs.setFloating}\n              style={{\n                position: strategy,\n                top: y ?? 0,\n                left: x ?? 0,\n                overflowY: 'auto',\n              }}\n              role=\"menu\"\n              children={children}\n            />\n          ) : null}\n        </MenuContext.Provider>\n      )}\n      <ToggleButton menuShown={menuShown} ref={refs.setReference} />\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/esm/src/components/Notification/MicCaptureErrorNotification.js

@@ -1,6 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { Notification } from './Notification.js';
 
 const MicCaptureErrorNotification = ({ children, text, placement, }) => {
@@ -15,8 +18,8 @@ const MicCaptureErrorNotification = ({ children, text, placement, }) => {
         });
     }, [call]);
     const message = text ??
-        t('Your microphone is not capturing audio. Please check your setup.');
-    return (jsx(Notification, { message: message, isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
+        t('notification.micCaptureError.text', 'Your microphone is not capturing audio. Please check your setup.');
+    return (jsx(Notification, { message: message, state: "error", isVisible: isVisible, placement: placement, close: () => setIsVisible(false), children: children }));
 };
 
 export { MicCaptureErrorNotification };

package/dist/esm/src/components/Notification/MicCaptureErrorNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"MicCaptureErrorNotification.js","sources":["../../../../../../../src/components/Notification/MicCaptureErrorNotification.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useState } from 'react';\nimport { Placement } from '@floating-ui/react';\nimport { useCall, useI18n } from '@stream-io/video-react-bindings';\nimport { Notification } from './Notification';\n\nexport type MicCaptureErrorNotificationProps = {\n  /**\n   * Text message displayed by the notification.\n   */\n  text?: string;\n  placement?: Placement;\n};\n\nexport const MicCaptureErrorNotification = ({\n  children,\n  text,\n  placement,\n}: PropsWithChildren<MicCaptureErrorNotificationProps>) => {\n  const call = useCall();\n  const { t } = useI18n();\n  const [isVisible, setIsVisible] = useState(false);\n  useEffect(() => {\n    if (!call) return;\n    return call.on('mic.capture_report', (event) => {\n      setIsVisible(!event.capturesAudio);\n    });\n  }, [call]);\n\n  const message =\n    text ??\n    t('Your microphone is not capturing audio. Please check your setup.');\n\n  return (\n    <Notification\n      message={message}\n      isVisible={isVisible}\n      placement={placement}\n      close={() => setIsVisible(false)}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAaO,MAAM,2BAA2B,GAAG,CAAC,EAC1C,QAAQ,EACR,IAAI,EACJ,SAAS,GAC2C,KAAI;AACxD,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACjD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,OAAO,IAAI,CAAC,EAAE,CAAC,oBAAoB,EAAE,CAAC,KAAK,KAAI;AAC7C,YAAA,YAAY,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC;AACpC,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEV,MAAM,OAAO,GACX,IAAI;QACJ,CAAC,CAAC,kEAAkE,CAAC;AAEvE,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAA,QAAA,EAE/B,QAAQ,EAAA,CACI;AAEnB;;;;"}
+{"version":3,"file":"MicCaptureErrorNotification.js","sources":["../../../../../../../src/components/Notification/MicCaptureErrorNotification.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useState } from 'react';\nimport { Placement } from '@floating-ui/react';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport { Notification } from './Notification';\n\nexport type MicCaptureErrorNotificationProps = {\n  /**\n   * Text message displayed by the notification.\n   */\n  text?: string;\n  placement?: Placement;\n};\n\nexport const MicCaptureErrorNotification = ({\n  children,\n  text,\n  placement,\n}: PropsWithChildren<MicCaptureErrorNotificationProps>) => {\n  const call = useCall();\n  const { t } = useI18n();\n  const [isVisible, setIsVisible] = useState(false);\n  useEffect(() => {\n    if (!call) return;\n    return call.on('mic.capture_report', (event) => {\n      setIsVisible(!event.capturesAudio);\n    });\n  }, [call]);\n\n  const message =\n    text ??\n    t(\n      'notification.micCaptureError.text',\n      'Your microphone is not capturing audio. Please check your setup.',\n    );\n\n  return (\n    <Notification\n      message={message}\n      state=\"error\"\n      isVisible={isVisible}\n      placement={placement}\n      close={() => setIsVisible(false)}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AAcO,MAAM,2BAA2B,GAAG,CAAC,EAC1C,QAAQ,EACR,IAAI,EACJ,SAAS,GAC2C,KAAI;AACxD,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACjD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,OAAO,IAAI,CAAC,EAAE,CAAC,oBAAoB,EAAE,CAAC,KAAK,KAAI;AAC7C,YAAA,YAAY,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC;AACpC,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEV,MAAM,OAAO,GACX,IAAI;AACJ,QAAA,CAAC,CACC,mCAAmC,EACnC,kEAAkE,CACnE;AAEH,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAA,QAAA,EAE/B,QAAQ,EAAA,CACI;AAEnB;;;;"}

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

@@ -3,10 +3,18 @@ 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';
 
+const ICON_BY_STATE = {
+    success: 'checkmark',
+    error: 'exclamation-circle-fill',
+    loading: 'loading',
+};
 const Notification = (props) => {
-    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, iconClassName = 'str-video__notification__icon', close, } = props;
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, state, close, } = props;
     const { refs, x, y, strategy } = useFloatingUIPreset({
         placement,
         strategy: 'absolute',
@@ -19,12 +27,13 @@ const Notification = (props) => {
         }, visibilityTimeout);
         return () => clearTimeout(timeout);
     }, [isVisible, resetIsVisible, visibilityTimeout]);
-    return (jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxs("div", { className: clsx('str-video__notification', className), ref: refs.setFloating, style: {
+    const icon = state && `str-video__icon str-video__icon--${ICON_BY_STATE[state]}`;
+    return (jsxs("div", { className: "str-video__notification-wrapper", ref: refs.setReference, children: [isVisible && (jsxs("div", { className: clsx('str-video__notification', state && `str-video__notification--${state}`, close && 'str-video__notification--dismissible', className), ref: refs.setFloating, style: {
                     position: strategy,
                     top: y ?? 0,
                     left: x ?? 0,
                     overflowY: 'auto',
-                }, children: [iconClassName && jsx("i", { className: iconClassName }), jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
+                }, children: [icon && jsx("i", { className: icon }), jsx("span", { className: "str-video__notification__message", children: message }), close ? (jsx("i", { className: "str-video__icon str-video__icon--close str-video__notification__close", onClick: close })) : null] })), children] }));
 };
 
 export { Notification };

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { PropsWithChildren, ReactNode, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { Placement } from '@floating-ui/react';\nimport { useFloatingUIPreset } from '../../hooks';\n\nexport type NotificationProps = {\n  message?: ReactNode;\n  isVisible?: boolean;\n  visibilityTimeout?: number;\n  resetIsVisible?: () => void;\n  placement?: Placement;\n  className?: string;\n  iconClassName?: string | null;\n  close?: () => void;\n};\n\nexport const Notification = (props: PropsWithChildren<NotificationProps>) => {\n  const {\n    isVisible,\n    message,\n    children,\n    visibilityTimeout,\n    resetIsVisible,\n    placement = 'top',\n    className,\n    iconClassName = 'str-video__notification__icon',\n    close,\n  } = props;\n\n  const { refs, x, y, strategy } = useFloatingUIPreset({\n    placement,\n    strategy: 'absolute',\n  });\n\n  useEffect(() => {\n    if (!isVisible || !visibilityTimeout || !resetIsVisible) return;\n\n    const timeout = setTimeout(() => {\n      resetIsVisible();\n    }, visibilityTimeout);\n\n    return () => clearTimeout(timeout);\n  }, [isVisible, resetIsVisible, visibilityTimeout]);\n\n  return (\n    <div className=\"str-video__notification-wrapper\" ref={refs.setReference}>\n      {isVisible && (\n        <div\n          className={clsx('str-video__notification', className)}\n          ref={refs.setFloating}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            overflowY: 'auto',\n          }}\n        >\n          {iconClassName && <i className={iconClassName} />}\n          <span className=\"str-video__notification__message\">{message}</span>\n          {close ? (\n            <i\n              className=\"str-video__icon str-video__icon--close str-video__notification__close\"\n              onClick={close}\n            />\n          ) : null}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAgBO,MAAM,YAAY,GAAG,CAAC,KAA2C,KAAI;IAC1E,MAAM,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,aAAa,GAAG,+BAA+B,EAC/C,KAAK,GACN,GAAG,KAAK;IAET,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC;QACnD,SAAS;AACT,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,iBAAiB,IAAI,CAAC,cAAc;YAAE;AAEzD,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;AAC9B,YAAA,cAAc,EAAE;QAClB,CAAC,EAAE,iBAAiB,CAAC;AAErB,QAAA,OAAO,MAAM,YAAY,CAAC,OAAO,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,iBAAiB,CAAC,CAAC;AAElD,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,IAAI,CAAC,YAAY,EAAA,QAAA,EAAA,CACpE,SAAS,KACRA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,EACrD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,oBAAA,QAAQ,EAAE,QAAQ;oBAClB,GAAG,EAAE,CAAC,IAAI,CAAC;oBACX,IAAI,EAAE,CAAC,IAAI,CAAC;AACZ,oBAAA,SAAS,EAAE,MAAM;AAClB,iBAAA,EAAA,QAAA,EAAA,CAEA,aAAa,IAAIC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,aAAa,GAAI,EACjDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAE,OAAO,GAAQ,EAClE,KAAK,IACJA,GAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAC,uEAAuE,EACjF,OAAO,EAAE,KAAK,EAAA,CACd,IACA,IAAI,CAAA,EAAA,CACJ,CACP,EACA,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"Notification.js","sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { PropsWithChildren, ReactNode, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { Placement } from '@floating-ui/react';\nimport { useFloatingUIPreset } from '../../hooks';\n\nexport type NotificationState = 'success' | 'error' | 'loading';\n\nconst ICON_BY_STATE: Record<NotificationState, string> = {\n  success: 'checkmark',\n  error: 'exclamation-circle-fill',\n  loading: 'loading',\n};\n\nexport type NotificationProps = {\n  message?: ReactNode;\n  isVisible?: boolean;\n  visibilityTimeout?: number;\n  resetIsVisible?: () => void;\n  placement?: Placement;\n  className?: string;\n  state?: NotificationState;\n  close?: () => void;\n};\n\nexport const Notification = (props: PropsWithChildren<NotificationProps>) => {\n  const {\n    isVisible,\n    message,\n    children,\n    visibilityTimeout,\n    resetIsVisible,\n    placement = 'top',\n    className,\n    state,\n    close,\n  } = props;\n\n  const { refs, x, y, strategy } = useFloatingUIPreset({\n    placement,\n    strategy: 'absolute',\n  });\n\n  useEffect(() => {\n    if (!isVisible || !visibilityTimeout || !resetIsVisible) return;\n\n    const timeout = setTimeout(() => {\n      resetIsVisible();\n    }, visibilityTimeout);\n\n    return () => clearTimeout(timeout);\n  }, [isVisible, resetIsVisible, visibilityTimeout]);\n\n  const icon =\n    state && `str-video__icon str-video__icon--${ICON_BY_STATE[state]}`;\n\n  return (\n    <div className=\"str-video__notification-wrapper\" ref={refs.setReference}>\n      {isVisible && (\n        <div\n          className={clsx(\n            'str-video__notification',\n            state && `str-video__notification--${state}`,\n            close && 'str-video__notification--dismissible',\n            className,\n          )}\n          ref={refs.setFloating}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            overflowY: 'auto',\n          }}\n        >\n          {icon && <i className={icon} />}\n          <span className=\"str-video__notification__message\">{message}</span>\n          {close ? (\n            <i\n              className=\"str-video__icon str-video__icon--close str-video__notification__close\"\n              onClick={close}\n            />\n          ) : null}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAOA,MAAM,aAAa,GAAsC;AACvD,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,KAAK,EAAE,yBAAyB;AAChC,IAAA,OAAO,EAAE,SAAS;CACnB;AAaM,MAAM,YAAY,GAAG,CAAC,KAA2C,KAAI;IAC1E,MAAM,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,KAAK,EACL,KAAK,GACN,GAAG,KAAK;IAET,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC;QACnD,SAAS;AACT,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,iBAAiB,IAAI,CAAC,cAAc;YAAE;AAEzD,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;AAC9B,YAAA,cAAc,EAAE;QAClB,CAAC,EAAE,iBAAiB,CAAC;AAErB,QAAA,OAAO,MAAM,YAAY,CAAC,OAAO,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,iBAAiB,CAAC,CAAC;IAElD,MAAM,IAAI,GACR,KAAK,IAAI,CAAA,iCAAA,EAAoC,aAAa,CAAC,KAAK,CAAC,CAAA,CAAE;AAErE,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAC,GAAG,EAAE,IAAI,CAAC,YAAY,EAAA,QAAA,EAAA,CACpE,SAAS,KACRA,cACE,SAAS,EAAE,IAAI,CACb,yBAAyB,EACzB,KAAK,IAAI,CAAA,yBAAA,EAA4B,KAAK,EAAE,EAC5C,KAAK,IAAI,sCAAsC,EAC/C,SAAS,CACV,EACD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,oBAAA,QAAQ,EAAE,QAAQ;oBAClB,GAAG,EAAE,CAAC,IAAI,CAAC;oBACX,IAAI,EAAE,CAAC,IAAI,CAAC;AACZ,oBAAA,SAAS,EAAE,MAAM;AAClB,iBAAA,EAAA,QAAA,EAAA,CAEA,IAAI,IAAIC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,IAAI,GAAI,EAC/BA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAE,OAAO,GAAQ,EAClE,KAAK,IACJA,GAAA,CAAA,GAAA,EAAA,EACE,SAAS,EAAC,uEAAuE,EACjF,OAAO,EAAE,KAAK,EAAA,CACd,IACA,IAAI,CAAA,EAAA,CACJ,CACP,EACA,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/components/Notification/PermissionNotification.js

@@ -23,9 +23,9 @@ const PermissionNotification = (props) => {
     }, [hasPermission]);
     const resetIsVisible = useCallback(() => setShowNotification(undefined), []);
     if (isAwaitingApproval) {
-        return (jsx(Notification, { isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
+        return (jsx(Notification, { state: "loading", isVisible: isAwaitingApproval && !hasPermission, message: messageAwaitingApproval, children: children }));
     }
-    return (jsx(Notification, { isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
+    return (jsx(Notification, { state: showNotification === 'granted' ? 'success' : 'error', isVisible: !!showNotification, visibilityTimeout: visibilityTimeout, resetIsVisible: resetIsVisible, message: showNotification === 'granted' ? messageApproved : messageRevoked, children: children }));
 };
 
 export { PermissionNotification };

package/dist/esm/src/components/Notification/PermissionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionNotification.js","sources":["../../../../../../../src/components/Notification/PermissionNotification.tsx"],"sourcesContent":["import { Notification } from './Notification';\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport type PermissionNotificationProps = PropsWithChildren<{\n  /**\n   * Set this to true if there is ongoing request for the permission.\n   */\n  isAwaitingApproval: boolean;\n\n  /**\n   * The message to display in the notification once\n   * the requested permission is granted.\n   */\n  messageApproved: string;\n\n  /**\n   * The message to display in the notification once a permission\n   * is revoked.\n   */\n  messageRevoked: string;\n\n  /**\n   * The message to display in the notification while\n   * the requested permission is awaiting approval.\n   */\n  messageAwaitingApproval: string;\n\n  /**\n   * The permission to check for.\n   */\n  permission: OwnCapability;\n\n  /**\n   * The time in milliseconds to display the notification.\n   * Defaults to 3500ms.\n   */\n  visibilityTimeout?: number;\n}>;\n\nexport const PermissionNotification = (props: PermissionNotificationProps) => {\n  const {\n    permission,\n    isAwaitingApproval,\n    messageApproved,\n    messageAwaitingApproval,\n    messageRevoked,\n    visibilityTimeout = 3500,\n    children,\n  } = props;\n  const { useHasPermissions } = useCallStateHooks();\n  const hasPermission = useHasPermissions(permission);\n  const prevHasPermission = useRef(hasPermission);\n  const [showNotification, setShowNotification] = useState<\n    'granted' | 'revoked'\n  >();\n  useEffect(() => {\n    if (prevHasPermission.current === hasPermission) return;\n\n    if (hasPermission) {\n      setShowNotification('granted');\n      prevHasPermission.current = true;\n    } else {\n      setShowNotification('revoked');\n      prevHasPermission.current = false;\n    }\n  }, [hasPermission]);\n\n  const resetIsVisible = useCallback(() => setShowNotification(undefined), []);\n  if (isAwaitingApproval) {\n    return (\n      <Notification\n        isVisible={isAwaitingApproval && !hasPermission}\n        message={messageAwaitingApproval}\n      >\n        {children}\n      </Notification>\n    );\n  }\n\n  return (\n    <Notification\n      isVisible={!!showNotification}\n      visibilityTimeout={visibilityTimeout}\n      resetIsVisible={resetIsVisible}\n      message={\n        showNotification === 'granted' ? messageApproved : messageRevoked\n      }\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AA+CO,MAAM,sBAAsB,GAAG,CAAC,KAAkC,KAAI;AAC3E,IAAA,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,cAAc,EACd,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK;AACT,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE;AACjD,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,CAAC;AACnD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,aAAa,CAAC;IAC/C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAErD;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,aAAa;YAAE;QAEjD,IAAI,aAAa,EAAE;YACjB,mBAAmB,CAAC,SAAS,CAAC;AAC9B,YAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;QAClC;aAAO;YACL,mBAAmB,CAAC,SAAS,CAAC;AAC9B,YAAA,iBAAiB,CAAC,OAAO,GAAG,KAAK;QACnC;AACF,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,mBAAmB,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;IAC5E,IAAI,kBAAkB,EAAE;AACtB,QAAA,QACEA,GAAA,CAAC,YAAY,IACX,SAAS,EAAE,kBAAkB,IAAI,CAAC,aAAa,EAC/C,OAAO,EAAE,uBAAuB,YAE/B,QAAQ,EAAA,CACI;IAEnB;AAEA,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,OAAO,EACL,gBAAgB,KAAK,SAAS,GAAG,eAAe,GAAG,cAAc,EAAA,QAAA,EAGlE,QAAQ,EAAA,CACI;AAEnB;;;;"}
+{"version":3,"file":"PermissionNotification.js","sources":["../../../../../../../src/components/Notification/PermissionNotification.tsx"],"sourcesContent":["import { Notification } from './Notification';\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n  PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport type PermissionNotificationProps = PropsWithChildren<{\n  /**\n   * Set this to true if there is ongoing request for the permission.\n   */\n  isAwaitingApproval: boolean;\n\n  /**\n   * The message to display in the notification once\n   * the requested permission is granted.\n   */\n  messageApproved: string;\n\n  /**\n   * The message to display in the notification once a permission\n   * is revoked.\n   */\n  messageRevoked: string;\n\n  /**\n   * The message to display in the notification while\n   * the requested permission is awaiting approval.\n   */\n  messageAwaitingApproval: string;\n\n  /**\n   * The permission to check for.\n   */\n  permission: OwnCapability;\n\n  /**\n   * The time in milliseconds to display the notification.\n   * Defaults to 3500ms.\n   */\n  visibilityTimeout?: number;\n}>;\n\nexport const PermissionNotification = (props: PermissionNotificationProps) => {\n  const {\n    permission,\n    isAwaitingApproval,\n    messageApproved,\n    messageAwaitingApproval,\n    messageRevoked,\n    visibilityTimeout = 3500,\n    children,\n  } = props;\n  const { useHasPermissions } = useCallStateHooks();\n  const hasPermission = useHasPermissions(permission);\n  const prevHasPermission = useRef(hasPermission);\n  const [showNotification, setShowNotification] = useState<\n    'granted' | 'revoked'\n  >();\n  useEffect(() => {\n    if (prevHasPermission.current === hasPermission) return;\n\n    if (hasPermission) {\n      setShowNotification('granted');\n      prevHasPermission.current = true;\n    } else {\n      setShowNotification('revoked');\n      prevHasPermission.current = false;\n    }\n  }, [hasPermission]);\n\n  const resetIsVisible = useCallback(() => setShowNotification(undefined), []);\n  if (isAwaitingApproval) {\n    return (\n      <Notification\n        state=\"loading\"\n        isVisible={isAwaitingApproval && !hasPermission}\n        message={messageAwaitingApproval}\n      >\n        {children}\n      </Notification>\n    );\n  }\n\n  return (\n    <Notification\n      state={showNotification === 'granted' ? 'success' : 'error'}\n      isVisible={!!showNotification}\n      visibilityTimeout={visibilityTimeout}\n      resetIsVisible={resetIsVisible}\n      message={\n        showNotification === 'granted' ? messageApproved : messageRevoked\n      }\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AA+CO,MAAM,sBAAsB,GAAG,CAAC,KAAkC,KAAI;AAC3E,IAAA,MAAM,EACJ,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,uBAAuB,EACvB,cAAc,EACd,iBAAiB,GAAG,IAAI,EACxB,QAAQ,GACT,GAAG,KAAK;AACT,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE;AACjD,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,CAAC;AACnD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,aAAa,CAAC;IAC/C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,EAErD;IACH,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,aAAa;YAAE;QAEjD,IAAI,aAAa,EAAE;YACjB,mBAAmB,CAAC,SAAS,CAAC;AAC9B,YAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;QAClC;aAAO;YACL,mBAAmB,CAAC,SAAS,CAAC;AAC9B,YAAA,iBAAiB,CAAC,OAAO,GAAG,KAAK;QACnC;AACF,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,mBAAmB,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;IAC5E,IAAI,kBAAkB,EAAE;QACtB,QACEA,IAAC,YAAY,EAAA,EACX,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,kBAAkB,IAAI,CAAC,aAAa,EAC/C,OAAO,EAAE,uBAAuB,EAAA,QAAA,EAE/B,QAAQ,EAAA,CACI;IAEnB;IAEA,QACEA,IAAC,YAAY,EAAA,EACX,KAAK,EAAE,gBAAgB,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,EAC3D,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,OAAO,EACL,gBAAgB,KAAK,SAAS,GAAG,eAAe,GAAG,cAAc,EAAA,QAAA,EAGlE,QAAQ,EAAA,CACI;AAEnB;;;;"}

package/dist/esm/src/components/Notification/RecordingInProgressNotification.js

@@ -1,13 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { useI18n, useToggleCallRecording } from '@stream-io/video-react-bindings';
+import { useToggleCallRecording } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { Notification } from './Notification.js';
 
 const RecordingInProgressNotification = ({ children, text, }) => {
     const { t } = useI18n();
     const { isCallRecordingInProgress } = useToggleCallRecording();
     const [isVisible, setVisible] = useState(false);
-    const message = text ?? t('Recording in progress...');
+    const message = text ??
+        t('notification.recordingInProgress.text', 'Recording in progress...');
     useEffect(() => {
         if (isCallRecordingInProgress) {
             setVisible(true);
@@ -16,7 +20,7 @@ const RecordingInProgressNotification = ({ children, text, }) => {
             setVisible(false);
         }
     }, [isCallRecordingInProgress]);
-    return (jsx(Notification, { message: message, iconClassName: "str-video__icon str-video__icon--recording-on", isVisible: isVisible, placement: "top-start", close: () => setVisible(false), children: children }));
+    return (jsx(Notification, { message: message, isVisible: isVisible, placement: "top-start", close: () => setVisible(false), children: children }));
 };
 
 export { RecordingInProgressNotification };

package/dist/esm/src/components/Notification/RecordingInProgressNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecordingInProgressNotification.js","sources":["../../../../../../../src/components/Notification/RecordingInProgressNotification.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useState } from 'react';\nimport {\n  useI18n,\n  useToggleCallRecording,\n} from '@stream-io/video-react-bindings';\nimport { Notification } from './Notification';\n\nexport type RecordingInProgressNotificationProps = {\n  text?: string;\n};\n\nexport const RecordingInProgressNotification = ({\n  children,\n  text,\n}: PropsWithChildren<RecordingInProgressNotificationProps>) => {\n  const { t } = useI18n();\n  const { isCallRecordingInProgress } = useToggleCallRecording();\n\n  const [isVisible, setVisible] = useState(false);\n\n  const message = text ?? t('Recording in progress...');\n\n  useEffect(() => {\n    if (isCallRecordingInProgress) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  }, [isCallRecordingInProgress]);\n\n  return (\n    <Notification\n      message={message}\n      iconClassName=\"str-video__icon str-video__icon--recording-on\"\n      isVisible={isVisible}\n      placement=\"top-start\"\n      close={() => setVisible(false)}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AAWO,MAAM,+BAA+B,GAAG,CAAC,EAC9C,QAAQ,EACR,IAAI,GACoD,KAAI;AAC5D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,yBAAyB,EAAE,GAAG,sBAAsB,EAAE;IAE9D,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC,0BAA0B,CAAC;IAErD,SAAS,CAAC,MAAK;QACb,IAAI,yBAAyB,EAAE;YAC7B,UAAU,CAAC,IAAI,CAAC;QAClB;aAAO;YACL,UAAU,CAAC,KAAK,CAAC;QACnB;AACF,IAAA,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC;AAE/B,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,+CAA+C,EAC7D,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE,MAAM,UAAU,CAAC,KAAK,CAAC,EAAA,QAAA,EAE7B,QAAQ,EAAA,CACI;AAEnB;;;;"}
+{"version":3,"file":"RecordingInProgressNotification.js","sources":["../../../../../../../src/components/Notification/RecordingInProgressNotification.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useState } from 'react';\nimport { useToggleCallRecording } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport { Notification } from './Notification';\n\nexport type RecordingInProgressNotificationProps = {\n  text?: string;\n};\n\nexport const RecordingInProgressNotification = ({\n  children,\n  text,\n}: PropsWithChildren<RecordingInProgressNotificationProps>) => {\n  const { t } = useI18n();\n  const { isCallRecordingInProgress } = useToggleCallRecording();\n\n  const [isVisible, setVisible] = useState(false);\n\n  const message =\n    text ??\n    t('notification.recordingInProgress.text', 'Recording in progress...');\n\n  useEffect(() => {\n    if (isCallRecordingInProgress) {\n      setVisible(true);\n    } else {\n      setVisible(false);\n    }\n  }, [isCallRecordingInProgress]);\n\n  return (\n    <Notification\n      message={message}\n      isVisible={isVisible}\n      placement=\"top-start\"\n      close={() => setVisible(false)}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AASO,MAAM,+BAA+B,GAAG,CAAC,EAC9C,QAAQ,EACR,IAAI,GACoD,KAAI;AAC5D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,yBAAyB,EAAE,GAAG,sBAAsB,EAAE;IAE9D,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,MAAM,OAAO,GACX,IAAI;AACJ,QAAA,CAAC,CAAC,uCAAuC,EAAE,0BAA0B,CAAC;IAExE,SAAS,CAAC,MAAK;QACb,IAAI,yBAAyB,EAAE;YAC7B,UAAU,CAAC,IAAI,CAAC;QAClB;aAAO;YACL,UAAU,CAAC,KAAK,CAAC;QACnB;AACF,IAAA,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC;AAE/B,IAAA,QACEA,GAAA,CAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE,MAAM,UAAU,CAAC,KAAK,CAAC,EAAA,QAAA,EAE7B,QAAQ,EAAA,CACI;AAEnB;;;;"}

package/dist/esm/src/components/Notification/SpeakingWhileMutedNotification.js

@@ -1,12 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import 'react';
+import '@stream-io/i18n/react';
 import { Notification } from './Notification.js';
 
 const SpeakingWhileMutedNotification = ({ children, text, placement, }) => {
     const { useMicrophoneState } = useCallStateHooks();
     const { isSpeakingWhileMuted } = useMicrophoneState();
     const { t } = useI18n();
-    const message = text ?? t('You are muted. Unmute to speak.');
+    const message = text ??
+        t('notification.speakingWhileMuted.text', 'You are muted. Unmute to speak.');
     return (jsx(Notification, { message: message, isVisible: isSpeakingWhileMuted, placement: placement || 'top-start', children: children }));
 };
 

package/dist/esm/src/components/Notification/SpeakingWhileMutedNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeakingWhileMutedNotification.js","sources":["../../../../../../../src/components/Notification/SpeakingWhileMutedNotification.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\nimport { Placement } from '@floating-ui/react';\n\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { Notification } from './Notification';\n\nexport type SpeakingWhileMutedNotificationProps = {\n  /**\n   * Text message displayed by the notification.\n   */\n  text?: string;\n  placement?: Placement;\n};\n\nexport const SpeakingWhileMutedNotification = ({\n  children,\n  text,\n  placement,\n}: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { isSpeakingWhileMuted } = useMicrophoneState();\n  const { t } = useI18n();\n\n  const message = text ?? t('You are muted. Unmute to speak.');\n  return (\n    <Notification\n      message={message}\n      isVisible={isSpeakingWhileMuted}\n      placement={placement || 'top-start'}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;AAcO,MAAM,8BAA8B,GAAG,CAAC,EAC7C,QAAQ,EACR,IAAI,EACJ,SAAS,GAC8C,KAAI;AAC3D,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;AAClD,IAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,EAAE;AACrD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC,iCAAiC,CAAC;IAC5D,QACEA,IAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,SAAS,EAAE,SAAS,IAAI,WAAW,EAAA,QAAA,EAElC,QAAQ,EAAA,CACI;AAEnB;;;;"}
+{"version":3,"file":"SpeakingWhileMutedNotification.js","sources":["../../../../../../../src/components/Notification/SpeakingWhileMutedNotification.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\nimport { Placement } from '@floating-ui/react';\n\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport { Notification } from './Notification';\n\nexport type SpeakingWhileMutedNotificationProps = {\n  /**\n   * Text message displayed by the notification.\n   */\n  text?: string;\n  placement?: Placement;\n};\n\nexport const SpeakingWhileMutedNotification = ({\n  children,\n  text,\n  placement,\n}: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { isSpeakingWhileMuted } = useMicrophoneState();\n  const { t } = useI18n();\n\n  const message =\n    text ??\n    t(\n      'notification.speakingWhileMuted.text',\n      'You are muted. Unmute to speak.',\n    );\n  return (\n    <Notification\n      message={message}\n      isVisible={isSpeakingWhileMuted}\n      placement={placement || 'top-start'}\n    >\n      {children}\n    </Notification>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;AAeO,MAAM,8BAA8B,GAAG,CAAC,EAC7C,QAAQ,EACR,IAAI,EACJ,SAAS,GAC8C,KAAI;AAC3D,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;AAClD,IAAA,MAAM,EAAE,oBAAoB,EAAE,GAAG,kBAAkB,EAAE;AACrD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,MAAM,OAAO,GACX,IAAI;AACJ,QAAA,CAAC,CACC,sCAAsC,EACtC,iCAAiC,CAClC;IACH,QACEA,IAAC,YAAY,EAAA,EACX,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,SAAS,EAAE,SAAS,IAAI,WAAW,EAAA,QAAA,EAElC,QAAQ,EAAA,CACI;AAEnB;;;;"}

package/dist/esm/src/components/Permissions/PermissionRequests.js

@@ -1,8 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, Fragment, useState, useEffect } from 'react';
 import { OwnCapability } from '@stream-io/video-client';
-import { useI18n, useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import clsx from 'clsx';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
+import { Button } from '../Button/Button.js';
+import '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
 import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset.js';
 
 const byNameOrId = (a, b) => {
@@ -54,7 +59,7 @@ const PermissionRequests = () => {
     // don't render anything if there are no permission requests
     if (permissionRequests.length === 0)
         return null;
-    return (jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsx(Button, { type: "button", onClick: () => {
+    return (jsxs("div", { className: "str-video__permission-requests", ref: refs.setReference, children: [jsxs("div", { className: "str-video__permission-requests__notification", children: [jsxs("span", { className: "str-video__permission-requests__notification__message", children: [permissionRequests.length, " pending permission requests"] }), jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button", onClick: () => {
                             setExpanded((e) => !e);
                         }, children: expanded ? 'Hide requests' : 'Show requests' })] }), expanded && (jsx(PermissionRequestList, { ref: refs.setFloating, style: {
                     position: strategy,
@@ -68,27 +73,23 @@ const PermissionRequestList = forwardRef(function PermissionRequestListRender(pr
     const { t } = useI18n();
     return (jsx("div", { className: "str-video__permission-requests-list", ref: ref, ...rest, children: permissionRequests.map((request, reqIndex) => {
             const { user, permissions } = request;
-            return (jsx(Fragment, { children: permissions.map((permission) => (jsxs("div", { className: "str-video__permission-request", children: [jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsx(Button, { className: "str-video__permission-request__button--allow", type: "button", onClick: handleUpdatePermission(request, 'grant'), children: t('Allow') }), jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'revoke'), children: t('Revoke') }), jsx(Button, { className: "str-video__permission-request__button--reject", type: "button", onClick: handleUpdatePermission(request, 'dismiss'), children: t('Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
+            return (jsx(Fragment, { children: permissions.map((permission) => (jsxs("div", { className: "str-video__permission-request", children: [jsx("div", { className: "str-video__permission-request__message", children: messageForPermission(user.name || user.id, permission, t) }), jsx(Button, { variant: "primary", appearance: "solid", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--allow", onClick: handleUpdatePermission(request, 'grant'), children: t('common.allow.label', 'Allow') }), jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--reject", onClick: handleUpdatePermission(request, 'revoke'), children: t('common.revoke.label', 'Revoke') }), jsx(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__permission-request__button str-video__permission-request__button--reject", onClick: handleUpdatePermission(request, 'dismiss'), children: t('common.dismiss.label', 'Dismiss') })] }, permission))) }, `${user.id}/${reqIndex}`));
         }) }));
 });
-const Button = (props) => {
-    const { className, ...rest } = props;
-    return (jsx("button", { className: clsx('str-video__permission-request__button', className), ...rest }));
-};
 const messageForPermission = (userName, permission, t) => {
     switch (permission) {
         case OwnCapability.SEND_AUDIO:
-            return t('{{ userName }} is requesting to speak', { userName });
+            return t('permissions.requestingToSpeak.text', '{{ userName }} is requesting to speak', { userName });
         case OwnCapability.SEND_VIDEO:
-            return t('{{ userName }} is requesting to share their camera', {
+            return t('permissions.requestingCamera.text', '{{ userName }} is requesting to share their camera', {
                 userName,
             });
         case OwnCapability.SCREENSHARE:
-            return t('{{ userName }} is requesting to present their screen', {
+            return t('permissions.requestingScreenShare.text', '{{ userName }} is requesting to present their screen', {
                 userName,
             });
         default:
-            return t('{{ userName }} is requesting permission: {{ permission }}', {
+            return t('permissions.requestingPermission.text', '{{ userName }} is requesting permission: {{ permission }}', {
                 userName,
                 permission,
             });

package/dist/esm/src/components/Permissions/PermissionRequests.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionRequests.js","sources":["../../../../../../../src/components/Permissions/PermissionRequests.tsx"],"sourcesContent":["import {\n  ButtonHTMLAttributes,\n  ComponentProps,\n  forwardRef,\n  Fragment,\n  PropsWithChildren,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  OwnCapability,\n  PermissionRequestEvent,\n  UserResponse,\n} from '@stream-io/video-client';\nimport {\n  TranslatorFunction,\n  useCall,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\n\nimport { useFloatingUIPreset } from '../../hooks';\n\nconst byNameOrId = (a: UserResponse, b: UserResponse) => {\n  if (a.name && b.name && a.name < b.name) return -1;\n  if (a.name && b.name && a.name > b.name) return 1;\n  if (a.id < b.id) return -1;\n  if (a.id > b.id) return 1;\n  return 0;\n};\n\ntype HandleUpdatePermission = (\n  request: PermissionRequestEvent,\n  type: 'grant' | 'revoke' | 'dismiss',\n) => () => Promise<void>;\n\nexport const PermissionRequests = () => {\n  const call = useCall();\n  const { useLocalParticipant, useHasPermissions } = useCallStateHooks();\n  const localParticipant = useLocalParticipant();\n  const [expanded, setExpanded] = useState(false);\n  const [permissionRequests, setPermissionRequests] = useState<\n    PermissionRequestEvent[]\n  >([]);\n  const canUpdateCallPermissions = useHasPermissions(\n    OwnCapability.UPDATE_CALL_PERMISSIONS,\n  );\n\n  const localUserId = localParticipant?.userId;\n  useEffect(() => {\n    if (!call || !canUpdateCallPermissions) return;\n    return call.on('call.permission_request', (event) => {\n      if (event.user.id !== localUserId) {\n        setPermissionRequests((requests) =>\n          [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)),\n        );\n      }\n    });\n  }, [call, canUpdateCallPermissions, localUserId]);\n\n  const handleUpdatePermission: HandleUpdatePermission = (request, type) => {\n    return async () => {\n      const { user, permissions } = request;\n      switch (type) {\n        case 'grant':\n          await call?.grantPermissions(user.id, permissions);\n          break;\n        case 'revoke':\n          await call?.revokePermissions(user.id, permissions);\n          break;\n        default:\n          break;\n      }\n      setPermissionRequests((requests) =>\n        requests.filter((r) => r !== request),\n      );\n    };\n  };\n\n  const { refs, x, y, strategy } = useFloatingUIPreset({\n    placement: 'bottom',\n    strategy: 'absolute',\n  });\n\n  // don't render anything if there are no permission requests\n  if (permissionRequests.length === 0) return null;\n\n  return (\n    <div className=\"str-video__permission-requests\" ref={refs.setReference}>\n      <div className=\"str-video__permission-requests__notification\">\n        <span className=\"str-video__permission-requests__notification__message\">\n          {permissionRequests.length} pending permission requests\n        </span>\n        <Button\n          type=\"button\"\n          onClick={() => {\n            setExpanded((e) => !e);\n          }}\n        >\n          {expanded ? 'Hide requests' : 'Show requests'}\n        </Button>\n      </div>\n      {expanded && (\n        <PermissionRequestList\n          ref={refs.setFloating}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            overflowY: 'auto',\n          }}\n          permissionRequests={permissionRequests}\n          handleUpdatePermission={handleUpdatePermission}\n        />\n      )}\n    </div>\n  );\n};\n\nexport type PermissionRequestListProps = ComponentProps<'div'> & {\n  permissionRequests: PermissionRequestEvent[];\n  handleUpdatePermission: HandleUpdatePermission;\n};\n\nexport const PermissionRequestList = forwardRef<\n  HTMLDivElement,\n  PermissionRequestListProps\n>(function PermissionRequestListRender(props, ref) {\n  const { permissionRequests, handleUpdatePermission, ...rest } = props;\n\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__permission-requests-list\" ref={ref} {...rest}>\n      {permissionRequests.map((request, reqIndex) => {\n        const { user, permissions } = request;\n        return (\n          <Fragment key={`${user.id}/${reqIndex}`}>\n            {permissions.map((permission) => (\n              <div className=\"str-video__permission-request\" key={permission}>\n                <div className=\"str-video__permission-request__message\">\n                  {messageForPermission(user.name || user.id, permission, t)}\n                </div>\n                <Button\n                  className=\"str-video__permission-request__button--allow\"\n                  type=\"button\"\n                  onClick={handleUpdatePermission(request, 'grant')}\n                >\n                  {t('Allow')}\n                </Button>\n                <Button\n                  className=\"str-video__permission-request__button--reject\"\n                  type=\"button\"\n                  onClick={handleUpdatePermission(request, 'revoke')}\n                >\n                  {t('Revoke')}\n                </Button>\n                <Button\n                  className=\"str-video__permission-request__button--reject\"\n                  type=\"button\"\n                  onClick={handleUpdatePermission(request, 'dismiss')}\n                >\n                  {t('Dismiss')}\n                </Button>\n              </div>\n            ))}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n});\n\nconst Button = (\n  props: PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>,\n) => {\n  const { className, ...rest } = props;\n  return (\n    <button\n      className={clsx('str-video__permission-request__button', className)}\n      {...rest}\n    />\n  );\n};\n\nconst messageForPermission = (\n  userName: string,\n  permission: string,\n  t: TranslatorFunction,\n) => {\n  switch (permission) {\n    case OwnCapability.SEND_AUDIO:\n      return t('{{ userName }} is requesting to speak', { userName });\n    case OwnCapability.SEND_VIDEO:\n      return t('{{ userName }} is requesting to share their camera', {\n        userName,\n      });\n    case OwnCapability.SCREENSHARE:\n      return t('{{ userName }} is requesting to present their screen', {\n        userName,\n      });\n    default:\n      return t('{{ userName }} is requesting permission: {{ permission }}', {\n        userName,\n        permission,\n      });\n  }\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PermissionRequests.js","sources":["../../../../../../../src/components/Permissions/PermissionRequests.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  forwardRef,\n  Fragment,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  OwnCapability,\n  PermissionRequestEvent,\n  UserResponse,\n} from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { StreamTFunction, useI18n } from '../../i18n';\n\nimport { Button } from '../Button';\nimport { useFloatingUIPreset } from '../../hooks';\n\nconst byNameOrId = (a: UserResponse, b: UserResponse) => {\n  if (a.name && b.name && a.name < b.name) return -1;\n  if (a.name && b.name && a.name > b.name) return 1;\n  if (a.id < b.id) return -1;\n  if (a.id > b.id) return 1;\n  return 0;\n};\n\ntype HandleUpdatePermission = (\n  request: PermissionRequestEvent,\n  type: 'grant' | 'revoke' | 'dismiss',\n) => () => Promise<void>;\n\nexport const PermissionRequests = () => {\n  const call = useCall();\n  const { useLocalParticipant, useHasPermissions } = useCallStateHooks();\n  const localParticipant = useLocalParticipant();\n  const [expanded, setExpanded] = useState(false);\n  const [permissionRequests, setPermissionRequests] = useState<\n    PermissionRequestEvent[]\n  >([]);\n  const canUpdateCallPermissions = useHasPermissions(\n    OwnCapability.UPDATE_CALL_PERMISSIONS,\n  );\n\n  const localUserId = localParticipant?.userId;\n  useEffect(() => {\n    if (!call || !canUpdateCallPermissions) return;\n    return call.on('call.permission_request', (event) => {\n      if (event.user.id !== localUserId) {\n        setPermissionRequests((requests) =>\n          [...requests, event].sort((a, b) => byNameOrId(a.user, b.user)),\n        );\n      }\n    });\n  }, [call, canUpdateCallPermissions, localUserId]);\n\n  const handleUpdatePermission: HandleUpdatePermission = (request, type) => {\n    return async () => {\n      const { user, permissions } = request;\n      switch (type) {\n        case 'grant':\n          await call?.grantPermissions(user.id, permissions);\n          break;\n        case 'revoke':\n          await call?.revokePermissions(user.id, permissions);\n          break;\n        default:\n          break;\n      }\n      setPermissionRequests((requests) =>\n        requests.filter((r) => r !== request),\n      );\n    };\n  };\n\n  const { refs, x, y, strategy } = useFloatingUIPreset({\n    placement: 'bottom',\n    strategy: 'absolute',\n  });\n\n  // don't render anything if there are no permission requests\n  if (permissionRequests.length === 0) return null;\n\n  return (\n    <div className=\"str-video__permission-requests\" ref={refs.setReference}>\n      <div className=\"str-video__permission-requests__notification\">\n        <span className=\"str-video__permission-requests__notification__message\">\n          {permissionRequests.length} pending permission requests\n        </span>\n        <Button\n          variant=\"secondary\"\n          appearance=\"outline\"\n          size=\"sm\"\n          className=\"str-video__permission-request__button\"\n          onClick={() => {\n            setExpanded((e) => !e);\n          }}\n        >\n          {expanded ? 'Hide requests' : 'Show requests'}\n        </Button>\n      </div>\n      {expanded && (\n        <PermissionRequestList\n          ref={refs.setFloating}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            overflowY: 'auto',\n          }}\n          permissionRequests={permissionRequests}\n          handleUpdatePermission={handleUpdatePermission}\n        />\n      )}\n    </div>\n  );\n};\n\nexport type PermissionRequestListProps = ComponentProps<'div'> & {\n  permissionRequests: PermissionRequestEvent[];\n  handleUpdatePermission: HandleUpdatePermission;\n};\n\nexport const PermissionRequestList = forwardRef<\n  HTMLDivElement,\n  PermissionRequestListProps\n>(function PermissionRequestListRender(props, ref) {\n  const { permissionRequests, handleUpdatePermission, ...rest } = props;\n\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__permission-requests-list\" ref={ref} {...rest}>\n      {permissionRequests.map((request, reqIndex) => {\n        const { user, permissions } = request;\n        return (\n          <Fragment key={`${user.id}/${reqIndex}`}>\n            {permissions.map((permission) => (\n              <div className=\"str-video__permission-request\" key={permission}>\n                <div className=\"str-video__permission-request__message\">\n                  {messageForPermission(user.name || user.id, permission, t)}\n                </div>\n                <Button\n                  variant=\"primary\"\n                  appearance=\"solid\"\n                  size=\"sm\"\n                  className=\"str-video__permission-request__button str-video__permission-request__button--allow\"\n                  onClick={handleUpdatePermission(request, 'grant')}\n                >\n                  {t('common.allow.label', 'Allow')}\n                </Button>\n                <Button\n                  variant=\"secondary\"\n                  appearance=\"outline\"\n                  size=\"sm\"\n                  className=\"str-video__permission-request__button str-video__permission-request__button--reject\"\n                  onClick={handleUpdatePermission(request, 'revoke')}\n                >\n                  {t('common.revoke.label', 'Revoke')}\n                </Button>\n                <Button\n                  variant=\"secondary\"\n                  appearance=\"outline\"\n                  size=\"sm\"\n                  className=\"str-video__permission-request__button str-video__permission-request__button--reject\"\n                  onClick={handleUpdatePermission(request, 'dismiss')}\n                >\n                  {t('common.dismiss.label', 'Dismiss')}\n                </Button>\n              </div>\n            ))}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n});\n\nconst messageForPermission = (\n  userName: string,\n  permission: string,\n  t: StreamTFunction,\n) => {\n  switch (permission) {\n    case OwnCapability.SEND_AUDIO:\n      return t(\n        'permissions.requestingToSpeak.text',\n        '{{ userName }} is requesting to speak',\n        { userName },\n      );\n    case OwnCapability.SEND_VIDEO:\n      return t(\n        'permissions.requestingCamera.text',\n        '{{ userName }} is requesting to share their camera',\n        {\n          userName,\n        },\n      );\n    case OwnCapability.SCREENSHARE:\n      return t(\n        'permissions.requestingScreenShare.text',\n        '{{ userName }} is requesting to present their screen',\n        {\n          userName,\n        },\n      );\n    default:\n      return t(\n        'permissions.requestingPermission.text',\n        '{{ userName }} is requesting permission: {{ permission }}',\n        {\n          userName,\n          permission,\n        },\n      );\n  }\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,20 +1,44 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CallingState } from '@stream-io/video-client';
-import { useCall, useI18n, useCallStateHooks, useConnectedUser } from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks, useConnectedUser } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import 'react';
+import '@stream-io/i18n/react';
 import { Avatar } from '../Avatar/Avatar.js';
 import { RingingCallControls } from './RingingCallControls.js';
 
-const CALLING_STATE_TO_LABEL = {
-    [CallingState.JOINING]: 'Joining',
-    [CallingState.RINGING]: 'Ringing',
-    [CallingState.MIGRATING]: 'Migrating',
-    [CallingState.RECONNECTING]: 'Re-connecting',
-    [CallingState.RECONNECTING_FAILED]: 'Failed',
-    [CallingState.OFFLINE]: 'No internet connection',
-    [CallingState.IDLE]: '',
-    [CallingState.UNKNOWN]: '',
-    [CallingState.JOINED]: 'Joined',
-    [CallingState.LEFT]: 'Left call',
+/**
+ * The label rendered for the current calling state.
+ *
+ * A `switch` of literal `t()` calls rather than a `Record<CallingState, string>` fed into a `t()`
+ * lookup on a runtime value: the literal keys are statically extractable, which is what makes
+ * `Migrating`, `Failed`, `Joined` and `Left call` translatable - none had a catalog entry before.
+ * `IDLE` and `UNKNOWN` render nothing and get no key.
+ */
+const getCallingStateLabel = (callingState, t) => {
+    switch (callingState) {
+        case CallingState.JOINING:
+            return t('ringingCall.callingState.joining.text', 'Joining');
+        case CallingState.RINGING:
+            return t('ringingCall.callingState.ringing.text', 'Ringing');
+        case CallingState.MIGRATING:
+            return t('ringingCall.callingState.migrating.text', 'Migrating');
+        case CallingState.RECONNECTING:
+            return t('ringingCall.callingState.reconnecting.text', 'Re-connecting');
+        case CallingState.RECONNECTING_FAILED:
+            return t('ringingCall.callingState.reconnectingFailed.text', 'Failed');
+        case CallingState.OFFLINE:
+            return t('ringingCall.callingState.offline.text', 'No internet connection');
+        case CallingState.JOINED:
+            return t('ringingCall.callingState.joined.text', 'Joined');
+        case CallingState.LEFT:
+            return t('ringingCall.callingState.left.text', 'Left call');
+        case CallingState.IDLE:
+        case CallingState.UNKNOWN:
+        default:
+            return undefined;
+    }
 };
 const RingingCall = (props) => {
     const { includeSelf = false, totalMembersToShow = 3 } = props;
@@ -40,8 +64,8 @@ const RingingCall = (props) => {
             membersToShow.splice(0, 1, self.user);
         }
     }
-    const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];
-    return (jsxs("div", { className: "str-video__call-panel str-video__call-panel--ringing", children: [jsx("div", { className: "str-video__call-panel__members-list", children: membersToShow.map((user) => (jsxs("div", { className: "str-video__call-panel__member-box", children: [jsx(Avatar, { name: user.name, imageSrc: user.image }), user.name && (jsx("div", { className: "str-video__member_details", children: jsx("span", { className: "str-video__member_name", children: user.name }) }))] }, user.id))) }), callingStateLabel && (jsx("div", { className: "str-video__call-panel__calling-state-label", children: t(callingStateLabel) })), [CallingState.RINGING, CallingState.JOINING].includes(callingState) && (jsx(RingingCallControls, {}))] }));
+    const callingStateLabel = getCallingStateLabel(callingState, t);
+    return (jsxs("div", { className: "str-video__call-panel str-video__call-panel--ringing", children: [jsx("div", { className: "str-video__call-panel__members-list", children: membersToShow.map((user) => (jsxs("div", { className: "str-video__call-panel__member-box", children: [jsx(Avatar, { name: user.name, imageSrc: user.image }), user.name && (jsx("div", { className: "str-video__member_details", children: jsx("span", { className: "str-video__member_name", children: user.name }) }))] }, user.id))) }), callingStateLabel && (jsx("div", { className: "str-video__call-panel__calling-state-label", children: callingStateLabel })), [CallingState.RINGING, CallingState.JOINING].includes(callingState) && (jsx(RingingCallControls, {}))] }));
 };
 
 export { RingingCall };

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

@@ -1 +1 @@
-{"version":3,"file":"RingingCall.js","sources":["../../../../../../../src/components/RingingCall/RingingCall.tsx"],"sourcesContent":["import { CallingState, UserResponse } from '@stream-io/video-client';\nimport {\n  useCall,\n  useCallStateHooks,\n  useConnectedUser,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { Avatar } from '../Avatar';\nimport { RingingCallControls } from './RingingCallControls';\n\nconst CALLING_STATE_TO_LABEL: Record<CallingState, string> = {\n  [CallingState.JOINING]: 'Joining',\n  [CallingState.RINGING]: 'Ringing',\n  [CallingState.MIGRATING]: 'Migrating',\n  [CallingState.RECONNECTING]: 'Re-connecting',\n  [CallingState.RECONNECTING_FAILED]: 'Failed',\n  [CallingState.OFFLINE]: 'No internet connection',\n  [CallingState.IDLE]: '',\n  [CallingState.UNKNOWN]: '',\n  [CallingState.JOINED]: 'Joined',\n  [CallingState.LEFT]: 'Left call',\n};\n\nexport type RingingCallProps = {\n  /**\n   * Whether to include the current user in the list of members to show.\n   * @default false.\n   */\n  includeSelf?: boolean;\n\n  /**\n   * The maximum number of members to show.\n   * @default 3.\n   */\n  totalMembersToShow?: number;\n};\n\nexport const RingingCall = (props: RingingCallProps) => {\n  const { includeSelf = false, totalMembersToShow = 3 } = props;\n  const call = useCall();\n  const { t } = useI18n();\n  const { useCallCallingState, useCallMembers } = useCallStateHooks();\n  const callingState = useCallCallingState();\n  const members = useCallMembers();\n  const connectedUser = useConnectedUser();\n\n  if (!call) return null;\n\n  // take the first N members to show their avatars\n  const membersToShow: UserResponse[] = (members || [])\n    .slice(0, totalMembersToShow)\n    .map(({ user }) => user)\n    .filter((user) => user.id !== connectedUser?.id || includeSelf);\n  if (\n    includeSelf &&\n    !membersToShow.find((user) => user.id === connectedUser?.id)\n  ) {\n    // if the current user is not in the initial batch of members,\n    // replace the first item in membersToShow array with the current user\n    const self = members.find(({ user }) => user.id === connectedUser?.id);\n    if (self) {\n      membersToShow.splice(0, 1, self.user);\n    }\n  }\n\n  const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];\n\n  return (\n    <div className=\"str-video__call-panel str-video__call-panel--ringing\">\n      <div className=\"str-video__call-panel__members-list\">\n        {membersToShow.map((user) => (\n          <div key={user.id} className=\"str-video__call-panel__member-box\">\n            <Avatar name={user.name} imageSrc={user.image} />\n            {user.name && (\n              <div className=\"str-video__member_details\">\n                <span className=\"str-video__member_name\">{user.name}</span>\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {callingStateLabel && (\n        <div className=\"str-video__call-panel__calling-state-label\">\n          {t(callingStateLabel)}\n        </div>\n      )}\n\n      {[CallingState.RINGING, CallingState.JOINING].includes(callingState) && (\n        <RingingCallControls />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"RingingCall.js","sources":["../../../../../../../src/components/RingingCall/RingingCall.tsx"],"sourcesContent":["import { CallingState, UserResponse } from '@stream-io/video-client';\nimport {\n  useCall,\n  useCallStateHooks,\n  useConnectedUser,\n} from '@stream-io/video-react-bindings';\nimport { StreamTFunction, useI18n } from '../../i18n';\nimport { Avatar } from '../Avatar';\nimport { RingingCallControls } from './RingingCallControls';\n\n/**\n * The label rendered for the current calling state.\n *\n * A `switch` of literal `t()` calls rather than a `Record<CallingState, string>` fed into a `t()`\n * lookup on a runtime value: the literal keys are statically extractable, which is what makes\n * `Migrating`, `Failed`, `Joined` and `Left call` translatable - none had a catalog entry before.\n * `IDLE` and `UNKNOWN` render nothing and get no key.\n */\nconst getCallingStateLabel = (\n  callingState: CallingState,\n  t: StreamTFunction,\n): string | undefined => {\n  switch (callingState) {\n    case CallingState.JOINING:\n      return t('ringingCall.callingState.joining.text', 'Joining');\n    case CallingState.RINGING:\n      return t('ringingCall.callingState.ringing.text', 'Ringing');\n    case CallingState.MIGRATING:\n      return t('ringingCall.callingState.migrating.text', 'Migrating');\n    case CallingState.RECONNECTING:\n      return t('ringingCall.callingState.reconnecting.text', 'Re-connecting');\n    case CallingState.RECONNECTING_FAILED:\n      return t('ringingCall.callingState.reconnectingFailed.text', 'Failed');\n    case CallingState.OFFLINE:\n      return t(\n        'ringingCall.callingState.offline.text',\n        'No internet connection',\n      );\n    case CallingState.JOINED:\n      return t('ringingCall.callingState.joined.text', 'Joined');\n    case CallingState.LEFT:\n      return t('ringingCall.callingState.left.text', 'Left call');\n    case CallingState.IDLE:\n    case CallingState.UNKNOWN:\n    default:\n      return undefined;\n  }\n};\n\nexport type RingingCallProps = {\n  /**\n   * Whether to include the current user in the list of members to show.\n   * @default false.\n   */\n  includeSelf?: boolean;\n\n  /**\n   * The maximum number of members to show.\n   * @default 3.\n   */\n  totalMembersToShow?: number;\n};\n\nexport const RingingCall = (props: RingingCallProps) => {\n  const { includeSelf = false, totalMembersToShow = 3 } = props;\n  const call = useCall();\n  const { t } = useI18n();\n  const { useCallCallingState, useCallMembers } = useCallStateHooks();\n  const callingState = useCallCallingState();\n  const members = useCallMembers();\n  const connectedUser = useConnectedUser();\n\n  if (!call) return null;\n\n  // take the first N members to show their avatars\n  const membersToShow: UserResponse[] = (members || [])\n    .slice(0, totalMembersToShow)\n    .map(({ user }) => user)\n    .filter((user) => user.id !== connectedUser?.id || includeSelf);\n  if (\n    includeSelf &&\n    !membersToShow.find((user) => user.id === connectedUser?.id)\n  ) {\n    // if the current user is not in the initial batch of members,\n    // replace the first item in membersToShow array with the current user\n    const self = members.find(({ user }) => user.id === connectedUser?.id);\n    if (self) {\n      membersToShow.splice(0, 1, self.user);\n    }\n  }\n\n  const callingStateLabel = getCallingStateLabel(callingState, t);\n\n  return (\n    <div className=\"str-video__call-panel str-video__call-panel--ringing\">\n      <div className=\"str-video__call-panel__members-list\">\n        {membersToShow.map((user) => (\n          <div key={user.id} className=\"str-video__call-panel__member-box\">\n            <Avatar name={user.name} imageSrc={user.image} />\n            {user.name && (\n              <div className=\"str-video__member_details\">\n                <span className=\"str-video__member_name\">{user.name}</span>\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {callingStateLabel && (\n        <div className=\"str-video__call-panel__calling-state-label\">\n          {callingStateLabel}\n        </div>\n      )}\n\n      {[CallingState.RINGING, CallingState.JOINING].includes(callingState) && (\n        <RingingCallControls />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}