@stream-io/video-react-sdk 1.38.0 → 1.39.0

package/dist/src/components/CallParticipantsList/CallParticipantListingItem.d.ts

@@ -8,5 +8,5 @@ type CallParticipantListingItemProps = {
         participant: StreamVideoParticipant;
     }>;
 };
-export declare const CallParticipantListingItem: ({ participant, DisplayName, }: CallParticipantListingItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CallParticipantListingItem: import("react").MemoExoticComponent<({ participant, DisplayName, }: CallParticipantListingItemProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/src/core/components/Audio/Audio.d.ts

@@ -11,7 +11,4 @@ export type AudioProps = ComponentPropsWithoutRef<'audio'> & {
      */
     trackType?: AudioTrackType;
 };
-export declare const Audio: {
-    ({ participant, trackType, ...rest }: AudioProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const Audio: import("react").MemoExoticComponent<({ participant, trackType, ...rest }: AudioProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/src/core/components/ParticipantView/ParticipantView.d.ts

@@ -42,7 +42,7 @@ export type ParticipantViewProps = {
      */
     className?: string;
 } & Pick<VideoProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
-export declare const ParticipantView: import("react").ForwardRefExoticComponent<{
+export declare const ParticipantView: import("react").NamedExoticComponent<{
     /**
      * The participant whose video/audio stream we want to play.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -45,9 +45,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
-    "@stream-io/video-client": "1.54.0",
-    "@stream-io/video-filters-web": "0.7.5",
-    "@stream-io/video-react-bindings": "1.17.0",
+    "@stream-io/video-client": "1.55.0",
+    "@stream-io/video-filters-web": "0.8.0",
+    "@stream-io/video-react-bindings": "1.18.0",
     "chart.js": "^4.5.1",
     "clsx": "^2.1.1",
     "react-chartjs-2": "^5.3.1"
@@ -60,14 +60,16 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@stream-io/audio-filters-web": "^0.8.2",
-    "@stream-io/video-styling": "^1.14.1",
+    "@stream-io/audio-filters-web": "^0.9.0",
+    "@stream-io/typescript-config": "^0.0.0",
+    "@stream-io/video-styling": "^1.14.2",
+    "@types/node": "^25.9.3",
     "@types/react": "~19.2.15",
     "@types/react-dom": "~19.2.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "rimraf": "^6.1.3",
     "rollup": "^4.60.4",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   }
 }

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ComponentProps, ComponentType, forwardRef } from 'react';
+import { ComponentProps, ComponentType, forwardRef, memo } from 'react';
 import { useConnectedUser, useI18n } from '@stream-io/video-react-bindings';
 import {
   hasAudio,
@@ -20,60 +20,64 @@ type CallParticipantListingItemProps = {
   /** Custom component used to display participant's name */
   DisplayName?: ComponentType<{ participant: StreamVideoParticipant }>;
 };
-export const CallParticipantListingItem = ({
-  participant,
-  DisplayName = DefaultDisplayName,
-}: CallParticipantListingItemProps) => {
-  const isAudioOn = hasAudio(participant);
-  const isVideoOn = hasVideo(participant);
-  const isPinnedOn = isPinned(participant);
+export const CallParticipantListingItem = memo(
+  function CallParticipantListingItem({
+    participant,
+    DisplayName = DefaultDisplayName,
+  }: CallParticipantListingItemProps) {
+    const isAudioOn = hasAudio(participant);
+    const isVideoOn = hasVideo(participant);
+    const isPinnedOn = isPinned(participant);
 
-  const { t } = useI18n();
+    const { t } = useI18n();
 
-  return (
-    <div className="str-video__participant-listing-item">
-      <Avatar name={participant.name} imageSrc={participant.image} />
-      <DisplayName participant={participant} />
-      <div className="str-video__participant-listing-item__media-indicator-group">
-        <MediaIndicator
-          title={isAudioOn ? t('Microphone on') : t('Microphone off')}
-          className={clsx(
-            'str-video__participant-listing-item__icon',
-            `str-video__participant-listing-item__icon-${
-              isAudioOn ? 'mic' : 'mic-off'
-            }`,
-          )}
-        />
-        <MediaIndicator
-          title={isVideoOn ? t('Camera on') : t('Camera off')}
-          className={clsx(
-            'str-video__participant-listing-item__icon',
-            `str-video__participant-listing-item__icon-${
-              isVideoOn ? 'camera' : 'camera-off'
-            }`,
-          )}
-        />
-        {isPinnedOn && (
+    return (
+      <div className="str-video__participant-listing-item">
+        <Avatar name={participant.name} imageSrc={participant.image} />
+        <DisplayName participant={participant} />
+        <div className="str-video__participant-listing-item__media-indicator-group">
           <MediaIndicator
-            title={t('Pinned')}
+            title={isAudioOn ? t('Microphone on') : t('Microphone off')}
             className={clsx(
               'str-video__participant-listing-item__icon',
-              'str-video__participant-listing-item__icon-pinned',
+              `str-video__participant-listing-item__icon-${
+                isAudioOn ? 'mic' : 'mic-off'
+              }`,
             )}
           />
-        )}
+          <MediaIndicator
+            title={isVideoOn ? t('Camera on') : t('Camera off')}
+            className={clsx(
+              'str-video__participant-listing-item__icon',
+              `str-video__participant-listing-item__icon-${
+                isVideoOn ? 'camera' : 'camera-off'
+              }`,
+            )}
+          />
+          {isPinnedOn && (
+            <MediaIndicator
+              title={t('Pinned')}
+              className={clsx(
+                'str-video__participant-listing-item__icon',
+                'str-video__participant-listing-item__icon-pinned',
+              )}
+            />
+          )}
 
-        <MenuToggle placement="bottom-end" ToggleButton={ToggleButton}>
-          <ParticipantViewContext.Provider
-            value={{ participant, trackType: 'none' }}
-          >
-            <ParticipantActionsContextMenu />
-          </ParticipantViewContext.Provider>
-        </MenuToggle>
+          <MenuToggle placement="bottom-end" ToggleButton={ToggleButton}>
+            <ParticipantViewContext.Provider
+              value={{ participant, trackType: 'none' }}
+            >
+              <ParticipantActionsContextMenu />
+            </ParticipantViewContext.Provider>
+          </MenuToggle>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);
+
+CallParticipantListingItem.displayName = 'CallParticipantListingItem';
 
 const MediaIndicator = (props: ComponentProps<'div'>) => (
   <WithTooltip {...props} />

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -3,6 +3,7 @@ import {
   forwardRef,
   SetStateAction,
   useCallback,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -150,13 +151,21 @@ const ActiveUsersSearchResults = ({
   const { useParticipants } = useCallStateHooks();
   const participants = useParticipants({ sortBy: name });
 
+  // cache: each distinct name is normalized once
+  const normalizedNameCache = useRef<Map<string, string> | null>(null);
+
   const activeUsersSearchFn = useCallback(
     async (queryString: string) => {
       const normalizedQuery = normalizeString(queryString);
-      const queryRegExp = new RegExp(normalizedQuery, 'i');
-      return participants.filter((p) =>
-        normalizeString(p.name).match(queryRegExp),
-      );
+      const cache = (normalizedNameCache.current ??= new Map<string, string>());
+      return participants.filter((p) => {
+        let normalizedName = cache.get(p.name);
+        if (normalizedName === undefined) {
+          normalizedName = normalizeString(p.name);
+          cache.set(p.name, normalizedName);
+        }
+        return normalizedName.includes(normalizedQuery);
+      });
     },
     [participants],
   );
@@ -191,8 +200,10 @@ const BlockedUsersSearchResults = ({
 
   const blockedUsersSearchFn = useCallback(
     async (queryString: string) => {
-      const queryRegExp = new RegExp(queryString, 'i');
-      return blockedUsers.filter((userId) => userId.match(queryRegExp));
+      const normalizedQuery = queryString.toLowerCase();
+      return blockedUsers.filter((userId) =>
+        userId.toLowerCase().includes(normalizedQuery),
+      );
     },
     [blockedUsers],
   );

package/src/components/DeviceSettings/AudioVolumeIndicator.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { createSoundDetector } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { Icon } from '../Icon';
@@ -6,13 +6,17 @@ import { Icon } from '../Icon';
 export const AudioVolumeIndicator = () => {
   const { useMicrophoneState } = useCallStateHooks();
   const { isEnabled, mediaStream } = useMicrophoneState();
-  const [audioLevel, setAudioLevel] = useState(0);
+  const barRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!isEnabled || !mediaStream) return;
     const disposeSoundDetector = createSoundDetector(
       mediaStream,
-      ({ audioLevel: al }) => setAudioLevel(al),
+      ({ audioLevel: al }) => {
+        if (barRef.current) {
+          barRef.current.style.transform = `scaleX(${al / 100})`;
+        }
+      },
       { detectionFrequencyInMs: 80, destroyStreamOnStop: false },
     );
     return () => {
@@ -25,8 +29,8 @@ export const AudioVolumeIndicator = () => {
       <Icon icon={isEnabled ? 'mic' : 'mic-off'} />
       <div className="str-video__audio-volume-indicator__bar">
         <div
+          ref={barRef}
           className="str-video__audio-volume-indicator__bar-value"
-          style={{ transform: `scaleX(${audioLevel / 100})` }}
         />
       </div>
     </div>

package/src/components/Search/SearchInput.tsx

@@ -1,4 +1,5 @@
 import { ComponentProps, useEffect, useState } from 'react';
+import { useEffectEvent } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
 
 type SearchInputProps = ComponentProps<'input'> & {
@@ -20,11 +21,12 @@ export const SearchInput = ({
   const [inputElement, setInputElement] = useState<HTMLInputElement | null>(
     null,
   );
+  const onExitSearch = useEffectEvent(exitSearch);
   useEffect(() => {
     if (!inputElement) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key.toLowerCase() === 'escape') exitSearch();
+      if (e.key.toLowerCase() === 'escape') onExitSearch();
     };
 
     inputElement.addEventListener('keydown', handleKeyDown);
@@ -32,7 +34,7 @@ export const SearchInput = ({
     return () => {
       inputElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [exitSearch, inputElement]);
+  }, [inputElement]);
 
   return (
     <div

package/src/core/components/Audio/Audio.tsx

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, useEffect, useState } from 'react';
+import { ComponentPropsWithoutRef, memo, useEffect, useState } from 'react';
 import {
   AudioTrackType,
   StreamVideoParticipant,
@@ -18,11 +18,11 @@ export type AudioProps = ComponentPropsWithoutRef<'audio'> & {
   trackType?: AudioTrackType;
 };
 
-export const Audio = ({
+export const Audio = memo(function Audio({
   participant,
   trackType = 'audioTrack',
   ...rest
-}: AudioProps) => {
+}: AudioProps) {
   const call = useCall();
   const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
     null,
@@ -47,6 +47,6 @@ export const Audio = ({
       data-track-type={trackType}
     />
   );
-};
+});
 
 Audio.displayName = 'Audio';

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -1,6 +1,7 @@
 import {
   ComponentType,
   forwardRef,
+  memo,
   ReactElement,
   useMemo,
   useState,
@@ -70,8 +71,8 @@ export type ParticipantViewProps = {
   className?: string;
 } & Pick<VideoProps, 'VideoPlaceholder' | 'PictureInPicturePlaceholder'>;
 
-export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
-  function ParticipantView(
+export const ParticipantView = memo(
+  forwardRef<HTMLDivElement, ParticipantViewProps>(function ParticipantView(
     {
       participant,
       trackType = 'videoTrack',
@@ -195,7 +196,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
         </ParticipantViewContext.Provider>
       </div>
     );
-  },
+  }),
 );
 
 ParticipantView.displayName = 'ParticipantView';

package/src/core/components/Video/BaseVideo.tsx

@@ -22,9 +22,10 @@ export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
       if (stream === videoElement.srcObject) return;
 
       videoElement.srcObject = stream;
+      let timeoutId: ReturnType<typeof setTimeout> | undefined;
       if (Browsers.isSafari() || Browsers.isFirefox()) {
         // Firefox and Safari have some timing issue
-        setTimeout(() => {
+        timeoutId = setTimeout(() => {
           videoElement.srcObject = stream;
           videoElement.play().catch((e) => {
             console.error(`Failed to play stream`, e);
@@ -33,6 +34,7 @@ export const BaseVideo = forwardRef<HTMLVideoElement, BaseVideoProps>(
       }
 
       return () => {
+        clearTimeout(timeoutId);
         videoElement.pause();
         videoElement.srcObject = null;
       };

package/src/core/components/Video/Video.tsx

@@ -1,6 +1,7 @@
 import {
   ComponentPropsWithoutRef,
   ComponentType,
+  CSSProperties,
   useEffect,
   useLayoutEffect,
   useState,
@@ -25,6 +26,8 @@ import {
   PictureInPicturePlaceholderProps,
 } from './DefaultPictureInPicturePlaceholder';
 
+const ABSOLUTE_POSITION_STYLE: CSSProperties = { position: 'absolute' };
+
 export type VideoProps = ComponentPropsWithoutRef<'video'> & {
   /**
    * Pass false to disable rendering video and render fallback
@@ -203,14 +206,14 @@ export const Video = ({
       )}
       {isPiP && PictureInPicturePlaceholder && (
         <PictureInPicturePlaceholder
-          style={{ position: 'absolute' }}
+          style={ABSOLUTE_POSITION_STYLE}
           participant={participant}
         />
       )}
       {/* TODO: add condition to "hold" the placeholder until track unmutes as well */}
       {(hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (
         <VideoPlaceholder
-          style={{ position: 'absolute' }}
+          style={ABSOLUTE_POSITION_STYLE}
           participant={participant}
           ref={refs?.setVideoPlaceholderElement}
         />

package/src/embedded/hooks/useWakeLock.ts

@@ -20,6 +20,7 @@ export const useWakeLock = () => {
       .then((wls: WakeLockSentinel) => {
         if (interrupted) return wls.release();
         wakeLockSentinel = wls;
+        return undefined;
       })
       .catch((error: unknown) =>
         console.debug(`Couldn't setup WakeLock due to: ${error}`),

package/src/embedded/livestream/viewer/ViewerLobby.tsx

@@ -55,13 +55,12 @@ export const ViewerLobby = ({ onJoin }: ViewerLobbyProps) => {
   }, [canJoin, autoJoin, onJoin]);
 
   useEffect(() => {
-    if (!canJoinEarly) {
-      const handle = setInterval(() => {
-        setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
-      }, 1000);
+    if (canJoinEarly) return;
+    const handle = setInterval(() => {
+      setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+    }, 1000);
 
-      return () => clearInterval(handle);
-    }
+    return () => clearInterval(handle);
   }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
 
   useEffect(() => {

package/src/hooks/useDragToScroll.ts

@@ -33,6 +33,13 @@ export function useDragToScroll(
   element: HTMLElement | null,
   options: DragToScrollOptions = {},
 ) {
+  const {
+    enabled,
+    decay = 0.95,
+    minVelocity = 0.5,
+    dragThreshold = 5,
+  } = options;
+
   const stateRef = useRef<DragScrollState>({
     isDragging: false,
     isPointerActive: false,
@@ -46,9 +53,7 @@ export function useDragToScroll(
   });
 
   useEffect(() => {
-    if (!element || !options.enabled) return;
-
-    const { decay = 0.95, minVelocity = 0.5, dragThreshold = 5 } = options;
+    if (!element || !enabled) return;
 
     const state = stateRef.current;
 
@@ -158,5 +163,5 @@ export function useDragToScroll(
 
       stopMomentum();
     };
-  }, [element, options]);
+  }, [element, enabled, decay, minVelocity, dragThreshold]);
 }

package/src/hooks/useScrollPosition.ts

@@ -40,7 +40,7 @@ export const useVerticalScrollPosition = (
     const resizeObserver = new ResizeObserver(scrollHandler);
     resizeObserver.observe(scrollElement);
 
-    scrollElement.addEventListener('scroll', scrollHandler);
+    scrollElement.addEventListener('scroll', scrollHandler, { passive: true });
     return () => {
       scrollElement.removeEventListener('scroll', scrollHandler);
       resizeObserver.disconnect();
@@ -84,7 +84,7 @@ export const useHorizontalScrollPosition = (
     const resizeObserver = new ResizeObserver(scrollHandler);
     resizeObserver.observe(scrollElement);
 
-    scrollElement.addEventListener('scroll', scrollHandler);
+    scrollElement.addEventListener('scroll', scrollHandler, { passive: true });
     return () => {
       scrollElement.removeEventListener('scroll', scrollHandler);
       resizeObserver.disconnect();

package/src/wrappers/LivestreamPlayer/LivestreamPlayer.tsx

@@ -143,13 +143,12 @@ const useCanJoinEarly = () => {
   );
 
   useEffect(() => {
-    if (!canJoinEarly) {
-      const handle = setInterval(() => {
-        setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
-      }, 1000);
+    if (canJoinEarly) return;
+    const handle = setInterval(() => {
+      setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+    }, 1000);
 
-      return () => clearInterval(handle);
-    }
+    return () => clearInterval(handle);
   }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
 
   return canJoinEarly;