@stream-io/video-react-sdk 1.28.1 → 1.29.0

package/dist/src/components/BackgroundFilters/BackgroundFilters.d.ts

@@ -1,150 +1,11 @@
-import { PropsWithChildren } from 'react';
-import { BackgroundBlurLevel, BackgroundFilter, PlatformSupportFlags } from '@stream-io/video-filters-web';
-/**
- * Configuration for performance metric thresholds.
- */
-export type BackgroundFiltersPerformanceThresholds = {
-    /**
-     * The lower FPS threshold for triggering a performance warning.
-     * When the EMA FPS falls below this value, a warning is shown.
-     * @default 23
-     */
-    fpsWarningThresholdLower?: number;
-    /**
-     * The upper FPS threshold for clearing a performance warning.
-     * When the EMA FPS rises above this value, the warning is cleared.
-     * @default 25
-     */
-    fpsWarningThresholdUpper?: number;
-    /**
-     * The default FPS value used as the initial value for the EMA (Exponential Moving Average)
-     * calculation and when stats are unavailable or when resetting the filter.
-     * @default 30
-     */
-    defaultFps?: number;
-};
-/**
- * Represents the possible reasons for background filter performance degradation.
- */
-export declare enum PerformanceDegradationReason {
-    FRAME_DROP = "frame-drop",
-    CPU_THROTTLING = "cpu-throttling"
-}
-export type BackgroundFiltersProps = PlatformSupportFlags & {
-    /**
-     * A list of URLs to use as background images.
-     */
-    backgroundImages?: string[];
-    /**
-     * The background filter to apply to the video (by default).
-     * @default undefined no filter applied
-     */
-    backgroundFilter?: BackgroundFilter;
-    /**
-     * The URL of the image to use as the background (by default).
-     */
-    backgroundImage?: string;
-    /**
-     * The level of blur to apply to the background (by default).
-     * @default 'high'.
-     */
-    backgroundBlurLevel?: BackgroundBlurLevel;
-    /**
-     * The base path for the TensorFlow Lite files.
-     * @default 'https://unpkg.com/@stream-io/video-filters-web/mediapipe'.
-     */
-    basePath?: string;
-    /**
-     * The path to the TensorFlow Lite WebAssembly file.
-     *
-     * Override this prop to use a custom path to the TensorFlow Lite WebAssembly file
-     * (e.g., if you choose to host it yourself).
-     */
-    tfFilePath?: string;
-    /**
-     * The path to the MediaPipe model file.
-     * Override this prop to use a custom path to the MediaPipe model file
-     * (e.g., if you choose to host it yourself).
-     */
-    modelFilePath?: string;
-    /**
-     * When true, the filter uses the legacy TensorFlow-based segmentation model.
-     * When false, it uses the default MediaPipe Tasks Vision model.
-     *
-     * Only enable this if you need to mimic the behavior of older SDK versions.
-     */
-    useLegacyFilter?: boolean;
-    /**
-     * When a started filter encounters an error, this callback will be executed.
-     * The default behavior (not overridable) is unregistering a failed filter.
-     * Use this callback to display UI error message, disable the corresponding stream,
-     * or to try registering the filter again.
-     */
-    onError?: (error: any) => void;
-    /**
-     * Configuration for performance metric thresholds.
-     * Use this to customize when performance warnings are triggered.
-     */
-    performanceThresholds?: BackgroundFiltersPerformanceThresholds;
-};
-/**
- * Performance degradation information for background filters.
- *
- * Performance is calculated using an Exponential Moving Average (EMA) of FPS values
- * to smooth out quick spikes and provide stable performance warnings.
- */
-export type BackgroundFiltersPerformance = {
-    /**
-     * Whether performance is currently degraded.
-     */
-    degraded: boolean;
-    /**
-     * Reasons for performance degradation.
-     */
-    reason?: Array<PerformanceDegradationReason>;
-};
-export type BackgroundFiltersAPI = {
-    /**
-     * Whether the current platform supports the background filters.
-     */
-    isSupported: boolean;
-    /**
-     * Indicates whether the background filters engine is loaded and ready.
-     */
-    isReady: boolean;
-    /**
-     * Performance information for background filters.
-     */
-    performance: BackgroundFiltersPerformance;
-    /**
-     * Disables all background filters applied to the video.
-     */
-    disableBackgroundFilter: () => void;
-    /**
-     * Applies a background blur filter to the video.
-     *
-     * @param blurLevel the level of blur to apply to the background.
-     */
-    applyBackgroundBlurFilter: (blurLevel: BackgroundBlurLevel) => void;
-    /**
-     * Applies a background image filter to the video.
-     *
-     * @param imageUrl the URL of the image to use as the background.
-     */
-    applyBackgroundImageFilter: (imageUrl: string) => void;
-};
-/**
- * The context value for the background filters context.
- */
-export type BackgroundFiltersContextValue = BackgroundFiltersProps & BackgroundFiltersAPI;
-/**
- * A hook to access the background filters context API.
- */
-export declare const useBackgroundFilters: () => BackgroundFiltersContextValue;
+import { Context, PropsWithChildren } from 'react';
+import type { BackgroundFiltersProps, BackgroundFiltersContextValue } from './types';
 /**
  * A provider component that enables the use of background filters in your app.
  *
  * Please make sure you have the `@stream-io/video-filters-web` package installed
  * in your project before using this component.
  */
