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

package/dist/esm/src/embedded/livestream/viewer/ViewerLobby.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewerLobby.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerLobby.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\nimport { ViewersCount } from '../../shared';\nimport { OwnCapability } from '@stream-io/video-client';\n\nconst checkCanJoinEarly = (\n  startsAt: Date | undefined,\n  joinAheadTimeSeconds: number | undefined,\n) => {\n  if (!startsAt) return false;\n  const now = Date.now();\n  const earliestJoin = +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;\n  return now >= earliestJoin && now < +startsAt;\n};\n\nexport type ViewerLobbyProps = {\n  onJoin: () => Promise<void>;\n};\n\nexport const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {\n  const { t } = useI18n();\n  const {\n    useCallStartsAt,\n    useCallEndedAt,\n    useHasPermissions,\n    useParticipantCount,\n    useIsCallLive,\n    useCallSettings,\n  } = useCallStateHooks();\n\n  const startsAt = useCallStartsAt();\n  const endedAt = useCallEndedAt();\n  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);\n\n  const participantCount = useParticipantCount();\n  const isLive = useIsCallLive();\n  const settings = useCallSettings();\n  const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;\n\n  const [autoJoin, setAutoJoin] = useState(false);\n  const [startsAtPassed, setStartsAtPassed] = useState(\n    () => !!startsAt && startsAt.getTime() < Date.now(),\n  );\n  const [canJoinEarly, setCanJoinEarly] = useState(() =>\n    checkCanJoinEarly(startsAt, joinAheadTimeSeconds),\n  );\n\n  const canJoin = (isLive || canJoinEarly) && (!endedAt || canJoinEndedCall);\n\n  useEffect(() => {\n    if (canJoin && autoJoin) {\n      onJoin();\n    }\n  }, [canJoin, autoJoin, onJoin]);\n\n  useEffect(() => {\n    if (canJoinEarly) return;\n    const handle = setInterval(() => {\n      setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));\n    }, 1000);\n\n    return () => clearInterval(handle);\n  }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);\n\n  useEffect(() => {\n    if (!startsAt || startsAtPassed) return;\n\n    const check = () => {\n      if (startsAt.getTime() < Date.now()) {\n        setStartsAtPassed(true);\n      }\n    };\n\n    const interval = setInterval(check, 1000);\n    return () => clearInterval(interval);\n  }, [startsAt, startsAtPassed]);\n\n  const getStartsAtMessage = () => {\n    if (!startsAt) return null;\n\n    if (startsAtPassed) {\n      return t('Livestream starts soon');\n    }\n\n    return t('Livestream starts at {{ time }}', {\n      time: startsAt.toLocaleTimeString([], {\n        hour: '2-digit',\n        minute: '2-digit',\n      }),\n    });\n  };\n\n  return (\n    <div className=\"str-video__embedded-viewer-lobby\">\n      <div className=\"str-video__embedded-viewer-lobby__content\">\n        <div className=\"str-video__embedded-viewer-lobby__icon\">\n          <Icon icon=\"streaming\" />\n        </div>\n\n        <h2 className=\"str-video__embedded-viewer-lobby__title\">\n          {canJoin\n            ? t('Stream is ready!')\n            : t('Waiting for the livestream to start')}\n        </h2>\n\n        {!canJoin && getStartsAtMessage() && (\n          <p className=\"str-video__embedded-viewer-lobby__starts-at\">\n            {getStartsAtMessage()}\n          </p>\n        )}\n\n        {participantCount > 0 && <ViewersCount count={participantCount} />}\n\n        <div className=\"str-video__embedded-viewer-lobby__actions\">\n          {canJoin ? (\n            <button className=\"str-video__button\" onClick={onJoin}>\n              {t('Join Stream')}\n            </button>\n          ) : (\n            <label className=\"str-video__embedded-viewer-lobby__auto-join\">\n              <input\n                type=\"checkbox\"\n                checked={autoJoin}\n                onChange={(e) => setAutoJoin(e.target.checked)}\n              />\n              <span>{t('Join automatically when stream starts')}</span>\n            </label>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ViewerLobby.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerLobby.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { Button, Icon } from '../../../components';\nimport { ViewersCount } from '../../shared';\nimport { OwnCapability } from '@stream-io/video-client';\n\nconst checkCanJoinEarly = (\n  startsAt: Date | undefined,\n  joinAheadTimeSeconds: number | undefined,\n) => {\n  if (!startsAt) return false;\n  const now = Date.now();\n  const earliestJoin = +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;\n  return now >= earliestJoin && now < +startsAt;\n};\n\nexport type ViewerLobbyProps = {\n  onJoin: () => Promise<void>;\n};\n\nexport const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {\n  const { t } = useI18n();\n  const {\n    useCallStartsAt,\n    useCallEndedAt,\n    useHasPermissions,\n    useParticipantCount,\n    useIsCallLive,\n    useCallSettings,\n  } = useCallStateHooks();\n\n  const startsAt = useCallStartsAt();\n  const endedAt = useCallEndedAt();\n  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);\n\n  const participantCount = useParticipantCount();\n  const isLive = useIsCallLive();\n  const settings = useCallSettings();\n  const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;\n\n  const [autoJoin, setAutoJoin] = useState(false);\n  const [startsAtPassed, setStartsAtPassed] = useState(\n    () => !!startsAt && startsAt.getTime() < Date.now(),\n  );\n  const [canJoinEarly, setCanJoinEarly] = useState(() =>\n    checkCanJoinEarly(startsAt, joinAheadTimeSeconds),\n  );\n\n  const canJoin = (isLive || canJoinEarly) && (!endedAt || canJoinEndedCall);\n\n  useEffect(() => {\n    if (canJoin && autoJoin) {\n      onJoin();\n    }\n  }, [canJoin, autoJoin, onJoin]);\n\n  useEffect(() => {\n    if (canJoinEarly) return;\n    const handle = setInterval(() => {\n      setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));\n    }, 1000);\n\n    return () => clearInterval(handle);\n  }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);\n\n  useEffect(() => {\n    if (!startsAt || startsAtPassed) return;\n\n    const check = () => {\n      if (startsAt.getTime() < Date.now()) {\n        setStartsAtPassed(true);\n      }\n    };\n\n    const interval = setInterval(check, 1000);\n    return () => clearInterval(interval);\n  }, [startsAt, startsAtPassed]);\n\n  const getStartsAtMessage = () => {\n    if (!startsAt) return null;\n\n    if (startsAtPassed) {\n      return t(\n        'livestream.backstage.startsSoon.text',\n        'Livestream starts soon',\n      );\n    }\n\n    return t(\n      'livestream.backstage.startsAt.text',\n      'Livestream starts at {{ time }}',\n      {\n        time: startsAt.toLocaleTimeString([], {\n          hour: '2-digit',\n          minute: '2-digit',\n        }),\n      },\n    );\n  };\n\n  return (\n    <div className=\"str-video__embedded-viewer-lobby\">\n      <div className=\"str-video__embedded-viewer-lobby__content\">\n        <div className=\"str-video__embedded-viewer-lobby__icon\">\n          <Icon icon=\"streaming\" />\n        </div>\n\n        <h2 className=\"str-video__embedded-viewer-lobby__title\">\n          {canJoin\n            ? t('livestreamViewer.lobby.streamReady.title', 'Stream is ready!')\n            : t(\n                'livestreamViewer.lobby.waitingForStart.title',\n                'Waiting for the livestream to start',\n              )}\n        </h2>\n\n        {!canJoin && getStartsAtMessage() && (\n          <p className=\"str-video__embedded-viewer-lobby__starts-at\">\n            {getStartsAtMessage()}\n          </p>\n        )}\n\n        {participantCount > 0 && <ViewersCount count={participantCount} />}\n\n        <div className=\"str-video__embedded-viewer-lobby__actions\">\n          {canJoin ? (\n            <Button size=\"sm\" onClick={onJoin}>\n              {t('livestreamViewer.lobby.joinStream.label', 'Join Stream')}\n            </Button>\n          ) : (\n            <label className=\"str-video__embedded-viewer-lobby__auto-join\">\n              <input\n                type=\"checkbox\"\n                checked={autoJoin}\n                onChange={(e) => setAutoJoin(e.target.checked)}\n              />\n              <span>\n                {t(\n                  'livestreamViewer.lobby.joinAutomatically.text',\n                  'Join automatically when stream starts',\n                )}\n              </span>\n            </label>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/embedded/livestream/viewer/ViewerStateRouter.js

@@ -6,22 +6,24 @@ import { ViewerLobby } from './ViewerLobby.js';
 import { ViewerLayout } from './ViewerLayout.js';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '../../../components/CallControls/RecordCallButton.js';
 import '../../../components/CallControls/ReactionsButton.js';
 import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
 import { LoadingIndicator } from '../../../components/LoadingIndicator/LoadingIndicator.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -32,6 +34,7 @@ import '../../../core/components/Audio/ParticipantsAudio.js';
 import '../../../core/components/ParticipantView/ParticipantViewContext.js';
 import '../../../core/components/ParticipantView/ParticipantView.js';
 import '../../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../../core/components/ParticipantView/ConnectionQualityIndicator.js';
 import '../../../core/components/StreamCall/StreamCall.js';
 import '../../../core/components/StreamVideo/StreamVideo.js';
 import '../../../core/components/CallLayout/LivestreamLayout.js';

package/dist/esm/src/embedded/livestream/viewer/ViewerStateRouter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewerStateRouter.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerStateRouter.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { CallingState, OwnCapability } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { ViewerLobby } from './ViewerLobby';\nimport { ViewerLayout } from './ViewerLayout';\nimport { LoadingIndicator } from '../../../components';\nimport { CallFeedback, JoinError } from '../../shared';\nimport { useEmbeddedConfiguration } from '../../context';\nimport { useIsLivestreamPaused } from '../../hooks';\n\nexport const ViewerStateRouter = () => {\n  const call = useCall();\n  const { onError } = useEmbeddedConfiguration();\n\n  const {\n    useCallCallingState,\n    useCallEndedAt,\n    useHasPermissions,\n    useLocalParticipant,\n  } = useCallStateHooks();\n  const callingState = useCallCallingState();\n  const localParticipant = useLocalParticipant();\n  const endedAt = useCallEndedAt();\n  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);\n\n  const isLivestreamPaused = useIsLivestreamPaused();\n  const [joinError, setJoinError] = useState(false);\n  const handleJoin = useCallback(async () => {\n    if (!call) return;\n\n    setJoinError(false);\n    try {\n      if (call.state.callingState !== CallingState.JOINED) {\n        await call.join();\n      }\n    } catch (e) {\n      onError?.(e);\n      setJoinError(true);\n    }\n  }, [call, onError]);\n\n  useEffect(() => {\n    if (!call || callingState !== CallingState.LEFT) return;\n\n    return call.on('call.live_started', () => {\n      call.get().catch((e) => {\n        onError?.(e);\n      });\n    });\n  }, [call, callingState, onError]);\n\n  if (joinError) {\n    return <JoinError onJoin={handleJoin} />;\n  }\n\n  switch (callingState) {\n    case CallingState.IDLE:\n    case CallingState.UNKNOWN:\n      return <ViewerLobby onJoin={handleJoin} />;\n\n    case CallingState.JOINING:\n      if (!localParticipant) {\n        return <LoadingIndicator className=\"str-video__embedded-loading\" />;\n      }\n      break;\n\n    case CallingState.LEFT: {\n      if (isLivestreamPaused) {\n        return <ViewerLobby onJoin={handleJoin} />;\n      }\n\n      return (\n        <CallFeedback\n          onJoin={!endedAt || canJoinEndedCall ? handleJoin : undefined}\n        />\n      );\n    }\n  }\n\n  return <ViewerLayout />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,iBAAiB,GAAG,MAAK;AACpC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;AAE9C,IAAA,MAAM,EACJ,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,mBAAmB,GACpB,GAAG,iBAAiB,EAAE;AACvB,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAC1C,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;IAChC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC;AAEzE,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,EAAE;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,YAAW;AACxC,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,IAAI;YACF,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,YAAY,CAAC,MAAM,EAAE;AACnD,gBAAA,MAAM,IAAI,CAAC,IAAI,EAAE;YACnB;QACF;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,GAAG,CAAC,CAAC;YACZ,YAAY,CAAC,IAAI,CAAC;QACpB;AACF,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEnB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,YAAY,KAAK,YAAY,CAAC,IAAI;YAAE;AAEjD,QAAA,OAAO,IAAI,CAAC,EAAE,CAAC,mBAAmB,EAAE,MAAK;YACvC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAI;AACrB,gBAAA,OAAO,GAAG,CAAC,CAAC;AACd,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IAEjC,IAAI,SAAS,EAAE;AACb,QAAA,OAAOA,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC1C;IAEA,QAAQ,YAAY;QAClB,KAAK,YAAY,CAAC,IAAI;QACtB,KAAK,YAAY,CAAC,OAAO;AACvB,YAAA,OAAOA,IAAC,WAAW,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;QAE5C,KAAK,YAAY,CAAC,OAAO;YACvB,IAAI,CAAC,gBAAgB,EAAE;AACrB,gBAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,6BAA6B,GAAG;YACrE;YACA;AAEF,QAAA,KAAK,YAAY,CAAC,IAAI,EAAE;YACtB,IAAI,kBAAkB,EAAE;AACtB,gBAAA,OAAOA,IAAC,WAAW,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;YAC5C;YAEA,QACEA,IAAC,YAAY,EAAA,EACX,MAAM,EAAE,CAAC,OAAO,IAAI,gBAAgB,GAAG,UAAU,GAAG,SAAS,EAAA,CAC7D;QAEN;;IAGF,OAAOA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG;AACzB;;;;"}
+{"version":3,"file":"ViewerStateRouter.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerStateRouter.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { CallingState, OwnCapability } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { ViewerLobby } from './ViewerLobby';\nimport { ViewerLayout } from './ViewerLayout';\nimport { LoadingIndicator } from '../../../components';\nimport { CallFeedback, JoinError } from '../../shared';\nimport { useEmbeddedConfiguration } from '../../context';\nimport { useIsLivestreamPaused } from '../../hooks';\n\nexport const ViewerStateRouter = () => {\n  const call = useCall();\n  const { onError } = useEmbeddedConfiguration();\n\n  const {\n    useCallCallingState,\n    useCallEndedAt,\n    useHasPermissions,\n    useLocalParticipant,\n  } = useCallStateHooks();\n  const callingState = useCallCallingState();\n  const localParticipant = useLocalParticipant();\n  const endedAt = useCallEndedAt();\n  const canJoinEndedCall = useHasPermissions(OwnCapability.JOIN_ENDED_CALL);\n\n  const isLivestreamPaused = useIsLivestreamPaused();\n  const [joinError, setJoinError] = useState(false);\n  const handleJoin = useCallback(async () => {\n    if (!call) return;\n\n    setJoinError(false);\n    try {\n      if (call.state.callingState !== CallingState.JOINED) {\n        await call.join();\n      }\n    } catch (e) {\n      onError?.(e);\n      setJoinError(true);\n    }\n  }, [call, onError]);\n\n  useEffect(() => {\n    if (!call || callingState !== CallingState.LEFT) return;\n\n    return call.on('call.live_started', () => {\n      call.get().catch((e) => {\n        onError?.(e);\n      });\n    });\n  }, [call, callingState, onError]);\n\n  if (joinError) {\n    return <JoinError onJoin={handleJoin} />;\n  }\n\n  switch (callingState) {\n    case CallingState.IDLE:\n    case CallingState.UNKNOWN:\n      return <ViewerLobby onJoin={handleJoin} />;\n\n    case CallingState.JOINING:\n      if (!localParticipant) {\n        return <LoadingIndicator className=\"str-video__embedded-loading\" />;\n      }\n      break;\n\n    case CallingState.LEFT: {\n      if (isLivestreamPaused) {\n        return <ViewerLobby onJoin={handleJoin} />;\n      }\n\n      return (\n        <CallFeedback\n          onJoin={!endedAt || canJoinEndedCall ? handleJoin : undefined}\n        />\n      );\n    }\n  }\n\n  return <ViewerLayout />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAM,iBAAiB,GAAG,MAAK;AACpC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;AAE9C,IAAA,MAAM,EACJ,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,mBAAmB,GACpB,GAAG,iBAAiB,EAAE;AACvB,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAC1C,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;IAChC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,aAAa,CAAC,eAAe,CAAC;AAEzE,IAAA,MAAM,kBAAkB,GAAG,qBAAqB,EAAE;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,YAAW;AACxC,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,IAAI;YACF,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,KAAK,YAAY,CAAC,MAAM,EAAE;AACnD,gBAAA,MAAM,IAAI,CAAC,IAAI,EAAE;YACnB;QACF;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,GAAG,CAAC,CAAC;YACZ,YAAY,CAAC,IAAI,CAAC;QACpB;AACF,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEnB,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,YAAY,KAAK,YAAY,CAAC,IAAI;YAAE;AAEjD,QAAA,OAAO,IAAI,CAAC,EAAE,CAAC,mBAAmB,EAAE,MAAK;YACvC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,KAAI;AACrB,gBAAA,OAAO,GAAG,CAAC,CAAC;AACd,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IAEjC,IAAI,SAAS,EAAE;AACb,QAAA,OAAOA,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC1C;IAEA,QAAQ,YAAY;QAClB,KAAK,YAAY,CAAC,IAAI;QACtB,KAAK,YAAY,CAAC,OAAO;AACvB,YAAA,OAAOA,IAAC,WAAW,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;QAE5C,KAAK,YAAY,CAAC,OAAO;YACvB,IAAI,CAAC,gBAAgB,EAAE;AACrB,gBAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,6BAA6B,GAAG;YACrE;YACA;AAEF,QAAA,KAAK,YAAY,CAAC,IAAI,EAAE;YACtB,IAAI,kBAAkB,EAAE;AACtB,gBAAA,OAAOA,IAAC,WAAW,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;YAC5C;YAEA,QACEA,IAAC,YAAY,EAAA,EACX,MAAM,EAAE,CAAC,OAAO,IAAI,gBAAgB,GAAG,UAAU,GAAG,SAAS,EAAA,CAC7D;QAEN;;IAGF,OAAOA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG;AACzB;;;;"}

package/dist/esm/src/embedded/shared/BlurToggleButton/BlurToggleButton.js

@@ -1,10 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import clsx from 'clsx';
-import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
+import 'clsx';
 import { useBackgroundFilters } from '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import { Button } from '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -15,12 +20,9 @@ import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import { DeviceSelectorVideo } from '../../../components/DeviceSettings/DeviceSelectorVideo.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -50,12 +52,14 @@ const BlurToggleButton = () => {
     ]);
     const getLabel = () => {
         if (isLoading)
-            return t('Applying...');
-        return isBlurred ? t('Disable blur') : t('Blur background');
+            return t('callControls.blurToggleButton.applying.label', 'Applying...');
+        return isBlurred
+            ? t('callControls.blurToggleButton.disableBlur.label', 'Disable blur')
+            : t('callControls.blurToggleButton.blurBackground.label', 'Blur background');
     };
     if (!isSupported)
         return null;
