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

package/dist/esm/src/components/CallParticipantsList/CallParticipantListingItem.js

@@ -1,10 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { memo, forwardRef } from 'react';
-import { useI18n, useConnectedUser } from '@stream-io/video-react-bindings';
+import { useConnectedUser } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { hasAudio, hasVideo, isPinned } from '@stream-io/video-client';
-import '../Button/CompositeButton.js';
+import '../Button/Button.js';
 import { IconButton } from '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
 import { MenuToggle } from '../Menu/MenuToggle.js';
 import '@floating-ui/react';
 import { WithTooltip } from '../Tooltip/WithTooltip.js';
@@ -17,18 +21,27 @@ const CallParticipantListingItem = memo(function CallParticipantListingItemRende
     const isVideoOn = hasVideo(participant);
     const isPinnedOn = isPinned(participant);
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsx(DisplayName, { participant: participant }), jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsx(MediaIndicator, { title: isAudioOn ? t('Microphone on') : t('Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsx(MediaIndicator, { title: isVideoOn ? t('Camera on') : t('Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton, children: jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
+    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsx(DisplayName, { participant: participant }), jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsx(MediaIndicator, { title: isAudioOn
+                            ? t('participantList.microphoneOn.title', 'Microphone on')
+                            : t('participantList.microphoneOff.title', 'Microphone off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isAudioOn ? 'mic' : 'mic-off'}`) }), jsx(MediaIndicator, { title: isVideoOn
+                            ? t('participantList.cameraOn.title', 'Camera on')
+                            : t('participantList.cameraOff.title', 'Camera off'), className: clsx('str-video__participant-listing-item__icon', `str-video__participant-listing-item__icon-${isVideoOn ? 'camera' : 'camera-off'}`) }), isPinnedOn && (jsx(MediaIndicator, { title: t('participantList.pinned.title', 'Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton, children: jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
 });
 CallParticipantListingItem.displayName = 'CallParticipantListingItem';
 const MediaIndicator = (props) => (jsx(WithTooltip, { ...props }));
 const DefaultDisplayName = ({ participant }) => {
     const connectedUser = useConnectedUser();
     const { t } = useI18n();
-    const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';
-    const nameOrId = participant.name || participant.userId || t('Unknown');
+    const meFlag = participant.userId === connectedUser?.id
+        ? t('participantList.me.text', 'Me')
+        : '';
+    const nameOrId = participant.name ||
+        participant.userId ||
+        t('participantList.unknown.text', 'Unknown');
     let displayName;
     if (!participant.name) {
-        displayName = meFlag || nameOrId || t('Unknown');
+        displayName =
+            meFlag || nameOrId || t('participantList.unknown.text', 'Unknown');
     }
     else if (meFlag) {
         displayName = `${nameOrId} (${meFlag})`;
@@ -39,7 +52,7 @@ const DefaultDisplayName = ({ participant }) => {
     return (jsx(WithTooltip, { className: "str-video__participant-listing-item__display-name", title: displayName, children: displayName }));
 };
 const ToggleButton = forwardRef(function ToggleButtonRender(props, ref) {
-    return jsx(IconButton, { enabled: props.menuShown, icon: "ellipsis", ref: ref });
+    return (jsx(IconButton, { className: "str-video__participant-listing-item__menu-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, icon: "ellipsis" }));
 });
 
 export { CallParticipantListingItem };

package/dist/esm/src/components/CallParticipantsList/CallParticipantListingItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantListingItem.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { ComponentProps, ComponentType, forwardRef, memo } from 'react';\nimport { useConnectedUser, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  hasAudio,\n  hasVideo,\n  isPinned,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { IconButton } from '../Button';\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\nimport { WithTooltip } from '../Tooltip';\nimport { Avatar } from '../Avatar';\nimport { ParticipantActionsContextMenu } from '../../core/components/ParticipantView/ParticipantActionsContextMenu';\nimport { ParticipantViewContext } from '../../core/components/ParticipantView/ParticipantViewContext';\n\ntype CallParticipantListingItemProps = {\n  /** Participant object be rendered */\n  participant: StreamVideoParticipant;\n  /** Custom component used to display participant's name */\n  DisplayName?: ComponentType<{ participant: StreamVideoParticipant }>;\n};\nexport const CallParticipantListingItem = memo(\n  function CallParticipantListingItemRender({\n    participant,\n    DisplayName = DefaultDisplayName,\n  }: CallParticipantListingItemProps) {\n    const isAudioOn = hasAudio(participant);\n    const isVideoOn = hasVideo(participant);\n    const isPinnedOn = isPinned(participant);\n\n    const { t } = useI18n();\n\n    return (\n      <div className=\"str-video__participant-listing-item\">\n        <Avatar name={participant.name} imageSrc={participant.image} />\n        <DisplayName participant={participant} />\n        <div className=\"str-video__participant-listing-item__media-indicator-group\">\n          <MediaIndicator\n            title={isAudioOn ? t('Microphone on') : t('Microphone off')}\n            className={clsx(\n              'str-video__participant-listing-item__icon',\n              `str-video__participant-listing-item__icon-${\n                isAudioOn ? 'mic' : 'mic-off'\n              }`,\n            )}\n          />\n          <MediaIndicator\n            title={isVideoOn ? t('Camera on') : t('Camera off')}\n            className={clsx(\n              'str-video__participant-listing-item__icon',\n              `str-video__participant-listing-item__icon-${\n                isVideoOn ? 'camera' : 'camera-off'\n              }`,\n            )}\n          />\n          {isPinnedOn && (\n            <MediaIndicator\n              title={t('Pinned')}\n              className={clsx(\n                'str-video__participant-listing-item__icon',\n                'str-video__participant-listing-item__icon-pinned',\n              )}\n            />\n          )}\n\n          <MenuToggle placement=\"bottom-end\" ToggleButton={ToggleButton}>\n            <ParticipantViewContext.Provider\n              value={{ participant, trackType: 'none' }}\n            >\n              <ParticipantActionsContextMenu />\n            </ParticipantViewContext.Provider>\n          </MenuToggle>\n        </div>\n      </div>\n    );\n  },\n);\n\nCallParticipantListingItem.displayName = 'CallParticipantListingItem';\n\nconst MediaIndicator = (props: ComponentProps<'div'>) => (\n  <WithTooltip {...props} />\n);\n\ntype DisplayNameProps = {\n  /** Participant object that provides the data from which display name can be generated */\n  participant: StreamVideoParticipant;\n};\n\nconst DefaultDisplayName = ({ participant }: DisplayNameProps) => {\n  const connectedUser = useConnectedUser();\n  const { t } = useI18n();\n\n  const meFlag = participant.userId === connectedUser?.id ? t('Me') : '';\n  const nameOrId = participant.name || participant.userId || t('Unknown');\n  let displayName;\n  if (!participant.name) {\n    displayName = meFlag || nameOrId || t('Unknown');\n  } else if (meFlag) {\n    displayName = `${nameOrId} (${meFlag})`;\n  } else {\n    displayName = nameOrId;\n  }\n\n  return (\n    <WithTooltip\n      className=\"str-video__participant-listing-item__display-name\"\n      title={displayName}\n    >\n      {displayName}\n    </WithTooltip>\n  );\n};\n\nconst ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleButtonRender(props, ref) {\n    return <IconButton enabled={props.menuShown} icon=\"ellipsis\" ref={ref} />;\n  },\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"CallParticipantListingItem.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantListingItem.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { ComponentProps, ComponentType, forwardRef, memo } from 'react';\nimport { useConnectedUser } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport {\n  hasAudio,\n  hasVideo,\n  isPinned,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { IconButton } from '../Button';\nimport { MenuToggle, ToggleMenuButtonProps } from '../Menu';\nimport { WithTooltip } from '../Tooltip';\nimport { Avatar } from '../Avatar';\nimport { ParticipantActionsContextMenu } from '../../core/components/ParticipantView/ParticipantActionsContextMenu';\nimport { ParticipantViewContext } from '../../core/components/ParticipantView/ParticipantViewContext';\n\ntype CallParticipantListingItemProps = {\n  /** Participant object be rendered */\n  participant: StreamVideoParticipant;\n  /** Custom component used to display participant's name */\n  DisplayName?: ComponentType<{ participant: StreamVideoParticipant }>;\n};\nexport const CallParticipantListingItem = memo(\n  function CallParticipantListingItemRender({\n    participant,\n    DisplayName = DefaultDisplayName,\n  }: CallParticipantListingItemProps) {\n    const isAudioOn = hasAudio(participant);\n    const isVideoOn = hasVideo(participant);\n    const isPinnedOn = isPinned(participant);\n\n    const { t } = useI18n();\n\n    return (\n      <div className=\"str-video__participant-listing-item\">\n        <Avatar name={participant.name} imageSrc={participant.image} />\n        <DisplayName participant={participant} />\n        <div className=\"str-video__participant-listing-item__media-indicator-group\">\n          <MediaIndicator\n            title={\n              isAudioOn\n                ? t('participantList.microphoneOn.title', 'Microphone on')\n                : t('participantList.microphoneOff.title', 'Microphone off')\n            }\n            className={clsx(\n              'str-video__participant-listing-item__icon',\n              `str-video__participant-listing-item__icon-${\n                isAudioOn ? 'mic' : 'mic-off'\n              }`,\n            )}\n          />\n          <MediaIndicator\n            title={\n              isVideoOn\n                ? t('participantList.cameraOn.title', 'Camera on')\n                : t('participantList.cameraOff.title', 'Camera off')\n            }\n            className={clsx(\n              'str-video__participant-listing-item__icon',\n              `str-video__participant-listing-item__icon-${\n                isVideoOn ? 'camera' : 'camera-off'\n              }`,\n            )}\n          />\n          {isPinnedOn && (\n            <MediaIndicator\n              title={t('participantList.pinned.title', 'Pinned')}\n              className={clsx(\n                'str-video__participant-listing-item__icon',\n                'str-video__participant-listing-item__icon-pinned',\n              )}\n            />\n          )}\n\n          <MenuToggle placement=\"bottom-end\" ToggleButton={ToggleButton}>\n            <ParticipantViewContext.Provider\n              value={{ participant, trackType: 'none' }}\n            >\n              <ParticipantActionsContextMenu />\n            </ParticipantViewContext.Provider>\n          </MenuToggle>\n        </div>\n      </div>\n    );\n  },\n);\n\nCallParticipantListingItem.displayName = 'CallParticipantListingItem';\n\nconst MediaIndicator = (props: ComponentProps<'div'>) => (\n  <WithTooltip {...props} />\n);\n\ntype DisplayNameProps = {\n  /** Participant object that provides the data from which display name can be generated */\n  participant: StreamVideoParticipant;\n};\n\nconst DefaultDisplayName = ({ participant }: DisplayNameProps) => {\n  const connectedUser = useConnectedUser();\n  const { t } = useI18n();\n\n  const meFlag =\n    participant.userId === connectedUser?.id\n      ? t('participantList.me.text', 'Me')\n      : '';\n  const nameOrId =\n    participant.name ||\n    participant.userId ||\n    t('participantList.unknown.text', 'Unknown');\n  let displayName;\n  if (!participant.name) {\n    displayName =\n      meFlag || nameOrId || t('participantList.unknown.text', 'Unknown');\n  } else if (meFlag) {\n    displayName = `${nameOrId} (${meFlag})`;\n  } else {\n    displayName = nameOrId;\n  }\n\n  return (\n    <WithTooltip\n      className=\"str-video__participant-listing-item__display-name\"\n      title={displayName}\n    >\n      {displayName}\n    </WithTooltip>\n  );\n};\n\nconst ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleButtonRender(props, ref) {\n    return (\n      <IconButton\n        className=\"str-video__participant-listing-item__menu-button\"\n        active={props.menuShown}\n        size=\"sm\"\n        variant=\"secondary\"\n        ref={ref}\n        icon=\"ellipsis\"\n      />\n    );\n  },\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,11 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState, useCallback, useRef } from 'react';
-import { useCall, useI18n, Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCall, Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { OwnCapability, name } from '@stream-io/video-client';
 import { BlockedUserListing } from './BlockedUserListing.js';
-import '../Button/CompositeButton.js';
+import { Button } from '../Button/Button.js';
 import { IconButton } from '../Button/IconButton.js';
-import { TextButton } from '../Button/TextButton.js';
+import '../Button/CompositeButton.js';
 import { CallParticipantListHeader } from './CallParticipantListHeader.js';
 import { CallParticipantListing } from './CallParticipantListing.js';
 import { EmptyParticipantSearchList } from './EmptyParticipantSearchList.js';
@@ -33,7 +36,7 @@ const CallParticipantListContentHeader = ({ userListType, setUserListType, }) =>
     const muteAll = useCallback(() => {
         call?.muteAllUsers('audio');
     }, [call]);
-    return (jsxs("div", { className: "str-video__participant-list__content-header", children: [jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsx(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsx(TextButton, { onClick: muteAll, children: t('Mute all') }) })) }), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton, children: jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsx(GenericMenuButtonItem, { "aria-selected": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
+    return (jsxs("div", { className: "str-video__participant-list__content-header", children: [jsx("div", { className: "str-video__participant-list__content-header-title", children: userListType === 'active' && (jsx(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], hasPermissionsOnly: true, children: jsx(Button, { appearance: "ghost", size: "xs", variant: "secondary", onClick: muteAll, children: t('participantList.muteAll.label', 'Mute all') }) })) }), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton, children: jsx(GenericMenu, { children: Object.keys(UserListTypes).map((lt) => (jsx(GenericMenuButtonItem, { "aria-current": lt === userListType, onClick: () => setUserListType(lt), children: UserListTypes[lt] }, lt))) }) })] }));
 };
 const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
     const { useParticipants } = useCallStateHooks();
@@ -74,7 +77,7 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
     return (jsx(SearchResults, { EmptySearchResultComponent: EmptyParticipantSearchList, LoadingIndicator: LoadingIndicator, searchQueryInProgress: searchQueryInProgress, searchResults: searchQuery ? searchResults : blockedUsers, SearchResultList: BlockedUserListing }));
 };
 const ToggleButton = forwardRef(function ToggleButtonRender(props, ref) {
-    return jsx(IconButton, { enabled: props.menuShown, icon: "filter", ref: ref });
+    return (jsx(IconButton, { className: "str-video__participant-list__filter-button", active: props.menuShown, size: "sm", variant: "secondary", ref: ref, icon: "filter" }));
 });
 
 export { CallParticipantsList };

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

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsList.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantsList.tsx"],"sourcesContent":["import {\n  Dispatch,\n  forwardRef,\n  SetStateAction,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Restricted,\n  useCall,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport {\n  name,\n  OwnCapability,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\n\nimport { BlockedUserListing } from './BlockedUserListing';\nimport { IconButton, TextButton } from '../Button';\nimport { CallParticipantListHeader } from './CallParticipantListHeader';\nimport { CallParticipantListing } from './CallParticipantListing';\nimport { EmptyParticipantSearchList } from './EmptyParticipantSearchList';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { SearchInput, SearchResults } from '../Search';\nimport { useSearch, UseSearchParams } from '../Search/hooks';\nimport {\n  GenericMenu,\n  GenericMenuButtonItem,\n  MenuToggle,\n  ToggleMenuButtonProps,\n} from '../Menu';\nimport { normalizeString } from '../../utilities';\n\ntype CallParticipantListProps = {\n  /** Click event listener function to be invoked in order to dismiss/hide the CallParticipantsList from the UI */\n  onClose: () => void;\n  /** Custom function to override the searching logic of active participants */\n  activeUsersSearchFn?: UseSearchParams<StreamVideoParticipant>['searchFn'];\n  /** Custom function to override the searching logic of blocked users */\n  blockedUsersSearchFn?: UseSearchParams<string>['searchFn'];\n  /** Interval in ms, during which the participant search calls will be debounced. The default value is 200ms. */\n  debounceSearchInterval?: number;\n};\n\nconst UserListTypes = {\n  active: 'Active users',\n  blocked: 'Blocked users',\n} as const;\n\nexport const CallParticipantsList = ({\n  onClose,\n  activeUsersSearchFn,\n  blockedUsersSearchFn,\n  debounceSearchInterval,\n}: CallParticipantListProps) => {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [userListType, setUserListType] =\n    useState<keyof typeof UserListTypes>('active');\n\n  const exitSearch = useCallback(() => setSearchQuery(''), []);\n\n  return (\n    <div className=\"str-video__participant-list\">\n      <CallParticipantListHeader onClose={onClose} />\n      <SearchInput\n        value={searchQuery}\n        onChange={({ currentTarget }) => setSearchQuery(currentTarget.value)}\n        exitSearch={exitSearch}\n        isActive={!!searchQuery}\n      />\n      <CallParticipantListContentHeader\n        userListType={userListType}\n        setUserListType={setUserListType}\n      />\n      <div className=\"str-video__participant-list__content\">\n        {userListType === 'active' && (\n          <ActiveUsersSearchResults\n            searchQuery={searchQuery}\n            activeUsersSearchFn={activeUsersSearchFn}\n            debounceSearchInterval={debounceSearchInterval}\n          />\n        )}\n        {userListType === 'blocked' && (\n          <BlockedUsersSearchResults\n            searchQuery={searchQuery}\n            blockedUsersSearchFn={blockedUsersSearchFn}\n            debounceSearchInterval={debounceSearchInterval}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst CallParticipantListContentHeader = ({\n  userListType,\n  setUserListType,\n}: {\n  userListType: keyof typeof UserListTypes;\n  setUserListType: Dispatch<SetStateAction<keyof typeof UserListTypes>>;\n}) => {\n  const call = useCall();\n  const { t } = useI18n();\n\n  const muteAll = useCallback(() => {\n    call?.muteAllUsers('audio');\n  }, [call]);\n\n  return (\n    <div className=\"str-video__participant-list__content-header\">\n      <div className=\"str-video__participant-list__content-header-title\">\n        {userListType === 'active' && (\n          <Restricted\n            requiredGrants={[OwnCapability.MUTE_USERS]}\n            hasPermissionsOnly\n          >\n            <TextButton onClick={muteAll}>{t('Mute all')}</TextButton>\n          </Restricted>\n        )}\n      </div>\n      <MenuToggle placement=\"bottom-end\" ToggleButton={ToggleButton}>\n        <GenericMenu>\n          {(\n            Object.keys(UserListTypes) as Array<keyof typeof UserListTypes>\n          ).map((lt) => (\n            <GenericMenuButtonItem\n              key={lt}\n              aria-selected={lt === userListType}\n              onClick={() => setUserListType(lt)}\n            >\n              {UserListTypes[lt]}\n            </GenericMenuButtonItem>\n          ))}\n        </GenericMenu>\n      </MenuToggle>\n    </div>\n  );\n};\n\nconst ActiveUsersSearchResults = ({\n  searchQuery,\n  activeUsersSearchFn: activeUsersSearchFnFromProps,\n  debounceSearchInterval,\n}: Pick<\n  CallParticipantListProps,\n  'activeUsersSearchFn' | 'debounceSearchInterval'\n> & { searchQuery: string }) => {\n  const { useParticipants } = useCallStateHooks();\n  const participants = useParticipants({ sortBy: name });\n\n  // cache: each distinct name is normalized once\n  const normalizedNameCache = useRef<Map<string, string> | null>(null);\n\n  const activeUsersSearchFn = useCallback(\n    async (queryString: string) => {\n      const normalizedQuery = normalizeString(queryString);\n      const cache = (normalizedNameCache.current ??= new Map<string, string>());\n      return participants.filter((p) => {\n        let normalizedName = cache.get(p.name);\n        if (normalizedName === undefined) {\n          normalizedName = normalizeString(p.name);\n          cache.set(p.name, normalizedName);\n        }\n        return normalizedName.includes(normalizedQuery);\n      });\n    },\n    [participants],\n  );\n\n  const { searchQueryInProgress, searchResults } = useSearch({\n    searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,\n    debounceInterval: debounceSearchInterval,\n    searchQuery,\n  });\n\n  return (\n    <SearchResults<StreamVideoParticipant>\n      EmptySearchResultComponent={EmptyParticipantSearchList}\n      LoadingIndicator={LoadingIndicator}\n      searchQueryInProgress={searchQueryInProgress}\n      searchResults={searchQuery ? searchResults : participants}\n      SearchResultList={CallParticipantListing}\n    />\n  );\n};\n\nconst BlockedUsersSearchResults = ({\n  blockedUsersSearchFn: blockedUsersSearchFnFromProps,\n  debounceSearchInterval,\n  searchQuery,\n}: Pick<\n  CallParticipantListProps,\n  'blockedUsersSearchFn' | 'debounceSearchInterval'\n> & { searchQuery: string }) => {\n  const { useCallBlockedUserIds } = useCallStateHooks();\n  const blockedUsers = useCallBlockedUserIds();\n\n  const blockedUsersSearchFn = useCallback(\n    async (queryString: string) => {\n      const normalizedQuery = queryString.toLowerCase();\n      return blockedUsers.filter((userId) =>\n        userId.toLowerCase().includes(normalizedQuery),\n      );\n    },\n    [blockedUsers],\n  );\n\n  const { searchQueryInProgress, searchResults } = useSearch({\n    searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,\n    debounceInterval: debounceSearchInterval,\n    searchQuery,\n  });\n\n  return (\n    <SearchResults<string>\n      EmptySearchResultComponent={EmptyParticipantSearchList}\n      LoadingIndicator={LoadingIndicator}\n      searchQueryInProgress={searchQueryInProgress}\n      searchResults={searchQuery ? searchResults : blockedUsers}\n      SearchResultList={BlockedUserListing}\n    />\n  );\n};\n\nconst ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleButtonRender(props, ref) {\n    return <IconButton enabled={props.menuShown} icon=\"filter\" ref={ref} />;\n  },\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"CallParticipantsList.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantsList.tsx"],"sourcesContent":["import {\n  Dispatch,\n  forwardRef,\n  SetStateAction,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Restricted,\n  useCall,\n  useCallStateHooks,\n} from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport {\n  name,\n  OwnCapability,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\n\nimport { BlockedUserListing } from './BlockedUserListing';\nimport { Button, IconButton } from '../Button';\nimport { CallParticipantListHeader } from './CallParticipantListHeader';\nimport { CallParticipantListing } from './CallParticipantListing';\nimport { EmptyParticipantSearchList } from './EmptyParticipantSearchList';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { SearchInput, SearchResults } from '../Search';\nimport { useSearch, UseSearchParams } from '../Search/hooks';\nimport {\n  GenericMenu,\n  GenericMenuButtonItem,\n  MenuToggle,\n  ToggleMenuButtonProps,\n} from '../Menu';\nimport { normalizeString } from '../../utilities';\n\ntype CallParticipantListProps = {\n  /** Click event listener function to be invoked in order to dismiss/hide the CallParticipantsList from the UI */\n  onClose: () => void;\n  /** Custom function to override the searching logic of active participants */\n  activeUsersSearchFn?: UseSearchParams<StreamVideoParticipant>['searchFn'];\n  /** Custom function to override the searching logic of blocked users */\n  blockedUsersSearchFn?: UseSearchParams<string>['searchFn'];\n  /** Interval in ms, during which the participant search calls will be debounced. The default value is 200ms. */\n  debounceSearchInterval?: number;\n};\n\nconst UserListTypes = {\n  active: 'Active users',\n  blocked: 'Blocked users',\n} as const;\n\nexport const CallParticipantsList = ({\n  onClose,\n  activeUsersSearchFn,\n  blockedUsersSearchFn,\n  debounceSearchInterval,\n}: CallParticipantListProps) => {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [userListType, setUserListType] =\n    useState<keyof typeof UserListTypes>('active');\n\n  const exitSearch = useCallback(() => setSearchQuery(''), []);\n\n  return (\n    <div className=\"str-video__participant-list\">\n      <CallParticipantListHeader onClose={onClose} />\n      <SearchInput\n        value={searchQuery}\n        onChange={({ currentTarget }) => setSearchQuery(currentTarget.value)}\n        exitSearch={exitSearch}\n        isActive={!!searchQuery}\n      />\n      <CallParticipantListContentHeader\n        userListType={userListType}\n        setUserListType={setUserListType}\n      />\n      <div className=\"str-video__participant-list__content\">\n        {userListType === 'active' && (\n          <ActiveUsersSearchResults\n            searchQuery={searchQuery}\n            activeUsersSearchFn={activeUsersSearchFn}\n            debounceSearchInterval={debounceSearchInterval}\n          />\n        )}\n        {userListType === 'blocked' && (\n          <BlockedUsersSearchResults\n            searchQuery={searchQuery}\n            blockedUsersSearchFn={blockedUsersSearchFn}\n            debounceSearchInterval={debounceSearchInterval}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst CallParticipantListContentHeader = ({\n  userListType,\n  setUserListType,\n}: {\n  userListType: keyof typeof UserListTypes;\n  setUserListType: Dispatch<SetStateAction<keyof typeof UserListTypes>>;\n}) => {\n  const call = useCall();\n  const { t } = useI18n();\n\n  const muteAll = useCallback(() => {\n    call?.muteAllUsers('audio');\n  }, [call]);\n\n  return (\n    <div className=\"str-video__participant-list__content-header\">\n      <div className=\"str-video__participant-list__content-header-title\">\n        {userListType === 'active' && (\n          <Restricted\n            requiredGrants={[OwnCapability.MUTE_USERS]}\n            hasPermissionsOnly\n          >\n            <Button\n              appearance=\"ghost\"\n              size=\"xs\"\n              variant=\"secondary\"\n              onClick={muteAll}\n            >\n              {t('participantList.muteAll.label', 'Mute all')}\n            </Button>\n          </Restricted>\n        )}\n      </div>\n      <MenuToggle placement=\"bottom-end\" ToggleButton={ToggleButton}>\n        <GenericMenu>\n          {(\n            Object.keys(UserListTypes) as Array<keyof typeof UserListTypes>\n          ).map((lt) => (\n            <GenericMenuButtonItem\n              key={lt}\n              aria-current={lt === userListType}\n              onClick={() => setUserListType(lt)}\n            >\n              {UserListTypes[lt]}\n            </GenericMenuButtonItem>\n          ))}\n        </GenericMenu>\n      </MenuToggle>\n    </div>\n  );\n};\n\nconst ActiveUsersSearchResults = ({\n  searchQuery,\n  activeUsersSearchFn: activeUsersSearchFnFromProps,\n  debounceSearchInterval,\n}: Pick<\n  CallParticipantListProps,\n  'activeUsersSearchFn' | 'debounceSearchInterval'\n> & { searchQuery: string }) => {\n  const { useParticipants } = useCallStateHooks();\n  const participants = useParticipants({ sortBy: name });\n\n  // cache: each distinct name is normalized once\n  const normalizedNameCache = useRef<Map<string, string> | null>(null);\n\n  const activeUsersSearchFn = useCallback(\n    async (queryString: string) => {\n      const normalizedQuery = normalizeString(queryString);\n      const cache = (normalizedNameCache.current ??= new Map<string, string>());\n      return participants.filter((p) => {\n        let normalizedName = cache.get(p.name);\n        if (normalizedName === undefined) {\n          normalizedName = normalizeString(p.name);\n          cache.set(p.name, normalizedName);\n        }\n        return normalizedName.includes(normalizedQuery);\n      });\n    },\n    [participants],\n  );\n\n  const { searchQueryInProgress, searchResults } = useSearch({\n    searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,\n    debounceInterval: debounceSearchInterval,\n    searchQuery,\n  });\n\n  return (\n    <SearchResults<StreamVideoParticipant>\n      EmptySearchResultComponent={EmptyParticipantSearchList}\n      LoadingIndicator={LoadingIndicator}\n      searchQueryInProgress={searchQueryInProgress}\n      searchResults={searchQuery ? searchResults : participants}\n      SearchResultList={CallParticipantListing}\n    />\n  );\n};\n\nconst BlockedUsersSearchResults = ({\n  blockedUsersSearchFn: blockedUsersSearchFnFromProps,\n  debounceSearchInterval,\n  searchQuery,\n}: Pick<\n  CallParticipantListProps,\n  'blockedUsersSearchFn' | 'debounceSearchInterval'\n> & { searchQuery: string }) => {\n  const { useCallBlockedUserIds } = useCallStateHooks();\n  const blockedUsers = useCallBlockedUserIds();\n\n  const blockedUsersSearchFn = useCallback(\n    async (queryString: string) => {\n      const normalizedQuery = queryString.toLowerCase();\n      return blockedUsers.filter((userId) =>\n        userId.toLowerCase().includes(normalizedQuery),\n      );\n    },\n    [blockedUsers],\n  );\n\n  const { searchQueryInProgress, searchResults } = useSearch({\n    searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,\n    debounceInterval: debounceSearchInterval,\n    searchQuery,\n  });\n\n  return (\n    <SearchResults<string>\n      EmptySearchResultComponent={EmptyParticipantSearchList}\n      LoadingIndicator={LoadingIndicator}\n      searchQueryInProgress={searchQueryInProgress}\n      searchResults={searchQuery ? searchResults : blockedUsers}\n      SearchResultList={BlockedUserListing}\n    />\n  );\n};\n\nconst ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(\n  function ToggleButtonRender(props, ref) {\n    return (\n      <IconButton\n        className=\"str-video__participant-list__filter-button\"\n        active={props.menuShown}\n        size=\"sm\"\n        variant=\"secondary\"\n        ref={ref}\n        icon=\"filter\"\n      />\n    );\n  },\n);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/CallParticipantsList/EmptyParticipantSearchList.js

@@ -1,9 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import 'react';
+import '@stream-io/i18n/react';
 
 const EmptyParticipantSearchList = () => {
     const { t } = useI18n();
-    return (jsx("div", { className: "str-video__participant-list--empty", children: t('No participants found') }));
+    return (jsx("div", { className: "str-video__participant-list--empty", children: t('participantList.noParticipantsFound.text', 'No participants found') }));
 };
 
 export { EmptyParticipantSearchList };

package/dist/esm/src/components/CallParticipantsList/EmptyParticipantSearchList.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyParticipantSearchList.js","sources":["../../../../../../../src/components/CallParticipantsList/EmptyParticipantSearchList.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\n\nexport const EmptyParticipantSearchList = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__participant-list--empty\">\n      {t('No participants found')}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;AAEO,MAAM,0BAA0B,GAAG,MAAK;AAC7C,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAChD,CAAC,CAAC,uBAAuB,CAAC,EAAA,CACvB;AAEV;;;;"}
+{"version":3,"file":"EmptyParticipantSearchList.js","sources":["../../../../../../../src/components/CallParticipantsList/EmptyParticipantSearchList.tsx"],"sourcesContent":["import { useI18n } from '../../i18n';\n\nexport const EmptyParticipantSearchList = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__participant-list--empty\">\n      {t('participantList.noParticipantsFound.text', 'No participants found')}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAEO,MAAM,0BAA0B,GAAG,MAAK;AAC7C,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAChD,CAAC,CAAC,0CAA0C,EAAE,uBAAuB,CAAC,EAAA,CACnE;AAEV;;;;"}

package/dist/esm/src/components/CallRecordingList/CallRecordingListHeader.js

@@ -1,11 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useI18n } from '@stream-io/video-react-bindings';
-import '../Button/CompositeButton.js';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import 'react';
+import '@stream-io/i18n/react';
+import '../Button/Button.js';
 import { IconButton } from '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
 
 const CallRecordingListHeader = ({ callRecordings, onRefresh, }) => {
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxs("div", { className: "str-video__call-recording-list__title", children: [jsx("span", { children: t('Call Recordings') }), callRecordings.length ? jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), onRefresh && (jsx(IconButton, { icon: "refresh", title: t('Refresh'), onClick: onRefresh }))] }));
+    return (jsxs("div", { className: "str-video__call-recording-list__header", children: [jsxs("div", { className: "str-video__call-recording-list__title", children: [jsx("span", { children: t('callRecordingList.callRecordings.title', 'Call Recordings') }), callRecordings.length ? jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] }), onRefresh && (jsx(IconButton, { size: "sm", variant: "secondary", title: t('callRecordingList.refresh.title', 'Refresh'), onClick: onRefresh, icon: "refresh" }))] }));
 };
 
 export { CallRecordingListHeader };

package/dist/esm/src/components/CallRecordingList/CallRecordingListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallRecordingListHeader.js","sources":["../../../../../../../src/components/CallRecordingList/CallRecordingListHeader.tsx"],"sourcesContent":["import { CallRecording } from '@stream-io/video-client';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { IconButton } from '../Button';\n\nexport type CallRecordingListHeaderProps = {\n  /** Array of CallRecording objects */\n  callRecordings: CallRecording[];\n  /** Callback to be invoked when the refresh button is clicked */\n  onRefresh?: () => void;\n};\n\nexport const CallRecordingListHeader = ({\n  callRecordings,\n  onRefresh,\n}: CallRecordingListHeaderProps) => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__call-recording-list__header\">\n      <div className=\"str-video__call-recording-list__title\">\n        <span>{t('Call Recordings')}</span>\n        {callRecordings.length ? <span>({callRecordings.length})</span> : null}\n      </div>\n      {onRefresh && (\n        <IconButton icon=\"refresh\" title={t('Refresh')} onClick={onRefresh} />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAWO,MAAM,uBAAuB,GAAG,CAAC,EACtC,cAAc,EACd,SAAS,GACoB,KAAI;AACjC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAQ,EAClC,cAAc,CAAC,MAAM,GAAGD,IAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAQ,cAAc,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAAS,GAAG,IAAI,CAAA,EAAA,CAClE,EACL,SAAS,KACRC,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAA,CAAI,CACvE,CAAA,EAAA,CACG;AAEV;;;;"}
+{"version":3,"file":"CallRecordingListHeader.js","sources":["../../../../../../../src/components/CallRecordingList/CallRecordingListHeader.tsx"],"sourcesContent":["import { CallRecording } from '@stream-io/video-client';\nimport { useI18n } from '../../i18n';\nimport { IconButton } from '../Button';\n\nexport type CallRecordingListHeaderProps = {\n  /** Array of CallRecording objects */\n  callRecordings: CallRecording[];\n  /** Callback to be invoked when the refresh button is clicked */\n  onRefresh?: () => void;\n};\n\nexport const CallRecordingListHeader = ({\n  callRecordings,\n  onRefresh,\n}: CallRecordingListHeaderProps) => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__call-recording-list__header\">\n      <div className=\"str-video__call-recording-list__title\">\n        <span>\n          {t('callRecordingList.callRecordings.title', 'Call Recordings')}\n        </span>\n        {callRecordings.length ? <span>({callRecordings.length})</span> : null}\n      </div>\n      {onRefresh && (\n        <IconButton\n          size=\"sm\"\n          variant=\"secondary\"\n          title={t('callRecordingList.refresh.title', 'Refresh')}\n          onClick={onRefresh}\n          icon=\"refresh\"\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAWO,MAAM,uBAAuB,GAAG,CAAC,EACtC,cAAc,EACd,SAAS,GACoB,KAAI;AACjC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDC,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EACG,CAAC,CAAC,wCAAwC,EAAE,iBAAiB,CAAC,EAAA,CAC1D,EACN,cAAc,CAAC,MAAM,GAAGD,IAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAQ,cAAc,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAAS,GAAG,IAAI,CAAA,EAAA,CAClE,EACL,SAAS,KACRC,GAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,CAAC,CAAC,iCAAiC,EAAE,SAAS,CAAC,EACtD,OAAO,EAAE,SAAS,EAClB,IAAI,EAAC,SAAS,EAAA,CACd,CACH,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/components/DeviceSettings/DeviceAudioPreviewItem.js

@@ -35,7 +35,7 @@ const DeviceLevelIndicator = ({ deviceId }) => {
 const DeviceAudioPreviewItem = ({ device, onSelect, }) => {
     if (device.deviceId === 'default')
         return null;
-    return (jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), device.label, jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
+    return (jsxs("label", { className: `str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`, htmlFor: `audioinput--${device.deviceId}`, children: [jsx("input", { type: "radio", name: "audioinput", value: device.deviceId, id: `audioinput--${device.deviceId}`, checked: device.isSelected, onChange: (e) => onSelect(e.target.value) }), jsx("span", { className: "str-video__device-settings__option__label", children: device.label }), jsx(DeviceLevelIndicator, { deviceId: device.deviceId })] }));
 };
 
 export { DeviceAudioPreviewItem };

package/dist/esm/src/components/DeviceSettings/DeviceAudioPreviewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceAudioPreviewItem.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceAudioPreviewItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { createSoundDetector } from '@stream-io/video-client';\nimport clsx from 'clsx';\nimport { DeviceListItem } from '../../hooks';\n\nconst LEVEL_BARS = 5;\n\nconst DeviceLevelIndicator = ({ deviceId }: { deviceId: string }) => {\n  const [audioLevel, setAudioLevel] = useState(0);\n\n  useEffect(() => {\n    let cancelled = false;\n    let dispose: (() => Promise<void>) | undefined;\n\n    navigator.mediaDevices\n      .getUserMedia({\n        audio: { deviceId: { exact: deviceId } },\n        video: false,\n      })\n      .then((mediaStream) => {\n        if (cancelled) {\n          mediaStream.getTracks().forEach((t) => t.stop());\n          return;\n        }\n        dispose = createSoundDetector(\n          mediaStream,\n          ({ audioLevel: al }) => setAudioLevel(al),\n          { detectionFrequencyInMs: 80 },\n        );\n      })\n      .catch(console.error);\n\n    return () => {\n      cancelled = true;\n      dispose?.().catch(console.error);\n    };\n  }, [deviceId]);\n\n  const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);\n\n  return (\n    <div className=\"str-video__device-level-indicator\" aria-label=\"Audio level\">\n      {Array.from({ length: LEVEL_BARS }, (_, i) => (\n        <div\n          key={i}\n          className={clsx('str-video__device-level-indicator__bar', {\n            'str-video__device-level-indicator__bar--active': i < activeBars,\n          })}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type DeviceAudioPreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nexport const DeviceAudioPreviewItem = ({\n  device,\n  onSelect,\n}: DeviceAudioPreviewItemProps) => {\n  if (device.deviceId === 'default') return null;\n\n  return (\n    <label\n      className={`str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`}\n      htmlFor={`audioinput--${device.deviceId}`}\n    >\n      <input\n        type=\"radio\"\n        name=\"audioinput\"\n        value={device.deviceId}\n        id={`audioinput--${device.deviceId}`}\n        checked={device.isSelected}\n        onChange={(e) => onSelect(e.target.value)}\n      />\n      {device.label}\n      <DeviceLevelIndicator deviceId={device.deviceId} />\n    </label>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC;AAEpB,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,KAAK;AACrB,QAAA,IAAI,OAA0C;AAE9C,QAAA,SAAS,CAAC;AACP,aAAA,YAAY,CAAC;YACZ,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;AACxC,YAAA,KAAK,EAAE,KAAK;SACb;AACA,aAAA,IAAI,CAAC,CAAC,WAAW,KAAI;YACpB,IAAI,SAAS,EAAE;AACb,gBAAA,WAAW,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChD;YACF;YACA,OAAO,GAAG,mBAAmB,CAC3B,WAAW,EACX,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,aAAa,CAAC,EAAE,CAAC,EACzC,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAC/B;AACH,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEvB,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,IAAI;YAChB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAClC,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,GAAG,IAAI,UAAU,CAAC;AAE9D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,YAAA,EAAY,aAAa,EAAA,QAAA,EACxE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MACvCA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,IAAI,CAAC,wCAAwC,EAAE;gBACxD,gDAAgD,EAAE,CAAC,GAAG,UAAU;AACjE,aAAA,CAAC,IAHG,CAAC,CAIN,CACH,CAAC,EAAA,CACE;AAEV,CAAC;AAOM,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,QAAQ,GACoB,KAAI;AAChC,IAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;AAE9C,IAAA,QACEC,IAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,CAAA,kCAAA,EAAqC,MAAM,CAAC,UAAU,GAAG,+CAA+C,GAAG,EAAE,CAAA,CAAE,EAC1H,OAAO,EAAE,CAAA,YAAA,EAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,aAEzCD,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,EAAE,EAAE,CAAA,YAAA,EAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,EACpC,OAAO,EAAE,MAAM,CAAC,UAAU,EAC1B,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAA,CACzC,EACD,MAAM,CAAC,KAAK,EACbA,GAAA,CAAC,oBAAoB,EAAA,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC7C;AAEZ;;;;"}
+{"version":3,"file":"DeviceAudioPreviewItem.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceAudioPreviewItem.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { createSoundDetector } from '@stream-io/video-client';\nimport clsx from 'clsx';\nimport { DeviceListItem } from '../../hooks';\n\nconst LEVEL_BARS = 5;\n\nconst DeviceLevelIndicator = ({ deviceId }: { deviceId: string }) => {\n  const [audioLevel, setAudioLevel] = useState(0);\n\n  useEffect(() => {\n    let cancelled = false;\n    let dispose: (() => Promise<void>) | undefined;\n\n    navigator.mediaDevices\n      .getUserMedia({\n        audio: { deviceId: { exact: deviceId } },\n        video: false,\n      })\n      .then((mediaStream) => {\n        if (cancelled) {\n          mediaStream.getTracks().forEach((t) => t.stop());\n          return;\n        }\n        dispose = createSoundDetector(\n          mediaStream,\n          ({ audioLevel: al }) => setAudioLevel(al),\n          { detectionFrequencyInMs: 80 },\n        );\n      })\n      .catch(console.error);\n\n    return () => {\n      cancelled = true;\n      dispose?.().catch(console.error);\n    };\n  }, [deviceId]);\n\n  const activeBars = Math.round((audioLevel / 100) * LEVEL_BARS);\n\n  return (\n    <div className=\"str-video__device-level-indicator\" aria-label=\"Audio level\">\n      {Array.from({ length: LEVEL_BARS }, (_, i) => (\n        <div\n          key={i}\n          className={clsx('str-video__device-level-indicator__bar', {\n            'str-video__device-level-indicator__bar--active': i < activeBars,\n          })}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type DeviceAudioPreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nexport const DeviceAudioPreviewItem = ({\n  device,\n  onSelect,\n}: DeviceAudioPreviewItemProps) => {\n  if (device.deviceId === 'default') return null;\n\n  return (\n    <label\n      className={`str-video__device-settings__option${device.isSelected ? ' str-video__device-settings__option--selected' : ''}`}\n      htmlFor={`audioinput--${device.deviceId}`}\n    >\n      <input\n        type=\"radio\"\n        name=\"audioinput\"\n        value={device.deviceId}\n        id={`audioinput--${device.deviceId}`}\n        checked={device.isSelected}\n        onChange={(e) => onSelect(e.target.value)}\n      />\n      <span className=\"str-video__device-settings__option__label\">\n        {device.label}\n      </span>\n      <DeviceLevelIndicator deviceId={device.deviceId} />\n    </label>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAKA,MAAM,UAAU,GAAG,CAAC;AAEpB,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,GAAG,KAAK;AACrB,QAAA,IAAI,OAA0C;AAE9C,QAAA,SAAS,CAAC;AACP,aAAA,YAAY,CAAC;YACZ,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;AACxC,YAAA,KAAK,EAAE,KAAK;SACb;AACA,aAAA,IAAI,CAAC,CAAC,WAAW,KAAI;YACpB,IAAI,SAAS,EAAE;AACb,gBAAA,WAAW,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;gBAChD;YACF;YACA,OAAO,GAAG,mBAAmB,CAC3B,WAAW,EACX,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,aAAa,CAAC,EAAE,CAAC,EACzC,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAC/B;AACH,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAEvB,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,IAAI;YAChB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;AAClC,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,GAAG,GAAG,IAAI,UAAU,CAAC;AAE9D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,YAAA,EAAY,aAAa,EAAA,QAAA,EACxE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MACvCA,GAAA,CAAA,KAAA,EAAA,EAEE,SAAS,EAAE,IAAI,CAAC,wCAAwC,EAAE;gBACxD,gDAAgD,EAAE,CAAC,GAAG,UAAU;AACjE,aAAA,CAAC,IAHG,CAAC,CAIN,CACH,CAAC,EAAA,CACE;AAEV,CAAC;AAOM,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,QAAQ,GACoB,KAAI;AAChC,IAAA,IAAI,MAAM,CAAC,QAAQ,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI;IAE9C,QACEC,gBACE,SAAS,EAAE,qCAAqC,MAAM,CAAC,UAAU,GAAG,+CAA+C,GAAG,EAAE,EAAE,EAC1H,OAAO,EAAE,CAAA,YAAA,EAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,aAEzCD,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,EAAE,EAAE,eAAe,MAAM,CAAC,QAAQ,CAAA,CAAE,EACpC,OAAO,EAAE,MAAM,CAAC,UAAU,EAC1B,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACzC,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,2CAA2C,YACxD,MAAM,CAAC,KAAK,EAAA,CACR,EACPA,IAAC,oBAAoB,EAAA,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,CAAA,EAAA,CAC7C;AAEZ;;;;"}

package/dist/esm/src/components/DeviceSettings/DeviceSelector.js

@@ -12,7 +12,7 @@ const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, d
     return (jsxs("label", { className: clsx('str-video__device-settings__option', {
             'str-video__device-settings__option--selected': selected,
             'str-video__device-settings__option--disabled': disabled,
-        }), htmlFor: id, children: [jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] }));
+        }), htmlFor: id, children: [jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), jsx("span", { className: "str-video__device-settings__option__label", children: label })] }));
 };
 const DeviceSelectorList = (props) => {
     const { devices = [], selectedDeviceId, title, type, onChange, children, } = props;

package/dist/esm/src/components/DeviceSettings/DeviceSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceSelector.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  PropsWithChildren,\n  useCallback,\n} from 'react';\n\nimport { DeviceListItem, useDeviceList } from '../../hooks';\nimport { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';\nimport { useMenuContext } from '../Menu';\n\ntype DeviceSelectorOptionProps = {\n  id: string;\n  label: string;\n  name?: string;\n  selected?: boolean;\n  value: string;\n  disabled?: boolean;\n  defaultChecked?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n};\n\nconst DeviceSelectorOption = ({\n  disabled,\n  id,\n  label,\n  onChange,\n  name,\n  selected,\n  defaultChecked,\n  value,\n}: DeviceSelectorOptionProps) => {\n  return (\n    <label\n      className={clsx('str-video__device-settings__option', {\n        'str-video__device-settings__option--selected': selected,\n        'str-video__device-settings__option--disabled': disabled,\n      })}\n      htmlFor={id}\n    >\n      <input\n        type=\"radio\"\n        name={name}\n        onChange={onChange}\n        value={value}\n        id={id}\n        checked={selected}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n      />\n      {label}\n    </label>\n  );\n};\n\nexport type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';\n\nconst DeviceSelectorList = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    type,\n    onChange,\n    children,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => {\n        return (\n          <DeviceSelectorOption\n            id={`${type}--${device.deviceId}`}\n            value={device.deviceId}\n            label={device.label}\n            key={device.deviceId}\n            onChange={(e) => {\n              const deviceId = e.target.value;\n              if (deviceId !== 'default') {\n                onChange?.(deviceId);\n              }\n              close?.();\n            }}\n            name={type}\n            selected={device.isSelected}\n          />\n        );\n      })}\n      {children}\n    </div>\n  );\n};\n\nexport type PreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nconst DeviceSelectorPreview = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n    PreviewItem: ComponentType<PreviewItemProps>;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    onChange,\n    children,\n    PreviewItem,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  const onSelect = useCallback(\n    (deviceId: string) => {\n      if (deviceId === 'default') return;\n      onChange?.(deviceId);\n      close?.();\n    },\n    [onChange, close],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => (\n        <PreviewItem\n          key={device.deviceId}\n          device={device}\n          onSelect={onSelect}\n        />\n      ))}\n      {children}\n    </div>\n  );\n};\n\nconst DeviceSelectorDropdown = (props: {\n  devices: MediaDeviceInfo[];\n  selectedDeviceId?: string;\n  title?: string;\n  onChange?: (deviceId: string) => void;\n  icon: string;\n}) => {\n  const { devices = [], selectedDeviceId, title, onChange, icon } = props;\n  const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(\n    devices,\n    selectedDeviceId,\n  );\n\n  const handleSelect = useCallback(\n    (index: number) => {\n      const deviceId = deviceList[index].deviceId;\n      if (deviceId !== 'default') {\n        onChange?.(deviceId);\n      }\n    },\n    [deviceList, onChange],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      <div className=\"str-video__device-settings__device-selector-title\">\n        {title}\n      </div>\n      <DropDownSelect\n        icon={icon}\n        defaultSelectedIndex={selectedIndex}\n        defaultSelectedLabel={selectedDeviceInfo.label}\n        handleSelect={handleSelect}\n      >\n        {deviceList.map((device) => (\n          <DropDownSelectOption\n            key={device.deviceId}\n            icon={icon}\n            label={device.label}\n            selected={device.isSelected}\n          />\n        ))}\n      </DropDownSelect>\n    </div>\n  );\n};\n\nexport const DeviceSelector = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    icon: string;\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }> &\n    (\n      | { visualType?: 'list' | 'dropdown' }\n      | { visualType: 'preview'; PreviewItem: ComponentType<PreviewItemProps> }\n    ),\n) => {\n  if (props.visualType === 'preview') {\n    const { PreviewItem, ...rest } = props;\n    return <DeviceSelectorPreview {...rest} PreviewItem={PreviewItem} />;\n  }\n\n  const { visualType = 'list', icon, ...rest } = props;\n  if (visualType === 'list') {\n    return <DeviceSelectorList {...rest} />;\n  }\n  return <DeviceSelectorDropdown {...rest} icon={icon} />;\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"DeviceSelector.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  PropsWithChildren,\n  useCallback,\n} from 'react';\n\nimport { DeviceListItem, useDeviceList } from '../../hooks';\nimport { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';\nimport { useMenuContext } from '../Menu';\n\ntype DeviceSelectorOptionProps = {\n  id: string;\n  label: string;\n  name?: string;\n  selected?: boolean;\n  value: string;\n  disabled?: boolean;\n  defaultChecked?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n};\n\nconst DeviceSelectorOption = ({\n  disabled,\n  id,\n  label,\n  onChange,\n  name,\n  selected,\n  defaultChecked,\n  value,\n}: DeviceSelectorOptionProps) => {\n  return (\n    <label\n      className={clsx('str-video__device-settings__option', {\n        'str-video__device-settings__option--selected': selected,\n        'str-video__device-settings__option--disabled': disabled,\n      })}\n      htmlFor={id}\n    >\n      <input\n        type=\"radio\"\n        name={name}\n        onChange={onChange}\n        value={value}\n        id={id}\n        checked={selected}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n      />\n      <span className=\"str-video__device-settings__option__label\">{label}</span>\n    </label>\n  );\n};\n\nexport type DeviceSelectorType = 'audioinput' | 'audiooutput' | 'videoinput';\n\nconst DeviceSelectorList = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    type,\n    onChange,\n    children,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => {\n        return (\n          <DeviceSelectorOption\n            id={`${type}--${device.deviceId}`}\n            value={device.deviceId}\n            label={device.label}\n            key={device.deviceId}\n            onChange={(e) => {\n              const deviceId = e.target.value;\n              if (deviceId !== 'default') {\n                onChange?.(deviceId);\n              }\n              close?.();\n            }}\n            name={type}\n            selected={device.isSelected}\n          />\n        );\n      })}\n      {children}\n    </div>\n  );\n};\n\nexport type PreviewItemProps = {\n  device: DeviceListItem;\n  onSelect: (deviceId: string) => void;\n};\n\nconst DeviceSelectorPreview = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n    PreviewItem: ComponentType<PreviewItemProps>;\n  }>,\n) => {\n  const {\n    devices = [],\n    selectedDeviceId,\n    title,\n    onChange,\n    children,\n    PreviewItem,\n  } = props;\n  const { close } = useMenuContext();\n  const { deviceList } = useDeviceList(devices, selectedDeviceId);\n\n  const onSelect = useCallback(\n    (deviceId: string) => {\n      if (deviceId === 'default') return;\n      onChange?.(deviceId);\n      close?.();\n    },\n    [onChange, close],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      {title && (\n        <div className=\"str-video__device-settings__device-selector-title\">\n          {title}\n        </div>\n      )}\n      {deviceList.map((device) => (\n        <PreviewItem\n          key={device.deviceId}\n          device={device}\n          onSelect={onSelect}\n        />\n      ))}\n      {children}\n    </div>\n  );\n};\n\nconst DeviceSelectorDropdown = (props: {\n  devices: MediaDeviceInfo[];\n  selectedDeviceId?: string;\n  title?: string;\n  onChange?: (deviceId: string) => void;\n  icon: string;\n}) => {\n  const { devices = [], selectedDeviceId, title, onChange, icon } = props;\n  const { deviceList, selectedDeviceInfo, selectedIndex } = useDeviceList(\n    devices,\n    selectedDeviceId,\n  );\n\n  const handleSelect = useCallback(\n    (index: number) => {\n      const deviceId = deviceList[index].deviceId;\n      if (deviceId !== 'default') {\n        onChange?.(deviceId);\n      }\n    },\n    [deviceList, onChange],\n  );\n\n  return (\n    <div className=\"str-video__device-settings__device-kind\">\n      <div className=\"str-video__device-settings__device-selector-title\">\n        {title}\n      </div>\n      <DropDownSelect\n        icon={icon}\n        defaultSelectedIndex={selectedIndex}\n        defaultSelectedLabel={selectedDeviceInfo.label}\n        handleSelect={handleSelect}\n      >\n        {deviceList.map((device) => (\n          <DropDownSelectOption\n            key={device.deviceId}\n            icon={icon}\n            label={device.label}\n            selected={device.isSelected}\n          />\n        ))}\n      </DropDownSelect>\n    </div>\n  );\n};\n\nexport const DeviceSelector = (\n  props: PropsWithChildren<{\n    devices: MediaDeviceInfo[];\n    icon: string;\n    type: DeviceSelectorType;\n    selectedDeviceId?: string;\n    title?: string;\n    onChange?: (deviceId: string) => void;\n  }> &\n    (\n      | { visualType?: 'list' | 'dropdown' }\n      | { visualType: 'preview'; PreviewItem: ComponentType<PreviewItemProps> }\n    ),\n) => {\n  if (props.visualType === 'preview') {\n    const { PreviewItem, ...rest } = props;\n    return <DeviceSelectorPreview {...rest} PreviewItem={PreviewItem} />;\n  }\n\n  const { visualType = 'list', icon, ...rest } = props;\n  if (visualType === 'list') {\n    return <DeviceSelectorList {...rest} />;\n  }\n  return <DeviceSelectorDropdown {...rest} icon={icon} />;\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/components/DeviceSettings/DeviceSelectorAudio.js

@@ -10,7 +10,7 @@ const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible =
     const { microphone, selectedDevice, devices } = useMicrophoneState();
     return (jsx(DeviceSelector, { devices: devices || [], selectedDeviceId: selectedDevice, type: "audioinput", onChange: async (deviceId) => {
             await microphone.select(deviceId);
-        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(AudioVolumeIndicator, {})] })) }));
+        }, title: title, visualType: visualType, icon: "mic", PreviewItem: DeviceAudioPreviewItem, children: volumeIndicatorVisible && (jsxs(Fragment, { children: [jsx(AudioVolumeIndicator, {}), jsx("hr", { className: "str-video__device-settings__separator" })] })) }));
 };
 const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
     const { useSpeakerState } = useCallStateHooks();
@@ -19,7 +19,7 @@ const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = tru
         return null;
     return (jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
             speaker.select(deviceId);
-        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
+        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl }) }));
 };
 
 export { DeviceSelectorAudioInput, DeviceSelectorAudioOutput };

