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

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

@@ -0,0 +1,122 @@
+import { useState, useEffect } from 'react';
+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/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/StreamCall/StreamCall.js';
+import '../../core/components/StreamVideo/StreamVideo.js';
+import '../../core/components/Video/BaseVideo.js';
+import '../../core/components/Video/Video.js';
+import { LivestreamLayout } from '../../core/components/CallLayout/LivestreamLayout.js';
+import { PaginatedGridLayout } from '../../core/components/CallLayout/PaginatedGridLayout.js';
+import { SpeakerLayout } from '../../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 { useEmbeddedConfiguration } from '../context/ConfigurationContext.js';
+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/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';
+import '../shared/Lobby/ToggleMicButton.js';
+import '../shared/Lobby/ToggleCameraButton.js';
+
+const Layouts = {
+    Livestream: {
+        Component: LivestreamLayout,
+        props: {
+            showLiveBadge: false,
+            showParticipantCount: false,
+            showDuration: false,
+        },
+    },
+    PaginatedGrid: {
+        Component: PaginatedGridLayout,
+        props: { groupSize: 16, ParticipantViewUI: EmbeddedParticipantViewUI },
+    },
+    SpeakerLeft: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'left',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+    SpeakerRight: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'right',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+    SpeakerTop: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'top',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+    SpeakerBottom: {
+        Component: SpeakerLayout,
+        props: {
+            participantsBarPosition: 'bottom',
+            ParticipantViewUISpotlight: EmbeddedParticipantViewUI,
+            ParticipantViewUIBar: EmbeddedParticipantViewUI,
+        },
+    },
+};
+const EMPTY_PROPS = {};
+const VALID_LAYOUTS = Object.keys(Layouts);
+const isValidLayout = (layout) => VALID_LAYOUTS.includes(layout);
+/**
+ * Hook to manage layout selection.
+ * Returns the layout Component and its props.
+ */
+const useLayout = () => {
+    const { layout: configuredLayout } = useEmbeddedConfiguration();
+    const { useHasOngoingScreenShare } = useCallStateHooks();
+    const hasScreenShare = useHasOngoingScreenShare();
+    const defaultLayout = isValidLayout(configuredLayout ?? '')
+        ? configuredLayout
+        : 'SpeakerTop';
+    const [layout, setLayout] = useState(defaultLayout);
+    useEffect(() => {
+        if (hasScreenShare) {
+            setLayout((currentLayout) => {
+                if (currentLayout.startsWith('Speaker'))
+                    return currentLayout;
+                return 'SpeakerRight';
+            });
+        }
+        else {
+            setLayout(defaultLayout);
+        }
+    }, [hasScreenShare, defaultLayout]);
+    const { Component, props = EMPTY_PROPS } = Layouts[layout];
+    return { Component, props };
+};
+
+export { useLayout };
+//# sourceMappingURL=useLayout.js.map

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

@@ -0,0 +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/hooks/useNoiseCancellationLoader.js