-    return (jsxs("button", { type: "button", className: clsx('str-video__embedded-blur-toggle', isBlurred && 'str-video__embedded-blur-toggle--active'), disabled: isDisabled, "aria-pressed": isBlurred, onClick: handleClick, children: [jsx(Icon, { icon: "blur-icon" }), jsx("span", { children: getLabel() })] }));
+    return (jsxs(Button, { variant: "secondary", appearance: "outline", size: "sm", className: "str-video__embedded-blur-toggle", disabled: isDisabled, active: isBlurred, onClick: handleClick, children: [jsx(Icon, { icon: "blur-icon" }), jsx("span", { children: getLabel() })] }));
 };
 const CameraMenuWithBlur = () => {
     return (jsxs(Fragment, { children: [jsx(DeviceSelectorVideo, { visualType: "list" }), jsx("div", { className: "str-video__embedded-blur-toggle-container", children: jsx(BlurToggleButton, {}) })] }));

package/dist/esm/src/embedded/shared/BlurToggleButton/BlurToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlurToggleButton.js","sources":["../../../../../../../../src/embedded/shared/BlurToggleButton/BlurToggleButton.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport {\n  DeviceSelectorVideo,\n  Icon,\n  useBackgroundFilters,\n} from '../../../components';\n\nexport const BlurToggleButton = () => {\n  const { t } = useI18n();\n  const { useCameraState } = useCallStateHooks();\n  const { isMute } = useCameraState();\n\n  const {\n    isSupported,\n    isReady,\n    isLoading,\n    backgroundFilter,\n    applyBackgroundBlurFilter,\n    disableBackgroundFilter,\n  } = useBackgroundFilters();\n\n  const isBlurred = backgroundFilter === 'blur';\n  const isDisabled = !isReady || isLoading || isMute;\n\n  const handleClick = useCallback(() => {\n    if (isDisabled) return;\n\n    if (isBlurred) {\n      disableBackgroundFilter();\n    } else {\n      applyBackgroundBlurFilter('high');\n    }\n  }, [\n    applyBackgroundBlurFilter,\n    disableBackgroundFilter,\n    isBlurred,\n    isDisabled,\n  ]);\n\n  const getLabel = () => {\n    if (isLoading) return t('Applying...');\n    return isBlurred ? t('Disable blur') : t('Blur background');\n  };\n\n  if (!isSupported) return null;\n\n  return (\n    <button\n      type=\"button\"\n      className={clsx(\n        'str-video__embedded-blur-toggle',\n        isBlurred && 'str-video__embedded-blur-toggle--active',\n      )}\n      disabled={isDisabled}\n      aria-pressed={isBlurred}\n      onClick={handleClick}\n    >\n      <Icon icon=\"blur-icon\" />\n      <span>{getLabel()}</span>\n    </button>\n  );\n};\n\nexport const CameraMenuWithBlur = () => {\n  return (\n    <>\n      <DeviceSelectorVideo visualType=\"list\" />\n      <div className=\"str-video__embedded-blur-toggle-container\">\n        <BlurToggleButton />\n      </div>\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AAEnC,IAAA,MAAM,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,GACxB,GAAG,oBAAoB,EAAE;AAE1B,IAAA,MAAM,SAAS,GAAG,gBAAgB,KAAK,MAAM;IAC7C,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,SAAS,IAAI,MAAM;AAElD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,IAAI,UAAU;YAAE;QAEhB,IAAI,SAAS,EAAE;AACb,YAAA,uBAAuB,EAAE;QAC3B;aAAO;YACL,yBAAyB,CAAC,MAAM,CAAC;QACnC;AACF,IAAA,CAAC,EAAE;QACD,yBAAyB;QACzB,uBAAuB;QACvB,SAAS;QACT,UAAU;AACX,KAAA,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAK;AACpB,QAAA,IAAI,SAAS;AAAE,YAAA,OAAO,CAAC,CAAC,aAAa,CAAC;AACtC,QAAA,OAAO,SAAS,GAAG,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,iBAAiB,CAAC;AAC7D,IAAA,CAAC;AAED,IAAA,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;AAE7B,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,iCAAiC,EACjC,SAAS,IAAI,yCAAyC,CACvD,EACD,QAAQ,EAAE,UAAU,EAAA,cAAA,EACN,SAAS,EACvB,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CAEpBC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,EAAA,CAAG,EACzBA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,QAAQ,EAAE,EAAA,CAAQ,CAAA,EAAA,CAClB;AAEb;AAEO,MAAM,kBAAkB,GAAG,MAAK;IACrC,QACED,4BACEC,GAAA,CAAC,mBAAmB,IAAC,UAAU,EAAC,MAAM,EAAA,CAAG,EACzCA,aAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EACxDA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAAA,CAChB,CAAA,EAAA,CACL;AAEP;;;;"}
+{"version":3,"file":"BlurToggleButton.js","sources":["../../../../../../../../src/embedded/shared/BlurToggleButton/BlurToggleButton.tsx"],"sourcesContent":["import { useCallback } from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport {\n  Button,\n  DeviceSelectorVideo,\n  Icon,\n  useBackgroundFilters,\n} from '../../../components';\n\nexport const BlurToggleButton = () => {\n  const { t } = useI18n();\n  const { useCameraState } = useCallStateHooks();\n  const { isMute } = useCameraState();\n\n  const {\n    isSupported,\n    isReady,\n    isLoading,\n    backgroundFilter,\n    applyBackgroundBlurFilter,\n    disableBackgroundFilter,\n  } = useBackgroundFilters();\n\n  const isBlurred = backgroundFilter === 'blur';\n  const isDisabled = !isReady || isLoading || isMute;\n\n  const handleClick = useCallback(() => {\n    if (isDisabled) return;\n\n    if (isBlurred) {\n      disableBackgroundFilter();\n    } else {\n      applyBackgroundBlurFilter('high');\n    }\n  }, [\n    applyBackgroundBlurFilter,\n    disableBackgroundFilter,\n    isBlurred,\n    isDisabled,\n  ]);\n\n  const getLabel = () => {\n    if (isLoading)\n      return t('callControls.blurToggleButton.applying.label', 'Applying...');\n    return isBlurred\n      ? t('callControls.blurToggleButton.disableBlur.label', 'Disable blur')\n      : t(\n          'callControls.blurToggleButton.blurBackground.label',\n          'Blur background',\n        );\n  };\n\n  if (!isSupported) return null;\n\n  return (\n    <Button\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      className=\"str-video__embedded-blur-toggle\"\n      disabled={isDisabled}\n      active={isBlurred}\n      onClick={handleClick}\n    >\n      <Icon icon=\"blur-icon\" />\n      <span>{getLabel()}</span>\n    </Button>\n  );\n};\n\nexport const CameraMenuWithBlur = () => {\n  return (\n    <>\n      <DeviceSelectorVideo visualType=\"list\" />\n      <div className=\"str-video__embedded-blur-toggle-container\">\n        <BlurToggleButton />\n      </div>\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,gBAAgB,GAAG,MAAK;AACnC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE;AAEnC,IAAA,MAAM,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,GACxB,GAAG,oBAAoB,EAAE;AAE1B,IAAA,MAAM,SAAS,GAAG,gBAAgB,KAAK,MAAM;IAC7C,MAAM,UAAU,GAAG,CAAC,OAAO,IAAI,SAAS,IAAI,MAAM;AAElD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,IAAI,UAAU;YAAE;QAEhB,IAAI,SAAS,EAAE;AACb,YAAA,uBAAuB,EAAE;QAC3B;aAAO;YACL,yBAAyB,CAAC,MAAM,CAAC;QACnC;AACF,IAAA,CAAC,EAAE;QACD,yBAAyB;QACzB,uBAAuB;QACvB,SAAS;QACT,UAAU;AACX,KAAA,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAK;AACpB,QAAA,IAAI,SAAS;AACX,YAAA,OAAO,CAAC,CAAC,8CAA8C,EAAE,aAAa,CAAC;AACzE,QAAA,OAAO;AACL,cAAE,CAAC,CAAC,iDAAiD,EAAE,cAAc;AACrE,cAAE,CAAC,CACC,oDAAoD,EACpD,iBAAiB,CAClB;AACP,IAAA,CAAC;AAED,IAAA,IAAI,CAAC,WAAW;AAAE,QAAA,OAAO,IAAI;IAE7B,QACEA,KAAC,MAAM,EAAA,EACL,OAAO,EAAC,WAAW,EACnB,UAAU,EAAC,SAAS,EACpB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,iCAAiC,EAC3C,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,WAAW,EAAA,QAAA,EAAA,CAEpBC,IAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,GAAG,EACzBA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,QAAQ,EAAE,EAAA,CAAQ,CAAA,EAAA,CAClB;AAEb;AAEO,MAAM,kBAAkB,GAAG,MAAK;IACrC,QACED,4BACEC,GAAA,CAAC,mBAAmB,IAAC,UAAU,EAAC,MAAM,EAAA,CAAG,EACzCA,aAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EACxDA,GAAA,CAAC,gBAAgB,EAAA,EAAA,CAAG,EAAA,CAChB,CAAA,EAAA,CACL;AAEP;;;;"}

package/dist/esm/src/embedded/shared/CallDuration/CallDuration.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
+import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '@stream-io/i18n';
+import '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const CallDuration = ({ elapsed }) => {
+    if (!elapsed)
+        return null;
+    const secondsAt = elapsed.lastIndexOf(':') + 1;
+    const leading = elapsed.slice(0, secondsAt);
+    const seconds = elapsed.slice(secondsAt);
+    return (jsxs("div", { className: "str-video__embedded-call-duration", children: [jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsxs("span", { className: "str-video__embedded-call-duration__time", children: [jsx("span", { className: "str-video__embedded-call-duration__time-leading", children: leading }), seconds] })] }));
+};
+
+export { CallDuration };
+//# sourceMappingURL=CallDuration.js.map

package/dist/esm/src/embedded/shared/CallDuration/CallDuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallDuration.js","sources":["../../../../../../../../src/embedded/shared/CallDuration/CallDuration.tsx"],"sourcesContent":["import { Icon } from '../../../components';\n\ninterface CallDurationProps {\n  /**\n   * A formatted duration as produced by `useCallDuration`: `MM:SS`, or\n   * `HH:MM:SS` past the hour. Everything up to the last `:` is dimmed.\n   */\n  elapsed: string;\n}\n\nexport const CallDuration = ({ elapsed }: CallDurationProps) => {\n  if (!elapsed) return null;\n\n  const secondsAt = elapsed.lastIndexOf(':') + 1;\n  const leading = elapsed.slice(0, secondsAt);\n  const seconds = elapsed.slice(secondsAt);\n\n  return (\n    <div className=\"str-video__embedded-call-duration\">\n      <Icon\n        icon=\"verified\"\n        className=\"str-video__embedded-call-duration__icon\"\n      />\n      <span className=\"str-video__embedded-call-duration__time\">\n        <span className=\"str-video__embedded-call-duration__time-leading\">\n          {leading}\n        </span>\n        {seconds}\n      </span>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUa,YAAY,GAAG,CAAC,EAAE,OAAO,EAAqB,KAAI;AAC7D,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;IAEzB,MAAM,SAAS,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC;IAC9C,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC;IAC3C,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;AAExC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,yCAAyC,EAAA,CACnD,EACFD,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACvDC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC9D,OAAO,GACH,EACN,OAAO,CAAA,EAAA,CACH,CAAA,EAAA,CACH;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/CallEndedScreen.js

@@ -1,10 +1,15 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
 import 'react';
+import '@stream-io/i18n/react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import { Button } from '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
+import '@stream-io/video-react-bindings';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -27,7 +29,7 @@ import '../../../core/components/Video/DefaultVideoPlaceholder.js';
 
 const CallEndedScreen = ({ onJoin, onFeedback, }) => {
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Call ended') }), jsxs("div", { className: "str-video__embedded-call-feedback__ended-actions", children: [onJoin && (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Left by mistake?') }), jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), t('Rejoin call')] })] }), jsx("div", { className: "str-video__embedded-call-feedback__ended-divider" })] })), jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('Help us improve') }), jsxs("button", { type: "button", className: "str-video__embedded-call-feedback__ended-button", onClick: onFeedback, children: [jsx(Icon, { icon: "feedback" }), t('Leave feedback')] })] })] })] }));
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('callFeedback.callEndedScreen.callEnded.title', 'Call ended') }), jsxs("div", { className: "str-video__embedded-call-feedback__ended-actions", children: [onJoin && (jsxs(Fragment, { children: [jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('callFeedback.callEndedScreen.leftByMistake.text', 'Left by mistake?') }), jsxs(Button, { variant: "secondary", appearance: "outline", className: "str-video__embedded-call-feedback__ended-button", onClick: onJoin, children: [jsx(Icon, { icon: "login" }), t('callFeedback.callEndedScreen.rejoinCall.label', 'Rejoin call')] })] }), jsx("div", { className: "str-video__embedded-call-feedback__ended-divider" })] })), jsxs("div", { className: "str-video__embedded-call-feedback__ended-column", children: [jsx("p", { className: "str-video__embedded-call-feedback__ended-label", children: t('callFeedback.callEndedScreen.helpUsImprove.text', 'Help us improve') }), jsxs(Button, { variant: "secondary", appearance: "outline", className: "str-video__embedded-call-feedback__ended-button", onClick: onFeedback, children: [jsx(Icon, { icon: "feedback" }), t('callFeedback.callEndedScreen.leaveFeedback.label', 'Leave feedback')] })] })] })] }));
 };
 
 export { CallEndedScreen };

