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

package/dist/esm/src/hooks/useDragToScroll.js

@@ -0,0 +1,116 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * 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 { enabled, decay = 0.95, minVelocity = 0.5, dragThreshold = 5, } = 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 || !enabled)
+            return;
+        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, enabled, decay, minVelocity, dragThreshold]);
+}
+
+export { useDragToScroll };
+//# sourceMappingURL=useDragToScroll.js.map

package/dist/esm/src/hooks/useDragToScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragToScroll.js","sources":["../../../../../../src/hooks/useDragToScroll.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ninterface DragScrollState {\n  isDragging: boolean;\n  isPointerActive: boolean;\n  prevX: number;\n  prevY: number;\n  velocityX: number;\n  velocityY: number;\n  rafId: number;\n  startX: number;\n  startY: number;\n}\n\ninterface DragToScrollOptions {\n  decay?: number;\n  minVelocity?: number;\n  dragThreshold?: number;\n  enabled?: boolean;\n}\n\n/**\n * Enables drag-to-scroll functionality with momentum scrolling on a scrollable element.\n *\n * This hook allows users to click and drag to scroll an element, with momentum scrolling\n * that continues after the drag ends. The drag only activates after moving beyond a threshold\n *  distance, which prevents accidental drags from clicks.\n *\n * @param element - The HTML element to enable drag to scroll on.\n * @param options - Options for customizing the drag-to-scroll behavior.\n */\nexport function useDragToScroll(\n  element: HTMLElement | null,\n  options: DragToScrollOptions = {},\n) {\n  const {\n    enabled,\n    decay = 0.95,\n    minVelocity = 0.5,\n    dragThreshold = 5,\n  } = options;\n\n  const stateRef = useRef<DragScrollState>({\n    isDragging: false,\n    isPointerActive: false,\n    prevX: 0,\n    prevY: 0,\n    velocityX: 0,\n    velocityY: 0,\n    rafId: 0,\n    startX: 0,\n    startY: 0,\n  });\n\n  useEffect(() => {\n    if (!element || !enabled) return;\n\n    const state = stateRef.current;\n\n    const stopMomentum = () => {\n      if (state.rafId) {\n        cancelAnimationFrame(state.rafId);\n        state.rafId = 0;\n      }\n      state.velocityX = 0;\n      state.velocityY = 0;\n    };\n\n    const momentumStep = () => {\n      state.velocityX *= decay;\n      state.velocityY *= decay;\n\n      element.scrollLeft -= state.velocityX;\n      element.scrollTop -= state.velocityY;\n\n      if (\n        Math.abs(state.velocityX) < minVelocity &&\n        Math.abs(state.velocityY) < minVelocity\n      ) {\n        state.rafId = 0;\n        return;\n      }\n\n      state.rafId = requestAnimationFrame(momentumStep);\n    };\n\n    const onPointerDown = (e: PointerEvent) => {\n      if (e.pointerType !== 'mouse') return;\n\n      stopMomentum();\n\n      state.isDragging = false;\n      state.isPointerActive = true;\n\n      state.prevX = e.clientX;\n      state.prevY = e.clientY;\n      state.startX = e.clientX;\n      state.startY = e.clientY;\n    };\n\n    const onPointerMove = (e: PointerEvent) => {\n      if (e.pointerType !== 'mouse') return;\n\n      if (!state.isPointerActive) return;\n\n      const dx = e.clientX - state.startX;\n      const dy = e.clientY - state.startY;\n\n      if (!state.isDragging && Math.hypot(dx, dy) > dragThreshold) {\n        state.isDragging = true;\n        e.preventDefault();\n      }\n\n      if (!state.isDragging) return;\n\n      const moveDx = e.clientX - state.prevX;\n      const moveDy = e.clientY - state.prevY;\n\n      element.scrollLeft -= moveDx;\n      element.scrollTop -= moveDy;\n\n      state.velocityX = moveDx;\n      state.velocityY = moveDy;\n\n      state.prevX = e.clientX;\n      state.prevY = e.clientY;\n    };\n\n    const onPointerUpOrCancel = () => {\n      const wasDragging = state.isDragging;\n\n      state.isDragging = false;\n      state.isPointerActive = false;\n\n      state.prevX = 0;\n      state.prevY = 0;\n      state.startX = 0;\n      state.startY = 0;\n\n      if (!wasDragging) {\n        stopMomentum();\n        return;\n      }\n\n      if (Math.hypot(state.velocityX, state.velocityY) < minVelocity) {\n        stopMomentum();\n        return;\n      }\n\n      state.rafId = requestAnimationFrame(momentumStep);\n    };\n\n    element.addEventListener('pointerdown', onPointerDown);\n    element.addEventListener('pointermove', onPointerMove);\n    window.addEventListener('pointerup', onPointerUpOrCancel);\n    window.addEventListener('pointercancel', onPointerUpOrCancel);\n\n    return () => {\n      element.removeEventListener('pointerdown', onPointerDown);\n      element.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', onPointerUpOrCancel);\n      window.removeEventListener('pointercancel', onPointerUpOrCancel);\n\n      stopMomentum();\n    };\n  }, [element, enabled, decay, minVelocity, dragThreshold]);\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/src/hooks/useFloatingUIPreset.js

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useFloating, offset, shift, flip, size, autoUpdate } from '@floating-ui/react';
+
+const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: offsetInPx = 10, }) => {
+    const { refs, x, y, update, elements: { domReference, floating }, context, } = useFloating({
+        placement,
+        strategy,
+        middleware: [
+            offset(offsetInPx),
+            shift(),
+            flip(),
+            size({
+                padding: 10,
+                apply: ({ availableHeight, elements }) => {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${availableHeight}px`,
+                    });
+                },
+            }),
+            ...middleware,
+        ],
+    });
+    // handle window resizing
+    useEffect(() => {
+        if (!domReference || !floating)
+            return;
+        const cleanup = autoUpdate(domReference, floating, update);
+        return () => cleanup();
+    }, [domReference, floating, update]);
+    return { refs, x, y, domReference, floating, strategy, context };
+};
+
+export { useFloatingUIPreset };
+//# sourceMappingURL=useFloatingUIPreset.js.map

package/dist/esm/src/hooks/useFloatingUIPreset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingUIPreset.js","sources":["../../../../../../src/hooks/useFloatingUIPreset.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { UseFloatingOptions } from '@floating-ui/react';\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from '@floating-ui/react';\n\nexport const useFloatingUIPreset = ({\n  middleware = [],\n  placement,\n  strategy,\n  offset: offsetInPx = 10,\n}: Pick<UseFloatingOptions, 'placement' | 'strategy' | 'middleware'> & {\n  offset?: number;\n}) => {\n  const {\n    refs,\n    x,\n    y,\n    update,\n    elements: { domReference, floating },\n    context,\n  } = useFloating({\n    placement,\n    strategy,\n    middleware: [\n      offset(offsetInPx),\n      shift(),\n      flip(),\n      size({\n        padding: 10,\n        apply: ({ availableHeight, elements }) => {\n          Object.assign(elements.floating.style, {\n            maxHeight: `${availableHeight}px`,\n          });\n        },\n      }),\n      ...middleware,\n    ],\n  });\n\n  // handle window resizing\n  useEffect(() => {\n    if (!domReference || !floating) return;\n\n    const cleanup = autoUpdate(domReference, floating, update);\n\n    return () => cleanup();\n  }, [domReference, floating, update]);\n\n  return { refs, x, y, domReference, floating, strategy, context };\n};\n"],"names":[],"mappings":";;;MAWa,mBAAmB,GAAG,CAAC,EAClC,UAAU,GAAG,EAAE,EACf,SAAS,EACT,QAAQ,EACR,MAAM,EAAE,UAAU,GAAG,EAAE,GAGxB,KAAI;IACH,MAAM,EACJ,IAAI,EACJ,CAAC,EACD,CAAC,EACD,MAAM,EACN,QAAQ,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,EACpC,OAAO,GACR,GAAG,WAAW,CAAC;QACd,SAAS;QACT,QAAQ;AACR,QAAA,UAAU,EAAE;YACV,MAAM,CAAC,UAAU,CAAC;AAClB,YAAA,KAAK,EAAE;AACP,YAAA,IAAI,EAAE;AACN,YAAA,IAAI,CAAC;AACH,gBAAA,OAAO,EAAE,EAAE;gBACX,KAAK,EAAE,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,KAAI;oBACvC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;wBACrC,SAAS,EAAE,CAAA,EAAG,eAAe,CAAA,EAAA,CAAI;AAClC,qBAAA,CAAC;gBACJ,CAAC;aACF,CAAC;AACF,YAAA,GAAG,UAAU;AACd,SAAA;AACF,KAAA,CAAC;;IAGF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ;YAAE;QAEhC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC;AAE1D,QAAA,OAAO,MAAM,OAAO,EAAE;IACxB,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAEpC,IAAA,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE;AAClE;;;;"}

package/dist/esm/src/hooks/useLoopbackRecording.js

@@ -0,0 +1,138 @@
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { getLoopbackStreams, videoLoggerSystem, DEFAULT_LOOPBACK_RECORDING_DURATION_MS, CallingState, waitForLoopbackStreams, LOOPBACK_STREAMS_WAIT_TIMEOUT_MS, enableLoopbackAudio, MediaStreamRecorder, clampLoopbackRecordingDuration } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+const attachHiddenMediaSink = (stream) => {
+    const logger = videoLoggerSystem.getLogger('useLoopbackRecording');
+    const element = document.createElement('video');
+    element.muted = true;
+    element.autoplay = true;
+    element.playsInline = true;
+    element.srcObject = stream;
+    element.play().catch((error) => {
+        logger.warn('sink element failed to play; recording may be empty', error);
+    });
+    return () => {
+        element.pause();
+        element.srcObject = null;
+    };
+};
+/** Records SFU loopback streams for pre-call testing. */
+const useLoopbackRecording = () => {
+    const call = useCall();
+    const { useCallCallingState, useParticipantCount, useLocalParticipant } = useCallStateHooks();
+    const callingState = useCallCallingState();
+    const participantCount = useParticipantCount();
+    const localParticipant = useLocalParticipant();
+    const [recordingState, setRecordingState] = useState('idle');
+    const recordingStateRef = useRef('idle');
+    const isMountedRef = useRef(true);
+    const awaitAbortRef = useRef(null);
+    const stopRef = useRef(null);
+    const runRef = useRef(null);
+    const loopbackStreams = useMemo(() => getLoopbackStreams(call, localParticipant), [call, localParticipant]);
+    const updateState = useCallback((next) => {
+        recordingStateRef.current = next;
+        if (isMountedRef.current) {
+            setRecordingState(next);
+        }
+    }, []);
+    const stopRecording = useCallback(async () => {
+        const current = recordingStateRef.current;
+        if (current === 'idle')
+            return;
+        if (current === 'awaiting-streams') {
+            videoLoggerSystem
+                .getLogger('useLoopbackRecording')
+                .debug('aborting the awaiting-streams wait');
+            awaitAbortRef.current?.abort();
+            return;
+        }
+        stopRef.current?.();
+        await runRef.current;
+    }, []);
+    const startRecording = useCallback(async ({ includeVideo = true, maxDurationMs = DEFAULT_LOOPBACK_RECORDING_DURATION_MS, } = {}) => {
+        const logger = videoLoggerSystem.getLogger('useLoopbackRecording');
+        if (!call)
+            return null;
+        if (recordingStateRef.current !== 'idle') {
+            logger.warn('a recording is already running');
+            return null;
+        }
+        if (call.state.participantCount > 1) {
+            logger.warn('cannot start recording with other participants present');
+            return null;
+        }
+        const run = async () => {
+            awaitAbortRef.current = new AbortController();
+            updateState('awaiting-streams');
+            try {
+                const tracks = await waitForLoopbackStreams(call, {
+                    includeVideo,
+                    signal: awaitAbortRef.current.signal,
+                    timeoutMs: LOOPBACK_STREAMS_WAIT_TIMEOUT_MS,
+                });
+                if (tracks === null) {
+                    logger.debug('loopback stream wait was aborted');
+                    return null;
+                }
+                updateState('recording');
+                const restoreAudio = enableLoopbackAudio(tracks);
+                const stream = new MediaStream([tracks.audioTrack, tracks.videoTrack].filter((track) => !!track));
+                const detachSink = attachHiddenMediaSink(stream);
+                const recorder = new MediaStreamRecorder(stream, {
+                    maxDurationMs: clampLoopbackRecordingDuration(maxDurationMs),
+                });
+                stopRef.current = recorder.stop;
+                try {
+                    return await recorder.start();
+                }
+                finally {
+                    detachSink();
+                    restoreAudio();
+                }
+            }
+            catch (err) {
+                logger.error('loopback recording failed', err);
+                throw err;
+            }
+            finally {
+                awaitAbortRef.current = null;
+                stopRef.current = null;
+                updateState('idle');
+            }
+        };
+        const promise = run();
+        runRef.current = promise.catch(() => undefined);
+        return promise;
+    }, [call, updateState]);
+    useEffect(() => {
+        if (callingState === CallingState.LEFT ||
+            callingState === CallingState.IDLE) {
+            stopRecording().catch(() => { });
+        }
+    }, [callingState, stopRecording]);
+    useEffect(() => {
+        if (recordingState !== 'idle' && participantCount > 1) {
+            stopRecording().catch(() => { });
+        }
+    }, [participantCount, recordingState, stopRecording]);
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+            awaitAbortRef.current?.abort('the component unmounted');
+            stopRef.current?.();
+        };
+    }, []);
+    return {
+        startRecording,
+        stopRecording,
+        recordingState,
+        loopbackVideoStream: loopbackStreams.loopbackVideoStream,
+        loopbackAudioStream: loopbackStreams.loopbackAudioStream,
+    };
+};
+
+export { useLoopbackRecording };
+//# sourceMappingURL=useLoopbackRecording.js.map

package/dist/esm/src/hooks/useLoopbackRecording.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoopbackRecording.js","sources":["../../../../../../src/hooks/useLoopbackRecording.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  CallingState,\n  DEFAULT_LOOPBACK_RECORDING_DURATION_MS,\n  LOOPBACK_STREAMS_WAIT_TIMEOUT_MS,\n  MediaStreamRecorder,\n  clampLoopbackRecordingDuration,\n  getLoopbackStreams,\n  type MediaRecordingResult,\n  videoLoggerSystem,\n  waitForLoopbackStreams,\n  enableLoopbackAudio,\n  type LoopbackStreams,\n} from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\n/** Lifecycle phase of a loopback recording. */\nexport type LoopbackRecordingState = 'idle' | 'awaiting-streams' | 'recording';\n\nconst attachHiddenMediaSink = (stream: MediaStream): (() => void) => {\n  const logger = videoLoggerSystem.getLogger('useLoopbackRecording');\n  const element = document.createElement('video');\n  element.muted = true;\n  element.autoplay = true;\n  element.playsInline = true;\n  element.srcObject = stream;\n\n  element.play().catch((error) => {\n    logger.warn('sink element failed to play; recording may be empty', error);\n  });\n\n  return () => {\n    element.pause();\n    element.srcObject = null;\n  };\n};\n\nexport type StartLoopbackRecordingOptions = {\n  /** Whether to include loopback video. Audio is always recorded. */\n  includeVideo?: boolean;\n  /** Maximum recording duration in milliseconds. */\n  maxDurationMs?: number;\n};\n\nexport type UseLoopbackRecordingResult = {\n  /** Starts recording and resolves with the recorded blob. */\n  startRecording: (\n    options?: StartLoopbackRecordingOptions,\n  ) => Promise<MediaRecordingResult | null>;\n  /** Stops the current recording or stream wait. */\n  stopRecording: () => Promise<void>;\n  /** Lifecycle phase of the recording. */\n  recordingState: LoopbackRecordingState;\n  /** SFU-echoed video stream on the local participant. */\n  loopbackVideoStream?: MediaStream;\n  /** SFU-echoed audio stream on the local participant. */\n  loopbackAudioStream?: MediaStream;\n};\n\n/** Records SFU loopback streams for pre-call testing. */\nexport const useLoopbackRecording = (): UseLoopbackRecordingResult => {\n  const call = useCall();\n  const { useCallCallingState, useParticipantCount, useLocalParticipant } =\n    useCallStateHooks();\n  const callingState = useCallCallingState();\n  const participantCount = useParticipantCount();\n  const localParticipant = useLocalParticipant();\n\n  const [recordingState, setRecordingState] =\n    useState<LoopbackRecordingState>('idle');\n\n  const recordingStateRef = useRef<LoopbackRecordingState>('idle');\n  const isMountedRef = useRef(true);\n  const awaitAbortRef = useRef<AbortController | null>(null);\n  const stopRef = useRef<(() => void) | null>(null);\n  const runRef = useRef<Promise<unknown> | null>(null);\n\n  const loopbackStreams = useMemo<LoopbackStreams>(\n    () => getLoopbackStreams(call, localParticipant),\n    [call, localParticipant],\n  );\n\n  const updateState = useCallback((next: LoopbackRecordingState) => {\n    recordingStateRef.current = next;\n    if (isMountedRef.current) {\n      setRecordingState(next);\n    }\n  }, []);\n\n  const stopRecording = useCallback(async (): Promise<void> => {\n    const current = recordingStateRef.current;\n    if (current === 'idle') return;\n\n    if (current === 'awaiting-streams') {\n      videoLoggerSystem\n        .getLogger('useLoopbackRecording')\n        .debug('aborting the awaiting-streams wait');\n      awaitAbortRef.current?.abort();\n      return;\n    }\n\n    stopRef.current?.();\n    await runRef.current;\n  }, []);\n\n  const startRecording = useCallback(\n    async ({\n      includeVideo = true,\n      maxDurationMs = DEFAULT_LOOPBACK_RECORDING_DURATION_MS,\n    }: StartLoopbackRecordingOptions = {}): Promise<MediaRecordingResult | null> => {\n      const logger = videoLoggerSystem.getLogger('useLoopbackRecording');\n      if (!call) return null;\n\n      if (recordingStateRef.current !== 'idle') {\n        logger.warn('a recording is already running');\n        return null;\n      }\n\n      if (call.state.participantCount > 1) {\n        logger.warn('cannot start recording with other participants present');\n        return null;\n      }\n\n      const run = async (): Promise<MediaRecordingResult | null> => {\n        awaitAbortRef.current = new AbortController();\n        updateState('awaiting-streams');\n\n        try {\n          const tracks = await waitForLoopbackStreams(call, {\n            includeVideo,\n            signal: awaitAbortRef.current.signal,\n            timeoutMs: LOOPBACK_STREAMS_WAIT_TIMEOUT_MS,\n          });\n\n          if (tracks === null) {\n            logger.debug('loopback stream wait was aborted');\n            return null;\n          }\n\n          updateState('recording');\n\n          const restoreAudio = enableLoopbackAudio(tracks);\n          const stream = new MediaStream(\n            [tracks.audioTrack, tracks.videoTrack].filter(\n              (track): track is MediaStreamTrack => !!track,\n            ),\n          );\n          const detachSink = attachHiddenMediaSink(stream);\n          const recorder = new MediaStreamRecorder(stream, {\n            maxDurationMs: clampLoopbackRecordingDuration(maxDurationMs),\n          });\n          stopRef.current = recorder.stop;\n          try {\n            return await recorder.start();\n          } finally {\n            detachSink();\n            restoreAudio();\n          }\n        } catch (err) {\n          logger.error('loopback recording failed', err);\n          throw err;\n        } finally {\n          awaitAbortRef.current = null;\n          stopRef.current = null;\n          updateState('idle');\n        }\n      };\n\n      const promise = run();\n      runRef.current = promise.catch(() => undefined);\n      return promise;\n    },\n    [call, updateState],\n  );\n\n  useEffect(() => {\n    if (\n      callingState === CallingState.LEFT ||\n      callingState === CallingState.IDLE\n    ) {\n      stopRecording().catch(() => {});\n    }\n  }, [callingState, stopRecording]);\n\n  useEffect(() => {\n    if (recordingState !== 'idle' && participantCount > 1) {\n      stopRecording().catch(() => {});\n    }\n  }, [participantCount, recordingState, stopRecording]);\n\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n      awaitAbortRef.current?.abort('the component unmounted');\n      stopRef.current?.();\n    };\n  }, []);\n\n  return {\n    startRecording,\n    stopRecording,\n    recordingState,\n    loopbackVideoStream: loopbackStreams.loopbackVideoStream,\n    loopbackAudioStream: loopbackStreams.loopbackAudioStream,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/src/hooks/useModeration.js

@@ -0,0 +1,135 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+
+const isFullScreenBlurPlatformSupported = () => {
+    if (typeof window === 'undefined' ||
+        typeof OffscreenCanvas === 'undefined' ||
+        typeof VideoFrame === 'undefined' ||
+        !window.WebGL2RenderingContext) {
+        return false;
+    }
+    try {
+        const canvas = new OffscreenCanvas(1, 1);
+        return !!canvas.getContext('webgl2', {
+            alpha: false,
+            antialias: false,
+            desynchronized: true,
+        });
+    }
+    catch {
+        return false;
+    }
+};
+const useModeration = (options) => {
+    const { duration = 5000 } = options || {};
+    const call = useCall();
+    const timeoutRef = useRef(null);
+    const processorRef = useRef(null);
+    const unregisterRef = useRef(null);
+    const blurModulePromise = useRef(null);
+    /**
+     * Lazily loads and caches the video-filters-web module.
+     */
+    const loadVideoFiltersWebModule = useCallback(() => {
+        if (!blurModulePromise.current) {
+            blurModulePromise.current = import('@stream-io/video-filters-web')
+                .then((module) => module.FullScreenBlur)
+                .catch((error) => {
+                console.error('[moderation] Failed to import blur module:', error);
+                throw error;
+            });
+        }
+        return blurModulePromise.current;
+    }, []);
+    const disableBlur = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        unregisterRef
+            .current?.()
+            .catch((err) => console.error('[moderation] unregister error:', err));
+        unregisterRef.current = null;
+    }, []);
+    const handleFallback = useCallback(async () => {
+        try {
+            await call?.camera.disable();
+        }
+        catch (error) {
+            console.error('[moderation] Failed to disable camera:', error);
+        }
+    }, [call]);
+    useEffect(() => {
+        if (!call)
+            return;
+        return call.on('call.moderation_warning', async () => {
+            try {
+                await loadVideoFiltersWebModule();
+            }
+            catch (importErr) {
+                console.error('[moderation] Failed to import blur module:', importErr);
+            }
+        });
+    }, [call, loadVideoFiltersWebModule]);
+    useEffect(() => {
+        if (!call)
+            return;
+        return call.on('call.moderation_blur', async () => {
+            if (unregisterRef.current)
+                return;
+            let FullScreenBlurClass;
+            try {
+                FullScreenBlurClass = await loadVideoFiltersWebModule();
+            }
+            catch (importErr) {
+                console.error('[moderation] Failed to import blur module:', importErr);
+                await handleFallback();
+                return;
+            }
+            if (!isFullScreenBlurPlatformSupported()) {
+                console.warn('[moderation] Blur not supported on this platform');
+                await handleFallback();
+                return;
+            }
+            const { unregister } = call.camera.registerFilter((inputStream) => {
+                unregisterRef.current = unregister;
+                const outputPromise = new Promise(async (resolve, reject) => {
+                    const [track] = inputStream.getVideoTracks();
+                    let processor;
+                    try {
+                        processor = new FullScreenBlurClass(track);
+                        processorRef.current = processor;
+                        const result = await processor.start();
+                        const output = new MediaStream([result]);
+                        resolve(output);
+                        if (duration > 0) {
+                            timeoutRef.current = setTimeout(disableBlur, duration);
+                        }
+                    }
+                    catch (error) {
+                        reject(error);
+                        console.error('[moderation] Processor init failed:', error);
+                        await unregisterRef.current?.();
+                        unregisterRef.current = null;
+                        processorRef.current = null;
+                        await handleFallback();
+                        return;
+                    }
+                });
+                return {
+                    output: outputPromise,
+                    stop: () => {
+                        if (processorRef.current) {
+                            processorRef.current.stop();
+                            processorRef.current = null;
+                        }
+                    },
+                };
+            });
+        });
+    }, [call, loadVideoFiltersWebModule, disableBlur, handleFallback, duration]);
+    useEffect(() => disableBlur, [disableBlur]);
+};
+
+export { useModeration };
+//# sourceMappingURL=useModeration.js.map

package/dist/esm/src/hooks/useModeration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModeration.js","sources":["../../../../../../src/hooks/useModeration.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useCall } from '@stream-io/video-react-bindings';\n\ntype FullScreenBlurType =\n  typeof import('@stream-io/video-filters-web').FullScreenBlur;\n\nconst isFullScreenBlurPlatformSupported = (): boolean => {\n  if (\n    typeof window === 'undefined' ||\n    typeof OffscreenCanvas === 'undefined' ||\n    typeof VideoFrame === 'undefined' ||\n    !window.WebGL2RenderingContext\n  ) {\n    return false;\n  }\n\n  try {\n    const canvas = new OffscreenCanvas(1, 1);\n    return !!canvas.getContext('webgl2', {\n      alpha: false,\n      antialias: false,\n      desynchronized: true,\n    });\n  } catch {\n    return false;\n  }\n};\n\nexport interface ModerationOptions {\n  /**\n   * How long the moderation effect should stay active before being disabled.\n   * Set to `0` to keep it active indefinitely. Defaults to 5000 ms.\n   */\n  duration?: number;\n}\n\nexport const useModeration = (options?: ModerationOptions) => {\n  const { duration = 5000 } = options || {};\n\n  const call = useCall();\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const processorRef = useRef<InstanceType<FullScreenBlurType> | null>(null);\n  const unregisterRef = useRef<(() => Promise<void>) | null>(null);\n\n  const blurModulePromise = useRef<Promise<FullScreenBlurType> | null>(null);\n\n  /**\n   * Lazily loads and caches the video-filters-web module.\n   */\n  const loadVideoFiltersWebModule = useCallback(() => {\n    if (!blurModulePromise.current) {\n      blurModulePromise.current = import('@stream-io/video-filters-web')\n        .then((module) => module.FullScreenBlur)\n        .catch((error) => {\n          console.error('[moderation] Failed to import blur module:', error);\n          throw error;\n        });\n    }\n\n    return blurModulePromise.current;\n  }, []);\n\n  const disableBlur = useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n\n    unregisterRef\n      .current?.()\n      .catch((err) => console.error('[moderation] unregister error:', err));\n\n    unregisterRef.current = null;\n  }, []);\n\n  const handleFallback = useCallback(async () => {\n    try {\n      await call?.camera.disable();\n    } catch (error) {\n      console.error('[moderation] Failed to disable camera:', error);\n    }\n  }, [call]);\n\n  useEffect(() => {\n    if (!call) return;\n\n    return call.on('call.moderation_warning', async () => {\n      try {\n        await loadVideoFiltersWebModule();\n      } catch (importErr) {\n        console.error('[moderation] Failed to import blur module:', importErr);\n      }\n    });\n  }, [call, loadVideoFiltersWebModule]);\n\n  useEffect(() => {\n    if (!call) return;\n\n    return call.on('call.moderation_blur', async () => {\n      if (unregisterRef.current) return;\n\n      let FullScreenBlurClass: FullScreenBlurType;\n\n      try {\n        FullScreenBlurClass = await loadVideoFiltersWebModule();\n      } catch (importErr) {\n        console.error('[moderation] Failed to import blur module:', importErr);\n        await handleFallback();\n        return;\n      }\n\n      if (!isFullScreenBlurPlatformSupported()) {\n        console.warn('[moderation] Blur not supported on this platform');\n        await handleFallback();\n        return;\n      }\n\n      const { unregister } = call.camera.registerFilter((inputStream) => {\n        unregisterRef.current = unregister;\n\n        const outputPromise = new Promise<MediaStream>(\n          async (resolve, reject) => {\n            const [track] = inputStream.getVideoTracks();\n\n            let processor: InstanceType<FullScreenBlurType>;\n\n            try {\n              processor = new FullScreenBlurClass(track);\n              processorRef.current = processor;\n\n              const result = await processor.start();\n              const output = new MediaStream([result]);\n              resolve(output);\n\n              if (duration > 0) {\n                timeoutRef.current = setTimeout(disableBlur, duration);\n              }\n            } catch (error) {\n              reject(error);\n              console.error('[moderation] Processor init failed:', error);\n\n              await unregisterRef.current?.();\n              unregisterRef.current = null;\n              processorRef.current = null;\n\n              await handleFallback();\n              return;\n            }\n          },\n        );\n\n        return {\n          output: outputPromise,\n          stop: () => {\n            if (processorRef.current) {\n              processorRef.current.stop();\n              processorRef.current = null;\n            }\n          },\n        };\n      });\n    });\n  }, [call, loadVideoFiltersWebModule, disableBlur, handleFallback, duration]);\n\n  useEffect(() => disableBlur, [disableBlur]);\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/src/hooks/usePersistedDevicePreferences.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+/**
+ * This hook is a no-op. Device preference persistence is now handled
+ * by the low-level client SDK.
+ *
+ * @deprecated use the devicePreferences API of the StreamVideoClient.
+ */
+const usePersistedDevicePreferences = (key = '') => {
+    useEffect(() => {
+        console.warn(`usePersistedDevicePreferences is deprecated. Please use the devicePreferences API of the StreamVideoClient instead.`);
+    }, [key]);
+};
+
+export { usePersistedDevicePreferences };
+//# sourceMappingURL=usePersistedDevicePreferences.js.map

package/dist/esm/src/hooks/usePersistedDevicePreferences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistedDevicePreferences.js","sources":["../../../../../../src/hooks/usePersistedDevicePreferences.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * This hook is a no-op. Device preference persistence is now handled\n * by the low-level client SDK.\n *\n * @deprecated use the devicePreferences API of the StreamVideoClient.\n */\nexport const usePersistedDevicePreferences = (key: string = ''): void => {\n  useEffect(() => {\n    console.warn(\n      `usePersistedDevicePreferences is deprecated. Please use the devicePreferences API of the StreamVideoClient instead.`,\n    );\n  }, [key]);\n};\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;MACU,6BAA6B,GAAG,CAAC,GAAA,GAAc,EAAE,KAAU;IACtE,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,CAAC,IAAI,CACV,CAAA,mHAAA,CAAqH,CACtH;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AACX;;;;"}

package/dist/esm/src/hooks/useRequestPermission.js

@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+const useRequestPermission = (permission) => {
+    const call = useCall();
+    const { useHasPermissions } = useCallStateHooks();
+    const hasPermission = useHasPermissions(permission);
+    const [isAwaitingPermission, setIsAwaitingPermission] = useState(false); // TODO: load with possibly pending state
+    useEffect(() => {
+        const reset = () => setIsAwaitingPermission(false);
+        if (hasPermission)
+            reset();
+    }, [hasPermission]);
+    const requestPermission = useCallback(async () => {
+        if (hasPermission)
+            return true;
+        const canRequestPermission = !!call?.permissionsContext.canRequest(permission);
+        if (isAwaitingPermission || !canRequestPermission)
+            return false;
+        setIsAwaitingPermission(true);
+        try {
+            await call?.requestPermissions({
+                permissions: [permission],
+            });
+        }
+        catch (error) {
+            setIsAwaitingPermission(false);
+            throw new Error(`requestPermission failed: ${error}`);
+        }
+        return false;
+    }, [call, hasPermission, isAwaitingPermission, permission]);
+    return {
+        requestPermission,
+        hasPermission,
+        canRequestPermission: !!call?.permissionsContext.canRequest(permission),
+        isAwaitingPermission,
+    };
+};
+
+export { useRequestPermission };
+//# sourceMappingURL=useRequestPermission.js.map

package/dist/esm/src/hooks/useRequestPermission.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequestPermission.js","sources":["../../../../../../src/hooks/useRequestPermission.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { RequestPermissionRequestPermissionsEnum } from '@stream-io/video-client';\nimport { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';\n\nexport const useRequestPermission = (\n  permission: RequestPermissionRequestPermissionsEnum,\n) => {\n  const call = useCall();\n  const { useHasPermissions } = useCallStateHooks();\n  const hasPermission = useHasPermissions(permission);\n  const [isAwaitingPermission, setIsAwaitingPermission] = useState(false); // TODO: load with possibly pending state\n\n  useEffect(() => {\n    const reset = () => setIsAwaitingPermission(false);\n\n    if (hasPermission) reset();\n  }, [hasPermission]);\n\n  const requestPermission = useCallback(async () => {\n    if (hasPermission) return true;\n\n    const canRequestPermission =\n      !!call?.permissionsContext.canRequest(permission);\n    if (isAwaitingPermission || !canRequestPermission) return false;\n\n    setIsAwaitingPermission(true);\n\n    try {\n      await call?.requestPermissions({\n        permissions: [permission],\n      });\n    } catch (error) {\n      setIsAwaitingPermission(false);\n      throw new Error(`requestPermission failed: ${error}`);\n    }\n\n    return false;\n  }, [call, hasPermission, isAwaitingPermission, permission]);\n\n  return {\n    requestPermission,\n    hasPermission,\n    canRequestPermission: !!call?.permissionsContext.canRequest(permission),\n    isAwaitingPermission,\n  };\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,oBAAoB,GAAG,CAClC,UAAmD,KACjD;AACF,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,EAAE;AACjD,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,CAAC;AACnD,IAAA,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,SAAS,CAAC,MAAK;QACb,MAAM,KAAK,GAAG,MAAM,uBAAuB,CAAC,KAAK,CAAC;AAElD,QAAA,IAAI,aAAa;AAAE,YAAA,KAAK,EAAE;AAC5B,IAAA,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAW;AAC/C,QAAA,IAAI,aAAa;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,IAAI,EAAE,kBAAkB,CAAC,UAAU,CAAC,UAAU,CAAC;QACnD,IAAI,oBAAoB,IAAI,CAAC,oBAAoB;AAAE,YAAA,OAAO,KAAK;QAE/D,uBAAuB,CAAC,IAAI,CAAC;AAE7B,QAAA,IAAI;YACF,MAAM,IAAI,EAAE,kBAAkB,CAAC;gBAC7B,WAAW,EAAE,CAAC,UAAU,CAAC;AAC1B,aAAA,CAAC;QACJ;QAAE,OAAO,KAAK,EAAE;YACd,uBAAuB,CAAC,KAAK,CAAC;AAC9B,YAAA,MAAM,IAAI,KAAK,CAAC,6BAA6B,KAAK,CAAA,CAAE,CAAC;QACvD;AAEA,QAAA,OAAO,KAAK;IACd,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,oBAAoB,EAAE,UAAU,CAAC,CAAC;IAE3D,OAAO;QACL,iBAAiB;QACjB,aAAa;QACb,oBAAoB,EAAE,CAAC,CAAC,IAAI,EAAE,kBAAkB,CAAC,UAAU,CAAC,UAAU,CAAC;QACvE,oBAAoB;KACrB;AACH;;;;"}

package/dist/esm/src/hooks/useScrollPosition.js

@@ -0,0 +1,66 @@
+import { useState, useEffect } from 'react';
+
+const SCROLL_THRESHOLD = 10;
+/**
+ * Hook which observes element's scroll position and returns text value based on the
+ * position of the scrollbar (`top`, `bottom`, `between` and `null` if no scrollbar is available)
+ */
+const useVerticalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD) => {
+    const [scrollPosition, setScrollPosition] = useState(null);
+    useEffect(() => {
+        if (!scrollElement)
+            return;
+        const scrollHandler = () => {
+            const element = scrollElement;
+            const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;
+            if (!hasVerticalScrollbar)
+                return setScrollPosition(null);
+            const isAtTheTop = element.scrollTop <= threshold;
+            if (isAtTheTop)
+                return setScrollPosition('top');
+            const isAtTheBottom = Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= threshold;
+            if (isAtTheBottom)
+                return setScrollPosition('bottom');
+            setScrollPosition('between');
+        };
+        const resizeObserver = new ResizeObserver(scrollHandler);
+        resizeObserver.observe(scrollElement);
+        scrollElement.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => {
+            scrollElement.removeEventListener('scroll', scrollHandler);
+            resizeObserver.disconnect();
+        };
+    }, [scrollElement, threshold]);
+    return scrollPosition;
+};
+const useHorizontalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD) => {
+    const [scrollPosition, setScrollPosition] = useState(null);
+    useEffect(() => {
+        if (!scrollElement)
+            return;
+        const scrollHandler = () => {
+            const element = scrollElement;
+            const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;
+            if (!hasHorizontalScrollbar)
+                return setScrollPosition(null);
+            const isAtTheStart = element.scrollLeft <= threshold;
+            if (isAtTheStart)
+                return setScrollPosition('start');
+            const isAtTheEnd = Math.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) <= threshold;
+            if (isAtTheEnd)
+                return setScrollPosition('end');
+            setScrollPosition('between');
+        };
+        const resizeObserver = new ResizeObserver(scrollHandler);
+        resizeObserver.observe(scrollElement);
+        scrollElement.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => {
+            scrollElement.removeEventListener('scroll', scrollHandler);
+            resizeObserver.disconnect();
+        };
+    }, [scrollElement, threshold]);
+    return scrollPosition;
+};
+
+export { useHorizontalScrollPosition, useVerticalScrollPosition };
+//# sourceMappingURL=useScrollPosition.js.map

package/dist/esm/src/hooks/useScrollPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollPosition.js","sources":["../../../../../../src/hooks/useScrollPosition.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst SCROLL_THRESHOLD = 10;\n\n/**\n * Hook which observes element's scroll position and returns text value based on the\n * position of the scrollbar (`top`, `bottom`, `between` and `null` if no scrollbar is available)\n */\nexport const useVerticalScrollPosition = (\n  scrollElement: HTMLElement | null,\n  threshold: number = SCROLL_THRESHOLD,\n) => {\n  const [scrollPosition, setScrollPosition] = useState<\n    'top' | 'bottom' | 'between' | null\n  >(null);\n\n  useEffect(() => {\n    if (!scrollElement) return;\n\n    const scrollHandler = () => {\n      const element = scrollElement;\n\n      const hasVerticalScrollbar = element.scrollHeight > element.clientHeight;\n\n      if (!hasVerticalScrollbar) return setScrollPosition(null);\n\n      const isAtTheTop = element.scrollTop <= threshold;\n      if (isAtTheTop) return setScrollPosition('top');\n\n      const isAtTheBottom =\n        Math.abs(\n          element.scrollHeight - element.scrollTop - element.clientHeight,\n        ) <= threshold;\n\n      if (isAtTheBottom) return setScrollPosition('bottom');\n\n      setScrollPosition('between');\n    };\n\n    const resizeObserver = new ResizeObserver(scrollHandler);\n    resizeObserver.observe(scrollElement);\n\n    scrollElement.addEventListener('scroll', scrollHandler, { passive: true });\n    return () => {\n      scrollElement.removeEventListener('scroll', scrollHandler);\n      resizeObserver.disconnect();\n    };\n  }, [scrollElement, threshold]);\n\n  return scrollPosition;\n};\n\nexport const useHorizontalScrollPosition = (\n  scrollElement: HTMLElement | null,\n  threshold: number = SCROLL_THRESHOLD,\n) => {\n  const [scrollPosition, setScrollPosition] = useState<\n    'start' | 'end' | 'between' | null\n  >(null);\n\n  useEffect(() => {\n    if (!scrollElement) return;\n\n    const scrollHandler = () => {\n      const element = scrollElement;\n\n      const hasHorizontalScrollbar = element.scrollWidth > element.clientWidth;\n\n      if (!hasHorizontalScrollbar) return setScrollPosition(null);\n\n      const isAtTheStart = element.scrollLeft <= threshold;\n      if (isAtTheStart) return setScrollPosition('start');\n\n      const isAtTheEnd =\n        Math.abs(\n          element.scrollWidth - element.scrollLeft - element.clientWidth,\n        ) <= threshold;\n\n      if (isAtTheEnd) return setScrollPosition('end');\n\n      setScrollPosition('between');\n    };\n\n    const resizeObserver = new ResizeObserver(scrollHandler);\n    resizeObserver.observe(scrollElement);\n\n    scrollElement.addEventListener('scroll', scrollHandler, { passive: true });\n    return () => {\n      scrollElement.removeEventListener('scroll', scrollHandler);\n      resizeObserver.disconnect();\n    };\n  }, [scrollElement, threshold]);\n\n  return scrollPosition;\n};\n"],"names":[],"mappings":"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"}