@stream-io/video-react-sdk 1.28.2 → 1.29.1

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

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

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

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

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

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

package/package.json

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

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -10,6 +10,7 @@ import {
 } from '../ParticipantView';
 import { IconButton } from '../../../components';
 import {
+  useDragToScroll,
   useHorizontalScrollPosition,
   useVerticalScrollPosition,
 } from '../../../hooks';
@@ -88,6 +89,12 @@ export type SpeakerLayoutProps = {
    * Whether the layout is muted. Defaults to `false`.
    */
   muted?: boolean;
+
+  /**
+   * Whether to enable drag-to-scroll functionality on the participants bar.
+   * @default false
+   */
+  enableDragToScroll?: boolean;
 } & Pick<
   ParticipantViewProps,
   'VideoPlaceholder' | 'PictureInPicturePlaceholder'
@@ -109,6 +116,7 @@ export const SpeakerLayout = ({
   filterParticipants,
   pageArrowsVisible = true,
   muted,
+  enableDragToScroll = false,
 }: SpeakerLayoutProps) => {
   const call = useCall();
   const { useParticipants } = useCallStateHooks();
@@ -146,6 +154,9 @@ export const SpeakerLayout = ({
 
   const isOneOnOneCall = allParticipants.length === 2;
   useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+  useDragToScroll(participantsBarWrapperElement, {
+    enabled: enableDragToScroll,
+  });
 
   let participantsWithAppliedLimit = otherParticipants;
 

package/src/hooks/index.ts

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

package/src/hooks/useDragToScroll.ts

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