@stream-io/video-react-sdk 1.40.2 → 1.42.0

package/dist/esm/src/core/hooks/useTrackElementVisibility.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+
+const useTrackElementVisibility = ({ trackedElement, sessionId, trackType, }) => {
+    const call = useCall();
+    useEffect(() => {
+        if (!trackedElement || !call || trackType === 'none')
+            return;
+        return call.trackElementVisibility(trackedElement, sessionId, trackType);
+    }, [trackedElement, call, sessionId, trackType]);
+};
+
+export { useTrackElementVisibility };
+//# sourceMappingURL=useTrackElementVisibility.js.map

package/dist/esm/src/core/hooks/useTrackElementVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackElementVisibility.js","sources":["../../../../../../../src/core/hooks/useTrackElementVisibility.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { VideoTrackType } from '@stream-io/video-client';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport const useTrackElementVisibility = <T extends HTMLElement>({\n  trackedElement,\n  sessionId,\n  trackType,\n}: {\n  trackedElement: T | null;\n  sessionId: string;\n  trackType: VideoTrackType | 'none';\n}) => {\n  const call = useCall();\n  useEffect(() => {\n    if (!trackedElement || !call || trackType === 'none') return;\n    return call.trackElementVisibility(trackedElement, sessionId, trackType);\n  }, [trackedElement, call, sessionId, trackType]);\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,yBAAyB,GAAG,CAAwB,EAC/D,cAAc,EACd,SAAS,EACT,SAAS,GAKV,KAAI;AACH,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,IAAI,SAAS,KAAK,MAAM;YAAE;QACtD,OAAO,IAAI,CAAC,sBAAsB,CAAC,cAAc,EAAE,SAAS,EAAE,SAAS,CAAC;IAC1E,CAAC,EAAE,CAAC,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAClD;;;;"}

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

@@ -0,0 +1,83 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { useEffectEvent } from '@stream-io/video-react-bindings';
+import '../core/components/Audio/Audio.js';
+import '../core/components/Audio/ParticipantsAudio.js';
+import '@stream-io/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 { StreamCall } from '../core/components/StreamCall/StreamCall.js';
+import { StreamVideo } from '../core/components/StreamVideo/StreamVideo.js';
+import '../core/components/Video/BaseVideo.js';
+import '../core/components/Video/Video.js';
+import '../core/components/CallLayout/LivestreamLayout.js';
+import '../core/components/CallLayout/PaginatedGridLayout.js';
+import '../core/components/CallLayout/SpeakerLayout.js';
+import '../core/components/CallLayout/PipLayout/Pip.js';
+import '../core/components/CallLayout/PipLayout/Host.js';
+import '../core/components/CallLayout/PipLayout/Grid.js';
+import { BackgroundFiltersProvider } from '../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../components/Button/CompositeButton.js';
+import '../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../components/CallControls/RecordCallButton.js';
+import '../components/CallControls/ReactionsButton.js';
+import '../components/DeviceSettings/DeviceSettings.js';
+import '../components/DropdownSelect/DropdownSelect.js';
+import '../components/CallControls/CancelCallButton.js';
+import '../components/CallControls/CallStatsButton.js';
+import '../components/CallParticipantsList/CallParticipantsList.js';
+import '../components/CallParticipantsList/CallParticipantListingItem.js';
+import { LoadingIndicator } from '../components/LoadingIndicator/LoadingIndicator.js';
+import '../components/CallStats/CallStats.js';
+import { NoiseCancellationProvider } from '../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../components/RingingCall/RingingCall.js';
+import '../components/Permissions/PermissionRequests.js';
+import { StreamTheme } from '../components/StreamTheme/StreamTheme.js';
+import '../core/components/Video/DefaultVideoPlaceholder.js';
+import { ConfigurationProvider } from './context/ConfigurationContext.js';
+import './shared/Lobby/ToggleMicButton.js';
+import './shared/Lobby/ToggleCameraButton.js';
+import { useEmbeddedClient } from './hooks/useEmbeddedClient.js';
+
+const NoiseCancellationWrapper = ({ noiseCancellation, children, }) => {
+    if (!noiseCancellation) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx(NoiseCancellationProvider, { noiseCancellation: noiseCancellation, children: children }));
+};
+/**
+ * Shared provider wrapper for embedded components.
+ * Handles client/call initialization and wraps children with all necessary providers.
+ */
+const EmbeddedClientProvider = ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, onError, layout, theme, children, }) => {
+    const [showError, setShowError] = useState(false);
+    const onErrorStable = useEffectEvent(onError ?? console.error);
+    const handleError = useCallback((error) => {
+        setShowError(true);
+        onErrorStable(error);
+    }, [onErrorStable]);
+    const { client, call, noiseCancellation, noiseCancellationReady } = useEmbeddedClient({
+        apiKey,
+        user,
+        callId,
+        callType,
+        token,
+        tokenProvider,
+        logLevel,
+        handleError,
+    });
+    if (showError) {
+        return (jsx(StreamTheme, { className: "str-video__embedded", children: jsx("div", { className: "str-video__embedded-error", children: jsx("p", { className: "str-video__embedded-error__message", children: "An error occurred while initializing the client. Please try again later." }) }) }));
+    }
+    if (!call || !client || !noiseCancellationReady) {
+        return (jsx(StreamTheme, { className: "str-video__embedded", children: jsx(LoadingIndicator, { className: "str-video__embedded-loading" }) }));
+    }
+    return (jsx(StreamVideo, { client: client, children: jsx(StreamCall, { call: call, children: jsx(ConfigurationProvider, { layout: layout, onError: onErrorStable, children: jsx(BackgroundFiltersProvider, { children: jsx(NoiseCancellationWrapper, { noiseCancellation: noiseCancellation, children: jsx(StreamTheme, { className: "str-video__embedded", style: theme, children: children }) }) }) }) }) }));
+};
+
+export { EmbeddedClientProvider };
+//# sourceMappingURL=EmbeddedClientProvider.js.map

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

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

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

