@stream-io/video-react-sdk 1.32.3 → 1.33.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import { hasAudio, hasScreenShareAudio, CallingState, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, humanize, setSdkInfo } from '@stream-io/video-client';
+import { hasAudio, hasScreenShareAudio, hasVideo, hasScreenShare, OwnCapability, Browsers, VisibilityState, hasPausedTrack, createSoundDetector, SfuModels, isPinned, name, NoiseCancellationSettingsModeEnum, CallingState, paginatedLayoutSortPreset, combineComparators, screenSharing, speakerLayoutSortPreset, CallTypes, defaultSortPreset, humanize, setSdkInfo } from '@stream-io/video-client';
 export * from '@stream-io/video-client';
 import { useCall, useCallStateHooks, useI18n, Restricted, useToggleCallRecording, useConnectedUser, StreamCallProvider, StreamVideoProvider, useStreamVideoClient, useEffectEvent } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useRef, useCallback, useMemo, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
+import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, isValidElement, forwardRef, useLayoutEffect, lazy, Suspense } from 'react';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
 import clsx from 'clsx';
 
@@ -71,202 +71,17 @@ const useFloatingUIPreset = ({ middleware = [], placement, strategy, offset: off
     return { refs, x, y, domReference, floating, strategy, context };
 };
 
-const defaultDevice = 'default';
 /**
- * This hook will apply and persist the device preferences from local storage.
+ * This hook is a no-op. Device preference persistence is now handled
+ * by the low-level client SDK.
  *
- * @param key the key to use for local storage.
+ * @deprecated use the devicePreferences API of the StreamVideoClient.
  */
-const usePersistedDevicePreferences = (key = '@stream-io/device-preferences') => {
-    const { useCallSettings, useCallCallingState, useMicrophoneState, useCameraState, useSpeakerState, } = useCallStateHooks();
-    const settings = useCallSettings();
-    const callingState = useCallCallingState();
-    const microphoneState = useMicrophoneState();
-    const cameraState = useCameraState();
-    const speakerState = useSpeakerState();
-    const [applyingState, setApplyingState] = useState('idle');
-    const call = useCall();
-    // Set deferServerDefaults flag synchronously during render.
-    // Please ensure the flag is set BEFORE any call.get() or call.getOrCreate()
-    // is called, preventing server defaults from overriding user preferences.
-    const deferredCallRef = useRef(null);
-    if (call && deferredCallRef.current !== call) {
-        call.camera.deferServerDefaults = true;
-        call.microphone.deferServerDefaults = true;
-        deferredCallRef.current = call;
-    }
-    // Cleanup: reset the flag when the component unmounts or call changes.
-    // This allows server defaults to apply if the hook is no longer used.
+const usePersistedDevicePreferences = (key = '') => {
     useEffect(() => {
-        return () => {
-            const currentCall = deferredCallRef.current;
-            if (currentCall) {
-                currentCall.camera.deferServerDefaults = false;
-                currentCall.microphone.deferServerDefaults = false;
-                deferredCallRef.current = null;
-            }
-        };
-    }, [call]);
-    // when the camera is disabled on call type level, we should discard
-    // any stored camera preferences.
-    const cameraDevices = settings?.video?.enabled ? cameraState.devices : false;
-    useEffect(function apply() {
-        if (callingState === CallingState.LEFT ||
-            microphoneState.devices.length === 0 ||
-            (Array.isArray(cameraDevices) && cameraDevices.length === 0) ||
-            speakerState.devices.length === 0 ||
-            !settings ||
-            applyingState !== 'idle') {
-            return;
-        }
-        setApplyingState('applying');
-        (async () => {
-            const { audio, video } = settings;
-            for (const [deviceKey, state, defaultMuted, enabledInCallType] of [
-                ['microphone', microphoneState, !audio.mic_default_on, true],
-                ['camera', cameraState, !video.camera_default_on, video.enabled],
-                ['speaker', speakerState, false, true],
-            ]) {
-                const preferences = parseLocalDevicePreferences(key);
-                const preference = preferences[deviceKey];
-                const manager = state[deviceKey];
-                const applyPromise = preference
-                    ? applyLocalDevicePreference(manager, [preference].flat(), deviceKey === 'camera' ? cameraDevices || [] : state.devices, enabledInCallType)
-                    : applyMutedState(manager, defaultMuted, enabledInCallType);
-                await applyPromise.catch((err) => {
-                    console.warn(`Failed to apply ${deviceKey} device preferences`, err);
-                });
-            }
-        })().finally(() => setApplyingState((state) => (state === 'applying' ? 'applied' : state)));
-    }, [
-        applyingState,
-        callingState,
-        cameraState,
-        cameraDevices,
-        key,
-        microphoneState,
-        microphoneState.devices,
-        settings,
-        speakerState,
-        speakerState.devices,
-    ]);
-    useEffect(function persist() {
-        if (callingState === CallingState.LEFT || applyingState !== 'applied') {
-            return;
-        }
-        for (const [deviceKey, devices, selectedDevice, isMute] of [
-            [
-                'camera',
-                cameraDevices || [],
-                cameraState.selectedDevice,
-                cameraState.isMute,
-            ],
-            [
-                'microphone',
-                microphoneState.devices,
-                microphoneState.selectedDevice,
-                microphoneState.isMute,
-            ],
-            [
-                'speaker',
-                speakerState.devices,
-                speakerState.selectedDevice,
-                speakerState.isMute,
-            ],
-        ]) {
-            try {
-                patchLocalDevicePreference(key, deviceKey, {
-                    devices,
-                    selectedDevice,
-                    isMute,
-                });
-            }
-            catch (err) {
-                console.warn(`Failed to save ${deviceKey} device preferences`, err);
-            }
-        }
-    }, [
-        applyingState,
-        callingState,
-        cameraDevices,
-        cameraState.isMute,
-        cameraState.selectedDevice,
-        key,
-        microphoneState.devices,
-        microphoneState.isMute,
-        microphoneState.selectedDevice,
-        speakerState.devices,
-        speakerState.isMute,
-        speakerState.selectedDevice,
-    ]);
-};
-const parseLocalDevicePreferences = (key) => {
-    const preferencesStr = window.localStorage.getItem(key);
-    let preferences = {};
-    if (preferencesStr) {
-        try {
-            preferences = JSON.parse(preferencesStr);
-            if (Object.hasOwn(preferences, 'mic')) {
-                // for backwards compatibility
-                preferences.microphone = preferences.mic;
-            }
-        }
-        catch {
-            /* assume preferences are empty */
-        }
-    }
-    return preferences;
-};
-const patchLocalDevicePreference = (key, deviceKey, state) => {
-    const preferences = parseLocalDevicePreferences(key);
-    const nextPreference = getSelectedDevicePreference(state.devices, state.selectedDevice);
-    const preferenceHistory = [preferences[deviceKey] ?? []]
-        .flat()
-        .filter((p) => p.selectedDeviceId !== nextPreference.selectedDeviceId &&
-        (p.selectedDeviceLabel === '' ||
-            p.selectedDeviceLabel !== nextPreference.selectedDeviceLabel));
-    window.localStorage.setItem(key, JSON.stringify({
-        ...preferences,
-        mic: undefined, // for backwards compatibility
-        [deviceKey]: [
-            {
-                ...nextPreference,
-                muted: state.isMute,
-            },
-            ...preferenceHistory,
-        ].slice(0, 3),
-    }));
-};
-const applyLocalDevicePreference = async (manager, preference, devices, enabledInCallType) => {
-    let muted;
-    for (const p of preference) {
-        muted ?? (muted = p.muted);
-        if (p.selectedDeviceId === defaultDevice) {
-            break;
-        }
-        const device = devices.find((d) => d.deviceId === p.selectedDeviceId) ??
-            devices.find((d) => d.label === p.selectedDeviceLabel);
-        if (device) {
-            if (!manager.state.selectedDevice) {
-                await manager.select(device.deviceId);
-            }
-            muted = p.muted;
-            break;
-        }
-    }
-    if (typeof muted === 'boolean') {
-        await applyMutedState(manager, muted, enabledInCallType);
-    }
-};
-const applyMutedState = async (manager, muted, enabledInCallType) => {
-    if (enabledInCallType && !manager.state.status) {
-        await manager[muted ? 'disable' : 'enable']?.();
-    }
+        console.warn(`usePersistedDevicePreferences is deprecated. Please use the devicePreferences API of the StreamVideoClient instead.`);
+    }, [key]);
 };
