@stream-io/video-react-sdk 1.17.1 → 1.18.0

package/dist/index.cjs.js

@@ -80,75 +80,189 @@ const defaultDevice = 'default';
  * @param key the key to use for local storage.
  */
 const usePersistedDevicePreferences = (key = '@stream-io/device-preferences') => {
-    const { useCallSettings, useCameraState, useMicrophoneState, useSpeakerState, } = videoReactBindings.useCallStateHooks();
+    const { useCallSettings, useCallCallingState, useMicrophoneState, useCameraState, useSpeakerState, } = videoReactBindings.useCallStateHooks();
     const settings = useCallSettings();
-    usePersistedDevicePreference(key, 'camera', useCameraState(), settings ? !settings.video.camera_default_on : undefined);
-    usePersistedDevicePreference(key, 'microphone', useMicrophoneState(), settings ? !settings.audio.mic_default_on : undefined);
-    usePersistedDevicePreference(key, 'speaker', useSpeakerState(), false);
-};
-const usePersistedDevicePreference = (key, deviceKey, state, defaultMuted) => {
-    const { useCallCallingState } = videoReactBindings.useCallStateHooks();
     const callingState = useCallCallingState();
+    const microphoneState = useMicrophoneState();
+    const cameraState = useCameraState();
+    const speakerState = useSpeakerState();
     const [applyingState, setApplyingState] = react.useState('idle');
-    const manager = state[deviceKey];
     react.useEffect(function apply() {
         if (callingState === videoClient.CallingState.LEFT ||
-            !state.devices?.length ||
-            typeof defaultMuted !== 'boolean' ||
+            !microphoneState.devices.length ||
+            !cameraState.devices.length ||
+            !speakerState.devices ||
+            !settings ||
             applyingState !== 'idle') {
             return;
         }
-        const preferences = parseLocalDevicePreferences(key);
-        const preference = preferences[deviceKey];
         setApplyingState('applying');
-        if (!manager.state.selectedDevice) {
-            const applyPromise = preference
-                ? applyLocalDevicePreference(manager, [preference].flat(), state.devices)
-                : applyMutedState(manager, defaultMuted);
-            applyPromise
-                .catch((err) => {
-                console.warn(`Failed to apply ${deviceKey} device preferences`, err);
-            })
-                .finally(() => setApplyingState('applied'));
-        }
-        else {
-            setApplyingState('applied');
-        }
+        (async () => {
+            for (const [deviceKey, state, defaultMuted] of [
+                ['microphone', microphoneState, !settings.audio.mic_default_on],
+                ['camera', cameraState, !settings.video.camera_default_on],
+                ['speaker', speakerState, false],
+            ]) {
+                const preferences = parseLocalDevicePreferences(key);
+                const preference = preferences[deviceKey];
+                const manager = state[deviceKey];
+                if (!manager.state.selectedDevice) {
+                    const applyPromise = preference
+                        ? applyLocalDevicePreference(manager, [preference].flat(), state.devices)
+                        : applyMutedState(manager, defaultMuted);
+                    await applyPromise.catch((err) => {
+                        console.warn(`Failed to apply ${deviceKey} device preferences`, err);
+                    });
+                }
+            }
+        })().finally(() => setApplyingState((state) => (state === 'applying' ? 'applied' : state)));
     }, [
         applyingState,
         callingState,
-        defaultMuted,
-        deviceKey,
+        cameraState,
+        cameraState.devices,
         key,
-        manager,
-        state.devices,
+        microphoneState,
+        microphoneState.devices,
+        settings,
+        speakerState,
+        speakerState.devices,
     ]);
     react.useEffect(function persist() {
-        if (callingState === videoClient.CallingState.LEFT ||
-            !state.devices?.length ||
-            applyingState !== 'applied') {
+        if (callingState === videoClient.CallingState.LEFT || applyingState !== 'applied') {
             return;
         }
-        try {
-            patchLocalDevicePreference(key, deviceKey, {
-                devices: state.devices,
-                selectedDevice: state.selectedDevice,
-                isMute: state.isMute,
-            });
-        }
-        catch (err) {
-            console.warn(`Failed to save ${deviceKey} device preferences`, err);
+        for (const [deviceKey, devices, selectedDevice, isMute] of [
+            [
+                'camera',
+                cameraState.devices,
+                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,
-        deviceKey,
+        cameraState.devices,
+        cameraState.isMute,
+        cameraState.selectedDevice,
         key,
-        state.devices,
-        state.isMute,
-        state.selectedDevice,
+        microphoneState.devices,
+        microphoneState.isMute,
+        microphoneState.selectedDevice,
+        speakerState.devices,
+        speakerState.isMute,
+        speakerState.selectedDevice,
     ]);
 };
+// const usePersistedDevicePreference = <K extends DeviceKey>(
+//   key: string,
+//   deviceKey: K,
+//   state: DeviceState<K>,
+//   defaultMuted?: boolean,
+// ): void => {
+//   const { useCallCallingState } = useCallStateHooks();
+//   const callingState = useCallCallingState();
+//   const [applyingState, setApplyingState] = useState<
+//     'idle' | 'applying' | 'applied'
+//   >('idle');
+//   const manager = state[deviceKey];
+//   useEffect(
+//     function apply() {
+//       if (
+//         callingState === CallingState.LEFT ||
+//         !state.devices?.length ||
+//         typeof defaultMuted !== 'boolean' ||
+//         applyingState !== 'idle'
+//       ) {
+//         return;
+//       }
+//       const preferences = parseLocalDevicePreferences(key);
+//       const preference = preferences[deviceKey];
+//       setApplyingState('applying');
+//       if (!manager.state.selectedDevice) {
+//         const applyPromise = preference
+//           ? applyLocalDevicePreference(
+//               manager,
+//               [preference].flat(),
+//               state.devices,
+//             )
+//           : applyMutedState(manager, defaultMuted);
+//         applyPromise
+//           .catch((err) => {
+//             console.warn(
+//               `Failed to apply ${deviceKey} device preferences`,
+//               err,
+//             );
+//           })
+//           .finally(() => setApplyingState('applied'));
+//       } else {
+//         setApplyingState('applied');
+//       }
+//     },
+//     [
+//       applyingState,
+//       callingState,
+//       defaultMuted,
+//       deviceKey,
+//       key,
+//       manager,
+//       state.devices,
+//     ],
+//   );
+//   useEffect(
+//     function persist() {
+//       if (
+//         callingState === CallingState.LEFT ||
+//         !state.devices?.length ||
+//         applyingState !== 'applied'
+//       ) {
+//         return;
+//       }
+//       try {
+//         patchLocalDevicePreference(key, deviceKey, {
+//           devices: state.devices,
+//           selectedDevice: state.selectedDevice,
+//           isMute: state.isMute,
+//         });
+//       } catch (err) {
+//         console.warn(`Failed to save ${deviceKey} device preferences`, err);
+//       }
+//     },
+//     [
+//       applyingState,
+//       callingState,
+//       deviceKey,
+//       key,
+//       state.devices,
+//       state.isMute,
+//       state.selectedDevice,
+//     ],
+//   );
+// };
 const parseLocalDevicePreferences = (key) => {
     const preferencesStr = window.localStorage.getItem(key);
     let preferences = {};
@@ -2228,6 +2342,10 @@ var en = {
 	Video: Video,
 	"You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
 	Live: Live,
+	"Livestream starts soon": "Livestream starts soon",
+	"Livestream starts at {{ startsAt }}": "Livestream starts at {{ startsAt, datetime }}",
+	"{{ 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.",
 	"Awaiting for an approval to speak.": "Awaiting for an approval to speak.",
 	"You can no longer speak.": "You can no longer speak.",
@@ -2445,18 +2563,32 @@ const LivestreamLayout = (props) => {
         ? participants.find(videoClient.hasScreenShare)
         : undefined;
     usePaginatedLayoutSortPreset(call);
-    const Overlay = (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName }));
+    const overlay = (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName }));
     const { floatingParticipantProps, muted } = props;
-    const FloatingParticipantOverlay = hasOngoingScreenShare && (jsxRuntime.jsx(ParticipantOverlay
+    const floatingParticipantOverlay = hasOngoingScreenShare && (jsxRuntime.jsx(ParticipantOverlay
     // these elements aren't needed for the video feed
     , { 
         // these elements aren't needed for the video feed
         showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true }));
-    return (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsxRuntime.jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: Overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
+    return (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsxRuntime.jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
                 : true })), currentSpeaker && (jsxRuntime.jsx(ParticipantView, { className: clsx(hasOngoingScreenShare &&
-                    clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: FloatingParticipantOverlay || Overlay, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
+                    clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: floatingParticipantOverlay || overlay, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
                 : true }))] }));
 };
+LivestreamLayout.displayName = 'LivestreamLayout';
+const BackstageLayout = (props) => {
+    const { showEarlyParticipantCount = true } = props;
+    const { useParticipantCount, useCallStartsAt } = videoReactBindings.useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const startsAt = useCallStartsAt();
+    const { t } = videoReactBindings.useI18n();
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__wrapper", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__backstage", children: [startsAt && (jsxRuntime.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 && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
+                        count: participantCount,
+                    }) }))] }) }));
+};
+BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props) => {
     const { enableFullScreen = true, showParticipantCount = true, showDuration = true, showLiveBadge = true, showSpeakerName = false, } = props;
     const { participant } = useParticipantViewContext();
@@ -2467,7 +2599,6 @@ const ParticipantOverlay = (props) => {
     const { t } = videoReactBindings.useI18n();
     return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] }) }));
 };
