npm - @stream-io/video-react-sdk - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (328) hide show

package/dist/esm/src/embedded/call/CallLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallLayout.js","sources":["../../../../../../../src/embedded/call/CallLayout.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport clsx from 'clsx';\nimport { OwnCapability } from '@stream-io/video-client';\nimport { Restricted } from '@stream-io/video-react-bindings';\nimport {\n CallParticipantsList,\n PermissionRequests,\n SpeakingWhileMutedNotification,\n} from '../../components';\n\nimport { useLayout, useWakeLock } from '../hooks';\nimport { ConnectionNotification } from '../shared';\nimport { CallControls } from './CallControls';\nimport { CallHeader } from './CallHeader';\n\n/*\n CallLayout renders the active call experience with layout, controls and sidebar.\n */\nexport const CallLayout = () => {\n useWakeLock();\n const [showParticipants, setShowParticipants] = useState(false);\n\n const { Component: LayoutComponent, props: layoutProps } = useLayout();\n\n const handleToggleParticipants = useCallback(() => {\n setShowParticipants((prev) => !prev);\n }, []);\n\n return (\n <div className=\"str-video__embedded-call\">\n <ConnectionNotification />\n <PermissionRequests />\n <div className=\"str-video__embedded-notifications\">\n <Restricted\n requiredGrants={[OwnCapability.SEND_AUDIO]}\n hasPermissionsOnly\n >\n <SpeakingWhileMutedNotification />\n </Restricted>\n </div>\n <CallHeader />\n <div className=\"str-video__embedded-layout\">\n <div className=\"str-video__embedded-layout__stage\">\n <LayoutComponent {...layoutProps} />\n </div>\n\n <div\n className={clsx(\n 'str-video__embedded-sidebar',\n showParticipants && 'str-video__embedded-sidebar--open',\n )}\n >\n {showParticipants && (\n <div className=\"str-video__embedded-participants\">\n <CallParticipantsList onClose={handleToggleParticipants} />\n </div>\n )}\n </div>\n </div>\n <CallControls\n showParticipants={showParticipants}\n onToggleParticipants={handleToggleParticipants}\n />\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAeA;;AAEG;AACI,MAAM,UAAU,GAAG,MAAK;AAC7B,IAAA,WAAW,EAAE;IACb,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE/D,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AAEtE,IAAA,MAAM,wBAAwB,GAAG,WAAW,CAAC,MAAK;QAChD,mBAAmB,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;IAEN,QACEA,~~cAAK~~,SAAS,EAAC,0BAA0B,~~EAAA~~,~~QAAA,EAAA,CACvCC,~~GAAA,CAAC,sBAAsB,EAAA,EAAA,CAAG,EAC1BA,GAAA,CAAC,kBAAkB,~~EAAA~~,~~EAAA,CAAG,~~EACtBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,~~YAChDA~~,~~GAAA~~,~~CAAC~~,UAAU,EAAA,EACT,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,~~kBAElBA~~,GAAA,CAAC,8BAA8B,EAAA,EAAA,CAAG,EAAA,~~CACvB~~,~~EAAA~~,~~CACT,~~EACNA,~~IAAC~~,UAAU,EAAA,EAAA,CAAG,EACdD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAChDA,~~IAAC~~,eAAe,EAAA,EAAA,GAAK,WAAW,EAAA,CAAI,~~EAAA~~,~~CAChC,~~EAENA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,gBAAgB,IAAI,mCAAmC,CACxD,EAAA,QAAA,EAEA,gBAAgB,KACfA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,~~EAAA,QAAA,EAC~~/CA,~~IAAC~~,oBAAoB,EAAA,EAAC,OAAO,EAAE,wBAAwB,GAAI,EAAA,CACvD,CACP,EAAA,CACG,CAAA,EAAA,CACF,EACNA,GAAA,CAAC,YAAY,EAAA,EACX,gBAAgB,EAAE,gBAAgB,EAClC,oBAAoB,EAAE,wBAAwB,EAAA,CAC9C,CAAA,EAAA,CACE;AAEV;;;;"}
1	+ {"version":3,"file":"CallLayout.js","sources":["../../../../../../../src/embedded/call/CallLayout.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport clsx from 'clsx';\nimport { OwnCapability } from '@stream-io/video-client';\nimport { Restricted } from '@stream-io/video-react-bindings';\nimport {\n CallParticipantsList,\n PermissionRequests,\n SpeakingWhileMutedNotification,\n} from '../../components';\n\nimport { useLayout, useWakeLock } from '../hooks';\nimport { ConnectionNotification } from '../shared';\nimport { CallControls } from './CallControls';\nimport { CallHeader } from './CallHeader';\n\n/*\n CallLayout renders the active call experience with layout, controls and sidebar.\n */\nexport const CallLayout = () => {\n useWakeLock();\n const [showParticipants, setShowParticipants] = useState(false);\n\n const { Component: LayoutComponent, props: layoutProps } = useLayout();\n\n const handleToggleParticipants = useCallback(() => {\n setShowParticipants((prev) => !prev);\n }, []);\n\n return (\n <div className=\"str-video__embedded-call\">\n <ConnectionNotification />\n <PermissionRequests />\n <div className=\"str-video__embedded-notifications\">\n <Restricted\n requiredGrants={[OwnCapability.SEND_AUDIO]}\n hasPermissionsOnly\n >\n <SpeakingWhileMutedNotification placement=\"top\" />\n </Restricted>\n </div>\n <CallHeader />\n <div className=\"str-video__embedded-layout\">\n <div className=\"str-video__embedded-layout__stage\">\n <LayoutComponent {...layoutProps} />\n </div>\n\n <div\n className={clsx(\n 'str-video__embedded-sidebar',\n showParticipants && 'str-video__embedded-sidebar--open',\n )}\n >\n {showParticipants && (\n <div className=\"str-video__embedded-participants\">\n <CallParticipantsList onClose={handleToggleParticipants} />\n </div>\n )}\n </div>\n </div>\n <CallControls\n showParticipants={showParticipants}\n onToggleParticipants={handleToggleParticipants}\n />\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;AAEG;AACI,MAAM,UAAU,GAAG,MAAK;AAC7B,IAAA,WAAW,EAAE;IACb,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE/D,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;AAEtE,IAAA,MAAM,wBAAwB,GAAG,WAAW,CAAC,MAAK;QAChD,mBAAmB,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;IAEN,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,aACvCC,GAAA,CAAC,sBAAsB,EAAA,EAAA,CAAG,EAC1BA,GAAA,CAAC,kBAAkB,KAAG,EACtBA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAChDA,IAAC,UAAU,EAAA,EACT,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,EAAA,IAAA,EAAA,QAAA,EAElBA,GAAA,CAAC,8BAA8B,EAAA,EAAC,SAAS,EAAC,KAAK,EAAA,CAAG,EAAA,CACvC,GACT,EACNA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EACdD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAChDA,GAAA,CAAC,eAAe,EAAA,EAAA,GAAK,WAAW,EAAA,CAAI,GAChC,EAENA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,gBAAgB,IAAI,mCAAmC,CACxD,EAAA,QAAA,EAEA,gBAAgB,KACfA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,YAC/CA,GAAA,CAAC,oBAAoB,EAAA,EAAC,OAAO,EAAE,wBAAwB,GAAI,EAAA,CACvD,CACP,EAAA,CACG,CAAA,EAAA,CACF,EACNA,GAAA,CAAC,YAAY,EAAA,EACX,gBAAgB,EAAE,gBAAgB,EAClC,oBAAoB,EAAE,wBAAwB,EAAA,CAC9C,CAAA,EAAA,CACE;AAEV;;;;"}

package/dist/esm/src/embedded/call/CallStateRouter.js CHANGED Viewed

@@ -4,22 +4,24 @@ import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useState, useCallback } from '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 '@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';
@@ -30,6 +32,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/call/CallStateRouter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallStateRouter.js","sources":["../../../../../../../src/embedded/call/CallStateRouter.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { LoadingIndicator } from '../../components';\nimport { CallFeedback, JoinError, Lobby } from '../shared';\nimport { CallLayout } from './CallLayout';\nimport { useCallback, useState } from 'react';\nimport { useEmbeddedConfiguration } from '../context';\n\n/*\n CallStateRouter is the state decider component that manages view state transitions.\n */\nexport const CallStateRouter = () => {\n const call = useCall();\n\n const { useCallCallingState, useLocalParticipant } = useCallStateHooks();\n const localParticipant = useLocalParticipant();\n const callingState = useCallCallingState();\n const { onError } = useEmbeddedConfiguration();\n\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 if (joinError) {\n return <JoinError onJoin={handleJoin} />;\n }\n\n if (\n callingState === CallingState.IDLE \|\|\n callingState === CallingState.UNKNOWN\n ) {\n return <Lobby onJoin={handleJoin} />;\n }\n\n if (callingState === CallingState.JOINING && !localParticipant) {\n return <LoadingIndicator className=\"str-video__embedded-loading\" />;\n }\n\n if (callingState === CallingState.LEFT) {\n return <CallFeedback onJoin={handleJoin} />;\n }\n\n return <CallLayout />;\n};\n"],"names":["_jsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AASA;;AAEG;AACI,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IAEtB,MAAM,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACxE,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAC1C,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;IAE9C,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,IAAI,SAAS,EAAE;AACb,QAAA,OAAOA,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC1C;AAEA,IAAA,IACE,YAAY,KAAK,YAAY,CAAC,IAAI;AAClC,QAAA,YAAY,KAAK,YAAY,CAAC,OAAO,EACrC;AACA,QAAA,OAAOA,IAAC,KAAK,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IACtC;IAEA,IAAI,YAAY,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,gBAAgB,EAAE;AAC9D,QAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,6BAA6B,GAAG;IACrE;AAEA,IAAA,IAAI,YAAY,KAAK,YAAY,CAAC,IAAI,EAAE;AACtC,QAAA,OAAOA,IAAC,YAAY,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC7C;IAEA,OAAOA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG;AACvB;;;;"}
1	+ {"version":3,"file":"CallStateRouter.js","sources":["../../../../../../../src/embedded/call/CallStateRouter.tsx"],"sourcesContent":["import { CallingState } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { LoadingIndicator } from '../../components';\nimport { CallFeedback, JoinError, Lobby } from '../shared';\nimport { CallLayout } from './CallLayout';\nimport { useCallback, useState } from 'react';\nimport { useEmbeddedConfiguration } from '../context';\n\n/*\n CallStateRouter is the state decider component that manages view state transitions.\n */\nexport const CallStateRouter = () => {\n const call = useCall();\n\n const { useCallCallingState, useLocalParticipant } = useCallStateHooks();\n const localParticipant = useLocalParticipant();\n const callingState = useCallCallingState();\n const { onError } = useEmbeddedConfiguration();\n\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 if (joinError) {\n return <JoinError onJoin={handleJoin} />;\n }\n\n if (\n callingState === CallingState.IDLE \|\|\n callingState === CallingState.UNKNOWN\n ) {\n return <Lobby onJoin={handleJoin} />;\n }\n\n if (callingState === CallingState.JOINING && !localParticipant) {\n return <LoadingIndicator className=\"str-video__embedded-loading\" />;\n }\n\n if (callingState === CallingState.LEFT) {\n return <CallFeedback onJoin={handleJoin} />;\n }\n\n return <CallLayout />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AAEG;AACI,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IAEtB,MAAM,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACxE,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAC1C,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;IAE9C,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,IAAI,SAAS,EAAE;AACb,QAAA,OAAOA,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC1C;AAEA,IAAA,IACE,YAAY,KAAK,YAAY,CAAC,IAAI;AAClC,QAAA,YAAY,KAAK,YAAY,CAAC,OAAO,EACrC;AACA,QAAA,OAAOA,IAAC,KAAK,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IACtC;IAEA,IAAI,YAAY,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,gBAAgB,EAAE;AAC9D,QAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,6BAA6B,GAAG;IACrE;AAEA,IAAA,IAAI,YAAY,KAAK,YAAY,CAAC,IAAI,EAAE;AACtC,QAAA,OAAOA,IAAC,YAAY,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC7C;IAEA,OAAOA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG;AACvB;;;;"}

package/dist/esm/src/embedded/hooks/useLayout.js CHANGED Viewed

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

package/dist/esm/src/embedded/hooks/useLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useLayout.js","sources":["../../../../../../../src/embedded/hooks/useLayout.ts"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport {\n LivestreamLayout,\n PaginatedGridLayout,\n SpeakerLayout,\n} from '../../core';\nimport type { LayoutOption } from '../types';\nimport { useEmbeddedConfiguration } from '../context';\nimport { EmbeddedParticipantViewUI } from '../shared';\n\ninterface LayoutConfig {\n Component: ComponentType<Record<string, unknown>>;\n props?: Record<string, unknown>;\n}\n\nconst Layouts: Record<LayoutOption, LayoutConfig> = {\n Livestream: {\n Component: LivestreamLayout,\n props: {\n showLiveBadge: false,\n showParticipantCount: false,\n showDuration: false,\n },\n },\n PaginatedGrid: {\n Component: PaginatedGridLayout,\n props: { groupSize: 16, ParticipantViewUI: EmbeddedParticipantViewUI },\n },\n SpeakerLeft: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'left',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n SpeakerRight: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'right',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n SpeakerTop: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'top',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n SpeakerBottom: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'bottom',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n};\n\nconst EMPTY_PROPS: Record<string, unknown> = {};\nconst VALID_LAYOUTS = Object.keys(Layouts) as LayoutOption[];\n\nconst isValidLayout = (layout: string): layout is LayoutOption =>\n VALID_LAYOUTS.includes(layout as LayoutOption);\n\n/*\n Hook to manage layout selection.\n * Returns the layout Component and its props.\n */\nexport const useLayout = () => {\n const { layout: configuredLayout } = useEmbeddedConfiguration();\n const { useHasOngoingScreenShare } = useCallStateHooks();\n const hasScreenShare = useHasOngoingScreenShare();\n\n const defaultLayout = isValidLayout(configuredLayout ?? '')\n ? configuredLayout!\n : 'SpeakerTop';\n\n const [layout, setLayout] = useState<LayoutOption>(defaultLayout);\n\n useEffect(() => {\n if (hasScreenShare) {\n setLayout((currentLayout) => {\n if (currentLayout.startsWith('Speaker')) return currentLayout;\n return 'SpeakerRight';\n });\n } else {\n setLayout(defaultLayout);\n }\n }, [hasScreenShare, defaultLayout]);\n\n const { Component, props = EMPTY_PROPS } = Layouts[layout];\n\n return { Component, props };\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAiBA,MAAM,OAAO,GAAuC;AAClD,IAAA,UAAU,EAAE;AACV,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,KAAK,EAAE;AACL,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,oBAAoB,EAAE,KAAK;AAC3B,YAAA,YAAY,EAAE,KAAK;AACpB,SAAA;AACF,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,SAAS,EAAE,mBAAmB;QAC9B,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,iBAAiB,EAAE,yBAAyB,EAAE;AACvE,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,MAAM;AAC/B,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,OAAO;AAChC,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,KAAK;AAC9B,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,QAAQ;AACjC,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;CACF;AAED,MAAM,WAAW,GAA4B,EAAE;AAC/C,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAmB;AAE5D,MAAM,aAAa,GAAG,CAAC,MAAc,KACnC,aAAa,CAAC,QAAQ,CAAC,MAAsB,CAAC;AAEhD;;;AAGG;AACI,MAAM,SAAS,GAAG,MAAK;IAC5B,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,wBAAwB,EAAE;AAC/D,IAAA,MAAM,EAAE,wBAAwB,EAAE,GAAG,iBAAiB,EAAE;AACxD,IAAA,MAAM,cAAc,GAAG,wBAAwB,EAAE;AAEjD,IAAA,MAAM,aAAa,GAAG,aAAa,CAAC,gBAAgB,IAAI,EAAE;AACxD,UAAE;UACA,YAAY;IAEhB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,aAAa,CAAC;IAEjE,SAAS,CAAC,MAAK;QACb,IAAI,cAAc,EAAE;AAClB,YAAA,SAAS,CAAC,CAAC,aAAa,KAAI;AAC1B,gBAAA,IAAI,aAAa,CAAC,UAAU,CAAC,SAAS,CAAC;AAAE,oBAAA,OAAO,aAAa;AAC7D,gBAAA,OAAO,cAAc;AACvB,YAAA,CAAC,CAAC;QACJ;aAAO;YACL,SAAS,CAAC,aAAa,CAAC;QAC1B;AACF,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC;AAE1D,IAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE;AAC7B;;;;"}
1	+ {"version":3,"file":"useLayout.js","sources":["../../../../../../../src/embedded/hooks/useLayout.ts"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\nimport {\n LivestreamLayout,\n PaginatedGridLayout,\n SpeakerLayout,\n} from '../../core';\nimport type { LayoutOption } from '../types';\nimport { useEmbeddedConfiguration } from '../context';\nimport { EmbeddedParticipantViewUI } from '../shared';\n\ninterface LayoutConfig {\n Component: ComponentType<Record<string, unknown>>;\n props?: Record<string, unknown>;\n}\n\nconst Layouts: Record<LayoutOption, LayoutConfig> = {\n Livestream: {\n Component: LivestreamLayout,\n props: {\n showLiveBadge: false,\n showParticipantCount: false,\n showDuration: false,\n },\n },\n PaginatedGrid: {\n Component: PaginatedGridLayout,\n props: { groupSize: 16, ParticipantViewUI: EmbeddedParticipantViewUI },\n },\n SpeakerLeft: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'left',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n SpeakerRight: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'right',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n SpeakerTop: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'top',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n SpeakerBottom: {\n Component: SpeakerLayout,\n props: {\n participantsBarPosition: 'bottom',\n ParticipantViewUISpotlight: EmbeddedParticipantViewUI,\n ParticipantViewUIBar: EmbeddedParticipantViewUI,\n },\n },\n};\n\nconst EMPTY_PROPS: Record<string, unknown> = {};\nconst VALID_LAYOUTS = Object.keys(Layouts) as LayoutOption[];\n\nconst isValidLayout = (layout: string): layout is LayoutOption =>\n VALID_LAYOUTS.includes(layout as LayoutOption);\n\n/*\n Hook to manage layout selection.\n * Returns the layout Component and its props.\n */\nexport const useLayout = () => {\n const { layout: configuredLayout } = useEmbeddedConfiguration();\n const { useHasOngoingScreenShare } = useCallStateHooks();\n const hasScreenShare = useHasOngoingScreenShare();\n\n const defaultLayout = isValidLayout(configuredLayout ?? '')\n ? configuredLayout!\n : 'SpeakerTop';\n\n const [layout, setLayout] = useState<LayoutOption>(defaultLayout);\n\n useEffect(() => {\n if (hasScreenShare) {\n setLayout((currentLayout) => {\n if (currentLayout.startsWith('Speaker')) return currentLayout;\n return 'SpeakerRight';\n });\n } else {\n setLayout(defaultLayout);\n }\n }, [hasScreenShare, defaultLayout]);\n\n const { Component, props = EMPTY_PROPS } = Layouts[layout];\n\n return { Component, props };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,GAAuC;AAClD,IAAA,UAAU,EAAE;AACV,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,KAAK,EAAE;AACL,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,oBAAoB,EAAE,KAAK;AAC3B,YAAA,YAAY,EAAE,KAAK;AACpB,SAAA;AACF,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,SAAS,EAAE,mBAAmB;QAC9B,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,iBAAiB,EAAE,yBAAyB,EAAE;AACvE,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,MAAM;AAC/B,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;AACD,IAAA,YAAY,EAAE;AACZ,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,OAAO;AAChC,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,KAAK;AAC9B,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,QAAQ;AACjC,YAAA,0BAA0B,EAAE,yBAAyB;AACrD,YAAA,oBAAoB,EAAE,yBAAyB;AAChD,SAAA;AACF,KAAA;CACF;AAED,MAAM,WAAW,GAA4B,EAAE;AAC/C,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAmB;AAE5D,MAAM,aAAa,GAAG,CAAC,MAAc,KACnC,aAAa,CAAC,QAAQ,CAAC,MAAsB,CAAC;AAEhD;;;AAGG;AACI,MAAM,SAAS,GAAG,MAAK;IAC5B,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,wBAAwB,EAAE;AAC/D,IAAA,MAAM,EAAE,wBAAwB,EAAE,GAAG,iBAAiB,EAAE;AACxD,IAAA,MAAM,cAAc,GAAG,wBAAwB,EAAE;AAEjD,IAAA,MAAM,aAAa,GAAG,aAAa,CAAC,gBAAgB,IAAI,EAAE;AACxD,UAAE;UACA,YAAY;IAEhB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAe,aAAa,CAAC;IAEjE,SAAS,CAAC,MAAK;QACb,IAAI,cAAc,EAAE;AAClB,YAAA,SAAS,CAAC,CAAC,aAAa,KAAI;AAC1B,gBAAA,IAAI,aAAa,CAAC,UAAU,CAAC,SAAS,CAAC;AAAE,oBAAA,OAAO,aAAa;AAC7D,gBAAA,OAAO,cAAc;AACvB,YAAA,CAAC,CAAC;QACJ;aAAO;YACL,SAAS,CAAC,aAAa,CAAC;QAC1B;AACF,IAAA,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,WAAW,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC;AAE1D,IAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE;AAC7B;;;;"}

package/dist/esm/src/embedded/livestream/host/HostLayout.js CHANGED Viewed

@@ -2,12 +2,17 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
-import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { useLayout } from '../../hooks/useLayout.js';
 import { useCallDuration } from '../../hooks/useCallDuration.js';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import { CompositeButton } from '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import { Button } from '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import { CompositeButton } from '../../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
 import { MicCaptureErrorNotification } from '../../../components/Notification/MicCaptureErrorNotification.js';
 import { RecordCallConfirmationButton } from '../../../components/CallControls/RecordCallButton.js';
@@ -16,7 +21,6 @@ import { ScreenShareButton } from '../../../components/CallControls/ScreenShareB
 import { ToggleAudioPublishingButton } from '../../../components/CallControls/ToggleAudioButton.js';
 import { ToggleVideoPublishingButton } from '../../../components/CallControls/ToggleVideoButton.js';
 import { CancelCallConfirmButton } from '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import { Icon } from '../../../components/Icon/Icon.js';
 import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
@@ -25,9 +29,7 @@ import { DeviceSelectorAudioOutput, DeviceSelectorAudioInput } from '../../../co
 import { WithTooltip } from '../../../components/Tooltip/WithTooltip.js';
 import { CallParticipantsList } from '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import { PermissionRequests } from '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -40,6 +42,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';
@@ -68,8 +71,10 @@ const HostLayout = ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }) => {
     }, []);
     const livestreamStatus = (jsxs("div", { className: "str-video__embedded-livestream-duration", "aria-live": "polite", "aria-atomic": "true", children: [jsx("span", { className: isLive
                     ? 'str-video__embedded-livestream-duration__live-badge'
-                    : 'str-video__embedded-livestream-duration__backstage-badge', children: isLive ? t('Live') : t('Backstage') }), jsx(ViewersCount, { count: participantCount }), isLive && elapsed && (jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }));
-    return (jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsx(ConnectionNotification, {}), jsx(PermissionRequests, {}), jsxs("div", { className: "str-video__embedded-call-header", children: [livestreamStatus, jsx(CancelCallConfirmButton, {})] }), jsxs("div", { className: "str-video__embedded-layout", children: [jsx("div", { className: "str-video__embedded-layout__stage", children: jsx(LayoutComponent, { ...layoutProps }) }), jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsx("div", { className: "str-video__embedded-participants", children: jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), jsx("div", { className: "str-video__embedded-desktop", children: livestreamStatus })] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') }), jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ScreenShareButton, {}) }) }), jsx(RecordCallConfirmationButton, {}), isBackstageEnabled && (jsx(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL], children: isLive ? (jsx(WithTooltip, { title: t('End Stream'), children: jsxs("button", { type: "button", className: "str-video__embedded-end-stream-button", onClick: onStopLive, children: [jsx(Icon, { icon: "call-end" }), jsx("span", { children: t('Stop Live') })] }) })) : (jsx(WithTooltip, { title: t('Start Stream'), children: jsxs("button", { type: "button", className: "str-video__embedded-go-live-button", onClick: onGoLive, children: [jsx(Icon, { icon: "streaming" }), jsx("span", { children: t('Go Live') })] }) })) })), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] })] }));
+                    : 'str-video__embedded-livestream-duration__backstage-badge', children: isLive
+                    ? t('common.live.label', 'Live')
+                    : t('livestreamHost.backstage.text', 'Backstage') }), jsx(ViewersCount, { count: participantCount }), isLive && elapsed && (jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }));
+    return (jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsx(ConnectionNotification, {}), jsx(PermissionRequests, {}), jsxs("div", { className: "str-video__embedded-call-header", children: [livestreamStatus, jsx(CancelCallConfirmButton, {})] }), jsxs("div", { className: "str-video__embedded-layout", children: [jsx("div", { className: "str-video__embedded-layout__stage", children: jsx(LayoutComponent, { ...layoutProps }) }), jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsx("div", { className: "str-video__embedded-participants", children: jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), jsx("div", { className: "str-video__embedded-desktop", children: livestreamStatus })] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') }), jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ScreenShareButton, {}) }) }), jsx(RecordCallConfirmationButton, {}), isBackstageEnabled && (jsx(Restricted, { requiredGrants: [OwnCapability.UPDATE_CALL], children: isLive ? (jsx(WithTooltip, { title: t('livestreamHost.endStream.title', 'End Stream'), children: jsxs(Button, { variant: "secondary", size: "sm", className: "str-video__embedded-end-stream-button", onClick: onStopLive, children: [jsx(Icon, { icon: "call-end" }), jsx("span", { children: t('livestreamHost.endLive.label', 'End Live') })] }) })) : (jsx(WithTooltip, { title: t('livestreamHost.startStream.title', 'Start Stream'), children: jsxs(Button, { variant: "primary", size: "sm", className: "str-video__embedded-go-live-button", onClick: onGoLive, children: [jsx(Icon, { icon: "streaming" }), jsx("span", { children: t('livestreamHost.goLive.label', 'Go Live') })] }) })) })), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('common.participants.label', 'Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('common.participants.label', 'Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] })] }));
 };
 export { HostLayout };

package/dist/esm/src/embedded/livestream/host/HostLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HostLayout.js","sources":["../../../../../../../../src/embedded/livestream/host/HostLayout.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport clsx from 'clsx';\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n Restricted,\n useCallStateHooks,\n useI18n,\n} from '@stream-io/video-react-bindings';\nimport { useLayout } from '../../hooks';\nimport {\n CallParticipantsList,\n CancelCallConfirmButton,\n CompositeButton,\n DeviceSelectorAudioInput,\n DeviceSelectorAudioOutput,\n Icon,\n MicCaptureErrorNotification,\n PermissionRequests,\n ReactionsButton,\n RecordCallConfirmationButton,\n ScreenShareButton,\n ToggleAudioPublishingButton,\n ToggleVideoPublishingButton,\n WithTooltip,\n} from '../../../components';\nimport { useCallDuration } from '../../hooks';\nimport {\n CameraMenuWithBlur,\n ConnectionNotification,\n ViewersCount,\n} from '../../shared';\n\nexport type HostViewProps = {\n isLive: boolean;\n isBackstageEnabled: boolean;\n onGoLive: () => void;\n onStopLive: () => void;\n};\n\nexport const HostLayout = ({\n isLive,\n isBackstageEnabled,\n onGoLive,\n onStopLive,\n}: HostViewProps) => {\n const { t } = useI18n();\n const { useParticipantCount, useCallSession } = useCallStateHooks();\n const participantCount = useParticipantCount();\n const session = useCallSession();\n const { elapsed } = useCallDuration(session?.live_started_at);\n const { Component: LayoutComponent, props: layoutProps } = useLayout();\n const [showParticipants, setShowParticipants] = useState(false);\n\n const handleCloseParticipants = useCallback(() => {\n setShowParticipants(false);\n }, []);\n\n const handleToggleParticipants = useCallback(() => {\n setShowParticipants((prev) => !prev);\n }, []);\n\n const livestreamStatus = (\n <div\n className=\"str-video__embedded-livestream-duration\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n <span\n className={\n isLive\n ? 'str-video__embedded-livestream-duration__live-badge'\n : 'str-video__embedded-livestream-duration__backstage-badge'\n }\n >\n {isLive ? t('Live') : t('Backstage')}\n </span>\n <ViewersCount count={participantCount} />\n {isLive && elapsed && (\n <span className=\"str-video__embedded-livestream-duration__elapsed\">\n {elapsed}\n </span>\n )}\n </div>\n );\n\n return (\n <div className=\"str-video__embedded-call str-video__embedded-livestream\">\n <ConnectionNotification />\n <PermissionRequests />\n <div className=\"str-video__embedded-call-header\">\n {livestreamStatus}\n <CancelCallConfirmButton />\n </div>\n <div className=\"str-video__embedded-layout\">\n <div className=\"str-video__embedded-layout__stage\">\n <LayoutComponent {...layoutProps} />\n </div>\n\n <div\n className={clsx(\n 'str-video__embedded-sidebar',\n showParticipants && 'str-video__embedded-sidebar--open',\n )}\n >\n {showParticipants && (\n <div className=\"str-video__embedded-participants\">\n <CallParticipantsList onClose={handleCloseParticipants} />\n </div>\n )}\n </div>\n </div>\n <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-mobile\">\n <ReactionsButton />\n </div>\n </Restricted>\n <div className=\"str-video__embedded-desktop\">{livestreamStatus}</div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n <Restricted\n requiredGrants={[OwnCapability.SEND_AUDIO]}\n hasPermissionsOnly\n >\n <MicCaptureErrorNotification>\n <ToggleAudioPublishingButton\n Menu={\n <>\n <DeviceSelectorAudioOutput\n visualType=\"list\"\n title={t('Speaker')}\n />\n <DeviceSelectorAudioInput\n visualType=\"list\"\n title={t('Microphone')}\n />\n </>\n }\n menuPlacement=\"top\"\n />\n </MicCaptureErrorNotification>\n </Restricted>\n <Restricted\n requiredGrants={[OwnCapability.SEND_VIDEO]}\n hasPermissionsOnly\n >\n <ToggleVideoPublishingButton\n Menu={<CameraMenuWithBlur />}\n menuPlacement=\"top\"\n />\n </Restricted>\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-desktop\">\n <ReactionsButton />\n </div>\n </Restricted>\n <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n <div className=\"str-video__embedded-desktop\">\n <ScreenShareButton />\n </div>\n </Restricted>\n <RecordCallConfirmationButton />\n {isBackstageEnabled && (\n <Restricted requiredGrants={[OwnCapability.UPDATE_CALL]}>\n {isLive ? (\n <WithTooltip title={t('End Stream')}>\n <button\n type=\"button\"\n className=\"str-video__embedded-end-stream-button\"\n onClick={onStopLive}\n >\n <Icon icon=\"call-end\" />\n <span>{t('Stop Live')}</span>\n </button>\n </WithTooltip>\n ) : (\n <WithTooltip title={t('Start Stream')}>\n <button\n type=\"button\"\n className=\"str-video__embedded-go-live-button\"\n onClick={onGoLive}\n >\n <Icon icon=\"streaming\" />\n <span>{t('Go Live')}</span>\n </button>\n </WithTooltip>\n )}\n </Restricted>\n )}\n <div className=\"str-video__embedded-desktop\">\n <CancelCallConfirmButton />\n </div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n <WithTooltip title={t('Participants')}>\n <CompositeButton\n active={showParticipants}\n aria-label={t('Participants')}\n aria-pressed={showParticipants}\n onClick={handleToggleParticipants}\n >\n <Icon icon=\"participants\" />\n </CompositeButton>\n </WithTooltip>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"HostLayout.js","sources":["../../../../../../../../src/embedded/livestream/host/HostLayout.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport clsx from 'clsx';\nimport { OwnCapability } from '@stream-io/video-client';\nimport { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { useLayout } from '../../hooks';\nimport {\n Button,\n CallParticipantsList,\n CancelCallConfirmButton,\n CompositeButton,\n DeviceSelectorAudioInput,\n DeviceSelectorAudioOutput,\n Icon,\n MicCaptureErrorNotification,\n PermissionRequests,\n ReactionsButton,\n RecordCallConfirmationButton,\n ScreenShareButton,\n ToggleAudioPublishingButton,\n ToggleVideoPublishingButton,\n WithTooltip,\n} from '../../../components';\nimport { useCallDuration } from '../../hooks';\nimport {\n CameraMenuWithBlur,\n ConnectionNotification,\n ViewersCount,\n} from '../../shared';\n\nexport type HostViewProps = {\n isLive: boolean;\n isBackstageEnabled: boolean;\n onGoLive: () => void;\n onStopLive: () => void;\n};\n\nexport const HostLayout = ({\n isLive,\n isBackstageEnabled,\n onGoLive,\n onStopLive,\n}: HostViewProps) => {\n const { t } = useI18n();\n const { useParticipantCount, useCallSession } = useCallStateHooks();\n const participantCount = useParticipantCount();\n const session = useCallSession();\n const { elapsed } = useCallDuration(session?.live_started_at);\n const { Component: LayoutComponent, props: layoutProps } = useLayout();\n const [showParticipants, setShowParticipants] = useState(false);\n\n const handleCloseParticipants = useCallback(() => {\n setShowParticipants(false);\n }, []);\n\n const handleToggleParticipants = useCallback(() => {\n setShowParticipants((prev) => !prev);\n }, []);\n\n const livestreamStatus = (\n <div\n className=\"str-video__embedded-livestream-duration\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n <span\n className={\n isLive\n ? 'str-video__embedded-livestream-duration__live-badge'\n : 'str-video__embedded-livestream-duration__backstage-badge'\n }\n >\n {isLive\n ? t('common.live.label', 'Live')\n : t('livestreamHost.backstage.text', 'Backstage')}\n </span>\n <ViewersCount count={participantCount} />\n {isLive && elapsed && (\n <span className=\"str-video__embedded-livestream-duration__elapsed\">\n {elapsed}\n </span>\n )}\n </div>\n );\n\n return (\n <div className=\"str-video__embedded-call str-video__embedded-livestream\">\n <ConnectionNotification />\n <PermissionRequests />\n <div className=\"str-video__embedded-call-header\">\n {livestreamStatus}\n <CancelCallConfirmButton />\n </div>\n <div className=\"str-video__embedded-layout\">\n <div className=\"str-video__embedded-layout__stage\">\n <LayoutComponent {...layoutProps} />\n </div>\n\n <div\n className={clsx(\n 'str-video__embedded-sidebar',\n showParticipants && 'str-video__embedded-sidebar--open',\n )}\n >\n {showParticipants && (\n <div className=\"str-video__embedded-participants\">\n <CallParticipantsList onClose={handleCloseParticipants} />\n </div>\n )}\n </div>\n </div>\n <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-mobile\">\n <ReactionsButton />\n </div>\n </Restricted>\n <div className=\"str-video__embedded-desktop\">{livestreamStatus}</div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n <Restricted\n requiredGrants={[OwnCapability.SEND_AUDIO]}\n hasPermissionsOnly\n >\n <MicCaptureErrorNotification>\n <ToggleAudioPublishingButton\n Menu={\n <>\n <DeviceSelectorAudioOutput\n visualType=\"list\"\n title={t('common.speaker.label', 'Speaker')}\n />\n <DeviceSelectorAudioInput\n visualType=\"list\"\n title={t('common.microphone.label', 'Microphone')}\n />\n </>\n }\n menuPlacement=\"top\"\n />\n </MicCaptureErrorNotification>\n </Restricted>\n <Restricted\n requiredGrants={[OwnCapability.SEND_VIDEO]}\n hasPermissionsOnly\n >\n <ToggleVideoPublishingButton\n Menu={<CameraMenuWithBlur />}\n menuPlacement=\"top\"\n />\n </Restricted>\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-desktop\">\n <ReactionsButton />\n </div>\n </Restricted>\n <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n <div className=\"str-video__embedded-desktop\">\n <ScreenShareButton />\n </div>\n </Restricted>\n <RecordCallConfirmationButton />\n {isBackstageEnabled && (\n <Restricted requiredGrants={[OwnCapability.UPDATE_CALL]}>\n {isLive ? (\n <WithTooltip\n title={t('livestreamHost.endStream.title', 'End Stream')}\n >\n <Button\n variant=\"secondary\"\n size=\"sm\"\n className=\"str-video__embedded-end-stream-button\"\n onClick={onStopLive}\n >\n <Icon icon=\"call-end\" />\n <span>{t('livestreamHost.endLive.label', 'End Live')}</span>\n </Button>\n </WithTooltip>\n ) : (\n <WithTooltip\n title={t('livestreamHost.startStream.title', 'Start Stream')}\n >\n <Button\n variant=\"primary\"\n size=\"sm\"\n className=\"str-video__embedded-go-live-button\"\n onClick={onGoLive}\n >\n <Icon icon=\"streaming\" />\n <span>{t('livestreamHost.goLive.label', 'Go Live')}</span>\n </Button>\n </WithTooltip>\n )}\n </Restricted>\n )}\n <div className=\"str-video__embedded-desktop\">\n <CancelCallConfirmButton />\n </div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n <WithTooltip title={t('common.participants.label', 'Participants')}>\n <CompositeButton\n active={showParticipants}\n aria-label={t('common.participants.label', 'Participants')}\n aria-pressed={showParticipants}\n onClick={handleToggleParticipants}\n >\n <Icon icon=\"participants\" />\n </CompositeButton>\n </WithTooltip>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/src/embedded/livestream/host/HostStateRouter.js CHANGED Viewed

@@ -1,12 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { CallingState } from '@stream-io/video-client';
-import { useCall, useI18n, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { HostLayout } from './HostLayout.js';
 import 'clsx';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import '../../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
 import '../../../components/CallControls/RecordCallButton.js';
 import '../../../components/CallControls/ReactionsButton.js';
@@ -14,13 +19,10 @@ 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';
@@ -31,6 +33,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';
@@ -94,8 +97,10 @@ const HostStateRouter = () => {
     if (callingState === CallingState.IDLE ||
         callingState === CallingState.UNKNOWN) {
         return (jsx(Lobby, { onJoin: handleJoin, title: isBackstageEnabled
-                ? t('Prepare your livestream')
-                : t('Ready to go live'), joinLabel: isBackstageEnabled ? t('Enter Backstage') : t('Go Live') }));
+                ? t('livestreamHost.prepareLivestream.title', 'Prepare your livestream')
+                : t('livestreamHost.readyToGoLive.title', 'Ready to go live'), joinLabel: isBackstageEnabled
+                ? t('livestreamHost.enterBackstage.label', 'Enter Backstage')
+                : t('livestreamHost.goLive.label', 'Go Live') }));
     }
     if (callingState === CallingState.JOINING && !localParticipant) {
         return jsx(LoadingIndicator, { className: "str-video__embedded-loading" });

package/dist/esm/src/embedded/livestream/host/HostStateRouter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HostStateRouter.js","sources":["../../../../../../../../src/embedded/livestream/host/HostStateRouter.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { CallingState } from '@stream-io/video-client';\nimport {\n useCall~~,\n~~ useCallStateHooks~~,\n useI18n,\n~~} from '@stream-io/video-react-bindings';\n\nimport { HostLayout } from './HostLayout';\nimport { LoadingIndicator } from '../../../components';\nimport { CallFeedback, JoinError, Lobby } from '../../shared';\nimport { useEmbeddedConfiguration } from '../../context';\n\nexport const HostStateRouter = () => {\n const call = useCall();\n const { t } = useI18n();\n const { onError } = useEmbeddedConfiguration();\n const {\n useCallCallingState,\n useIsCallLive,\n useCallSettings,\n useLocalParticipant,\n } = useCallStateHooks();\n const callingState = useCallCallingState();\n const isLive = useIsCallLive();\n const localParticipant = useLocalParticipant();\n const settings = useCallSettings();\n const isBackstageEnabled = settings?.backstage?.enabled ?? true;\n\n const [joinError, setJoinError] = useState(false);\n const handleJoin = useCallback(async () => {\n if (!call) return;\n\n setJoinError(false);\n try {\n if (callingState !== CallingState.JOINED) {\n await call.join();\n }\n } catch (err) {\n onError?.(err);\n setJoinError(true);\n }\n }, [call, onError, callingState]);\n\n const handleGoLive = useCallback(async () => {\n if (!call) return;\n try {\n await call.goLive();\n } catch (err) {\n onError?.(err);\n }\n }, [call, onError]);\n\n const handleStopLive = useCallback(async () => {\n if (!call) return;\n try {\n await call.stopLive();\n } catch (err) {\n onError?.(err);\n }\n }, [call, onError]);\n\n if (joinError) {\n return <JoinError onJoin={handleJoin} />;\n }\n\n if (\n callingState === CallingState.IDLE \|\|\n callingState === CallingState.UNKNOWN\n ) {\n return (\n <Lobby\n onJoin={handleJoin}\n title={\n isBackstageEnabled\n ? t('Prepare your livestream')\n : t('Ready to go live')\n }\n joinLabel={isBackstageEnabled ? t('Enter Backstage') : t('Go Live')}\n />\n );\n }\n\n if (callingState === CallingState.JOINING && !localParticipant) {\n return <LoadingIndicator className=\"str-video__embedded-loading\" />;\n }\n\n if (callingState === CallingState.LEFT) {\n return <CallFeedback onJoin={handleJoin} />;\n }\n\n return (\n <HostLayout\n isLive={isLive}\n isBackstageEnabled={isBackstageEnabled}\n onGoLive={handleGoLive}\n onStopLive={handleStopLive}\n />\n );\n};\n"],"names":["_jsx"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO~~,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,wBAAwB,EAAE;AAC9C,IAAA,MAAM,EACJ,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,mBAAmB,GACpB,GAAG,iBAAiB,EAAE;AACvB,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAC1C,IAAA,MAAM,MAAM,GAAG,aAAa,EAAE;AAC9B,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,QAAQ,GAAG,eAAe,EAAE;IAClC,MAAM,kBAAkB,GAAG,QAAQ,EAAE,SAAS,EAAE,OAAO,IAAI,IAAI;IAE/D,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;AACF,YAAA,IAAI,YAAY,KAAK,YAAY,CAAC,MAAM,EAAE;AACxC,gBAAA,MAAM,IAAI,CAAC,IAAI,EAAE;YACnB;QACF;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,GAAG,GAAG,CAAC;YACd,YAAY,CAAC,IAAI,CAAC;QACpB;IACF,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AAEjC,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,YAAW;AAC1C,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,CAAC,MAAM,EAAE;QACrB;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,GAAG,GAAG,CAAC;QAChB;AACF,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAEnB,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,YAAW;AAC5C,QAAA,IAAI,CAAC,IAAI;YAAE;AACX,QAAA,IAAI;AACF,YAAA,MAAM,IAAI,CAAC,QAAQ,EAAE;QACvB;QAAE,OAAO,GAAG,EAAE;AACZ,YAAA,OAAO,GAAG,GAAG,CAAC;QAChB;AACF,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEnB,IAAI,SAAS,EAAE;AACb,QAAA,OAAOA,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC1C;AAEA,IAAA,IACE,YAAY,KAAK,YAAY,CAAC,IAAI;AAClC,QAAA,YAAY,KAAK,YAAY,CAAC,OAAO,EACrC;QACA,QACEA,GAAA,CAAC,KAAK,EAAA,EACJ,MAAM,EAAE,UAAU,EAClB,KAAK,EACH;AACE,kBAAE,CAAC,~~CAAC~~,yBAAyB;~~kBAC3B~~,CAAC,CAAC,kBAAkB,CAAC,~~EAE3B~~,SAAS,~~EAAE~~,~~kBAAkB~~,~~GAAG,~~CAAC,CAAC,~~iBAAiB~~,~~CAAC~~,~~GAAG~~,CAAC,CAAC,SAAS,CAAC,EAAA,~~CACnE~~;IAEN;IAEA,IAAI,YAAY,KAAK,YAAY,CAAC,OAAO,IAAI,CAAC,gBAAgB,EAAE;AAC9D,QAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,6BAA6B,GAAG;IACrE;AAEA,IAAA,IAAI,YAAY,KAAK,YAAY,CAAC,IAAI,EAAE;AACtC,QAAA,OAAOA,IAAC,YAAY,EAAA,EAAC,MAAM,EAAE,UAAU,GAAI;IAC7C;IAEA,QACEA,IAAC,UAAU,EAAA,EACT,MAAM,EAAE,MAAM,EACd,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,cAAc,EAAA,CAC1B;AAEN;;;;"}
1	+ {"version":3,"file":"HostStateRouter.js","sources":["../../../../../../../../src/embedded/livestream/host/HostStateRouter.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { CallingState } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\n\nimport { HostLayout } from './HostLayout';\nimport { LoadingIndicator } from '../../../components';\nimport { CallFeedback, JoinError, Lobby } from '../../shared';\nimport { useEmbeddedConfiguration } from '../../context';\n\nexport const HostStateRouter = () => {\n const call = useCall();\n const { t } = useI18n();\n const { onError } = useEmbeddedConfiguration();\n const {\n useCallCallingState,\n useIsCallLive,\n useCallSettings,\n useLocalParticipant,\n } = useCallStateHooks();\n const callingState = useCallCallingState();\n const isLive = useIsCallLive();\n const localParticipant = useLocalParticipant();\n const settings = useCallSettings();\n const isBackstageEnabled = settings?.backstage?.enabled ?? true;\n\n const [joinError, setJoinError] = useState(false);\n const handleJoin = useCallback(async () => {\n if (!call) return;\n\n setJoinError(false);\n try {\n if (callingState !== CallingState.JOINED) {\n await call.join();\n }\n } catch (err) {\n onError?.(err);\n setJoinError(true);\n }\n }, [call, onError, callingState]);\n\n const handleGoLive = useCallback(async () => {\n if (!call) return;\n try {\n await call.goLive();\n } catch (err) {\n onError?.(err);\n }\n }, [call, onError]);\n\n const handleStopLive = useCallback(async () => {\n if (!call) return;\n try {\n await call.stopLive();\n } catch (err) {\n onError?.(err);\n }\n }, [call, onError]);\n\n if (joinError) {\n return <JoinError onJoin={handleJoin} />;\n }\n\n if (\n callingState === CallingState.IDLE \|\|\n callingState === CallingState.UNKNOWN\n ) {\n return (\n <Lobby\n onJoin={handleJoin}\n title={\n isBackstageEnabled\n ? t(\n 'livestreamHost.prepareLivestream.title',\n 'Prepare your livestream',\n )\n : t('livestreamHost.readyToGoLive.title', 'Ready to go live')\n }\n joinLabel={\n isBackstageEnabled\n ? t('livestreamHost.enterBackstage.label', 'Enter Backstage')\n : t('livestreamHost.goLive.label', 'Go Live')\n }\n />\n );\n }\n\n if (callingState === CallingState.JOINING && !localParticipant) {\n return <LoadingIndicator className=\"str-video__embedded-loading\" />;\n }\n\n if (callingState === CallingState.LEFT) {\n return <CallFeedback onJoin={handleJoin} />;\n }\n\n return (\n <HostLayout\n isLive={isLive}\n isBackstageEnabled={isBackstageEnabled}\n onGoLive={handleGoLive}\n onStopLive={handleStopLive}\n />\n );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/esm/src/embedded/livestream/viewer/ViewerLayout.js CHANGED Viewed

@@ -2,13 +2,18 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import clsx from 'clsx';
 import { OwnCapability } from '@stream-io/video-client';
-import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import { useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import '@stream-io/i18n';
+import { useI18n } from '../../../i18n/TranslationContext.js';
+import '@stream-io/i18n/react';
 import { useLayout } from '../../hooks/useLayout.js';
 import { useWakeLock } from '../../hooks/useWakeLock.js';
 import { useCallDuration } from '../../hooks/useCallDuration.js';
 import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
-import { CompositeButton } from '../../../components/Button/CompositeButton.js';
+import '../../../components/Badge/Badge.js';
+import '../../../components/Button/Button.js';
 import '../../../components/Button/IconButton.js';
+import { CompositeButton } from '../../../components/Button/CompositeButton.js';
 import '@floating-ui/react';
 import { MicCaptureErrorNotification } from '../../../components/Notification/MicCaptureErrorNotification.js';
 import '../../../components/CallControls/RecordCallButton.js';
@@ -18,16 +23,13 @@ import { WithTooltip } from '../../../components/Tooltip/WithTooltip.js';
 import { ToggleAudioPublishingButton } from '../../../components/CallControls/ToggleAudioButton.js';
 import { ToggleVideoPublishingButton } from '../../../components/CallControls/ToggleVideoButton.js';
 import { CancelCallConfirmButton } from '../../../components/CallControls/CancelCallButton.js';
-import '../../../components/CallControls/CallStatsButton.js';
 import '../../../components/DeviceSettings/DeviceSettings.js';
 import '../../../components/DropdownSelect/DropdownSelect.js';
 import '../../../components/Menu/MenuToggle.js';
 import { DeviceSelectorAudioOutput, DeviceSelectorAudioInput } from '../../../components/DeviceSettings/DeviceSelectorAudio.js';
 import { CallParticipantsList } from '../../../components/CallParticipantsList/CallParticipantsList.js';
 import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
-import '../../../components/CallStats/CallStats.js';
 import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
-import '../../../components/RingingCall/RingingCall.js';
 import '../../../components/Permissions/PermissionRequests.js';
 import '../../../core/components/Video/Video.js';
 import '../../../core/components/Video/BaseVideo.js';
@@ -40,6 +42,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';
@@ -67,7 +70,7 @@ const ViewerLayout = () => {
     const handleToggleParticipants = useCallback(() => {
         setShowParticipants((prev) => !prev);
     }, []);
-    return (jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsx(ConnectionNotification, {}), jsxs("div", { className: "str-video__embedded-call-header", children: [jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('Live') }), jsx(ViewersCount, { count: participantCount }), elapsed && (jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }), jsx(CancelCallConfirmButton, {})] }), jsxs("div", { className: "str-video__embedded-layout", children: [jsx("div", { className: "str-video__embedded-layout__stage", children: jsx(LayoutComponent, { ...layoutProps }) }), jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsx("div", { className: "str-video__embedded-participants", children: jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), jsx("div", { className: "str-video__embedded-desktop", children: jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('Live') }), jsx(ViewersCount, { count: participantCount }), elapsed && (jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }) })] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') }), jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] })] }));
+    return (jsxs("div", { className: "str-video__embedded-call str-video__embedded-livestream", children: [jsx(ConnectionNotification, {}), jsxs("div", { className: "str-video__embedded-call-header", children: [jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('common.live.label', 'Live') }), jsx(ViewersCount, { count: participantCount }), elapsed && (jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }), jsx(CancelCallConfirmButton, {})] }), jsxs("div", { className: "str-video__embedded-layout", children: [jsx("div", { className: "str-video__embedded-layout__stage", children: jsx(LayoutComponent, { ...layoutProps }) }), jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsx("div", { className: "str-video__embedded-participants", children: jsx(CallParticipantsList, { onClose: handleCloseParticipants }) })) })] }), jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), jsx("div", { className: "str-video__embedded-desktop", children: jsxs("div", { className: "str-video__embedded-livestream-duration", children: [jsx("span", { className: "str-video__embedded-livestream-duration__live-badge", children: t('common.live.label', 'Live') }), jsx(ViewersCount, { count: participantCount }), elapsed && (jsx("span", { className: "str-video__embedded-livestream-duration__elapsed", children: elapsed }))] }) })] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('common.speaker.label', 'Speaker') }), jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('common.microphone.label', 'Microphone') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('common.participants.label', 'Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('common.participants.label', 'Participants'), "aria-pressed": showParticipants, onClick: handleToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] })] }));
 };
 export { ViewerLayout };

package/dist/esm/src/embedded/livestream/viewer/ViewerLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewerLayout.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerLayout.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport clsx from 'clsx';\nimport { OwnCapability } from '@stream-io/video-client';\nimport {\n Restricted~~,\n~~ useCallStateHooks~~,\n useI18n,\n~~} from '@stream-io/video-react-bindings';\nimport { useCallDuration, useLayout, useWakeLock } from '../../hooks';\nimport {\n CallParticipantsList,\n CancelCallConfirmButton,\n CompositeButton,\n DeviceSelectorAudioInput,\n DeviceSelectorAudioOutput,\n Icon,\n MicCaptureErrorNotification,\n ReactionsButton,\n ToggleAudioPublishingButton,\n ToggleVideoPublishingButton,\n WithTooltip,\n} from '../../../components';\nimport {\n CameraMenuWithBlur,\n ConnectionNotification,\n ViewersCount,\n} from '../../shared';\n\nexport const ViewerLayout = () => {\n useWakeLock();\n const { t } = useI18n();\n\n const { useParticipantCount, useCallSession } = useCallStateHooks();\n const participantCount = useParticipantCount();\n const session = useCallSession();\n const { elapsed } = useCallDuration(session?.live_started_at);\n const { Component: LayoutComponent, props: layoutProps } = useLayout();\n const [showParticipants, setShowParticipants] = useState(false);\n\n const handleCloseParticipants = useCallback(() => {\n setShowParticipants(false);\n }, []);\n\n const handleToggleParticipants = useCallback(() => {\n setShowParticipants((prev) => !prev);\n }, []);\n\n return (\n <div className=\"str-video__embedded-call str-video__embedded-livestream\">\n <ConnectionNotification />\n <div className=\"str-video__embedded-call-header\">\n <div className=\"str-video__embedded-livestream-duration\">\n <span className=\"str-video__embedded-livestream-duration__live-badge\">\n {t('Live')}\n </span>\n <ViewersCount count={participantCount} />\n {elapsed && (\n <span className=\"str-video__embedded-livestream-duration__elapsed\">\n {elapsed}\n </span>\n )}\n </div>\n <CancelCallConfirmButton />\n </div>\n <div className=\"str-video__embedded-layout\">\n <div className=\"str-video__embedded-layout__stage\">\n <LayoutComponent {...layoutProps} />\n </div>\n\n <div\n className={clsx(\n 'str-video__embedded-sidebar',\n showParticipants && 'str-video__embedded-sidebar--open',\n )}\n >\n {showParticipants && (\n <div className=\"str-video__embedded-participants\">\n <CallParticipantsList onClose={handleCloseParticipants} />\n </div>\n )}\n </div>\n </div>\n <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-mobile\">\n <ReactionsButton />\n </div>\n </Restricted>\n <div className=\"str-video__embedded-desktop\">\n <div className=\"str-video__embedded-livestream-duration\">\n <span className=\"str-video__embedded-livestream-duration__live-badge\">\n {t('Live')}\n </span>\n <ViewersCount count={participantCount} />\n {elapsed && (\n <span className=\"str-video__embedded-livestream-duration__elapsed\">\n {elapsed}\n </span>\n )}\n </div>\n </div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n <Restricted\n requiredGrants={[OwnCapability.SEND_AUDIO]}\n hasPermissionsOnly\n >\n <MicCaptureErrorNotification>\n <ToggleAudioPublishingButton\n Menu={\n <>\n <DeviceSelectorAudioOutput\n visualType=\"list\"\n title={t('Speaker')}\n />\n <DeviceSelectorAudioInput\n visualType=\"list\"\n title={t('Microphone')}\n />\n </>\n }\n menuPlacement=\"top\"\n />\n </MicCaptureErrorNotification>\n </Restricted>\n <Restricted\n requiredGrants={[OwnCapability.SEND_VIDEO]}\n hasPermissionsOnly\n >\n <ToggleVideoPublishingButton\n Menu={<CameraMenuWithBlur />}\n menuPlacement=\"top\"\n />\n </Restricted>\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-desktop\">\n <ReactionsButton />\n </div>\n </Restricted>\n <div className=\"str-video__embedded-desktop\">\n <CancelCallConfirmButton />\n </div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n <WithTooltip title={t('Participants')}>\n <CompositeButton\n active={showParticipants}\n aria-label={t('Participants')}\n aria-pressed={showParticipants}\n onClick={handleToggleParticipants}\n >\n <Icon icon=\"participants\" />\n </CompositeButton>\n </WithTooltip>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO~~,MAAM,YAAY,GAAG,MAAK;AAC/B,IAAA,WAAW,EAAE;AACb,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,MAAM,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AACnE,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;IAChC,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC,OAAO,EAAE,eAAe,CAAC;AAC7D,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;IACtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE/D,IAAA,MAAM,uBAAuB,GAAG,WAAW,CAAC,MAAK;QAC/C,mBAAmB,CAAC,KAAK,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,wBAAwB,GAAG,WAAW,CAAC,MAAK;QAChD,mBAAmB,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yDAAyD,EAAA,QAAA,EAAA,CACtEC,IAAC,sBAAsB,EAAA,EAAA,CAAG,EAC1BD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,~~aAC9CA~~,~~IAAA~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EAAK,~~SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAClE,CAAC,CAAC,MAAM,CAAC,EAAA,~~CACL~~,EACPA,GAAA,CAAC,YAAY,IAAC,KAAK,EAAE,gBAAgB,EAAA,CAAI,EACxC,OAAO,KACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC/D,OAAO,EAAA,CACH,CACR,IACG,EACNA,GAAA,CAAC,uBAAuB,EAAA,EAAA,CAAG,~~IACvB~~,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,~~aACzCC~~,~~GAAA~~,~~CAAA~~,~~KAAA~~,~~EAAA~~,~~EAAK,~~SAAS,EAAC,mCAAmC,~~YAChDA~~,~~GAAA~~,~~CAAC~~,eAAe,~~OAAK~~,WAAW,EAAA,CAAI,~~GAChC~~,EAENA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,gBAAgB,IAAI,mCAAmC,CACxD,~~EAAA~~,~~QAAA,EAEA,~~gBAAgB,KACfA,~~aAAK~~,SAAS,EAAC,kCAAkC,~~EAAA,QAAA,EAC~~/CA,GAAA,CAAC,oBAAoB,~~EAAA~~,~~EAAC,~~OAAO,EAAE,uBAAuB,~~GAAI~~,EAAA,CACtD,CACP,~~GACG~~,CAAA,EAAA,CACF,EACND,~~cAAK~~,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CACzEA,~~cAAK~~,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAAA,CAChFC,~~GAAA~~,~~CAAC,~~UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,~~YACzDA~~,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,~~EAAA~~,~~QAAA,EACzCA,~~GAAA,CAAC,eAAe,~~KAAG~~,EAAA,~~CACf~~,EAAA,~~CACK~~,EACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,~~EAAA~~,~~QAAA,EAC1CD,~~IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDC,cAAM,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAClE,CAAC,CAAC,MAAM,CAAC,EAAA,~~CACL~~,EACPA,~~IAAC~~,YAAY,~~EAAA~~,~~EAAC,~~KAAK,EAAE,gBAAgB,~~GAAI~~,EACxC,OAAO,KACNA,~~GAAA~~,~~CAAA,MAAA,EAAA,EAAM,~~SAAS,EAAC,kDAAkD,~~YAC~~/D,OAAO,~~EAAA~~,~~CACH,~~CACR,CAAA,EAAA,CACG,~~GACF~~,CAAA,EAAA,CACF,EACND,~~cAAK~~,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAC9EC,~~GAAA~~,~~CAAC,~~UAAU,EAAA,EACT,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,~~EAAA~~,~~IAAA,EAAA,QAAA,EAElBA,~~GAAA,CAAC,2BAA2B,EAAA,EAAA,QAAA,EAC1BA,GAAA,CAAC,2BAA2B,EAAA,EAC1B,IAAI,EACFD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAC,yBAAyB,EAAA,EACxB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EAAA,~~CACnB~~,EACFA,GAAA,CAAC,wBAAwB,~~IACvB~~,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,~~GACtB~~,~~CAAA~~,~~EAAA~~,~~CACD,~~EAEL,aAAa,EAAC,KAAK,EAAA,CACnB,EAAA,CAC0B,~~GACnB~~,EACbA,GAAA,CAAC,UAAU,~~EAAA~~,~~EACT,~~cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,EAAA,IAAA,EAAA,QAAA,EAElBA,~~IAAC~~,2BAA2B,EAAA,EAC1B,IAAI,EAAEA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,EAC5B,aAAa,EAAC,KAAK,~~EAAA~~,~~CACnB,~~EAAA,CACS,EACbA,~~GAAA~~,~~CAAC,~~UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,~~YACzDA~~,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,~~YAC1CA~~,GAAA,CAAC,eAAe,~~KAAG~~,EAAA,~~CACf~~,EAAA,~~CACK~~,EACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,~~EAAA~~,~~QAAA~~,~~EAC1CA~~,~~IAAC,~~uBAAuB,~~EAAA~~,EAAA,~~CAAG~~,~~GACvB,~~CAAA,EAAA,CACF,EACNA,~~aAAK~~,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAChFA,~~IAAC~~,WAAW,~~EAAA~~,~~EAAC,~~KAAK,EAAE,CAAC,CAAC,cAAc,CAAC,~~EAAA~~,~~QAAA,EACnCA,~~GAAA,CAAC,eAAe,~~EAAA~~,~~EACd,~~MAAM,EAAE,gBAAgB,EAAA,YAAA,EACZ,CAAC,CAAC,cAAc,CAAC,EAAA,cAAA,~~EACf~~,gBAAgB,EAC9B,OAAO,EAAE,wBAAwB,EAAA,QAAA,EAEjCA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,EAAA,CACZ,EAAA,CACN,GACV,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}
1	+ {"version":3,"file":"ViewerLayout.js","sources":["../../../../../../../../src/embedded/livestream/viewer/ViewerLayout.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport clsx from 'clsx';\nimport { OwnCapability } from '@stream-io/video-client';\nimport { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';\nimport { useI18n } from '../../../i18n';\nimport { useCallDuration, useLayout, useWakeLock } from '../../hooks';\nimport {\n CallParticipantsList,\n CancelCallConfirmButton,\n CompositeButton,\n DeviceSelectorAudioInput,\n DeviceSelectorAudioOutput,\n Icon,\n MicCaptureErrorNotification,\n ReactionsButton,\n ToggleAudioPublishingButton,\n ToggleVideoPublishingButton,\n WithTooltip,\n} from '../../../components';\nimport {\n CameraMenuWithBlur,\n ConnectionNotification,\n ViewersCount,\n} from '../../shared';\n\nexport const ViewerLayout = () => {\n useWakeLock();\n const { t } = useI18n();\n\n const { useParticipantCount, useCallSession } = useCallStateHooks();\n const participantCount = useParticipantCount();\n const session = useCallSession();\n const { elapsed } = useCallDuration(session?.live_started_at);\n const { Component: LayoutComponent, props: layoutProps } = useLayout();\n const [showParticipants, setShowParticipants] = useState(false);\n\n const handleCloseParticipants = useCallback(() => {\n setShowParticipants(false);\n }, []);\n\n const handleToggleParticipants = useCallback(() => {\n setShowParticipants((prev) => !prev);\n }, []);\n\n return (\n <div className=\"str-video__embedded-call str-video__embedded-livestream\">\n <ConnectionNotification />\n <div className=\"str-video__embedded-call-header\">\n <div className=\"str-video__embedded-livestream-duration\">\n <span className=\"str-video__embedded-livestream-duration__live-badge\">\n {t('common.live.label', 'Live')}\n </span>\n <ViewersCount count={participantCount} />\n {elapsed && (\n <span className=\"str-video__embedded-livestream-duration__elapsed\">\n {elapsed}\n </span>\n )}\n </div>\n <CancelCallConfirmButton />\n </div>\n <div className=\"str-video__embedded-layout\">\n <div className=\"str-video__embedded-layout__stage\">\n <LayoutComponent {...layoutProps} />\n </div>\n\n <div\n className={clsx(\n 'str-video__embedded-sidebar',\n showParticipants && 'str-video__embedded-sidebar--open',\n )}\n >\n {showParticipants && (\n <div className=\"str-video__embedded-participants\">\n <CallParticipantsList onClose={handleCloseParticipants} />\n </div>\n )}\n </div>\n </div>\n <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-mobile\">\n <ReactionsButton />\n </div>\n </Restricted>\n <div className=\"str-video__embedded-desktop\">\n <div className=\"str-video__embedded-livestream-duration\">\n <span className=\"str-video__embedded-livestream-duration__live-badge\">\n {t('common.live.label', 'Live')}\n </span>\n <ViewersCount count={participantCount} />\n {elapsed && (\n <span className=\"str-video__embedded-livestream-duration__elapsed\">\n {elapsed}\n </span>\n )}\n </div>\n </div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n <Restricted\n requiredGrants={[OwnCapability.SEND_AUDIO]}\n hasPermissionsOnly\n >\n <MicCaptureErrorNotification>\n <ToggleAudioPublishingButton\n Menu={\n <>\n <DeviceSelectorAudioOutput\n visualType=\"list\"\n title={t('common.speaker.label', 'Speaker')}\n />\n <DeviceSelectorAudioInput\n visualType=\"list\"\n title={t('common.microphone.label', 'Microphone')}\n />\n </>\n }\n menuPlacement=\"top\"\n />\n </MicCaptureErrorNotification>\n </Restricted>\n <Restricted\n requiredGrants={[OwnCapability.SEND_VIDEO]}\n hasPermissionsOnly\n >\n <ToggleVideoPublishingButton\n Menu={<CameraMenuWithBlur />}\n menuPlacement=\"top\"\n />\n </Restricted>\n <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n <div className=\"str-video__embedded-desktop\">\n <ReactionsButton />\n </div>\n </Restricted>\n <div className=\"str-video__embedded-desktop\">\n <CancelCallConfirmButton />\n </div>\n </div>\n <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n <WithTooltip title={t('common.participants.label', 'Participants')}>\n <CompositeButton\n active={showParticipants}\n aria-label={t('common.participants.label', 'Participants')}\n aria-pressed={showParticipants}\n onClick={handleToggleParticipants}\n >\n <Icon icon=\"participants\" />\n </CompositeButton>\n </WithTooltip>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,YAAY,GAAG,MAAK;AAC/B,IAAA,WAAW,EAAE;AACb,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,MAAM,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AACnE,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;IAChC,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,CAAC,OAAO,EAAE,eAAe,CAAC;AAC7D,IAAA,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;IACtE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE/D,IAAA,MAAM,uBAAuB,GAAG,WAAW,CAAC,MAAK;QAC/C,mBAAmB,CAAC,KAAK,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,wBAAwB,GAAG,WAAW,CAAC,MAAK;QAChD,mBAAmB,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yDAAyD,EAAA,QAAA,EAAA,CACtEC,IAAC,sBAAsB,EAAA,EAAA,CAAG,EAC1BD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC9CA,cAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAClE,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,EAAA,CAC1B,EACPA,GAAA,CAAC,YAAY,IAAC,KAAK,EAAE,gBAAgB,EAAA,CAAI,EACxC,OAAO,KACNA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC/D,OAAO,EAAA,CACH,CACR,IACG,EACNA,GAAA,CAAC,uBAAuB,EAAA,EAAA,CAAG,CAAA,EAAA,CACvB,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCC,aAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAChDA,IAAC,eAAe,EAAA,EAAA,GAAK,WAAW,EAAA,CAAI,EAAA,CAChC,EAENA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CACb,6BAA6B,EAC7B,gBAAgB,IAAI,mCAAmC,CACxD,YAEA,gBAAgB,KACfA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,YAC/CA,GAAA,CAAC,oBAAoB,IAAC,OAAO,EAAE,uBAAuB,EAAA,CAAI,EAAA,CACtD,CACP,EAAA,CACG,CAAA,EAAA,CACF,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAAA,CACzEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAAA,CAChFC,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,YACzCA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EAAA,CACf,GACK,EACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,YAC1CD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,CACtDC,cAAM,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAClE,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,EAAA,CAC1B,EACPA,GAAA,CAAC,YAAY,IAAC,KAAK,EAAE,gBAAgB,EAAA,CAAI,EACxC,OAAO,KACNA,cAAM,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC/D,OAAO,GACH,CACR,CAAA,EAAA,CACG,EAAA,CACF,CAAA,EAAA,CACF,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAC9EC,IAAC,UAAU,EAAA,EACT,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,kBAElBA,GAAA,CAAC,2BAA2B,EAAA,EAAA,QAAA,EAC1BA,GAAA,CAAC,2BAA2B,EAAA,EAC1B,IAAI,EACFD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,GAAA,CAAC,yBAAyB,EAAA,EACxB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAA,CAC3C,EACFA,GAAA,CAAC,wBAAwB,EAAA,EACvB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,CAAC,CAAC,yBAAyB,EAAE,YAAY,CAAC,EAAA,CACjD,IACD,EAEL,aAAa,EAAC,KAAK,EAAA,CACnB,EAAA,CAC0B,EAAA,CACnB,EACbA,GAAA,CAAC,UAAU,IACT,cAAc,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,EAC1C,kBAAkB,EAAA,IAAA,EAAA,QAAA,EAElBA,GAAA,CAAC,2BAA2B,EAAA,EAC1B,IAAI,EAAEA,GAAA,CAAC,kBAAkB,EAAA,EAAA,CAAG,EAC5B,aAAa,EAAC,KAAK,GACnB,EAAA,CACS,EACbA,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EAAA,QAAA,EACzDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC1CA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EAAA,CACf,GACK,EACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,YAC1CA,GAAA,CAAC,uBAAuB,KAAG,EAAA,CACvB,CAAA,EAAA,CACF,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAChFA,GAAA,CAAC,WAAW,IAAC,KAAK,EAAE,CAAC,CAAC,2BAA2B,EAAE,cAAc,CAAC,YAChEA,GAAA,CAAC,eAAe,IACd,MAAM,EAAE,gBAAgB,EAAA,YAAA,EACZ,CAAC,CAAC,2BAA2B,EAAE,cAAc,CAAC,EAAA,cAAA,EAC5C,gBAAgB,EAC9B,OAAO,EAAE,wBAAwB,EAAA,QAAA,EAEjCA,IAAC,IAAI,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,EAAA,CACZ,EAAA,CACN,GACV,CAAA,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}

package/dist/esm/src/embedded/livestream/viewer/ViewerLobby.js CHANGED Viewed

@@ -1,10 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-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 '../../../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 { OwnCapability } from '@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,6 +32,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';
@@ -91,9 +94,9 @@ const ViewerLobby = ({ onJoin }) => {
         if (!startsAt)
             return null;
         if (startsAtPassed) {
-            return t('Livestream starts soon');
+            return t('livestream.backstage.startsSoon.text', 'Livestream starts soon');
         }
-        return t('Livestream starts at {{ time }}', {
+        return t('livestream.backstage.startsAt.text', 'Livestream starts at {{ time }}', {
             time: startsAt.toLocaleTimeString([], {
                 hour: '2-digit',
                 minute: '2-digit',
@@ -101,8 +104,8 @@ const ViewerLobby = ({ onJoin }) => {
         });
     };
     return (jsx("div", { className: "str-video__embedded-viewer-lobby", children: jsxs("div", { className: "str-video__embedded-viewer-lobby__content", children: [jsx("div", { className: "str-video__embedded-viewer-lobby__icon", children: jsx(Icon, { icon: "streaming" }) }), jsx("h2", { className: "str-video__embedded-viewer-lobby__title", children: canJoin
-                        ? t('Stream is ready!')
-                        : t('Waiting for the livestream to start') }), !canJoin && getStartsAtMessage() && (jsx("p", { className: "str-video__embedded-viewer-lobby__starts-at", children: getStartsAtMessage() })), participantCount > 0 && jsx(ViewersCount, { count: participantCount }), jsx("div", { className: "str-video__embedded-viewer-lobby__actions", children: canJoin ? (jsx("button", { className: "str-video__button", onClick: onJoin, children: t('Join Stream') })) : (jsxs("label", { className: "str-video__embedded-viewer-lobby__auto-join", children: [jsx("input", { type: "checkbox", checked: autoJoin, onChange: (e) => setAutoJoin(e.target.checked) }), jsx("span", { children: t('Join automatically when stream starts') })] })) })] }) }));
+                        ? t('livestreamViewer.lobby.streamReady.title', 'Stream is ready!')
+                        : t('livestreamViewer.lobby.waitingForStart.title', 'Waiting for the livestream to start') }), !canJoin && getStartsAtMessage() && (jsx("p", { className: "str-video__embedded-viewer-lobby__starts-at", children: getStartsAtMessage() })), participantCount > 0 && jsx(ViewersCount, { count: participantCount }), jsx("div", { className: "str-video__embedded-viewer-lobby__actions", children: canJoin ? (jsx(Button, { size: "sm", onClick: onJoin, children: t('livestreamViewer.lobby.joinStream.label', 'Join Stream') })) : (jsxs("label", { className: "str-video__embedded-viewer-lobby__auto-join", children: [jsx("input", { type: "checkbox", checked: autoJoin, onChange: (e) => setAutoJoin(e.target.checked) }), jsx("span", { children: t('livestreamViewer.lobby.joinAutomatically.text', 'Join automatically when stream starts') })] })) })] }) }));
 };
 export { ViewerLobby };