package/dist/esm/src/components/DeviceSettings/DeviceSelectorAudio.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceSelectorAudio.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelectorAudio.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { DeviceAudioPreviewItem } from './DeviceAudioPreviewItem';\nimport { DeviceSelector } from './DeviceSelector';\nimport { AudioVolumeIndicator } from './AudioVolumeIndicator';\nimport { SpeakerTest } from './SpeakerTest';\n\nexport type DeviceSelectorAudioInputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown' | 'preview';\n  volumeIndicatorVisible?: boolean;\n};\n\nexport const DeviceSelectorAudioInput = ({\n  title,\n  visualType,\n  volumeIndicatorVisible = true,\n}: DeviceSelectorAudioInputProps) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { microphone, selectedDevice, devices } = useMicrophoneState();\n\n  return (\n    <DeviceSelector\n      devices={devices || []}\n      selectedDeviceId={selectedDevice}\n      type=\"audioinput\"\n      onChange={async (deviceId) => {\n        await microphone.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"mic\"\n      PreviewItem={DeviceAudioPreviewItem}\n    >\n      {volumeIndicatorVisible && (\n        <>\n          <hr className=\"str-video__device-settings__separator\" />\n          <AudioVolumeIndicator />\n        </>\n      )}\n    </DeviceSelector>\n  );\n};\n\nexport type DeviceSelectorAudioOutputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown';\n  speakerTestVisible?: boolean;\n  speakerTestAudioUrl?: string;\n};\n\nexport const DeviceSelectorAudioOutput = ({\n  title,\n  visualType,\n  speakerTestVisible = true,\n  speakerTestAudioUrl,\n}: DeviceSelectorAudioOutputProps) => {\n  const { useSpeakerState } = useCallStateHooks();\n  const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =\n    useSpeakerState();\n\n  if (!isDeviceSelectionSupported) return null;\n\n  return (\n    <DeviceSelector\n      devices={devices}\n      type=\"audiooutput\"\n      selectedDeviceId={selectedDevice}\n      onChange={(deviceId) => {\n        speaker.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"speaker\"\n    >\n      {speakerTestVisible && (\n        <>\n          <hr className=\"str-video__device-settings__separator\" />\n          <SpeakerTest audioUrl={speakerTestAudioUrl} />\n        </>\n      )}\n    </DeviceSelector>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAYO,MAAM,wBAAwB,GAAG,CAAC,EACvC,KAAK,EACL,UAAU,EACV,sBAAsB,GAAG,IAAI,GACC,KAAI;AAClC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;IAEpE,QACEA,GAAA,CAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,gBAAgB,EAAE,cAAc,EAChC,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,OAAO,QAAQ,KAAI;AAC3B,YAAA,MAAM,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC;AACnC,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,sBAAsB,EAAA,QAAA,EAElC,sBAAsB,KACrBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,CAAG,EACxDA,GAAA,CAAC,oBAAoB,EAAA,EAAA,CAAG,CAAA,EAAA,CACvB,CACJ,EAAA,CACc;AAErB;AASO,MAAM,yBAAyB,GAAG,CAAC,EACxC,KAAK,EACL,UAAU,EACV,kBAAkB,GAAG,IAAI,EACzB,mBAAmB,GACY,KAAI;AACnC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/C,IAAA,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,0BAA0B,EAAE,GACpE,eAAe,EAAE;AAEnB,IAAA,IAAI,CAAC,0BAA0B;AAAE,QAAA,OAAO,IAAI;IAE5C,QACEA,IAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,aAAa,EAClB,gBAAgB,EAAE,cAAc,EAChC,QAAQ,EAAE,CAAC,QAAQ,KAAI;AACrB,YAAA,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;AAC1B,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,SAAS,EAAA,QAAA,EAEb,kBAAkB,KACjBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,CAAG,EACxDA,IAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,mBAAmB,EAAA,CAAI,CAAA,EAAA,CAC7C,CACJ,EAAA,CACc;AAErB;;;;"}
+{"version":3,"file":"DeviceSelectorAudio.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSelectorAudio.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { DeviceAudioPreviewItem } from './DeviceAudioPreviewItem';\nimport { DeviceSelector } from './DeviceSelector';\nimport { AudioVolumeIndicator } from './AudioVolumeIndicator';\nimport { SpeakerTest } from './SpeakerTest';\n\nexport type DeviceSelectorAudioInputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown' | 'preview';\n  volumeIndicatorVisible?: boolean;\n};\n\nexport const DeviceSelectorAudioInput = ({\n  title,\n  visualType,\n  volumeIndicatorVisible = true,\n}: DeviceSelectorAudioInputProps) => {\n  const { useMicrophoneState } = useCallStateHooks();\n  const { microphone, selectedDevice, devices } = useMicrophoneState();\n\n  return (\n    <DeviceSelector\n      devices={devices || []}\n      selectedDeviceId={selectedDevice}\n      type=\"audioinput\"\n      onChange={async (deviceId) => {\n        await microphone.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"mic\"\n      PreviewItem={DeviceAudioPreviewItem}\n    >\n      {volumeIndicatorVisible && (\n        <>\n          <AudioVolumeIndicator />\n          <hr className=\"str-video__device-settings__separator\" />\n        </>\n      )}\n    </DeviceSelector>\n  );\n};\n\nexport type DeviceSelectorAudioOutputProps = {\n  title?: string;\n  visualType?: 'list' | 'dropdown';\n  speakerTestVisible?: boolean;\n  speakerTestAudioUrl?: string;\n};\n\nexport const DeviceSelectorAudioOutput = ({\n  title,\n  visualType,\n  speakerTestVisible = true,\n  speakerTestAudioUrl,\n}: DeviceSelectorAudioOutputProps) => {\n  const { useSpeakerState } = useCallStateHooks();\n  const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =\n    useSpeakerState();\n\n  if (!isDeviceSelectionSupported) return null;\n\n  return (\n    <DeviceSelector\n      devices={devices}\n      type=\"audiooutput\"\n      selectedDeviceId={selectedDevice}\n      onChange={(deviceId) => {\n        speaker.select(deviceId);\n      }}\n      title={title}\n      visualType={visualType}\n      icon=\"speaker\"\n    >\n      {speakerTestVisible && <SpeakerTest audioUrl={speakerTestAudioUrl} />}\n    </DeviceSelector>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAYO,MAAM,wBAAwB,GAAG,CAAC,EACvC,KAAK,EACL,UAAU,EACV,sBAAsB,GAAG,IAAI,GACC,KAAI;AAClC,IAAA,MAAM,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;IAEpE,QACEA,GAAA,CAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,gBAAgB,EAAE,cAAc,EAChC,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,OAAO,QAAQ,KAAI;AAC3B,YAAA,MAAM,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC;AACnC,QAAA,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,KAAK,EACV,WAAW,EAAE,sBAAsB,EAAA,QAAA,EAElC,sBAAsB,KACrBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAC,oBAAoB,KAAG,EACxBA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,uCAAuC,EAAA,CAAG,CAAA,EAAA,CACvD,CACJ,EAAA,CACc;AAErB;AASO,MAAM,yBAAyB,GAAG,CAAC,EACxC,KAAK,EACL,UAAU,EACV,kBAAkB,GAAG,IAAI,EACzB,mBAAmB,GACY,KAAI;AACnC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/C,IAAA,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,0BAA0B,EAAE,GACpE,eAAe,EAAE;AAEnB,IAAA,IAAI,CAAC,0BAA0B;AAAE,QAAA,OAAO,IAAI;IAE5C,QACEA,IAAC,cAAc,EAAA,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,aAAa,EAClB,gBAAgB,EAAE,cAAc,EAChC,QAAQ,EAAE,CAAC,QAAQ,KAAI;AACrB,YAAA,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;QAC1B,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,SAAS,YAEb,kBAAkB,IAAIA,GAAA,CAAC,WAAW,EAAA,EAAC,QAAQ,EAAE,mBAAmB,EAAA,CAAI,EAAA,CACtD;AAErB;;;;"}

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

@@ -1,25 +1,28 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import clsx from 'clsx';
 import { MenuToggle, MenuVisualType } from '../Menu/MenuToggle.js';
 import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from './DeviceSelectorAudio.js';
 import { DeviceSelectorVideo } from './DeviceSelectorVideo.js';
-import '../Button/CompositeButton.js';
+import '../Button/Button.js';
 import { IconButton } from '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
 
 const DeviceSettings = ({ visualType = MenuVisualType.MENU, }) => {
     return (jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleDeviceSettingsMenuButton, visualType: visualType, children: jsx(Menu, {}) }));
 };
 const Menu = () => {
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__device-settings", children: [jsx(DeviceSelectorVideo, { title: t('Select a Camera') }), jsx(DeviceSelectorAudioInput, { title: t('Select a Mic') }), jsx(DeviceSelectorAudioOutput, { title: t('Select Speakers') })] }));
+    return (jsxs("div", { className: "str-video__device-settings", children: [jsx(DeviceSelectorVideo, { title: t('deviceSettings.selectCamera.title', 'Select a Camera') }), jsx(DeviceSelectorAudioInput, { title: t('deviceSettings.selectMic.title', 'Select a Mic') }), jsx(DeviceSelectorAudioOutput, { title: t('deviceSettings.selectSpeakers.title', 'Select Speakers') })] }));
 };
 const ToggleDeviceSettingsMenuButton = forwardRef(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {
     const { t } = useI18n();
-    return (jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+    return (jsx(IconButton, { active: menuShown, size: "sm", variant: "secondary", className: clsx('str-video__device-settings__button', {
             'str-video__device-settings__button--active': menuShown,
-        }), title: t('Toggle device menu'), icon: "device-settings", ref: ref }));
+        }), title: t('deviceSettings.toggleDeviceMenu.title', 'Toggle device menu'), icon: "device-settings", ref: ref }));
 });
 
 export { DeviceSettings };

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

