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

package/dist/embedded.es.js

@@ -1,11 +1,11 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
-import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, useIsAudioConnecting, useIsVideoConnecting, StreamCallProvider, StreamVideoProvider, useEffectEvent } from '@stream-io/video-react-bindings';
+import { memo, useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
+import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, useEffectEvent, useIsAudioConnecting, useIsVideoConnecting, StreamCallProvider, StreamVideoProvider } from '@stream-io/video-react-bindings';
 import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, combineComparators, screenSharing, speakerLayoutSortPreset, paginatedLayoutSortPreset, CallTypes, defaultSortPreset, humanize, StreamVideoClient } from '@stream-io/video-client';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList } from '@floating-ui/react';
 import clsx from 'clsx';
 
-const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
+const Audio = memo(function Audio({ participant, trackType = 'audioTrack', ...rest }) {
     const call = useCall();
     const [audioElement, setAudioElement] = useState(null);
     const { userId, sessionId } = participant;
@@ -18,7 +18,7 @@ const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
         };
     }, [call, sessionId, audioElement, trackType]);
     return (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) => {
@@ -94,7 +94,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();
@@ -122,7 +122,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();
@@ -213,6 +213,7 @@ function useDeviceList(devices, selectedDeviceId) {
  * @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,
@@ -225,9 +226,8 @@ function useDragToScroll(element, options = {}) {
         startY: 0,
     });
     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) {
@@ -311,7 +311,7 @@ function useDragToScroll(element, options = {}) {
             window.removeEventListener('pointercancel', onPointerUpOrCancel);
             stopMomentum();
         };
-    }, [element, options]);
+    }, [element, enabled, decay, minVelocity, dragThreshold]);
 }
 
 var MenuVisualType;
@@ -541,9 +541,10 @@ const BaseVideo = forwardRef(function BaseVideo({ stream, ...rest }, ref) {
         if (stream === videoElement.srcObject)
             return;
         videoElement.srcObject = stream;
+        let timeoutId;
         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);
@@ -551,6 +552,7 @@ const BaseVideo = forwardRef(function BaseVideo({ stream, ...rest }, ref) {
             }, 0);
         }
         return () => {
+            clearTimeout(timeoutId);
             videoElement.pause();
             videoElement.srcObject = null;
         };
@@ -587,6 +589,7 @@ const DefaultPictureInPicturePlaceholder = forwardRef(function DefaultPictureInP
     return (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 = useCall();
@@ -659,7 +662,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 && (jsx(PictureInPicturePlaceholder, { style: { position: 'absolute' }, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: { position: 'absolute' }, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
+                } })), isPiP && PictureInPicturePlaceholder && (jsx(PictureInPicturePlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant })), (hasNoVideoOrInvisible || isVideoPaused) && VideoPlaceholder && (jsx(VideoPlaceholder, { style: ABSOLUTE_POSITION_STYLE, participant: participant, ref: refs?.setVideoPlaceholderElement }))] }));
 };
 Video$1.displayName = 'Video';
 
@@ -1018,16 +1021,20 @@ const ScreenShareButton = (props) => {
 const AudioVolumeIndicator = () => {
     const { useMicrophoneState } = useCallStateHooks();
     const { isEnabled, mediaStream } = useMicrophoneState();
-    const [audioLevel, setAudioLevel] = useState(0);
+    const barRef = useRef(null);
     useEffect(() => {
         if (!isEnabled || !mediaStream)
             return;
-        const disposeSoundDetector = createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        const disposeSoundDetector = 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 (jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
+    return (jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsx("div", { ref: barRef, className: "str-video__audio-volume-indicator__bar-value" }) })] }));
 };
 
 const LEVEL_BARS = 5;
@@ -1201,7 +1208,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = useRef(null);
     const [isPlaying, setIsPlaying] = useState(false);
     const { t } = 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
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -1500,13 +1507,14 @@ const CallParticipantListHeader = ({ onClose, }) => {
     return (jsxs("div", { className: "str-video__participant-list-header", children: [jsxs("div", { className: "str-video__participant-list-header__title", children: [t('Participants'), ' ', jsxs("span", { className: "str-video__participant-list-header__title-count", children: ["[", participants.length, "]"] }), anonymousParticipantCount > 0 && (jsx("span", { className: "str-video__participant-list-header__title-anonymous", children: t('Anonymous', { count: anonymousParticipantCount }) }))] }), jsx(IconButton, { onClick: onClose, className: "str-video__participant-list-header__close-button", icon: "close" })] }));
 };
 
