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

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { hasAudio, hasScreenShareAudio, CallingState, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, disposeOfMediaStream, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, humanize, setSdkInfo } from '@stream-io/video-client';
+import { hasAudio, hasScreenShareAudio, CallingState, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, humanize, setSdkInfo } from '@stream-io/video-client';
 export * from '@stream-io/video-client';
 import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, StreamCallProvider, StreamVideoProvider, useStreamVideoClient, useEffectEvent } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
@@ -6,8 +6,6 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
 import clsx from 'clsx';
-import { flushSync } from 'react-dom';
-import { loadTFLite, loadMediaPipe, isPlatformSupported, isMediaPipePlatformSupported, VirtualBackground, createRenderer } from '@stream-io/video-filters-web';
 
 const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     const call = useCall();
@@ -596,6 +594,118 @@ const useModeration = (options) => {
     useEffect(() => disableBlur, [disableBlur]);
 };
 
+/**
+ * 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.
+ */
+function useDragToScroll(element, options = {}) {
+    const stateRef = useRef({
+        isDragging: false,
+        isPointerActive: false,
+        prevX: 0,
+        prevY: 0,
+        velocityX: 0,
+        velocityY: 0,
+        rafId: 0,
+        startX: 0,
+        startY: 0,
+    });
+    useEffect(() => {
+        if (!element || !options.enabled)
+            return;
+        const { decay = 0.95, minVelocity = 0.5, dragThreshold = 5 } = options;
+        const state = stateRef.current;
+        const stopMomentum = () => {
+            if (state.rafId) {
+                cancelAnimationFrame(state.rafId);
+                state.rafId = 0;
+            }
+            state.velocityX = 0;
+            state.velocityY = 0;
+        };
+        const momentumStep = () => {
+            state.velocityX *= decay;
+            state.velocityY *= decay;
+            element.scrollLeft -= state.velocityX;
+            element.scrollTop -= state.velocityY;
+            if (Math.abs(state.velocityX) < minVelocity &&
+                Math.abs(state.velocityY) < minVelocity) {
+                state.rafId = 0;
+                return;
+            }
+            state.rafId = requestAnimationFrame(momentumStep);
+        };
+        const onPointerDown = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            stopMomentum();
+            state.isDragging = false;
+            state.isPointerActive = true;
+            state.prevX = e.clientX;
+            state.prevY = e.clientY;
+            state.startX = e.clientX;
+            state.startY = e.clientY;
+        };
+        const onPointerMove = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            if (!state.isPointerActive)
+                return;
+            const dx = e.clientX - state.startX;
+            const dy = e.clientY - state.startY;
+            if (!state.isDragging && Math.hypot(dx, dy) > dragThreshold) {
+                state.isDragging = true;
+                e.preventDefault();
+            }
+            if (!state.isDragging)
+                return;
+            const moveDx = e.clientX - state.prevX;
+            const moveDy = e.clientY - state.prevY;
+            element.scrollLeft -= moveDx;
+            element.scrollTop -= moveDy;
+            state.velocityX = moveDx;
+            state.velocityY = moveDy;
+            state.prevX = e.clientX;
+            state.prevY = e.clientY;
+        };
+        const onPointerUpOrCancel = () => {
+            const wasDragging = state.isDragging;
+            state.isDragging = false;
+            state.isPointerActive = false;
+            state.prevX = 0;
+            state.prevY = 0;
+            state.startX = 0;
+            state.startY = 0;
+            if (!wasDragging) {
+                stopMomentum();
+                return;
+            }
+            if (Math.hypot(state.velocityX, state.velocityY) < minVelocity) {
+                stopMomentum();
+                return;
+            }
+            state.rafId = requestAnimationFrame(momentumStep);
+        };
+        element.addEventListener('pointerdown', onPointerDown);
+        element.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUpOrCancel);
+        window.addEventListener('pointercancel', onPointerUpOrCancel);
+        return () => {
+            element.removeEventListener('pointerdown', onPointerDown);
+            element.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUpOrCancel);
+            window.removeEventListener('pointercancel', onPointerUpOrCancel);
+            stopMomentum();
+        };
+    }, [element, options]);
+}
+
 var MenuVisualType;
 (function (MenuVisualType) {
     MenuVisualType["PORTAL"] = "portal";
@@ -957,34 +1067,9 @@ const AvatarFallback = ({ className, names, style, }) => {
     return (jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
 };
 
-/**
- * Constants for FPS warning calculation.
- * Smooths out quick spikes using an EMA, ignores brief outliers,
- * and uses two thresholds to avoid flickering near the limit.
- */
-const ALPHA = 0.2;
-const FPS_WARNING_THRESHOLD_LOWER = 23;
-const FPS_WARNING_THRESHOLD_UPPER = 25;
-const DEFAULT_FPS = 30;
-const DEVIATION_LIMIT = 0.5;
-const OUTLIER_PERSISTENCE = 5;
-/**
- * Represents the available background filter processing engines.
- */
-var FilterEngine;
-(function (FilterEngine) {
-    FilterEngine[FilterEngine["TF"] = 0] = "TF";
-    FilterEngine[FilterEngine["MEDIA_PIPE"] = 1] = "MEDIA_PIPE";
-    FilterEngine[FilterEngine["NONE"] = 2] = "NONE";
-})(FilterEngine || (FilterEngine = {}));
-/**
- * Represents the possible reasons for background filter performance degradation.
- */
-var PerformanceDegradationReason;
-(function (PerformanceDegradationReason) {
-    PerformanceDegradationReason["FRAME_DROP"] = "frame-drop";
-    PerformanceDegradationReason["CPU_THROTTLING"] = "cpu-throttling";
-})(PerformanceDegradationReason || (PerformanceDegradationReason = {}));
+const BackgroundFiltersProviderImpl = lazy(() => import('./background-filters-B5aRj_vl.es.js').then((m) => ({
+    default: m.BackgroundFiltersProvider,
+})));
 /**
  * The context for the background filters.
  */
@@ -999,26 +1084,6 @@ const useBackgroundFilters = () => {
     }
     return context;
 };
-/**
- * Determines which filter engine is available.
- * MEDIA_PIPE is the default unless legacy filters are requested or MediaPipe is unsupported.
- *
- * Returns NONE if neither is supported.
- */
-const determineEngine = async (useLegacyFilter, forceSafariSupport, forceMobileSupport) => {
-    const isTfPlatformSupported = await isPlatformSupported({
-        forceSafariSupport,
-        forceMobileSupport,
-    });
-    if (useLegacyFilter) {
-        return isTfPlatformSupported ? FilterEngine.TF : FilterEngine.NONE;
-    }
-    const isMediaPipeSupported = await isMediaPipePlatformSupported({
-        forceSafariSupport,
-        forceMobileSupport,
-    });
-    return isMediaPipeSupported ? FilterEngine.MEDIA_PIPE : FilterEngine.NONE;
-};
 /**
  * A provider component that enables the use of background filters in your app.
  *
@@ -1026,295 +1091,8 @@ const determineEngine = async (useLegacyFilter, forceSafariSupport, forceMobileS
  * in your project before using this component.
  */
 const BackgroundFiltersProvider = (props) => {
-    const { children, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = undefined, tfFilePath, modelFilePath, useLegacyFilter, basePath, onError, performanceThresholds, forceSafariSupport, forceMobileSupport, } = props;
-    const call = useCall();
-    const { useCallStatsReport } = useCallStateHooks();
-    const callStatsReport = useCallStatsReport();
-    const [backgroundFilter, setBackgroundFilter] = useState(bgFilterFromProps);
-    const [backgroundImage, setBackgroundImage] = useState(bgImageFromProps);
-    const [backgroundBlurLevel, setBackgroundBlurLevel] = useState(bgBlurLevelFromProps);
-    const [showLowFpsWarning, setShowLowFpsWarning] = useState(false);
-    const fpsWarningThresholdLower = performanceThresholds?.fpsWarningThresholdLower ??
-        FPS_WARNING_THRESHOLD_LOWER;
-    const fpsWarningThresholdUpper = performanceThresholds?.fpsWarningThresholdUpper ??
-        FPS_WARNING_THRESHOLD_UPPER;
-    const defaultFps = performanceThresholds?.defaultFps ?? DEFAULT_FPS;
-    const emaRef = useRef(defaultFps);
-    const outlierStreakRef = useRef(0);
-    const handleStats = useCallback((stats) => {
-        const fps = stats?.fps;
-        if (fps === undefined || fps === null) {
-            emaRef.current = defaultFps;
-            outlierStreakRef.current = 0;
-            setShowLowFpsWarning(false);
-            return;
-        }
-        const prevEma = emaRef.current;
-        const deviation = Math.abs(fps - prevEma) / prevEma;
-        const isOutlier = fps < prevEma && deviation > DEVIATION_LIMIT;
-        outlierStreakRef.current = isOutlier ? outlierStreakRef.current + 1 : 0;
-        if (isOutlier && outlierStreakRef.current < OUTLIER_PERSISTENCE)
-            return;
-        emaRef.current = ALPHA * fps + (1 - ALPHA) * prevEma;
-        setShowLowFpsWarning((prev) => {
-            if (prev && emaRef.current > fpsWarningThresholdUpper)
-                return false;
-            if (!prev && emaRef.current < fpsWarningThresholdLower)
-                return true;
-            return prev;
-        });
-    }, [fpsWarningThresholdLower, fpsWarningThresholdUpper, defaultFps]);
-    const performance = useMemo(() => {
-        if (!backgroundFilter) {
-            return { degraded: false };
-        }
-        const reasons = [];
-        if (showLowFpsWarning) {
-            reasons.push(PerformanceDegradationReason.FRAME_DROP);
-        }
-        const qualityLimitationReasons = callStatsReport?.publisherStats?.qualityLimitationReasons;
-        if (showLowFpsWarning &&
-            qualityLimitationReasons &&
-            qualityLimitationReasons?.includes('cpu')) {
-            reasons.push(PerformanceDegradationReason.CPU_THROTTLING);
-        }
-        return {
-            degraded: reasons.length > 0,
-            reason: reasons.length > 0 ? reasons : undefined,
-        };
-    }, [
-        showLowFpsWarning,
-        callStatsReport?.publisherStats?.qualityLimitationReasons,
-        backgroundFilter,
-    ]);
-    const prevDegradedRef = useRef(undefined);
-    useEffect(() => {
-        const currentDegraded = performance.degraded;
-        const prevDegraded = prevDegradedRef.current;
-        if (!!backgroundFilter &&
-            prevDegraded !== undefined &&
-            prevDegraded !== currentDegraded) {
-            call?.tracer.trace('backgroundFilters.performance', {
-                degraded: currentDegraded,
-                reason: performance?.reason,
-                fps: emaRef.current,
-            });
-        }
-        prevDegradedRef.current = currentDegraded;
-    }, [
-        performanceThresholds,
-        performance.degraded,
-        performance.reason,
-        backgroundFilter,
-        call?.tracer,
-    ]);
-    const applyBackgroundImageFilter = useCallback((imageUrl) => {
-        setBackgroundFilter('image');
-        setBackgroundImage(imageUrl);
-    }, []);
-    const applyBackgroundBlurFilter = useCallback((blurLevel = 'high') => {
-        setBackgroundFilter('blur');
-        setBackgroundBlurLevel(blurLevel);
-    }, []);
-    const disableBackgroundFilter = useCallback(() => {
-        setBackgroundFilter(undefined);
-        setBackgroundImage(undefined);
-        setBackgroundBlurLevel(undefined);
-        emaRef.current = defaultFps;
-        outlierStreakRef.current = 0;
-        setShowLowFpsWarning(false);
-    }, [defaultFps]);
-    const [engine, setEngine] = useState(FilterEngine.NONE);
-    const [isSupported, setIsSupported] = useState(false);
-    useEffect(() => {
-        determineEngine(useLegacyFilter, forceSafariSupport, forceMobileSupport).then((determinedEngine) => {
-            setEngine(determinedEngine);
-            setIsSupported(determinedEngine !== FilterEngine.NONE);
-        });
-    }, [forceMobileSupport, forceSafariSupport, useLegacyFilter]);
-    const [tfLite, setTfLite] = useState();
-    useEffect(() => {
-        if (engine !== FilterEngine.TF)
-            return;
-        loadTFLite({ basePath, modelFilePath, tfFilePath })
-            .then(setTfLite)
-            .catch((err) => console.error('Failed to load TFLite', err));
-    }, [basePath, engine, modelFilePath, tfFilePath]);
-    const [mediaPipe, setMediaPipe] = useState();
-    useEffect(() => {
-        if (engine !== FilterEngine.MEDIA_PIPE)
-            return;
-        loadMediaPipe({
-            basePath: basePath,
-            modelPath: modelFilePath,
-        })
-            .then(setMediaPipe)
-            .catch((err) => console.error('Failed to preload MediaPipe', err));
-    }, [engine, modelFilePath, basePath]);
-    const handleError = useCallback((error) => {
-        console.warn('[filters] Filter encountered an error and will be disabled');
-        disableBackgroundFilter();
-        onError?.(error);
-    }, [disableBackgroundFilter, onError]);
-    const isReady = useLegacyFilter ? !!tfLite : !!mediaPipe;
-    return (jsxs(BackgroundFiltersContext.Provider, { value: {
-            isSupported,
-            performance,
-            isReady,
-            backgroundImage,
-            backgroundBlurLevel,
-            backgroundFilter,
-            disableBackgroundFilter,
-            applyBackgroundBlurFilter,
-            applyBackgroundImageFilter,
-            backgroundImages,
-            tfFilePath,
-            modelFilePath,
-            basePath,
-            onError: handleError,
-        }, children: [children, isReady && (jsx(BackgroundFilters, { tfLite: tfLite, engine: engine, onStats: handleStats }))] }));
-};
-const BackgroundFilters = (props) => {
-    const call = useCall();
-    const { children, start } = useRenderer(props.tfLite, call, props.engine);
-    const { onError, backgroundFilter } = useBackgroundFilters();
-    const handleErrorRef = useRef(undefined);
-    handleErrorRef.current = onError;
-    const handleStatsRef = useRef(undefined);
-    handleStatsRef.current = props.onStats;
-    useEffect(() => {
-        if (!call || !backgroundFilter)
-            return;
-        const { unregister } = call.camera.registerFilter((ms) => {
-            return start(ms, (error) => handleErrorRef.current?.(error), (stats) => handleStatsRef.current?.(stats));
-        });
-        return () => {
-            unregister().catch((err) => console.warn(`Can't unregister filter`, err));
-        };
-    }, [call, start, backgroundFilter]);
-    return children;
-};
-const useRenderer = (tfLite, call, engine) => {
-    const { backgroundFilter, backgroundBlurLevel, backgroundImage, modelFilePath, basePath, } = useBackgroundFilters();
-    const videoRef = useRef(null);
-    const canvasRef = useRef(null);
-    const bgImageRef = useRef(null);
-    const [videoSize, setVideoSize] = useState({
-        width: 1920,
-        height: 1080,
-    });
-    const start = useCallback((ms, onError, onStats) => {
-        let outputStream;
-        let processor;
-        let renderer;
-        const output = new Promise((resolve, reject) => {
-            if (!backgroundFilter) {
-                reject(new Error('No filter specified'));
-                return;
-            }
-            const videoEl = videoRef.current;
-            const canvasEl = canvasRef.current;
-            const bgImageEl = bgImageRef.current;
-            const [track] = ms.getVideoTracks();
-            if (!track) {
-                reject(new Error('No video tracks in input media stream'));
-                return;
-            }
-            if (engine === FilterEngine.MEDIA_PIPE) {
-                call?.tracer.trace('backgroundFilters.enable', {
-                    backgroundFilter,
-                    backgroundBlurLevel,
-                    backgroundImage,
-                    engine,
-                });
-                if (!videoEl) {
-                    reject(new Error('Renderer started before elements are ready'));
-                    return;
-                }
-                const trackSettings = track.getSettings();
-                flushSync(() => setVideoSize({
-                    width: trackSettings.width ?? 0,
-                    height: trackSettings.height ?? 0,
-                }));
-                processor = new VirtualBackground(track, {
-                    basePath: basePath,
-                    modelPath: modelFilePath,
-                    backgroundBlurLevel,
-                    backgroundImage,
-                    backgroundFilter,
-                }, { onError, onStats });
-                processor
-                    .start()
-                    .then((processedTrack) => {
-                    outputStream = new MediaStream([processedTrack]);
-                    resolve(outputStream);
-                })
-                    .catch((error) => {
-                    reject(error);
-                });
-                return;
-            }
-            if (engine === FilterEngine.TF) {
-                if (!videoEl || !canvasEl || (backgroundImage && !bgImageEl)) {
-                    reject(new Error('Renderer started before elements are ready'));
-                    return;
-                }
-                videoEl.srcObject = ms;
-                videoEl.play().then(() => {
-                    const trackSettings = track.getSettings();
-                    flushSync(() => setVideoSize({
-                        width: trackSettings.width ?? 0,
-                        height: trackSettings.height ?? 0,
-                    }));
-                    call?.tracer.trace('backgroundFilters.enable', {
-                        backgroundFilter,
-                        backgroundBlurLevel,
-                        backgroundImage,
-                        engine,
-                    });
-                    if (!tfLite) {
-                        reject(new Error('TensorFlow Lite not loaded'));
-                        return;
-                    }
-                    renderer = createRenderer(tfLite, videoEl, canvasEl, {
-                        backgroundFilter,
-                        backgroundBlurLevel,
-                        backgroundImage: bgImageEl ?? undefined,
-                    }, onError);
-                    outputStream = canvasEl.captureStream();
-                    resolve(outputStream);
-                }, () => {
-                    reject(new Error('Could not play the source video stream'));
-                });
-                return;
-            }
-            reject(new Error('No supported engine available'));
-        });
-        return {
-            output,
-            stop: () => {
-                call?.tracer.trace('backgroundFilters.disable', null);
-                processor?.stop();
-                renderer?.dispose();
-                if (videoRef.current)
-                    videoRef.current.srcObject = null;
-                if (outputStream)
-                    disposeOfMediaStream(outputStream);
-            },
-        };
-    }, [
-        backgroundBlurLevel,
-        backgroundFilter,
-        backgroundImage,
-        call?.tracer,
-        tfLite,
-        engine,
-        modelFilePath,
-        basePath,
-    ]);
-    const children = (jsxs("div", { className: "str-video__background-filters", children: [jsx("video", { className: clsx('str-video__background-filters__video', videoSize.height > videoSize.width &&
-                    'str-video__background-filters__video--tall'), ref: videoRef, playsInline: true, muted: true, controls: false, ...videoSize }), backgroundImage && (jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: bgImageRef, crossOrigin: "anonymous", src: backgroundImage, ...videoSize })), jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
-    return { start, children };
+    const { SuspenseFallback = null, ...filterProps } = props;
+    return (jsx(Suspense, { fallback: SuspenseFallback, children: jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
 };
 
 const IconButton = forwardRef(function IconButton(props, ref) {
@@ -1786,7 +1564,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = useRef(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const { t } = useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.28.1"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.29.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -3279,7 +3057,7 @@ hostElement, limit) => {
 };
 
 const DefaultParticipantViewUIBar = () => (jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
-const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, muted, }) => {
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, muted, enableDragToScroll = false, }) => {
     const call = useCall();
     const { useParticipants } = useCallStateHooks();
     const allParticipants = useParticipants();
@@ -3300,6 +3078,9 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
     }, [participantsBarWrapperElement, call]);
     const isOneOnOneCall = allParticipants.length === 2;
     useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+    useDragToScroll(participantsBarWrapperElement, {
+        enabled: enableDragToScroll,
+    });
     let participantsWithAppliedLimit = otherParticipants;
     const hardLimitToApply = isVertical
         ? hardLimit.vertical
@@ -3452,7 +3233,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.28.1").split('.');
+const [major, minor, patch] = ("1.29.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -3460,5 +3241,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, AudioVolumeIndicator, Avatar, AvatarFallback, BackgroundFiltersProvider, BackstageLayout, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PerformanceDegradationReason, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakerTest, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, applyFilter, defaultEmojiReactionMap, defaultReactions, translations, useBackgroundFilters, useDeviceList, useFilteredParticipants, useHorizontalScrollPosition, useMenuContext, useModeration, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
+export { AcceptCallButton, Audio, AudioVolumeIndicator, Avatar, AvatarFallback, BackgroundFiltersProvider, BackstageLayout, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakerTest, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, applyFilter, defaultEmojiReactionMap, defaultReactions, translations, useBackgroundFilters, useDeviceList, useFilteredParticipants, useHorizontalScrollPosition, useMenuContext, useModeration, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map