@@ -0,0 +1,48 @@
+import { useState, useRef, useEffect } from 'react';
+import { NoiseCancellationSettingsModeEnum } from '@stream-io/video-client';
+
+/**
+ * Hook that lazily loads the noise cancellation module from @stream-io/audio-filters-web.
+ * Skips loading if the server-side noise cancellation setting is disabled.
+ * Returns the NoiseCancellation instance when loaded, or undefined if unavailable.
+ * The `ready` flag becomes `true` once loading completes (even on failure),
+ * or immediately if noise cancellation is disabled by server settings.
+ */
+const useNoiseCancellationLoader = (call) => {
+    const [noiseCancellation, setNoiseCancellation] = useState();
+    const [ready, setReady] = useState(false);
+    const ncLoader = useRef(undefined);
+    const ncSettings = call?.state.settings?.audio?.noise_cancellation;
+    const isNoiseCancellationEnabled = !!(ncSettings && ncSettings.mode !== NoiseCancellationSettingsModeEnum.DISABLED);
+    useEffect(() => {
+        if (!call)
+            return;
+        if (!isNoiseCancellationEnabled) {
+            setReady(true);
+            return;
+        }
+        const load = (ncLoader.current || Promise.resolve())
+            .then(() => import('@stream-io/audio-filters-web'))
+            .then(({ NoiseCancellation }) => {
+            const nc = new NoiseCancellation({});
+            setNoiseCancellation(nc);
+        })
+            .catch((err) => {
+            console.warn('[EmbeddedStreamClient] Failed to load noise cancellation. ' +
+                'Make sure @stream-io/audio-filters-web is installed.', err);
+        })
+            .finally(() => {
+            setReady(true);
+        });
+        return () => {
+            ncLoader.current = load.then(() => {
+                setNoiseCancellation(undefined);
+                setReady(false);
+            });
+        };
+    }, [call, isNoiseCancellationEnabled]);
+    return { noiseCancellation, ready };
+};
+
+export { useNoiseCancellationLoader };
+//# sourceMappingURL=useNoiseCancellationLoader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNoiseCancellationLoader.js","sources":["../../../../../../../src/embedded/hooks/useNoiseCancellationLoader.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport {\n  NoiseCancellationSettingsModeEnum,\n  type Call,\n} from '@stream-io/video-client';\n\ntype INoiseCancellation =\n  import('@stream-io/audio-filters-web').INoiseCancellation;\n\n/**\n * Hook that lazily loads the noise cancellation module from @stream-io/audio-filters-web.\n * Skips loading if the server-side noise cancellation setting is disabled.\n * Returns the NoiseCancellation instance when loaded, or undefined if unavailable.\n * The `ready` flag becomes `true` once loading completes (even on failure),\n * or immediately if noise cancellation is disabled by server settings.\n */\nexport const useNoiseCancellationLoader = (call?: Call) => {\n  const [noiseCancellation, setNoiseCancellation] =\n    useState<INoiseCancellation>();\n  const [ready, setReady] = useState(false);\n  const ncLoader = useRef<Promise<void> | undefined>(undefined);\n\n  const ncSettings = call?.state.settings?.audio?.noise_cancellation;\n  const isNoiseCancellationEnabled = !!(\n    ncSettings && ncSettings.mode !== NoiseCancellationSettingsModeEnum.DISABLED\n  );\n\n  useEffect(() => {\n    if (!call) return;\n\n    if (!isNoiseCancellationEnabled) {\n      setReady(true);\n      return;\n    }\n\n    const load = (ncLoader.current || Promise.resolve())\n      .then(() => import('@stream-io/audio-filters-web'))\n      .then(({ NoiseCancellation }) => {\n        const nc = new NoiseCancellation({});\n        setNoiseCancellation(nc);\n      })\n      .catch((err) => {\n        console.warn(\n          '[EmbeddedStreamClient] Failed to load noise cancellation. ' +\n            'Make sure @stream-io/audio-filters-web is installed.',\n          err,\n        );\n      })\n      .finally(() => {\n        setReady(true);\n      });\n\n    return () => {\n      ncLoader.current = load.then(() => {\n        setNoiseCancellation(undefined);\n        setReady(false);\n      });\n    };\n  }, [call, isNoiseCancellationEnabled]);\n\n  return { noiseCancellation, ready };\n};\n"],"names":[],"mappings":";;;AASA;;;;;;AAMG;AACI,MAAM,0BAA0B,GAAG,CAAC,IAAW,KAAI;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAC7C,QAAQ,EAAsB;IAChC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACzC,IAAA,MAAM,QAAQ,GAAG,MAAM,CAA4B,SAAS,CAAC;IAE7D,MAAM,UAAU,GAAG,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,kBAAkB;AAClE,IAAA,MAAM,0BAA0B,GAAG,CAAC,EAClC,UAAU,IAAI,UAAU,CAAC,IAAI,KAAK,iCAAiC,CAAC,QAAQ,CAC7E;IAED,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,IAAI,CAAC,0BAA0B,EAAE;YAC/B,QAAQ,CAAC,IAAI,CAAC;YACd;QACF;QAEA,MAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;aAChD,IAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC;AACjD,aAAA,IAAI,CAAC,CAAC,EAAE,iBAAiB,EAAE,KAAI;AAC9B,YAAA,MAAM,EAAE,GAAG,IAAI,iBAAiB,CAAC,EAAE,CAAC;YACpC,oBAAoB,CAAC,EAAE,CAAC;AAC1B,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,CAAC,GAAG,KAAI;YACb,OAAO,CAAC,IAAI,CACV,4DAA4D;gBAC1D,sDAAsD,EACxD,GAAG,CACJ;AACH,QAAA,CAAC;aACA,OAAO,CAAC,MAAK;YACZ,QAAQ,CAAC,IAAI,CAAC;AAChB,QAAA,CAAC,CAAC;AAEJ,QAAA,OAAO,MAAK;YACV,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,MAAK;gBAChC,oBAAoB,CAAC,SAAS,CAAC;gBAC/B,QAAQ,CAAC,KAAK,CAAC;AACjB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,CAAC,CAAC;AAEtC,IAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE;AACrC;;;;"}

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

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { CallingState } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+
+/**
+ * Hook to prevent screen from going to sleep during active calls.
+ * Uses the Screen Wake Lock API when available.
+ */
+const useWakeLock = () => {
+    const { useCallCallingState } = useCallStateHooks();
+    const callState = useCallCallingState();
+    useEffect(() => {
+        if (callState !== CallingState.JOINED || !('wakeLock' in navigator))
+            return;
+        let interrupted = false;
+        let wakeLockSentinel = null;
+        navigator.wakeLock
+            .request('screen')
+            .then((wls) => {
+            if (interrupted)
+                return wls.release();
+            wakeLockSentinel = wls;
+            return undefined;
+        })
+            .catch((error) => console.debug(`Couldn't setup WakeLock due to: ${error}`));
+        return () => {
+            interrupted = true;
+            wakeLockSentinel?.release();
+        };
+    }, [callState]);
+};
+
+export { useWakeLock };
+//# sourceMappingURL=useWakeLock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWakeLock.js","sources":["../../../../../../../src/embedded/hooks/useWakeLock.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { CallingState } from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\n\n/**\n * Hook to prevent screen from going to sleep during active calls.\n * Uses the Screen Wake Lock API when available.\n */\nexport const useWakeLock = () => {\n  const { useCallCallingState } = useCallStateHooks();\n  const callState = useCallCallingState();\n\n  useEffect(() => {\n    if (callState !== CallingState.JOINED || !('wakeLock' in navigator)) return;\n\n    let interrupted = false;\n    let wakeLockSentinel: null | WakeLockSentinel = null;\n    navigator.wakeLock\n      .request('screen')\n      .then((wls: WakeLockSentinel) => {\n        if (interrupted) return wls.release();\n        wakeLockSentinel = wls;\n        return undefined;\n      })\n      .catch((error: unknown) =>\n        console.debug(`Couldn't setup WakeLock due to: ${error}`),\n      );\n\n    return () => {\n      interrupted = true;\n      wakeLockSentinel?.release();\n    };\n  }, [callState]);\n};\n"],"names":[],"mappings":";;;;AAIA;;;AAGG;AACI,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,SAAS,GAAG,mBAAmB,EAAE;IAEvC,SAAS,CAAC,MAAK;QACb,IAAI,SAAS,KAAK,YAAY,CAAC,MAAM,IAAI,EAAE,UAAU,IAAI,SAAS,CAAC;YAAE;QAErE,IAAI,WAAW,GAAG,KAAK;QACvB,IAAI,gBAAgB,GAA4B,IAAI;AACpD,QAAA,SAAS,CAAC;aACP,OAAO,CAAC,QAAQ;AAChB,aAAA,IAAI,CAAC,CAAC,GAAqB,KAAI;AAC9B,YAAA,IAAI,WAAW;AAAE,gBAAA,OAAO,GAAG,CAAC,OAAO,EAAE;YACrC,gBAAgB,GAAG,GAAG;AACtB,YAAA,OAAO,SAAS;AAClB,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,CAAC,KAAc,KACpB,OAAO,CAAC,KAAK,CAAC,CAAA,gCAAA,EAAmC,KAAK,CAAA,CAAE,CAAC,CAC1D;AAEH,QAAA,OAAO,MAAK;YACV,WAAW,GAAG,IAAI;YAClB,gBAAgB,EAAE,OAAO,EAAE;AAC7B,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AACjB;;;;"}

