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

package/dist/esm/src/core/components/ParticipantView/ParticipantActionsContextMenu.js

@@ -1,10 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { useCall, useI18n, Restricted } from '@stream-io/video-react-bindings';
+import { useCall, Restricted } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { hasAudio, hasVideo, hasScreenShare, hasScreenShareAudio, OwnCapability } from '@stream-io/video-client';
 import { useParticipantViewContext } from './ParticipantViewContext.js';
 import { useMenuContext } from '../../../components/Menu/MenuToggle.js';
-import { GenericMenu, GenericMenuButtonItem } from '../../../components/Menu/GenericMenu.js';
+import { GenericMenu, GenericMenuButtonItem, GenericMenuSeparator } from '../../../components/Menu/GenericMenu.js';
 import { Icon } from '../../../components/Icon/Icon.js';
 import { usePictureInPictureState } from '../../hooks/usePictureInPictureState.js';
 
@@ -85,12 +88,14 @@ const ParticipantActionsContextMenu = () => {
         return document.exitPictureInPicture().catch(console.error);
     };
     const { close } = useMenuContext() || {};
-    return (jsxs(GenericMenu, { onItemClick: close, children: [jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), pin ? t('Unpin') : t('Pin')] }), jsxs(Restricted, { requiredGrants: [OwnCapability.PIN_FOR_EVERYONE], children: [jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Pin for everyone')] }), jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('Unpin for everyone')] })] }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsx(Icon, { icon: "not-allowed" }), t('Block')] }) }), jsx(Restricted, { requiredGrants: [OwnCapability.KICK_USER], children: jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsx(Icon, { icon: "kick-user" }), t('Kick')] }) }), jsxs(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsx(Icon, { icon: "camera-off-outline" }), t('Turn off video')] })), hasScreenShareTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsx(Icon, { icon: "screen-share-off" }), t('Turn off screen share')] })), hasAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute audio')] })), hasScreenShareAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsx(Icon, { icon: "no-audio" }), t('Mute screen share audio')] }))] }), participantViewElement &&
-                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsx(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: t('{{ direction }} fullscreen', {
-                    direction: fullscreenModeOn ? t('Leave') : t('Enter'),
-                }) })), videoElement && document.pictureInPictureEnabled && (jsx(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: t('{{ direction }} picture-in-picture', {
-                    direction: isPiP ? t('Leave') : t('Enter'),
-                }) })), jsxs(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_AUDIO), children: t('Allow audio') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_VIDEO), children: t('Allow video') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SCREENSHARE), children: t('Allow screen sharing') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_AUDIO), children: t('Disable audio') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_VIDEO), children: t('Disable video') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SCREENSHARE), children: t('Disable screen sharing') })] })] }));
+    return (jsxs(GenericMenu, { onItemClick: close, children: [jsxs(GenericMenuButtonItem, { onClick: toggleParticipantPin, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), pin
+                        ? t('participantView.unpin.label', 'Unpin')
+                        : t('participantView.actionsMenu.pin.label', 'Pin')] }), jsxs(Restricted, { requiredGrants: [OwnCapability.PIN_FOR_EVERYONE], children: [jsxs(GenericMenuButtonItem, { onClick: pinForEveryone, disabled: pin && !pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('participantView.actionsMenu.pinForEveryone.label', 'Pin for everyone')] }), jsxs(GenericMenuButtonItem, { onClick: unpinForEveryone, disabled: !pin || pin.isLocalPin, children: [jsx(Icon, { icon: "pin" }), t('participantView.actionsMenu.unpinForEveryone.label', 'Unpin for everyone')] })] }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsxs(GenericMenuButtonItem, { onClick: blockUser, children: [jsx(Icon, { icon: "not-allowed" }), t('participantView.actionsMenu.block.label', 'Block')] }) }), jsx(Restricted, { requiredGrants: [OwnCapability.KICK_USER], children: jsxs(GenericMenuButtonItem, { onClick: kickUser, children: [jsx(Icon, { icon: "kick-user" }), t('participantView.actionsMenu.kick.label', 'Kick')] }) }), jsx(GenericMenuSeparator, {}), jsxs(Restricted, { requiredGrants: [OwnCapability.MUTE_USERS], children: [hasVideoTrack && (jsxs(GenericMenuButtonItem, { onClick: muteVideo, children: [jsx(Icon, { icon: "camera-off-outline" }), t('participantView.actionsMenu.turnOffVideo.label', 'Turn off video')] })), hasScreenShareTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShare, children: [jsx(Icon, { icon: "screen-share-off" }), t('participantView.actionsMenu.turnOffScreenShare.label', 'Turn off screen share')] })), hasAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteAudio, children: [jsx(Icon, { icon: "no-audio" }), t('participantView.actionsMenu.muteAudio.label', 'Mute audio')] })), hasScreenShareAudioTrack && (jsxs(GenericMenuButtonItem, { onClick: muteScreenShareAudio, children: [jsx(Icon, { icon: "no-audio" }), t('participantView.actionsMenu.muteScreenShareAudio.label', 'Mute screen share audio')] }))] }), participantViewElement &&
+                typeof participantViewElement.requestFullscreen !== 'undefined' && (jsxs(GenericMenuButtonItem, { onClick: toggleFullscreenMode, children: [jsx(Icon, { icon: "fullscreen" }), fullscreenModeOn
+                        ? t('participantView.actionsMenu.leaveFullscreen.label', 'Leave fullscreen')
+                        : t('participantView.actionsMenu.enterFullscreen.label', 'Enter fullscreen')] })), videoElement && document.pictureInPictureEnabled && (jsxs(GenericMenuButtonItem, { onClick: togglePictureInPicture, children: [jsx(Icon, { icon: "pip" }), isPiP
+                        ? t('participantView.actionsMenu.leavePip.label', 'Leave picture-in-picture')
+                        : t('participantView.actionsMenu.enterPip.label', 'Enter picture-in-picture')] })), jsx(GenericMenuSeparator, {}), jsxs(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL_PERMISSIONS], children: [jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_AUDIO), children: t('participantView.actionsMenu.allowAudio.label', 'Allow audio') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SEND_VIDEO), children: t('participantView.actionsMenu.allowVideo.label', 'Allow video') }), jsx(GenericMenuButtonItem, { onClick: grantPermission(OwnCapability.SCREENSHARE), children: t('participantView.actionsMenu.allowScreenSharing.label', 'Allow screen sharing') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_AUDIO), children: t('participantView.actionsMenu.disableAudio.label', 'Disable audio') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SEND_VIDEO), children: t('participantView.actionsMenu.disableVideo.label', 'Disable video') }), jsx(GenericMenuButtonItem, { onClick: revokePermission(OwnCapability.SCREENSHARE), children: t('participantView.actionsMenu.disableScreenSharing.label', 'Disable screen sharing') })] })] }));
 };
 
 export { ParticipantActionsContextMenu };

