react-native-ensys-camera-x 1.0.7

package/src/accessibility.ts

@@ -0,0 +1,80 @@
+/**
+ * Accessibility utilities for camera operations
+ */
+
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo, Platform } from 'react-native';
+
+/**
+ * Check if screen reader is enabled
+ */
+export function useScreenReaderEnabled(): boolean {
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+
+  useEffect(() => {
+    AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled);
+
+    const subscription = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      setScreenReaderEnabled
+    );
+
+    return () => subscription.remove();
+  }, []);
+
+  return screenReaderEnabled;
+}
+
+/**
+ * Check if reduced motion is enabled
+ */
+export function useReducedMotion(): boolean {
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS === 'ios') {
+      AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+
+      const subscription = AccessibilityInfo.addEventListener(
+        'reduceMotionChanged',
+        setReduceMotion
+      );
+
+      return () => subscription.remove();
+    }
+
+    return () => {};
+  }, []);
+
+  return reduceMotion;
+}
+
+/**
+ * Check if bold text is enabled
+ */
+export function useBoldText(): boolean {
+  const [boldTextEnabled, setBoldTextEnabled] = useState(false);
+
+  useEffect(() => {
+    AccessibilityInfo.isBoldTextEnabled().then(setBoldTextEnabled);
+
+    const subscription = AccessibilityInfo.addEventListener(
+      'boldTextChanged',
+      setBoldTextEnabled
+    );
+
+    return () => subscription.remove();
+  }, []);
+
+  return boldTextEnabled;
+}
+
+/**
+ * Announce text for screen readers
+ */
+export function announceForAccessibility(announcement: string): void {
+  if (Platform.OS === 'ios') {
+    AccessibilityInfo.announceForAccessibility(announcement);
+  }
+  // Android accessibility announcements require native implementation
+}

package/src/config.ts

