@stream-io/video-react-sdk 1.32.4 → 1.33.0

package/dist/src/embedded/EmbeddedClientProvider.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import type { LogLevel, TokenProvider } from '@stream-io/video-client';
+import type { EmbeddedUser, LayoutOption } from './types';
+export interface EmbeddedClientProviderProps {
+    apiKey: string;
+    user: EmbeddedUser;
+    callId: string;
+    callType: string;
+    token?: string;
+    tokenProvider?: TokenProvider;
+    logLevel?: LogLevel;
+    onError?: (error: any) => void;
+    layout?: LayoutOption;
+    theme?: Record<string, string>;
+    children: ReactNode;
+}
+/**
+ * Shared provider wrapper for embedded components.
+ * Handles client/call initialization and wraps children with all necessary providers.
+ */
+export declare const EmbeddedClientProvider: ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, onError, layout, theme, children, }: EmbeddedClientProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/call/CallControls.d.ts

@@ -0,0 +1,9 @@
+interface CallControlsProps {
+    showParticipants: boolean;
+    onToggleParticipants: () => void;
+}
+/**
+ * Renders the active call control bar
+ */
+export declare const CallControls: ({ showParticipants, onToggleParticipants, }: CallControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/call/CallHeader.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Renders the call header bar with elapsed time and leave/end call button.
+ */
+export declare const CallHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/call/CallLayout.d.ts

@@ -0,0 +1,4 @@
+/**
+ * CallLayout renders the active call experience with layout, controls and sidebar.
+ */
+export declare const CallLayout: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/call/CallStateRouter.d.ts

@@ -0,0 +1,4 @@
+/**
+ * CallStateRouter is the state decider component that manages view state transitions.
+ */
+export declare const CallStateRouter: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/call/EmbeddedCall.d.ts

@@ -0,0 +1,6 @@
+import type { EmbeddedMeetingProps } from '../types';
+/**
+ * Drop-in video call component that renders a lobby, active call,
+ * and post-call feedback screen. Handles client and call setup internally.
+ */
+export declare const EmbeddedCall: ({ children, ...props }: EmbeddedMeetingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/call/index.d.ts

@@ -0,0 +1 @@
+export * from './EmbeddedCall';

package/dist/src/embedded/context/ConfigurationContext.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import type { LayoutOption } from '../types';
+export interface EmbeddedConfiguration {
+    layout?: LayoutOption;
+    onError?: (error: any) => void;
+}
+export declare const ConfigurationProvider: ({ children, layout, onError, }: PropsWithChildren<EmbeddedConfiguration>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access embedded configuration settings.
+ */
+export declare const useEmbeddedConfiguration: () => EmbeddedConfiguration;

package/dist/src/embedded/context/index.d.ts

@@ -0,0 +1 @@
+export * from './ConfigurationContext';

package/dist/src/embedded/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export * from './useInitializeVideoClient';
+export * from './useInitializeCall';
+export * from './useLayout';
+export * from './useNoiseCancellationLoader';
+export * from './useWakeLock';
+export * from './useCallDuration';
+export * from './useEmbeddedClient';
+export * from './useIsLivestreamPaused';

package/dist/src/embedded/hooks/useCallDuration.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a live-updating formatted elapsed duration string
+ * computed from the given start date.
+ */
+export declare const useCallDuration: (startedAt?: string) => {
+    elapsed: string;
+};

package/dist/src/embedded/hooks/useEmbeddedClient.d.ts

@@ -0,0 +1,22 @@
+import type { EmbeddedUser } from '../types';
+import { LogLevel, TokenProvider } from '@stream-io/video-client';
+export interface UseEmbeddedClientProps {
+    apiKey: string;
+    user: EmbeddedUser;
+    callId: string;
+    callType: string;
+    token?: string;
+    tokenProvider?: TokenProvider;
+    logLevel?: LogLevel;
+    handleError: (error: any) => void;
+}
+/**
+ * Hook that initializes the Stream Video client and call.
+ * Combines useInitializeVideoClient, useInitializeCall, and useNoiseCancellationLoader.
+ */
+export declare const useEmbeddedClient: ({ apiKey, user, callId, callType, token, tokenProvider, logLevel, handleError, }: UseEmbeddedClientProps) => {
+    client: import("@stream-io/video-client").StreamVideoClient | undefined;
+    call: import("@stream-io/video-client").Call | undefined;
+    noiseCancellation: import("@stream-io/audio-filters-web").INoiseCancellation | undefined;
+    noiseCancellationReady: boolean;
+};

package/dist/src/embedded/hooks/useInitializeCall.d.ts

@@ -0,0 +1,11 @@
+import { Call, StreamVideoClient } from '@stream-io/video-client';
+export interface UseInitializeCallProps {
+    client?: StreamVideoClient;
+    callType: string;
+    callId: string;
+    handleError: (error: any) => void;
+}
+/**
+ * Hook to initialize and manage a Call instance.
+ */
+export declare const useInitializeCall: ({ client, callType, callId, handleError, }: UseInitializeCallProps) => Call | undefined;

package/dist/src/embedded/hooks/useInitializeVideoClient.d.ts

@@ -0,0 +1,16 @@
+import { LogLevel, StreamVideoClient, TokenProvider } from '@stream-io/video-client';
+import type { EmbeddedUser } from '../types';
+export interface UseInitializeVideoClientProps {
+    apiKey: string;
+    user: EmbeddedUser;
+    token?: string;
+    tokenProvider?: TokenProvider;
+    logLevel?: LogLevel;
+    handleError: (error: any) => void;
+}
+/**
+ * Hook that creates a StreamVideoClient and connects the user.
+ * Disconnects and cleans up on unmount or when props change.
+ *
+ */
+export declare const useInitializeVideoClient: ({ apiKey, user, token, tokenProvider, logLevel, handleError, }: UseInitializeVideoClientProps) => StreamVideoClient | undefined;

package/dist/src/embedded/hooks/useIsLivestreamPaused.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+export declare const useIsLivestreamPaused: () => boolean;

package/dist/src/embedded/hooks/useLayout.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from 'react';
+/**
+ * Hook to manage layout selection.
+ * Returns the layout Component and its props.
+ */
+export declare const useLayout: () => {
+    Component: ComponentType<Record<string, unknown>>;
+    props: Record<string, unknown>;
+};

package/dist/src/embedded/hooks/useNoiseCancellationLoader.d.ts

@@ -0,0 +1,12 @@
+import { type Call } 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.
+ */
+export declare const useNoiseCancellationLoader: (call?: Call) => {
+    noiseCancellation: import("@stream-io/audio-filters-web").INoiseCancellation | undefined;
+    ready: boolean;
+};

package/dist/src/embedded/hooks/useWakeLock.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to prevent screen from going to sleep during active calls.
+ * Uses the Screen Wake Lock API when available.
+ */
+export declare const useWakeLock: () => void;

package/dist/src/embedded/index.d.ts

@@ -0,0 +1,3 @@
+export { EmbeddedCall } from './call';
+export { EmbeddedLivestream } from './livestream';
+export type { EmbeddedMeetingProps, EmbeddedLivestreamProps, EmbeddedUser, EmbeddedAuthenticatedUser, EmbeddedGuestUser, EmbeddedAnonymousUser, LayoutOption, } from './types';

package/dist/src/embedded/livestream/EmbeddedLivestream.d.ts

@@ -0,0 +1,5 @@
+import type { EmbeddedLivestreamProps } from '../types';
+/**
+ * Drop-in livestream component. Renders host or viewer UI based on permissions.
+ */
+export declare const EmbeddedLivestream: ({ children, ...props }: EmbeddedLivestreamProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/livestream/LivestreamUI.d.ts

@@ -0,0 +1 @@
+export declare const LivestreamUI: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/livestream/host/HostLayout.d.ts

@@ -0,0 +1,7 @@
+export type HostViewProps = {
+    isLive: boolean;
+    isBackstageEnabled: boolean;
+    onGoLive: () => void;
+    onStopLive: () => void;
+};
+export declare const HostLayout: ({ isLive, isBackstageEnabled, onGoLive, onStopLive, }: HostViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/livestream/host/HostStateRouter.d.ts

@@ -0,0 +1 @@
+export declare const HostStateRouter: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/livestream/index.d.ts

@@ -0,0 +1 @@
+export * from './EmbeddedLivestream';

package/dist/src/embedded/livestream/viewer/ViewerLayout.d.ts

@@ -0,0 +1 @@
+export declare const ViewerLayout: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/livestream/viewer/ViewerLobby.d.ts

@@ -0,0 +1,4 @@
+export type ViewerLobbyProps = {
+    onJoin: () => Promise<void>;
+};
+export declare const ViewerLobby: ({ onJoin }: ViewerLobbyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/livestream/viewer/ViewerStateRouter.d.ts

@@ -0,0 +1 @@
+export declare const ViewerStateRouter: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/BlurToggleButton/BlurToggleButton.d.ts

@@ -0,0 +1,2 @@
+export declare const BlurToggleButton: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const CameraMenuWithBlur: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/CallFeedback/CallEndedScreen.d.ts

@@ -0,0 +1,6 @@
+interface CallEndedScreenProps {
+    onJoin?: () => void;
+    onFeedback: () => void;
+}
+export declare const CallEndedScreen: ({ onJoin, onFeedback, }: CallEndedScreenProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/CallFeedback/CallFeedback.d.ts

@@ -0,0 +1,4 @@
+export interface CallFeedbackProps {
+    onJoin?: () => void;
+}
+export declare const CallFeedback: ({ onJoin }: CallFeedbackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/CallFeedback/RatingScreen.d.ts

@@ -0,0 +1,5 @@
+interface RatingScreenProps {
+    onSubmit: (rating: number, message: string) => void;
+}
+export declare const RatingScreen: ({ onSubmit }: RatingScreenProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/CallFeedback/StarRating.d.ts

@@ -0,0 +1,6 @@
+interface StarRatingProps {
+    value: number;
+    onChange: (rating: number) => void;
+}
+export declare const StarRating: ({ value, onChange }: StarRatingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/CallFeedback/ThankYouScreen.d.ts

@@ -0,0 +1 @@
+export declare const ThankYouScreen: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/ConnectionNotification/ConnectionNotification.d.ts

@@ -0,0 +1 @@
+export declare const ConnectionNotification: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/embedded/shared/EmbeddedParticipantViewUI/EmbeddedParticipantViewUI.d.ts

@@ -0,0 +1 @@
+export declare const EmbeddedParticipantViewUI: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/JoinError/JoinError.d.ts

@@ -0,0 +1,5 @@
+interface JoinErrorProps {
+    onJoin: () => void;
+}
+export declare const JoinError: ({ onJoin }: JoinErrorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/Lobby/DeviceControls.d.ts

@@ -0,0 +1,5 @@
+interface DeviceControlsProps {
+    isVideoEnabled: boolean;
+}
+export declare const DeviceControls: ({ isVideoEnabled }: DeviceControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/Lobby/DisabledDeviceButton.d.ts

@@ -0,0 +1,6 @@
+interface DisabledDeviceButtonProps {
+    icon: string;
+    label: string;
+}
+export declare const DisabledDeviceButton: ({ icon, label, }: DisabledDeviceButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/Lobby/Lobby.d.ts

@@ -0,0 +1,10 @@
+interface LobbyProps {
+    onJoin: () => void;
+    title?: string;
+    joinLabel?: string;
+}
+/**
+ * Lobby component - Device setup screen before joining a call.
+ */
+export declare const Lobby: ({ onJoin, title, joinLabel }: LobbyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/Lobby/ToggleCameraButton.d.ts

@@ -0,0 +1 @@
+export declare const ToggleCameraButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/Lobby/ToggleMicButton.d.ts

@@ -0,0 +1 @@
+export declare const ToggleMicButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/Lobby/VideoPreviewFallbacks.d.ts

@@ -0,0 +1,2 @@
+export declare const DisabledVideoPreview: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoCameraPreview: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/embedded/shared/ViewersCount/ViewersCount.d.ts

@@ -0,0 +1,5 @@
+interface ViewersCountProps {
+    count: number;
+}
+export declare const ViewersCount: ({ count }: ViewersCountProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/embedded/shared/index.d.ts

@@ -0,0 +1,7 @@
+export * from './BlurToggleButton/BlurToggleButton';
+export * from './CallFeedback/CallFeedback';
+export * from './ConnectionNotification/ConnectionNotification';
+export * from './EmbeddedParticipantViewUI/EmbeddedParticipantViewUI';
+export * from './JoinError/JoinError';
+export * from './Lobby/Lobby';
+export * from './ViewersCount/ViewersCount';

package/dist/src/embedded/types.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { LogLevel, TokenProvider } from '@stream-io/video-client';
+/**
+ * Available layout options.
+ */
+export type LayoutOption = 'Livestream' | 'PaginatedGrid' | 'SpeakerLeft' | 'SpeakerRight' | 'SpeakerTop' | 'SpeakerBottom';
+/**
+ * An authenticated user with a known identity.
+ * Requires a `token` or `tokenProvider` on the component props.
+ */
+export interface EmbeddedAuthenticatedUser {
+    type?: 'authenticated';
+    id: string;
+    name?: string;
+    image?: string;
+}
+/**
+ * A guest user — the server generates credentials automatically.
+ */
+export interface EmbeddedGuestUser {
+    type: 'guest';
+    id: string;
+    name?: string;
+    image?: string;
+}
+/**
+ * An anonymous user with no identity.
+ * May optionally receive a call-scoped token via the `token` prop.
+ */
+export interface EmbeddedAnonymousUser {
+    type: 'anonymous';
+    id?: '!anon';
+    name?: string;
+    image?: string;
+}
+/**
+ * Discriminated union for embedded user configuration.
+ */
+export type EmbeddedUser = EmbeddedAuthenticatedUser | EmbeddedGuestUser | EmbeddedAnonymousUser;
+/**
+ * Base props shared by EmbeddedCall and EmbeddedLivestream.
+ */
+export interface EmbeddedClientBaseProps {
+    apiKey: string;
+    callType: string;
+    callId: string;
+    user: EmbeddedUser;
+    token?: string;
+    tokenProvider?: TokenProvider;
+    logLevel?: LogLevel;
+    layout?: LayoutOption;
+    theme?: Record<string, string>;
+    onError?: (error: any) => void;
+    children?: ReactNode;
+}
+/**
+ * Props for the EmbeddedCall component.
+ */
+export interface EmbeddedMeetingProps extends EmbeddedClientBaseProps {
+}
+/**
+ * Props for the EmbeddedLivestream component.
+ */
+export interface EmbeddedLivestreamProps extends EmbeddedClientBaseProps {
+}

package/dist/src/hooks/usePersistedDevicePreferences.d.ts

@@ -1,16 +1,7 @@
-export type LocalDevicePreference = {
-    selectedDeviceId: string;
-    selectedDeviceLabel: string;
-    muted?: boolean;
-};
-export type LocalDevicePreferences = {
-    [type in DeviceKey]?: LocalDevicePreference | LocalDevicePreference[];
-};
-type DeviceKey = 'microphone' | 'camera' | 'speaker';
 /**
- * This hook will apply and persist the device preferences from local storage.
+ * This hook is a no-op. Device preference persistence is now handled
+ * by the low-level client SDK.
  *
- * @param key the key to use for local storage.
+ * @deprecated use the devicePreferences API of the StreamVideoClient.
  */
 export declare const usePersistedDevicePreferences: (key?: string) => void;
-export {};

package/dist/src/translations/index.d.ts

@@ -15,7 +15,7 @@ export declare const translations: {
         "Background filters performance is degraded. Consider disabling filters for better performance.": string;
         Live: string;
         "Livestream starts soon": string;
-        "Livestream starts at {{ startsAt }}": string;
+        "Livestream starts at {{ time }}": string;
         "{{ count }} participants joined early_one": string;
         "{{ count }} participants joined early_other": string;
         "You can now speak.": string;
@@ -95,5 +95,46 @@ export declare const translations: {
         "{{ userName }} is requesting to share their camera": string;
         "{{ userName }} is requesting to present their screen": string;
         "{{ userName }} is requesting permission: {{ permission }}": string;
+        "Applying...": string;
+        "Disable blur": string;
+        "Blur background": string;
+        "Migrating...": string;
+        "Reconnecting...": string;
+        "You are offline. Check your internet connection.": string;
+        "Failed to restore connection. Please try again.": string;
+        "Failed to join. Please try again.": string;
+        "Set up your call before joining": string;
+        "Please grant your browser permission to access your camera and microphone.": string;
+        "Start call": string;
+        Speaker: string;
+        Microphone: string;
+        Backstage: string;
+        "Go Live": string;
+        "Stop Live": string;
+        "Enter Backstage": string;
+        "Prepare your livestream": string;
+        "Ready to go live": string;
+        "Stream is ready!": string;
+        "Waiting for the livestream to start": string;
+        "{{ count }} waiting": string;
+        "Join Stream": string;
+        "Join automatically when stream starts": string;
+        "Display name": string;
+        "Permission needed": string;
+        "Call ended": string;
+        "Rejoin call": string;
+        "Left by mistake?": string;
+        "Help us improve": string;
+        "Leave feedback": string;
+        "Failed to rejoin. Please try again.": string;
+        "Share your feedback": string;
+        "Tell us about your experience...": string;
+        "Submit feedback": string;
+        "Feedback message": string;
+        "How was your call quality?": string;
+        "Rate {{ count }} star_one": string;
+        "Rate {{ count }} star_other": string;
+        "Thank you!": string;
+        "Your feedback helps improve call quality.": string;
     };
 };

package/embedded.ts

@@ -0,0 +1 @@
+export * from './src/embedded';

package/package.json

@@ -1,9 +1,22 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.32.4",
+  "version": "1.33.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./embedded": {
+      "types": "./dist/embedded.d.ts",
+      "import": "./dist/embedded.es.js",
+      "require": "./dist/embedded.cjs.js"
+    },
+    "./dist/css/*": "./dist/css/*"
+  },
   "license": "See license in LICENSE",
   "scripts": {
     "clean": "rimraf dist",
@@ -21,6 +34,7 @@
     "src",
     "assets",
     "index.ts",
+    "embedded.ts",
     "package.json",
     "README.md",
     "LICENSE",
@@ -31,9 +45,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.43.0",
+    "@stream-io/video-client": "1.44.0",
     "@stream-io/video-filters-web": "0.7.2",
-    "@stream-io/video-react-bindings": "1.13.8",
+    "@stream-io/video-react-bindings": "1.13.9",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -47,7 +61,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stream-io/audio-filters-web": "^0.7.2",
-    "@stream-io/video-styling": "^1.10.0",
+    "@stream-io/video-styling": "^1.11.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",