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

package/dist/esm/src/embedded/shared/Lobby/VideoPreviewFallbacks.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { useI18n, useCallStateHooks, useConnectedUser } from '@stream-io/video-react-bindings';
+import { Avatar } from '../../../components/Avatar/Avatar.js';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import 'react';
+import '@stream-io/video-client';
+import 'clsx';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const DisabledVideoPreview = () => {
+    const { t } = useI18n();
+    const user = useConnectedUser();
+    const { useCameraState, useMicrophoneState } = useCallStateHooks();
+    const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+    const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+    const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
+    return (jsx("div", { className: "str-video__embedded-lobby__no-permission", children: hasBrowserMediaPermission ? (jsx(Avatar, { imageSrc: user?.image, name: user?.name || user?.id })) : (t('Please grant your browser permission to access your camera and microphone.')) }));
+};
+const NoCameraPreview = () => {
+    const { t } = useI18n();
+    const { useCameraState, useMicrophoneState } = useCallStateHooks();
+    const { hasBrowserPermission: hasCameraPermission } = useCameraState();
+    const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();
+    const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;
+    if (!hasBrowserMediaPermission) {
+        return (jsx("div", { className: "str-video__embedded-lobby__no-permission", children: t('Please grant your browser permission to access your camera and microphone.') }));
+    }
+    return (jsx("div", { className: "str-video__video-preview__no-camera-preview", children: t('No camera found') }));
+};
+
+export { DisabledVideoPreview, NoCameraPreview };
+//# sourceMappingURL=VideoPreviewFallbacks.js.map