-const getSelectedDevicePreference = (devices, selectedDevice) => ({
-    selectedDeviceId: selectedDevice || defaultDevice,
-    selectedDeviceLabel: devices?.find((d) => d.deviceId === selectedDevice)?.label ?? '',
-});
 
 const SCROLL_THRESHOLD = 10;
 /**
@@ -1532,7 +1347,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.32.3"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.33.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     useEffect(() => {
         const audio = audioElementRef.current;
@@ -2556,6 +2371,9 @@ var Enter = "Enter";
 var Leave = "Leave";
 var Participants = "Participants";
 var Anonymous = ", and ({{ count }}) anonymous";
+var Speaker = "Speaker";
+var Microphone = "Microphone";
+var Backstage = "Backstage";
 var en = {
 	Joining: Joining,
 	Mic: Mic,
@@ -2572,7 +2390,7 @@ var en = {
 	"Background filters performance is degraded. Consider disabling filters for better performance.": "Background filters performance is degraded. Consider disabling filters for better performance.",
 	Live: Live,
 	"Livestream starts soon": "Livestream starts soon",
-	"Livestream starts at {{ startsAt }}": "Livestream starts at {{ startsAt, datetime }}",
+	"Livestream starts at {{ time }}": "Livestream starts at {{ time }}",
 	"{{ count }} participants joined early_one": "{{ count }} participant joined early",
 	"{{ count }} participants joined early_other": "{{ count }} participants joined early",
 	"You can now speak.": "You can now speak.",
@@ -2651,7 +2469,48 @@ var en = {
 	"{{ userName }} is requesting to speak": "{{ userName }} is requesting to speak",
 	"{{ userName }} is requesting to share their camera": "{{ userName }} is requesting to share their camera",
 	"{{ userName }} is requesting to present their screen": "{{ userName }} is requesting to present their screen",
-	"{{ userName }} is requesting permission: {{ permission }}": "{{ userName }} is requesting permission: {{ permission }}"
+	"{{ userName }} is requesting permission: {{ permission }}": "{{ userName }} is requesting permission: {{ permission }}",
+	"Applying...": "Applying...",
+	"Disable blur": "Disable blur",
+	"Blur background": "Blur background",
+	"Migrating...": "Migrating...",
+	"Reconnecting...": "Reconnecting...",
+	"You are offline. Check your internet connection.": "You are offline. Check your internet connection.",
+	"Failed to restore connection. Please try again.": "Failed to restore connection. Please try again.",
+	"Failed to join. Please try again.": "Failed to join. Please try again.",
+	"Set up your call before joining": "Set up your call before joining",
+	"Please grant your browser permission to access your camera and microphone.": "Please grant your browser permission to access your camera and microphone.",
+	"Start call": "Start call",
+	Speaker: Speaker,
+	Microphone: Microphone,
+	Backstage: Backstage,
+	"Go Live": "Go Live",
+	"Stop Live": "End Live",
+	"Enter Backstage": "Enter Backstage",
+	"Prepare your livestream": "Prepare your livestream",
+	"Ready to go live": "Ready to go live",
+	"Stream is ready!": "Stream is ready!",
+	"Waiting for the livestream to start": "Waiting for the livestream to start",
+	"{{ count }} waiting": "{{ count }} waiting",
+	"Join Stream": "Join Stream",
+	"Join automatically when stream starts": "Join automatically when stream starts",
+	"Display name": "Display name",
+	"Permission needed": "Permission needed",
+	"Call ended": "Call ended",
+	"Rejoin call": "Rejoin call",
+	"Left by mistake?": "Left by mistake?",
+	"Help us improve": "Help us improve",
+	"Leave feedback": "Leave feedback",
+	"Failed to rejoin. Please try again.": "Failed to rejoin. Please try again.",
+	"Share your feedback": "Share your feedback",
+	"Tell us about your experience...": "Tell us about your experience...",
+	"Submit feedback": "Submit feedback",
+	"Feedback message": "Feedback message",
+	"How was your call quality?": "How was your call quality?",
+	"Rate {{ count }} star_one": "Rate {{ count }} star",
+	"Rate {{ count }} star_other": "Rate {{ count }} stars",
+	"Thank you!": "Thank you!",
+	"Your feedback helps improve call quality.": "Your feedback helps improve call quality."
 };
 
 const translations = { en };
@@ -2864,7 +2723,12 @@ const BackstageLayout = (props) => {
     const { t } = useI18n();
     return (jsx("div", { className: "str-video__livestream-layout__wrapper", children: jsxs("div", { className: "str-video__livestream-layout__backstage", children: [startsAt && (jsx("span", { className: "str-video__livestream-layout__starts-at", children: startsAt.getTime() < Date.now()
                         ? t('Livestream starts soon')
-                        : t('Livestream starts at {{ startsAt }}', { startsAt }) })), showEarlyParticipantCount && (jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
+                        : t('Livestream starts at {{ time }}', {
+                            time: startsAt.toLocaleTimeString([], {
+                                hour: '2-digit',
+                                minute: '2-digit',
+                            }),
+                        }) })), showEarlyParticipantCount && (jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
                         count: humanizeParticipantCount
                             ? humanize(participantCount)
                             : participantCount,
@@ -2887,12 +2751,13 @@ const ParticipantOverlay = (props) => {
     const { speaker, volume } = useSpeakerState();
     const isSpeakerMuted = volume === 0;
     const { t } = useI18n();
-    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
-                        ? humanize(participantCount)
-                        : participantCount })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), showMuteButton && (jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
-                        'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen &&
-                    participantViewElement &&
-                    typeof participantViewElement.requestFullscreen !== 'undefined' && (jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })) }));
+    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
+                                ? humanize(participantCount)
+                                : participantCount })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' }))] }), jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+                                'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen &&
+                            participantViewElement &&
+                            typeof participantViewElement.requestFullscreen !==
+                                'undefined' && (jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = useCallStateHooks();
@@ -3272,7 +3137,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.32.3").split('.');
+const [major, minor, patch] = ("1.33.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,