package/dist/esm/src/embedded/shared/CallFeedback/CallEndedScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallEndedScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/CallEndedScreen.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\ninterface CallEndedScreenProps {\n  onJoin?: () => void;\n  onFeedback: () => void;\n}\n\nexport const CallEndedScreen = ({\n  onJoin,\n  onFeedback,\n}: CallEndedScreenProps) => {\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Call ended')}\n      </h2>\n      <div className=\"str-video__embedded-call-feedback__ended-actions\">\n        {onJoin && (\n          <>\n            <div className=\"str-video__embedded-call-feedback__ended-column\">\n              <p className=\"str-video__embedded-call-feedback__ended-label\">\n                {t('Left by mistake?')}\n              </p>\n              <button\n                type=\"button\"\n                className=\"str-video__embedded-call-feedback__ended-button\"\n                onClick={onJoin}\n              >\n                <Icon icon=\"login\" />\n                {t('Rejoin call')}\n              </button>\n            </div>\n            <div className=\"str-video__embedded-call-feedback__ended-divider\" />\n          </>\n        )}\n        <div className=\"str-video__embedded-call-feedback__ended-column\">\n          <p className=\"str-video__embedded-call-feedback__ended-label\">\n            {t('Help us improve')}\n          </p>\n          <button\n            type=\"button\"\n            className=\"str-video__embedded-call-feedback__ended-button\"\n            onClick={onFeedback}\n          >\n            <Icon icon=\"feedback\" />\n            {t('Leave feedback')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,eAAe,GAAG,CAAC,EAC9B,MAAM,EACN,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CAAC,YAAY,CAAC,EAAA,CACb,EACLD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC9D,MAAM,KACLA,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC9DC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC1D,CAAC,CAAC,kBAAkB,CAAC,EAAA,CACpB,EACJD,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CAEfC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EACpB,CAAC,CAAC,aAAa,CAAC,CAAA,EAAA,CACV,CAAA,EAAA,CACL,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,CAAG,CAAA,EAAA,CACnE,CACJ,EACDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC9DC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC1D,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACnB,EACJD,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,UAAU,EAAA,QAAA,EAAA,CAEnBC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,UAAU,EAAA,CAAG,EACvB,CAAC,CAAC,gBAAgB,CAAC,CAAA,EAAA,CACb,CAAA,EAAA,CACL,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"CallEndedScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/CallEndedScreen.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { Button, Icon } from '../../../components';\n\ninterface CallEndedScreenProps {\n  onJoin?: () => void;\n  onFeedback: () => void;\n}\n\nexport const CallEndedScreen = ({\n  onJoin,\n  onFeedback,\n}: CallEndedScreenProps) => {\n  const { t } = useI18n();\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('callFeedback.callEndedScreen.callEnded.title', 'Call ended')}\n      </h2>\n      <div className=\"str-video__embedded-call-feedback__ended-actions\">\n        {onJoin && (\n          <>\n            <div className=\"str-video__embedded-call-feedback__ended-column\">\n              <p className=\"str-video__embedded-call-feedback__ended-label\">\n                {t(\n                  'callFeedback.callEndedScreen.leftByMistake.text',\n                  'Left by mistake?',\n                )}\n              </p>\n              <Button\n                variant=\"secondary\"\n                appearance=\"outline\"\n                className=\"str-video__embedded-call-feedback__ended-button\"\n                onClick={onJoin}\n              >\n                <Icon icon=\"login\" />\n                {t(\n                  'callFeedback.callEndedScreen.rejoinCall.label',\n                  'Rejoin call',\n                )}\n              </Button>\n            </div>\n            <div className=\"str-video__embedded-call-feedback__ended-divider\" />\n          </>\n        )}\n        <div className=\"str-video__embedded-call-feedback__ended-column\">\n          <p className=\"str-video__embedded-call-feedback__ended-label\">\n            {t(\n              'callFeedback.callEndedScreen.helpUsImprove.text',\n              'Help us improve',\n            )}\n          </p>\n          <Button\n            variant=\"secondary\"\n            appearance=\"outline\"\n            className=\"str-video__embedded-call-feedback__ended-button\"\n            onClick={onFeedback}\n          >\n            <Icon icon=\"feedback\" />\n            {t(\n              'callFeedback.callEndedScreen.leaveFeedback.label',\n              'Leave feedback',\n            )}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,eAAe,GAAG,CAAC,EAC9B,MAAM,EACN,UAAU,GACW,KAAI;AACzB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CAAC,8CAA8C,EAAE,YAAY,CAAC,EAAA,CAC7D,EACLD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC9D,MAAM,KACLA,4BACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,aAC9DC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC1D,CAAC,CACA,iDAAiD,EACjD,kBAAkB,CACnB,EAAA,CACC,EACJD,KAAC,MAAM,EAAA,EACL,OAAO,EAAC,WAAW,EACnB,UAAU,EAAC,SAAS,EACpB,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,CAEfC,IAAC,IAAI,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA,CAAG,EACpB,CAAC,CACA,+CAA+C,EAC/C,aAAa,CACd,IACM,CAAA,EAAA,CACL,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,CAAG,CAAA,EAAA,CACnE,CACJ,EACDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAC9DC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC1D,CAAC,CACA,iDAAiD,EACjD,iBAAiB,CAClB,EAAA,CACC,EACJD,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,WAAW,EACnB,UAAU,EAAC,SAAS,EACpB,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,UAAU,aAEnBC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,UAAU,EAAA,CAAG,EACvB,CAAC,CACA,kDAAkD,EAClD,gBAAgB,CACjB,CAAA,EAAA,CACM,CAAA,EAAA,CACL,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/RatingScreen.js

@@ -1,6 +1,30 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Badge/Badge.js';
+import { Button } from '../../../components/Button/Button.js';
+import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
 import { StarRating } from './StarRating.js';
 
 const RatingScreen = ({ onSubmit }) => {
@@ -11,7 +35,7 @@ const RatingScreen = ({ onSubmit }) => {
         if (rating > 0)
             onSubmit(rating, message);
     };
-    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Share your feedback') }), jsx(StarRating, { value: rating, onChange: setRating }), jsx("textarea", { "aria-label": t('Feedback message'), className: "str-video__embedded-call-feedback__textarea", placeholder: t('Tell us about your experience...'), value: message, onChange: (e) => setMessage(e.target.value), rows: 3 }), jsx("div", { className: "str-video__embedded-call-feedback__actions", children: jsx("button", { type: "button", className: "str-video__button", onClick: handleSubmit, disabled: rating === 0, children: t('Submit feedback') }) })] }));
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('callFeedback.ratingScreen.shareYourFeedback.title', 'Share your feedback') }), jsx(StarRating, { value: rating, onChange: setRating }), jsx("textarea", { "aria-label": t('callFeedback.ratingScreen.feedbackMessage.ariaLabel', 'Feedback message'), className: "str-video__embedded-call-feedback__textarea", placeholder: t('callFeedback.ratingScreen.tellUsAboutExperience.placeholder', 'Tell us about your experience...'), value: message, onChange: (e) => setMessage(e.target.value), rows: 3 }), jsx("div", { className: "str-video__embedded-call-feedback__actions", children: jsx(Button, { size: "sm", onClick: handleSubmit, disabled: rating === 0, children: t('callFeedback.ratingScreen.submitFeedback.label', 'Submit feedback') }) })] }));
 };
 
 export { RatingScreen };