package/dist/esm/src/embedded/shared/Lobby/VideoPreviewFallbacks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPreviewFallbacks.js","sources":["../../../../../../../../src/embedded/shared/Lobby/VideoPreviewFallbacks.tsx"],"sourcesContent":["import {\n  useCallStateHooks,\n  useConnectedUser,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { Avatar } from '../../../components';\n\nexport const DisabledVideoPreview = () => {\n  const { t } = useI18n();\n\n  const user = useConnectedUser();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;\n\n  return (\n    <div className=\"str-video__embedded-lobby__no-permission\">\n      {hasBrowserMediaPermission ? (\n        <Avatar imageSrc={user?.image} name={user?.name || user?.id} />\n      ) : (\n        t(\n          'Please grant your browser permission to access your camera and microphone.',\n        )\n      )}\n    </div>\n  );\n};\n\nexport const NoCameraPreview = () => {\n  const { t } = useI18n();\n  const { useCameraState, useMicrophoneState } = useCallStateHooks();\n  const { hasBrowserPermission: hasCameraPermission } = useCameraState();\n  const { hasBrowserPermission: hasMicPermission } = useMicrophoneState();\n\n  const hasBrowserMediaPermission = hasCameraPermission && hasMicPermission;\n\n  if (!hasBrowserMediaPermission) {\n    return (\n      <div className=\"str-video__embedded-lobby__no-permission\">\n        {t(\n          'Please grant your browser permission to access your camera and microphone.',\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"str-video__video-preview__no-camera-preview\">\n      {t('No camera found')}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,oBAAoB,GAAG,MAAK;AACvC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AAEvB,IAAA,MAAM,IAAI,GAAG,gBAAgB,EAAE;IAC/B,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAElE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,MAAM,yBAAyB,GAAG,mBAAmB,IAAI,gBAAgB;AAEzE,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACtD,yBAAyB,IACxBA,GAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,EAAE,GAAI,KAE/D,CAAC,CACC,4EAA4E,CAC7E,CACF,EAAA,CACG;AAEV;AAEO,MAAM,eAAe,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IACvB,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,iBAAiB,EAAE;IAClE,MAAM,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,GAAG,cAAc,EAAE;IACtE,MAAM,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,GAAG,kBAAkB,EAAE;AAEvE,IAAA,MAAM,yBAAyB,GAAG,mBAAmB,IAAI,gBAAgB;IAEzE,IAAI,CAAC,yBAAyB,EAAE;AAC9B,QAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACtD,CAAC,CACA,4EAA4E,CAC7E,EAAA,CACG;IAEV;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACzD,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACjB;AAEV;;;;"}

package/dist/esm/src/embedded/shared/ViewersCount/ViewersCount.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { humanize } from '@stream-io/video-client';
+import 'react';
+import 'clsx';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import '../../../components/Button/IconButton.js';
+import '@stream-io/video-react-bindings';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import { Icon } from '../../../components/Icon/Icon.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/Menu/MenuToggle.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../../../core/components/Video/Video.js';
+import '../../../core/components/Video/BaseVideo.js';
+import '../../../core/components/Video/DefaultVideoPlaceholder.js';
+
+const ViewersCount = ({ count }) => (jsxs("div", { className: "str-video__embedded-livestream-duration__viewers", children: [jsx(Icon, { icon: "eye", className: "str-video__embedded-livestream-duration__eye-icon" }), jsx("span", { className: "str-video__embedded-livestream-duration__count", children: humanize(count) })] }));
+
+export { ViewersCount };
+//# sourceMappingURL=ViewersCount.js.map

package/dist/esm/src/embedded/shared/ViewersCount/ViewersCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewersCount.js","sources":["../../../../../../../../src/embedded/shared/ViewersCount/ViewersCount.tsx"],"sourcesContent":["import { humanize } from '@stream-io/video-client';\nimport { Icon } from '../../../components';\n\ninterface ViewersCountProps {\n  count: number;\n}\n\nexport const ViewersCount = ({ count }: ViewersCountProps) => (\n  <div className=\"str-video__embedded-livestream-duration__viewers\">\n    <Icon\n      icon=\"eye\"\n      className=\"str-video__embedded-livestream-duration__eye-icon\"\n    />\n    <span className=\"str-video__embedded-livestream-duration__count\">\n      {humanize(count)}\n    </span>\n  </div>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAqB,MACvDA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAA,CAC/DC,IAAC,IAAI,EAAA,EACH,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,mDAAmD,EAAA,CAC7D,EACFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAC7D,QAAQ,CAAC,KAAK,CAAC,EAAA,CACX,CAAA,EAAA,CACH;;;;"}

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

@@ -0,0 +1,40 @@
+import { useI18n } from '@stream-io/video-react-bindings';
+import { useMemo } from 'react';
+
+/**
+ * Utility hook that helps render a list of devices or implement a device selector.
+ * Compared to someting like `useCameraState().devices`, it has some handy features:
+ * 1. Adds the "Default" device to the list if applicable (either the user did not
+ * select a device, or a previously selected device is no longer available).
+ * 2. Maps the device list to a format more suitable for rendering.
+ */
+function useDeviceList(devices, selectedDeviceId) {
+    const { t } = useI18n();
+    return useMemo(() => {
+        let selectedDeviceInfo = null;
+        let selectedIndex = null;
+        const deviceList = devices.map((d, i) => {
+            const isSelected = d.deviceId === selectedDeviceId;
+            const device = { deviceId: d.deviceId, label: d.label, isSelected };
+            if (isSelected) {
+                selectedDeviceInfo = device;
+                selectedIndex = i;
+            }
+            return device;
+        });
+        if (selectedDeviceInfo === null || selectedIndex === null) {
+            const defaultDevice = {
+                deviceId: 'default',
+                label: t('Default'),
+                isSelected: true,
+            };
+            selectedDeviceInfo = defaultDevice;
+            selectedIndex = 0;
+            deviceList.unshift(defaultDevice);
+        }
+        return { deviceList, selectedDeviceInfo, selectedIndex };
+    }, [devices, selectedDeviceId, t]);
+}
+
+export { useDeviceList };
+//# sourceMappingURL=useDeviceList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDeviceList.js","sources":["../../../../../../src/hooks/useDeviceList.tsx"],"sourcesContent":["import { useI18n } from '@stream-io/video-react-bindings';\nimport { useMemo } from 'react';\n\nexport interface DeviceListItem {\n  deviceId: string;\n  label: string;\n  isSelected: boolean;\n}\n\n/**\n * Utility hook that helps render a list of devices or implement a device selector.\n * Compared to someting like `useCameraState().devices`, it has some handy features:\n * 1. Adds the \"Default\" device to the list if applicable (either the user did not\n * select a device, or a previously selected device is no longer available).\n * 2. Maps the device list to a format more suitable for rendering.\n */\nexport function useDeviceList(\n  devices: MediaDeviceInfo[],\n  selectedDeviceId: string | undefined,\n): {\n  deviceList: DeviceListItem[];\n  selectedDeviceInfo: DeviceListItem;\n  selectedIndex: number;\n} {\n  const { t } = useI18n();\n\n  return useMemo(() => {\n    let selectedDeviceInfo: DeviceListItem | null = null;\n    let selectedIndex: number | null = null;\n\n    const deviceList: DeviceListItem[] = devices.map((d, i) => {\n      const isSelected = d.deviceId === selectedDeviceId;\n      const device = { deviceId: d.deviceId, label: d.label, isSelected };\n\n      if (isSelected) {\n        selectedDeviceInfo = device;\n        selectedIndex = i;\n      }\n\n      return device;\n    });\n\n    if (selectedDeviceInfo === null || selectedIndex === null) {\n      const defaultDevice = {\n        deviceId: 'default',\n        label: t('Default'),\n        isSelected: true,\n      };\n\n      selectedDeviceInfo = defaultDevice;\n      selectedIndex = 0;\n      deviceList.unshift(defaultDevice);\n    }\n\n    return { deviceList, selectedDeviceInfo, selectedIndex };\n  }, [devices, selectedDeviceId, t]);\n}\n"],"names":[],"mappings":";;;AASA;;;;;;AAMG;AACG,SAAU,aAAa,CAC3B,OAA0B,EAC1B,gBAAoC,EAAA;AAMpC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;IAEvB,OAAO,OAAO,CAAC,MAAK;QAClB,IAAI,kBAAkB,GAA0B,IAAI;QACpD,IAAI,aAAa,GAAkB,IAAI;QAEvC,MAAM,UAAU,GAAqB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACxD,YAAA,MAAM,UAAU,GAAG,CAAC,CAAC,QAAQ,KAAK,gBAAgB;AAClD,YAAA,MAAM,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE;YAEnE,IAAI,UAAU,EAAE;gBACd,kBAAkB,GAAG,MAAM;gBAC3B,aAAa,GAAG,CAAC;YACnB;AAEA,YAAA,OAAO,MAAM;AACf,QAAA,CAAC,CAAC;QAEF,IAAI,kBAAkB,KAAK,IAAI,IAAI,aAAa,KAAK,IAAI,EAAE;AACzD,YAAA,MAAM,aAAa,GAAG;AACpB,gBAAA,QAAQ,EAAE,SAAS;AACnB,gBAAA,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC;AACnB,gBAAA,UAAU,EAAE,IAAI;aACjB;YAED,kBAAkB,GAAG,aAAa;YAClC,aAAa,GAAG,CAAC;AACjB,YAAA,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC;QACnC;AAEA,QAAA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,aAAa,EAAE;IAC1D,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;AACpC;;;;"}

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":";;;;AAmBA,MAAM,qBAAqB,GAAG,CAAC,MAAmB,KAAkB;IAClE,MAAM,MAAM,GAAG,iBAAiB,CAAC,SAAS,CAAC,sBAAsB,CAAC;IAClE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC/C,IAAA,OAAO,CAAC,KAAK,GAAG,IAAI;AACpB,IAAA,OAAO,CAAC,QAAQ,GAAG,IAAI;AACvB,IAAA,OAAO,CAAC,WAAW,GAAG,IAAI;AAC1B,IAAA,OAAO,CAAC,SAAS,GAAG,MAAM;IAE1B,OAAO,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,KAAI;AAC7B,QAAA,MAAM,CAAC,IAAI,CAAC,qDAAqD,EAAE,KAAK,CAAC;AAC3E,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,MAAK;QACV,OAAO,CAAC,KAAK,EAAE;AACf,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;AAC1B,IAAA,CAAC;AACH,CAAC;AAwBD;AACO,MAAM,oBAAoB,GAAG,MAAiC;AACnE,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,GACrE,iBAAiB,EAAE;AACrB,IAAA,MAAM,YAAY,GAAG,mBAAmB,EAAE;AAC1C,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAC9C,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;IAE9C,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GACvC,QAAQ,CAAyB,MAAM,CAAC;AAE1C,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAyB,MAAM,CAAC;AAChE,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC;AACjC,IAAA,MAAM,aAAa,GAAG,MAAM,CAAyB,IAAI,CAAC;AAC1D,IAAA,MAAM,OAAO,GAAG,MAAM,CAAsB,IAAI,CAAC;AACjD,IAAA,MAAM,MAAM,GAAG,MAAM,CAA0B,IAAI,CAAC;IAEpD,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,IAAI,EAAE,gBAAgB,CAAC,EAChD,CAAC,IAAI,EAAE,gBAAgB,CAAC,CACzB;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,IAA4B,KAAI;AAC/D,QAAA,iBAAiB,CAAC,OAAO,GAAG,IAAI;AAChC,QAAA,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,iBAAiB,CAAC,IAAI,CAAC;QACzB;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,YAA0B;AAC1D,QAAA,MAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO;QACzC,IAAI,OAAO,KAAK,MAAM;YAAE;AAExB,QAAA,IAAI,OAAO,KAAK,kBAAkB,EAAE;YAClC;iBACG,SAAS,CAAC,sBAAsB;iBAChC,KAAK,CAAC,oCAAoC,CAAC;AAC9C,YAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE;YAC9B;QACF;AAEA,QAAA,OAAO,CAAC,OAAO,IAAI;QACnB,MAAM,MAAM,CAAC,OAAO;IACtB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,cAAc,GAAG,WAAW,CAChC,OAAO,EACL,YAAY,GAAG,IAAI,EACnB,aAAa,GAAG,sCAAsC,GAAA,GACrB,EAAE,KAA0C;QAC7E,MAAM,MAAM,GAAG,iBAAiB,CAAC,SAAS,CAAC,sBAAsB,CAAC;AAClE,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;AAEtB,QAAA,IAAI,iBAAiB,CAAC,OAAO,KAAK,MAAM,EAAE;AACxC,YAAA,MAAM,CAAC,IAAI,CAAC,gCAAgC,CAAC;AAC7C,YAAA,OAAO,IAAI;QACb;QAEA,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,CAAC,EAAE;AACnC,YAAA,MAAM,CAAC,IAAI,CAAC,wDAAwD,CAAC;AACrE,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,GAAG,GAAG,YAAiD;AAC3D,YAAA,aAAa,CAAC,OAAO,GAAG,IAAI,eAAe,EAAE;YAC7C,WAAW,CAAC,kBAAkB,CAAC;AAE/B,YAAA,IAAI;AACF,gBAAA,MAAM,MAAM,GAAG,MAAM,sBAAsB,CAAC,IAAI,EAAE;oBAChD,YAAY;AACZ,oBAAA,MAAM,EAAE,aAAa,CAAC,OAAO,CAAC,MAAM;AACpC,oBAAA,SAAS,EAAE,gCAAgC;AAC5C,iBAAA,CAAC;AAEF,gBAAA,IAAI,MAAM,KAAK,IAAI,EAAE;AACnB,oBAAA,MAAM,CAAC,KAAK,CAAC,kCAAkC,CAAC;AAChD,oBAAA,OAAO,IAAI;gBACb;gBAEA,WAAW,CAAC,WAAW,CAAC;AAExB,gBAAA,MAAM,YAAY,GAAG,mBAAmB,CAAC,MAAM,CAAC;gBAChD,MAAM,MAAM,GAAG,IAAI,WAAW,CAC5B,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,MAAM,CAC3C,CAAC,KAAK,KAAgC,CAAC,CAAC,KAAK,CAC9C,CACF;AACD,gBAAA,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAChD,gBAAA,MAAM,QAAQ,GAAG,IAAI,mBAAmB,CAAC,MAAM,EAAE;AAC/C,oBAAA,aAAa,EAAE,8BAA8B,CAAC,aAAa,CAAC;AAC7D,iBAAA,CAAC;AACF,gBAAA,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI;AAC/B,gBAAA,IAAI;AACF,oBAAA,OAAO,MAAM,QAAQ,CAAC,KAAK,EAAE;gBAC/B;wBAAU;AACR,oBAAA,UAAU,EAAE;AACZ,oBAAA,YAAY,EAAE;gBAChB;YACF;YAAE,OAAO,GAAG,EAAE;AACZ,gBAAA,MAAM,CAAC,KAAK,CAAC,2BAA2B,EAAE,GAAG,CAAC;AAC9C,gBAAA,MAAM,GAAG;YACX;oBAAU;AACR,gBAAA,aAAa,CAAC,OAAO,GAAG,IAAI;AAC5B,gBAAA,OAAO,CAAC,OAAO,GAAG,IAAI;gBACtB,WAAW,CAAC,MAAM,CAAC;YACrB;AACF,QAAA,CAAC;AAED,QAAA,MAAM,OAAO,GAAG,GAAG,EAAE;AACrB,QAAA,MAAM,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,SAAS,CAAC;AAC/C,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC,EACD,CAAC,IAAI,EAAE,WAAW,CAAC,CACpB;IAED,SAAS,CAAC,MAAK;AACb,QAAA,IACE,YAAY,KAAK,YAAY,CAAC,IAAI;AAClC,YAAA,YAAY,KAAK,YAAY,CAAC,IAAI,EAClC;YACA,aAAa,EAAE,CAAC,KAAK,CAAC,MAAK,EAAE,CAAC,CAAC;QACjC;AACF,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEjC,SAAS,CAAC,MAAK;QACb,IAAI,cAAc,KAAK,MAAM,IAAI,gBAAgB,GAAG,CAAC,EAAE;YACrD,aAAa,EAAE,CAAC,KAAK,CAAC,MAAK,EAAE,CAAC,CAAC;QACjC;IACF,CAAC,EAAE,CAAC,gBAAgB,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC;IAErD,SAAS,CAAC,MAAK;AACb,QAAA,YAAY,CAAC,OAAO,GAAG,IAAI;AAC3B,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,OAAO,GAAG,KAAK;AAC5B,YAAA,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,yBAAyB,CAAC;AACvD,YAAA,OAAO,CAAC,OAAO,IAAI;AACrB,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;QACL,cAAc;QACd,aAAa;QACb,cAAc;QACd,mBAAmB,EAAE,eAAe,CAAC,mBAAmB;QACxD,mBAAmB,EAAE,eAAe,CAAC,mBAAmB;KACzD;AACH;;;;"}

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