package/dist/esm/src/embedded/livestream/EmbeddedLivestream.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { EmbeddedClientProvider } from '../EmbeddedClientProvider.js';
+import { LivestreamUI } from './LivestreamUI.js';
+
+/**
+ * Drop-in livestream component. Renders host or viewer UI based on permissions.
+ */
+const EmbeddedLivestream = ({ children, ...props }) => (jsxs(EmbeddedClientProvider, { ...props, children: [jsx(LivestreamUI, {}), children] }));
+
+export { EmbeddedLivestream };
+//# sourceMappingURL=EmbeddedLivestream.js.map

package/dist/esm/src/embedded/livestream/EmbeddedLivestream.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedLivestream.js","sources":["../../../../../../../src/embedded/livestream/EmbeddedLivestream.tsx"],"sourcesContent":["import type { EmbeddedLivestreamProps } from '../types';\nimport { EmbeddedClientProvider } from '../EmbeddedClientProvider';\nimport { LivestreamUI } from './LivestreamUI';\n\n/**\n * Drop-in livestream component. Renders host or viewer UI based on permissions.\n */\nexport const EmbeddedLivestream = ({\n  children,\n  ...props\n}: EmbeddedLivestreamProps) => (\n  <EmbeddedClientProvider {...props}>\n    <LivestreamUI />\n    {children}\n  </EmbeddedClientProvider>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA;;AAEG;AACI,MAAM,kBAAkB,GAAG,CAAC,EACjC,QAAQ,EACR,GAAG,KAAK,EACgB,MACxBA,IAAA,CAAC,sBAAsB,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EAAA,CAC/BC,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EACf,QAAQ,CAAA,EAAA,CACc;;;;"}

package/dist/esm/src/embedded/livestream/LivestreamUI.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { OwnCapability } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { HostStateRouter } from './host/HostStateRouter.js';
+import { ViewerStateRouter } from './viewer/ViewerStateRouter.js';
+
+const LivestreamUI = () => {
+    const { useHasPermissions } = useCallStateHooks();
+    const isHost = useHasPermissions(OwnCapability.JOIN_BACKSTAGE);
+    if (isHost) {
+        return jsx(HostStateRouter, {});
+    }
+    return jsx(ViewerStateRouter, {});
+};
+
+export { LivestreamUI };
+//# sourceMappingURL=LivestreamUI.js.map

package/dist/esm/src/embedded/livestream/LivestreamUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivestreamUI.js","sources":["../../../../../../../src/embedded/livestream/LivestreamUI.tsx"],"sourcesContent":["import { OwnCapability } from '@stream-io/video-client';\nimport { useCallStateHooks } from '@stream-io/video-react-bindings';\n\nimport { HostStateRouter } from './host/HostStateRouter';\nimport { ViewerStateRouter } from './viewer/ViewerStateRouter';\n\nexport const LivestreamUI = () => {\n  const { useHasPermissions } = useCallStateHooks();\n\n  const isHost = useHasPermissions(OwnCapability.JOIN_BACKSTAGE);\n\n  if (isHost) {\n    return <HostStateRouter />;\n  }\n\n  return <ViewerStateRouter />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAMO,MAAM,YAAY,GAAG,MAAK;AAC/B,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE;IAEjD,MAAM,MAAM,GAAG,iBAAiB,CAAC,aAAa,CAAC,cAAc,CAAC;IAE9D,IAAI,MAAM,EAAE;QACV,OAAOA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG;IAC5B;IAEA,OAAOA,GAAA,CAAC,iBAAiB,EAAA,EAAA,CAAG;AAC9B;;;;"}

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

@@ -0,0 +1,76 @@
+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 { 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/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 { DeviceSelectorAudioOutput, DeviceSelectorAudioInput } from '../../../components/DeviceSettings/DeviceSelectorAudio.js';
+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';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+import { CameraMenuWithBlur } from '../../shared/BlurToggleButton/BlurToggleButton.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 { ViewersCount } from '../../shared/ViewersCount/ViewersCount.js';
+
+const HostLayout = ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }) => {
+    const { t } = useI18n();
+    const { useParticipantCount, useCallSession } = useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const session = useCallSession();
+    const { elapsed } = useCallDuration(session?.live_started_at);
+    const { Component: LayoutComponent, props: layoutProps } = useLayout();
+    const [showParticipants, setShowParticipants] = useState(false);
+    const handleCloseParticipants = useCallback(() => {
+        setShowParticipants(false);
+    }, []);
+    const handleToggleParticipants = useCallback(() => {
+        setShowParticipants((prev) => !prev);
+    }, []);
+    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" }) }) }) })] })] }));
+};
+
+export { HostLayout };
+//# sourceMappingURL=HostLayout.js.map

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

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

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

@@ -0,0 +1,110 @@
+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 { HostLayout } from './HostLayout.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 '../../../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 { useEmbeddedConfiguration } from '../../context/ConfigurationContext.js';
+
+const HostStateRouter = () => {
+    const call = useCall();
+    const { t } = useI18n();
+    const { onError } = useEmbeddedConfiguration();
+    const { useCallCallingState, useIsCallLive, useCallSettings, useLocalParticipant, } = useCallStateHooks();
+    const callingState = useCallCallingState();
+    const isLive = useIsCallLive();
+    const localParticipant = useLocalParticipant();
+    const settings = useCallSettings();
+    const isBackstageEnabled = settings?.backstage?.enabled ?? true;
+    const [joinError, setJoinError] = useState(false);
+    const handleJoin = useCallback(async () => {
+        if (!call)
+            return;
+        setJoinError(false);
+        try {
+            if (callingState !== CallingState.JOINED) {
+                await call.join();
+            }
+        }
+        catch (err) {
+            onError?.(err);
+            setJoinError(true);
+        }
+    }, [call, onError, callingState]);
+    const handleGoLive = useCallback(async () => {
+        if (!call)
+            return;
+        try {
+            await call.goLive();
+        }
+        catch (err) {
+            onError?.(err);
+        }
+    }, [call, onError]);
+    const handleStopLive = useCallback(async () => {
+        if (!call)
+            return;
+        try {
+            await call.stopLive();
+        }
+        catch (err) {
+            onError?.(err);
+        }
+    }, [call, onError]);
+    if (joinError) {
+        return jsx(JoinError, { onJoin: handleJoin });
+    }
+    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') }));
+    }
+    if (callingState === CallingState.JOINING && !localParticipant) {
+        return jsx(LoadingIndicator, { className: "str-video__embedded-loading" });
+    }
+    if (callingState === CallingState.LEFT) {
+        return jsx(CallFeedback, { onJoin: handleJoin });
+    }
+    return (jsx(HostLayout, { isLive: isLive, isBackstageEnabled: isBackstageEnabled, onGoLive: handleGoLive, onStopLive: handleStopLive }));
+};
+
+export { HostStateRouter };
+//# sourceMappingURL=HostStateRouter.js.map

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

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

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

@@ -0,0 +1,74 @@
+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 { 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/Button/IconButton.js';
+import '@floating-ui/react';
+import { MicCaptureErrorNotification } from '../../../components/Notification/MicCaptureErrorNotification.js';
+import '../../../components/CallControls/RecordCallButton.js';
+import { ReactionsButton } from '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+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';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+import { CameraMenuWithBlur } from '../../shared/BlurToggleButton/BlurToggleButton.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 { ViewersCount } from '../../shared/ViewersCount/ViewersCount.js';
+
+const ViewerLayout = () => {
+    useWakeLock();
+    const { t } = useI18n();
+    const { useParticipantCount, useCallSession } = useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const session = useCallSession();
+    const { elapsed } = useCallDuration(session?.live_started_at);
+    const { Component: LayoutComponent, props: layoutProps } = useLayout();
+    const [showParticipants, setShowParticipants] = useState(false);
+    const handleCloseParticipants = useCallback(() => {
+        setShowParticipants(false);
+    }, []);
+    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" }) }) }) })] })] }));
+};
+
+export { ViewerLayout };
+//# sourceMappingURL=ViewerLayout.js.map