@@ -0,0 +1,65 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { OwnCapability } from '@stream-io/video-client';
+import { useI18n, useCallStateHooks, Restricted } from '@stream-io/video-react-bindings';
+import 'react';
+import 'clsx';
+import '../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import { CompositeButton } from '../../components/Button/CompositeButton.js';
+import '../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import { MicCaptureErrorNotification } from '../../components/Notification/MicCaptureErrorNotification.js';
+import { RecordCallConfirmationButton } from '../../components/CallControls/RecordCallButton.js';
+import { ReactionsButton } from '../../components/CallControls/ReactionsButton.js';
+import { ScreenShareButton } from '../../components/CallControls/ScreenShareButton.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 { Icon } from '../../components/Icon/Icon.js';
+import '../../components/DeviceSettings/DeviceSettings.js';
+import '../../components/DropdownSelect/DropdownSelect.js';
+import '../../components/Menu/MenuToggle.js';
+import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput } from '../../components/DeviceSettings/DeviceSelectorAudio.js';
+import { WithTooltip } from '../../components/Tooltip/WithTooltip.js';
+import '../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../components/CallStats/CallStats.js';
+import '../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../components/RingingCall/RingingCall.js';
+import '../../components/Permissions/PermissionRequests.js';
+import '../../core/components/Video/Video.js';
+import '../../core/components/Video/BaseVideo.js';
+import '../../core/components/Video/DefaultVideoPlaceholder.js';
+import '../../core/components/Audio/Audio.js';
+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/StreamCall/StreamCall.js';
+import '../../core/components/StreamVideo/StreamVideo.js';
+import '../../core/components/CallLayout/LivestreamLayout.js';
+import '../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../core/components/CallLayout/SpeakerLayout.js';
+import '../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../core/components/CallLayout/PipLayout/Host.js';
+import '../../core/components/CallLayout/PipLayout/Grid.js';
+import '../context/ConfigurationContext.js';
+import { CameraMenuWithBlur } from '../shared/BlurToggleButton/BlurToggleButton.js';
+import '../shared/Lobby/ToggleMicButton.js';
+import '../shared/Lobby/ToggleCameraButton.js';
+import { useCallDuration } from '../hooks/useCallDuration.js';
+
+/**
+ * Renders the active call control bar
+ */
+const CallControls = ({ showParticipants, onToggleParticipants, }) => {
+    const { t } = useI18n();
+    const { useCallSession } = useCallStateHooks();
+    const session = useCallSession();
+    const startedAt = session?.started_at;
+    const { elapsed } = useCallDuration(startedAt);
+    return (jsxs("div", { className: "str-video__embedded-call-controls str-video__call-controls", children: [jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--options", children: [jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-mobile", children: jsx(ReactionsButton, {}) }) }), startedAt && (jsxs("div", { className: "str-video__embedded-call-duration str-video__embedded-desktop", children: [jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] }))] }), jsxs("div", { className: "str-video__call-controls--group str-video__call-controls--media", children: [jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(MicCaptureErrorNotification, { children: jsx(ToggleAudioPublishingButton, { Menu: jsxs(Fragment, { children: [jsx(DeviceSelectorAudioInput, { visualType: "list", title: t('Microphone') }), jsx(DeviceSelectorAudioOutput, { visualType: "list", title: t('Speaker') })] }), menuPlacement: "top" }) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SEND_VIDEO], hasPermissionsOnly: true, children: jsx(ToggleVideoPublishingButton, { Menu: jsx(CameraMenuWithBlur, {}), menuPlacement: "top" }) }), jsx(Restricted, { requiredGrants: [OwnCapability.CREATE_REACTION], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ReactionsButton, {}) }) }), jsx(Restricted, { requiredGrants: [OwnCapability.SCREENSHARE], children: jsx("div", { className: "str-video__embedded-desktop", children: jsx(ScreenShareButton, {}) }) }), jsx(RecordCallConfirmationButton, {}), jsx("div", { className: "str-video__embedded-desktop", children: jsx(CancelCallConfirmButton, {}) })] }), jsx("div", { className: "str-video__call-controls--group str-video__call-controls--sidebar", children: jsx(WithTooltip, { title: t('Participants'), children: jsx(CompositeButton, { active: showParticipants, "aria-label": t('Participants'), "aria-pressed": showParticipants, onClick: onToggleParticipants, children: jsx(Icon, { icon: "participants" }) }) }) })] }));
+};
+
+export { CallControls };
+//# sourceMappingURL=CallControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CallControls.js","sources":["../../../../../../../src/embedded/call/CallControls.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport {\n  Restricted,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport {\n  CancelCallConfirmButton,\n  CompositeButton,\n  DeviceSelectorAudioInput,\n  DeviceSelectorAudioOutput,\n  Icon,\n  MicCaptureErrorNotification,\n  ReactionsButton,\n  RecordCallConfirmationButton,\n  ScreenShareButton,\n  ToggleAudioPublishingButton,\n  ToggleVideoPublishingButton,\n  WithTooltip,\n} from '../../components';\n\nimport { useCallDuration } from '../hooks';\nimport { CameraMenuWithBlur } from '../shared';\n\ninterface CallControlsProps {\n  showParticipants: boolean;\n  onToggleParticipants: () => void;\n}\n\n/**\n * Renders the active call control bar\n */\nexport const CallControls = ({\n  showParticipants,\n  onToggleParticipants,\n}: CallControlsProps) => {\n  const { t } = useI18n();\n  const { useCallSession } = useCallStateHooks();\n  const session = useCallSession();\n  const startedAt = session?.started_at;\n  const { elapsed } = useCallDuration(startedAt);\n\n  return (\n    <div className=\"str-video__embedded-call-controls str-video__call-controls\">\n      <div className=\"str-video__call-controls--group str-video__call-controls--options\">\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-mobile\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        {startedAt && (\n          <div className=\"str-video__embedded-call-duration str-video__embedded-desktop\">\n            <Icon\n              icon=\"verified\"\n              className=\"str-video__embedded-call-duration__icon\"\n            />\n            <span className=\"str-video__embedded-call-duration__time\">\n              {elapsed}\n            </span>\n          </div>\n        )}\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--media\">\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_AUDIO]}\n          hasPermissionsOnly\n        >\n          <MicCaptureErrorNotification>\n            <ToggleAudioPublishingButton\n              Menu={\n                <>\n                  <DeviceSelectorAudioInput\n                    visualType=\"list\"\n                    title={t('Microphone')}\n                  />\n                  <DeviceSelectorAudioOutput\n                    visualType=\"list\"\n                    title={t('Speaker')}\n                  />\n                </>\n              }\n              menuPlacement=\"top\"\n            />\n          </MicCaptureErrorNotification>\n        </Restricted>\n        <Restricted\n          requiredGrants={[OwnCapability.SEND_VIDEO]}\n          hasPermissionsOnly\n        >\n          <ToggleVideoPublishingButton\n            Menu={<CameraMenuWithBlur />}\n            menuPlacement=\"top\"\n          />\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ReactionsButton />\n          </div>\n        </Restricted>\n        <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>\n          <div className=\"str-video__embedded-desktop\">\n            <ScreenShareButton />\n          </div>\n        </Restricted>\n        <RecordCallConfirmationButton />\n        <div className=\"str-video__embedded-desktop\">\n          <CancelCallConfirmButton />\n        </div>\n      </div>\n      <div className=\"str-video__call-controls--group str-video__call-controls--sidebar\">\n        <WithTooltip title={t('Participants')}>\n          <CompositeButton\n            active={showParticipants}\n            aria-label={t('Participants')}\n            aria-pressed={showParticipants}\n            onClick={onToggleParticipants}\n          >\n            <Icon icon=\"participants\" />\n          </CompositeButton>\n        </WithTooltip>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import 'react';
+import '@stream-io/video-client';
+import '../../core/components/Audio/Audio.js';
+import '../../core/components/Audio/ParticipantsAudio.js';
+import '../../core/components/ParticipantView/ParticipantViewContext.js';
+import '../../components/Menu/MenuToggle.js';
+import { Icon } from '../../components/Icon/Icon.js';
+import '../../core/components/ParticipantView/ParticipantView.js';
+import '../../core/components/ParticipantView/DefaultParticipantViewUI.js';
+import '../../core/components/StreamCall/StreamCall.js';
+import '../../core/components/StreamVideo/StreamVideo.js';
+import '../../core/components/Video/BaseVideo.js';
+import '../../core/components/Video/Video.js';
+import '../../core/components/CallLayout/LivestreamLayout.js';
+import '../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../core/components/CallLayout/SpeakerLayout.js';
+import '../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../core/components/CallLayout/PipLayout/Host.js';
+import '../../core/components/CallLayout/PipLayout/Grid.js';
+import '../context/ConfigurationContext.js';
+import 'clsx';
+import '../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../components/Button/CompositeButton.js';
+import '../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../../components/CallControls/RecordCallButton.js';
+import '../../components/CallControls/ReactionsButton.js';
+import '../../components/DeviceSettings/DeviceSettings.js';
+import '../../components/DropdownSelect/DropdownSelect.js';
+import { CancelCallConfirmButton } from '../../components/CallControls/CancelCallButton.js';
+import '../../components/CallControls/CallStatsButton.js';
+import '../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../components/CallStats/CallStats.js';
+import '../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../components/RingingCall/RingingCall.js';
+import '../../components/Permissions/PermissionRequests.js';
+import '../../core/components/Video/DefaultVideoPlaceholder.js';
+import '../shared/Lobby/ToggleMicButton.js';
+import '../shared/Lobby/ToggleCameraButton.js';
+import { useCallDuration } from '../hooks/useCallDuration.js';
+
+/**
+ * Renders the call header bar with elapsed time and leave/end call button.
+ */
+const CallHeader = () => {
+    const { useCallSession } = useCallStateHooks();
+    const session = useCallSession();
+    const startedAt = session?.started_at;
+    const { elapsed } = useCallDuration(startedAt);
+    return (jsxs("div", { className: "str-video__embedded-call-header", children: [startedAt && (jsxs("div", { className: "str-video__embedded-call-duration", children: [jsx(Icon, { icon: "verified", className: "str-video__embedded-call-duration__icon" }), jsx("span", { className: "str-video__embedded-call-duration__time", children: elapsed })] })), jsx(CancelCallConfirmButton, {})] }));
+};
+
+export { CallHeader };
+//# sourceMappingURL=CallHeader.js.map

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

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

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

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import clsx from 'clsx';
+import { OwnCapability } from '@stream-io/video-client';
+import { Restricted } from '@stream-io/video-react-bindings';
+import '../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../components/Button/CompositeButton.js';
+import '../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import { SpeakingWhileMutedNotification } from '../../components/Notification/SpeakingWhileMutedNotification.js';
+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 { 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';
+import '../../core/components/Video/DefaultVideoPlaceholder.js';
+import { useLayout } from '../hooks/useLayout.js';
+import { useWakeLock } from '../hooks/useWakeLock.js';
+import '../context/ConfigurationContext.js';
+import { ConnectionNotification } from '../shared/ConnectionNotification/ConnectionNotification.js';
+import '../../core/components/Audio/Audio.js';
+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/StreamCall/StreamCall.js';
+import '../../core/components/StreamVideo/StreamVideo.js';
+import '../../core/components/CallLayout/LivestreamLayout.js';
+import '../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../core/components/CallLayout/SpeakerLayout.js';
+import '../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../core/components/CallLayout/PipLayout/Host.js';
+import '../../core/components/CallLayout/PipLayout/Grid.js';
+import '../shared/Lobby/ToggleMicButton.js';
+import '../shared/Lobby/ToggleCameraButton.js';
+import { CallControls } from './CallControls.js';
+import { CallHeader } from './CallHeader.js';
+
+/**
+ * CallLayout renders the active call experience with layout, controls and sidebar.
+ */
+const CallLayout = () => {
+    useWakeLock();
+    const [showParticipants, setShowParticipants] = useState(false);
+    const { Component: LayoutComponent, props: layoutProps } = useLayout();
+    const handleToggleParticipants = useCallback(() => {
+        setShowParticipants((prev) => !prev);
+    }, []);
+    return (jsxs("div", { className: "str-video__embedded-call", children: [jsx(ConnectionNotification, {}), jsx(PermissionRequests, {}), jsx("div", { className: "str-video__embedded-notifications", children: jsx(Restricted, { requiredGrants: [OwnCapability.SEND_AUDIO], hasPermissionsOnly: true, children: jsx(SpeakingWhileMutedNotification, {}) }) }), jsx(CallHeader, {}), jsxs("div", { className: "str-video__embedded-layout", children: [jsx("div", { className: "str-video__embedded-layout__stage", children: jsx(LayoutComponent, { ...layoutProps }) }), jsx("div", { className: clsx('str-video__embedded-sidebar', showParticipants && 'str-video__embedded-sidebar--open'), children: showParticipants && (jsx("div", { className: "str-video__embedded-participants", children: jsx(CallParticipantsList, { onClose: handleToggleParticipants }) })) })] }), jsx(CallControls, { showParticipants: showParticipants, onToggleParticipants: handleToggleParticipants })] }));
+};
+
+export { CallLayout };
+//# sourceMappingURL=CallLayout.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,87 @@
+import { jsx } from 'react/jsx-runtime';
+import { CallingState } from '@stream-io/video-client';
+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/Button/IconButton.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/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';
+import '../../core/components/Video/DefaultVideoPlaceholder.js';
+import { CallFeedback } from '../shared/CallFeedback/CallFeedback.js';
+import '../../core/components/Audio/Audio.js';
+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/StreamCall/StreamCall.js';
+import '../../core/components/StreamVideo/StreamVideo.js';
+import '../../core/components/CallLayout/LivestreamLayout.js';
+import '../../core/components/CallLayout/PaginatedGridLayout.js';
+import '../../core/components/CallLayout/SpeakerLayout.js';
+import '../../core/components/CallLayout/PipLayout/Pip.js';
+import '../../core/components/CallLayout/PipLayout/Host.js';
+import '../../core/components/CallLayout/PipLayout/Grid.js';
+import { JoinError } from '../shared/JoinError/JoinError.js';
+import { Lobby } from '../shared/Lobby/Lobby.js';
+import { CallLayout } from './CallLayout.js';
+import { useEmbeddedConfiguration } from '../context/ConfigurationContext.js';
+
+/**
+ * CallStateRouter is the state decider component that manages view state transitions.
+ */
+const CallStateRouter = () => {
+    const call = useCall();
+    const { useCallCallingState, useLocalParticipant } = useCallStateHooks();
+    const localParticipant = useLocalParticipant();
+    const callingState = useCallCallingState();
+    const { onError } = useEmbeddedConfiguration();
+    const [joinError, setJoinError] = useState(false);
+    const handleJoin = useCallback(async () => {
+        if (!call)
+            return;
+        setJoinError(false);
+        try {
+            if (call.state.callingState !== CallingState.JOINED) {
+                await call.join();
+            }
+        }
+        catch (e) {
+            onError?.(e);
+            setJoinError(true);
+        }
+    }, [call, onError]);
+    if (joinError) {
+        return jsx(JoinError, { onJoin: handleJoin });
+    }
+    if (callingState === CallingState.IDLE ||
+        callingState === CallingState.UNKNOWN) {
+        return jsx(Lobby, { onJoin: handleJoin });
+    }
+    if (callingState === CallingState.JOINING && !localParticipant) {
+        return jsx(LoadingIndicator, { className: "str-video__embedded-loading" });
+    }
+    if (callingState === CallingState.LEFT) {
+        return jsx(CallFeedback, { onJoin: handleJoin });
+    }
+    return jsx(CallLayout, {});
+};
+
+export { CallStateRouter };
+//# sourceMappingURL=CallStateRouter.js.map

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

@@ -0,0 +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/call/EmbeddedCall.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmbeddedClientProvider } from '../EmbeddedClientProvider.js';
+import { CallStateRouter } from './CallStateRouter.js';
+
+/**
+ * Drop-in video call component that renders a lobby, active call,
+ * and post-call feedback screen. Handles client and call setup internally.
+ */
+const EmbeddedCall = ({ children, ...props }) => (jsxs(EmbeddedClientProvider, { ...props, children: [jsx(CallStateRouter, {}), children] }));
+
+export { EmbeddedCall };
+//# sourceMappingURL=EmbeddedCall.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedCall.js","sources":["../../../../../../../src/embedded/call/EmbeddedCall.tsx"],"sourcesContent":["import type { EmbeddedMeetingProps } from '../types';\nimport { EmbeddedClientProvider } from '../EmbeddedClientProvider';\nimport { CallStateRouter } from './CallStateRouter';\n\n/**\n * Drop-in video call component that renders a lobby, active call,\n * and post-call feedback screen. Handles client and call setup internally.\n */\nexport const EmbeddedCall = ({ children, ...props }: EmbeddedMeetingProps) => (\n  <EmbeddedClientProvider {...props}>\n    <CallStateRouter />\n    {children}\n  </EmbeddedClientProvider>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA;;;AAGG;AACI,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,MACvEA,IAAA,CAAC,sBAAsB,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EAAA,CAC/BC,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG,EAClB,QAAQ,CAAA,EAAA,CACc;;;;"}

