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

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

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { CallingState } from '@stream-io/video-client';
+
+/**
+ * Hook to initialize and manage a Call instance.
+ */
+const useInitializeCall = ({ client, callType, callId, handleError, }) => {
+    const [call, setCall] = useState();
+    useEffect(() => {
+        if (!client || !callId)
+            return;
+        let cancelled = false;
+        const _call = client.call(callType, callId);
+        _call
+            .get()
+            .then(() => {
+            if (!cancelled)
+                setCall(_call);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            handleError(err);
+        });
+        return () => {
+            cancelled = true;
+            setCall(undefined);
+            if (_call.state.callingState !== CallingState.LEFT) {
+                _call
+                    .leave()
+                    .catch((err) => console.error('Failed to leave call:', err));
+            }
+        };
+    }, [client, callType, callId, handleError]);
+    return call;
+};
+
+export { useInitializeCall };
+//# sourceMappingURL=useInitializeCall.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInitializeCall.js","sources":["../../../../../../../src/embedded/hooks/useInitializeCall.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Call, CallingState, StreamVideoClient } from '@stream-io/video-client';\n\nexport interface UseInitializeCallProps {\n  client?: StreamVideoClient;\n  callType: string;\n  callId: string;\n  handleError: (error: any) => void;\n}\n\n/**\n * Hook to initialize and manage a Call instance.\n */\nexport const useInitializeCall = ({\n  client,\n  callType,\n  callId,\n  handleError,\n}: UseInitializeCallProps): Call | undefined => {\n  const [call, setCall] = useState<Call>();\n\n  useEffect(() => {\n    if (!client || !callId) return;\n\n    let cancelled = false;\n    const _call = client.call(callType, callId);\n\n    _call\n      .get()\n      .then(() => {\n        if (!cancelled) setCall(_call);\n      })\n      .catch((err) => {\n        if (cancelled) return;\n\n        handleError(err);\n      });\n\n    return () => {\n      cancelled = true;\n      setCall(undefined);\n      if (_call.state.callingState !== CallingState.LEFT) {\n        _call\n          .leave()\n          .catch((err) => console.error('Failed to leave call:', err));\n      }\n    };\n  }, [client, callType, callId, handleError]);\n\n  return call;\n};\n"],"names":[],"mappings":";;;AAUA;;AAEG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,WAAW,GACY,KAAsB;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAQ;IAExC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;YAAE;QAExB,IAAI,SAAS,GAAG,KAAK;QACrB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;QAE3C;AACG,aAAA,GAAG;aACH,IAAI,CAAC,MAAK;AACT,YAAA,IAAI,CAAC,SAAS;gBAAE,OAAO,CAAC,KAAK,CAAC;AAChC,QAAA,CAAC;AACA,aAAA,KAAK,CAAC,CAAC,GAAG,KAAI;AACb,YAAA,IAAI,SAAS;gBAAE;YAEf,WAAW,CAAC,GAAG,CAAC;AAClB,QAAA,CAAC,CAAC;AAEJ,QAAA,OAAO,MAAK;YACV,SAAS,GAAG,IAAI;YAChB,OAAO,CAAC,SAAS,CAAC;YAClB,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,EAAE;gBAClD;AACG,qBAAA,KAAK;AACL,qBAAA,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAC;YAChE;AACF,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;AAE3C,IAAA,OAAO,IAAI;AACb;;;;"}

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