package/dist/esm/src/embedded/shared/CallFeedback/RatingScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/RatingScreen.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { StarRating } from './StarRating';\n\ninterface RatingScreenProps {\n  onSubmit: (rating: number, message: string) => void;\n}\n\nexport const RatingScreen = ({ onSubmit }: RatingScreenProps) => {\n  const { t } = useI18n();\n  const [rating, setRating] = useState(0);\n  const [message, setMessage] = useState('');\n\n  const handleSubmit = () => {\n    if (rating > 0) onSubmit(rating, message);\n  };\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Share your feedback')}\n      </h2>\n\n      <StarRating value={rating} onChange={setRating} />\n\n      <textarea\n        aria-label={t('Feedback message')}\n        className=\"str-video__embedded-call-feedback__textarea\"\n        placeholder={t('Tell us about your experience...')}\n        value={message}\n        onChange={(e) => setMessage(e.target.value)}\n        rows={3}\n      />\n\n      <div className=\"str-video__embedded-call-feedback__actions\">\n        <button\n          type=\"button\"\n          className=\"str-video__button\"\n          onClick={handleSubmit}\n          disabled={rating === 0}\n        >\n          {t('Submit feedback')}\n        </button>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;MAQa,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAC9D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAE1C,MAAM,YAAY,GAAG,MAAK;QACxB,IAAI,MAAM,GAAG,CAAC;AAAE,YAAA,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;AAC3C,IAAA,CAAC;IAED,QACEA,cAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CAAC,qBAAqB,CAAC,EAAA,CACtB,EAELA,IAAC,UAAU,EAAA,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAI,EAElDA,GAAA,CAAA,UAAA,EAAA,EAAA,YAAA,EACc,CAAC,CAAC,kBAAkB,CAAC,EACjC,SAAS,EAAC,6CAA6C,EACvD,WAAW,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAClD,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3C,IAAI,EAAE,CAAC,EAAA,CACP,EAEFA,aAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EACzDA,GAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAA,QAAA,EAErB,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACd,EAAA,CACL,CAAA,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"RatingScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/RatingScreen.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useI18n } from '../../../i18n';\nimport { Button } from '../../../components';\nimport { StarRating } from './StarRating';\n\ninterface RatingScreenProps {\n  onSubmit: (rating: number, message: string) => void;\n}\n\nexport const RatingScreen = ({ onSubmit }: RatingScreenProps) => {\n  const { t } = useI18n();\n  const [rating, setRating] = useState(0);\n  const [message, setMessage] = useState('');\n\n  const handleSubmit = () => {\n    if (rating > 0) onSubmit(rating, message);\n  };\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t(\n          'callFeedback.ratingScreen.shareYourFeedback.title',\n          'Share your feedback',\n        )}\n      </h2>\n\n      <StarRating value={rating} onChange={setRating} />\n\n      <textarea\n        aria-label={t(\n          'callFeedback.ratingScreen.feedbackMessage.ariaLabel',\n          'Feedback message',\n        )}\n        className=\"str-video__embedded-call-feedback__textarea\"\n        placeholder={t(\n          'callFeedback.ratingScreen.tellUsAboutExperience.placeholder',\n          'Tell us about your experience...',\n        )}\n        value={message}\n        onChange={(e) => setMessage(e.target.value)}\n        rows={3}\n      />\n\n      <div className=\"str-video__embedded-call-feedback__actions\">\n        <Button size=\"sm\" onClick={handleSubmit} disabled={rating === 0}>\n          {t(\n            'callFeedback.ratingScreen.submitFeedback.label',\n            'Submit feedback',\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;MASa,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAC9D,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAE1C,MAAM,YAAY,GAAG,MAAK;QACxB,IAAI,MAAM,GAAG,CAAC;AAAE,YAAA,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;AAC3C,IAAA,CAAC;IAED,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,aAC3DC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CACA,mDAAmD,EACnD,qBAAqB,CACtB,EAAA,CACE,EAELA,IAAC,UAAU,EAAA,EAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAA,CAAI,EAElDA,GAAA,CAAA,UAAA,EAAA,EAAA,YAAA,EACc,CAAC,CACX,qDAAqD,EACrD,kBAAkB,CACnB,EACD,SAAS,EAAC,6CAA6C,EACvD,WAAW,EAAE,CAAC,CACZ,6DAA6D,EAC7D,kCAAkC,CACnC,EACD,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3C,IAAI,EAAE,CAAC,GACP,EAEFA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EACzDA,IAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAA,QAAA,EAC5D,CAAC,CACA,gDAAgD,EAChD,iBAAiB,CAClB,EAAA,CACM,EAAA,CACL,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/StarRating.js

@@ -1,10 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import clsx from 'clsx';
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
+import '@stream-io/video-react-bindings';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -30,7 +32,11 @@ const StarRating = ({ value, onChange }) => {
     const [hovered, setHovered] = useState(0);
     const displayValue = hovered || value;
     const getStarClasses = (star) => clsx('str-video__embedded-call-feedback__star', star <= displayValue && 'str-video__embedded-call-feedback__star--active');
-    return (jsxs("div", { className: "str-video__embedded-call-feedback__rating-section", children: [jsx("p", { className: "str-video__embedded-call-feedback__rating-label", children: t('How was your call quality?') }), jsx("div", { className: "str-video__embedded-call-feedback__stars", onMouseLeave: () => setHovered(0), children: [1, 2, 3, 4, 5].map((star) => (jsx("button", { type: "button", className: getStarClasses(star), onClick: () => onChange(star), onMouseEnter: () => setHovered(star), "aria-label": t('Rate {{ count }} star', { count: star }), children: jsx(Icon, { icon: "star-filled" }) }, star))) })] }));
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__rating-section", children: [jsx("p", { className: "str-video__embedded-call-feedback__rating-label", children: t('callFeedback.starRating.howWasCallQuality.text', 'How was your call quality?') }), jsx("div", { className: "str-video__embedded-call-feedback__stars", onMouseLeave: () => setHovered(0), children: [1, 2, 3, 4, 5].map((star) => (jsx("button", { type: "button", className: getStarClasses(star), onClick: () => onChange(star), onMouseEnter: () => setHovered(star), "aria-label": t('callFeedback.starRating.rateStars.ariaLabel', {
+                        count: star,
+                        defaultValue_one: 'Rate {{ count }} star',
+                        defaultValue_other: 'Rate {{ count }} stars',
+                    }), children: jsx(Icon, { icon: "star-filled" }) }, star))) })] }));
 };
 
 export { StarRating };

