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

package/dist/src/core/components/CallLayout/LivestreamLayout.d.ts

@@ -45,3 +45,17 @@ export declare const LivestreamLayout: {
     (props: LivestreamLayoutProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * The props for the {@link LivestreamLayout} component.
+ */
+export type BackstageLayoutProps = {
+    /**
+     * Whether to show the counter for participants that joined before
+     * the livestream went live. Defaults to `true`.
+     */
+    showEarlyParticipantCount?: boolean;
+};
+export declare const BackstageLayout: {
+    (props: BackstageLayoutProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/hooks/useEffectEvent.d.ts

@@ -0,0 +1 @@
+export declare function useEffectEvent<P extends unknown[]>(cb: ((...args: P) => void) | undefined): (...args: P) => void;

package/dist/src/translations/index.d.ts

@@ -13,6 +13,10 @@ export declare const translations: {
         Video: string;
         "You are muted. Unmute to speak.": string;
         Live: string;
+        "Livestream starts soon": string;
+        "Livestream starts at {{ startsAt }}": string;
+        "{{ count }} participants joined early_one": string;
+        "{{ count }} participants joined early_other": string;
         "You can now speak.": string;
         "Awaiting for an approval to speak.": string;
         "You can no longer speak.": string;

package/dist/src/wrappers/LivestreamPlayer/LivestreamPlayer.d.ts

@@ -1,4 +1,4 @@
-import { LivestreamLayoutProps } from '../../core';
+import { BackstageLayoutProps, LivestreamLayoutProps } from '../../core';
 export type LivestreamPlayerProps = {
     /**
      * The call type. Usually `livestream`.
@@ -8,9 +8,29 @@ export type LivestreamPlayerProps = {
      * The call ID.
      */
     callId: string;
+    /**
+     * Determines when the viewer joins the call.
+     *
+     * `"asap"` behavior means joining the call as soon as it is possible
+     * (either the `join_ahead_time_seconds` setting allows it, or the user
+     * has a the capability to join backstage).
+     *
+     * `"live"` behavior means joining the call when it goes live.
+     *
+     * @default "asap"
+     */
+    joinBehavior?: 'asap' | 'live';
     /**
      * The props for the {@link LivestreamLayout} component.
      */
     layoutProps?: LivestreamLayoutProps;
+    /**
+     * The props for the {@link BackstageLayout} component.
+     */
+    backstageProps?: BackstageLayoutProps;
+    /**
+     * Callback to handle errors while fetching or joining livestream.
+     */
+    onError?: (error: any) => void;
 };
 export declare const LivestreamPlayer: (props: LivestreamPlayerProps) => import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.23.0",
+    "@stream-io/video-client": "1.23.2",
     "@stream-io/video-filters-web": "0.2.1",
-    "@stream-io/video-react-bindings": "1.6.3",
+    "@stream-io/video-react-bindings": "1.6.5",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -46,7 +46,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
     "@stream-io/audio-filters-web": "^0.4.0",
-    "@stream-io/video-styling": "^1.1.5",
+    "@stream-io/video-styling": "^1.2.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "react": "19.0.0",

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -75,7 +75,7 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
 
   usePaginatedLayoutSortPreset(call);
 
-  const Overlay = (
+  const overlay = (
     <ParticipantOverlay
       showParticipantCount={props.showParticipantCount}
       showDuration={props.showDuration}
@@ -85,7 +85,7 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
   );
 
   const { floatingParticipantProps, muted } = props;
-  const FloatingParticipantOverlay = hasOngoingScreenShare && (
+  const floatingParticipantOverlay = hasOngoingScreenShare && (
     <ParticipantOverlay
       // these elements aren't needed for the video feed
       showParticipantCount={
@@ -104,7 +104,7 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
         <ParticipantView
           className="str-video__livestream-layout__screen-share"
           participant={presenter}
-          ParticipantViewUI={Overlay}
+          ParticipantViewUI={overlay}
           trackType="screenShareTrack"
           muteAudio // audio is rendered by ParticipantsAudio
         />
@@ -121,7 +121,7 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
               ),
           )}
           participant={currentSpeaker}
-          ParticipantViewUI={FloatingParticipantOverlay || Overlay}
+          ParticipantViewUI={floatingParticipantOverlay || overlay}
           mirror={
             props.mirrorLocalParticipantVideo !== false ? undefined : false
           }
@@ -132,6 +132,50 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
   );
 };
 
+LivestreamLayout.displayName = 'LivestreamLayout';
+
+/**
+ * The props for the {@link LivestreamLayout} component.
+ */
+export type BackstageLayoutProps = {
+  /**
+   * Whether to show the counter for participants that joined before
+   * the livestream went live. Defaults to `true`.
+   */
+  showEarlyParticipantCount?: boolean;
+};
+
+export const BackstageLayout = (props: BackstageLayoutProps) => {
+  const { showEarlyParticipantCount = true } = props;
+  const { useParticipantCount, useCallStartsAt } = useCallStateHooks();
+  const participantCount = useParticipantCount();
+  const startsAt = useCallStartsAt();
+  const { t } = useI18n();
+
+  return (
+    <div className="str-video__livestream-layout__wrapper">
+      <div className="str-video__livestream-layout__backstage">
+        {startsAt && (
+          <span className="str-video__livestream-layout__starts-at">
+            {startsAt.getTime() < Date.now()
+              ? t('Livestream starts soon')
+              : t('Livestream starts at {{ startsAt }}', { startsAt })}
+          </span>
+        )}
+        {showEarlyParticipantCount && (
+          <span className="str-video__livestream-layout__early-viewers-count">
+            {t('{{ count }} participants joined early', {
+              count: participantCount,
+            })}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+BackstageLayout.displayName = 'BackstageLayout';
+
 const ParticipantOverlay = (props: {
   enableFullScreen?: boolean;
   showParticipantCount?: boolean;
@@ -189,8 +233,6 @@ const ParticipantOverlay = (props: {
   );
 };
 
-LivestreamLayout.displayName = 'LivestreamLayout';
-
 const useUpdateCallDuration = () => {
   const { useIsCallLive, useCallSession } = useCallStateHooks();
   const isCallLive = useIsCallLive();

package/src/hooks/useEffectEvent.ts

@@ -0,0 +1,16 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+
+export function useEffectEvent<P extends unknown[]>(
+  cb: ((...args: P) => void) | undefined,
+): (...args: P) => void {
+  const cbRef = useRef<((...args: P) => void) | undefined>(undefined);
+
+  useLayoutEffect(() => {
+    cbRef.current = cb;
+  }, [cb]);
+
+  return useCallback((...args: P) => {
+    const callback = cbRef.current;
+    callback?.(...args);
+  }, []);
+}

package/src/hooks/usePersistedDevicePreferences.ts

@@ -43,122 +43,231 @@ export const usePersistedDevicePreferences = (
 ): void => {
   const {
     useCallSettings,
-    useCameraState,
+    useCallCallingState,
     useMicrophoneState,
+    useCameraState,
     useSpeakerState,
   } = useCallStateHooks();
   const settings = useCallSettings();
+  const callingState = useCallCallingState();
 
-  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 microphoneState: DeviceState<'microphone'> = useMicrophoneState();
+  const cameraState: DeviceState<'camera'> = useCameraState();
+  const speakerState: DeviceState<'speaker'> = useSpeakerState();
 
-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' ||
+        !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],
+        ] as const) {
+          const preferences = parseLocalDevicePreferences(key);
+          const preference = preferences[deviceKey];
+          const manager = (
+            state as DeviceState<'camera' | 'microphone' | 'speaker'>
+          )[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,
     ],
   );
 
   useEffect(
     function persist() {
-      if (
-        callingState === CallingState.LEFT ||
-        !state.devices?.length ||
-        applyingState !== 'applied'
-      ) {
+      if (callingState === 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,
+        ],
+      ] as const) {
+        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: string): LocalDevicePreferences => {
   const preferencesStr = window.localStorage.getItem(key);
   let preferences: LocalDevicePreferences = {};

package/src/translations/en.json

@@ -13,6 +13,10 @@
   "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.",