package/dist/esm/src/core/components/ParticipantView/ParticipantActionsContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParticipantActionsContextMenu.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Restricted, useCall, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  hasAudio,\n  hasScreenShare,\n  hasScreenShareAudio,\n  hasVideo,\n  OwnCapability,\n  UpdateUserPermissionsRequestGrantPermissionsEnum,\n  UpdateUserPermissionsRequestRevokePermissionsEnum,\n} from '@stream-io/video-client';\nimport { useParticipantViewContext } from './ParticipantViewContext';\nimport {\n  GenericMenu,\n  GenericMenuButtonItem,\n  useMenuContext,\n} from '../../../components/Menu';\nimport { Icon } from '../../../components/Icon';\nimport { usePictureInPictureState } from '../../hooks/usePictureInPictureState';\n\nexport const ParticipantActionsContextMenu = () => {\n  const { participant, participantViewElement, videoElement } =\n    useParticipantViewContext();\n  const [fullscreenModeOn, setFullscreenModeOn] = useState(\n    !!document.fullscreenElement,\n  );\n  const call = useCall();\n  const isPiP = usePictureInPictureState(videoElement ?? undefined);\n  const { t } = useI18n();\n\n  const { pin, sessionId, userId } = participant;\n\n  const hasAudioTrack = hasAudio(participant);\n  const hasVideoTrack = hasVideo(participant);\n  const hasScreenShareTrack = hasScreenShare(participant);\n  const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n\n  const blockUser = () => call?.blockUser(userId);\n  const kickUser = () => call?.kickUser({ user_id: userId });\n  const muteAudio = () => call?.muteUser(userId, 'audio');\n  const muteVideo = () => call?.muteUser(userId, 'video');\n  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');\n  const muteScreenShareAudio = () =>\n    call?.muteUser(userId, 'screenshare_audio');\n\n  const grantPermission =\n    (permission: UpdateUserPermissionsRequestGrantPermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        grant_permissions: [permission],\n      });\n    };\n\n  const revokePermission =\n    (permission: UpdateUserPermissionsRequestRevokePermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        revoke_permissions: [permission],\n      });\n    };\n\n  const toggleParticipantPin = () => {\n    if (pin) {\n      call?.unpin(sessionId);\n    } else {\n      call?.pin(sessionId);\n    }\n  };\n\n  const pinForEveryone = () => {\n    call\n      ?.pinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to pin participant ${userId}`, err);\n      });\n  };\n\n  const unpinForEveryone = () => {\n    call\n      ?.unpinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to unpin participant ${userId}`, err);\n      });\n  };\n\n  const toggleFullscreenMode = () => {\n    if (!fullscreenModeOn) {\n      return participantViewElement?.requestFullscreen().catch(console.error);\n    }\n    return document.exitFullscreen().catch(console.error);\n  };\n\n  useEffect(() => {\n    // handles the case when fullscreen mode is toggled externally,\n    // e.g., by pressing ESC key or some other keyboard shortcut\n    const handleFullscreenChange = () => {\n      setFullscreenModeOn(!!document.fullscreenElement);\n    };\n    document.addEventListener('fullscreenchange', handleFullscreenChange);\n    return () => {\n      document.removeEventListener('fullscreenchange', handleFullscreenChange);\n    };\n  }, []);\n\n  const togglePictureInPicture = () => {\n    if (videoElement && !isPiP) {\n      return videoElement\n        .requestPictureInPicture()\n        .catch(console.error) as Promise<void>;\n    }\n\n    return document.exitPictureInPicture().catch(console.error);\n  };\n\n  const { close } = useMenuContext() || {};\n  return (\n    <GenericMenu onItemClick={close}>\n      <GenericMenuButtonItem\n        onClick={toggleParticipantPin}\n        disabled={pin && !pin.isLocalPin}\n      >\n        <Icon icon=\"pin\" />\n        {pin ? t('Unpin') : t('Pin')}\n      </GenericMenuButtonItem>\n      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>\n        <GenericMenuButtonItem\n          onClick={pinForEveryone}\n          disabled={pin && !pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t('Pin for everyone')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={unpinForEveryone}\n          disabled={!pin || pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t('Unpin for everyone')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>\n        <GenericMenuButtonItem onClick={blockUser}>\n          <Icon icon=\"not-allowed\" />\n          {t('Block')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.KICK_USER]}>\n        <GenericMenuButtonItem onClick={kickUser}>\n          <Icon icon=\"kick-user\" />\n          {t('Kick')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>\n        {hasVideoTrack && (\n          <GenericMenuButtonItem onClick={muteVideo}>\n            <Icon icon=\"camera-off-outline\" />\n            {t('Turn off video')}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShare}>\n            <Icon icon=\"screen-share-off\" />\n            {t('Turn off screen share')}\n          </GenericMenuButtonItem>\n        )}\n        {hasAudioTrack && (\n          <GenericMenuButtonItem onClick={muteAudio}>\n            <Icon icon=\"no-audio\" />\n            {t('Mute audio')}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareAudioTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShareAudio}>\n            <Icon icon=\"no-audio\" />\n            {t('Mute screen share audio')}\n          </GenericMenuButtonItem>\n        )}\n      </Restricted>\n      {participantViewElement &&\n        typeof participantViewElement.requestFullscreen !== 'undefined' && (\n          <GenericMenuButtonItem onClick={toggleFullscreenMode}>\n            {t('{{ direction }} fullscreen', {\n              direction: fullscreenModeOn ? t('Leave') : t('Enter'),\n            })}\n          </GenericMenuButtonItem>\n        )}\n      {videoElement && document.pictureInPictureEnabled && (\n        <GenericMenuButtonItem onClick={togglePictureInPicture}>\n          {t('{{ direction }} picture-in-picture', {\n            direction: isPiP ? t('Leave') : t('Enter'),\n          })}\n        </GenericMenuButtonItem>\n      )}\n      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('Allow audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('Allow video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SCREENSHARE)}\n        >\n          {t('Allow screen sharing')}\n        </GenericMenuButtonItem>\n\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('Disable audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('Disable video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SCREENSHARE)}\n        >\n          {t('Disable screen sharing')}\n        </GenericMenuButtonItem>\n      </Restricted>\n    </GenericMenu>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ParticipantActionsContextMenu.js","sources":["../../../../../../../../src/core/components/ParticipantView/ParticipantActionsContextMenu.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Restricted, useCall } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport {\n  hasAudio,\n  hasScreenShare,\n  hasScreenShareAudio,\n  hasVideo,\n  OwnCapability,\n  UpdateUserPermissionsRequestGrantPermissionsEnum,\n  UpdateUserPermissionsRequestRevokePermissionsEnum,\n} from '@stream-io/video-client';\nimport { useParticipantViewContext } from './ParticipantViewContext';\nimport {\n  GenericMenu,\n  GenericMenuButtonItem,\n  GenericMenuSeparator,\n  useMenuContext,\n} from '../../../components/Menu';\nimport { Icon } from '../../../components/Icon';\nimport { usePictureInPictureState } from '../../hooks/usePictureInPictureState';\n\nexport const ParticipantActionsContextMenu = () => {\n  const { participant, participantViewElement, videoElement } =\n    useParticipantViewContext();\n  const [fullscreenModeOn, setFullscreenModeOn] = useState(\n    !!document.fullscreenElement,\n  );\n  const call = useCall();\n  const isPiP = usePictureInPictureState(videoElement ?? undefined);\n  const { t } = useI18n();\n\n  const { pin, sessionId, userId } = participant;\n\n  const hasAudioTrack = hasAudio(participant);\n  const hasVideoTrack = hasVideo(participant);\n  const hasScreenShareTrack = hasScreenShare(participant);\n  const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n\n  const blockUser = () => call?.blockUser(userId);\n  const kickUser = () => call?.kickUser({ user_id: userId });\n  const muteAudio = () => call?.muteUser(userId, 'audio');\n  const muteVideo = () => call?.muteUser(userId, 'video');\n  const muteScreenShare = () => call?.muteUser(userId, 'screenshare');\n  const muteScreenShareAudio = () =>\n    call?.muteUser(userId, 'screenshare_audio');\n\n  const grantPermission =\n    (permission: UpdateUserPermissionsRequestGrantPermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        grant_permissions: [permission],\n      });\n    };\n\n  const revokePermission =\n    (permission: UpdateUserPermissionsRequestRevokePermissionsEnum) => () => {\n      call?.updateUserPermissions({\n        user_id: userId,\n        revoke_permissions: [permission],\n      });\n    };\n\n  const toggleParticipantPin = () => {\n    if (pin) {\n      call?.unpin(sessionId);\n    } else {\n      call?.pin(sessionId);\n    }\n  };\n\n  const pinForEveryone = () => {\n    call\n      ?.pinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to pin participant ${userId}`, err);\n      });\n  };\n\n  const unpinForEveryone = () => {\n    call\n      ?.unpinForEveryone({ user_id: userId, session_id: sessionId })\n      .catch((err) => {\n        console.error(`Failed to unpin participant ${userId}`, err);\n      });\n  };\n\n  const toggleFullscreenMode = () => {\n    if (!fullscreenModeOn) {\n      return participantViewElement?.requestFullscreen().catch(console.error);\n    }\n    return document.exitFullscreen().catch(console.error);\n  };\n\n  useEffect(() => {\n    // handles the case when fullscreen mode is toggled externally,\n    // e.g., by pressing ESC key or some other keyboard shortcut\n    const handleFullscreenChange = () => {\n      setFullscreenModeOn(!!document.fullscreenElement);\n    };\n    document.addEventListener('fullscreenchange', handleFullscreenChange);\n    return () => {\n      document.removeEventListener('fullscreenchange', handleFullscreenChange);\n    };\n  }, []);\n\n  const togglePictureInPicture = () => {\n    if (videoElement && !isPiP) {\n      return videoElement\n        .requestPictureInPicture()\n        .catch(console.error) as Promise<void>;\n    }\n\n    return document.exitPictureInPicture().catch(console.error);\n  };\n\n  const { close } = useMenuContext() || {};\n  return (\n    <GenericMenu onItemClick={close}>\n      <GenericMenuButtonItem\n        onClick={toggleParticipantPin}\n        disabled={pin && !pin.isLocalPin}\n      >\n        <Icon icon=\"pin\" />\n        {pin\n          ? t('participantView.unpin.label', 'Unpin')\n          : t('participantView.actionsMenu.pin.label', 'Pin')}\n      </GenericMenuButtonItem>\n      <Restricted requiredGrants={[OwnCapability.PIN_FOR_EVERYONE]}>\n        <GenericMenuButtonItem\n          onClick={pinForEveryone}\n          disabled={pin && !pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t(\n            'participantView.actionsMenu.pinForEveryone.label',\n            'Pin for everyone',\n          )}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={unpinForEveryone}\n          disabled={!pin || pin.isLocalPin}\n        >\n          <Icon icon=\"pin\" />\n          {t(\n            'participantView.actionsMenu.unpinForEveryone.label',\n            'Unpin for everyone',\n          )}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>\n        <GenericMenuButtonItem onClick={blockUser}>\n          <Icon icon=\"not-allowed\" />\n          {t('participantView.actionsMenu.block.label', 'Block')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <Restricted requiredGrants={[OwnCapability.KICK_USER]}>\n        <GenericMenuButtonItem onClick={kickUser}>\n          <Icon icon=\"kick-user\" />\n          {t('participantView.actionsMenu.kick.label', 'Kick')}\n        </GenericMenuButtonItem>\n      </Restricted>\n      <GenericMenuSeparator />\n      <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>\n        {hasVideoTrack && (\n          <GenericMenuButtonItem onClick={muteVideo}>\n            <Icon icon=\"camera-off-outline\" />\n            {t(\n              'participantView.actionsMenu.turnOffVideo.label',\n              'Turn off video',\n            )}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShare}>\n            <Icon icon=\"screen-share-off\" />\n            {t(\n              'participantView.actionsMenu.turnOffScreenShare.label',\n              'Turn off screen share',\n            )}\n          </GenericMenuButtonItem>\n        )}\n        {hasAudioTrack && (\n          <GenericMenuButtonItem onClick={muteAudio}>\n            <Icon icon=\"no-audio\" />\n            {t('participantView.actionsMenu.muteAudio.label', 'Mute audio')}\n          </GenericMenuButtonItem>\n        )}\n        {hasScreenShareAudioTrack && (\n          <GenericMenuButtonItem onClick={muteScreenShareAudio}>\n            <Icon icon=\"no-audio\" />\n            {t(\n              'participantView.actionsMenu.muteScreenShareAudio.label',\n              'Mute screen share audio',\n            )}\n          </GenericMenuButtonItem>\n        )}\n      </Restricted>\n      {participantViewElement &&\n        typeof participantViewElement.requestFullscreen !== 'undefined' && (\n          <GenericMenuButtonItem onClick={toggleFullscreenMode}>\n            <Icon icon=\"fullscreen\" />\n            {fullscreenModeOn\n              ? t(\n                  'participantView.actionsMenu.leaveFullscreen.label',\n                  'Leave fullscreen',\n                )\n              : t(\n                  'participantView.actionsMenu.enterFullscreen.label',\n                  'Enter fullscreen',\n                )}\n          </GenericMenuButtonItem>\n        )}\n      {videoElement && document.pictureInPictureEnabled && (\n        <GenericMenuButtonItem onClick={togglePictureInPicture}>\n          <Icon icon=\"pip\" />\n          {isPiP\n            ? t(\n                'participantView.actionsMenu.leavePip.label',\n                'Leave picture-in-picture',\n              )\n            : t(\n                'participantView.actionsMenu.enterPip.label',\n                'Enter picture-in-picture',\n              )}\n        </GenericMenuButtonItem>\n      )}\n      <GenericMenuSeparator />\n      <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('participantView.actionsMenu.allowAudio.label', 'Allow audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('participantView.actionsMenu.allowVideo.label', 'Allow video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={grantPermission(OwnCapability.SCREENSHARE)}\n        >\n          {t(\n            'participantView.actionsMenu.allowScreenSharing.label',\n            'Allow screen sharing',\n          )}\n        </GenericMenuButtonItem>\n\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_AUDIO)}\n        >\n          {t('participantView.actionsMenu.disableAudio.label', 'Disable audio')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SEND_VIDEO)}\n        >\n          {t('participantView.actionsMenu.disableVideo.label', 'Disable video')}\n        </GenericMenuButtonItem>\n        <GenericMenuButtonItem\n          onClick={revokePermission(OwnCapability.SCREENSHARE)}\n        >\n          {t(\n            'participantView.actionsMenu.disableScreenSharing.label',\n            'Disable screen sharing',\n          )}\n        </GenericMenuButtonItem>\n      </Restricted>\n    </GenericMenu>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/src/core/components/StreamVideo/StreamVideo.js

@@ -1,9 +1,30 @@
 import { jsx } from 'react/jsx-runtime';
 import { StreamVideoProvider } from '@stream-io/video-react-bindings';
-import { translations } from '../../../translations/index.js';
+import '@stream-io/i18n';
+import { TranslationProvider } from '../../../i18n/TranslationContext.js';
+import { useStreami18n } from '../../../i18n/useStreami18n.js';
 
-const StreamVideo = (props) => {
-    return (jsx(StreamVideoProvider, { translationsOverrides: translations, ...props }));
+/**
+ * StreamVideo is the root provider of the SDK: it provides the client to the component tree and
+ * mounts the SDK's translation context.
+ *
+ * The i18n runtime lives here rather than in `@stream-io/video-react-bindings` because the key
+ * catalog is generated from *this* package's `t()` call sites.
+ *
+ * This also fixes a real bug in the previous implementation, which rendered
+ * `<StreamVideoProvider translationsOverrides={translations} {...props} />`. Because `{...props}`
+ * came last, an integrator passing `translationsOverrides` *replaced* the SDK's bundled strings
+ * instead of merging with them, leaving every untranslated key rendering as a raw dotted path.
+ * `useStreami18n` layers integrator dictionaries over the SDK's own defaults, so a partial
+ * dictionary is now safe.
+ */
+const StreamVideo = ({ children, client, i18nInstance, language, translations, }) => {
+    const translationContext = useStreami18n({
+        i18nInstance,
+        language,
+        translations,
+    });
+    return (jsx(StreamVideoProvider, { client: client, children: jsx(TranslationProvider, { value: translationContext, children: children }) }));
 };
 StreamVideo.displayName = 'StreamVideo';
 

package/dist/esm/src/core/components/StreamVideo/StreamVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"StreamVideo.js","sources":["../../../../../../../../src/core/components/StreamVideo/StreamVideo.tsx"],"sourcesContent":["import {\n  StreamVideoProps,\n  StreamVideoProvider,\n} from '@stream-io/video-react-bindings';\nimport { PropsWithChildren } from 'react';\nimport { translations } from '../../../translations';\n\nexport const StreamVideo = (props: PropsWithChildren<StreamVideoProps>) => {\n  return (\n    <StreamVideoProvider translationsOverrides={translations} {...props} />\n  );\n};\n\nStreamVideo.displayName = 'StreamVideo';\n"],"names":["_jsx"],"mappings":";;;;AAOO,MAAM,WAAW,GAAG,CAAC,KAA0C,KAAI;IACxE,QACEA,GAAA,CAAC,mBAAmB,EAAA,EAAC,qBAAqB,EAAE,YAAY,EAAA,GAAM,KAAK,EAAA,CAAI;AAE3E;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"StreamVideo.js","sources":["../../../../../../../../src/core/components/StreamVideo/StreamVideo.tsx"],"sourcesContent":["import {\n  type StreamVideoProviderProps,\n  StreamVideoProvider,\n} from '@stream-io/video-react-bindings';\nimport { PropsWithChildren } from 'react';\nimport {\n  TranslationProvider,\n  useStreami18n,\n  type UseStreami18nParams,\n} from '../../../i18n';\n\nexport type StreamVideoProps = StreamVideoProviderProps & UseStreami18nParams;\n\n/**\n * StreamVideo is the root provider of the SDK: it provides the client to the component tree and\n * mounts the SDK's translation context.\n *\n * The i18n runtime lives here rather than in `@stream-io/video-react-bindings` because the key\n * catalog is generated from *this* package's `t()` call sites.\n *\n * This also fixes a real bug in the previous implementation, which rendered\n * `<StreamVideoProvider translationsOverrides={translations} {...props} />`. Because `{...props}`\n * came last, an integrator passing `translationsOverrides` *replaced* the SDK's bundled strings\n * instead of merging with them, leaving every untranslated key rendering as a raw dotted path.\n * `useStreami18n` layers integrator dictionaries over the SDK's own defaults, so a partial\n * dictionary is now safe.\n */\nexport const StreamVideo = ({\n  children,\n  client,\n  i18nInstance,\n  language,\n  translations,\n}: PropsWithChildren<StreamVideoProps>) => {\n  const translationContext = useStreami18n({\n    i18nInstance,\n    language,\n    translations,\n  });\n  return (\n    <StreamVideoProvider client={client}>\n      <TranslationProvider value={translationContext}>\n        {children}\n      </TranslationProvider>\n    </StreamVideoProvider>\n  );\n};\n\nStreamVideo.displayName = 'StreamVideo';\n"],"names":["_jsx"],"mappings":";;;;;;AAaA;;;;;;;;;;;;;AAaG;AACI,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,YAAY,GACwB,KAAI;IACxC,MAAM,kBAAkB,GAAG,aAAa,CAAC;QACvC,YAAY;QACZ,QAAQ;QACR,YAAY;AACb,KAAA,CAAC;AACF,IAAA,QACEA,GAAA,CAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,EAAA,QAAA,EACjCA,GAAA,CAAC,mBAAmB,EAAA,EAAC,KAAK,EAAE,kBAAkB,EAAA,QAAA,EAC3C,QAAQ,EAAA,CACW,EAAA,CACF;AAE1B;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/src/core/components/Video/BaseVideoPlaceholder.js

@@ -1,21 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef } from 'react';
+import { Avatar } from '../../../components/Avatar/Avatar.js';
 
 const BaseVideoPlaceholder = forwardRef(function DefaultVideoPlaceholder({ participant, style, children }, ref) {
-    const [error, setError] = useState(false);
     const name = participant.name || participant.userId;
-    return (jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(!participant.image || error) &&
-                (name ? (jsx(InitialsFallback, { name: name })) : (jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))), participant.image && !error && (jsx("img", { onError: () => setError(true), alt: name, className: "str-video__video-placeholder__avatar", src: participant.image }))] }));
+    return (jsxs("div", { className: "str-video__video-placeholder", style: style, ref: ref, children: [(participant.image || name) && (jsx(Avatar, { size: "2xl", showOutline: true, imageSrc: participant.image, name: name })), !participant.image && !name && (jsx("div", { className: "str-video__video-placeholder__no-video-label", children: children }))] }));
 });