package/dist/esm/src/embedded/context/ConfigurationContext.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+const defaultConfiguration = {
+    layout: 'SpeakerTop',
+    onError: undefined,
+};
+const ConfigurationContext = createContext(defaultConfiguration);
+const ConfigurationProvider = ({ children, layout = 'SpeakerTop', onError, }) => {
+    const value = useMemo(() => ({ layout, onError }), [layout, onError]);
+    return (jsx(ConfigurationContext.Provider, { value: value, children: children }));
+};
+/**
+ * Hook to access embedded configuration settings.
+ */
+const useEmbeddedConfiguration = () => {
+    return useContext(ConfigurationContext);
+};
+
+export { ConfigurationProvider, useEmbeddedConfiguration };
+//# sourceMappingURL=ConfigurationContext.js.map

package/dist/esm/src/embedded/context/ConfigurationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationContext.js","sources":["../../../../../../../src/embedded/context/ConfigurationContext.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, PropsWithChildren } from 'react';\nimport type { LayoutOption } from '../types';\n\nexport interface EmbeddedConfiguration {\n  layout?: LayoutOption;\n  onError?: (error: any) => void;\n}\n\nconst defaultConfiguration: EmbeddedConfiguration = {\n  layout: 'SpeakerTop',\n  onError: undefined,\n};\n\nconst ConfigurationContext =\n  createContext<EmbeddedConfiguration>(defaultConfiguration);\n\nexport const ConfigurationProvider = ({\n  children,\n  layout = 'SpeakerTop',\n  onError,\n}: PropsWithChildren<EmbeddedConfiguration>) => {\n  const value = useMemo(() => ({ layout, onError }), [layout, onError]);\n\n  return (\n    <ConfigurationContext.Provider value={value}>\n      {children}\n    </ConfigurationContext.Provider>\n  );\n};\n\n/**\n * Hook to access embedded configuration settings.\n */\nexport const useEmbeddedConfiguration = () => {\n  return useContext(ConfigurationContext);\n};\n"],"names":["_jsx"],"mappings":";;;AAQA,MAAM,oBAAoB,GAA0B;AAClD,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,OAAO,EAAE,SAAS;CACnB;AAED,MAAM,oBAAoB,GACxB,aAAa,CAAwB,oBAAoB,CAAC;AAErD,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,EACR,MAAM,GAAG,YAAY,EACrB,OAAO,GACkC,KAAI;IAC7C,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAErE,IAAA,QACEA,GAAA,CAAC,oBAAoB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EACxC,QAAQ,EAAA,CACqB;AAEpC;AAEA;;AAEG;AACI,MAAM,wBAAwB,GAAG,MAAK;AAC3C,IAAA,OAAO,UAAU,CAAC,oBAAoB,CAAC;AACzC;;;;"}

