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

package/dist/esm/src/components/CallControls/RecordCallButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecordCallButton.js","sources":["../../../../../../../src/components/CallControls/RecordCallButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n  Restricted,\n  useI18n,\n  useToggleCallRecording,\n} from '@stream-io/video-react-bindings';\nimport { CompositeButton } from '../Button/';\nimport { Icon } from '../Icon';\nimport {\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n  useMenuContext,\n} from '../Menu';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { WithTooltip } from '../Tooltip';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type RecordCallButtonProps = PropsWithErrorHandler<{\n  caption?: string;\n}>;\n\nconst RecordEndConfirmation = (props: PropsWithErrorHandler) => {\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();\n\n  const { close } = useMenuContext();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  return (\n    <div className=\"str-video__end-recording__confirmation\">\n      <div className=\"str-video__end-recording__header\">\n        <Icon icon=\"recording-on\" />\n        <h2 className=\"str-video__end-recording__heading\">\n          {t('End recording')}\n        </h2>\n      </div>\n      <p className=\"str-video__end-recording__description\">\n        {t('Are you sure you want end the recording?')}\n      </p>\n      <div className=\"str-video__end-recording__actions\">\n        <CompositeButton variant=\"secondary\" onClick={close}>\n          {t('Cancel')}\n        </CompositeButton>\n        <CompositeButton\n          variant=\"primary\"\n          onClick={isAwaitingResponse ? undefined : handleClick}\n        >\n          {isAwaitingResponse ? <LoadingIndicator /> : t('End recording')}\n        </CompositeButton>\n      </div>\n    </div>\n  );\n};\n\nconst ToggleEndRecordingMenuButton = forwardRef<\n  HTMLDivElement,\n  ToggleMenuButtonProps\n>(function ToggleEndRecordingMenuButtonRender(props, ref) {\n  return (\n    <CompositeButton\n      ref={ref}\n      active={true}\n      variant=\"secondary\"\n      data-testid=\"recording-stop-button\"\n    >\n      <Icon icon=\"recording-off\" />\n    </CompositeButton>\n  );\n});\n\nexport const RecordCallConfirmationButton = (\n  props: PropsWithErrorHandler<{ caption?: string }>,\n) => {\n  const { caption } = props;\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =\n    useToggleCallRecording();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  if (isCallRecordingInProgress) {\n    return (\n      <Restricted\n        requiredGrants={[\n          OwnCapability.START_RECORD_CALL,\n          OwnCapability.STOP_RECORD_CALL,\n        ]}\n      >\n        <MenuToggle\n          ToggleButton={ToggleEndRecordingMenuButton}\n          visualType={MenuVisualType.PORTAL}\n        >\n          <RecordEndConfirmation onError={props.onError} />\n        </MenuToggle>\n      </Restricted>\n    );\n  }\n\n  const title = isAwaitingResponse\n    ? t('Waiting for recording to start...')\n    : (caption ?? t('Record call'));\n\n  return (\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <WithTooltip title={title}>\n        <CompositeButton\n          active={isCallRecordingInProgress}\n          caption={caption}\n          variant=\"secondary\"\n          data-testid=\"recording-start-button\"\n          onClick={isAwaitingResponse ? undefined : handleClick}\n        >\n          {isAwaitingResponse ? (\n            <LoadingIndicator />\n          ) : (\n            <Icon icon=\"recording-off\" />\n          )}\n        </CompositeButton>\n      </WithTooltip>\n    </Restricted>\n  );\n};\n\nexport const RecordCallButton = (props: RecordCallButtonProps) => {\n  const { caption } = props;\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =\n    useToggleCallRecording();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  let title = caption ?? t('Record call');\n\n  if (isAwaitingResponse) {\n    title = isCallRecordingInProgress\n      ? t('Waiting for recording to stop...')\n      : t('Waiting for recording to start...');\n  }\n\n  return (\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <CompositeButton\n        active={isCallRecordingInProgress}\n        caption={caption}\n        variant=\"secondary\"\n        data-testid={\n          isCallRecordingInProgress\n            ? 'recording-stop-button'\n            : 'recording-start-button'\n        }\n        title={title}\n        onClick={isAwaitingResponse ? undefined : handleClick}\n      >\n        {isAwaitingResponse ? (\n          <LoadingIndicator />\n        ) : (\n          <Icon\n            icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}\n          />\n        )}\n      </CompositeButton>\n    </Restricted>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"RecordCallButton.js","sources":["../../../../../../../src/components/CallControls/RecordCallButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n  Restricted,\n  useToggleCallRecording,\n} from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport { Button, CompositeButton } from '../Button/';\nimport { Icon } from '../Icon';\nimport {\n  MenuToggle,\n  MenuVisualType,\n  ToggleMenuButtonProps,\n  useMenuContext,\n} from '../Menu';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { WithTooltip } from '../Tooltip';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type RecordCallButtonProps = PropsWithErrorHandler<{\n  caption?: string;\n}>;\n\nconst RecordEndConfirmation = (props: PropsWithErrorHandler) => {\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse } = useToggleCallRecording();\n\n  const { close } = useMenuContext();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  return (\n    <div className=\"str-video__end-recording__confirmation\">\n      <div className=\"str-video__end-recording__header\">\n        <Icon icon=\"recording-on\" />\n        <div className=\"str-video__end-recording__text\">\n          <h2 className=\"str-video__end-recording__heading\">\n            {t(\n              'callControls.recordCallButton.endRecording.title',\n              'End recording',\n            )}\n          </h2>\n          <p className=\"str-video__end-recording__description\">\n            {t(\n              'callControls.recordCallButton.confirmEndRecording.description',\n              'Are you sure you want end the recording?',\n            )}\n          </p>\n        </div>\n      </div>\n      <div className=\"str-video__end-recording__actions\">\n        <Button\n          variant=\"destructive\"\n          onClick={isAwaitingResponse ? undefined : handleClick}\n        >\n          {isAwaitingResponse ? (\n            <LoadingIndicator />\n          ) : (\n            t(\n              'callControls.recordCallButton.endRecording.title',\n              'End recording',\n            )\n          )}\n        </Button>\n        <Button variant=\"secondary\" appearance=\"outline\" onClick={close}>\n          {t('common.cancel.label', 'Cancel')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nconst ToggleEndRecordingMenuButton = forwardRef<\n  HTMLDivElement,\n  ToggleMenuButtonProps\n>(function ToggleEndRecordingMenuButtonRender(props, ref) {\n  return (\n    <CompositeButton\n      ref={ref}\n      active={true}\n      variant=\"destructive\"\n      data-testid=\"recording-stop-button\"\n    >\n      <Icon icon=\"recording-off\" />\n    </CompositeButton>\n  );\n});\n\nexport const RecordCallConfirmationButton = (\n  props: PropsWithErrorHandler<{ caption?: string }>,\n) => {\n  const { caption } = props;\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =\n    useToggleCallRecording();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  if (isCallRecordingInProgress) {\n    return (\n      <Restricted\n        requiredGrants={[\n          OwnCapability.START_RECORD_CALL,\n          OwnCapability.STOP_RECORD_CALL,\n        ]}\n      >\n        <MenuToggle\n          ToggleButton={ToggleEndRecordingMenuButton}\n          visualType={MenuVisualType.PORTAL}\n        >\n          <RecordEndConfirmation onError={props.onError} />\n        </MenuToggle>\n      </Restricted>\n    );\n  }\n\n  const title = isAwaitingResponse\n    ? t(\n        'callControls.recordCallButton.waitingRecordingStart.title',\n        'Waiting for recording to start...',\n      )\n    : (caption ??\n      t('callControls.recordCallButton.recordCall.title', 'Record call'));\n\n  return (\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <WithTooltip title={title}>\n        <CompositeButton\n          active={isCallRecordingInProgress}\n          caption={caption}\n          variant={isCallRecordingInProgress ? 'destructive' : 'secondary'}\n          data-testid=\"recording-start-button\"\n          onClick={isAwaitingResponse ? undefined : handleClick}\n        >\n          {isAwaitingResponse ? (\n            <LoadingIndicator />\n          ) : (\n            <Icon icon=\"recording-off\" />\n          )}\n        </CompositeButton>\n      </WithTooltip>\n    </Restricted>\n  );\n};\n\nexport const RecordCallButton = (props: RecordCallButtonProps) => {\n  const { caption } = props;\n  const { t } = useI18n();\n  const { toggleCallRecording, isAwaitingResponse, isCallRecordingInProgress } =\n    useToggleCallRecording();\n\n  const handleClick = createCallControlHandler(props, toggleCallRecording);\n\n  let title =\n    caption ??\n    t('callControls.recordCallButton.recordCall.title', 'Record call');\n\n  if (isAwaitingResponse) {\n    title = isCallRecordingInProgress\n      ? t(\n          'callControls.recordCallButton.waitingRecordingStop.title',\n          'Waiting for recording to stop...',\n        )\n      : t(\n          'callControls.recordCallButton.waitingRecordingStart.title',\n          'Waiting for recording to start...',\n        );\n  }\n\n  return (\n    <Restricted\n      requiredGrants={[\n        OwnCapability.START_RECORD_CALL,\n        OwnCapability.STOP_RECORD_CALL,\n      ]}\n    >\n      <CompositeButton\n        active={isCallRecordingInProgress}\n        caption={caption}\n        variant={isCallRecordingInProgress ? 'destructive' : 'secondary'}\n        data-testid={\n          isCallRecordingInProgress\n            ? 'recording-stop-button'\n            : 'recording-start-button'\n        }\n        title={title}\n        onClick={isAwaitingResponse ? undefined : handleClick}\n      >\n        {isAwaitingResponse ? (\n          <LoadingIndicator />\n        ) : (\n          <Icon\n            icon={isCallRecordingInProgress ? 'recording-on' : 'recording-off'}\n          />\n        )}\n      </CompositeButton>\n    </Restricted>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,GAAG,CAAC,KAA4B,KAAI;AAC7D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,GAAG,sBAAsB,EAAE;AAE5E,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE;IAElC,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,CAAC;IAExE,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EAAA,CACrDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC/CC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,CAAG,EAC5BD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAAA,CAC7CC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAC9C,CAAC,CACA,kDAAkD,EAClD,eAAe,CAChB,EAAA,CACE,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uCAAuC,EAAA,QAAA,EACjD,CAAC,CACA,+DAA+D,EAC/D,0CAA0C,CAC3C,EAAA,CACC,CAAA,EAAA,CACA,CAAA,EAAA,CACF,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,aAAa,EACrB,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,WAAW,EAAA,QAAA,EAEpD,kBAAkB,IACjBA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,KAEpB,CAAC,CACC,kDAAkD,EAClD,eAAe,CAChB,CACF,EAAA,CACM,EACTA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,WAAW,EAAC,UAAU,EAAC,SAAS,EAAC,OAAO,EAAE,KAAK,EAAA,QAAA,EAC5D,CAAC,CAAC,qBAAqB,EAAE,QAAQ,CAAC,EAAA,CAC5B,CAAA,EAAA,CACL,CAAA,EAAA,CACF;AAEV,CAAC;AAED,MAAM,4BAA4B,GAAG,UAAU,CAG7C,SAAS,kCAAkC,CAAC,KAAK,EAAE,GAAG,EAAA;IACtD,QACEA,GAAA,CAAC,eAAe,EAAA,EACd,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,aAAa,EAAA,aAAA,EACT,uBAAuB,EAAA,QAAA,EAEnCA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,eAAe,EAAA,CAAG,EAAA,CACb;AAEtB,CAAC,CAAC;AAEK,MAAM,4BAA4B,GAAG,CAC1C,KAAkD,KAChD;AACF,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK;AACzB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,GAC1E,sBAAsB,EAAE;IAE1B,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,CAAC;IAExE,IAAI,yBAAyB,EAAE;AAC7B,QAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,gBAAA,aAAa,CAAC,iBAAiB;AAC/B,gBAAA,aAAa,CAAC,gBAAgB;aAC/B,EAAA,QAAA,EAEDA,GAAA,CAAC,UAAU,EAAA,EACT,YAAY,EAAE,4BAA4B,EAC1C,UAAU,EAAE,cAAc,CAAC,MAAM,YAEjCA,GAAA,CAAC,qBAAqB,EAAA,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EAAA,CAAI,EAAA,CACtC,EAAA,CACF;IAEjB;IAEA,MAAM,KAAK,GAAG;AACZ,UAAE,CAAC,CACC,2DAA2D,EAC3D,mCAAmC;WAEpC,OAAO;AACR,YAAA,CAAC,CAAC,gDAAgD,EAAE,aAAa,CAAC,CAAC;AAEvE,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,YAAA,aAAa,CAAC,iBAAiB;AAC/B,YAAA,aAAa,CAAC,gBAAgB;AAC/B,SAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACvBA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,yBAAyB,EACjC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,yBAAyB,GAAG,aAAa,GAAG,WAAW,EAAA,aAAA,EACpD,wBAAwB,EACpC,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,WAAW,EAAA,QAAA,EAEpD,kBAAkB,IACjBA,IAAC,gBAAgB,EAAA,EAAA,CAAG,KAEpBA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,eAAe,GAAG,CAC9B,EAAA,CACe,EAAA,CACN,EAAA,CACH;AAEjB;AAEO,MAAM,gBAAgB,GAAG,CAAC,KAA4B,KAAI;AAC/D,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK;AACzB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,GAC1E,sBAAsB,EAAE;IAE1B,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,CAAC;IAExE,IAAI,KAAK,GACP,OAAO;AACP,QAAA,CAAC,CAAC,gDAAgD,EAAE,aAAa,CAAC;IAEpE,IAAI,kBAAkB,EAAE;AACtB,QAAA,KAAK,GAAG;AACN,cAAE,CAAC,CACC,0DAA0D,EAC1D,kCAAkC;AAEtC,cAAE,CAAC,CACC,2DAA2D,EAC3D,mCAAmC,CACpC;IACP;AAEA,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE;AACd,YAAA,aAAa,CAAC,iBAAiB;AAC/B,YAAA,aAAa,CAAC,gBAAgB;SAC/B,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,yBAAyB,EACjC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,yBAAyB,GAAG,aAAa,GAAG,WAAW,EAAA,aAAA,EAE9D;AACE,kBAAE;kBACA,wBAAwB,EAE9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,kBAAkB,GAAG,SAAS,GAAG,WAAW,YAEpD,kBAAkB,IACjBA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,KAEpBA,IAAC,IAAI,EAAA,EACH,IAAI,EAAE,yBAAyB,GAAG,cAAc,GAAG,eAAe,GAClE,CACH,EAAA,CACe,EAAA,CACP;AAEjB;;;;"}

package/dist/esm/src/components/CallControls/ScreenShareButton.js

@@ -1,9 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { RequestPermissionRequestPermissionsEnum, OwnCapability } from '@stream-io/video-client';
-import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
-import { CompositeButton } from '../Button/CompositeButton.js';
-import '../Button/IconButton.js';
+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 '../Button/Button.js';
+import '../Button/IconButton.js';
+import { CompositeButton } from '../Button/CompositeButton.js';
 import 'clsx';
 import '@floating-ui/react';
 import { useRequestPermission } from '../../hooks/useRequestPermission.js';
@@ -35,7 +39,10 @@ const ScreenShareButton = (props) => {
             await screenShare.toggle();
         }
     });
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(PermissionNotification, { permission: OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your screen.'), messageAwaitingApproval: t('Awaiting for an approval to share screen.'), messageRevoked: t('You can no longer share your screen.'), children: jsx(WithTooltip, { title: caption ?? t('Share screen'), children: jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: "primary", "data-testid": isSomeoneScreenSharing
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx(PermissionNotification, { permission: OwnCapability.SCREENSHARE, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.screenShareButton.permissionGranted.text', 'You can now share your screen.'), messageAwaitingApproval: t('callControls.screenShareButton.awaitingApproval.text', 'Awaiting for an approval to share screen.'), messageRevoked: t('callControls.screenShareButton.permissionRevoked.text', 'You can no longer share your screen.'), children: jsx(WithTooltip, { title: caption ??
+                    t('callControls.screenShareButton.shareScreen.title', 'Share screen'), children: jsx(CompositeButton, { active: isSomeoneScreenSharing || amIScreenSharing, caption: caption, variant: isSomeoneScreenSharing || amIScreenSharing
+                        ? 'primary'
+                        : 'secondary', "data-testid": isSomeoneScreenSharing
                         ? 'screen-share-stop-button'
                         : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
 };

package/dist/esm/src/components/CallControls/ScreenShareButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenShareButton.js","sources":["../../../../../../../src/components/CallControls/ScreenShareButton.tsx"],"sourcesContent":["import {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n} from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n  UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport { CompositeButton } from '../Button/';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport {\n  PropsWithErrorHandler,\n  createCallControlHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ScreenShareButtonProps = PropsWithErrorHandler<\n  {\n    caption?: string;\n  } & UseInputMediaDeviceOptions\n>;\n\nexport const ScreenShareButton = (props: ScreenShareButtonProps) => {\n  const { t } = useI18n();\n  const { caption, optimisticUpdates } = props;\n\n  const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } =\n    useCallStateHooks();\n  const isSomeoneScreenSharing = useHasOngoingScreenShare();\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SCREENSHARE);\n\n  const callSettings = useCallSettings();\n  const isScreenSharingAllowed = callSettings?.screensharing.enabled;\n\n  const { screenShare, optionsAwareIsMute, isTogglePending } =\n    useScreenShareState({\n      optimisticUpdates,\n    });\n  const amIScreenSharing = !optionsAwareIsMute;\n  const disableScreenShareButton =\n    (!amIScreenSharing &&\n      (isSomeoneScreenSharing || isScreenSharingAllowed === false)) ||\n    (!optimisticUpdates && isTogglePending);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await screenShare.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n      <PermissionNotification\n        permission={OwnCapability.SCREENSHARE}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t('You can now share your screen.')}\n        messageAwaitingApproval={t('Awaiting for an approval to share screen.')}\n        messageRevoked={t('You can no longer share your screen.')}\n      >\n        <WithTooltip title={caption ?? t('Share screen')}>\n          <CompositeButton\n            active={isSomeoneScreenSharing || amIScreenSharing}\n            caption={caption}\n            variant=\"primary\"\n            data-testid={\n              isSomeoneScreenSharing\n                ? 'screen-share-stop-button'\n                : 'screen-share-start-button'\n            }\n            disabled={disableScreenShareButton}\n            onClick={handleClick}\n          >\n            <Icon\n              icon={\n                isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'\n              }\n            />\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,iBAAiB,GAAG,CAAC,KAA6B,KAAI;AACjE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,KAAK;IAE5C,MAAM,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,eAAe,EAAE,GACtE,iBAAiB,EAAE;AACrB,IAAA,MAAM,sBAAsB,GAAG,wBAAwB,EAAE;AACzD,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,GAC9D,oBAAoB,CAAC,uCAAuC,CAAC,WAAW,CAAC;AAE3E,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,sBAAsB,GAAG,YAAY,EAAE,aAAa,CAAC,OAAO;IAElE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,GACxD,mBAAmB,CAAC;QAClB,iBAAiB;AAClB,KAAA,CAAC;AACJ,IAAA,MAAM,gBAAgB,GAAG,CAAC,kBAAkB;AAC5C,IAAA,MAAM,wBAAwB,GAC5B,CAAC,CAAC,gBAAgB;AAChB,SAAC,sBAAsB,IAAI,sBAAsB,KAAK,KAAK,CAAC;AAC9D,SAAC,CAAC,iBAAiB,IAAI,eAAe,CAAC;IACzC,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,YAAW;QAC7D,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,iBAAiB,EAAE;QAC3B;aAAO;AACL,YAAA,MAAM,WAAW,CAAC,MAAM,EAAE;QAC5B;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAAA,QAAA,EACrDA,GAAA,CAAC,sBAAsB,IACrB,UAAU,EAAE,aAAa,CAAC,WAAW,EACrC,kBAAkB,EAAE,oBAAoB,EACxC,eAAe,EAAE,CAAC,CAAC,gCAAgC,CAAC,EACpD,uBAAuB,EAAE,CAAC,CAAC,2CAA2C,CAAC,EACvE,cAAc,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAA,QAAA,EAEzDA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC,cAAc,CAAC,EAAA,QAAA,EAC9CA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,sBAAsB,IAAI,gBAAgB,EAClD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,SAAS,iBAEf;AACE,0BAAE;AACF,0BAAE,2BAA2B,EAEjC,QAAQ,EAAE,wBAAwB,EAClC,OAAO,EAAE,WAAW,EAAA,QAAA,EAEpBA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EACF,sBAAsB,GAAG,iBAAiB,GAAG,kBAAkB,EAAA,CAEjE,EAAA,CACc,EAAA,CACN,EAAA,CACS,EAAA,CACd;AAEjB;;;;"}
+{"version":3,"file":"ScreenShareButton.js","sources":["../../../../../../../src/components/CallControls/ScreenShareButton.tsx"],"sourcesContent":["import {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n} from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport { CompositeButton } from '../Button/';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport {\n  PropsWithErrorHandler,\n  createCallControlHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ScreenShareButtonProps = PropsWithErrorHandler<\n  {\n    caption?: string;\n  } & UseInputMediaDeviceOptions\n>;\n\nexport const ScreenShareButton = (props: ScreenShareButtonProps) => {\n  const { t } = useI18n();\n  const { caption, optimisticUpdates } = props;\n\n  const { useHasOngoingScreenShare, useScreenShareState, useCallSettings } =\n    useCallStateHooks();\n  const isSomeoneScreenSharing = useHasOngoingScreenShare();\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SCREENSHARE);\n\n  const callSettings = useCallSettings();\n  const isScreenSharingAllowed = callSettings?.screensharing.enabled;\n\n  const { screenShare, optionsAwareIsMute, isTogglePending } =\n    useScreenShareState({\n      optimisticUpdates,\n    });\n  const amIScreenSharing = !optionsAwareIsMute;\n  const disableScreenShareButton =\n    (!amIScreenSharing &&\n      (isSomeoneScreenSharing || isScreenSharingAllowed === false)) ||\n    (!optimisticUpdates && isTogglePending);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await screenShare.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n      <PermissionNotification\n        permission={OwnCapability.SCREENSHARE}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t(\n          'callControls.screenShareButton.permissionGranted.text',\n          'You can now share your screen.',\n        )}\n        messageAwaitingApproval={t(\n          'callControls.screenShareButton.awaitingApproval.text',\n          'Awaiting for an approval to share screen.',\n        )}\n        messageRevoked={t(\n          'callControls.screenShareButton.permissionRevoked.text',\n          'You can no longer share your screen.',\n        )}\n      >\n        <WithTooltip\n          title={\n            caption ??\n            t(\n              'callControls.screenShareButton.shareScreen.title',\n              'Share screen',\n            )\n          }\n        >\n          <CompositeButton\n            active={isSomeoneScreenSharing || amIScreenSharing}\n            caption={caption}\n            variant={\n              isSomeoneScreenSharing || amIScreenSharing\n                ? 'primary'\n                : 'secondary'\n            }\n            data-testid={\n              isSomeoneScreenSharing\n                ? 'screen-share-stop-button'\n                : 'screen-share-start-button'\n            }\n            disabled={disableScreenShareButton}\n            onClick={handleClick}\n          >\n            <Icon\n              icon={\n                isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off'\n              }\n            />\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;AA0BO,MAAM,iBAAiB,GAAG,CAAC,KAA6B,KAAI;AACjE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,KAAK;IAE5C,MAAM,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,eAAe,EAAE,GACtE,iBAAiB,EAAE;AACrB,IAAA,MAAM,sBAAsB,GAAG,wBAAwB,EAAE;AACzD,IAAA,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,GAC9D,oBAAoB,CAAC,uCAAuC,CAAC,WAAW,CAAC;AAE3E,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,sBAAsB,GAAG,YAAY,EAAE,aAAa,CAAC,OAAO;IAElE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,GACxD,mBAAmB,CAAC;QAClB,iBAAiB;AAClB,KAAA,CAAC;AACJ,IAAA,MAAM,gBAAgB,GAAG,CAAC,kBAAkB;AAC5C,IAAA,MAAM,wBAAwB,GAC5B,CAAC,CAAC,gBAAgB;AAChB,SAAC,sBAAsB,IAAI,sBAAsB,KAAK,KAAK,CAAC;AAC9D,SAAC,CAAC,iBAAiB,IAAI,eAAe,CAAC;IACzC,MAAM,WAAW,GAAG,wBAAwB,CAAC,KAAK,EAAE,YAAW;QAC7D,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,iBAAiB,EAAE;QAC3B;aAAO;AACL,YAAA,MAAM,WAAW,CAAC,MAAM,EAAE;QAC5B;AACF,IAAA,CAAC,CAAC;IAEF,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAAA,QAAA,EACrDA,GAAA,CAAC,sBAAsB,EAAA,EACrB,UAAU,EAAE,aAAa,CAAC,WAAW,EACrC,kBAAkB,EAAE,oBAAoB,EACxC,eAAe,EAAE,CAAC,CAChB,uDAAuD,EACvD,gCAAgC,CACjC,EACD,uBAAuB,EAAE,CAAC,CACxB,sDAAsD,EACtD,2CAA2C,CAC5C,EACD,cAAc,EAAE,CAAC,CACf,uDAAuD,EACvD,sCAAsC,CACvC,EAAA,QAAA,EAEDA,GAAA,CAAC,WAAW,EAAA,EACV,KAAK,EACH,OAAO;oBACP,CAAC,CACC,kDAAkD,EAClD,cAAc,CACf,EAAA,QAAA,EAGHA,GAAA,CAAC,eAAe,EAAA,EACd,MAAM,EAAE,sBAAsB,IAAI,gBAAgB,EAClD,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,sBAAsB,IAAI;AACxB,0BAAE;0BACA,WAAW,EAAA,aAAA,EAGf;AACE,0BAAE;AACF,0BAAE,2BAA2B,EAEjC,QAAQ,EAAE,wBAAwB,EAClC,OAAO,EAAE,WAAW,EAAA,QAAA,EAEpBA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EACF,sBAAsB,GAAG,iBAAiB,GAAG,kBAAkB,EAAA,CAEjE,EAAA,CACc,EAAA,CACN,EAAA,CACS,EAAA,CACd;AAEjB;;;;"}

package/dist/esm/src/components/CallControls/ToggleAudioButton.js

@@ -1,10 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { SfuModels, RequestPermissionRequestPermissionsEnum, 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 { useState } from 'react';
+import '@stream-io/i18n/react';
 import clsx from 'clsx';
-import { CompositeButton } from '../Button/CompositeButton.js';
+import { Badge } from '../Badge/Badge.js';
+import '../Button/Button.js';
 import '../Button/IconButton.js';
-import { useState } from 'react';
+import { CompositeButton } from '../Button/CompositeButton.js';
 import { Icon } from '../Icon/Icon.js';
 import '../DeviceSettings/DeviceSettings.js';
 import '@floating-ui/react';
@@ -25,16 +30,19 @@ const ToggleAudioPreviewButton = (props) => {
     const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.AUDIO);
     const [tooltipDisabled, setTooltipDisabled] = useState(false);
     const handleClick = createCallControlHandler(props, () => microphone.toggle());
-    return (jsx(WithTooltip, { title: !hasBrowserPermission
-            ? t('Check your browser audio permissions')
-            : isSystemMuted
-                ? t('Microphone is paused by your system')
-                : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
+    return (jsx(WithTooltip, { title: isPromptingPermission
+            ? t('common.waitingForPermission.title', 'Waiting for permission')
+            : !hasBrowserPermission
+                ? t('callControls.toggleAudioButton.checkBrowserAudioPermissions.title', 'Check your browser audio permissions')
+                : isSystemMuted
+                    ? t('callControls.toggleAudioButton.microphonePausedBySystem.title', 'Microphone is paused by your system')
+                    : (caption ??
+                        t('callControls.toggleAudioButton.mic.title', 'Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute
                 ? 'preview-audio-unmute-button'
                 : 'preview-audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser audio permissions'), children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }));
+            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'mic' : 'mic-off' }), isPromptingPermission ? (jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || isSystemMuted ? (jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }));
 };
 const ToggleAudioPublishingButton = (props) => {
     const { t } = useI18n();
@@ -53,19 +61,22 @@ const ToggleAudioPublishingButton = (props) => {
             await microphone.toggle();
         }
     });
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(PermissionNotification, { permission: OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now speak.'), messageAwaitingApproval: t('Awaiting for an approval to speak.'), messageRevoked: t('You can no longer speak.'), children: jsx(WithTooltip, { title: !hasPermission
-                    ? t('You have no permission to share your audio')
-                    : !hasBrowserPermission
-                        ? t('Check your browser mic permissions')
-                        : isSystemMuted
-                            ? t('Microphone is paused by your system')
-                            : (caption ?? t('Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], children: jsx(PermissionNotification, { permission: OwnCapability.SEND_AUDIO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.toggleAudioButton.permissionGranted.text', 'You can now speak.'), messageAwaitingApproval: t('callControls.toggleAudioButton.awaitingApproval.text', 'Awaiting for an approval to speak.'), messageRevoked: t('callControls.toggleAudioButton.permissionRevoked.text', 'You can no longer speak.'), children: jsx(WithTooltip, { title: isPromptingPermission
+                    ? t('common.waitingForPermission.title', 'Waiting for permission')
+                    : !hasPermission
+                        ? t('callControls.toggleAudioButton.noPermissionToShareAudio.title', 'You have no permission to share your audio')
+                        : !hasBrowserPermission
+                            ? t('callControls.toggleAudioButton.checkBrowserMicPermissions.title', 'Check your browser mic permissions')
+                            : isSystemMuted
+                                ? t('callControls.toggleAudioButton.microphonePausedBySystem.title', 'Microphone is paused by your system')
+                                : (caption ??
+                                    t('callControls.toggleAudioButton.mic.title', 'Mic')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         // disable button while the toggle action is pending when not using optimistic updates
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), (!hasBrowserPermission || !hasPermission) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && hasPermission && (jsx("span", { className: "str-video__system-muted", title: t('Microphone is paused by your system'), children: "!" }))] }) }) }) }));
+                    }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'mic-off' : 'mic' }), isPromptingPermission ? (jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || !hasPermission || isSystemMuted ? (jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }) }) }));
 };
 
 export { ToggleAudioPreviewButton, ToggleAudioPublishingButton };