-const InitialsFallback = (props) => {
-    const { name } = props;
-    const initials = name
-        .split(' ')
-        .slice(0, 2)
-        .map((n) => n[0])
-        .join('');
-    return (jsx("div", { className: "str-video__video-placeholder__initials-fallback", children: initials }));
-};
 
 export { BaseVideoPlaceholder };
 //# sourceMappingURL=BaseVideoPlaceholder.js.map

package/dist/esm/src/core/components/Video/BaseVideoPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/BaseVideoPlaceholder.tsx"],"sourcesContent":["import { ComponentProps, RefAttributes, forwardRef, useState } from 'react';\nimport type { StreamVideoParticipant } from '@stream-io/video-client';\n\nexport type BaseVideoPlaceholderProps = {\n  participant: StreamVideoParticipant;\n} & RefAttributes<HTMLDivElement> &\n  ComponentProps<'div'>;\n\nexport const BaseVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  BaseVideoPlaceholderProps\n>(function DefaultVideoPlaceholder({ participant, style, children }, ref) {\n  const [error, setError] = useState(false);\n  const name = participant.name || participant.userId;\n  return (\n    <div className=\"str-video__video-placeholder\" style={style} ref={ref}>\n      {(!participant.image || error) &&\n        (name ? (\n          <InitialsFallback name={name} />\n        ) : (\n          <div className=\"str-video__video-placeholder__no-video-label\">\n            {children}\n          </div>\n        ))}\n      {participant.image && !error && (\n        <img\n          onError={() => setError(true)}\n          alt={name}\n          className=\"str-video__video-placeholder__avatar\"\n          src={participant.image}\n        />\n      )}\n    </div>\n  );\n});\n\nconst InitialsFallback = (props: { name: string }) => {\n  const { name } = props;\n  const initials = name\n    .split(' ')\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join('');\n  return (\n    <div className=\"str-video__video-placeholder__initials-fallback\">\n      {initials}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAQO,MAAM,oBAAoB,GAAG,UAAU,CAG5C,SAAS,uBAAuB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAA;IACtE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzC,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM;IACnD,QACEA,cAAK,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,aACjE,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,KAAK;AAC3B,iBAAC,IAAI,IACHC,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,CAAI,KAEhCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC1D,QAAQ,EAAA,CACL,CACP,CAAC,EACH,WAAW,CAAC,KAAK,IAAI,CAAC,KAAK,KAC1BA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,GAAG,EAAE,IAAI,EACT,SAAS,EAAC,sCAAsC,EAChD,GAAG,EAAE,WAAW,CAAC,KAAK,EAAA,CACtB,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAED,MAAM,gBAAgB,GAAG,CAAC,KAAuB,KAAI;AACnD,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK;IACtB,MAAM,QAAQ,GAAG;SACd,KAAK,CAAC,GAAG;AACT,SAAA,KAAK,CAAC,CAAC,EAAE,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SACf,IAAI,CAAC,EAAE,CAAC;IACX,QACEA,aAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC7D,QAAQ,EAAA,CACL;AAEV,CAAC;;;;"}
+{"version":3,"file":"BaseVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/BaseVideoPlaceholder.tsx"],"sourcesContent":["import { ComponentProps, RefAttributes, forwardRef } from 'react';\nimport type { StreamVideoParticipant } from '@stream-io/video-client';\nimport { Avatar } from '../../../components/Avatar';\n\nexport type BaseVideoPlaceholderProps = {\n  participant: StreamVideoParticipant;\n} & RefAttributes<HTMLDivElement> &\n  ComponentProps<'div'>;\n\nexport const BaseVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  BaseVideoPlaceholderProps\n>(function DefaultVideoPlaceholder({ participant, style, children }, ref) {\n  const name = participant.name || participant.userId;\n  return (\n    <div className=\"str-video__video-placeholder\" style={style} ref={ref}>\n      {(participant.image || name) && (\n        <Avatar\n          size=\"2xl\"\n          showOutline\n          imageSrc={participant.image}\n          name={name}\n        />\n      )}\n      {!participant.image && !name && (\n        <div className=\"str-video__video-placeholder__no-video-label\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AASO,MAAM,oBAAoB,GAAG,UAAU,CAG5C,SAAS,uBAAuB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAA;IACtE,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,MAAM;AACnD,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CACjE,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,MACzBC,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,KAAK,EACV,WAAW,EAAA,IAAA,EACX,QAAQ,EAAE,WAAW,CAAC,KAAK,EAC3B,IAAI,EAAE,IAAI,EAAA,CACV,CACH,EACA,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,IAAI,KAC1BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC1D,QAAQ,EAAA,CACL,CACP,CAAA,EAAA,CACG;AAEV,CAAC;;;;"}

package/dist/esm/src/core/components/Video/DefaultPictureInPicturePlaceholder.js

@@ -1,11 +1,13 @@
 import { jsx } 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 { BaseVideoPlaceholder } from './BaseVideoPlaceholder.js';
 
 const DefaultPictureInPicturePlaceholder = forwardRef(function DefaultPictureInPicturePlaceholderRender(props, ref) {
     const { t } = useI18n();
-    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
+    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('videoPlaceholder.videoPlayingInPopup.text', 'Video is playing in a popup') }));
 });
 
 export { DefaultPictureInPicturePlaceholder };