package/dist/esm/src/embedded/shared/CallFeedback/StarRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"StarRating.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/StarRating.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\nimport { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\ninterface StarRatingProps {\n  value: number;\n  onChange: (rating: number) => void;\n}\n\nexport const StarRating = ({ value, onChange }: StarRatingProps) => {\n  const { t } = useI18n();\n  const [hovered, setHovered] = useState(0);\n  const displayValue = hovered || value;\n\n  const getStarClasses = (star: number) =>\n    clsx(\n      'str-video__embedded-call-feedback__star',\n      star <= displayValue && 'str-video__embedded-call-feedback__star--active',\n    );\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__rating-section\">\n      <p className=\"str-video__embedded-call-feedback__rating-label\">\n        {t('How was your call quality?')}\n      </p>\n      <div\n        className=\"str-video__embedded-call-feedback__stars\"\n        onMouseLeave={() => setHovered(0)}\n      >\n        {[1, 2, 3, 4, 5].map((star) => (\n          <button\n            key={star}\n            type=\"button\"\n            className={getStarClasses(star)}\n            onClick={() => onChange(star)}\n            onMouseEnter={() => setHovered(star)}\n            aria-label={t('Rate {{ count }} star', { count: star })}\n          >\n            <Icon icon=\"star-filled\" />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmB,KAAI;AACjE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK;AAErC,IAAA,MAAM,cAAc,GAAG,CAAC,IAAY,KAClC,IAAI,CACF,yCAAyC,EACzC,IAAI,IAAI,YAAY,IAAI,iDAAiD,CAC1E;IAEH,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,aAChEC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC3D,CAAC,CAAC,4BAA4B,CAAC,EAAA,CAC9B,EACJA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,0CAA0C,EACpD,YAAY,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,EAAA,QAAA,EAEhC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACxBA,GAAA,CAAA,QAAA,EAAA,EAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,EAC/B,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,YAAY,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC,gBACxB,CAAC,CAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAEvDA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAA,CAAG,EAAA,EAPtB,IAAI,CAQF,CACV,CAAC,EAAA,CACE,CAAA,EAAA,CACF;AAEV;;;;"}
+{"version":3,"file":"StarRating.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/StarRating.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\nimport { useI18n } from '../../../i18n';\nimport { Icon } from '../../../components';\n\ninterface StarRatingProps {\n  value: number;\n  onChange: (rating: number) => void;\n}\n\nexport const StarRating = ({ value, onChange }: StarRatingProps) => {\n  const { t } = useI18n();\n  const [hovered, setHovered] = useState(0);\n  const displayValue = hovered || value;\n\n  const getStarClasses = (star: number) =>\n    clsx(\n      'str-video__embedded-call-feedback__star',\n      star <= displayValue && 'str-video__embedded-call-feedback__star--active',\n    );\n\n  return (\n    <div className=\"str-video__embedded-call-feedback__rating-section\">\n      <p className=\"str-video__embedded-call-feedback__rating-label\">\n        {t(\n          'callFeedback.starRating.howWasCallQuality.text',\n          'How was your call quality?',\n        )}\n      </p>\n      <div\n        className=\"str-video__embedded-call-feedback__stars\"\n        onMouseLeave={() => setHovered(0)}\n      >\n        {[1, 2, 3, 4, 5].map((star) => (\n          <button\n            key={star}\n            type=\"button\"\n            className={getStarClasses(star)}\n            onClick={() => onChange(star)}\n            onMouseEnter={() => setHovered(star)}\n            aria-label={t('callFeedback.starRating.rateStars.ariaLabel', {\n              count: star,\n              defaultValue_one: 'Rate {{ count }} star',\n              defaultValue_other: 'Rate {{ count }} stars',\n            })}\n          >\n            <Icon icon=\"star-filled\" />\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmB,KAAI;AACjE,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,OAAO,IAAI,KAAK;AAErC,IAAA,MAAM,cAAc,GAAG,CAAC,IAAY,KAClC,IAAI,CACF,yCAAyC,EACzC,IAAI,IAAI,YAAY,IAAI,iDAAiD,CAC1E;AAEH,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,CAChEC,WAAG,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAC3D,CAAC,CACA,gDAAgD,EAChD,4BAA4B,CAC7B,EAAA,CACC,EACJA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,0CAA0C,EACpD,YAAY,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,EAAA,QAAA,EAEhC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACxBA,GAAA,CAAA,QAAA,EAAA,EAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,EAC/B,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,EAC7B,YAAY,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC,gBACxB,CAAC,CAAC,6CAA6C,EAAE;AAC3D,wBAAA,KAAK,EAAE,IAAI;AACX,wBAAA,gBAAgB,EAAE,uBAAuB;AACzC,wBAAA,kBAAkB,EAAE,wBAAwB;AAC7C,qBAAA,CAAC,YAEFA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,aAAa,EAAA,CAAG,EAAA,EAXtB,IAAI,CAYF,CACV,CAAC,EAAA,CACE,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/shared/CallFeedback/ThankYouScreen.js

@@ -1,10 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useI18n } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
 import 'react';