@@ -1 +1 @@
-{"version":3,"file":"DeviceSettings.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSettings.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\nimport { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';\nimport {\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n} from './DeviceSelectorAudio';\nimport { DeviceSelectorVideo } from './DeviceSelectorVideo';\nimport { IconButton } from '../Button';\n\nexport type DeviceSettingsProps = {\n  visualType?: MenuVisualType;\n};\n\nexport const DeviceSettings = ({\n  visualType = MenuVisualType.MENU,\n}: DeviceSettingsProps) => {\n  return (\n    <MenuToggle\n      placement=\"bottom-end\"\n      ToggleButton={ToggleDeviceSettingsMenuButton}\n      visualType={visualType}\n    >\n      <Menu />\n    </MenuToggle>\n  );\n};\n\nconst Menu = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__device-settings\">\n      <DeviceSelectorVideo title={t('Select a Camera')} />\n      <DeviceSelectorAudioInput title={t('Select a Mic')} />\n      <DeviceSelectorAudioOutput title={t('Select Speakers')} />\n    </div>\n  );\n};\n\nconst ToggleDeviceSettingsMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <IconButton\n      className={clsx('str-video__device-settings__button', {\n        'str-video__device-settings__button--active': menuShown,\n      })}\n      title={t('Toggle device menu')}\n      icon=\"device-settings\"\n      ref={ref}\n    />\n  );\n});\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAeO,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,GAAG,cAAc,CAAC,IAAI,GACZ,KAAI;IACxB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,YAAY,EACtB,YAAY,EAAE,8BAA8B,EAC5C,UAAU,EAAE,UAAU,EAAA,QAAA,EAEtBA,IAAC,IAAI,EAAA,EAAA,CAAG,EAAA,CACG;AAEjB;AAEA,MAAM,IAAI,GAAG,MAAK;AAChB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCD,IAAC,mBAAmB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAI,EACpDA,IAAC,wBAAwB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,EAAA,CAAI,EACtDA,IAAC,yBAAyB,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAAI,CAAA,EAAA,CACtD;AAEV,CAAC;AAED,MAAM,8BAA8B,GAAG,UAAU,CAG/C,SAAS,oCAAoC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,SAAS;AACxD,SAAA,CAAC,EACF,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAC9B,IAAI,EAAC,iBAAiB,EACtB,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CAAC;;;;"}
+{"version":3,"file":"DeviceSettings.js","sources":["../../../../../../../src/components/DeviceSettings/DeviceSettings.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '../../i18n';\nimport clsx from 'clsx';\nimport { MenuToggle, MenuVisualType, ToggleMenuButtonProps } from '../Menu';\nimport {\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n} from './DeviceSelectorAudio';\nimport { DeviceSelectorVideo } from './DeviceSelectorVideo';\nimport { IconButton } from '../Button';\n\nexport type DeviceSettingsProps = {\n  visualType?: MenuVisualType;\n};\n\nexport const DeviceSettings = ({\n  visualType = MenuVisualType.MENU,\n}: DeviceSettingsProps) => {\n  return (\n    <MenuToggle\n      placement=\"bottom-end\"\n      ToggleButton={ToggleDeviceSettingsMenuButton}\n      visualType={visualType}\n    >\n      <Menu />\n    </MenuToggle>\n  );\n};\n\nconst Menu = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__device-settings\">\n      <DeviceSelectorVideo\n        title={t('deviceSettings.selectCamera.title', 'Select a Camera')}\n      />\n      <DeviceSelectorAudioInput\n        title={t('deviceSettings.selectMic.title', 'Select a Mic')}\n      />\n      <DeviceSelectorAudioOutput\n        title={t('deviceSettings.selectSpeakers.title', 'Select Speakers')}\n      />\n    </div>\n  );\n};\n\nconst ToggleDeviceSettingsMenuButton = forwardRef<\n  HTMLButtonElement,\n  ToggleMenuButtonProps\n>(function ToggleDeviceSettingsMenuButtonRender({ menuShown }, ref) {\n  const { t } = useI18n();\n  return (\n    <IconButton\n      active={menuShown}\n      size=\"sm\"\n      variant=\"secondary\"\n      className={clsx('str-video__device-settings__button', {\n        'str-video__device-settings__button--active': menuShown,\n      })}\n      title={t('deviceSettings.toggleDeviceMenu.title', 'Toggle device menu')}\n      icon=\"device-settings\"\n      ref={ref}\n    />\n  );\n});\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAeO,MAAM,cAAc,GAAG,CAAC,EAC7B,UAAU,GAAG,cAAc,CAAC,IAAI,GACZ,KAAI;IACxB,QACEA,IAAC,UAAU,EAAA,EACT,SAAS,EAAC,YAAY,EACtB,YAAY,EAAE,8BAA8B,EAC5C,UAAU,EAAE,UAAU,EAAA,QAAA,EAEtBA,IAAC,IAAI,EAAA,EAAA,CAAG,EAAA,CACG;AAEjB;AAEA,MAAM,IAAI,GAAG,MAAK;AAChB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEC,cAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCD,GAAA,CAAC,mBAAmB,EAAA,EAClB,KAAK,EAAE,CAAC,CAAC,mCAAmC,EAAE,iBAAiB,CAAC,EAAA,CAChE,EACFA,GAAA,CAAC,wBAAwB,EAAA,EACvB,KAAK,EAAE,CAAC,CAAC,gCAAgC,EAAE,cAAc,CAAC,EAAA,CAC1D,EACFA,IAAC,yBAAyB,EAAA,EACxB,KAAK,EAAE,CAAC,CAAC,qCAAqC,EAAE,iBAAiB,CAAC,EAAA,CAClE,CAAA,EAAA,CACE;AAEV,CAAC;AAED,MAAM,8BAA8B,GAAG,UAAU,CAG/C,SAAS,oCAAoC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEA,IAAC,UAAU,EAAA,EACT,MAAM,EAAE,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,SAAS;AACxD,SAAA,CAAC,EACF,KAAK,EAAE,CAAC,CAAC,uCAAuC,EAAE,oBAAoB,CAAC,EACvE,IAAI,EAAC,iBAAiB,EACtB,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC,CAAC;;;;"}

package/dist/esm/src/components/DeviceSettings/SpeakerTest.js

@@ -1,8 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback } from 'react';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-import { CompositeButton } from '../Button/CompositeButton.js';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
+import '../Button/Button.js';
 import '../Button/IconButton.js';