@@ -0,0 +1,406 @@
+/**
+ * Centralized white-label configuration for the camera plugin.
+ *
+ * `configureCameraPlugin()` (aliased as `CameraPlugin.configure`) is the single
+ * entry point host apps use to re-brand every visual aspect of the plugin:
+ * theme (colors/typography/spacing/radii/component styles), strings, icons
+ * (tint/size/resource overrides), animation durations, structural dimensions,
+ * and upload-notification appearance.
+ *
+ * Every section is optional and deep-merged over defaults extracted verbatim
+ * from the previously hardcoded values — calling nothing, or calling
+ * `configure({})`, leaves the plugin pixel-identical to its stock appearance.
+ *
+ * The merged config is kept globally on the JS side (for the RN components and
+ * `useCameraConfig`) and serialized once to native via `setCameraConfig`,
+ * where the Android Activity/editor reads it on launch. The legacy
+ * `setCameraTheme()` / `setCameraLocalization()` entry points remain fully
+ * supported and now route through the same store.
+ */
+import NativeCustomCamera from './NativeCustomCamera';
+import { setGlobalCameraTheme } from './theme';
+import {
+  clearCameraLanguageProvider,
+  getCameraIsRtl,
+  getCameraLocale,
+  isCameraLanguageProvider,
+  LocalizationManager,
+  setCameraLanguage,
+  setCameraLanguageProvider,
+  syncCameraLanguage,
+} from './localization';
+import type { CameraLocalizationConfig } from './localization';
+import { setGlobalIconRegistryConfig } from './icons';
+import {
+  mergeCameraIconsConfig,
+  resolveCameraIconRegistryConfig,
+  resolveNativeIconConfig,
+  type CameraIconsConfig,
+} from './iconConfig';
+import type {
+  CameraAnimationConfig,
+  CameraDimensionConfig,
+  CameraIconConfig,
+  CameraIconName,
+  CameraIconStyle,
+  CameraPluginConfig,
+  GifPickerConfig,
+  UploadNotificationConfig,
+} from './types';
+
+/**
+ * Default animation durations (ms) — extracted verbatim from the native views
+ * (CustomCameraActivity, MediaPreviewEditor, MediaAdapters). Changing these
+ * values changes the native UI; leaving them produces the exact stock motion.
+ */
+export const DEFAULT_ANIMATION_CONFIG: Required<
+  Omit<CameraAnimationConfig, 'disableAnimations'>
+> & { disableAnimations: boolean } = {
+  disableAnimations: false,
+  shutterPress: 80,
+  controlsFade: 180,
+  stripSlideIn: 260,
+  stripSlideOut: 220,
+  selectionFade: 150,
+  posterFade: 120,
+  playPauseFlash: 200,
+  playPauseFadeOut: 600,
+  playPauseFadeDelay: 400,
+  overlayFadeIn: 250,
+  overlayFadeOut: 200,
+  panelSlideIn: 350,
+  panelSlideOut: 300,
+  editorIconFade: 180,
+  quickFade: 150,
+};
+
+/**
+ * Icon defaults: no global tint override and no per-icon overrides — native
+ * renders each vector drawable exactly as shipped (white strokes at their
+ * responsive sizes).
+ */
+export const DEFAULT_ICON_CONFIG: CameraIconConfig = {
+  overrides: {},
+};
+
+/**
+ * Centralized icon defaults: nothing customized, so every icon resolves to the
+ * default the plugin ships. Adding an id to this map is what replaces an icon.
+ */
+export const DEFAULT_CUSTOM_ICONS: CameraIconsConfig = {};
+
+/**
+ * Dimension defaults are intentionally EMPTY: the native UI sizes its chrome
+ * responsively (e.g. shutter = 18% of the short screen edge clamped to
+ * 64–78dp, control icons = 11.5% clamped to 42–52dp). A value set here becomes
+ * a fixed dp override; absence keeps the stock responsive behavior.
+ */
+export const DEFAULT_DIMENSION_CONFIG: CameraDimensionConfig = {};
+
+/**
+ * Upload notification defaults — the current channel ids/names and texts from
+ * UploadService.kt. Text defaults live in the localization layer (the same
+ * `upload*` keys), so they are omitted here and only override when set.
+ */
+export const DEFAULT_NOTIFICATION_CONFIG: UploadNotificationConfig = {
+  progressChannelId: 'UploadServiceChannel',
+  progressChannelName: 'Upload Progress',
+  resultChannelId: 'UploadResultChannel',
+  resultChannelName: 'Upload Status',
+};
+
+/**
+ * GIF picker default: GIPHY provider, no API key. With no key the native "Add
+ * GIF" button still appears but the picker shows a "not configured" state
+ * instead of calling out. Host apps set `gif.apiKey` (and optionally switch
+ * `gif.provider` to `tenor`) via {@link configureCameraPlugin}.
+ */
+export const DEFAULT_GIF_CONFIG: GifPickerConfig = {
+  provider: 'giphy',
+};
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function mergeDeep<T>(base: T, override?: Partial<T>): T {
+  if (!override) {
+    return base;
+  }
+  const merged = { ...base } as Record<string, unknown>;
+  Object.entries(override as Record<string, unknown>).forEach(
+    ([key, value]) => {
+      const existing = merged[key];
+      if (isPlainObject(value) && isPlainObject(existing)) {
+        merged[key] = mergeDeep(existing, value);
+      } else if (value !== undefined) {
+        merged[key] = value;
+      }
+    }
+  );
+  return merged as T;
+}
+
+/** The fully-merged config the plugin currently applies. */
+export type ResolvedCameraPluginConfig = {
+  /**
+   * The centralized icon configuration: icon id → replacement. This is the
+   * section host apps customize; see {@link setCameraIcons}.
+   */
+  customIcons: CameraIconsConfig;
+  icons: CameraIconConfig;
+  animations: typeof DEFAULT_ANIMATION_CONFIG;
+  dimensions: CameraDimensionConfig;
+  notifications: UploadNotificationConfig;
+  gif: GifPickerConfig;
+};
+
+let currentConfig: ResolvedCameraPluginConfig = {
+  customIcons: DEFAULT_CUSTOM_ICONS,
+  icons: DEFAULT_ICON_CONFIG,
+  animations: DEFAULT_ANIMATION_CONFIG,
+  dimensions: DEFAULT_DIMENSION_CONFIG,
+  notifications: DEFAULT_NOTIFICATION_CONFIG,
+  gif: DEFAULT_GIF_CONFIG,
+};
+
+const configListeners = new Set<(config: ResolvedCameraPluginConfig) => void>();
+
+/** Returns the currently active (fully merged) white-label config. */
+export function getCameraPluginConfig(): ResolvedCameraPluginConfig {
+  return currentConfig;
+}
+
+/** Subscribe to config changes; returns an unsubscribe function. */
+export function subscribeToCameraPluginConfig(
+  listener: (config: ResolvedCameraPluginConfig) => void
+): () => void {
+  configListeners.add(listener);
+  return () => {
+    configListeners.delete(listener);
+  };
+}
+
+/**
+ * Fold the centralized icon config down onto the native `icons` section.
+ *
+ * Native only ever sees the legacy wire shape (`{ tintColor, overrides }`), so
+ * no Kotlin code has to know the centralized layer exists. Per-icon values from
+ * `customIcons` win field-wise over anything set through the lower-level
+ * `icons.overrides`, because `customIcons` is the documented entry point.
+ */
+function nativeIconPayload(): CameraIconConfig {
+  const legacy = currentConfig.icons;
+  const projected = resolveNativeIconConfig(currentConfig.customIcons);
+  const legacyOverrides = legacy.overrides ?? {};
+  const projectedOverrides = projected.overrides ?? {};
+
+  const overrides: Partial<Record<CameraIconName, CameraIconStyle>> = {
+    ...legacyOverrides,
+  };
+  (Object.keys(projectedOverrides) as CameraIconName[]).forEach((name) => {
+    overrides[name] = { ...overrides[name], ...projectedOverrides[name] };
+  });
+
+  return { tintColor: legacy.tintColor, overrides };
+}
+
+function pushConfigToNative(): Promise<void> {
+  const payload = {
+    icons: nativeIconPayload(),
+    animations: currentConfig.animations,
+    dimensions: currentConfig.dimensions,
+    notifications: currentConfig.notifications,
+    gif: currentConfig.gif,
+  };
+  const native = NativeCustomCamera as {
+    setCameraConfig?: (json: string) => Promise<void>;
+  };
+  // Older linked binaries without setCameraConfig degrade gracefully: theme
+  // and strings still flow through their legacy channels.
+  return native.setCameraConfig?.(JSON.stringify(payload)) ?? Promise.resolve();
+}
+
+/**
+ * Configure every customizable aspect of the plugin in one call. Sections are
+ * deep-merged over the previous configuration (which starts at the stock
+ * defaults), so repeated calls compose. Resolves when the config has been
+ * handed to the native layer.
+ *
+ * ```ts
+ * await configureCameraPlugin({
+ *   theme: { colors: { primary: '#E91E63' } },
+ *   customIcons: { close: MyCloseIcon, send: { tintColor: '#FFD54F' } },
+ *   language: 'de',
+ *   translations: { de: { photoMode: 'Foto', videoMode: 'Video' } },
+ *   animations: { disableAnimations: true },
+ * });
+ * ```
+ *
+ * `language` also accepts a live provider, which is the one-time setup for
+ * automatic language synchronization — after this the whole plugin, React Native
+ * screens and native camera alike, follows the host app's language on its own:
+ *
+ * ```ts
+ * await configureCameraPlugin({
+ *   translations: myBundles,
+ *   language: {
+ *     get: () => i18n.language,
+ *     subscribe: (onChange) => {
+ *       i18n.on('languageChanged', onChange);
+ *       return () => i18n.off('languageChanged', onChange);
+ *     },
+ *   },
+ * });
+ * ```
+ */
+export function configureCameraPlugin(
+  config: CameraPluginConfig = {}
+): Promise<void> {
+  const {
+    theme,
+    language,
+    translations,
+    fallbackLanguage,
+    strings,
+    rtl,
+    customIcons,
+    icons,
+    animations,
+    dimensions,
+    notifications,
+    gif,
+  } = config;
+
+  currentConfig = {
+    customIcons: mergeCameraIconsConfig(currentConfig.customIcons, customIcons),
+    icons: mergeDeep(currentConfig.icons, icons),
+    animations: mergeDeep(currentConfig.animations, animations),
+    dimensions: mergeDeep(currentConfig.dimensions, dimensions),
+    notifications: mergeDeep(currentConfig.notifications, notifications),
+    gif: mergeDeep(currentConfig.gif, gif),
+  };
+
+  // Hand the RN component surface its projection of the same icon config. Done
+  // before the listeners fire so a subscriber that re-renders icons already
+  // sees the new artwork.
+  if (customIcons !== undefined) {
+    setGlobalIconRegistryConfig(
+      resolveCameraIconRegistryConfig(currentConfig.customIcons)
+    );
+  }
+
+  configListeners.forEach((listener) => listener(currentConfig));
+
+  const work: Promise<unknown>[] = [pushConfigToNative()];
+
+  if (theme !== undefined) {
+    const resolved = setGlobalCameraTheme(theme);
+    work.push(
+      NativeCustomCamera.setCameraTheme(JSON.stringify(resolved)).catch(() => {
+        // Keep configure() resolving even when the native module is absent
+        // (web / tests); the JS-side theme store is already updated.
+      })
+    );
+  }
+
+  // Localization is merged, never replaced: `configureCameraPlugin({ strings })`
+  // must not wipe a language or bundles registered by an earlier call.
+  if (
+    language !== undefined ||
+    translations !== undefined ||
+    fallbackLanguage !== undefined ||
+    strings !== undefined ||
+    rtl !== undefined
+  ) {
+    const localization: CameraLocalizationConfig = {};
+    // `language` is either the host's current tag or a live provider. A provider
+    // is bound once and keeps reporting, which is what makes the rest of the app
+    // follow the host language with no further configure() calls.
+    if (language !== undefined) {
+      if (isCameraLanguageProvider(language)) {
+        localization.languageProvider = language;
+      } else {
+        localization.locale = language;
+      }
+    }
+    if (translations !== undefined) localization.bundles = translations;
+    if (fallbackLanguage !== undefined) {
+      localization.fallbackLocale = fallbackLanguage;
+    }
+    if (strings !== undefined) localization.translations = strings;
+    if (rtl !== undefined) localization.isRtl = rtl;
+
+    LocalizationManager.updateLocalization(localization);
+  }
+
+  return Promise.all(work).then(() => undefined);
+}
+
+// ============================================================================
+// Centralized icon configuration
+// ============================================================================
+
+/**
+ * Replace any of the plugin's icons, on every surface, in one call.
+ *
+ * Keys are the unique ids from `CAMERA_ICON_CATALOG`; a key you leave out keeps
+ * the icon the plugin ships. Repeated calls compose (each icon merges
+ * field-wise), so a later `setCameraIcons({ send: { tintColor: 'green' } })`
+ * does not undo an earlier `setCameraIcons({ send: MySendIcon })`.
+ *
+ * ```ts
+ * setCameraIcons({
+ *   close: MyCloseIcon,                 // React component
+ *   gallery: require('./gallery.png'),  // image
+ *   send: { tintColor: '#25D366' },     // recolour the built-in icon
+ *   crop: { resourceName: 'my_crop' },  // Android drawable in your app
+ * });
+ * ```
+ *
+ * Resolves once the native camera screen has the configuration.
+ */
+export function setCameraIcons(icons: CameraIconsConfig): Promise<void> {
+  return configureCameraPlugin({ customIcons: icons });
+}
+
+/** The centralized icon customizations currently in effect. */
+export function getCameraIcons(): CameraIconsConfig {
+  return currentConfig.customIcons;
+}
+
+/** Drop every icon customization and go back to the plugin's default icons. */
+export function resetCameraIcons(): Promise<void> {
+  currentConfig = { ...currentConfig, customIcons: {} };
+  setGlobalIconRegistryConfig(undefined);
+  configListeners.forEach((listener) => listener(currentConfig));
+  return pushConfigToNative();
+}
+
+/**
+ * Namespace-style facade so integrations can write
+ * `CameraPlugin.configure({...})` / `CameraPlugin.getConfig()`.
+ */
+export const CameraPlugin = {
+  configure: configureCameraPlugin,
+  getConfig: getCameraPluginConfig,
+  subscribe: subscribeToCameraPluginConfig,
+  setIcons: setCameraIcons,
+  getIcons: getCameraIcons,
+  resetIcons: resetCameraIcons,
+  /** Switch to the host app's newly selected language. */
+  setLanguage: setCameraLanguage,
+  /**
+   * Bind the host app's language once and let every plugin surface follow it
+   * automatically from then on. The one-time alternative to `setLanguage`.
+   */
+  setLanguageProvider: setCameraLanguageProvider,
+  /** Turn automatic language synchronization back off. */
+  clearLanguageProvider: clearCameraLanguageProvider,
+  /** Re-read the bound language provider, for hosts that cannot notify. */
+  syncLanguage: syncCameraLanguage,
+  /** The active language tag, or `''` when the host has not set one. */
+  getLanguage: getCameraLocale,
+  /** Whether plugin UI is currently laid out right-to-left. */
+  isRtl: getCameraIsRtl,
+};