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

package/dist/index.cjs.js

@@ -7,7 +7,7 @@ var react = require('react');
 var react$1 = require('@floating-ui/react');
 var clsx = require('clsx');
 
-const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
+const Audio = react.memo(function Audio({ participant, trackType = 'audioTrack', ...rest }) {
     const call = videoReactBindings.useCall();
     const [audioElement, setAudioElement] = react.useState(null);
     const { userId, sessionId } = participant;
@@ -20,7 +20,7 @@ const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
         };
     }, [call, sessionId, audioElement, trackType]);
     return (jsxRuntime.jsx("audio", { autoPlay: true, ...rest, ref: setAudioElement, "data-user-id": userId, "data-session-id": sessionId, "data-track-type": trackType }));
-};
+});
 Audio.displayName = 'Audio';
 
 const ParticipantsAudio = (props) => {
@@ -108,7 +108,7 @@ const useVerticalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD)
         };
         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();
@@ -136,7 +136,7 @@ const useHorizontalScrollPosition = (scrollElement, threshold = SCROLL_THRESHOLD
         };
         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();
@@ -357,6 +357,7 @@ const useModeration = (options) => {
  * @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 = react.useRef({
         isDragging: false,
         isPointerActive: false,
@@ -369,9 +370,8 @@ function useDragToScroll(element, options = {}) {
         startY: 0,
     });
     react.useEffect(() => {
-        if (!element || !options.enabled)
+        if (!element || !enabled)
             return;
-        const { decay = 0.95, minVelocity = 0.5, dragThreshold = 5 } = options;
         const state = stateRef.current;
         const stopMomentum = () => {
             if (state.rafId) {
@@ -455,7 +455,7 @@ function useDragToScroll(element, options = {}) {
             window.removeEventListener('pointercancel', onPointerUpOrCancel);
             stopMomentum();
         };
-    }, [element, options]);
+    }, [element, enabled, decay, minVelocity, dragThreshold]);
 }
 
 exports.MenuVisualType = void 0;
@@ -685,9 +685,10 @@ const BaseVideo = react.forwardRef(function BaseVideo({ stream, ...rest }, ref)
         if (stream === videoElement.srcObject)
             return;
         videoElement.srcObject = stream;
+        let timeoutId;
         if (videoClient.Browsers.isSafari() || videoClient.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);
@@ -695,6 +696,7 @@ const BaseVideo = react.forwardRef(function BaseVideo({ stream, ...rest }, ref)
             }, 0);
         }
         return () => {
+            clearTimeout(timeoutId);
             videoElement.pause();
             videoElement.srcObject = null;
         };
@@ -731,6 +733,7 @@ const DefaultPictureInPicturePlaceholder = react.forwardRef(function DefaultPict
     return (jsxRuntime.jsx(BaseVideoPlaceholder, { ref: ref, ...props, children: t('Video is playing in a popup') }));
 });
 
+const ABSOLUTE_POSITION_STYLE = { position: 'absolute' };
 const Video$1 = ({ enabled = true, mirror, trackType, participant, className, VideoPlaceholder = DefaultVideoPlaceholder, PictureInPicturePlaceholder = DefaultPictureInPicturePlaceholder, refs, ...rest }) => {
     const { sessionId, videoStream, screenShareStream, viewportVisibilityState, isLocalParticipant, userId, } = participant;
     const call = videoReactBindings.useCall();
@@ -803,7 +806,7 @@ const Video$1 = ({ enabled = true, mirror, trackType, participant, className, Vi
                 }), "data-user-id": userId, "data-session-id": sessionId, ref: (element) => {
                     setVideoElement(element);
                     refs?.setVideoElement?.(element);
-                } })), isPiP && PictureInPicturePlaceholder && (jsxRuntime.jsx(PictureInPicturePlaceholder, { style: { position: 'absolute' }, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsxRuntime.jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+                } })), isPiP && PictureInPicturePlaceholder && (jsxRuntime.jsx(PictureInPicturePlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsxRuntime.jsx(VideoPlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
 };
 Video$1.displayName = 'Video';
 
@@ -1216,16 +1219,20 @@ const ScreenShareButton = (props) => {
 const AudioVolumeIndicator = () => {
     const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
     const { isEnabled, mediaStream } = useMicrophoneState();
-    const [audioLevel, setAudioLevel] = react.useState(0);
+    const barRef = react.useRef(null);
     react.useEffect(() => {
         if (!isEnabled || !mediaStream)
             return;
-        const disposeSoundDetector = videoClient.createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        const disposeSoundDetector = videoClient.createSoundDetector(mediaStream, ({ audioLevel: al }) => {
+            if (barRef.current) {
+                barRef.current.style.transform = `scaleX(${al / 100})`;
+            }
+        }, { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
         return () => {
             disposeSoundDetector().catch(console.error);
         };
     }, [isEnabled, mediaStream]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsxRuntime.jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsxRuntime.jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsxRuntime.jsx("div", { ref: barRef, className: "str-video__audio-volume-indicator__bar-value" }) })] }));
 };
 
 const LEVEL_BARS = 5;