package/dist/esm/src/core/components/Video/DefaultPictureInPicturePlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultPictureInPicturePlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type PictureInPicturePlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultPictureInPicturePlaceholder = forwardRef<\n  HTMLDivElement,\n  PictureInPicturePlaceholderProps\n>(function DefaultPictureInPicturePlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t('Video is playing in a popup')}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AASO,MAAM,kCAAkC,GAAG,UAAU,CAG1D,SAAS,wCAAwC,CAAC,KAAK,EAAE,GAAG,EAAA;AAC5D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CAAC,6BAA6B,CAAC,EAAA,CACZ;AAE3B,CAAC;;;;"}
+{"version":3,"file":"DefaultPictureInPicturePlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultPictureInPicturePlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '../../../i18n';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type PictureInPicturePlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultPictureInPicturePlaceholder = forwardRef<\n  HTMLDivElement,\n  PictureInPicturePlaceholderProps\n>(function DefaultPictureInPicturePlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t(\n        'videoPlaceholder.videoPlayingInPopup.text',\n        'Video is playing in a popup',\n      )}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;;;AASO,MAAM,kCAAkC,GAAG,UAAU,CAG1D,SAAS,wCAAwC,CAAC,KAAK,EAAE,GAAG,EAAA;AAC5D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CACA,2CAA2C,EAC3C,6BAA6B,CAC9B,EAAA,CACoB;AAE3B,CAAC;;;;"}

package/dist/esm/src/core/components/Video/DefaultVideoPlaceholder.js

@@ -1,11 +1,13 @@
 import { jsx } 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 { BaseVideoPlaceholder } from './BaseVideoPlaceholder.js';
 
 const DefaultVideoPlaceholder = forwardRef(function DefaultVideoPlaceholderRender(props, ref) {
     const { t } = useI18n();
-    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is disabled') }));
+    return (jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('common.videoDisabled.text', 'Video is disabled') }));
 });
 
 export { DefaultVideoPlaceholder };