+import '@stream-io/i18n/react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
+import '@stream-io/video-react-bindings';
 import '@stream-io/video-client';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -14,12 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -27,7 +29,7 @@ import '../../../core/components/Video/DefaultVideoPlaceholder.js';
 
 const ThankYouScreen = () => {
     const { t } = useI18n();
-    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("div", { className: "str-video__embedded-call-feedback__checkmark", children: jsx(Icon, { icon: "checkmark" }) }), jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('Thank you!') }), jsx("p", { className: "str-video__embedded-call-feedback__subtitle", children: t('Your feedback helps improve call quality.') })] }));
+    return (jsxs("div", { className: "str-video__embedded-call-feedback__container", children: [jsx("div", { className: "str-video__embedded-call-feedback__checkmark", children: jsx(Icon, { icon: "checkmark" }) }), jsx("h2", { className: "str-video__embedded-call-feedback__title", children: t('callFeedback.thankYouScreen.thankYou.title', 'Thank you!') }), jsx("p", { className: "str-video__embedded-call-feedback__subtitle", children: t('callFeedback.thankYouScreen.feedbackHelpsImprove.text', 'Your feedback helps improve call quality.') })] }));
 };
 
 export { ThankYouScreen };

package/dist/esm/src/embedded/shared/CallFeedback/ThankYouScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThankYouScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/ThankYouScreen.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { Icon } from '../../../components';\n\nexport const ThankYouScreen = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <div className=\"str-video__embedded-call-feedback__checkmark\">\n        <Icon icon=\"checkmark\" />\n      </div>\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('Thank you!')}\n      </h2>\n      <p className=\"str-video__embedded-call-feedback__subtitle\">\n        {t('Your feedback helps improve call quality.')}\n      </p>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,aAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAC3DA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,WAAW,EAAA,CAAG,GACrB,EACNA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,YACrD,CAAC,CAAC,YAAY,CAAC,EAAA,CACb,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACvD,CAAC,CAAC,2CAA2C,CAAC,EAAA,CAC7C,CAAA,EAAA,CACA;AAEV;;;;"}
+{"version":3,"file":"ThankYouScreen.js","sources":["../../../../../../../../src/embedded/shared/CallFeedback/ThankYouScreen.tsx"],"sourcesContent":["import { useI18n } from '../../../i18n';\nimport { Icon } from '../../../components';\n\nexport const ThankYouScreen = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__embedded-call-feedback__container\">\n      <div className=\"str-video__embedded-call-feedback__checkmark\">\n        <Icon icon=\"checkmark\" />\n      </div>\n      <h2 className=\"str-video__embedded-call-feedback__title\">\n        {t('callFeedback.thankYouScreen.thankYou.title', 'Thank you!')}\n      </h2>\n      <p className=\"str-video__embedded-call-feedback__subtitle\">\n        {t(\n          'callFeedback.thankYouScreen.feedbackHelpsImprove.text',\n          'Your feedback helps improve call quality.',\n        )}\n      </p>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,QACEA,cAAK,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,CAC3DC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8CAA8C,YAC3DA,GAAA,CAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAA,CAAG,EAAA,CACrB,EACNA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACrD,CAAC,CAAC,4CAA4C,EAAE,YAAY,CAAC,EAAA,CAC3D,EACLA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACvD,CAAC,CACA,uDAAuD,EACvD,2CAA2C,CAC5C,EAAA,CACC,CAAA,EAAA,CACA;AAEV;;;;"}

package/dist/esm/src/embedded/shared/ConnectionNotification/ConnectionNotification.js

@@ -1,11 +1,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { CallingState } from '@stream-io/video-client';
-import { useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
 import 'react';
+import '@stream-io/i18n/react';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import { Notification } from '../../../components/Notification/Notification.js';
 import '../../../components/CallControls/RecordCallButton.js';
 import '../../../components/CallControls/ReactionsButton.js';
@@ -14,13 +19,9 @@ import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import { LoadingIndicator } from '../../../components/LoadingIndicator/LoadingIndicator.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -38,16 +39,16 @@ const ConnectionNotification = () => {
     const showError = isOffline || hasFailedToRecover;
     const showLoading = isJoining || isReconnecting || isMigrating;
     if (showError) {
-        return (jsx("div", { className: "str-video__embedded-connection-notification", children: jsx(Notification, { isVisible: true, placement: "bottom", message: isOffline
-                    ? t('You are offline. Check your internet connection.')
-                    : t('Failed to restore connection. Please try again.') }) }));
+        return (jsx("div", { className: "str-video__embedded-connection-notification", children: jsx(Notification, { isVisible: true, state: "error", placement: "bottom", message: isOffline
+                    ? t('connectionNotification.offline.text', 'You are offline. Check your internet connection.')
+                    : t('connectionNotification.failedToRestore.text', 'Failed to restore connection. Please try again.') }) }));
     }
     if (showLoading) {
-        return (jsx("div", { className: "str-video__embedded-connection-notification", children: jsx(Notification, { isVisible: true, placement: "bottom", iconClassName: null, message: jsx(LoadingIndicator, { text: isMigrating
-                        ? t('Migrating...')
-                        : isJoining
-                            ? t('Joining')
-                            : t('Reconnecting...') }) }) }));
+        return (jsx("div", { className: "str-video__embedded-connection-notification", children: jsx(Notification, { isVisible: true, state: "loading", placement: "bottom", message: isMigrating
+                    ? t('connectionNotification.migrating.text', 'Migrating...')
+                    : isJoining
+                        ? t('connectionNotification.joining.text', 'Joining')
+                        : t('connectionNotification.reconnecting.text', 'Reconnecting...') }) }));
     }
     return null;
 };

package/dist/esm/src/embedded/shared/ConnectionNotification/ConnectionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionNotification.js","sources":["../../../../../../../../src/embedded/shared/ConnectionNotification/ConnectionNotification.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { LoadingIndicator, Notification } from '../../../components';\n\nexport const ConnectionNotification = () => {\n  const { t } = useI18n();\n  const { useCallCallingState } = useCallStateHooks();\n  const callingState = useCallCallingState();\n\n  const isOffline = callingState === CallingState.OFFLINE;\n  const isReconnecting = callingState === CallingState.RECONNECTING;\n  const isMigrating = callingState === CallingState.MIGRATING;\n  const isJoining = callingState === CallingState.JOINING;\n  const hasFailedToRecover = callingState === CallingState.RECONNECTING_FAILED;\n\n  const showError = isOffline || hasFailedToRecover;\n  const showLoading = isJoining || isReconnecting || isMigrating;\n\n  if (showError) {\n    return (\n      <div className=\"str-video__embedded-connection-notification\">\n        <Notification\n          isVisible\n          placement=\"bottom\"\n          message={\n            isOffline\n              ? t('You are offline. Check your internet connection.')\n              : t('Failed to restore connection. Please try again.')\n          }\n        />\n      </div>\n    );\n  }\n\n  if (showLoading) {\n    return (\n      <div className=\"str-video__embedded-connection-notification\">\n        <Notification\n          isVisible\n          placement=\"bottom\"\n          iconClassName={null}\n          message={\n            <LoadingIndicator\n              text={\n                isMigrating\n                  ? t('Migrating...')\n                  : isJoining\n                    ? t('Joining')\n                    : t('Reconnecting...')\n              }\n            />\n          }\n        />\n      </div>\n    );\n  }\n\n  return null;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,sBAAsB,GAAG,MAAK;AACzC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAE1C,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO;AACvD,IAAA,MAAM,cAAc,GAAG,YAAY,KAAK,YAAY,CAAC,YAAY;AACjE,IAAA,MAAM,WAAW,GAAG,YAAY,KAAK,YAAY,CAAC,SAAS;AAC3D,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO;AACvD,IAAA,MAAM,kBAAkB,GAAG,YAAY,KAAK,YAAY,CAAC,mBAAmB;AAE5E,IAAA,MAAM,SAAS,GAAG,SAAS,IAAI,kBAAkB;AACjD,IAAA,MAAM,WAAW,GAAG,SAAS,IAAI,cAAc,IAAI,WAAW;IAE9D,IAAI,SAAS,EAAE;AACb,QAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,YAC1DA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,QACT,SAAS,EAAC,QAAQ,EAClB,OAAO,EACL;AACE,sBAAE,CAAC,CAAC,kDAAkD;sBACpD,CAAC,CAAC,iDAAiD,CAAC,EAAA,CAE1D,EAAA,CACE;IAEV;IAEA,IAAI,WAAW,EAAE;QACf,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,EAAA,IAAA,EACT,SAAS,EAAC,QAAQ,EAClB,aAAa,EAAE,IAAI,EACnB,OAAO,EACLA,GAAA,CAAC,gBAAgB,EAAA,EACf,IAAI,EACF;AACE,0BAAE,CAAC,CAAC,cAAc;AAClB,0BAAE;AACA,8BAAE,CAAC,CAAC,SAAS;8BACX,CAAC,CAAC,iBAAiB,CAAC,EAAA,CAE5B,EAAA,CAEJ,EAAA,CACE;IAEV;AAEA,IAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"ConnectionNotification.js","sources":["../../../../../../../../src/embedded/shared/ConnectionNotification/ConnectionNotification.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { Notification } from '../../../components';\n\nexport const ConnectionNotification = () => {\n  const { t } = useI18n();\n  const { useCallCallingState } = useCallStateHooks();\n  const callingState = useCallCallingState();\n\n  const isOffline = callingState === CallingState.OFFLINE;\n  const isReconnecting = callingState === CallingState.RECONNECTING;\n  const isMigrating = callingState === CallingState.MIGRATING;\n  const isJoining = callingState === CallingState.JOINING;\n  const hasFailedToRecover = callingState === CallingState.RECONNECTING_FAILED;\n\n  const showError = isOffline || hasFailedToRecover;\n  const showLoading = isJoining || isReconnecting || isMigrating;\n\n  if (showError) {\n    return (\n      <div className=\"str-video__embedded-connection-notification\">\n        <Notification\n          isVisible\n          state=\"error\"\n          placement=\"bottom\"\n          message={\n            isOffline\n              ? t(\n                  'connectionNotification.offline.text',\n                  'You are offline. Check your internet connection.',\n                )\n              : t(\n                  'connectionNotification.failedToRestore.text',\n                  'Failed to restore connection. Please try again.',\n                )\n          }\n        />\n      </div>\n    );\n  }\n\n  if (showLoading) {\n    return (\n      <div className=\"str-video__embedded-connection-notification\">\n        <Notification\n          isVisible\n          state=\"loading\"\n          placement=\"bottom\"\n          message={\n            isMigrating\n              ? t('connectionNotification.migrating.text', 'Migrating...')\n              : isJoining\n                ? t('connectionNotification.joining.text', 'Joining')\n                : t(\n                    'connectionNotification.reconnecting.text',\n                    'Reconnecting...',\n                  )\n          }\n        />\n      </div>\n    );\n  }\n\n  return null;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,sBAAsB,GAAG,MAAK;AACzC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAE1C,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO;AACvD,IAAA,MAAM,cAAc,GAAG,YAAY,KAAK,YAAY,CAAC,YAAY;AACjE,IAAA,MAAM,WAAW,GAAG,YAAY,KAAK,YAAY,CAAC,SAAS;AAC3D,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO;AACvD,IAAA,MAAM,kBAAkB,GAAG,YAAY,KAAK,YAAY,CAAC,mBAAmB;AAE5E,IAAA,MAAM,SAAS,GAAG,SAAS,IAAI,kBAAkB;AACjD,IAAA,MAAM,WAAW,GAAG,SAAS,IAAI,cAAc,IAAI,WAAW;IAE9D,IAAI,SAAS,EAAE;QACb,QACEA,aAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,QACT,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,QAAQ,EAClB,OAAO,EACL;AACE,sBAAE,CAAC,CACC,qCAAqC,EACrC,kDAAkD;sBAEpD,CAAC,CACC,6CAA6C,EAC7C,iDAAiD,CAClD,EAAA,CAEP,EAAA,CACE;IAEV;IAEA,IAAI,WAAW,EAAE;QACf,QACEA,aAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,GAAA,CAAC,YAAY,EAAA,EACX,SAAS,QACT,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,QAAQ,EAClB,OAAO,EACL;AACE,sBAAE,CAAC,CAAC,uCAAuC,EAAE,cAAc;AAC3D,sBAAE;AACA,0BAAE,CAAC,CAAC,qCAAqC,EAAE,SAAS;0BAClD,CAAC,CACC,0CAA0C,EAC1C,iBAAiB,CAClB,EAAA,CAET,EAAA,CACE;IAEV;AAEA,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/esm/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.js

@@ -4,11 +4,15 @@ import clsx from 'clsx';
 import '../../../core/components/Audio/Audio.js';
 import '../../../core/components/Audio/ParticipantsAudio.js';
 import '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import '@stream-io/video-client';
 import { useParticipantViewContext } from '../../../core/components/ParticipantView/ParticipantViewContext.js';
 import '../../../components/Menu/MenuToggle.js';
 import '../../../core/components/ParticipantView/ParticipantView.js';
 import { DefaultParticipantViewUI } from '../../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../../core/components/ParticipantView/ConnectionQualityIndicator.js';
 import '../../../core/components/StreamCall/StreamCall.js';
 import '../../../core/components/StreamVideo/StreamVideo.js';
 import '../../../core/components/Video/BaseVideo.js';