package/dist/esm/src/embedded/hooks/useCallDuration.js

@@ -0,0 +1,32 @@
+import { useMemo, useState, useEffect } from 'react';
+
+const formatElapsed = (seconds) => {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    const pad = (n) => String(n).padStart(2, '0');
+    return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+};
+/**
+ * Returns a live-updating formatted elapsed duration string
+ * computed from the given start date.
+ */
+const useCallDuration = (startedAt) => {
+    const startedAtDate = useMemo(() => (startedAt ? new Date(startedAt).getTime() : undefined), [startedAt]);
+    const [elapsed, setElapsed] = useState('');
+    useEffect(() => {
+        if (!startedAtDate)
+            return;
+        const update = () => {
+            const seconds = Math.max(0, Math.floor((Date.now() - startedAtDate) / 1000));
+            setElapsed(formatElapsed(seconds));
+        };
+        update();
+        const interval = setInterval(update, 1000);
+        return () => clearInterval(interval);
+    }, [startedAtDate]);
+    return { elapsed };
+};
+
+export { useCallDuration };
+//# sourceMappingURL=useCallDuration.js.map

package/dist/esm/src/embedded/hooks/useCallDuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCallDuration.js","sources":["../../../../../../../src/embedded/hooks/useCallDuration.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nconst formatElapsed = (seconds: number) => {\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = seconds % 60;\n  const pad = (n: number) => String(n).padStart(2, '0');\n  return h > 0 ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;\n};\n\n/**\n * Returns a live-updating formatted elapsed duration string\n * computed from the given start date.\n */\nexport const useCallDuration = (startedAt?: string) => {\n  const startedAtDate = useMemo(\n    () => (startedAt ? new Date(startedAt).getTime() : undefined),\n    [startedAt],\n  );\n\n  const [elapsed, setElapsed] = useState('');\n\n  useEffect(() => {\n    if (!startedAtDate) return;\n\n    const update = () => {\n      const seconds = Math.max(\n        0,\n        Math.floor((Date.now() - startedAtDate) / 1000),\n      );\n      setElapsed(formatElapsed(seconds));\n    };\n\n    update();\n    const interval = setInterval(update, 1000);\n    return () => clearInterval(interval);\n  }, [startedAtDate]);\n\n  return { elapsed };\n};\n"],"names":[],"mappings":";;AAEA,MAAM,aAAa,GAAG,CAAC,OAAe,KAAI;IACxC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC,IAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;AAC3C,IAAA,MAAM,CAAC,GAAG,OAAO,GAAG,EAAE;AACtB,IAAA,MAAM,GAAG,GAAG,CAAC,CAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AACrD,IAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAA,EAAG,GAAG,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,CAAC,CAAA,CAAE,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE;AACxE,CAAC;AAED;;;AAGG;AACI,MAAM,eAAe,GAAG,CAAC,SAAkB,KAAI;AACpD,IAAA,MAAM,aAAa,GAAG,OAAO,CAC3B,OAAO,SAAS,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,EAC7D,CAAC,SAAS,CAAC,CACZ;IAED,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAE1C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,aAAa;YAAE;QAEpB,MAAM,MAAM,GAAG,MAAK;YAClB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,CAAC,EACD,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,aAAa,IAAI,IAAI,CAAC,CAChD;AACD,YAAA,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACpC,QAAA,CAAC;AAED,QAAA,MAAM,EAAE;QACR,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC;AAC1C,QAAA,OAAO,MAAM,aAAa,CAAC,QAAQ,CAAC;AACtC,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;IAEnB,OAAO,EAAE,OAAO,EAAE;AACpB;;;;"}