package/dist/esm/src/core/components/Video/DefaultVideoPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultVideoPlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type VideoPlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  VideoPlaceholderProps\n>(function DefaultVideoPlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t('Video is disabled')}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;AASO,MAAM,uBAAuB,GAAG,UAAU,CAG/C,SAAS,6BAA6B,CAAC,KAAK,EAAE,GAAG,EAAA;AACjD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CAAC,mBAAmB,CAAC,EAAA,CACF;AAE3B,CAAC;;;;"}
+{"version":3,"file":"DefaultVideoPlaceholder.js","sources":["../../../../../../../../src/core/components/Video/DefaultVideoPlaceholder.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useI18n } from '../../../i18n';\nimport {\n  BaseVideoPlaceholder,\n  type BaseVideoPlaceholderProps,\n} from './BaseVideoPlaceholder';\n\nexport type VideoPlaceholderProps = BaseVideoPlaceholderProps;\n\nexport const DefaultVideoPlaceholder = forwardRef<\n  HTMLDivElement,\n  VideoPlaceholderProps\n>(function DefaultVideoPlaceholderRender(props, ref) {\n  const { t } = useI18n();\n  return (\n    <BaseVideoPlaceholder ref={ref} {...props}>\n      {t('common.videoDisabled.text', 'Video is disabled')}\n    </BaseVideoPlaceholder>\n  );\n});\n"],"names":["_jsx"],"mappings":";;;;;;;AASO,MAAM,uBAAuB,GAAG,UAAU,CAG/C,SAAS,6BAA6B,CAAC,KAAK,EAAE,GAAG,EAAA;AACjD,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAC,oBAAoB,IAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,QAAA,EACtC,CAAC,CAAC,2BAA2B,EAAE,mBAAmB,CAAC,EAAA,CAC/B;AAE3B,CAAC;;;;"}

package/dist/esm/src/embedded/EmbeddedClientProvider.js

@@ -3,12 +3,16 @@ import { useState, useCallback } from 'react';
 import { useEffectEvent } from '@stream-io/video-react-bindings';
 import '../core/components/Audio/Audio.js';
 import '../core/components/Audio/ParticipantsAudio.js';
+import '@stream-io/i18n';
+import '../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '@stream-io/video-client';
 import '../core/components/ParticipantView/ParticipantViewContext.js';
 import '../components/Menu/MenuToggle.js';
 import 'clsx';
 import '../core/components/ParticipantView/ParticipantView.js';
 import '../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../core/components/ParticipantView/ConnectionQualityIndicator.js';
 import { StreamCall } from '../core/components/StreamCall/StreamCall.js';
 import { StreamVideo } from '../core/components/StreamVideo/StreamVideo.js';
 import '../core/components/Video/BaseVideo.js';
@@ -20,21 +24,20 @@ import '../core/components/CallLayout/PipLayout/Pip.js';
 import '../core/components/CallLayout/PipLayout/Host.js';
 import '../core/components/CallLayout/PipLayout/Grid.js';
 import { BackgroundFiltersProvider } from '../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../components/Button/CompositeButton.js';
+import '../components/Badge/Badge.js';
+import '../components/Button/Button.js';
 import '../components/Button/IconButton.js';
+import '../components/Button/CompositeButton.js';
 import '@floating-ui/react';
 import '../components/CallControls/RecordCallButton.js';
 import '../components/CallControls/ReactionsButton.js';
 import '../components/DeviceSettings/DeviceSettings.js';
 import '../components/DropdownSelect/DropdownSelect.js';
 import '../components/CallControls/CancelCallButton.js';
-import '../components/CallControls/CallStatsButton.js';
 import '../components/CallParticipantsList/CallParticipantsList.js';
 import '../components/CallParticipantsList/CallParticipantListingItem.js';
 import { LoadingIndicator } from '../components/LoadingIndicator/LoadingIndicator.js';
-import '../components/CallStats/CallStats.js';
 import { NoiseCancellationProvider } from '../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../components/RingingCall/RingingCall.js';
 import '../components/Permissions/PermissionRequests.js';
 import { StreamTheme } from '../components/StreamTheme/StreamTheme.js';
 import '../core/components/Video/DefaultVideoPlaceholder.js';