@@ -0,0 +1,93 @@
+import { useState, useRef, useEffect } from 'react';
+import { StreamVideoClient } from '@stream-io/video-client';
+
+/**
+ * Hook that creates a StreamVideoClient and connects the user.
+ * Disconnects and cleans up on unmount or when props change.
+ *
+ */
+const useInitializeVideoClient = ({ apiKey, user, token, tokenProvider, logLevel, handleError, }) => {
+    const [client, setClient] = useState();
+    const tokenProviderRef = useRef(tokenProvider);
+    tokenProviderRef.current = tokenProvider;
+    useEffect(() => {
+        if (!apiKey)
+            return;
+        const options = logLevel ? { logLevel } : undefined;
+        let _client;
+        try {
+            if (user?.type === 'guest') {
+                const streamUser = {
+                    id: user.id,
+                    type: 'guest',
+                    name: user.name,
+                    image: user.image,
+                };
+                _client = new StreamVideoClient({
+                    apiKey,
+                    user: streamUser,
+                    options,
+                });
+            }
+            else if (user?.type === 'anonymous') {
+                const streamUser = {
+                    id: '!anon',
+                    type: 'anonymous',
+                    name: user.name,
+                    image: user.image,
+                };
+                _client = new StreamVideoClient({
+                    apiKey,
+                    user: streamUser,
+                    token,
+                    tokenProvider: tokenProviderRef.current,
+                    options,
+                });
+            }
+            else {
+                const streamUser = {
+                    id: user.id,
+                    name: user.name,
+                    image: user.image,
+                };
+                const currentTokenProvider = tokenProviderRef.current;
+                _client = new StreamVideoClient({
+                    apiKey,
+                    user: streamUser,
+                    ...(token
+                        ? {
+                            token,
+                            ...(currentTokenProvider
+                                ? { tokenProvider: currentTokenProvider }
+                                : {}),
+                        }
+                        : { tokenProvider: currentTokenProvider }),
+                    options,
+                });
+            }
+            setClient(_client);
+        }
+        catch (err) {
+            handleError(err);
+        }
+        return () => {
+            _client
+                ?.disconnectUser()
+                .catch((err) => console.error('Failed to disconnect user:', err));
+            setClient(undefined);
+        };
+    }, [
+        apiKey,
+        user.id,
+        user.type,
+        user.name,
+        user.image,
+        token,
+        logLevel,
+        handleError,
+    ]);
+    return client;
+};
+
+export { useInitializeVideoClient };
+//# sourceMappingURL=useInitializeVideoClient.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInitializeVideoClient.js","sources":["../../../../../../../src/embedded/hooks/useInitializeVideoClient.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport {\n  LogLevel,\n  StreamVideoClient,\n  TokenProvider,\n  User,\n} from '@stream-io/video-client';\nimport type { EmbeddedUser } from '../types';\n\nexport interface UseInitializeVideoClientProps {\n  apiKey: string;\n  user: EmbeddedUser;\n  token?: string;\n  tokenProvider?: TokenProvider;\n  logLevel?: LogLevel;\n  handleError: (error: any) => void;\n}\n\n/**\n * Hook that creates a StreamVideoClient and connects the user.\n * Disconnects and cleans up on unmount or when props change.\n *\n */\nexport const useInitializeVideoClient = ({\n  apiKey,\n  user,\n  token,\n  tokenProvider,\n  logLevel,\n  handleError,\n}: UseInitializeVideoClientProps): StreamVideoClient | undefined => {\n  const [client, setClient] = useState<StreamVideoClient | undefined>();\n\n  const tokenProviderRef = useRef(tokenProvider);\n  tokenProviderRef.current = tokenProvider;\n\n  useEffect(() => {\n    if (!apiKey) return;\n\n    const options = logLevel ? { logLevel } : undefined;\n    let _client: StreamVideoClient | undefined;\n    try {\n      if (user?.type === 'guest') {\n        const streamUser: User = {\n          id: user.id,\n          type: 'guest',\n          name: user.name,\n          image: user.image,\n        };\n\n        _client = new StreamVideoClient({\n          apiKey,\n          user: streamUser,\n          options,\n        });\n      } else if (user?.type === 'anonymous') {\n        const streamUser: User = {\n          id: '!anon',\n          type: 'anonymous',\n          name: user.name,\n          image: user.image,\n        };\n\n        _client = new StreamVideoClient({\n          apiKey,\n          user: streamUser,\n          token,\n          tokenProvider: tokenProviderRef.current,\n          options,\n        });\n      } else {\n        const streamUser: User = {\n          id: user.id,\n          name: user.name,\n          image: user.image,\n        };\n\n        const currentTokenProvider = tokenProviderRef.current;\n        _client = new StreamVideoClient({\n          apiKey,\n          user: streamUser,\n          ...(token\n            ? {\n                token,\n                ...(currentTokenProvider\n                  ? { tokenProvider: currentTokenProvider }\n                  : {}),\n              }\n            : { tokenProvider: currentTokenProvider! }),\n          options,\n        });\n      }\n\n      setClient(_client);\n    } catch (err) {\n      handleError(err);\n    }\n\n    return () => {\n      _client\n        ?.disconnectUser()\n        .catch((err) => console.error('Failed to disconnect user:', err));\n\n      setClient(undefined);\n    };\n  }, [\n    apiKey,\n    user.id,\n    user.type,\n    user.name,\n    user.image,\n    token,\n    logLevel,\n    handleError,\n  ]);\n\n  return client;\n};\n"],"names":[],"mappings":";;;AAkBA;;;;AAIG;AACI,MAAM,wBAAwB,GAAG,CAAC,EACvC,MAAM,EACN,IAAI,EACJ,KAAK,EACL,aAAa,EACb,QAAQ,EACR,WAAW,GACmB,KAAmC;IACjE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAiC;AAErE,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC;AAC9C,IAAA,gBAAgB,CAAC,OAAO,GAAG,aAAa;IAExC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;YAAE;AAEb,QAAA,MAAM,OAAO,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,GAAG,SAAS;AACnD,QAAA,IAAI,OAAsC;AAC1C,QAAA,IAAI;AACF,YAAA,IAAI,IAAI,EAAE,IAAI,KAAK,OAAO,EAAE;AAC1B,gBAAA,MAAM,UAAU,GAAS;oBACvB,EAAE,EAAE,IAAI,CAAC,EAAE;AACX,oBAAA,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;gBAED,OAAO,GAAG,IAAI,iBAAiB,CAAC;oBAC9B,MAAM;AACN,oBAAA,IAAI,EAAE,UAAU;oBAChB,OAAO;AACR,iBAAA,CAAC;YACJ;AAAO,iBAAA,IAAI,IAAI,EAAE,IAAI,KAAK,WAAW,EAAE;AACrC,gBAAA,MAAM,UAAU,GAAS;AACvB,oBAAA,EAAE,EAAE,OAAO;AACX,oBAAA,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;gBAED,OAAO,GAAG,IAAI,iBAAiB,CAAC;oBAC9B,MAAM;AACN,oBAAA,IAAI,EAAE,UAAU;oBAChB,KAAK;oBACL,aAAa,EAAE,gBAAgB,CAAC,OAAO;oBACvC,OAAO;AACR,iBAAA,CAAC;YACJ;iBAAO;AACL,gBAAA,MAAM,UAAU,GAAS;oBACvB,EAAE,EAAE,IAAI,CAAC,EAAE;oBACX,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;AAED,gBAAA,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,OAAO;gBACrD,OAAO,GAAG,IAAI,iBAAiB,CAAC;oBAC9B,MAAM;AACN,oBAAA,IAAI,EAAE,UAAU;AAChB,oBAAA,IAAI;AACF,0BAAE;4BACE,KAAK;AACL,4BAAA,IAAI;AACF,kCAAE,EAAE,aAAa,EAAE,oBAAoB;kCACrC,EAAE,CAAC;AACR;AACH,0BAAE,EAAE,aAAa,EAAE,oBAAqB,EAAE,CAAC;oBAC7C,OAAO;AACR,iBAAA,CAAC;YACJ;YAEA,SAAS,CAAC,OAAO,CAAC;QACpB;QAAE,OAAO,GAAG,EAAE;YACZ,WAAW,CAAC,GAAG,CAAC;QAClB;AAEA,QAAA,OAAO,MAAK;YACV;AACE,kBAAE,cAAc;AACf,iBAAA,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,GAAG,CAAC,CAAC;YAEnE,SAAS,CAAC,SAAS,CAAC;AACtB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE;QACD,MAAM;AACN,QAAA,IAAI,CAAC,EAAE;AACP,QAAA,IAAI,CAAC,IAAI;AACT,QAAA,IAAI,CAAC,IAAI;AACT,QAAA,IAAI,CAAC,KAAK;QACV,KAAK;QACL,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC;AAEF,IAAA,OAAO,MAAM;AACf;;;;"}

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

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import { SfuModels, CallingState } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+/**
+ * Distinguishes a temporary live pause (host went backstage) from a real
+ * call end. Returns `true` when the viewer was kicked because the host
+ * paused the livestream — not because the call was fully terminated.
+ *
+ * Resets to `false` on rejoin or when `call.ended` (real end) arrives.
+ */
+const useIsLivestreamPaused = () => {
+    const call = useCall();
+    const { useCallCallingState } = useCallStateHooks();
+    const callingState = useCallCallingState();
+    const [isPaused, setIsPaused] = useState(false);
+    useEffect(() => {
+        if (!call)
+            return;
+        const unsubSfu = call.on('callEnded', (e) => {
+            if (e.reason === SfuModels.CallEndedReason.LIVE_ENDED) {
+                setIsPaused(true);
+            }
+        });
+        const unsubEnded = call.on('call.ended', () => {
+            setIsPaused(false);
+        });
+        return () => {
+            unsubSfu();
+            unsubEnded();
+        };
+    }, [call]);
+    useEffect(() => {
+        if (callingState === CallingState.JOINED) {
+            setIsPaused(false);
+        }
+    }, [callingState]);
+    return isPaused;
+};
+
+export { useIsLivestreamPaused };
+//# sourceMappingURL=useIsLivestreamPaused.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIsLivestreamPaused.js","sources":["../../../../../../../src/embedded/hooks/useIsLivestreamPaused.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { CallingState, SfuModels } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\n/**\n * Distinguishes a temporary live pause (host went backstage) from a real\n * call end. Returns `true` when the viewer was kicked because the host\n * paused the livestream — not because the call was fully terminated.\n *\n * Resets to `false` on rejoin or when `call.ended` (real end) arrives.\n */\nexport const useIsLivestreamPaused = () => {\n  const call = useCall();\n  const { useCallCallingState } = useCallStateHooks();\n  const callingState = useCallCallingState();\n  const [isPaused, setIsPaused] = useState(false);\n\n  useEffect(() => {\n    if (!call) return;\n\n    const unsubSfu = call.on('callEnded', (e) => {\n      if (e.reason === SfuModels.CallEndedReason.LIVE_ENDED) {\n        setIsPaused(true);\n      }\n    });\n\n    const unsubEnded = call.on('call.ended', () => {\n      setIsPaused(false);\n    });\n\n    return () => {\n      unsubSfu();\n      unsubEnded();\n    };\n  }, [call]);\n\n  useEffect(() => {\n    if (callingState === CallingState.JOINED) {\n      setIsPaused(false);\n    }\n  }, [callingState]);\n\n  return isPaused;\n};\n"],"names":[],"mappings":";;;;AAIA;;;;;;AAMG;AACI,MAAM,qBAAqB,GAAG,MAAK;AACxC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,mBAAmB,EAAE,GAAG,iBAAiB,EAAE;AACnD,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;IAC1C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,KAAI;YAC1C,IAAI,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,eAAe,CAAC,UAAU,EAAE;gBACrD,WAAW,CAAC,IAAI,CAAC;YACnB;AACF,QAAA,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,MAAK;YAC5C,WAAW,CAAC,KAAK,CAAC;AACpB,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,EAAE;AACV,YAAA,UAAU,EAAE;AACd,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IAEV,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,YAAY,KAAK,YAAY,CAAC,MAAM,EAAE;YACxC,WAAW,CAAC,KAAK,CAAC;QACpB;AACF,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,OAAO,QAAQ;AACjB;;;;"}

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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"}