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

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.29.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.28.2...@stream-io/video-react-sdk-1.29.0) (2025-12-18)
+
+### Dependency Updates
+
+- `@stream-io/audio-filters-web` updated to version `0.7.0`
+- `@stream-io/video-client` updated to version `1.39.0`
+- `@stream-io/video-react-bindings` updated to version `1.12.3`
+
+### Features
+
+- **react:** Drag scroll on the participants list in the default layouts ([#2042](https://github.com/GetStream/stream-video-js/issues/2042)) ([b0f3f37](https://github.com/GetStream/stream-video-js/commit/b0f3f37ef45967625dca81af04ee5eb44df9d485))
+
 ## [1.28.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.28.1...@stream-io/video-react-sdk-1.28.2) (2025-12-11)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -594,6 +594,118 @@ const useModeration = (options) => {
     react.useEffect(() => disableBlur, [disableBlur]);
 };
 
+/**
+ * Enables drag-to-scroll functionality with momentum scrolling on a scrollable element.
+ *
+ * This hook allows users to click and drag to scroll an element, with momentum scrolling
+ * that continues after the drag ends. The drag only activates after moving beyond a threshold
+ *  distance, which prevents accidental drags from clicks.
+ *
+ * @param element - The HTML element to enable drag to scroll on.
+ * @param options - Options for customizing the drag-to-scroll behavior.
+ */
+function useDragToScroll(element, options = {}) {
+    const stateRef = react.useRef({
+        isDragging: false,
+        isPointerActive: false,
+        prevX: 0,
+        prevY: 0,
+        velocityX: 0,
+        velocityY: 0,
+        rafId: 0,
+        startX: 0,
+        startY: 0,
+    });
+    react.useEffect(() => {
+        if (!element || !options.enabled)
+            return;
+        const { decay = 0.95, minVelocity = 0.5, dragThreshold = 5 } = options;
+        const state = stateRef.current;
+        const stopMomentum = () => {
+            if (state.rafId) {
+                cancelAnimationFrame(state.rafId);
+                state.rafId = 0;
+            }
+            state.velocityX = 0;
+            state.velocityY = 0;
+        };
+        const momentumStep = () => {
+            state.velocityX *= decay;
+            state.velocityY *= decay;
+            element.scrollLeft -= state.velocityX;
+            element.scrollTop -= state.velocityY;
+            if (Math.abs(state.velocityX) < minVelocity &&
+                Math.abs(state.velocityY) < minVelocity) {
+                state.rafId = 0;
+                return;
+            }
+            state.rafId = requestAnimationFrame(momentumStep);
+        };
+        const onPointerDown = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            stopMomentum();
+            state.isDragging = false;
+            state.isPointerActive = true;
+            state.prevX = e.clientX;
+            state.prevY = e.clientY;
+            state.startX = e.clientX;
+            state.startY = e.clientY;
+        };
+        const onPointerMove = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            if (!state.isPointerActive)
+                return;
+            const dx = e.clientX - state.startX;
+            const dy = e.clientY - state.startY;
+            if (!state.isDragging && Math.hypot(dx, dy) > dragThreshold) {
+                state.isDragging = true;
+                e.preventDefault();
+            }
+            if (!state.isDragging)
+                return;
+            const moveDx = e.clientX - state.prevX;
+            const moveDy = e.clientY - state.prevY;
+            element.scrollLeft -= moveDx;
+            element.scrollTop -= moveDy;
+            state.velocityX = moveDx;
+            state.velocityY = moveDy;
+            state.prevX = e.clientX;
+            state.prevY = e.clientY;
+        };
+        const onPointerUpOrCancel = () => {
+            const wasDragging = state.isDragging;
+            state.isDragging = false;
+            state.isPointerActive = false;
+            state.prevX = 0;
+            state.prevY = 0;
+            state.startX = 0;
+            state.startY = 0;
+            if (!wasDragging) {
+                stopMomentum();
+                return;
+            }
+            if (Math.hypot(state.velocityX, state.velocityY) < minVelocity) {
+                stopMomentum();
+                return;
+            }
+            state.rafId = requestAnimationFrame(momentumStep);
+        };
+        element.addEventListener('pointerdown', onPointerDown);
+        element.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUpOrCancel);
+        window.addEventListener('pointercancel', onPointerUpOrCancel);
+        return () => {
+            element.removeEventListener('pointerdown', onPointerDown);
+            element.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUpOrCancel);
+            window.removeEventListener('pointercancel', onPointerUpOrCancel);
+            stopMomentum();
+        };
+    }, [element, options]);
+}
+
 exports.MenuVisualType = void 0;
 (function (MenuVisualType) {
     MenuVisualType["PORTAL"] = "portal";
@@ -1452,7 +1564,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.28.2"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.29.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -2945,7 +3057,7 @@ hostElement, limit) => {
 };
 
 const DefaultParticipantViewUIBar = () => (jsxRuntime.jsx(DefaultParticipantViewUI, { menuPlacement: "top-end" }));
-const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, muted, }) => {
+const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, ParticipantViewUISpotlight = DefaultParticipantViewUI, VideoPlaceholder, PictureInPicturePlaceholder, participantsBarPosition = 'bottom', participantsBarLimit, mirrorLocalParticipantVideo = true, excludeLocalParticipant = false, filterParticipants, pageArrowsVisible = true, muted, enableDragToScroll = false, }) => {
     const call = videoReactBindings.useCall();
     const { useParticipants } = videoReactBindings.useCallStateHooks();
     const allParticipants = useParticipants();
@@ -2966,6 +3078,9 @@ const SpeakerLayout = ({ ParticipantViewUIBar = DefaultParticipantViewUIBar, Par
     }, [participantsBarWrapperElement, call]);
     const isOneOnOneCall = allParticipants.length === 2;
     useSpeakerLayoutSortPreset(call, isOneOnOneCall);
+    useDragToScroll(participantsBarWrapperElement, {
+        enabled: enableDragToScroll,
+    });
     let participantsWithAppliedLimit = otherParticipants;
     const hardLimitToApply = isVertical
         ? hardLimit.vertical
@@ -3118,7 +3233,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.28.2").split('.');
+const [major, minor, patch] = ("1.29.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,