-LivestreamLayout.displayName = 'LivestreamLayout';
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
     const isCallLive = useIsCallLive();
@@ -2709,17 +2840,30 @@ const Host = () => {
 Host.displayName = 'PipLayout.Host';
 const PipLayout = { Pip, Host };
 
+function useEffectEvent(cb) {
+    const cbRef = react.useRef(undefined);
+    react.useLayoutEffect(() => {
+        cbRef.current = cb;
+    }, [cb]);
+    return react.useCallback((...args) => {
+        const callback = cbRef.current;
+        callback?.(...args);
+    }, []);
+}
+
 const LivestreamPlayer = (props) => {
-    const { callType, callId, layoutProps } = props;
+    const { callType, callId, ...restProps } = props;
     const client = videoReactBindings.useStreamVideoClient();
     const [call, setCall] = react.useState();
+    const onError = useEffectEvent(props.onError);
     react.useEffect(() => {
         if (!client)
             return;
         const myCall = client.call(callType, callId);
         setCall(myCall);
-        myCall.join().catch((e) => {
-            console.error('Failed to join call', e);
+        myCall.get().catch((e) => {
+            console.error('Failed to fetch call', e);
+            onError(e);
         });
         return () => {
             myCall.leave().catch((e) => {
@@ -2727,13 +2871,67 @@ const LivestreamPlayer = (props) => {
             });
             setCall(undefined);
         };
-    }, [callId, callType, client]);
+    }, [callId, callType, client, onError]);
+    if (!call) {
+        return null;
+    }
+    return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamCall, { ...restProps }) }));
+};
+const LivestreamCall = (props) => {
+    const call = useLivestreamCall(props);
+    const { useIsCallLive } = videoReactBindings.useCallStateHooks();
+    const isLive = useIsCallLive();
     if (!call)
         return null;
-    return (jsxRuntime.jsx(StreamCall, { call: call, children: jsxRuntime.jsx(LivestreamLayout, { ...layoutProps }) }));
+    if (isLive) {
+        return jsxRuntime.jsx(LivestreamLayout, { ...props.layoutProps });
+    }
+    return jsxRuntime.jsx(BackstageLayout, { ...props.backstageProps });
+};
+const useLivestreamCall = (props) => {
+    const call = videoReactBindings.useCall();
+    const { useIsCallLive, useOwnCapabilities } = videoReactBindings.useCallStateHooks();
+    const canJoinLive = useIsCallLive();
+    const canJoinEarly = useCanJoinEearly();
+    const canJoinBackstage = useOwnCapabilities()?.includes('join-backstage') ?? false;
+    const canJoinAsap = canJoinLive || canJoinEarly || canJoinBackstage;
+    const joinBehavior = props.joinBehavior ?? 'asap';
+    const canJoin = (joinBehavior === 'asap' && canJoinAsap) ||
+        (joinBehavior === 'live' && canJoinLive);
+    const onError = useEffectEvent(props.onError);
+    react.useEffect(() => {
+        if (call && call.state.callingState === videoClient.CallingState.IDLE && canJoin) {
+            call.join().catch((e) => {
+                console.error('Failed to join call', e);
+                onError(e);
+            });
+        }
+    }, [call, canJoin, onError]);
+    return call;
+};
+const useCanJoinEearly = () => {
+    const { useCallStartsAt, useCallSettings } = videoReactBindings.useCallStateHooks();
+    const startsAt = useCallStartsAt();
+    const settings = useCallSettings();
+    const joinAheadTimeSeconds = settings?.backstage.join_ahead_time_seconds;
+    const [canJoinEarly, setCanJoinEearly] = react.useState(() => checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+    react.useEffect(() => {
+        if (!canJoinEarly) {
+            const handle = setInterval(() => {
+                setCanJoinEearly(checkCanJoinEarly(startsAt, joinAheadTimeSeconds));
+            }, 1000);
+            return () => clearInterval(handle);
+        }
+    }, [canJoinEarly, startsAt, joinAheadTimeSeconds]);
+};
+const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
+    if (!startsAt) {
+        return false;
+    }
+    return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.17.1").split('.');
+const [major, minor, patch] = ("1.18.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -2746,6 +2944,7 @@ exports.Audio = Audio;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.BackgroundFiltersProvider = BackgroundFiltersProvider;
+exports.BackstageLayout = BackstageLayout;
 exports.BaseVideo = BaseVideo;
 exports.CallControls = CallControls;
 exports.CallParticipantListing = CallParticipantListing;