package/dist/esm/src/embedded/EmbeddedClientProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbeddedClientProvider.js","sources":["../../../../../../src/embedded/EmbeddedClientProvider.tsx"],"sourcesContent":["import { useCallback, useState, type ReactNode } from 'react';\nimport type { INoiseCancellation } from '@stream-io/audio-filters-web';\nimport { useEffectEvent as useEffectEventShim } from '@stream-io/video-react-bindings';\n\nimport { StreamCall, StreamVideo } from '../core';\nimport {\n  StreamTheme,\n  BackgroundFiltersProvider,\n  NoiseCancellationProvider,\n} from '../components';\nimport { ConfigurationProvider } from './context';\nimport { useEmbeddedClient } from './hooks';\nimport type { LogLevel, TokenProvider } from '@stream-io/video-client';\nimport type { EmbeddedUser, LayoutOption } from './types';\nimport { LoadingIndicator } from '../components';\n\nexport interface EmbeddedClientProviderProps {\n  apiKey: string;\n  user: EmbeddedUser;\n  callId: string;\n  callType: string;\n  token?: string;\n  tokenProvider?: TokenProvider;\n  logLevel?: LogLevel;\n  onError?: (error: any) => void;\n  layout?: LayoutOption;\n  theme?: Record<string, string>;\n  children: ReactNode;\n}\n\nconst NoiseCancellationWrapper = ({\n  noiseCancellation,\n  children,\n}: {\n  noiseCancellation?: INoiseCancellation;\n  children: ReactNode;\n}) => {\n  if (!noiseCancellation) {\n    return <>{children}</>;\n  }\n\n  return (\n    <NoiseCancellationProvider noiseCancellation={noiseCancellation}>\n      {children}\n    </NoiseCancellationProvider>\n  );\n};\n\n/**\n * Shared provider wrapper for embedded components.\n * Handles client/call initialization and wraps children with all necessary providers.\n */\nexport const EmbeddedClientProvider = ({\n  apiKey,\n  user,\n  callId,\n  callType,\n  token,\n  tokenProvider,\n  logLevel,\n  onError,\n  layout,\n  theme,\n  children,\n}: EmbeddedClientProviderProps) => {\n  const [showError, setShowError] = useState<boolean>(false);\n\n  const onErrorStable = useEffectEventShim(onError ?? console.error);\n  const handleError = useCallback(\n    (error: any) => {\n      setShowError(true);\n      onErrorStable(error);\n    },\n    [onErrorStable],\n  );\n\n  const { client, call, noiseCancellation, noiseCancellationReady } =\n    useEmbeddedClient({\n      apiKey,\n      user,\n      callId,\n      callType,\n      token,\n      tokenProvider,\n      logLevel,\n      handleError,\n    });\n\n  if (showError) {\n    return (\n      <StreamTheme className=\"str-video__embedded\">\n        <div className=\"str-video__embedded-error\">\n          <p className=\"str-video__embedded-error__message\">\n            An error occurred while initializing the client. Please try again\n            later.\n          </p>\n        </div>\n      </StreamTheme>\n    );\n  }\n\n  if (!call || !client || !noiseCancellationReady) {\n    return (\n      <StreamTheme className=\"str-video__embedded\">\n        <LoadingIndicator className=\"str-video__embedded-loading\" />\n      </StreamTheme>\n    );\n  }\n\n  return (\n    <StreamVideo client={client}>\n      <StreamCall call={call}>\n        <ConfigurationProvider layout={layout} onError={onErrorStable}>\n          <BackgroundFiltersProvider>\n            <NoiseCancellationWrapper noiseCancellation={noiseCancellation}>\n              <StreamTheme className=\"str-video__embedded\" style={theme}>\n                {children}\n              </StreamTheme>\n            </NoiseCancellationWrapper>\n          </BackgroundFiltersProvider>\n        </ConfigurationProvider>\n      </StreamCall>\n    </StreamVideo>\n  );\n};\n"],"names":["_jsx","_Fragment","useEffectEventShim"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,wBAAwB,GAAG,CAAC,EAChC,iBAAiB,EACjB,QAAQ,GAIT,KAAI;IACH,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;IACxB;IAEA,QACED,GAAA,CAAC,yBAAyB,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EAC5D,QAAQ,EAAA,CACiB;AAEhC,CAAC;AAED;;;AAGG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,GACoB,KAAI;IAChC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAE1D,MAAM,aAAa,GAAGE,cAAkB,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC;AAClE,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAU,KAAI;QACb,YAAY,CAAC,IAAI,CAAC;QAClB,aAAa,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC,EACD,CAAC,aAAa,CAAC,CAChB;IAED,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAC/D,iBAAiB,CAAC;QAChB,MAAM;QACN,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,aAAa;QACb,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IAEJ,IAAI,SAAS,EAAE;QACb,QACEF,IAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,YAC1CA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACxCA,WAAG,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,0EAAA,EAAA,CAG7C,EAAA,CACA,EAAA,CACM;IAElB;IAEA,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,sBAAsB,EAAE;AAC/C,QAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAC1CA,GAAA,CAAC,gBAAgB,IAAC,SAAS,EAAC,6BAA6B,EAAA,CAAG,EAAA,CAChD;IAElB;IAEA,QACEA,GAAA,CAAC,WAAW,EAAA,EAAC,MAAM,EAAE,MAAM,EAAA,QAAA,EACzBA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,QAAA,EACpBA,GAAA,CAAC,qBAAqB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAA,QAAA,EAC3DA,GAAA,CAAC,yBAAyB,EAAA,EAAA,QAAA,EACxBA,GAAA,CAAC,wBAAwB,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EAC5DA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACtD,QAAQ,EAAA,CACG,EAAA,CACW,EAAA,CACD,EAAA,CACN,EAAA,CACb,EAAA,CACD;AAElB;;;;"}
+{"version":3,"file":"EmbeddedClientProvider.js","sources":["../../../../../../src/embedded/EmbeddedClientProvider.tsx"],"sourcesContent":["import { useCallback, useState, type ReactNode } from 'react';\nimport type { INoiseCancellation } from '@stream-io/audio-filters-web';\nimport { useEffectEvent as useEffectEventShim } from '@stream-io/video-react-bindings';\n\nimport { StreamCall, StreamVideo } from '../core';\nimport {\n  StreamTheme,\n  BackgroundFiltersProvider,\n  NoiseCancellationProvider,\n} from '../components';\nimport { ConfigurationProvider } from './context';\nimport { useEmbeddedClient } from './hooks';\nimport type { LogLevel, TokenProvider } from '@stream-io/video-client';\nimport type { EmbeddedUser, LayoutOption } from './types';\nimport { LoadingIndicator } from '../components';\n\nexport interface EmbeddedClientProviderProps {\n  apiKey: string;\n  user: EmbeddedUser;\n  callId: string;\n  callType: string;\n  token?: string;\n  tokenProvider?: TokenProvider;\n  logLevel?: LogLevel;\n  onError?: (error: any) => void;\n  layout?: LayoutOption;\n  theme?: Record<string, string>;\n  children: ReactNode;\n}\n\nconst NoiseCancellationWrapper = ({\n  noiseCancellation,\n  children,\n}: {\n  noiseCancellation?: INoiseCancellation;\n  children: ReactNode;\n}) => {\n  if (!noiseCancellation) {\n    return <>{children}</>;\n  }\n\n  return (\n    <NoiseCancellationProvider noiseCancellation={noiseCancellation}>\n      {children}\n    </NoiseCancellationProvider>\n  );\n};\n\n/**\n * Shared provider wrapper for embedded components.\n * Handles client/call initialization and wraps children with all necessary providers.\n */\nexport const EmbeddedClientProvider = ({\n  apiKey,\n  user,\n  callId,\n  callType,\n  token,\n  tokenProvider,\n  logLevel,\n  onError,\n  layout,\n  theme,\n  children,\n}: EmbeddedClientProviderProps) => {\n  const [showError, setShowError] = useState<boolean>(false);\n\n  const onErrorStable = useEffectEventShim(onError ?? console.error);\n  const handleError = useCallback(\n    (error: any) => {\n      setShowError(true);\n      onErrorStable(error);\n    },\n    [onErrorStable],\n  );\n\n  const { client, call, noiseCancellation, noiseCancellationReady } =\n    useEmbeddedClient({\n      apiKey,\n      user,\n      callId,\n      callType,\n      token,\n      tokenProvider,\n      logLevel,\n      handleError,\n    });\n\n  if (showError) {\n    return (\n      <StreamTheme className=\"str-video__embedded\">\n        <div className=\"str-video__embedded-error\">\n          <p className=\"str-video__embedded-error__message\">\n            An error occurred while initializing the client. Please try again\n            later.\n          </p>\n        </div>\n      </StreamTheme>\n    );\n  }\n\n  if (!call || !client || !noiseCancellationReady) {\n    return (\n      <StreamTheme className=\"str-video__embedded\">\n        <LoadingIndicator className=\"str-video__embedded-loading\" />\n      </StreamTheme>\n    );\n  }\n\n  return (\n    <StreamVideo client={client}>\n      <StreamCall call={call}>\n        <ConfigurationProvider layout={layout} onError={onErrorStable}>\n          <BackgroundFiltersProvider>\n            <NoiseCancellationWrapper noiseCancellation={noiseCancellation}>\n              <StreamTheme className=\"str-video__embedded\" style={theme}>\n                {children}\n              </StreamTheme>\n            </NoiseCancellationWrapper>\n          </BackgroundFiltersProvider>\n        </ConfigurationProvider>\n      </StreamCall>\n    </StreamVideo>\n  );\n};\n"],"names":["_jsx","_Fragment","useEffectEventShim"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,wBAAwB,GAAG,CAAC,EAChC,iBAAiB,EACjB,QAAQ,GAIT,KAAI;IACH,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAOA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI;IACxB;IAEA,QACED,GAAA,CAAC,yBAAyB,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EAC5D,QAAQ,EAAA,CACiB;AAEhC,CAAC;AAED;;;AAGG;AACI,MAAM,sBAAsB,GAAG,CAAC,EACrC,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,GACoB,KAAI;IAChC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAE1D,MAAM,aAAa,GAAGE,cAAkB,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC;AAClE,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAU,KAAI;QACb,YAAY,CAAC,IAAI,CAAC;QAClB,aAAa,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC,EACD,CAAC,aAAa,CAAC,CAChB;IAED,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAC/D,iBAAiB,CAAC;QAChB,MAAM;QACN,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,KAAK;QACL,aAAa;QACb,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IAEJ,IAAI,SAAS,EAAE;QACb,QACEF,IAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,YAC1CA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACxCA,WAAG,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,0EAAA,EAAA,CAG7C,EAAA,CACA,EAAA,CACM;IAElB;IAEA,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,sBAAsB,EAAE;AAC/C,QAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAC1CA,GAAA,CAAC,gBAAgB,IAAC,SAAS,EAAC,6BAA6B,EAAA,CAAG,EAAA,CAChD;IAElB;IAEA,QACEA,GAAA,CAAC,WAAW,EAAA,EAAC,MAAM,EAAE,MAAM,EAAA,QAAA,EACzBA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA,QAAA,EACpBA,GAAA,CAAC,qBAAqB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAA,QAAA,EAC3DA,GAAA,CAAC,yBAAyB,EAAA,EAAA,QAAA,EACxBA,GAAA,CAAC,wBAAwB,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EAC5DA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACtD,QAAQ,EAAA,CACG,EAAA,CACW,EAAA,CACD,EAAA,CACN,EAAA,CACb,EAAA,CACD;AAElB;;;;"}

package/dist/esm/src/embedded/call/CallControls.js

@@ -1,11 +1,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { OwnCapability } from '@stream-io/video-client';
-import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
 import 'react';
+import '@stream-io/i18n/react';
 import 'clsx';
 import '../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import { CompositeButton } from '../../components/Button/CompositeButton.js';
+import '../../components/Badge/Badge.js';
+import '../../components/Button/Button.js';
 import '../../components/Button/IconButton.js';
+import { CompositeButton } from '../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
 import { MicCaptureErrorNotification } from '../../components/Notification/MicCaptureErrorNotification.js';
 import { RecordCallConfirmationButton } from '../../components/CallControls/RecordCallButton.js';
@@ -14,7 +19,6 @@ import { ScreenShareButton } from '../../components/CallControls/ScreenShareButt
 import { ToggleAudioPublishingButton } from '../../components/CallControls/ToggleAudioButton.js';
 import { ToggleVideoPublishingButton } from '../../components/CallControls/ToggleVideoButton.js';
 import { CancelCallConfirmButton } from '../../components/CallControls/CancelCallButton.js';
-import '../../components/CallControls/CallStatsButton.js';
 import { Icon } from '../../components/Icon/Icon.js';
 import '../../components/DeviceSettings/DeviceSettings.js';
 import '../../components/DropdownSelect/DropdownSelect.js';
@@ -23,9 +27,7 @@ import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from '../../compo
 import { WithTooltip } from '../../components/Tooltip/WithTooltip.js';
 import '../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../components/CallStats/CallStats.js';
 import '../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../components/RingingCall/RingingCall.js';
 import '../../components/Permissions/PermissionRequests.js';
 import '../../core/components/Video/Video.js';
 import '../../core/components/Video/BaseVideo.js';
@@ -35,6 +37,7 @@ import '../../core/components/Audio/ParticipantsAudio.js';
 import '../../core/components/ParticipantView/ParticipantViewContext.js';
 import '../../core/components/ParticipantView/ParticipantView.js';
 import '../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../core/components/ParticipantView/ConnectionQualityIndicator.js';
 import '../../core/components/StreamCall/StreamCall.js';
 import '../../core/components/StreamVideo/StreamVideo.js';
 import '../../core/components/CallLayout/LivestreamLayout.js';
@@ -45,6 +48,7 @@ import '../../core/components/CallLayout/PipLayout/Host.js';
 import '../../core/components/CallLayout/PipLayout/Grid.js';
 import '../context/ConfigurationContext.js';
 import { CameraMenuWithBlur } from '../shared/BlurToggleButton/BlurToggleButton.js';
+import { CallDuration } from '../shared/CallDuration/CallDuration.js';
 import '../shared/Lobby/ToggleMicButton.js';
 import '../shared/Lobby/ToggleCameraButton.js';
 import { useCallDuration } from '../hooks/useCallDuration.js';
@@ -58,7 +62,7 @@ const CallControls = ({ showParticipants, onToggleParticipants, }) => {
     const session = useCallSession();
     const startedAt = session?.started_at;
     const { elapsed } = useCallDuration(startedAt);
-    return (jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), startedAt && (jsxs("div", { className: "str-video__embedded-call-duration str-video__embedded-desktop", children: [jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] }))] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ScreenShareButton, {}) }) }), jsx(RecordCallConfirmationButton, {}), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: onToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] }));
+    return (jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), startedAt && (jsx("div", { className: "str-video__embedded-desktop", children: jsx(CallDuration, { elapsed: elapsed }) }))] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ScreenShareButton, {}) }) }), jsx(RecordCallConfirmationButton, {}), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('common.participants.label', 'Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('common.participants.label', 'Participants'), "aria-pressed": showParticipants, onClick: onToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] }));
 };
 
 export { CallControls };