-const CallParticipantListingItem = ({ participant, DisplayName = DefaultDisplayName, }) => {
+const CallParticipantListingItem = memo(function CallParticipantListingItem({ participant, DisplayName = DefaultDisplayName, }) {
     const isAudioOn = hasAudio(participant);
     const isVideoOn = hasVideo(participant);
     const isPinnedOn = isPinned(participant);
     const { t } = useI18n();
     return (jsxs("div", { className: "str-video__participant-listing-item", children: [jsx(Avatar, { name: participant.name, imageSrc: participant.image }), jsx(DisplayName, { participant: participant }), jsxs("div", { className: "str-video__participant-listing-item__media-indicator-group", children: [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'}`) }), 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 && (jsx(MediaIndicator, { title: t('Pinned'), className: clsx('str-video__participant-listing-item__icon', 'str-video__participant-listing-item__icon-pinned') })), jsx(MenuToggle, { placement: "bottom-end", ToggleButton: ToggleButton$2, children: jsx(ParticipantViewContext.Provider, { value: { participant, trackType: 'none' }, children: jsx(ParticipantActionsContextMenu, {}) }) })] })] }));
-};
+});
+CallParticipantListingItem.displayName = 'CallParticipantListingItem';
 const MediaIndicator = (props) => (jsx(WithTooltip, { ...props }));
 const DefaultDisplayName = ({ participant }) => {
     const connectedUser = useConnectedUser();
@@ -1538,18 +1546,19 @@ const EmptyParticipantSearchList = () => {
 
 const SearchInput = ({ exitSearch, isActive, ...rest }) => {
     const [inputElement, setInputElement] = useState(null);
+    const onExitSearch = useEffectEvent(exitSearch);
     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 (jsxs("div", { className: clsx('str-video__search-input__container', {
             'str-video__search-input__container--active': isActive,
         }), children: [jsx("input", { placeholder: "Search", ...rest, ref: setInputElement }), isActive ? (jsx("button", { className: "str-video__search-input__clear-btn", onClick: exitSearch, children: jsx("span", { className: "str-video__search-input__icon--active" }) })) : (jsx("span", { className: "str-video__search-input__icon" }))] }));
@@ -1620,10 +1629,19 @@ const CallParticipantListContentHeader = ({ userListType, setUserListType, }) =>
 const ActiveUsersSearchResults = ({ searchQuery, activeUsersSearchFn: activeUsersSearchFnFromProps, debounceSearchInterval, }) => {
     const { useParticipants } = useCallStateHooks();
     const participants = useParticipants({ sortBy: name });
+    // cache: each distinct name is normalized once
+    const normalizedNameCache = useRef(null);
     const activeUsersSearchFn = 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,
@@ -1636,8 +1654,8 @@ const BlockedUsersSearchResults = ({ blockedUsersSearchFn: blockedUsersSearchFnF
     const { useCallBlockedUserIds } = useCallStateHooks();
     const blockedUsers = useCallBlockedUserIds();
     const blockedUsersSearchFn = 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,
@@ -1908,7 +1926,7 @@ const SpeechIndicator = () => {
     return (jsxs("span", { className: clsx('str-video__speech-indicator', isSpeaking && 'str-video__speech-indicator--speaking', isDominantSpeaker && 'str-video__speech-indicator--dominant'), children: [jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" }), jsx("span", { className: "str-video__speech-indicator__bar" })] }));
 };
 
-const ParticipantView = forwardRef(function ParticipantView({ participant, trackType = 'videoTrack', mirror, muteAudio, refs: { setVideoElement, setVideoPlaceholderElement } = {}, className, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI = DefaultParticipantViewUI, }, ref) {
+const ParticipantView = memo(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 = hasAudio(participant);
     const hasVideoTrack = hasVideo(participant);
@@ -1952,7 +1970,7 @@ const ParticipantView = forwardRef(function ParticipantView({ participant, track
         }, 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: jsxs(ParticipantViewContext.Provider, { value: participantViewContextValue, children: [!isLocalParticipant && !muteAudio && (jsxs(Fragment, { children: [hasAudioTrack && (jsx(Audio, { participant: participant, trackType: "audioTrack" })), hasScreenShareAudioTrack && (jsx(Audio, { participant: participant, trackType: "screenShareAudioTrack" }))] })), 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) ? (jsx(ParticipantViewUI, {})) : (ParticipantViewUI)] }) }));
-});
+}));
 ParticipantView.displayName = 'ParticipantView';
 
 // re-exporting the StreamCallProvider as StreamCall
@@ -2170,20 +2188,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;
@@ -2194,35 +2212,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;
@@ -3061,6 +3079,7 @@ const useWakeLock = () => {
             if (interrupted)
                 return wls.release();
             wakeLockSentinel = wls;
+            return undefined;
         })
             .catch((error) => console.debug(`Couldn't setup WakeLock due to: ${error}`));
         return () => {
@@ -3395,12 +3414,12 @@ const ViewerLobby = ({ onJoin }) => {
         }
     }, [canJoin, autoJoin, onJoin]);
     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]);
     useEffect(() => {
         if (!startsAt || startsAtPassed)