@stream-io/video-react-bindings 1.6.7 → 1.7.0

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

@@ -1,26 +1,18 @@
 import { CallClosedCaption, CallIngressResponse, CallSessionResponse, CallSettingsResponse, CallState, CallStatsReport, Comparator, EgressResponse, InputDeviceStatus, MemberResponse, OwnCapability, StreamVideoParticipant, UserResponse } from '@stream-io/video-client';
 /**
  * Utility hook, which provides the current call's state.
- *
- * @category Call State
  */
 export declare const useCallState: () => CallState;
 /**
  * Utility hook which provides information whether the current call is being recorded. It will return `true` if the call is being recorded.
- *
- * @category Call State
  */
 export declare const useIsCallRecordingInProgress: () => boolean;
 /**
  * Utility hook which provides information whether the current call is broadcasting.
- *
- * @category Call State
  */
 export declare const useIsCallHLSBroadcastingInProgress: () => boolean;
 /**
  * Utility hook which provides information whether the current call is live.
- *
- * @category Call State
  */
 export declare const useIsCallLive: () => boolean;
 /**
@@ -78,8 +70,6 @@ export declare const useCallEndedBy: () => UserResponse | undefined;
 /**
  * Utility hook which provides a boolean indicating whether there is
  * a participant in the current call which shares their screen.
- *
- * @category Call State
  */
 export declare const useHasOngoingScreenShare: () => boolean;
 /**
@@ -91,40 +81,28 @@ export declare const useHasOngoingScreenShare: () => boolean;
  *
  * Consumers of this observable can implement their own batching logic
  * in case they want to show historical stats data.
- *
- * @category Call State
  */
 export declare const useCallStatsReport: () => CallStatsReport | undefined;
 /**
  * Utility hook which provides the dominant speaker of the current call.
- *
- * @category Call State
  */
 export declare const useDominantSpeaker: () => StreamVideoParticipant | undefined;
 /**
  * Utility hook which provides a list of call members.
- *
- * @category Call State
  */
 export declare const useCallMembers: () => MemberResponse[];
 /**
  * Utility hook providing the current calling state of the call. For example, `RINGING` or `JOINED`.
- *
- * @category Call State
  */
 export declare const useCallCallingState: () => import("@stream-io/video-client").CallingState;
 /**
  * Utility hook providing the actual start time of the current session.
  * Useful for calculating the call duration.
- *
- * @category Call State
  */
 export declare const useCallStartedAt: () => Date | undefined;
 /**
  * A hook which provides a list of all participants that have joined an active call.
  *
- * @category Call State
- *
  * @param options.sortBy - A comparator function to sort the participants by.
  * Make sure to memoize output of the `combineComparators` function
  * (or keep it out of component's scope if possible) before passing it down to this property.
@@ -147,28 +125,20 @@ export declare const useRawParticipants: () => StreamVideoParticipant[];
 /**
  * A hook which provides a StreamVideoLocalParticipant object.
  * It signals that I have joined a call.
- *
- * @category Call State
  */
 export declare const useLocalParticipant: () => StreamVideoParticipant | undefined;
 /**
  * A hook which provides a list of all other participants than me that have joined an active call.
- *
- * @category Call State
  */
 export declare const useRemoteParticipants: () => StreamVideoParticipant[];
 /**
  * Returns the approximate participant count of the active call.
  * This includes the anonymous users as well, and it is computed on the server.
- *
- * @category Call State
  */
 export declare const useParticipantCount: () => number;
 /**
  * Returns the approximate anonymous participant count of the active call.
  * The regular participants are not included in this count. It is computed on the server.
- *
- * @category Call State
  */
 export declare const useAnonymousParticipantCount: () => number;
 /**
@@ -187,9 +157,6 @@ export declare const useOwnCapabilities: () => OwnCapability[] | undefined;
 export declare const useHasPermissions: (...permissions: OwnCapability[]) => boolean;
 /**
  * Returns the camera state of the current call.
- *
- * @category Camera Manager State
- *
  */
 export declare const useCameraState: () => {
     status: InputDeviceStatus;
@@ -208,8 +175,6 @@ export declare const useCameraState: () => {
 };
 /**
  * Returns the microphone state of the current call.
- *
- * @category Microphone Manager State
  */
 export declare const useMicrophoneState: () => {
     status: InputDeviceStatus;

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

@@ -4,7 +4,5 @@ export * from './store';
 export * from './callUtilHooks';
 /**
  * A hook-alike function that exposes all call state hooks.
- *
- * @category Call State
  */
 export declare const useCallStateHooks: () => typeof CallStateHooks;

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

@@ -6,13 +6,9 @@ export declare const useStore: () => import("@stream-io/video-client").StreamVid
  * Utility hook which provides a list of all notifications about created calls.
  * In the ring call settings, these calls can be outgoing (I have called somebody)
  * or incoming (somebody has called me).
- *
- * @category Client State
  */
 export declare const useCalls: () => import("@stream-io/video-client").Call[];
 /**
  * Returns the current connected user.
- *
- * @category Client State
  */
 export declare const useConnectedUser: () => import("@stream-io/video-client").OwnUserResponse | undefined;

package/dist/src/i18n/StreamI18n.d.ts

@@ -1,4 +1,4 @@
-import { TranslationLanguage, TranslationSheet, TranslationsMap, TranslatorFunction } from './types';
+import { TranslationLanguage, TranslationsMap, TranslatorFunction } from './types';
 export declare const defaultTranslationFunction: (key: string) => string;
 export type StreamI18nConstructor = {
     /** Language into which the provided strings are translated */
@@ -15,15 +15,9 @@ export declare class StreamI18n {
     i18nInstance: import("i18next").i18n;
     /** Translator function that converts the provided string into its equivalent in the current language. */
     t: TranslatorFunction;
-    /** Simple logger function */
-    constructor(options?: StreamI18nConstructor);
+    constructor({ debug, currentLanguage, fallbackLanguage, translationsOverrides, }?: StreamI18nConstructor);
     get currentLanguage(): string;
     get isInitialized(): boolean;
-    init: () => Promise<this>;
-    changeLanguage: (language?: TranslationLanguage, onChange?: (language: TranslationLanguage) => void) => Promise<void>;
-    registerTranslationsForLanguage: ({ lng, translations, }: {
-        lng: TranslationLanguage;
-        translations: TranslationSheet;
-    }) => void;
-    private _checkIsInitialized;
+    init: () => Promise<TranslatorFunction>;
+    changeLanguage: (language?: TranslationLanguage) => Promise<TranslatorFunction>;
 }

package/dist/src/i18n/types.d.ts

@@ -1,7 +1,6 @@
-export type TranslationLanguage = 'en' | string;
-export type Namespace = string;
+export type TranslationLanguage = 'en' | (string & {});
 export type TranslationSheet = Record<string, string>;
-export type TranslationsForLanguage = Record<Namespace, TranslationSheet>;
+export type TranslationsForLanguage = Record<string, TranslationSheet>;
 export type TranslationsMap = Record<TranslationLanguage, TranslationSheet>;
 export type TranslationsRegistry = Record<TranslationLanguage | string, TranslationsForLanguage>;
 export type TranslatorFunction = (key: string, options?: Record<string, unknown>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-bindings",
-  "version": "1.6.7",
+  "version": "1.7.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -21,16 +21,16 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "i18next": "^23.5.1",
+    "i18next": "^25.2.1",
     "rxjs": "~7.8.1"
   },
   "peerDependencies": {
-    "@stream-io/video-client": "^1.23.4",
+    "@stream-io/video-client": "^1.24.0",
     "react": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.1.2",
-    "@stream-io/video-client": "^1.23.4",
+    "@stream-io/video-client": "^1.24.0",
     "@types/react": "^19.1.3",
     "react": "19.0.0",
     "rimraf": "^6.0.1",

package/src/contexts/StreamCallContext.tsx

@@ -7,6 +7,9 @@ const StreamCallContext = createContext<Call | undefined>(undefined);
  * The props for the StreamCallProvider component.
  */
 export interface StreamCallProviderProps {
+  /**
+   * The call instance to provide to the component tree.
+   */
   call?: Call;
 }
 

package/src/contexts/StreamI18nContext.tsx

@@ -3,11 +3,13 @@ import {
   PropsWithChildren,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import {
   defaultTranslationFunction,
   StreamI18n,
+  TranslationLanguage,
   TranslationsMap,
 } from '../i18n';
 
@@ -22,8 +24,8 @@ const StreamI18nContext = createContext<StreamI18nContextValue>({
 
 type CreateI18nParams = {
   i18nInstance?: StreamI18n;
-  language?: string;
-  fallbackLanguage?: string;
+  language?: TranslationLanguage;
+  fallbackLanguage?: TranslationLanguage;
   translationsOverrides?: TranslationsMap;
 };
 
@@ -33,16 +35,15 @@ export const StreamI18nProvider = ({
   children,
   ...createI18nParams
 }: PropsWithChildren<StreamI18nProviderProps>) => {
-  const { i18n, t } = useCreateI18n(createI18nParams);
-
+  const api = useCreateI18n(createI18nParams);
   return (
-    <StreamI18nContext.Provider value={{ t, i18n }}>
+    <StreamI18nContext.Provider value={api}>
       {children}
     </StreamI18nContext.Provider>
   );
 };
 
-export const useCreateI18n = ({
+const useCreateI18n = ({
   i18nInstance,
   language,
   fallbackLanguage,
@@ -57,24 +58,24 @@ export const useCreateI18n = ({
         translationsOverrides,
       }),
   );
-  const [t, setTranslationFn] = useState<StreamI18n['t']>(
-    () => defaultTranslationFunction,
-  );
-
+  const [t, setTranslationFn] = useState<StreamI18n['t']>(() => i18n.t);
   useEffect(() => {
-    const { isInitialized } = i18n;
-    if (!isInitialized) {
-      i18n.init().then((_i18n) => setTranslationFn(() => _i18n.i18nInstance.t));
-      return;
-    }
-    if (language && i18n?.currentLanguage !== language) {
-      i18n.changeLanguage(language).catch((err) => {
-        console.log('Error while changing language', err);
-      });
+    if (!i18n.isInitialized) {
+      i18n.init().then(() => setTranslationFn(() => i18n.t));
+    } else if (i18n.currentLanguage !== language) {
+      i18n.changeLanguage(language).then(() => setTranslationFn(() => i18n.t));
     }
-  }, [i18n, i18nInstance, language, translationsOverrides]);
+  }, [i18n, language]);
 
-  return { i18n, t };
+  return useMemo(() => ({ i18n, t }), [i18n, t]);
 };
 
+/**
+ * A hook to get the i18n instance and translation function from the closest provider.
+ *
+ * Example usage:
+ * const { t, i18n } = useI18n();
+ * const message = t('hello_world');
+ * console.log(message);
+ */
 export const useI18n = () => useContext(StreamI18nContext);

package/src/contexts/StreamVideoContext.tsx

@@ -10,18 +10,18 @@ const StreamVideoContext = createContext<StreamVideoClient | undefined>(
 );
 
 /**
- * Exclude types from documentation site, but we should still add doc comments
- * @internal
+ * The props for the StreamVideoProvider component.
  */
 export type StreamVideoProps = StreamI18nProviderProps & {
+  /**
+   * The client instance to provide to the component tree.
+   */
   client: StreamVideoClient;
 };
 
 /**
  * StreamVideo is a provider component which should be used to wrap the entire application.
  * It provides the client object to all children components and initializes the i18n instance.
- *  @param PropsWithChildren<StreamVideoProps>
- *  @category Client State
  */
 export const StreamVideoProvider = ({
   children,
@@ -44,10 +44,7 @@ export const StreamVideoProvider = ({
 };
 
 /**
- *
- * @returns
- *
- * @category Client State
+ * Hook to access the nearest StreamVideo client instance.
  */
 export const useStreamVideoClient = () => {
   return useContext(StreamVideoContext);

package/src/hooks/callStateHooks.ts

@@ -27,8 +27,6 @@ const EMPTY_DEVICES_ARRAY = Object.freeze<MediaDeviceInfo[]>(
 
 /**
  * Utility hook, which provides the current call's state.
- *
- * @category Call State
  */
 export const useCallState = () => {
   const call = useCall();
@@ -46,8 +44,6 @@ export const useCallState = () => {
 
 /**
  * Utility hook which provides information whether the current call is being recorded. It will return `true` if the call is being recorded.
- *
- * @category Call State
  */
 export const useIsCallRecordingInProgress = (): boolean => {
   const { recording$ } = useCallState();
@@ -56,8 +52,6 @@ export const useIsCallRecordingInProgress = (): boolean => {
 
 /**
  * Utility hook which provides information whether the current call is broadcasting.
- *
- * @category Call State
  */
 export const useIsCallHLSBroadcastingInProgress = (): boolean => {
   const { egress$ } = useCallState();
@@ -68,8 +62,6 @@ export const useIsCallHLSBroadcastingInProgress = (): boolean => {
 
 /**
  * Utility hook which provides information whether the current call is live.
- *
- * @category Call State
  */
 export const useIsCallLive = (): boolean => {
   const { backstage$ } = useCallState();
@@ -184,8 +176,6 @@ export const useCallEndedBy = (): UserResponse | undefined => {
 /**
  * Utility hook which provides a boolean indicating whether there is
  * a participant in the current call which shares their screen.
- *
- * @category Call State
  */
 export const useHasOngoingScreenShare = (): boolean => {
   const { hasOngoingScreenShare$ } = useCallState();
@@ -201,8 +191,6 @@ export const useHasOngoingScreenShare = (): boolean => {
  *
  * Consumers of this observable can implement their own batching logic
  * in case they want to show historical stats data.
- *
- * @category Call State
  */
 export const useCallStatsReport = (): CallStatsReport | undefined => {
   const { callStatsReport$ } = useCallState();
@@ -211,8 +199,6 @@ export const useCallStatsReport = (): CallStatsReport | undefined => {
 
 /**
  * Utility hook which provides the dominant speaker of the current call.
- *
- * @category Call State
  */
 export const useDominantSpeaker = (): StreamVideoParticipant | undefined => {
   const { dominantSpeaker$ } = useCallState();
@@ -221,8 +207,6 @@ export const useDominantSpeaker = (): StreamVideoParticipant | undefined => {
 
 /**
  * Utility hook which provides a list of call members.
- *
- * @category Call State
  */
 export const useCallMembers = (): MemberResponse[] => {
   const { members$ } = useCallState();
@@ -231,8 +215,6 @@ export const useCallMembers = (): MemberResponse[] => {
 
 /**
  * Utility hook providing the current calling state of the call. For example, `RINGING` or `JOINED`.
- *
- * @category Call State
  */
 export const useCallCallingState = () => {
   const { callingState$ } = useCallState();
@@ -242,8 +224,6 @@ export const useCallCallingState = () => {
 /**
  * Utility hook providing the actual start time of the current session.
  * Useful for calculating the call duration.
- *
- * @category Call State
  */
 export const useCallStartedAt = () => {
   const { startedAt$ } = useCallState();
@@ -253,8 +233,6 @@ export const useCallStartedAt = () => {
 /**
  * A hook which provides a list of all participants that have joined an active call.
  *
- * @category Call State
- *
  * @param options.sortBy - A comparator function to sort the participants by.
  * Make sure to memoize output of the `combineComparators` function
  * (or keep it out of component's scope if possible) before passing it down to this property.
@@ -294,8 +272,6 @@ export const useRawParticipants = () => {
 /**
  * A hook which provides a StreamVideoLocalParticipant object.
  * It signals that I have joined a call.
- *
- * @category Call State
  */
 export const useLocalParticipant = () => {
   const { localParticipant$ } = useCallState();
@@ -304,8 +280,6 @@ export const useLocalParticipant = () => {
 
 /**
  * A hook which provides a list of all other participants than me that have joined an active call.
- *
- * @category Call State
  */
 export const useRemoteParticipants = () => {
   const { remoteParticipants$ } = useCallState();
@@ -315,8 +289,6 @@ export const useRemoteParticipants = () => {
 /**
  * Returns the approximate participant count of the active call.
  * This includes the anonymous users as well, and it is computed on the server.
- *
- * @category Call State
  */
 export const useParticipantCount = () => {
   const { participantCount$ } = useCallState();
@@ -326,8 +298,6 @@ export const useParticipantCount = () => {
 /**
  * Returns the approximate anonymous participant count of the active call.
  * The regular participants are not included in this count. It is computed on the server.
- *
- * @category Call State
  */
 export const useAnonymousParticipantCount = () => {
   const { anonymousParticipantCount$ } = useCallState();
@@ -362,9 +332,6 @@ export const useHasPermissions = (...permissions: OwnCapability[]): boolean => {
 
 /**
  * Returns the camera state of the current call.
- *
- * @category Camera Manager State
- *
  */
 export const useCameraState = () => {
   const call = useCall();
@@ -399,8 +366,6 @@ export const useCameraState = () => {
 
 /**
  * Returns the microphone state of the current call.
- *
- * @category Microphone Manager State
  */
 export const useMicrophoneState = () => {
   const call = useCall();

package/src/hooks/index.ts

@@ -7,7 +7,5 @@ export * from './callUtilHooks';
 
 /**
  * A hook-alike function that exposes all call state hooks.
- *
- * @category Call State
  */
 export const useCallStateHooks = () => CallStateHooks;

package/src/hooks/store.ts

@@ -18,8 +18,6 @@ export const useStore = () => {
  * Utility hook which provides a list of all notifications about created calls.
  * In the ring call settings, these calls can be outgoing (I have called somebody)
  * or incoming (somebody has called me).
- *
- * @category Client State
  */
 export const useCalls = () => {
   const { calls$ } = useStore();
@@ -28,8 +26,6 @@ export const useCalls = () => {
 
 /**
  * Returns the current connected user.
- *
- * @category Client State
  */
 export const useConnectedUser = () => {
   const { connectedUser$ } = useStore();

package/src/i18n/StreamI18n.ts

@@ -1,27 +1,17 @@
 import i18next from 'i18next';
 import {
   TranslationLanguage,
-  TranslationSheet,
   TranslationsMap,
   TranslationsRegistry,
   TranslatorFunction,
 } from './types';
 
-const DEFAULT_NAMESPACE = 'stream-video';
-const DEFAULT_CONFIG = {
-  debug: false,
-  currentLanguage: 'en',
-  fallbackLanguage: false,
-} as const;
-
 const mapToRegistry = (translationsMap: TranslationsMap, namespace: string) =>
   Object.entries(translationsMap).reduce((acc, [lng, translations]) => {
     acc[lng] = { [namespace]: translations };
     return acc;
   }, {} as TranslationsRegistry);
 
-const DEFAULT_TRANSLATIONS_REGISTRY = mapToRegistry({}, DEFAULT_NAMESPACE);
-
 export const defaultTranslationFunction = (key: string) => key;
 
 export type StreamI18nConstructor = {
@@ -40,40 +30,28 @@ export class StreamI18n {
   i18nInstance;
   /** Translator function that converts the provided string into its equivalent in the current language. */
   t: TranslatorFunction = defaultTranslationFunction;
-  /** Simple logger function */
-  constructor(options: StreamI18nConstructor = {}) {
-    const {
-      debug = DEFAULT_CONFIG.debug,
-      currentLanguage = DEFAULT_CONFIG.currentLanguage,
-      fallbackLanguage = DEFAULT_CONFIG.fallbackLanguage,
-      translationsOverrides,
-    } = options;
 
+  constructor({
+    debug = false,
+    currentLanguage = 'en',
+    fallbackLanguage,
+    translationsOverrides = { en: {} },
+  }: StreamI18nConstructor = {}) {
+    const ns = 'stream-video';
     this.i18nInstance = i18next.createInstance({
       debug,
-      defaultNS: DEFAULT_NAMESPACE,
+      defaultNS: ns,
       fallbackLng: fallbackLanguage,
       interpolation: { escapeValue: false },
       keySeparator: false,
       lng: currentLanguage,
       nsSeparator: false,
-      parseMissingKeyHandler: (key) => {
-        return key;
-      },
-      resources: DEFAULT_TRANSLATIONS_REGISTRY,
+      parseMissingKeyHandler: defaultTranslationFunction,
+      resources: mapToRegistry(translationsOverrides, ns),
     });
-
-    if (translationsOverrides) {
-      this.i18nInstance.on('initialized', () => {
-        Object.entries(translationsOverrides).forEach(([lng, translations]) => {
-          this.registerTranslationsForLanguage({ lng, translations });
-        });
-      });
-    }
   }
 
   get currentLanguage() {
-    this._checkIsInitialized();
     return this.i18nInstance.language;
   }
 
@@ -82,52 +60,12 @@ export class StreamI18n {
   }
 
   init = async () => {
-    try {
-      this.t = await this.i18nInstance.init();
-    } catch (e) {
-      console.error(`Failed to initialize translations: ${JSON.stringify(e)}`);
-    }
-    return this;
-  };
-
-  changeLanguage = async (
-    language?: TranslationLanguage,
-    onChange?: (language: TranslationLanguage) => void,
-  ) => {
-    if (!this._checkIsInitialized()) return;
-    // i18next detects the language, if none provided, but it is better
-    // to show this detection here explicitly
-    const browserLanguage =
-      typeof window !== 'undefined' && window.navigator
-        ? window.navigator.language
-        : undefined;
-    await this.i18nInstance.changeLanguage(language || browserLanguage);
-    onChange?.(this.currentLanguage);
-  };
-
-  registerTranslationsForLanguage = ({
-    lng,
-    translations,
-  }: {
-    lng: TranslationLanguage;
-    translations: TranslationSheet;
-  }) => {
-    if (!this._checkIsInitialized()) return;
-    this.i18nInstance.addResourceBundle(
-      lng,
-      DEFAULT_NAMESPACE,
-      translations,
-      true,
-      true,
-    );
+    this.t = await this.i18nInstance.init();
+    return this.t;
   };
 
-  private _checkIsInitialized = () => {
-    if (!this.i18nInstance.isInitialized) {
-      console.warn(
-        'I18n instance is not initialized. Call yourStreamI18nInstance.init().',
-      );
-    }
-    return this.i18nInstance.isInitialized;
+  changeLanguage = async (language?: TranslationLanguage) => {
+    this.t = await this.i18nInstance.changeLanguage(language);
+    return this.t;
   };
 }

package/src/i18n/types.ts

@@ -1,10 +1,8 @@
-export type TranslationLanguage = 'en' | string;
-
-export type Namespace = string;
+export type TranslationLanguage = 'en' | (string & {});
 
 export type TranslationSheet = Record<string, string>;
 
-export type TranslationsForLanguage = Record<Namespace, TranslationSheet>;
+export type TranslationsForLanguage = Record<string, TranslationSheet>;
 
 export type TranslationsMap = Record<TranslationLanguage, TranslationSheet>;