-export declare const BackgroundFiltersProvider: (props: PropsWithChildren<BackgroundFiltersProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const BackgroundFiltersProvider: (props: PropsWithChildren<BackgroundFiltersProps> & {
+    ContextProvider: Context<BackgroundFiltersContextValue | undefined>;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/BackgroundFilters/BackgroundFiltersProvider.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import type { BackgroundFiltersProps, BackgroundFiltersContextValue } from './types';
+/**
+ * A hook to access the background filters context API.
+ */
+export declare const useBackgroundFilters: () => BackgroundFiltersContextValue;
+/**
+ * A provider component that enables the use of background filters in your app.
+ *
+ * Please make sure you have the `@stream-io/video-filters-web` package installed
+ * in your project before using this component.
+ */
+export declare const BackgroundFiltersProvider: (props: PropsWithChildren<BackgroundFiltersProps> & {
+    SuspenseFallback?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/BackgroundFilters/index.d.ts

@@ -1 +1,2 @@
-export * from './BackgroundFilters';
+export * from './BackgroundFiltersProvider';
+export * from './types';

package/dist/src/components/BackgroundFilters/types.d.ts

@@ -0,0 +1,135 @@
+import type { BackgroundBlurLevel, BackgroundFilter, PlatformSupportFlags } from '@stream-io/video-filters-web';
+/**
+ * Configuration for performance metric thresholds.
+ */
+export type BackgroundFiltersPerformanceThresholds = {
+    /**
+     * The lower FPS threshold for triggering a performance warning.
+     * When the EMA FPS falls below this value, a warning is shown.
+     * @default 23
+     */
+    fpsWarningThresholdLower?: number;
+    /**
+     * The upper FPS threshold for clearing a performance warning.
+     * When the EMA FPS rises above this value, the warning is cleared.
+     * @default 25
+     */
+    fpsWarningThresholdUpper?: number;
+    /**
+     * The default FPS value used as the initial value for the EMA (Exponential Moving Average)
+     * calculation and when stats are unavailable or when resetting the filter.
+     * @default 30
+     */
+    defaultFps?: number;
+};
+export type BackgroundFiltersProps = PlatformSupportFlags & {
+    /**
+     * A list of URLs to use as background images.
+     */
+    backgroundImages?: string[];
+    /**
+     * The background filter to apply to the video (by default).
+     * @default undefined no filter applied
+     */
+    backgroundFilter?: BackgroundFilter;
+    /**
+     * The URL of the image to use as the background (by default).
+     */
+    backgroundImage?: string;
+    /**
+     * The level of blur to apply to the background (by default).
+     * @default 'high'.
+     */
+    backgroundBlurLevel?: BackgroundBlurLevel;
+    /**
+     * The base path for the TensorFlow Lite files.
+     * @default 'https://unpkg.com/@stream-io/video-filters-web/mediapipe'.
+     */
+    basePath?: string;
+    /**
+     * The path to the TensorFlow Lite WebAssembly file.
+     *
+     * Override this prop to use a custom path to the TensorFlow Lite WebAssembly file
+     * (e.g., if you choose to host it yourself).
+     */
+    tfFilePath?: string;
+    /**
+     * The path to the MediaPipe model file.
+     * Override this prop to use a custom path to the MediaPipe model file
+     * (e.g., if you choose to host it yourself).
+     */
+    modelFilePath?: string;
+    /**
+     * When true, the filter uses the legacy TensorFlow-based segmentation model.
+     * When false, it uses the default MediaPipe Tasks Vision model.
+     *
+     * Only enable this if you need to mimic the behavior of older SDK versions.
+     */
+    useLegacyFilter?: boolean;
+    /**
+     * When a started filter encounters an error, this callback will be executed.
+     * The default behavior (not overridable) is unregistering a failed filter.
+     * Use this callback to display UI error message, disable the corresponding stream,
+     * or to try registering the filter again.
+     */
+    onError?: (error: any) => void;
+    /**
+     * Configuration for performance metric thresholds.
+     * Use this to customize when performance warnings are triggered.
+     */
+    performanceThresholds?: BackgroundFiltersPerformanceThresholds;
+};
+/**
+ * Represents the possible reasons for background filter performance degradation.
+ */
+export type PerformanceDegradationReason = 'frame-drop' | 'cpu-throttling';
+/**
+ * Performance degradation information for background filters.
+ *
+ * Performance is calculated using an Exponential Moving Average (EMA) of FPS values
+ * to smooth out quick spikes and provide stable performance warnings.
+ */
+export type BackgroundFiltersPerformance = {
+    /**
+     * Whether performance is currently degraded.
+     */
+    degraded: boolean;
+    /**
+     * Reasons for performance degradation.
+     */
+    reason?: Array<PerformanceDegradationReason>;
+};
+export type BackgroundFiltersAPI = {
+    /**
+     * Whether the current platform supports the background filters.
+     */
+    isSupported: boolean;
+    /**
+     * Indicates whether the background filters engine is loaded and ready.
+     */
+    isReady: boolean;
+    /**
+     * Performance information for background filters.
+     */
+    performance: BackgroundFiltersPerformance;
+    /**
+     * Disables all background filters applied to the video.
+     */
+    disableBackgroundFilter: () => void;
+    /**
+     * Applies a background blur filter to the video.
+     *
+     * @param blurLevel the level of blur to apply to the background.
+     */
+    applyBackgroundBlurFilter: (blurLevel: BackgroundBlurLevel) => void;
+    /**
+     * Applies a background image filter to the video.
+     *
+     * @param imageUrl the URL of the image to use as the background.
+     */
+    applyBackgroundImageFilter: (imageUrl: string) => void;
+};
+/**
+ * The context value for the background filters context.
+ */
+export type BackgroundFiltersContextValue = BackgroundFiltersProps & BackgroundFiltersAPI;

package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts

@@ -57,8 +57,13 @@ export type SpeakerLayoutProps = {
      * Whether the layout is muted. Defaults to `false`.
      */
     muted?: boolean;
+    /**
+     * Whether to enable drag-to-scroll functionality on the participants bar.
+     * @default false
+     */
+    enableDragToScroll?: boolean;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 export declare const SpeakerLayout: {
-    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, filterParticipants, pageArrowsVisible, muted, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, filterParticipants, pageArrowsVisible, muted, enableDragToScroll, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

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

@@ -4,3 +4,4 @@ export * from './useScrollPosition';
 export * from './useRequestPermission';
 export * from './useDeviceList';
 export * from './useModeration';
+export * from './useDragToScroll';

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

@@ -0,0 +1,18 @@
+interface DragToScrollOptions {
+    decay?: number;
+    minVelocity?: number;
+    dragThreshold?: number;
+    enabled?: boolean;
+}
+/**
+ * Enables drag-to-scroll functionality with momentum scrolling on a scrollable element.
+ *
+ * This hook allows users to click and drag to scroll an element, with momentum scrolling
+ * that continues after the drag ends. The drag only activates after moving beyond a threshold
+ *  distance, which prevents accidental drags from clicks.
+ *
+ * @param element - The HTML element to enable drag to scroll on.
+ * @param options - Options for customizing the drag-to-scroll behavior.
+ */
+export declare function useDragToScroll(element: HTMLElement | null, options?: DragToScrollOptions): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.28.1",
+  "version": "1.29.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -31,9 +31,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.38.1",
+    "@stream-io/video-client": "1.39.0",
     "@stream-io/video-filters-web": "0.6.0",
-    "@stream-io/video-react-bindings": "1.12.1",
+    "@stream-io/video-react-bindings": "1.12.3",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -46,7 +46,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@stream-io/audio-filters-web": "^0.6.1",
+    "@stream-io/audio-filters-web": "^0.7.0",
     "@stream-io/video-styling": "^1.9.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",