@@ -1399,7 +1406,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.38.0"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.39.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -1903,13 +1910,14 @@ const CallParticipantListHeader = ({ onClose, }) => {
     return (jsxRuntime.jsxs("div", { className: "str-video__participant-list-header", children: [jsxRuntime.jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxRuntime.jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsxRuntime.jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsxRuntime.jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
-const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
+const CallParticipantListingItem = react.memo(function CallParticipantListingItem({ participant, DisplayName = DefaultDisplayName, }) {
     const isAudioOn = videoClient.hasAudio(participant);
     const isVideoOn = videoClient.hasVideo(participant);
     const isPinnedOn = videoClient.isPinned(participant);
     const { t } = videoReactBindings.useI18n();
     return (jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item", children: [jsxRuntime.jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsxRuntime.jsx(DisplayName, { participant: participant }), jsxRuntime.jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [jsxRuntime.jsx(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'}`) }), jsxRuntime.jsx(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 && (jsxRuntime.jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsxRuntime.jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsxRuntime.jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsxRuntime.jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
-};
+});
+CallParticipantListingItem.displayName = 'CallParticipantListingItem';
 const MediaIndicator = (props) => (jsxRuntime.jsx(WithTooltip, { ...props }));
 const DefaultDisplayName = ({ participant }) => {
     const connectedUser = videoReactBindings.useConnectedUser();
@@ -1941,18 +1949,19 @@ const EmptyParticipantSearchList = () => {
 
 const SearchInput = ({ exitSearch, isActive, ...rest }) => {
     const [inputElement, setInputElement] = react.useState(null);
+    const onExitSearch = videoReactBindings.useEffectEvent(exitSearch);
     react.useEffect(() => {
         if (!inputElement)
             return;
         const handleKeyDown = (e) => {
             if (e.key.toLowerCase() === 'escape')
-                exitSearch();
+                onExitSearch();
         };
         inputElement.addEventListener('keydown', handleKeyDown);
         return () => {
             inputElement.removeEventListener('keydown', handleKeyDown);
         };
-    }, [exitSearch, inputElement]);
+    }, [inputElement]);
     return (jsxRuntime.jsxs("div", { className: clsx('str-video__search-input__container', {
             'str-video__search-input__container--active': isActive,
         }), children: [jsxRuntime.jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsxRuntime.jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsxRuntime.jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsxRuntime.jsx("span", { className: "str-video__search-input__icon" }))] }));
@@ -2023,10 +2032,19 @@ const CallParticipantListContentHeader = ({ userListType, setUserListType, }) =>
 const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
     const { useParticipants } = videoReactBindings.useCallStateHooks();
     const participants = useParticipants({ sortBy: videoClient.name });
+    // cache: each distinct name is normalized once
+    const normalizedNameCache = react.useRef(null);
     const activeUsersSearchFn = react.useCallback(async (queryString) => {
         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());
+        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]);
     const { searchQueryInProgress, searchResults } = useSearch({
         searchFn: activeUsersSearchFnFromProps ?? activeUsersSearchFn,
@@ -2039,8 +2057,8 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
     const { useCallBlockedUserIds } = videoReactBindings.useCallStateHooks();
     const blockedUsers = useCallBlockedUserIds();
     const blockedUsersSearchFn = react.useCallback(async (queryString) => {
-        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]);
     const { searchQueryInProgress, searchResults } = useSearch({
         searchFn: blockedUsersSearchFnFromProps ?? blockedUsersSearchFn,
@@ -2406,7 +2424,7 @@ const SpeechIndicator = () => {
     return (jsxRuntime.jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" }), jsxRuntime.jsx("span", { className: "str-video__speech-indicator__bar" })] }));
 };
 
-const ParticipantView = react.forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
+const ParticipantView = react.memo(react.forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
     const { isLocalParticipant, isSpeaking, isDominantSpeaker, sessionId } = participant;
     const hasAudioTrack = videoClient.hasAudio(participant);
     const hasVideoTrack = videoClient.hasVideo(participant);
@@ -2450,7 +2468,7 @@ const ParticipantView = react.forwardRef(function ParticipantView({ participant,
         }, className: clsx('str-video__participant-view', isDominantSpeaker && 'str-video__participant-view--dominant-speaker', isSpeaking && 'str-video__participant-view--speaking', !hasVideoTrack && 'str-video__participant-view--no-video', !hasAudioTrack && 'str-video__participant-view--no-audio', className), children: jsxRuntime.jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsxRuntime.jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), jsxRuntime.jsx(Video$1, { VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, participant: participant, trackType: trackType, refs: videoRefs, enabled: isLocalParticipant ||
                         trackType !== 'videoTrack' ||
                         isParticipantVideoEnabled(participant.sessionId), mirror: mirror, autoPlay: true }), isComponentType(ParticipantViewUI) ? (jsxRuntime.jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
-});
+}));
 ParticipantView.displayName = 'ParticipantView';
 
 // re-exporting the StreamCallProvider as StreamCall
@@ -2668,20 +2686,20 @@ function checkConditions(obj, conditions) {
             const eqOperatorValue = isDateString(eqOperator.$eq)
                 ? new Date(eqOperator.$eq).getTime()
                 : eqOperator.$eq;
-            match && (match = eqOperatorValue === value);
+            match &&= eqOperatorValue === value;
         }
         else if (maybeOperator && '$neq' in operator) {
             const neqOperator = operator;
-            match && (match = neqOperator.$neq !== value);
+            match &&= neqOperator.$neq !== value;
         }
         else if (maybeOperator && '$in' in operator) {
             const inOperator = operator;
-            match && (match = inOperator.$in.includes(value));
+            match &&= inOperator.$in.includes(value);
         }
         else if (maybeOperator && '$contains' in operator) {
             if (Array.isArray(value)) {
                 const containsOperator = operator;
-                match && (match = value.includes(containsOperator.$contains));
+                match &&= value.includes(containsOperator.$contains);
             }
             else {
                 match = false;
@@ -2692,35 +2710,35 @@ function checkConditions(obj, conditions) {
             const gtOperatorValue = isDateString(gtOperator.$gt)
                 ? new Date(gtOperator.$gt).getTime()
                 : gtOperator.$gt;
-            match && (match = value > gtOperatorValue);
+            match &&= value > gtOperatorValue;
         }
         else if (maybeOperator && '$gte' in operator) {
             const gteOperator = operator;
             const gteOperatorValue = isDateString(gteOperator.$gte)
                 ? new Date(gteOperator.$gte).getTime()
                 : gteOperator.$gte;
-            match && (match = value >= gteOperatorValue);
+            match &&= value >= gteOperatorValue;
         }
         else if (maybeOperator && '$lt' in operator) {
             const ltOperator = operator;
             const ltOperatorValue = isDateString(ltOperator.$lt)
                 ? new Date(ltOperator.$lt).getTime()
                 : ltOperator.$lt;
-            match && (match = value < ltOperatorValue);
+            match &&= value < ltOperatorValue;
         }
         else if (maybeOperator && '$lte' in operator) {
             const lteOperator = operator;
             const lteOperatorValue = isDateString(lteOperator.$lte)
                 ? new Date(lteOperator.$lte).getTime()
                 : lteOperator.$lte;
-            match && (match = value <= lteOperatorValue);
+            match &&= value <= lteOperatorValue;
             // } else if (maybeOperator && '$autocomplete' in operator) {
             // TODO: regexp solution maybe?
             // match &&= false;
         }
         else {
             const eqValue = operator;
-            match && (match = eqValue === value);
+            match &&= eqValue === value;
         }
         if (!match) {
             return false;
@@ -3250,12 +3268,12 @@ const useCanJoinEarly = () => {
     const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
     const [canJoinEarly, setCanJoinEarly] = react.useState(() => checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
     react.useEffect(() => {
-        if (!canJoinEarly) {
-            const handle = setInterval(() => {
-                setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
-            }, 1000);
-            return () => clearInterval(handle);
-        }
+        if (canJoinEarly)
+            return;
+        const handle = setInterval(() => {
+            setCanJoinEarly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+        }, 1000);
+        return () => clearInterval(handle);
     }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
     return canJoinEarly;
 };
@@ -3266,7 +3284,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.38.0").split('.');
+const [major, minor, patch] = ("1.39.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,