+import { CompositeButton } from '../Button/CompositeButton.js';
 import { Icon } from '../Icon/Icon.js';
 
 /**
@@ -15,7 +19,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = useRef(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const { t } = useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"2.0.0-beta.0"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"2.0.0-beta.1"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -50,7 +54,9 @@ const SpeakerTest = (props) => {
         }
     }, [isPlaying, audioUrl]);
     const handleAudioEnded = useCallback(() => setIsPlaying(false), []);
-    return (jsxs("div", { className: "str-video__speaker-test", children: [jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsx(CompositeButton, { className: "str-video__speaker-test__button", onClick: handleStartTest, type: "button", children: jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsx(Icon, { icon: "speaker" }), isPlaying ? t('Stop test') : t('Test speaker')] }) })] }));
+    return (jsxs("div", { className: "str-video__speaker-test", children: [jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsx(CompositeButton, { className: "str-video__speaker-test__button", appearance: "outline", size: "sm", onClick: handleStartTest, type: "button", children: jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsx(Icon, { icon: "speaker" }), isPlaying
+                            ? t('deviceSettings.speakerTest.stopTest.label', 'Stop test')
+                            : t('deviceSettings.speakerTest.testSpeaker.label', 'Test speaker')] }) })] }));
 };
 
 export { SpeakerTest };

package/dist/esm/src/components/DeviceSettings/SpeakerTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeakerTest.js","sources":["../../../../../../../src/components/DeviceSettings/SpeakerTest.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { CompositeButton } from '../Button';\nimport { Icon } from '../Icon';\n\n/**\n * SpeakerTest component that plays a test audio through the selected speaker.\n * This allows users to verify their audio output device is working correctly.\n */\nexport const SpeakerTest = (props: { audioUrl?: string }) => {\n  const { useSpeakerState } = useCallStateHooks();\n  const { selectedDevice } = useSpeakerState();\n  const audioElementRef = useRef<HTMLAudioElement | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const { t } = useI18n();\n\n  const {\n    audioUrl = `https://unpkg.com/${process.env.PKG_NAME}@${process.env.PKG_VERSION}/assets/piano.mp3`,\n  } = props;\n\n  // Update audio output device when selection changes\n  useEffect(() => {\n    const audio = audioElementRef.current;\n    if (!audio || !selectedDevice) return;\n\n    // Set the sinkId to route audio to the selected speaker\n    if ('setSinkId' in audio) {\n      audio.setSinkId(selectedDevice).catch((err) => {\n        console.error('Failed to set audio output device:', err);\n      });\n    }\n  }, [selectedDevice]);\n\n  const handleStartTest = useCallback(async () => {\n    const audio = audioElementRef.current;\n    if (!audio) return;\n\n    audio.src = audioUrl;\n\n    try {\n      if (isPlaying) {\n        audio.pause();\n        audio.currentTime = 0;\n        setIsPlaying(false);\n      } else {\n        await audio.play();\n        setIsPlaying(true);\n      }\n    } catch (err) {\n      console.error('Failed to play test audio:', err);\n      setIsPlaying(false);\n    }\n  }, [isPlaying, audioUrl]);\n\n  const handleAudioEnded = useCallback(() => setIsPlaying(false), []);\n  return (\n    <div className=\"str-video__speaker-test\">\n      <audio\n        ref={audioElementRef}\n        onEnded={handleAudioEnded}\n        onPause={handleAudioEnded}\n      />\n      <CompositeButton\n        className=\"str-video__speaker-test__button\"\n        onClick={handleStartTest}\n        type=\"button\"\n      >\n        <div className=\"str-video__speaker-test__button-content\">\n          <Icon icon=\"speaker\" />\n          {isPlaying ? t('Stop test') : t('Test speaker')}\n        </div>\n      </CompositeButton>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAKA;;;AAGG;AACI,MAAM,WAAW,GAAG,CAAC,KAA4B,KAAI;AAC1D,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE;AAC5C,IAAA,MAAM,eAAe,GAAG,MAAM,CAA0B,IAAI,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,MAAM,EACJ,QAAQ,GAAG,qBAAqB,4BAAoB,IAAI,cAAuB,mBAAmB,GACnG,GAAG,KAAK;;IAGT,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO;AACrC,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,cAAc;YAAE;;AAG/B,QAAA,IAAI,WAAW,IAAI,KAAK,EAAE;YACxB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AAC5C,gBAAA,OAAO,CAAC,KAAK,CAAC,oCAAoC,EAAE,GAAG,CAAC;AAC1D,YAAA,CAAC,CAAC;QACJ;AACF,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,YAAW;AAC7C,QAAA,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO;AACrC,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,KAAK,CAAC,GAAG,GAAG,QAAQ;AAEpB,QAAA,IAAI;YACF,IAAI,SAAS,EAAE;gBACb,KAAK,CAAC,KAAK,EAAE;AACb,gBAAA,KAAK,CAAC,WAAW,GAAG,CAAC;gBACrB,YAAY,CAAC,KAAK,CAAC;YACrB;iBAAO;AACL,gBAAA,MAAM,KAAK,CAAC,IAAI,EAAE;gBAClB,YAAY,CAAC,IAAI,CAAC;YACpB;QACF;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,GAAG,CAAC;YAChD,YAAY,CAAC,KAAK,CAAC;QACrB;AACF,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzB,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;AACnE,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACtCC,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EAAA,CACzB,EACFA,GAAA,CAAC,eAAe,EAAA,EACd,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,eAAe,EACxB,IAAI,EAAC,QAAQ,EAAA,QAAA,EAEbD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,aACtDC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAA,CAAG,EACtB,SAAS,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,CAAA,EAAA,CAC3C,EAAA,CACU,CAAA,EAAA,CACd;AAEV;;;;"}
+{"version":3,"file":"SpeakerTest.js","sources":["../../../../../../../src/components/DeviceSettings/SpeakerTest.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport { CompositeButton } from '../Button';\nimport { Icon } from '../Icon';\n\n/**\n * SpeakerTest component that plays a test audio through the selected speaker.\n * This allows users to verify their audio output device is working correctly.\n */\nexport const SpeakerTest = (props: { audioUrl?: string }) => {\n  const { useSpeakerState } = useCallStateHooks();\n  const { selectedDevice } = useSpeakerState();\n  const audioElementRef = useRef<HTMLAudioElement | null>(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const { t } = useI18n();\n\n  const {\n    audioUrl = `https://unpkg.com/${process.env.PKG_NAME}@${process.env.PKG_VERSION}/assets/piano.mp3`,\n  } = props;\n\n  // Update audio output device when selection changes\n  useEffect(() => {\n    const audio = audioElementRef.current;\n    if (!audio || !selectedDevice) return;\n\n    // Set the sinkId to route audio to the selected speaker\n    if ('setSinkId' in audio) {\n      audio.setSinkId(selectedDevice).catch((err) => {\n        console.error('Failed to set audio output device:', err);\n      });\n    }\n  }, [selectedDevice]);\n\n  const handleStartTest = useCallback(async () => {\n    const audio = audioElementRef.current;\n    if (!audio) return;\n\n    audio.src = audioUrl;\n\n    try {\n      if (isPlaying) {\n        audio.pause();\n        audio.currentTime = 0;\n        setIsPlaying(false);\n      } else {\n        await audio.play();\n        setIsPlaying(true);\n      }\n    } catch (err) {\n      console.error('Failed to play test audio:', err);\n      setIsPlaying(false);\n    }\n  }, [isPlaying, audioUrl]);\n\n  const handleAudioEnded = useCallback(() => setIsPlaying(false), []);\n  return (\n    <div className=\"str-video__speaker-test\">\n      <audio\n        ref={audioElementRef}\n        onEnded={handleAudioEnded}\n        onPause={handleAudioEnded}\n      />\n      <CompositeButton\n        className=\"str-video__speaker-test__button\"\n        appearance=\"outline\"\n        size=\"sm\"\n        onClick={handleStartTest}\n        type=\"button\"\n      >\n        <div className=\"str-video__speaker-test__button-content\">\n          <Icon icon=\"speaker\" />\n          {isPlaying\n            ? t('deviceSettings.speakerTest.stopTest.label', 'Stop test')\n            : t('deviceSettings.speakerTest.testSpeaker.label', 'Test speaker')}\n        </div>\n      </CompositeButton>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAMA;;;AAGG;AACI,MAAM,WAAW,GAAG,CAAC,KAA4B,KAAI;AAC1D,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/C,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE;AAC5C,IAAA,MAAM,eAAe,GAAG,MAAM,CAA0B,IAAI,CAAC;IAC7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,MAAM,EACJ,QAAQ,GAAG,qBAAqB,4BAAoB,IAAI,cAAuB,mBAAmB,GACnG,GAAG,KAAK;;IAGT,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO;AACrC,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,cAAc;YAAE;;AAG/B,QAAA,IAAI,WAAW,IAAI,KAAK,EAAE;YACxB,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAI;AAC5C,gBAAA,OAAO,CAAC,KAAK,CAAC,oCAAoC,EAAE,GAAG,CAAC;AAC1D,YAAA,CAAC,CAAC;QACJ;AACF,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,YAAW;AAC7C,QAAA,MAAM,KAAK,GAAG,eAAe,CAAC,OAAO;AACrC,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,KAAK,CAAC,GAAG,GAAG,QAAQ;AAEpB,QAAA,IAAI;YACF,IAAI,SAAS,EAAE;gBACb,KAAK,CAAC,KAAK,EAAE;AACb,gBAAA,KAAK,CAAC,WAAW,GAAG,CAAC;gBACrB,YAAY,CAAC,KAAK,CAAC;YACrB;iBAAO;AACL,gBAAA,MAAM,KAAK,CAAC,IAAI,EAAE;gBAClB,YAAY,CAAC,IAAI,CAAC;YACpB;QACF;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,GAAG,CAAC;YAChD,YAAY,CAAC,KAAK,CAAC;QACrB;AACF,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzB,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;IACnE,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACtCC,GAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,EAAA,CACzB,EACFA,GAAA,CAAC,eAAe,EAAA,EACd,SAAS,EAAC,iCAAiC,EAC3C,UAAU,EAAC,SAAS,EACpB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,eAAe,EACxB,IAAI,EAAC,QAAQ,EAAA,QAAA,EAEbD,cAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAA,CAAG,EACtB;AACC,8BAAE,CAAC,CAAC,2CAA2C,EAAE,WAAW;8BAC1D,CAAC,CAAC,8CAA8C,EAAE,cAAc,CAAC,CAAA,EAAA,CACjE,EAAA,CACU,CAAA,EAAA,CACd;AAEV;;;;"}

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

@@ -58,7 +58,7 @@ const Select = (props) => {
         getItemProps,
         handleSelect,
     }), [activeIndex, selectedIndex, getItemProps, handleSelect]);
-    return (jsxs("div", { className: "str-video__dropdown", children: [jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), selectedLabel] }), jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsx(FloatingFocusManager, { context: context, modal: false, children: jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
+    return (jsxs("div", { className: "str-video__dropdown", children: [jsxs("div", { className: "str-video__dropdown-selected", ref: refs.setReference, tabIndex: 0, ...getReferenceProps(), children: [jsxs("label", { className: "str-video__dropdown-selected__label", children: [icon && (jsx(Icon, { className: "str-video__dropdown-selected__icon", icon: icon })), jsx("span", { className: "str-video__dropdown-selected__text", children: selectedLabel })] }), jsx(Icon, { className: "str-video__dropdown-selected__chevron", icon: isOpen ? 'chevron-up' : 'chevron-down' })] }), jsx(SelectContext.Provider, { value: selectContext, children: isOpen && (jsx(FloatingFocusManager, { context: context, modal: false, children: jsx("div", { className: "str-video__dropdown-list", ref: refs.setFloating, ...getFloatingProps(), children: jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: children }) }) })) })] }));
 };
 const DropDownSelectOption = (props) => {
     const { selected, label, icon } = props;