package/dist/esm/src/embedded/call/CallControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallControls.js","sources":["../../../../../../../src/embedded/call/CallControls.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport {\n  CancelCallConfirmButton,\n  CompositeButton,\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MicCaptureErrorNotification,\n  ReactionsButton,\n  RecordCallConfirmationButton,\n  ScreenShareButton,\n  ToggleAudioPublishingButton,\n  ToggleVideoPublishingButton,\n  WithTooltip,\n} from '../../components';\n\nimport { useCallDuration } from '../hooks';\nimport { CameraMenuWithBlur } from '../shared';\n\ninterface CallControlsProps {\n  showParticipants: boolean;\n  onToggleParticipants: () => void;\n}\n\n/**\n * Renders the active call control bar\n */\nexport const CallControls = ({\n  showParticipants,\n  onToggleParticipants,\n}: CallControlsProps) => {\n  const { t } = useI18n();\n  const { useCallSession } = useCallStateHooks();\n  const session = useCallSession();\n  const startedAt = session?.started_at;\n  const { elapsed } = useCallDuration(startedAt);\n\n  return (\n    <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n      <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-mobile\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        {startedAt && (\n          <div className=\"str-video__embedded-call-duration str-video__embedded-desktop\">\n            <Icon\n              icon=\"verified\"\n              className=\"str-video__embedded-call-duration__icon\"\n            />\n            <span className=\"str-video__embedded-call-duration__time\">\n              {elapsed}\n            </span>\n          </div>\n        )}\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_AUDIO]}\n          hasPermissionsOnly\n        >\n          <MicCaptureErrorNotification>\n            <ToggleAudioPublishingButton\n              Menu={\n                <>\n                  <DeviceSelectorAudioInput\n                    visualType=\"list\"\n                    title={t('Microphone')}\n                  />\n                  <DeviceSelectorAudioOutput\n                    visualType=\"list\"\n                    title={t('Speaker')}\n                  />\n                </>\n              }\n              menuPlacement=\"top\"\n            />\n          </MicCaptureErrorNotification>\n        </Restricted>\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_VIDEO]}\n          hasPermissionsOnly\n        >\n          <ToggleVideoPublishingButton\n            Menu={<CameraMenuWithBlur />}\n            menuPlacement=\"top\"\n          />\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ScreenShareButton />\n          </div>\n        </Restricted>\n        <RecordCallConfirmationButton />\n        <div className=\"str-video__embedded-desktop\">\n          <CancelCallConfirmButton />\n        </div>\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n        <WithTooltip title={t('Participants')}>\n          <CompositeButton\n            active={showParticipants}\n            aria-label={t('Participants')}\n            aria-pressed={showParticipants}\n            onClick={onToggleParticipants}\n          >\n            <Icon icon=\"participants\" />\n          </CompositeButton>\n        </WithTooltip>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"CallControls.js","sources":["../../../../../../../src/embedded/call/CallControls.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport {\n  CancelCallConfirmButton,\n  CompositeButton,\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MicCaptureErrorNotification,\n  ReactionsButton,\n  RecordCallConfirmationButton,\n  ScreenShareButton,\n  ToggleAudioPublishingButton,\n  ToggleVideoPublishingButton,\n  WithTooltip,\n} from '../../components';\n\nimport { useCallDuration } from '../hooks';\nimport { CallDuration, CameraMenuWithBlur } from '../shared';\n\ninterface CallControlsProps {\n  showParticipants: boolean;\n  onToggleParticipants: () => void;\n}\n\n/**\n * Renders the active call control bar\n */\nexport const CallControls = ({\n  showParticipants,\n  onToggleParticipants,\n}: CallControlsProps) => {\n  const { t } = useI18n();\n  const { useCallSession } = useCallStateHooks();\n  const session = useCallSession();\n  const startedAt = session?.started_at;\n  const { elapsed } = useCallDuration(startedAt);\n\n  return (\n    <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n      <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-mobile\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        {startedAt && (\n          <div className=\"str-video__embedded-desktop\">\n            <CallDuration elapsed={elapsed} />\n          </div>\n        )}\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_AUDIO]}\n          hasPermissionsOnly\n        >\n          <MicCaptureErrorNotification>\n            <ToggleAudioPublishingButton\n              Menu={\n                <>\n                  <DeviceSelectorAudioInput\n                    visualType=\"list\"\n                    title={t('common.microphone.label', 'Microphone')}\n                  />\n                  <DeviceSelectorAudioOutput\n                    visualType=\"list\"\n                    title={t('common.speaker.label', 'Speaker')}\n                  />\n                </>\n              }\n              menuPlacement=\"top\"\n            />\n          </MicCaptureErrorNotification>\n        </Restricted>\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_VIDEO]}\n          hasPermissionsOnly\n        >\n          <ToggleVideoPublishingButton\n            Menu={<CameraMenuWithBlur />}\n            menuPlacement=\"top\"\n          />\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ScreenShareButton />\n          </div>\n        </Restricted>\n        <RecordCallConfirmationButton />\n        <div className=\"str-video__embedded-desktop\">\n          <CancelCallConfirmButton />\n        </div>\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n        <WithTooltip title={t('common.participants.label', 'Participants')}>\n          <CompositeButton\n            active={showParticipants}\n            aria-label={t('common.participants.label', 'Participants')}\n            aria-pressed={showParticipants}\n            onClick={onToggleParticipants}\n          >\n            <Icon icon=\"participants\" />\n          </CompositeButton>\n        </WithTooltip>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;AAEG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,gBAAgB,EAChB,oBAAoB,GACF,KAAI;AACtB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,IAAA,MAAM,SAAS,GAAG,OAAO,EAAE,UAAU;IACrC,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC;AAE9C,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CACzEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAAA,CAChFC,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EACzCA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EAAA,CACf,EAAA,CACK,EACZ,SAAS,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC1CA,GAAA,CAAC,YAAY,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,CAAI,EAAA,CAC9B,CACP,CAAA,EAAA,CACG,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAC9EC,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,EAAA,IAAA,EAAA,QAAA,EAElBA,GAAA,CAAC,2BAA2B,EAAA,EAAA,QAAA,EAC1BA,GAAA,CAAC,2BAA2B,EAAA,EAC1B,IAAI,EACFD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAC,wBAAwB,EAAA,EACvB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,yBAAyB,EAAE,YAAY,CAAC,EAAA,CACjD,EACFA,GAAA,CAAC,yBAAyB,EAAA,EACxB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAA,CAC3C,CAAA,EAAA,CACD,EAEL,aAAa,EAAC,KAAK,EAAA,CACnB,EAAA,CAC0B,EAAA,CACnB,EACbA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,EAAA,IAAA,EAAA,QAAA,EAElBA,GAAA,CAAC,2BAA2B,EAAA,EAC1B,IAAI,EAAEA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,EAC5B,aAAa,EAAC,KAAK,EAAA,CACnB,EAAA,CACS,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC1CA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EAAA,CACf,EAAA,CACK,EACbA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAAA,QAAA,EACrDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC1CA,GAAA,CAAC,iBAAiB,EAAA,EAAA,CAAG,GACjB,EAAA,CACK,EACbA,GAAA,CAAC,4BAA4B,EAAA,EAAA,CAAG,EAChCA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC1CA,GAAA,CAAC,uBAAuB,EAAA,EAAA,CAAG,EAAA,CACvB,CAAA,EAAA,CACF,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAChFA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,CAAC,CAAC,2BAA2B,EAAE,cAAc,CAAC,EAAA,QAAA,EAChEA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,gBAAgB,EAAA,YAAA,EACZ,CAAC,CAAC,2BAA2B,EAAE,cAAc,CAAC,EAAA,cAAA,EAC5C,gBAAgB,EAC9B,OAAO,EAAE,oBAAoB,EAAA,QAAA,EAE7BA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,CAAG,EAAA,CACZ,EAAA,CACN,EAAA,CACV,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/call/CallHeader.js

@@ -4,11 +4,15 @@ import 'react';
 import '@stream-io/video-client';
 import '../../core/components/Audio/Audio.js';
 import '../../core/components/Audio/ParticipantsAudio.js';
+import '@stream-io/i18n';
+import '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '../../core/components/ParticipantView/ParticipantViewContext.js';
 import '../../components/Menu/MenuToggle.js';
-import { Icon } from '../../components/Icon/Icon.js';
+import 'clsx';
 import '../../core/components/ParticipantView/ParticipantView.js';
 import '../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../core/components/ParticipantView/ConnectionQualityIndicator.js';
 import '../../core/components/StreamCall/StreamCall.js';
 import '../../core/components/StreamVideo/StreamVideo.js';
 import '../../core/components/Video/BaseVideo.js';
@@ -20,24 +24,23 @@ import '../../core/components/CallLayout/PipLayout/Pip.js';
 import '../../core/components/CallLayout/PipLayout/Host.js';
 import '../../core/components/CallLayout/PipLayout/Grid.js';
 import '../context/ConfigurationContext.js';
-import 'clsx';
 import '../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../components/Button/CompositeButton.js';
+import '../../components/Badge/Badge.js';
+import '../../components/Button/Button.js';
 import '../../components/Button/IconButton.js';
+import '../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
 import '../../components/CallControls/RecordCallButton.js';
 import '../../components/CallControls/ReactionsButton.js';
 import '../../components/DeviceSettings/DeviceSettings.js';
 import '../../components/DropdownSelect/DropdownSelect.js';
 import { CancelCallConfirmButton } from '../../components/CallControls/CancelCallButton.js';
-import '../../components/CallControls/CallStatsButton.js';
 import '../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../components/CallStats/CallStats.js';
 import '../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../components/RingingCall/RingingCall.js';
 import '../../components/Permissions/PermissionRequests.js';
 import '../../core/components/Video/DefaultVideoPlaceholder.js';
+import { CallDuration } from '../shared/CallDuration/CallDuration.js';
 import '../shared/Lobby/ToggleMicButton.js';
 import '../shared/Lobby/ToggleCameraButton.js';
 import { useCallDuration } from '../hooks/useCallDuration.js';
@@ -50,7 +53,7 @@ const CallHeader = () => {
     const session = useCallSession();
     const startedAt = session?.started_at;
     const { elapsed } = useCallDuration(startedAt);
-    return (jsxs("div", { className: "str-video__embedded-call-header", children: [startedAt && (jsxs("div", { className: "str-video__embedded-call-duration", children: [jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] })), jsx(CancelCallConfirmButton, {})] }));
+    return (jsxs("div", { className: "str-video__embedded-call-header", children: [startedAt && jsx(CallDuration, { elapsed: elapsed }), jsx(CancelCallConfirmButton, {})] }));
 };
 
 export { CallHeader };

package/dist/esm/src/embedded/call/CallHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallHeader.js","sources":["../../../../../../../src/embedded/call/CallHeader.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useCallDuration } from '../hooks';\nimport { CancelCallConfirmButton, Icon } from '../../components';\n\n/**\n * Renders the call header bar with elapsed time and leave/end call button.\n */\nexport const CallHeader = () => {\n  const { useCallSession } = useCallStateHooks();\n  const session = useCallSession();\n  const startedAt = session?.started_at;\n  const { elapsed } = useCallDuration(startedAt);\n\n  return (\n    <div className=\"str-video__embedded-call-header\">\n      {startedAt && (\n        <div className=\"str-video__embedded-call-duration\">\n          <Icon\n            icon=\"verified\"\n            className=\"str-video__embedded-call-duration__icon\"\n          />\n          <span className=\"str-video__embedded-call-duration__time\">\n            {elapsed}\n          </span>\n        </div>\n      )}\n      <CancelCallConfirmButton />\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;AAEG;AACI,MAAM,UAAU,GAAG,MAAK;AAC7B,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,IAAA,MAAM,SAAS,GAAG,OAAO,EAAE,UAAU;IACrC,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC;AAE9C,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7C,SAAS,KACRA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,IAAC,IAAI,EAAA,EACH,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,yCAAyC,EAAA,CACnD,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,yCAAyC,EAAA,QAAA,EACtD,OAAO,EAAA,CACH,CAAA,EAAA,CACH,CACP,EACDA,GAAA,CAAC,uBAAuB,EAAA,EAAA,CAAG,CAAA,EAAA,CACvB;AAEV;;;;"}
+{"version":3,"file":"CallHeader.js","sources":["../../../../../../../src/embedded/call/CallHeader.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useCallDuration } from '../hooks';\nimport { CancelCallConfirmButton } from '../../components';\nimport { CallDuration } from '../shared';\n\n/**\n * Renders the call header bar with elapsed time and leave/end call button.\n */\nexport const CallHeader = () => {\n  const { useCallSession } = useCallStateHooks();\n  const session = useCallSession();\n  const startedAt = session?.started_at;\n  const { elapsed } = useCallDuration(startedAt);\n\n  return (\n    <div className=\"str-video__embedded-call-header\">\n      {startedAt && <CallDuration elapsed={elapsed} />}\n      <CancelCallConfirmButton />\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;AAEG;AACI,MAAM,UAAU,GAAG,MAAK;AAC7B,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,IAAA,MAAM,SAAS,GAAG,OAAO,EAAE,UAAU;IACrC,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC;IAE9C,QACEA,cAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC7C,SAAS,IAAIC,GAAA,CAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAA,CAAI,EAChDA,IAAC,uBAAuB,EAAA,EAAA,CAAG,CAAA,EAAA,CACvB;AAEV;;;;"}

package/dist/esm/src/embedded/call/CallLayout.js

@@ -4,9 +4,14 @@ import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
 import { Restricted } from '@stream-io/video-react-bindings';
 import '../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../components/Button/CompositeButton.js';
+import '../../components/Badge/Badge.js';
+import '../../components/Button/Button.js';
 import '../../components/Button/IconButton.js';
+import '../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { SpeakingWhileMutedNotification } from '../../components/Notification/SpeakingWhileMutedNotification.js';
 import '../../components/CallControls/RecordCallButton.js';
 import '../../components/CallControls/ReactionsButton.js';
@@ -14,12 +19,9 @@ import '../../components/DeviceSettings/DeviceSettings.js';
 import '../../components/DropdownSelect/DropdownSelect.js';
 import '../../components/Menu/MenuToggle.js';
 import '../../components/CallControls/CancelCallButton.js';
-import '../../components/CallControls/CallStatsButton.js';
 import { CallParticipantsList } from '../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../components/CallStats/CallStats.js';
 import '../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../components/RingingCall/RingingCall.js';
 import { PermissionRequests } from '../../components/Permissions/PermissionRequests.js';
 import '../../core/components/Video/Video.js';
 import '../../core/components/Video/BaseVideo.js';
@@ -33,6 +35,7 @@ import '../../core/components/Audio/ParticipantsAudio.js';
 import '../../core/components/ParticipantView/ParticipantViewContext.js';
 import '../../core/components/ParticipantView/ParticipantView.js';
 import '../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../core/components/ParticipantView/ConnectionQualityIndicator.js';
 import '../../core/components/StreamCall/StreamCall.js';
 import '../../core/components/StreamVideo/StreamVideo.js';
 import '../../core/components/CallLayout/LivestreamLayout.js';
@@ -56,7 +59,7 @@ const CallLayout = () => {
     const handleToggleParticipants = useCallback(() => {
         setShowParticipants((prev) => !prev);
     }, []);
-    return (jsxs("div", { className: "str-video__embedded-call", children: [jsx(ConnectionNotification, {}), jsx(PermissionRequests, {}), jsx("div", { className: "str-video__embedded-notifications", children: jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(SpeakingWhileMutedNotification, {}) }) }), jsx(CallHeader, {}), jsxs("div", { className: "str-video__embedded-layout", children: [jsx("div", { className: "str-video__embedded-layout__stage", children: jsx(LayoutComponent, { ...layoutProps }) }), jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsx("div", { className: "str-video__embedded-participants", children: jsx(CallParticipantsList, { onClose: handleToggleParticipants }) })) })] }), jsx(CallControls, { showParticipants: showParticipants, onToggleParticipants: handleToggleParticipants })] }));
+    return (jsxs("div", { className: "str-video__embedded-call", children: [jsx(ConnectionNotification, {}), jsx(PermissionRequests, {}), jsx("div", { className: "str-video__embedded-notifications", children: jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(SpeakingWhileMutedNotification, { placement: "top" }) }) }), jsx(CallHeader, {}), jsxs("div", { className: "str-video__embedded-layout", children: [jsx("div", { className: "str-video__embedded-layout__stage", children: jsx(LayoutComponent, { ...layoutProps }) }), jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsx("div", { className: "str-video__embedded-participants", children: jsx(CallParticipantsList, { onClose: handleToggleParticipants }) })) })] }), jsx(CallControls, { showParticipants: showParticipants, onToggleParticipants: handleToggleParticipants })] }));
 };
 
 export { CallLayout };