@stream-io/video-react-native-sdk 2.0.0-beta.0 → 2.0.0-beta.2

package/src/components/Participant/ParticipantView/VideoRenderer/TrackSubscriber.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { Platform } from 'react-native';
 import {
   Call,
   CallingState,
@@ -16,7 +17,12 @@ import {
   distinctUntilKeyChanged,
   filter,
   map,
+  of,
 } from 'rxjs';
+import {
+  getIosPipTrack$,
+  setIosPipTrack,
+} from '../../../../utils/internal/iosPipTrack';
 
 type TrackSubscriberProps = {
   participantSessionId: string;
@@ -28,6 +34,13 @@ type TrackSubscriberProps = {
    * the last reported layout survives a remount of this component.
    */
   dimensions$: BehaviorSubject<SfuModels.VideoDimension | undefined>;
+  /**
+   * Set by the native iOS Picture in Picture window, whose bounds this
+   * subscriber requests. While it does, the inline views of the same track
+   * stop requesting their own, hidden layout. Only rendered on iOS; on other
+   * platforms the gate is always open.
+   */
+  isPipWriter?: boolean;
 };
 
 /**
@@ -40,10 +53,20 @@ type TrackSubscriberProps = {
  * This component is used to unsubscribe to video track and subscribe only to the audio track of the participant (by passing undefined dimensions) in the following cases:
  * 1. When the participant stops publishing the video track
  * 2. When the participant becomes invisible
+ *
+ * The same component serves the native iOS Picture in Picture window, which
+ * renders one of the tracks too. Its bounds take precedence over the inline
+ * views of that track for as long as it is on screen.
 */
 const TrackSubscriber = (props: TrackSubscriberProps) => {
-  const { call, participantSessionId, trackType, isVisible, dimensions$ } =
-    props;
+  const {
+    call,
+    participantSessionId,
+    trackType,
+    isVisible,
+    dimensions$,
+    isPipWriter,
+  } = props;
 
   useEffect(() => {
     const requestTrackWithDimensions = (
@@ -75,12 +98,28 @@ const TrackSubscriber = (props: TrackSubscriberProps) => {
       map((callingState) => callingState === CallingState.JOINED),
     );
 
+    const trackKey = { sessionId: participantSessionId, trackType };
+    const pipTrack$ = Platform.OS === 'ios' ? getIosPipTrack$(call) : undefined;
+    if (isPipWriter && pipTrack$) setIosPipTrack(call, trackKey);
+    const canWrite$ = pipTrack$
+      ? pipTrack$.pipe(
+          map((track) => {
+            const sameTrack =
+              track?.sessionId === participantSessionId &&
+              track?.trackType === trackType;
+            return isPipWriter ? sameTrack : !sameTrack;
+          }),
+          distinctUntilChanged(),
+        )
+      : of(true);
+
     const subscription = combineLatest([
       dimensions$,
       isPublishingTrack$,
       isJoinedState$,
-    ]).subscribe(([dimension, isPublishing, isJoined]) => {
-      if (isJoined) {
+      canWrite$,
+    ]).subscribe(([dimension, isPublishing, isJoined, canWrite]) => {
+      if (isJoined && canWrite) {
         if (!isVisible || !isPublishing) {
           requestTrackWithDimensions(DebounceType.MEDIUM, undefined);
         } else if (dimension) {
@@ -91,8 +130,22 @@ const TrackSubscriber = (props: TrackSubscriberProps) => {
 
     return () => {
       subscription.unsubscribe();
+      if (isPipWriter && pipTrack$) {
+        // Let sibling inline views finish unmounting before handing back demand.
+        queueMicrotask(() => {
+          if (pipTrack$.getValue() === trackKey)
+            setIosPipTrack(call, undefined);
+        });
+      }
     };
-  }, [call, participantSessionId, trackType, isVisible, dimensions$]);
+  }, [
+    call,
+    participantSessionId,
+    trackType,
+    isVisible,
+    dimensions$,
+    isPipWriter,
+  ]);
 
   return null;
 };

package/src/components/utility/ScreenShareOverlay.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { StopScreenShare } from '../../icons';
 import { useTheme } from '../../contexts';
-import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
+import { useI18n } from '../../i18n';
 
 /**
  * Props for the ScreenShareOverlay component
@@ -45,7 +46,10 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => {
           screenshareOverlay.text,
         ]}
       >
-        {t('You are sharing your screen with everyone')}
+        {t(
+          'screenShare.sharingWithEveryone.text',
+          'You are sharing your screen with everyone',
+        )}
       </Text>
       <Pressable
         onPress={onStopScreenshareHandler}
@@ -76,7 +80,7 @@ export const ScreenShareOverlay = ({}: ScreenShareOverlayProps) => {
             screenshareOverlay.buttonText,
           ]}
         >
-          {t('Stop Screen Sharing')}
+          {t('participantView.screenShare.stop.label', 'Stop Screen Sharing')}
         </Text>
       </Pressable>
     </View>

package/src/i18n/Streami18n.ts

@@ -0,0 +1,71 @@
+import { Streami18n as CoreStreami18n } from '@stream-io/i18n';
+import type { Streami18nOptions as CoreStreami18nOptions } from '@stream-io/i18n';
+
+import { runtimeDefaults } from './runtimeDefaults';
+import type { BundledKey, TranslationCatalog } from './types';
+
+/**
+ * Options for {@link Streami18n}.
+ *
+ * Core's options, narrowed to this SDK's catalog so `translationsForLanguage` is key-checked.
+ * `runtimeDefaults` is *merged* over the SDK's own rather than replacing it, so supplying it adds to
+ * what the SDK ships.
+ */
+export type Streami18nOptions = CoreStreami18nOptions<TranslationCatalog>;
+
+/**
+ * Wrapper around [i18next](https://www.i18next.com/) for this SDK's translations. Pass an instance
+ * to `<StreamVideo i18nInstance={…}>` to control the language and the copy.
+ *
+ * The implementation lives in `@stream-io/i18n`, shared with the web SDK and with Chat. This
+ * subclass exists even though {@link runtimeDefaults} is currently empty: its job is to bind the
+ * two type parameters, so `new Streami18n()` and its `t` are checked against *this* package's
+ * catalog rather than against core's `Record<string, string>` fallback, which would accept any key.
+ *
+ * ## Overriding some of the English copy
+ *
+ * ```ts
+ * const i18n = new Streami18n({
+ *   translationsForLanguage: {
+ *     'common.you.label': 'Jij',
+ *   },
+ * });
+ * ```
+ *
+ * ## Adding a language
+ *
+ * ```ts
+ * import 'dayjs/locale/nl';
+ *
+ * const i18n = new Streami18n({ language: 'nl' });
+ * i18n.registerTranslation('nl', {
+ *   'common.join.label': 'Deelnemen',
+ * });
+ * ```
+ *
+ * No dayjs locale file defines `calendar` — that field belongs to the calendar plugin — so a
+ * language whose relative dates must read natively needs the locale import *and* a `calendar`
+ * config passed as the third argument.
+ *
+ * Type your dictionary as `TranslationDictionary` to turn a typo or a key removed in a later major
+ * into a compile error. A **partial dictionary is safe**: any key you leave out renders the English
+ * copy that ships inline at each call site, never a raw dotted path — so there is no need to
+ * translate everything before shipping a language.
+ *
+ * Hermes ships a partial ICU, so `Intl.PluralRules` has no data for most locales and every count
+ * would select the `_other` form. Import `intl-pluralrules` before anything else in your entry
+ * file; core warns when it is missing.
+ *
+ * Reactivity goes through `i18n.state`, a `StateStore`. `setLanguage()` returns nothing — the new
+ * `t` is published to that store, which the provider subscribes to.
+ */
+export class Streami18n extends CoreStreami18n<TranslationCatalog, BundledKey> {
+  constructor(options: Streami18nOptions = {}) {
+    super({
+      ...options,
+      // Merged, not replaced. Spreading `options` over a literal would let an integrator supplying
+      // one entry silently drop the SDK's own bundled data, which then renders as raw keys.
+      runtimeDefaults: { ...runtimeDefaults, ...options.runtimeDefaults },
+    });
+  }
+}

package/src/i18n/TranslationContext.tsx

@@ -0,0 +1,55 @@
+import {
+  createDefaultTranslatorFunction,
+  defaultDateTimeParser,
+} from '@stream-io/i18n';
+import { createTranslationContext } from '@stream-io/i18n/react';
+
+import type { StreamTFunction, TDateTimeParser } from './types';
+
+export type TranslationContextValue = {
+  t: StreamTFunction;
+  tDateTimeParser: TDateTimeParser;
+};
+
+/**
+ * The `t` in force before i18next has initialized, and the context's default.
+ *
+ * Core's factory, instantiated against this SDK's catalog so it is typed exactly like the real `t`.
+ * It honours the inline `defaultValue` each prose call site passes, which is what stops raw dotted
+ * keys flashing on the first frame.
+ */
+const defaultTranslatorFunction =
+  createDefaultTranslatorFunction() as StreamTFunction;
+
+/**
+ * Built from the shared factory in `@stream-io/i18n/react`.
+ *
+ * A **default value** is supplied rather than making the hook throw, and that is deliberate: it
+ * matches what `useI18n` did before this module existed, so a component rendered outside the
+ * provider keeps showing correct English instead of crashing. Chat's React Native SDK throws
+ * instead; hence core exposes this as a factory rather than one exported context.
+ */
+const { TranslationContext, TranslationProvider, useTranslationContext } =
+  createTranslationContext<TranslationContextValue>({
+    defaultValue: {
+      t: defaultTranslatorFunction,
+      tDateTimeParser: defaultDateTimeParser,
+    },
+    displayName: 'StreamVideoTranslationContext',
+  });
+
+export { TranslationContext, TranslationProvider };
+
+/**
+ * Reads `t` and `tDateTimeParser` from the closest provider.
+ *
+ * Works outside a provider too — the default translator renders each call site's inline English.
+ *
+ * The name is `useI18n` rather than core's `useTranslationContext` because ~500 call sites across
+ * the video SDKs already import it; renaming them is churn with no payoff.
+ *
+ * @example
+ * const { t } = useI18n();
+ * const label = t('common.join.label', 'Join');
+ */
+export const useI18n = useTranslationContext;

package/src/i18n/index.ts

@@ -0,0 +1,22 @@
+export * from './Streami18n';
+export * from './TranslationContext';
+export * from './types';
+export * from './useStreami18n';
+
+/**
+ * Core helpers re-exported so an integrator never needs a direct dependency on `@stream-io/i18n`:
+ * that package is an implementation detail of this SDK, and a second copy resolved from their
+ * `node_modules` would register dayjs plugins on the wrong module.
+ *
+ * - `asDynamicKey` — brands a runtime-resolved string as a translation key, the one sanctioned way
+ *   past the compile-time key check.
+ * - `getDateString` — the timestamp renderer, for a custom component formatting dates itself.
+ * - `predefinedFormatters` — the built-in i18next formatters, to spread over when adding one.
+ * - `defaultDateTimeParser` — the dayjs-backed parser, with the required plugins already applied.
+ */
+export {
+  asDynamicKey,
+  defaultDateTimeParser,
+  getDateString,
+  predefinedFormatters,
+} from '@stream-io/i18n';

package/src/i18n/keys.ts

@@ -0,0 +1,42 @@
+// AUTO-GENERATED — do not edit by hand.
+// Regenerate with `yarn build-translations`. CI fails if this file is out of sync.
+//
+// Type-only: no runtime value is emitted, so this adds nothing to the bundle.
+
+/**
+ * Every translation entry shipped with the SDK, mapped to its English copy.
+ *
+ * Plural entries appear as `<key>_one` / `<key>_other`; call sites use the bare `<key>` and
+ * pass `count`.
+ */
+export type TranslationCatalog = {
+  'common.join.label': 'Join';
+  'common.joining.text': 'Joining...';
+  'common.live.label': 'Live';
+  'common.loading.text': 'Loading...';
+  'common.you.label': 'You';
+  'livestreamControls.start.label': 'Start Livestream';
+  'livestreamControls.stop.label': 'Stop Livestream';
+  'livestreamPlayer.ended.title': 'The livestream has ended.';
+  'livestreamPlayer.ended.watchRecordings.title': 'Watch recordings:';
+  'livestreamViewer.earlyParticipants.text_one': '{{ count }} participant has joined early';
+  'livestreamViewer.earlyParticipants.text_other': '{{ count }} participants have joined early';
+  'livestreamViewer.join.label': 'Join Livestream';
+  'livestreamViewer.stillInProgress.text': 'Livestream is still in progress';
+  'livestreamViewer.willStartIn.text': 'Livestream will start in:';
+  'livestreamViewer.willStartSoon.text': 'Livestream will start soon';
+  'lobby.beforeJoining.title': 'Before joining';
+  'lobby.footer.aboutToJoin.text': 'You are about to join a call.';
+  'lobby.footer.noOtherParticipants.text': 'Currently there are no other participants in the call.';
+  'lobby.footer.otherParticipants.text_one': 'There is {{ count }} more person in the call.';
+  'lobby.footer.otherParticipants.text_other': 'There are {{ count }} more people in the call.';
+  'lobby.setupAudioVideo.description': 'Setup your audio and video';
+  'participantView.screenShare.byUser.text': '{{ userName }} is sharing their screen';
+  'participantView.screenShare.byYou.text': 'You are sharing your screen';
+  'participantView.screenShare.stop.label': 'Stop Screen Sharing';
+  'ringingCall.incoming.title': 'Incoming Call...';
+  'ringingCall.leftCall.title': 'You have left the call';
+  'ringingCall.outgoing.title': 'Calling...';
+  'ringingCall.preparing.title': 'Preparing call';
+  'screenShare.sharingWithEveryone.text': 'You are sharing your screen with everyone';
+};

package/src/i18n/runtimeDefaults.ts

@@ -0,0 +1,17 @@
+/**
+ * The SDK's bundled translation data: the keys that cannot carry an inline `defaultValue` at their
+ * call site. `Streami18n` layers it under *every* language, so a partial dictionary never knocks
+ * these out.
+ *
+ * Empty, and that is the intended steady state. The four lookups this SDK resolved from a runtime
+ * value — the only candidates for an entry here — are written as `switch` statements over literal
+ * `t()` calls instead, so every branch carries its own English copy inline and the codegen reads it
+ * straight off the call site. Nothing is left without a default. `timestamp.*` / `duration.*`
+ * formatter expressions would also live here; this SDK has none yet.
+ *
+ * Adding an entry later needs no wiring. `Streami18n` already spreads this into the core options and
+ * `scripts/generate-i18n-keys.mts` already reads this path, so a new key reaches `keys.ts` on the
+ * next `build-translations` run — where a key nothing references, or one that shadows an inline
+ * default, fails a codegen guard.
+ */
+export const runtimeDefaults = {};

package/src/i18n/types.ts

@@ -0,0 +1,78 @@
+import type {
+  Streami18nState as CoreStreami18nState,
+  LooseTranslationDictionaryOf,
+  RelativeTimeCatalog,
+  StreamTFunctionFor,
+  TranslationDictionaryOf,
+  TranslationKeyOf,
+} from '@stream-io/i18n';
+
+import type { TranslationCatalog as GeneratedCatalog } from './keys';
+
+/**
+ * The SDK's i18n types, instantiated from the generic helpers in `@stream-io/i18n`.
+ *
+ * The derivations live in core so both video SDKs (and Chat) share one implementation; the *catalog*
+ * stays here, because it is generated from this package's own `t()` call sites — which are not the
+ * web SDK's. That split is why core's helpers are generic over the catalog rather than driven by
+ * module augmentation: two catalogs have to be able to coexist in one TypeScript program, which a
+ * monorepo typechecking the web and React Native SDKs in one pass does.
+ *
+ * `relativeTime.*` is intersected in because it is core's copy, not ours: `timestampFormatter`
+ * renders "Today" / "3d ago" through `t()`, and without these keys in the catalog an integrator
+ * could not type a dictionary that translates them.
+ */
+export type TranslationCatalog = GeneratedCatalog & RelativeTimeCatalog;
+
+/**
+ * Keys resolved from bundled data rather than from an inline `defaultValue`.
+ *
+ * `never`, because `runtimeDefaults.ts` is empty — every key this SDK uses is written literally
+ * with its English copy at the call site. `timestamp.*` / `duration.*` are matched by prefix inside
+ * core and need no entry here.
+ *
+ * **It must never become `string`.** `string` collapses the prose overload in `StreamTFunctionFor`,
+ * which silently disables all key checking: every `t('typo.key', 'copy')` would compile. Widen it
+ * only to a literal prefix template (`` `foo.${string}` ``) when a real bundled key appears.
+ */
+export type BundledKey = never;
+
+export type TranslationKey = TranslationKeyOf<TranslationCatalog>;
+export type TranslationDictionary = TranslationDictionaryOf<TranslationCatalog>;
+export type LooseTranslationDictionary =
+  LooseTranslationDictionaryOf<TranslationCatalog>;
+export type StreamTFunction = StreamTFunctionFor<
+  TranslationCatalog,
+  BundledKey
+>;
+
+/**
+ * The value held by `Streami18n.state`, parameterized for this SDK's catalog.
+ *
+ * Exported because `state` is public: a consumer subscribing to it needs to name the type for a
+ * module-scope selector. Core's default-parameterized `Streami18nState` is not a substitute — `t` is
+ * contravariant in its key parameter, so that one is not assignable to this.
+ */
+export type Streami18nState = CoreStreami18nState<
+  TranslationCatalog,
+  BundledKey
+>;
+
+/**
+ * Re-exported so an integrator can type a formatter, a locale config or a date parser without
+ * taking a direct dependency on `@stream-io/i18n`.
+ */
+export type {
+  CustomFormatters,
+  DateTimeParserModule,
+  DayjsLocaleConfig,
+  DurationFormatterOptions,
+  DynamicTranslationKey,
+  FormatterFactory,
+  LooseTranslateFunction,
+  PredefinedFormatters,
+  TDateTimeParser,
+  TDateTimeParserInput,
+  TDateTimeParserOutput,
+  TimestampFormatterOptions,
+} from '@stream-io/i18n';

package/src/i18n/useStreami18n.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useStreami18nState } from '@stream-io/i18n/react';
+
+import { Streami18n } from './Streami18n';
+import type { TranslationContextValue } from './TranslationContext';
+import type { LooseTranslationDictionary } from './types';
+
+export type UseStreami18nParams = {
+  /** An instance the integrator configured. One is created when absent. */
+  i18nInstance?: Streami18n;
+  /** The language the SDK's copy renders in. Changing it switches languages in place. */
+  language?: string;
+  /** Dictionaries to register, keyed by language code. Partial dictionaries are safe. */
+  translations?: Record<string, LooseTranslationDictionary>;
+};
+
+/**
+ * Resolves the translation context value: creates or adopts a {@link Streami18n} instance,
+ * registers the supplied dictionaries, initializes it and keeps `t` fresh across language changes.
+ *
+ * `init()` and the store subscription belong to `useStreami18nState` in `@stream-io/i18n/react`,
+ * shared with the web SDK.
+ */
+export const useStreami18n = ({
+  i18nInstance,
+  language,
+  translations,
+}: UseStreami18nParams): TranslationContextValue => {
+  // Lazy `useState`, not `useMemo`: `new Streami18n()` is a real allocation with identity that must
+  // survive a re-render, and this repo lints `react-hooks/purity` as an error — `useMemo` is a
+  // cache React is free to drop, so constructing there is a purity violation. A later change to
+  // `i18nInstance` is ignored on purpose; swapping the instance mid-tree is not a supported move.
+  const [i18n] = useState(() => {
+    const instance = i18nInstance ?? new Streami18n({ language });
+
+    // Registered here rather than in an effect. `useStreami18nState` calls `init()` from its own
+    // effect, which runs *before* any effect declared below it in this hook — so a dictionary
+    // registered in an effect would arrive after i18next was already initialized, and the first
+    // `init()` would warn that the language has no dictionary.
+    if (translations) {
+      for (const [code, dictionary] of Object.entries(translations)) {
+        instance.registerTranslation(code, dictionary);
+      }
+    }
+
+    return instance;
+  });
+
+  // No `onInitError` handler: core already logs a warning and leaves the instance usable, with `t`
+  // still rendering each call site's inline English. Pass one only to surface init failures
+  // somewhere other than the console.
+  const translators = useStreami18nState(i18n);
+
+  useEffect(() => {
+    // Guarded on the current value: `setLanguage` re-runs the formatter factories and a full
+    // i18next `changeLanguage`, and the first render already constructed the instance with
+    // `language`. Undefined means "leave whatever the instance was configured with".
+    if (!language || i18n.currentLanguage === language) return;
+    i18n.setLanguage(language);
+  }, [i18n, language]);
+
+  // Returned as-is: `useStreami18nState` already caches this object and only produces a new one
+  // when `t` or `tDateTimeParser` actually changes, so wrapping it in a `useMemo` would add a
+  // second cache over a stable value.
+  return translators;
+};

package/src/index.ts

@@ -29,13 +29,18 @@ export * from './contexts';
 export * from './hooks';
 export * from './theme';
 export * from './utils';
-export * from './translations';
+export * from './i18n';
 export * from './modules/call-manager';
 
 // Overriding 'StreamVideo' and 'StreamCall' from '@stream-io/video-react-bindings'
 // Explicitly re-exporting to resolve ambiguity.
 export { StreamVideo } from './providers/StreamVideo';
 export { StreamCall } from './providers/StreamCall';
+// Overriding 'EncryptionManager' from '@stream-io/video-client' with the React
+// Native implementation, which is backed by the native WebRTC transform. React
+// Native Web is not supported: `isSupported()` returns false there rather than
+// falling back to the web manager.
+export { EncryptionManager } from './modules/encryption';
 export * from './providers/NoiseCancellation';
 
 setClientDetails();

package/src/modules/call-manager/native-module.d.ts

@@ -32,6 +32,20 @@ export interface CallManager extends NativeModule {
    */
   setTelecomManagedMode: (enabled: boolean) => void;
 
+  /**
+   * Opt out of the Android 11+ communication-mode keep-alive workaround.
+   *
+   * On Android 11+ (API 30) the OS resets `MODE_IN_COMMUNICATION` ~6s after it is
+   * set when there is no active voice-communication playback/recording, which
+   * breaks audio routing and AEC. By default the SDK plays a silent
+   * voice-communication track for the duration of a communicator-role call to
+   * prevent this. Pass `true` to disable it. Sticky for the process lifetime.
+   *
+   * No-op on iOS and on Android below API 30. See
+   * https://issuetracker.google.com/issues/209493718
+   */
+  setDisableCommunicationModeWorkaround: (disabled: boolean) => void;
+
   /**
    * Choose an audio device endpoint by its stable id.
    * @param deviceId - The id of the audio device to choose (`AudioDevice.id`).