package/dist/esm/src/embedded/hooks/useEmbeddedClient.js

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useInitializeVideoClient } from './useInitializeVideoClient.js';
+import { useInitializeCall } from './useInitializeCall.js';
+import { useNoiseCancellationLoader } from './useNoiseCancellationLoader.js';
+
+/**
+ * Hook that initializes the Stream Video client and call.
+ * Combines useInitializeVideoClient, useInitializeCall, and useNoiseCancellationLoader.
+ */
+const useEmbeddedClient = ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, handleError, }) => {
+    const client = useInitializeVideoClient({
+        apiKey,
+        user,
+        token,
+        tokenProvider,
+        logLevel,
+        handleError,
+    });
+    const call = useInitializeCall({
+        client,
+        callType,
+        callId,
+        handleError,
+    });
+    useEffect(() => {
+        if (!call)
+            return;
+        call.tracer.trace('embedded.initialized', { callType });
+    }, [call, callType]);
+    const { noiseCancellation, ready: noiseCancellationReady } = useNoiseCancellationLoader(call);
+    return {
+        client,
+        call,
+        noiseCancellation,
+        noiseCancellationReady,
+    };
+};
+
+export { useEmbeddedClient };
+//# sourceMappingURL=useEmbeddedClient.js.map

package/dist/esm/src/embedded/hooks/useEmbeddedClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmbeddedClient.js","sources":["../../../../../../../src/embedded/hooks/useEmbeddedClient.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { useInitializeVideoClient } from './useInitializeVideoClient';\nimport { useInitializeCall } from './useInitializeCall';\nimport { useNoiseCancellationLoader } from './useNoiseCancellationLoader';\nimport type { EmbeddedUser } from '../types';\nimport { LogLevel, TokenProvider } from '@stream-io/video-client';\n\nexport interface UseEmbeddedClientProps {\n  apiKey: string;\n  user: EmbeddedUser;\n  callId: string;\n  callType: string;\n  token?: string;\n  tokenProvider?: TokenProvider;\n  logLevel?: LogLevel;\n  handleError: (error: any) => void;\n}\n\n/**\n * Hook that initializes the Stream Video client and call.\n * Combines useInitializeVideoClient, useInitializeCall, and useNoiseCancellationLoader.\n */\nexport const useEmbeddedClient = ({\n  apiKey,\n  user,\n  callId,\n  callType,\n  token,\n  tokenProvider,\n  logLevel,\n  handleError,\n}: UseEmbeddedClientProps) => {\n  const client = useInitializeVideoClient({\n    apiKey,\n    user,\n    token,\n    tokenProvider,\n    logLevel,\n    handleError,\n  });\n\n  const call = useInitializeCall({\n    client,\n    callType,\n    callId,\n    handleError,\n  });\n\n  useEffect(() => {\n    if (!call) return;\n\n    call.tracer.trace('embedded.initialized', { callType });\n  }, [call, callType]);\n\n  const { noiseCancellation, ready: noiseCancellationReady } =\n    useNoiseCancellationLoader(call);\n\n  return {\n    client,\n    call,\n    noiseCancellation,\n    noiseCancellationReady,\n  };\n};\n"],"names":[],"mappings":";;;;;AAkBA;;;AAGG;MACU,iBAAiB,GAAG,CAAC,EAChC,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,aAAa,EACb,QAAQ,EACR,WAAW,GACY,KAAI;IAC3B,MAAM,MAAM,GAAG,wBAAwB,CAAC;QACtC,MAAM;QACN,IAAI;QACJ,KAAK;QACL,aAAa;QACb,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;IAEF,MAAM,IAAI,GAAG,iBAAiB,CAAC;QAC7B,MAAM;QACN,QAAQ;QACR,MAAM;QACN,WAAW;AACZ,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE,QAAQ,EAAE,CAAC;AACzD,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAEpB,IAAA,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,sBAAsB,EAAE,GACxD,0BAA0B,CAAC,IAAI,CAAC;IAElC,OAAO;QACL,MAAM;QACN,IAAI;QACJ,iBAAiB;QACjB,sBAAsB;KACvB;AACH;;;;"}