@stream-io/video-react-sdk 1.12.10 → 1.13.0

package/dist/src/components/DeviceSettings/DeviceSelector.d.ts

@@ -7,5 +7,4 @@ export declare const DeviceSelector: (props: {
     title?: string;
     onChange?: (deviceId: string) => void;
     visualType?: "list" | "dropdown";
-    placeholder?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Search/SearchResults.d.ts

@@ -11,4 +11,4 @@ export type SearchResultsProps<T> = Pick<SearchController<T>, 'searchResults' |
     /** Component to be displayed while the search query request is in progress */
     LoadingIndicator?: ComponentType;
 };
-export declare const SearchResults: <T extends unknown>({ EmptySearchResultComponent, LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }: SearchResultsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare function SearchResults<T>({ EmptySearchResultComponent, LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }: SearchResultsProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/src/core/hooks/useCalculateHardLimit.d.ts

@@ -1,4 +1,12 @@
-export declare const useCalculateHardLimit: (wrapperElement: HTMLDivElement | null, hostElement: HTMLDivElement | null, limit?: "dynamic" | number) => {
+export declare const useCalculateHardLimit: (
+/**
+ * Element that stretches to 100% of the whole layout component
+ */
+wrapperElement: HTMLDivElement | null, 
+/**
+ * Element that directly hosts individual `ParticipantView` (or wrapper) elements
+ */
+hostElement: HTMLDivElement | null, limit?: "dynamic" | number) => {
     vertical: number | null;
     horizontal: number | null;
 };

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

@@ -1,13 +1,16 @@
 export type LocalDevicePreference = {
     selectedDeviceId: string;
-    muted: boolean;
+    selectedDeviceLabel: string;
+    muted?: boolean;
 };
 export type LocalDevicePreferences = {
-    [type in 'mic' | 'camera' | 'speaker']: LocalDevicePreference;
+    [type in DeviceKey]?: LocalDevicePreference | LocalDevicePreference[];
 };
+type DeviceKey = 'microphone' | 'camera' | 'speaker';
 /**
  * This hook will apply and persist the device preferences from local storage.
  *
  * @param key the key to use for local storage.
  */
 export declare const usePersistedDevicePreferences: (key?: string) => void;
+export {};

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.12.10",
-  "packageManager": "yarn@3.2.4",
+  "version": "1.13.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -31,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@stream-io/video-client": "1.18.6",
+    "@stream-io/video-client": "1.18.8",
     "@stream-io/video-filters-web": "0.1.7",
-    "@stream-io/video-react-bindings": "1.5.8",
+    "@stream-io/video-react-bindings": "1.5.10",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -52,8 +51,8 @@
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rimraf": "^5.0.7",
-    "rollup": "^4.34.7",
-    "typescript": "^5.5.2"
+    "rimraf": "^6.0.1",
+    "rollup": "^4.36.0",
+    "typescript": "^5.8.2"
   }
 }

package/src/components/BackgroundFilters/BackgroundFilters.tsx

@@ -321,8 +321,8 @@ const useRenderer = (tfLite: TFLite) => {
         output,
         stop: () => {
           renderer?.dispose();
-          videoRef.current && (videoRef.current.srcObject = null);
-          outputStream && disposeOfMediaStream(outputStream);
+          if (videoRef.current) videoRef.current.srcObject = null;
+          if (outputStream) disposeOfMediaStream(outputStream);
         },
       };
     },

package/src/components/CallControls/RecordCallButton.tsx

@@ -95,7 +95,7 @@ export const RecordCallConfirmationButton = ({
 
   const title = isAwaitingResponse
     ? t('Waiting for recording to start...')
-    : caption ?? t('Record call');
+    : (caption ?? t('Record call'));
 
   return (
     <Restricted

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -13,8 +13,8 @@ import { Icon } from '../Icon';
 import { WithTooltip } from '../Tooltip';
 import { useState } from 'react';
 import {
-  PropsWithErrorHandler,
   createCallControlHandler,
+  PropsWithErrorHandler,
 } from '../../utilities/callControlHandler';
 
 export type ToggleAudioPreviewButtonProps = PropsWithErrorHandler<
@@ -46,7 +46,7 @@ export const ToggleAudioPreviewButton = (
       title={
         !hasBrowserPermission
           ? t('Check your browser audio permissions')
-          : caption ?? t('Mic')
+          : (caption ?? t('Mic'))
       }
       tooltipDisabled={tooltipDisabled}
     >
@@ -143,7 +143,7 @@ export const ToggleAudioPublishingButton = (
               ? t('You have no permission to share your audio')
               : !hasBrowserPermission
                 ? t('Check your browser mic permissions')
-                : caption ?? t('Mic')
+                : (caption ?? t('Mic'))
           }
           tooltipDisabled={tooltipDisabled}
         >

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -13,8 +13,8 @@ import { Icon } from '../Icon';
 import { WithTooltip } from '../Tooltip';
 import { useState } from 'react';
 import {
-  PropsWithErrorHandler,
   createCallControlHandler,
+  PropsWithErrorHandler,
 } from '../../utilities/callControlHandler';
 
 export type ToggleVideoPreviewButtonProps = PropsWithErrorHandler<
@@ -50,7 +50,7 @@ export const ToggleVideoPreviewButton = (
       title={
         !hasBrowserPermission
           ? t('Check your browser video permissions')
-          : caption ?? t('Video')
+          : (caption ?? t('Video'))
       }
       tooltipDisabled={tooltipDisabled}
     >

package/src/components/DeviceSettings/DeviceSelector.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { ChangeEventHandler, useCallback } from 'react';
 
-import { useDeviceList } from '../../hooks/useDeviceList';
+import { useDeviceList } from '../../hooks';
 import { DropDownSelect, DropDownSelectOption } from '../DropdownSelect';
 import { useMenuContext } from '../Menu';
 
@@ -147,9 +147,8 @@ export const DeviceSelector = (props: {
   title?: string;
   onChange?: (deviceId: string) => void;
   visualType?: 'list' | 'dropdown';
-  placeholder?: string;
 }) => {
-  const { visualType = 'list', icon, placeholder, ...rest } = props;
+  const { visualType = 'list', icon, ...rest } = props;
 
   if (visualType === 'list') {
     return <DeviceSelectorList {...rest} />;

package/src/components/Search/SearchResults.tsx

@@ -18,13 +18,13 @@ export type SearchResultsProps<T> = Pick<
   LoadingIndicator?: ComponentType;
 };
 
-export const SearchResults = <T extends unknown>({
+export function SearchResults<T>({
   EmptySearchResultComponent,
   LoadingIndicator = DefaultLoadingIndicator,
   searchQueryInProgress,
   searchResults,
   SearchResultList,
-}: SearchResultsProps<T>) => {
+}: SearchResultsProps<T>) {
   if (searchQueryInProgress) {
     return (
       <div className="str-video__search-results--loading">
@@ -37,4 +37,4 @@ export const SearchResults = <T extends unknown>({
   }
 
   return <SearchResultList data={searchResults} />;
-};
+}

package/src/core/components/Video/Video.tsx

@@ -196,8 +196,8 @@ export const Video = ({
           }}
         />
       )}
-      {isPiP && (
-        <DefaultPictureInPicturePlaceholder
+      {isPiP && PictureInPicturePlaceholder && (
+        <PictureInPicturePlaceholder
           style={{ position: 'absolute' }}
           participant={participant}
         />

package/src/hooks/usePersistedDevicePreferences.ts

@@ -1,150 +1,206 @@
-import { type MutableRefObject, useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { CallingState } from '@stream-io/video-client';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 export type LocalDevicePreference = {
   selectedDeviceId: string;
-  muted: boolean;
+  selectedDeviceLabel: string;
+  muted?: boolean;
 };
 
 export type LocalDevicePreferences = {
-  [type in 'mic' | 'camera' | 'speaker']: LocalDevicePreference;
+  // Array is preference history with latest preferences first.
+  // Single preference still acceptable for backwards compatibility.
+  [type in DeviceKey]?: LocalDevicePreference | LocalDevicePreference[];
 };
 
+type DeviceKey = 'microphone' | 'camera' | 'speaker';
+
+type DeviceState<K extends DeviceKey> = {
+  [ManagerKey in K]: DeviceManagerLike;
+} & {
+  isMute?: boolean;
+  devices: MediaDeviceInfo[];
+  selectedDevice: string | undefined;
+};
+
+interface DeviceManagerLike {
+  state: { selectedDevice: string | undefined };
+  select(deviceId: string): Promise<void> | void;
+}
+
 const defaultDevice = 'default';
 
 /**
- * This hook will persist the device settings to local storage.
+ * This hook will apply and persist the device preferences from local storage.
  *
  * @param key the key to use for local storage.
  */
-const usePersistDevicePreferences = (
-  key: string,
-  shouldPersistRef: MutableRefObject<boolean>,
-) => {
-  const { useMicrophoneState, useCameraState, useSpeakerState } =
+export const usePersistedDevicePreferences = (
+  key: string = '@stream-io/device-preferences',
+): void => {
+  const { useCameraState, useMicrophoneState, useSpeakerState } =
     useCallStateHooks();
-  const call = useCall();
-  const mic = useMicrophoneState();
-  const camera = useCameraState();
-  const speaker = useSpeakerState();
-  useEffect(() => {
-    if (!shouldPersistRef.current) return;
-    if (!call) return;
-    if (call.state.callingState === CallingState.LEFT) return;
-    try {
-      const preferences: LocalDevicePreferences = {
-        mic: {
-          selectedDeviceId: mic.selectedDevice || defaultDevice,
-          muted: mic.isMute,
-        },
-        camera: {
-          selectedDeviceId: camera.selectedDevice || defaultDevice,
-          muted: camera.isMute,
-        },
-        speaker: {
-          selectedDeviceId: speaker.selectedDevice || defaultDevice,
-          muted: false,
-        },
-      };
-      window.localStorage.setItem(key, JSON.stringify(preferences));
-    } catch (err) {
-      console.warn('Failed to save device preferences', err);
-    }
-  }, [
-    call,
-    camera.isMute,
-    camera.selectedDevice,
-    key,
-    mic.isMute,
-    mic.selectedDevice,
-    speaker.selectedDevice,
-    shouldPersistRef,
-  ]);
+  usePersistedDevicePreference(key, 'camera', useCameraState());
+  usePersistedDevicePreference(key, 'microphone', useMicrophoneState());
+  usePersistedDevicePreference(key, 'speaker', useSpeakerState());
 };
 
-/**
- * This hook will apply the device settings from local storage.
- *
- * @param key the key to use for local storage.
- */
-const useApplyDevicePreferences = (key: string, onApplied: () => void) => {
-  const call = useCall();
-  const onAppliedRef = useRef(onApplied);
-  onAppliedRef.current = onApplied;
-  useEffect(() => {
-    if (!call) return;
-    if (call.state.callingState === CallingState.LEFT) return;
-
-    let cancel = false;
-
-    const apply = async () => {
-      const initMic = async (setting: LocalDevicePreference) => {
-        if (cancel) return;
-        await call.microphone.select(parseDeviceId(setting.selectedDeviceId));
-        if (cancel) return;
-        if (setting.muted) {
-          await call.microphone.disable();
-        } else {
-          await call.microphone.enable();
-        }
-      };
-
-      const initCamera = async (setting: LocalDevicePreference) => {
-        if (cancel) return;
-        await call.camera.select(parseDeviceId(setting.selectedDeviceId));
-        if (cancel) return;
-        if (setting.muted) {
-          await call.camera.disable();
-        } else {
-          await call.camera.enable();
-        }
-      };
-
-      const initSpeaker = (setting: LocalDevicePreference) => {
-        if (cancel) return;
-        call.speaker.select(parseDeviceId(setting.selectedDeviceId) ?? '');
-      };
-
-      let preferences: LocalDevicePreferences | null = null;
+const usePersistedDevicePreference = <K extends DeviceKey>(
+  key: string,
+  deviceKey: K,
+  state: DeviceState<K>,
+): 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 ||
+        applyingState !== 'idle'
+      ) {
+        return;
+      }
+
+      const preferences = parseLocalDevicePreferences(key);
+      const preference = preferences[deviceKey];
+
+      setApplyingState('applying');
+
+      if (preference && !manager.state.selectedDevice) {
+        selectDevice(manager, [preference].flat(), state.devices)
+          .catch((err) => {
+            console.warn(`Failed to save ${deviceKey} device preferences`, err);
+          })
+          .finally(() => setApplyingState('applied'));
+      } else {
+        setApplyingState('applied');
+      }
+    },
+    [applyingState, callingState, deviceKey, key, manager, state.devices],
+  );
+
+  useEffect(
+    function persist() {
+      if (
+        callingState === CallingState.LEFT ||
+        !state.devices?.length ||
+        applyingState !== 'applied'
+      ) {
+        return;
+      }
+
       try {
-        preferences = JSON.parse(
-          window.localStorage.getItem(key)!,
-        ) as LocalDevicePreferences;
+        patchLocalDevicePreference(key, deviceKey, {
+          devices: state.devices,
+          selectedDevice: state.selectedDevice,
+          isMute: state.isMute,
+        });
       } catch (err) {
-        console.warn('Failed to load device preferences', err);
+        console.warn(`Failed to save ${deviceKey} device preferences`, err);
       }
-      if (preferences) {
-        await initMic(preferences.mic);
-        await initCamera(preferences.camera);
-        initSpeaker(preferences.speaker);
+    },
+    [
+      applyingState,
+      callingState,
+      deviceKey,
+      key,
+      state.devices,
+      state.isMute,
+      state.selectedDevice,
+    ],
+  );
+};
+
+const parseLocalDevicePreferences = (key: string): LocalDevicePreferences => {
+  const preferencesStr = window.localStorage.getItem(key);
+  let preferences: LocalDevicePreferences = {};
+
+  if (preferencesStr) {
+    try {
+      preferences = JSON.parse(preferencesStr);
+
+      if (Object.hasOwn(preferences, 'mic')) {
+        // for backwards compatibility
+        preferences.microphone = (
+          preferences as { mic: LocalDevicePreference }
+        ).mic;
       }
-    };
-
-    apply()
-      .then(() => onAppliedRef.current())
-      .catch((err) => {
-        console.warn('Failed to apply device preferences', err);
-      });
-
-    return () => {
-      cancel = true;
-    };
-  }, [call, key]);
+    } catch {
+      /* assume preferences are empty */
+    }
+  }
+
+  return preferences;
 };
 
-/**
- * This hook will apply and persist the device preferences from local storage.
- *
- * @param key the key to use for local storage.
- */
-export const usePersistedDevicePreferences = (
-  key: string = '@stream-io/device-preferences',
-) => {
-  const shouldPersistRef = useRef(false);
-  useApplyDevicePreferences(key, () => (shouldPersistRef.current = true));
-  usePersistDevicePreferences(key, shouldPersistRef);
+const patchLocalDevicePreference = (
+  key: string,
+  deviceKey: DeviceKey,
+  state: Pick<DeviceState<never>, 'devices' | 'selectedDevice' | 'isMute'>,
+): void => {
+  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,
+        } satisfies LocalDevicePreference,
+        ...preferenceHistory,
+      ].slice(0, 3),
+    }),
+  );
+};
+
+const selectDevice = async (
+  manager: DeviceManagerLike,
+  preference: LocalDevicePreference[],
+  devices: MediaDeviceInfo[],
+): Promise<void> => {
+  for (const p of preference) {
+    if (p.selectedDeviceId === defaultDevice) {
+      return;
+    }
+
+    const device =
+      devices.find((d) => d.deviceId === p.selectedDeviceId) ??
+      devices.find((d) => d.label === p.selectedDeviceLabel);
+
+    if (device) {
+      await manager.select(device.deviceId);
+      return;
+    }
+  }
 };
 
-const parseDeviceId = (deviceId: string) =>
-  deviceId !== defaultDevice ? deviceId : undefined;
+const getSelectedDevicePreference = (
+  devices: MediaDeviceInfo[],
+  selectedDevice: string | undefined,
+): Pick<LocalDevicePreference, 'selectedDeviceId' | 'selectedDeviceLabel'> => ({
+  selectedDeviceId: selectedDevice || defaultDevice,
+  selectedDeviceLabel:
+    devices?.find((d) => d.deviceId === selectedDevice)?.label ?? '',
+});

package/src/utilities/filter.ts

@@ -45,7 +45,7 @@ function checkConditions<T>(obj: T, conditions: Conditions<T>): boolean {
   for (const key of Object.keys(conditions) as Array<keyof T>) {
     const operator = conditions[key];
     const maybeOperator = operator && typeof operator === 'object';
-    let value = obj[key];
+    const value = obj[key];
 
     if (maybeOperator && '$eq' in operator) {
       const eqOperator = operator as EqOperator<typeof value>;