package/dist/esm/src/components/CallControls/ToggleAudioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleAudioButton.js","sources":["../../../../../../../src/components/CallControls/ToggleAudioButton.tsx"],"sourcesContent":["import {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n  SfuModels,\n} from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n  type UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\nimport { CompositeButton, IconButtonWithMenuProps } from '../Button';\nimport { DeviceSelectorAudioInput } from '../DeviceSettings';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleAudioPreviewButton = (\n  props: ToggleAudioPreviewButtonProps,\n) => {\n  const {\n    caption,\n    Menu = DeviceSelectorAudioInput,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n  const { t } = useI18n();\n  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();\n  const {\n    microphone,\n    hasBrowserPermission,\n    isPromptingPermission,\n    optionsAwareIsMute,\n    isTogglePending,\n  } = useMicrophoneState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.AUDIO,\n  );\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, () =>\n    microphone.toggle(),\n  );\n\n  return (\n    <WithTooltip\n      title={\n        !hasBrowserPermission\n          ? t('Check your browser audio permissions')\n          : isSystemMuted\n            ? t('Microphone is paused by your system')\n            : (caption ?? t('Mic'))\n      }\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        active={optionsAwareIsMute}\n        caption={caption}\n        className={clsx(\n          !hasBrowserPermission && 'str-video__device-unavailable',\n        )}\n        variant=\"secondary\"\n        disabled={\n          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)\n        }\n        data-testid={\n          optionsAwareIsMute\n            ? 'preview-audio-unmute-button'\n            : 'preview-audio-mute-button'\n        }\n        onClick={handleClick}\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        {...restCompositeButtonProps}\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon={!optionsAwareIsMute ? 'mic' : 'mic-off'} />\n        {!hasBrowserPermission && (\n          <span\n            className=\"str-video__no-media-permission\"\n            title={t('Check your browser audio permissions')}\n            children=\"!\"\n          />\n        )}\n        {isPromptingPermission && (\n          <span\n            className=\"str-video__pending-permission\"\n            title={t('Waiting for permission')}\n            children=\"?\"\n          />\n        )}\n        {isSystemMuted && hasBrowserPermission && (\n          <span\n            className=\"str-video__system-muted\"\n            title={t('Microphone is paused by your system')}\n            children=\"!\"\n          />\n        )}\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n\nexport type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleAudioPublishingButton = (\n  props: ToggleAudioPublishingButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = <DeviceSelectorAudioInput visualType=\"list\" />,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_AUDIO);\n\n  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();\n  const {\n    microphone,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n    optionsAwareIsMute,\n  } = useMicrophoneState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.AUDIO,\n  );\n\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await microphone.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>\n      <PermissionNotification\n        permission={OwnCapability.SEND_AUDIO}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t('You can now speak.')}\n        messageAwaitingApproval={t('Awaiting for an approval to speak.')}\n        messageRevoked={t('You can no longer speak.')}\n      >\n        <WithTooltip\n          title={\n            !hasPermission\n              ? t('You have no permission to share your audio')\n              : !hasBrowserPermission\n                ? t('Check your browser mic permissions')\n                : isSystemMuted\n                  ? t('Microphone is paused by your system')\n                  : (caption ?? t('Mic'))\n          }\n          tooltipDisabled={tooltipDisabled}\n        >\n          <CompositeButton\n            active={optionsAwareIsMute}\n            caption={caption}\n            variant=\"secondary\"\n            disabled={\n              !hasBrowserPermission ||\n              !hasPermission ||\n              // disable button while the toggle action is pending when not using optimistic updates\n              (!optimisticUpdates && isTogglePending)\n            }\n            data-testid={\n              optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button'\n            }\n            onClick={handleClick}\n            Menu={Menu}\n            menuPlacement={menuPlacement}\n            menuOffset={16}\n            {...restCompositeButtonProps}\n            onMenuToggle={(shown) => {\n              setTooltipDisabled(shown);\n              onMenuToggle?.(shown);\n            }}\n          >\n            <Icon icon={optionsAwareIsMute ? 'mic-off' : 'mic'} />\n            {(!hasBrowserPermission || !hasPermission) && (\n              <span className=\"str-video__no-media-permission\">!</span>\n            )}\n            {isPromptingPermission && (\n              <span\n                className=\"str-video__pending-permission\"\n                title={t('Waiting for permission')}\n              >\n                ?\n              </span>\n            )}\n            {isSystemMuted && hasBrowserPermission && hasPermission && (\n              <span\n                className=\"str-video__system-muted\"\n                title={t('Microphone is paused by your system')}\n              >\n                !\n              </span>\n            )}\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ToggleAudioButton.js","sources":["../../../../../../../src/components/CallControls/ToggleAudioButton.tsx"],"sourcesContent":["import {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n  SfuModels,\n} from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  type UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport clsx from 'clsx';\nimport { Badge } from '../Badge';\nimport { CompositeButton, CompositeButtonProps } from '../Button';\nimport { DeviceSelectorAudioInput } from '../DeviceSettings';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<\n  Pick<\n    CompositeButtonProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleAudioPreviewButton = (\n  props: ToggleAudioPreviewButtonProps,\n) => {\n  const {\n    caption,\n    Menu = DeviceSelectorAudioInput,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n  const { t } = useI18n();\n  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();\n  const {\n    microphone,\n    hasBrowserPermission,\n    isPromptingPermission,\n    optionsAwareIsMute,\n    isTogglePending,\n  } = useMicrophoneState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.AUDIO,\n  );\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, () =>\n    microphone.toggle(),\n  );\n\n  return (\n    <WithTooltip\n      title={\n        isPromptingPermission\n          ? t('common.waitingForPermission.title', 'Waiting for permission')\n          : !hasBrowserPermission\n            ? t(\n                'callControls.toggleAudioButton.checkBrowserAudioPermissions.title',\n                'Check your browser audio permissions',\n              )\n            : isSystemMuted\n              ? t(\n                  'callControls.toggleAudioButton.microphonePausedBySystem.title',\n                  'Microphone is paused by your system',\n                )\n              : (caption ??\n                t('callControls.toggleAudioButton.mic.title', 'Mic'))\n      }\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        active={optionsAwareIsMute}\n        caption={caption}\n        className={clsx(\n          !hasBrowserPermission && 'str-video__device-unavailable',\n        )}\n        variant={optionsAwareIsMute ? 'destructive' : 'secondary'}\n        disabled={\n          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)\n        }\n        data-testid={\n          optionsAwareIsMute\n            ? 'preview-audio-unmute-button'\n            : 'preview-audio-mute-button'\n        }\n        onClick={handleClick}\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        {...restCompositeButtonProps}\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon={!optionsAwareIsMute ? 'mic' : 'mic-off'} />\n        {isPromptingPermission ? (\n          <Badge variant=\"error\" icon=\"question-mark-fill\" />\n        ) : !hasBrowserPermission || isSystemMuted ? (\n          <Badge variant=\"error\" icon=\"exclamation-mark-fill\" />\n        ) : null}\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n\nexport type ToggleAudioPublishingButtonProps = PropsWithErrorHandler<\n  Pick<\n    CompositeButtonProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleAudioPublishingButton = (\n  props: ToggleAudioPublishingButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = <DeviceSelectorAudioInput visualType=\"list\" />,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_AUDIO);\n\n  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();\n  const {\n    microphone,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n    optionsAwareIsMute,\n  } = useMicrophoneState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.AUDIO,\n  );\n\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await microphone.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>\n      <PermissionNotification\n        permission={OwnCapability.SEND_AUDIO}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t(\n          'callControls.toggleAudioButton.permissionGranted.text',\n          'You can now speak.',\n        )}\n        messageAwaitingApproval={t(\n          'callControls.toggleAudioButton.awaitingApproval.text',\n          'Awaiting for an approval to speak.',\n        )}\n        messageRevoked={t(\n          'callControls.toggleAudioButton.permissionRevoked.text',\n          'You can no longer speak.',\n        )}\n      >\n        <WithTooltip\n          title={\n            isPromptingPermission\n              ? t('common.waitingForPermission.title', 'Waiting for permission')\n              : !hasPermission\n                ? t(\n                    'callControls.toggleAudioButton.noPermissionToShareAudio.title',\n                    'You have no permission to share your audio',\n                  )\n                : !hasBrowserPermission\n                  ? t(\n                      'callControls.toggleAudioButton.checkBrowserMicPermissions.title',\n                      'Check your browser mic permissions',\n                    )\n                  : isSystemMuted\n                    ? t(\n                        'callControls.toggleAudioButton.microphonePausedBySystem.title',\n                        'Microphone is paused by your system',\n                      )\n                    : (caption ??\n                      t('callControls.toggleAudioButton.mic.title', 'Mic'))\n          }\n          tooltipDisabled={tooltipDisabled}\n        >\n          <CompositeButton\n            active={optionsAwareIsMute}\n            caption={caption}\n            variant={optionsAwareIsMute ? 'destructive' : 'secondary'}\n            disabled={\n              !hasBrowserPermission ||\n              !hasPermission ||\n              // disable button while the toggle action is pending when not using optimistic updates\n              (!optimisticUpdates && isTogglePending)\n            }\n            data-testid={\n              optionsAwareIsMute ? 'audio-unmute-button' : 'audio-mute-button'\n            }\n            onClick={handleClick}\n            Menu={Menu}\n            menuPlacement={menuPlacement}\n            menuOffset={16}\n            {...restCompositeButtonProps}\n            onMenuToggle={(shown) => {\n              setTooltipDisabled(shown);\n              onMenuToggle?.(shown);\n            }}\n          >\n            <Icon icon={optionsAwareIsMute ? 'mic-off' : 'mic'} />\n            {isPromptingPermission ? (\n              <Badge variant=\"error\" icon=\"question-mark-fill\" />\n            ) : !hasBrowserPermission || !hasPermission || isSystemMuted ? (\n              <Badge variant=\"error\" icon=\"exclamation-mark-fill\" />\n            ) : null}\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/components/CallControls/ToggleAudioOutputButton.js

@@ -1,10 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { CompositeButton } from '../Button/CompositeButton.js';
+import '../Button/Button.js';
 import '../Button/IconButton.js';
-import { useI18n } from '@stream-io/video-react-bindings';
-import { Icon } from '../Icon/Icon.js';
+import { CompositeButton } from '../Button/CompositeButton.js';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
 import { useState } from 'react';
+import '@stream-io/i18n/react';
+import { Icon } from '../Icon/Icon.js';
 import '@stream-io/video-client';
+import '@stream-io/video-react-bindings';
 import '../DeviceSettings/DeviceSettings.js';
 import 'clsx';
 import '@floating-ui/react';
@@ -17,7 +21,8 @@ const ToggleAudioOutputButton = (props) => {
     const { t } = useI18n();
     const { caption, Menu = DeviceSelectorAudioOutput, menuPlacement = 'top', onMenuToggle, } = props;
     const [tooltipDisabled, setTooltipDisabled] = useState(false);
-    return (jsx(WithTooltip, { title: caption || t('Speakers'), tooltipDisabled: tooltipDisabled, children: jsx(CompositeButton, { Menu: Menu, menuPlacement: menuPlacement, caption: caption, "data-testid": "audio-output-button", onMenuToggle: (shown) => {
+    return (jsx(WithTooltip, { title: caption ||
+            t('callControls.toggleAudioOutputButton.speakers.title', 'Speakers'), tooltipDisabled: tooltipDisabled, children: jsx(CompositeButton, { Menu: Menu, menuPlacement: menuPlacement, caption: caption, "data-testid": "audio-output-button", onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
             }, children: jsx(Icon, { icon: "speaker" }) }) }));

package/dist/esm/src/components/CallControls/ToggleAudioOutputButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleAudioOutputButton.js","sources":["../../../../../../../src/components/CallControls/ToggleAudioOutputButton.tsx"],"sourcesContent":["import { CompositeButton, IconButtonWithMenuProps } from '../Button';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../Icon';\nimport { DeviceSelectorAudioOutput } from '../DeviceSettings';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\n\nexport type ToggleAudioOutputButtonProps = Pick<\n  IconButtonWithMenuProps,\n  'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n>;\n\nexport const ToggleAudioOutputButton = (\n  props: ToggleAudioOutputButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = DeviceSelectorAudioOutput,\n    menuPlacement = 'top',\n    onMenuToggle,\n  } = props;\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n\n  return (\n    <WithTooltip\n      title={caption || t('Speakers')}\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        caption={caption}\n        data-testid=\"audio-output-button\"\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon=\"speaker\" />\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAYO,MAAM,uBAAuB,GAAG,CACrC,KAAmC,KACjC;AACF,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EACJ,OAAO,EACP,IAAI,GAAG,yBAAyB,EAChC,aAAa,GAAG,KAAK,EACrB,YAAY,GACb,GAAG,KAAK;IACT,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE7D,IAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EACV,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC,UAAU,CAAC,EAC/B,eAAe,EAAE,eAAe,YAEhCA,GAAA,CAAC,eAAe,EAAA,EACd,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,qBAAqB,EACjC,YAAY,EAAE,CAAC,KAAK,KAAI;gBACtB,kBAAkB,CAAC,KAAK,CAAC;AACzB,gBAAA,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAA,CAAG,EAAA,CACP,EAAA,CACN;AAElB;;;;"}
+{"version":3,"file":"ToggleAudioOutputButton.js","sources":["../../../../../../../src/components/CallControls/ToggleAudioOutputButton.tsx"],"sourcesContent":["import { CompositeButton, CompositeButtonProps } from '../Button';\nimport { useI18n } from '../../i18n';\nimport { Icon } from '../Icon';\nimport { DeviceSelectorAudioOutput } from '../DeviceSettings';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\n\nexport type ToggleAudioOutputButtonProps = Pick<\n  CompositeButtonProps,\n  'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n>;\n\nexport const ToggleAudioOutputButton = (\n  props: ToggleAudioOutputButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = DeviceSelectorAudioOutput,\n    menuPlacement = 'top',\n    onMenuToggle,\n  } = props;\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n\n  return (\n    <WithTooltip\n      title={\n        caption ||\n        t('callControls.toggleAudioOutputButton.speakers.title', 'Speakers')\n      }\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        caption={caption}\n        data-testid=\"audio-output-button\"\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon=\"speaker\" />\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAYO,MAAM,uBAAuB,GAAG,CACrC,KAAmC,KACjC;AACF,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EACJ,OAAO,EACP,IAAI,GAAG,yBAAyB,EAChC,aAAa,GAAG,KAAK,EACrB,YAAY,GACb,GAAG,KAAK;IACT,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE7D,IAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EACV,KAAK,EACH,OAAO;AACP,YAAA,CAAC,CAAC,qDAAqD,EAAE,UAAU,CAAC,EAEtE,eAAe,EAAE,eAAe,EAAA,QAAA,EAEhCA,GAAA,CAAC,eAAe,EAAA,EACd,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAAA,aAAA,EACJ,qBAAqB,EACjC,YAAY,EAAE,CAAC,KAAK,KAAI;gBACtB,kBAAkB,CAAC,KAAK,CAAC;AACzB,gBAAA,YAAY,GAAG,KAAK,CAAC;YACvB,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,SAAS,EAAA,CAAG,EAAA,CACP,EAAA,CACN;AAElB;;;;"}

package/dist/esm/src/components/CallControls/ToggleVideoButton.js

@@ -1,10 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-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 { useState } from 'react';
+import '@stream-io/i18n/react';
 import clsx from 'clsx';
 import { SfuModels, RequestPermissionRequestPermissionsEnum, OwnCapability } from '@stream-io/video-client';
-import { CompositeButton } from '../Button/CompositeButton.js';
+import { Badge } from '../Badge/Badge.js';
+import '../Button/Button.js';
 import '../Button/IconButton.js';
-import { useState } from 'react';
+import { CompositeButton } from '../Button/CompositeButton.js';
 import { Icon } from '../Icon/Icon.js';
 import '../DeviceSettings/DeviceSettings.js';
 import '@floating-ui/react';
@@ -25,16 +30,19 @@ const ToggleVideoPreviewButton = (props) => {
     const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(SfuModels.TrackType.VIDEO);
     const [tooltipDisabled, setTooltipDisabled] = useState(false);
     const handleClick = createCallControlHandler(props, () => camera.toggle());
-    return (jsx(WithTooltip, { title: !hasBrowserPermission
-            ? t('Check your browser video permissions')
-            : isSystemMuted
-                ? t('Camera is paused by your system')
-                : (caption ?? t('Video')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: "secondary", "data-testid": optionsAwareIsMute
+    return (jsx(WithTooltip, { title: isPromptingPermission
+            ? t('common.waitingForPermission.title', 'Waiting for permission')
+            : !hasBrowserPermission
+                ? t('callControls.toggleVideoButton.checkBrowserVideoPermissions.title', 'Check your browser video permissions')
+                : isSystemMuted
+                    ? t('callControls.toggleVideoButton.cameraPausedBySystem.title', 'Camera is paused by your system')
+                    : (caption ??
+                        t('callControls.toggleVideoButton.video.title', 'Video')), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, className: clsx(!hasBrowserPermission && 'str-video__device-unavailable'), variant: optionsAwareIsMute ? 'destructive' : 'secondary', "data-testid": optionsAwareIsMute
                 ? 'preview-video-unmute-button'
                 : 'preview-video-mute-button', onClick: handleClick, disabled: !hasBrowserPermission || (!optimisticUpdates && isTogglePending), Menu: Menu, menuPlacement: menuPlacement, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                 setTooltipDisabled(shown);
                 onMenuToggle?.(shown);
-            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), !hasBrowserPermission && (jsx("span", { className: "str-video__no-media-permission", title: t('Check your browser video permissions'), children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted && hasBrowserPermission && (jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }));
+            }, children: [jsx(Icon, { icon: !optionsAwareIsMute ? 'camera' : 'camera-off' }), isPromptingPermission ? (jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission || isSystemMuted ? (jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }));
 };
 const ToggleVideoPublishingButton = (props) => {
     const { t } = useI18n();
@@ -55,26 +63,27 @@ const ToggleVideoPublishingButton = (props) => {
             await camera.toggle();
         }
     });
-    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(PermissionNotification, { permission: OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('You can now share your video.'), messageAwaitingApproval: t('Awaiting for an approval to share your video.'), messageRevoked: t('You can no longer share your video.'), children: jsx(WithTooltip, { title: !hasPermission
-                    ? t('You have no permission to share your video')
-                    : !hasBrowserPermission
-                        ? t('Check your browser video permissions')
-                        : !isPublishingVideoAllowed
-                            ? t('Video publishing is disabled by the system')
-                            : isSystemMuted
-                                ? t('Camera is paused by your system')
-                                : caption || t('Video'), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: "secondary", disabled: !hasBrowserPermission ||
+    return (jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], children: jsx(PermissionNotification, { permission: OwnCapability.SEND_VIDEO, isAwaitingApproval: isAwaitingPermission, messageApproved: t('callControls.toggleVideoButton.permissionGranted.text', 'You can now share your video.'), messageAwaitingApproval: t('callControls.toggleVideoButton.awaitingApproval.text', 'Awaiting for an approval to share your video.'), messageRevoked: t('callControls.toggleVideoButton.permissionRevoked.text', 'You can no longer share your video.'), children: jsx(WithTooltip, { title: isPromptingPermission
+                    ? t('common.waitingForPermission.title', 'Waiting for permission')
+                    : !hasPermission
+                        ? t('callControls.toggleVideoButton.noPermissionToShareVideo.title', 'You have no permission to share your video')
+                        : !hasBrowserPermission
+                            ? t('callControls.toggleVideoButton.checkBrowserVideoPermissions.title', 'Check your browser video permissions')
+                            : !isPublishingVideoAllowed
+                                ? t('callControls.toggleVideoButton.videoPublishingDisabled.title', 'Video publishing is disabled by the system')
+                                : isSystemMuted
+                                    ? t('callControls.toggleVideoButton.cameraPausedBySystem.title', 'Camera is paused by your system')
+                                    : caption ||
+                                        t('callControls.toggleVideoButton.video.title', 'Video'), tooltipDisabled: tooltipDisabled, children: jsxs(CompositeButton, { active: optionsAwareIsMute, caption: caption, variant: optionsAwareIsMute ? 'destructive' : 'secondary', disabled: !hasBrowserPermission ||
                         !hasPermission ||
                         !isPublishingVideoAllowed ||
                         (!optimisticUpdates && isTogglePending), "data-testid": optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button', onClick: handleClick, Menu: Menu, menuPlacement: menuPlacement, menuOffset: 16, ...restCompositeButtonProps, onMenuToggle: (shown) => {
                         setTooltipDisabled(shown);
                         onMenuToggle?.(shown);
-                    }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), (!hasBrowserPermission ||
+                    }, children: [jsx(Icon, { icon: optionsAwareIsMute ? 'camera-off' : 'camera' }), isPromptingPermission ? (jsx(Badge, { variant: "error", icon: "question-mark-fill" })) : !hasBrowserPermission ||
                             !hasPermission ||
-                            !isPublishingVideoAllowed) && (jsx("span", { className: "str-video__no-media-permission", children: "!" })), isPromptingPermission && (jsx("span", { className: "str-video__pending-permission", title: t('Waiting for permission'), children: "?" })), isSystemMuted &&
-                            hasBrowserPermission &&
-                            hasPermission &&
-                            isPublishingVideoAllowed && (jsx("span", { className: "str-video__system-muted", title: t('Camera is paused by your system'), children: "!" }))] }) }) }) }));
+                            !isPublishingVideoAllowed ||
+                            isSystemMuted ? (jsx(Badge, { variant: "error", icon: "exclamation-mark-fill" })) : null] }) }) }) }));
 };
 
 export { ToggleVideoPreviewButton, ToggleVideoPublishingButton };

package/dist/esm/src/components/CallControls/ToggleVideoButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleVideoButton.js","sources":["../../../../../../../src/components/CallControls/ToggleVideoButton.tsx"],"sourcesContent":["import {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n  UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\nimport {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n  SfuModels,\n} from '@stream-io/video-client';\nimport { CompositeButton, IconButtonWithMenuProps } from '../Button/';\nimport { DeviceSelectorVideo } from '../DeviceSettings';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleVideoPreviewButton = (\n  props: ToggleVideoPreviewButtonProps,\n) => {\n  const {\n    caption,\n    Menu = DeviceSelectorVideo,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n  const { t } = useI18n();\n  const { useCameraState, useLocalParticipant } = useCallStateHooks();\n  const {\n    camera,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n    optionsAwareIsMute,\n  } = useCameraState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.VIDEO,\n  );\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, () => camera.toggle());\n\n  return (\n    <WithTooltip\n      title={\n        !hasBrowserPermission\n          ? t('Check your browser video permissions')\n          : isSystemMuted\n            ? t('Camera is paused by your system')\n            : (caption ?? t('Video'))\n      }\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        active={optionsAwareIsMute}\n        caption={caption}\n        className={clsx(\n          !hasBrowserPermission && 'str-video__device-unavailable',\n        )}\n        variant=\"secondary\"\n        data-testid={\n          optionsAwareIsMute\n            ? 'preview-video-unmute-button'\n            : 'preview-video-mute-button'\n        }\n        onClick={handleClick}\n        disabled={\n          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)\n        }\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        {...restCompositeButtonProps}\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon={!optionsAwareIsMute ? 'camera' : 'camera-off'} />\n        {!hasBrowserPermission && (\n          <span\n            className=\"str-video__no-media-permission\"\n            title={t('Check your browser video permissions')}\n            children=\"!\"\n          />\n        )}\n        {isPromptingPermission && (\n          <span\n            className=\"str-video__pending-permission\"\n            title={t('Waiting for permission')}\n            children=\"?\"\n          />\n        )}\n        {isSystemMuted && hasBrowserPermission && (\n          <span\n            className=\"str-video__system-muted\"\n            title={t('Camera is paused by your system')}\n            children=\"!\"\n          />\n        )}\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n\ntype ToggleVideoPublishingButtonProps = PropsWithErrorHandler<\n  Pick<\n    IconButtonWithMenuProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleVideoPublishingButton = (\n  props: ToggleVideoPublishingButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = <DeviceSelectorVideo visualType=\"list\" />,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_VIDEO);\n\n  const { useCameraState, useCallSettings, useLocalParticipant } =\n    useCallStateHooks();\n  const {\n    camera,\n    optionsAwareIsMute,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n  } = useCameraState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.VIDEO,\n  );\n  const callSettings = useCallSettings();\n  const isPublishingVideoAllowed = callSettings?.video.enabled;\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await camera.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>\n      <PermissionNotification\n        permission={OwnCapability.SEND_VIDEO}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t('You can now share your video.')}\n        messageAwaitingApproval={t(\n          'Awaiting for an approval to share your video.',\n        )}\n        messageRevoked={t('You can no longer share your video.')}\n      >\n        <WithTooltip\n          title={\n            !hasPermission\n              ? t('You have no permission to share your video')\n              : !hasBrowserPermission\n                ? t('Check your browser video permissions')\n                : !isPublishingVideoAllowed\n                  ? t('Video publishing is disabled by the system')\n                  : isSystemMuted\n                    ? t('Camera is paused by your system')\n                    : caption || t('Video')\n          }\n          tooltipDisabled={tooltipDisabled}\n        >\n          <CompositeButton\n            active={optionsAwareIsMute}\n            caption={caption}\n            variant=\"secondary\"\n            disabled={\n              !hasBrowserPermission ||\n              !hasPermission ||\n              !isPublishingVideoAllowed ||\n              (!optimisticUpdates && isTogglePending)\n            }\n            data-testid={\n              optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button'\n            }\n            onClick={handleClick}\n            Menu={Menu}\n            menuPlacement={menuPlacement}\n            menuOffset={16}\n            {...restCompositeButtonProps}\n            onMenuToggle={(shown) => {\n              setTooltipDisabled(shown);\n              onMenuToggle?.(shown);\n            }}\n          >\n            <Icon icon={optionsAwareIsMute ? 'camera-off' : 'camera'} />\n            {(!hasBrowserPermission ||\n              !hasPermission ||\n              !isPublishingVideoAllowed) && (\n              <span className=\"str-video__no-media-permission\">!</span>\n            )}\n            {isPromptingPermission && (\n              <span\n                className=\"str-video__pending-permission\"\n                title={t('Waiting for permission')}\n              >\n                ?\n              </span>\n            )}\n            {isSystemMuted &&\n              hasBrowserPermission &&\n              hasPermission &&\n              isPublishingVideoAllowed && (\n                <span\n                  className=\"str-video__system-muted\"\n                  title={t('Camera is paused by your system')}\n                >\n                  !\n                </span>\n              )}\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ToggleVideoButton.js","sources":["../../../../../../../src/components/CallControls/ToggleVideoButton.tsx"],"sourcesContent":["import {\n  Restricted,\n  useCallStateHooks,\n  UseInputMediaDeviceOptions,\n} from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\nimport clsx from 'clsx';\nimport {\n  OwnCapability,\n  RequestPermissionRequestPermissionsEnum,\n  SfuModels,\n} from '@stream-io/video-client';\nimport { Badge } from '../Badge';\nimport { CompositeButton, CompositeButtonProps } from '../Button/';\nimport { DeviceSelectorVideo } from '../DeviceSettings';\nimport { PermissionNotification } from '../Notification';\nimport { useRequestPermission } from '../../hooks';\nimport { Icon } from '../Icon';\nimport { WithTooltip } from '../Tooltip';\nimport { useState } from 'react';\nimport {\n  createCallControlHandler,\n  PropsWithErrorHandler,\n} from '../../utilities/callControlHandler';\n\nexport type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<\n  Pick<\n    CompositeButtonProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleVideoPreviewButton = (\n  props: ToggleVideoPreviewButtonProps,\n) => {\n  const {\n    caption,\n    Menu = DeviceSelectorVideo,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n  const { t } = useI18n();\n  const { useCameraState, useLocalParticipant } = useCallStateHooks();\n  const {\n    camera,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n    optionsAwareIsMute,\n  } = useCameraState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.VIDEO,\n  );\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, () => camera.toggle());\n\n  return (\n    <WithTooltip\n      title={\n        isPromptingPermission\n          ? t('common.waitingForPermission.title', 'Waiting for permission')\n          : !hasBrowserPermission\n            ? t(\n                'callControls.toggleVideoButton.checkBrowserVideoPermissions.title',\n                'Check your browser video permissions',\n              )\n            : isSystemMuted\n              ? t(\n                  'callControls.toggleVideoButton.cameraPausedBySystem.title',\n                  'Camera is paused by your system',\n                )\n              : (caption ??\n                t('callControls.toggleVideoButton.video.title', 'Video'))\n      }\n      tooltipDisabled={tooltipDisabled}\n    >\n      <CompositeButton\n        active={optionsAwareIsMute}\n        caption={caption}\n        className={clsx(\n          !hasBrowserPermission && 'str-video__device-unavailable',\n        )}\n        variant={optionsAwareIsMute ? 'destructive' : 'secondary'}\n        data-testid={\n          optionsAwareIsMute\n            ? 'preview-video-unmute-button'\n            : 'preview-video-mute-button'\n        }\n        onClick={handleClick}\n        disabled={\n          !hasBrowserPermission || (!optimisticUpdates && isTogglePending)\n        }\n        Menu={Menu}\n        menuPlacement={menuPlacement}\n        {...restCompositeButtonProps}\n        onMenuToggle={(shown) => {\n          setTooltipDisabled(shown);\n          onMenuToggle?.(shown);\n        }}\n      >\n        <Icon icon={!optionsAwareIsMute ? 'camera' : 'camera-off'} />\n        {isPromptingPermission ? (\n          <Badge variant=\"error\" icon=\"question-mark-fill\" />\n        ) : !hasBrowserPermission || isSystemMuted ? (\n          <Badge variant=\"error\" icon=\"exclamation-mark-fill\" />\n        ) : null}\n      </CompositeButton>\n    </WithTooltip>\n  );\n};\n\ntype ToggleVideoPublishingButtonProps = PropsWithErrorHandler<\n  Pick<\n    CompositeButtonProps,\n    'caption' | 'Menu' | 'menuPlacement' | 'onMenuToggle'\n  > &\n    UseInputMediaDeviceOptions\n>;\n\nexport const ToggleVideoPublishingButton = (\n  props: ToggleVideoPublishingButtonProps,\n) => {\n  const { t } = useI18n();\n  const {\n    caption,\n    Menu = <DeviceSelectorVideo visualType=\"list\" />,\n    menuPlacement = 'top',\n    onMenuToggle,\n    optimisticUpdates,\n    ...restCompositeButtonProps\n  } = props;\n\n  const { hasPermission, requestPermission, isAwaitingPermission } =\n    useRequestPermission(RequestPermissionRequestPermissionsEnum.SEND_VIDEO);\n\n  const { useCameraState, useCallSettings, useLocalParticipant } =\n    useCallStateHooks();\n  const {\n    camera,\n    optionsAwareIsMute,\n    hasBrowserPermission,\n    isPromptingPermission,\n    isTogglePending,\n  } = useCameraState({ optimisticUpdates });\n  const localParticipant = useLocalParticipant();\n  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(\n    SfuModels.TrackType.VIDEO,\n  );\n  const callSettings = useCallSettings();\n  const isPublishingVideoAllowed = callSettings?.video.enabled;\n  const [tooltipDisabled, setTooltipDisabled] = useState(false);\n  const handleClick = createCallControlHandler(props, async () => {\n    if (!hasPermission) {\n      await requestPermission();\n    } else {\n      await camera.toggle();\n    }\n  });\n\n  return (\n    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>\n      <PermissionNotification\n        permission={OwnCapability.SEND_VIDEO}\n        isAwaitingApproval={isAwaitingPermission}\n        messageApproved={t(\n          'callControls.toggleVideoButton.permissionGranted.text',\n          'You can now share your video.',\n        )}\n        messageAwaitingApproval={t(\n          'callControls.toggleVideoButton.awaitingApproval.text',\n          'Awaiting for an approval to share your video.',\n        )}\n        messageRevoked={t(\n          'callControls.toggleVideoButton.permissionRevoked.text',\n          'You can no longer share your video.',\n        )}\n      >\n        <WithTooltip\n          title={\n            isPromptingPermission\n              ? t('common.waitingForPermission.title', 'Waiting for permission')\n              : !hasPermission\n                ? t(\n                    'callControls.toggleVideoButton.noPermissionToShareVideo.title',\n                    'You have no permission to share your video',\n                  )\n                : !hasBrowserPermission\n                  ? t(\n                      'callControls.toggleVideoButton.checkBrowserVideoPermissions.title',\n                      'Check your browser video permissions',\n                    )\n                  : !isPublishingVideoAllowed\n                    ? t(\n                        'callControls.toggleVideoButton.videoPublishingDisabled.title',\n                        'Video publishing is disabled by the system',\n                      )\n                    : isSystemMuted\n                      ? t(\n                          'callControls.toggleVideoButton.cameraPausedBySystem.title',\n                          'Camera is paused by your system',\n                        )\n                      : caption ||\n                        t('callControls.toggleVideoButton.video.title', 'Video')\n          }\n          tooltipDisabled={tooltipDisabled}\n        >\n          <CompositeButton\n            active={optionsAwareIsMute}\n            caption={caption}\n            variant={optionsAwareIsMute ? 'destructive' : 'secondary'}\n            disabled={\n              !hasBrowserPermission ||\n              !hasPermission ||\n              !isPublishingVideoAllowed ||\n              (!optimisticUpdates && isTogglePending)\n            }\n            data-testid={\n              optionsAwareIsMute ? 'video-unmute-button' : 'video-mute-button'\n            }\n            onClick={handleClick}\n            Menu={Menu}\n            menuPlacement={menuPlacement}\n            menuOffset={16}\n            {...restCompositeButtonProps}\n            onMenuToggle={(shown) => {\n              setTooltipDisabled(shown);\n              onMenuToggle?.(shown);\n            }}\n          >\n            <Icon icon={optionsAwareIsMute ? 'camera-off' : 'camera'} />\n            {isPromptingPermission ? (\n              <Badge variant=\"error\" icon=\"question-mark-fill\" />\n            ) : !hasBrowserPermission ||\n              !hasPermission ||\n              !isPublishingVideoAllowed ||\n              isSystemMuted ? (\n              <Badge variant=\"error\" icon=\"exclamation-mark-fill\" />\n            ) : null}\n          </CompositeButton>\n        </WithTooltip>\n      </PermissionNotification>\n    </Restricted>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useCall, Restricted } from '@stream-io/video-react-bindings';
 import { OwnCapability } from '@stream-io/video-client';
-import '../Button/CompositeButton.js';
+import { Button } from '../Button/Button.js';
 import '../Button/IconButton.js';
-import { TextButton } from '../Button/TextButton.js';
+import '../Button/CompositeButton.js';
 
 const BlockedUserListing = ({ data }) => {
     if (!data.length)
@@ -16,7 +16,7 @@ const BlockedUserListingItem = ({ userId }) => {
         if (userId)
             call?.unblockUser(userId);
     };
-    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsx(TextButton, { onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
+    return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx("div", { className: "str-video__participant-listing-item__display-name", children: userId }), jsx(Restricted, { requiredGrants: [OwnCapability.BLOCK_USERS], children: jsx(Button, { appearance: "ghost", size: "xs", variant: "secondary", onClick: unblockUserClickHandler, children: "Unblock" }) })] }));
 };
 
 export { BlockedUserListing };

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

@@ -1 +1 @@
-{"version":3,"file":"BlockedUserListing.js","sources":["../../../../../../../src/components/CallParticipantsList/BlockedUserListing.tsx"],"sourcesContent":["import { Restricted, useCall } from '@stream-io/video-react-bindings';\nimport { OwnCapability } from '@stream-io/video-client';\n\nimport { TextButton } from '../Button';\n\nexport const BlockedUserListing = ({ data }: { data: string[] }) => {\n  if (!data.length) return null;\n\n  return (\n    <>\n      <div className=\"str-video__participant-listing\">\n        {data.map((userId) => (\n          <BlockedUserListingItem key={userId} userId={userId} />\n        ))}\n      </div>\n    </>\n  );\n};\n\nconst BlockedUserListingItem = ({ userId }: { userId: string }) => {\n  const call = useCall();\n\n  const unblockUserClickHandler = () => {\n    if (userId) call?.unblockUser(userId);\n  };\n\n  return (\n    <div className=\"str-video__participant-listing-item\">\n      <div className=\"str-video__participant-listing-item__display-name\">\n        {userId}\n      </div>\n      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>\n        <TextButton onClick={unblockUserClickHandler}>Unblock</TextButton>\n      </Restricted>\n    </div>\n  );\n};\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":";;;;;;;MAKa,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAsB,KAAI;IACjE,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,IAAI;AAE7B,IAAA,QACEA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACED,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAC5C,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,MACfA,GAAA,CAAC,sBAAsB,EAAA,EAAc,MAAM,EAAE,MAAM,EAAA,EAAtB,MAAM,CAAoB,CACxD,CAAC,EAAA,CACE,EAAA,CACL;AAEP;AAEA,MAAM,sBAAsB,GAAG,CAAC,EAAE,MAAM,EAAsB,KAAI;AAChE,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IAEtB,MAAM,uBAAuB,GAAG,MAAK;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC;AACvC,IAAA,CAAC;AAED,IAAA,QACEE,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAAA,CAClDF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAC/D,MAAM,EAAA,CACH,EACNA,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,YACrDA,GAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,uBAAuB,EAAA,QAAA,EAAA,SAAA,EAAA,CAAsB,EAAA,CACvD,CAAA,EAAA,CACT;AAEV,CAAC;;;;"}
+{"version":3,"file":"BlockedUserListing.js","sources":["../../../../../../../src/components/CallParticipantsList/BlockedUserListing.tsx"],"sourcesContent":["import { Restricted, useCall } from '@stream-io/video-react-bindings';\nimport { OwnCapability } from '@stream-io/video-client';\n\nimport { Button } from '../Button';\n\nexport const BlockedUserListing = ({ data }: { data: string[] }) => {\n  if (!data.length) return null;\n\n  return (\n    <>\n      <div className=\"str-video__participant-listing\">\n        {data.map((userId) => (\n          <BlockedUserListingItem key={userId} userId={userId} />\n        ))}\n      </div>\n    </>\n  );\n};\n\nconst BlockedUserListingItem = ({ userId }: { userId: string }) => {\n  const call = useCall();\n\n  const unblockUserClickHandler = () => {\n    if (userId) call?.unblockUser(userId);\n  };\n\n  return (\n    <div className=\"str-video__participant-listing-item\">\n      <div className=\"str-video__participant-listing-item__display-name\">\n        {userId}\n      </div>\n      <Restricted requiredGrants={[OwnCapability.BLOCK_USERS]}>\n        <Button\n          appearance=\"ghost\"\n          size=\"xs\"\n          variant=\"secondary\"\n          onClick={unblockUserClickHandler}\n        >\n          Unblock\n        </Button>\n      </Restricted>\n    </div>\n  );\n};\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":";;;;;;;MAKa,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAsB,KAAI;IACjE,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,QAAA,OAAO,IAAI;AAE7B,IAAA,QACEA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACED,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gCAAgC,EAAA,QAAA,EAC5C,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,MACfA,GAAA,CAAC,sBAAsB,EAAA,EAAc,MAAM,EAAE,MAAM,EAAA,EAAtB,MAAM,CAAoB,CACxD,CAAC,EAAA,CACE,EAAA,CACL;AAEP;AAEA,MAAM,sBAAsB,GAAG,CAAC,EAAE,MAAM,EAAsB,KAAI;AAChE,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IAEtB,MAAM,uBAAuB,GAAG,MAAK;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC;AACvC,IAAA,CAAC;IAED,QACEE,cAAK,SAAS,EAAC,qCAAqC,EAAA,QAAA,EAAA,CAClDF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,YAC/D,MAAM,EAAA,CACH,EACNA,GAAA,CAAC,UAAU,IAAC,cAAc,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,EAAA,QAAA,EACrDA,GAAA,CAAC,MAAM,EAAA,EACL,UAAU,EAAC,OAAO,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,uBAAuB,EAAA,QAAA,EAAA,SAAA,EAAA,CAGzB,EAAA,CACE,CAAA,EAAA,CACT;AAEV,CAAC;;;;"}

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

@@ -1,14 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-import '../Button/CompositeButton.js';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../i18n/TranslationContext.js';
+import 'react';
+import '@stream-io/i18n/react';
+import '../Button/Button.js';
 import { IconButton } from '../Button/IconButton.js';
+import '../Button/CompositeButton.js';
 
 const CallParticipantListHeader = ({ onClose, }) => {
     const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();
     const participants = useParticipants();
     const anonymousParticipantCount = useAnonymousParticipantCount();
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__participant-list-header", children: [jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
+    return (jsxs("div", { className: "str-video__participant-list-header", children: [jsxs("div", { className: "str-video__participant-list-header__title", children: [t('common.participants.label', 'Participants'), ' ', jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('participantList.anonymousCount.text', ', and ({{ anonymousCount }}) anonymous', { anonymousCount: anonymousParticipantCount }) }))] }), jsx(IconButton, { size: "sm", variant: "secondary", onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
 export { CallParticipantListHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantListHeader.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantListHeader.tsx"],"sourcesContent":["import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\n\nimport { IconButton } from '../Button';\n\nexport type CallParticipantListHeaderProps = {\n  /**\n   * Click event listener function to be invoked to dismiss / hide the CallParticipantsList from the UI.\n   */\n  onClose: () => void;\n};\n\nexport const CallParticipantListHeader = ({\n  onClose,\n}: CallParticipantListHeaderProps) => {\n  const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();\n  const participants = useParticipants();\n  const anonymousParticipantCount = useAnonymousParticipantCount();\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__participant-list-header\">\n      <div className=\"str-video__participant-list-header__title\">\n        {t('Participants')}{' '}\n        <span className=\"str-video__participant-list-header__title-count\">\n          [{participants.length}]\n        </span>\n        {anonymousParticipantCount > 0 && (\n          <span className=\"str-video__participant-list-header__title-anonymous\">\n            {t('Anonymous', { count: anonymousParticipantCount })}\n          </span>\n        )}\n      </div>\n      <IconButton\n        onClick={onClose}\n        className=\"str-video__participant-list-header__close-button\"\n        icon=\"close\"\n      />\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;MAWa,yBAAyB,GAAG,CAAC,EACxC,OAAO,GACwB,KAAI;IACnC,MAAM,EAAE,eAAe,EAAE,4BAA4B,EAAE,GAAG,iBAAiB,EAAE;AAC7E,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,yBAAyB,GAAG,4BAA4B,EAAE;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,CACjDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACvD,CAAC,CAAC,cAAc,CAAC,EAAE,GAAG,EACvBA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,iDAAiD,kBAC7D,YAAY,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAChB,EACN,yBAAyB,GAAG,CAAC,KAC5BC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAClE,CAAC,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,CAAC,EAAA,CAChD,CACR,CAAA,EAAA,CACG,EACNA,GAAA,CAAC,UAAU,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,kDAAkD,EAC5D,IAAI,EAAC,OAAO,EAAA,CACZ,CAAA,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"CallParticipantListHeader.js","sources":["../../../../../../../src/components/CallParticipantsList/CallParticipantListHeader.tsx"],"sourcesContent":["import { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../i18n';\n\nimport { IconButton } from '../Button';\n\nexport type CallParticipantListHeaderProps = {\n  /**\n   * Click event listener function to be invoked to dismiss / hide the CallParticipantsList from the UI.\n   */\n  onClose: () => void;\n};\n\nexport const CallParticipantListHeader = ({\n  onClose,\n}: CallParticipantListHeaderProps) => {\n  const { useParticipants, useAnonymousParticipantCount } = useCallStateHooks();\n  const participants = useParticipants();\n  const anonymousParticipantCount = useAnonymousParticipantCount();\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__participant-list-header\">\n      <div className=\"str-video__participant-list-header__title\">\n        {t('common.participants.label', 'Participants')}{' '}\n        <span className=\"str-video__participant-list-header__title-count\">\n          [{participants.length}]\n        </span>\n        {anonymousParticipantCount > 0 && (\n          <span className=\"str-video__participant-list-header__title-anonymous\">\n            {t(\n              'participantList.anonymousCount.text',\n              ', and ({{ anonymousCount }}) anonymous',\n              { anonymousCount: anonymousParticipantCount },\n            )}\n          </span>\n        )}\n      </div>\n      <IconButton\n        size=\"sm\"\n        variant=\"secondary\"\n        onClick={onClose}\n        className=\"str-video__participant-list-header__close-button\"\n        icon=\"close\"\n      />\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;MAYa,yBAAyB,GAAG,CAAC,EACxC,OAAO,GACwB,KAAI;IACnC,MAAM,EAAE,eAAe,EAAE,4BAA4B,EAAE,GAAG,iBAAiB,EAAE;AAC7E,IAAA,MAAM,YAAY,GAAG,eAAe,EAAE;AACtC,IAAA,MAAM,yBAAyB,GAAG,4BAA4B,EAAE;AAChE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,aACjDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,aACvD,CAAC,CAAC,2BAA2B,EAAE,cAAc,CAAC,EAAE,GAAG,EACpDA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAAA,GAAA,EAC7D,YAAY,CAAC,MAAM,EAAA,GAAA,CAAA,EAAA,CAChB,EACN,yBAAyB,GAAG,CAAC,KAC5BC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAClE,CAAC,CACA,qCAAqC,EACrC,wCAAwC,EACxC,EAAE,cAAc,EAAE,yBAAyB,EAAE,CAC9C,GACI,CACR,CAAA,EAAA,CACG,EACNA,GAAA,CAAC,UAAU,IACT,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,kDAAkD,EAC5D,IAAI,EAAC,OAAO,EAAA,CACZ,CAAA,EAAA,CACE;AAEV;;;;"}