react-native-ensys-camera-x 1.0.7

package/src/library/localizedFormat.ts

@@ -0,0 +1,207 @@
+/**
+ * Locale-aware formatting for the media-library shell.
+ *
+ * Every date, time, size, duration and dimension the shell renders flows through here so the
+ * output follows the host's active language instead of a hardcoded `en-GB`/`en-US`. Numbers use
+ * the locale's own numbering system (so Arabic/Persian get their digits), size units come from the
+ * host-overridable `fileSizeBytes/Kb/Mb/Gb` keys, and dates/times use the locale's month names and
+ * 12/24-hour convention.
+ *
+ * All calls are defensive: a malformed host locale that makes `Intl` throw falls back to the
+ * runtime default rather than crashing a preview.
+ */
+import type { CameraTranslationKey } from '../localization';
+
+/** The shape of the `t` returned by `useCameraLocalization()`. */
+type Translate = (
+  key: CameraTranslationKey,
+  ...args: Array<string | number | boolean | null | undefined>
+) => string;
+
+/** An empty locale ('' = host set none) becomes `undefined` so `Intl` picks the runtime default. */
+function loc(locale?: string): string | undefined {
+  return locale && locale.length > 0 ? locale : undefined;
+}
+
+// Per-locale Western→local digit map. `null` means the locale already uses Latin digits (no remap).
+const digitMaps = new Map<string, Record<string, string> | null>();
+
+/** Rewrite the ASCII digits in `text` into the locale's numbering system (no-op for Latin locales). */
+export function localizeDigits(text: string, locale?: string): string {
+  const l = loc(locale);
+  if (!l) return text;
+  let map = digitMaps.get(l);
+  if (map === undefined) {
+    map = null;
+    try {
+      const fmt = new Intl.NumberFormat(l, { useGrouping: false });
+      const built: Record<string, string> = {};
+      let identity = true;
+      for (let d = 0; d <= 9; d += 1) {
+        const glyph = fmt.format(d);
+        built[String(d)] = glyph;
+        if (glyph !== String(d)) identity = false;
+      }
+      map = identity ? null : built;
+    } catch {
+      map = null;
+    }
+    digitMaps.set(l, map);
+  }
+  if (!map) return text;
+  const table = map;
+  return text.replace(/[0-9]/g, (ch) => table[ch] ?? ch);
+}
+
+/** Format a plain number in the locale's numbering system, without grouping separators. */
+export function localizeNumber(value: number, locale?: string): string {
+  try {
+    return new Intl.NumberFormat(loc(locale), { useGrouping: false }).format(value);
+  } catch {
+    return String(value);
+  }
+}
+
+/** The size units, smallest first. Host-overridable, which is why they are translation keys. */
+const FILE_SIZE_UNIT_KEYS: CameraTranslationKey[] = [
+  'fileSizeBytes',
+  'fileSizeKb',
+  'fileSizeMb',
+  'fileSizeGb',
+];
+
+/**
+ * The unit rung `bytes` is quoted at and the value rounded for that rung — the half of the size
+ * formatting that has nothing to do with language, shared so a single size and a size RANGE can
+ * never round or scale the same byte count differently.
+ */
+function scaleFileSize(bytes: number): { unit: number; rounded: number } {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < FILE_SIZE_UNIT_KEYS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const rounded =
+    value >= 10 || unit === 0 ? Math.round(value) : Math.round(value * 10) / 10;
+  return { unit, rounded };
+}
+
+/** `1.5 MB` style, with the unit drawn from the host-overridable size keys. Null when unknown. */
+export function formatFileSize(
+  bytes: number | undefined | null,
+  locale: string | undefined,
+  t: Translate
+): string | null {
+  if (bytes === undefined || bytes === null || bytes <= 0) return null;
+  const { unit, rounded } = scaleFileSize(bytes);
+  return t(FILE_SIZE_UNIT_KEYS[unit]!, localizeNumber(rounded, locale));
+}
+
+/**
+ * A low–high size span as ONE string (`5.8 – 7.1 MB`), for a figure that is honestly a band rather
+ * than a single number — a video re-encoded at a TARGET bit rate, which the encoder spends around
+ * instead of hitting exactly.
+ *
+ * The low end drops its unit whenever both ends land on the same rung, which is what the
+ * `compressSizeRange` key documents and what its translations are written against; that decision is
+ * made HERE, from the rung itself, rather than by trying to strip a unit back out of an already
+ * translated string. Ends on different rungs are both formatted in full (`900 KB – 1.1 MB`).
+ *
+ * Collapses to the single high figure when the band has no width left to show — the low end is
+ * missing, at or above the high end, or rounds to the very same number on the very same rung — so a
+ * row never reads `7.1 – 7.1 MB`. Null when nothing is known.
+ */
+export function formatFileSizeRange(
+  low: number | undefined | null,
+  high: number | undefined | null,
+  locale: string | undefined,
+  t: Translate
+): string | null {
+  const highText = formatFileSize(high, locale, t);
+  if (!highText) return formatFileSize(low, locale, t);
+  const lowText = formatFileSize(low, locale, t);
+  if (!lowText || !low || !high || low >= high) return highText;
+
+  const lowScale = scaleFileSize(low);
+  const highScale = scaleFileSize(high);
+  if (lowScale.unit === highScale.unit) {
+    if (lowScale.rounded === highScale.rounded) return highText;
+    return t(
+      'compressSizeRange',
+      localizeNumber(lowScale.rounded, locale),
+      highText
+    );
+  }
+  return t('compressSizeRange', lowText, highText);
+}
+
+/** Localized calendar date. `month` picks the short ("Aug") or long ("August") form. Null when unknown. */
+export function formatMediaDate(
+  timestamp: number | undefined | null,
+  locale: string | undefined,
+  month: 'short' | 'long' = 'short'
+): string | null {
+  if (timestamp === undefined || timestamp === null) return null;
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return null;
+  const options: Intl.DateTimeFormatOptions = {
+    day: '2-digit',
+    month,
+    year: 'numeric',
+  };
+  try {
+    return date.toLocaleDateString(loc(locale), options);
+  } catch {
+    return date.toLocaleDateString(undefined, options);
+  }
+}
+
+/** Localized wall-clock time; the locale decides 12- vs 24-hour. Null when unknown. */
+export function formatMediaTime(
+  timestamp: number | undefined | null,
+  locale: string | undefined
+): string | null {
+  if (timestamp === undefined || timestamp === null) return null;
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return null;
+  const options: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: '2-digit' };
+  try {
+    return date.toLocaleTimeString(loc(locale), options);
+  } catch {
+    return date.toLocaleTimeString(undefined, options);
+  }
+}
+
+/**
+ * `m:ss` / `h:mm:ss` clip length with locale digits. `value` may be seconds or milliseconds
+ * (MediaStore's DURATION column) — the same >1000 normalization the rest of the shell uses.
+ */
+export function formatMediaDuration(
+  value: number | undefined | null,
+  locale: string | undefined
+): string | null {
+  if (value === undefined || value === null || value <= 0) return null;
+  const seconds = value > 1000 ? Math.floor(value / 1000) : Math.floor(value);
+  if (seconds <= 0) return null;
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  const base =
+    h > 0
+      ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
+      : `${m}:${String(s).padStart(2, '0')}`;
+  return localizeDigits(base, locale);
+}
+
+/** `1920 × 1080` with locale digits. Null when either side is unknown. */
+export function formatDimensions(
+  width: number | undefined | null,
+  height: number | undefined | null,
+  locale: string | undefined
+): string | null {
+  if (!width || !height || width <= 0 || height <= 0) return null;
+  const w = localizeDigits(String(Math.round(width)), locale);
+  const h = localizeDigits(String(Math.round(height)), locale);
+  return `${w} × ${h}`;
+}

package/src/library/palette.ts

@@ -0,0 +1,281 @@
+/**
+ * palette — the ONE source of color tokens for the media library shell,
+ * mirroring what responsive.ts does for scaling. Every screen and component
+ * derives its colors from here, so the whole shell re-themes from this single
+ * file — statically (`libraryPalette`) or live (`useLibraryPalette()`).
+ *
+ * ── Light / Dark ────────────────────────────────────────────────────────────
+ * The shell ships BOTH a dark and a light token set and picks between them from
+ * the active plugin theme, so a host that flips `configureCameraPlugin({ theme:
+ * 'light' })` (or pushes a light palette) re-colours the entire JS shell with no
+ * restart. Selection is by the luminance of the theme's `background`: a dark
+ * background → the dark set, a light one → the light set. The DARK set is
+ * byte-for-byte the shell's original shipped palette, so every existing (dark)
+ * install renders pixel-identical; the LIGHT set is the new day-mode design.
+ *
+ * Three token families deliberately DON'T flip, because they are not painted on
+ * the browsing surface:
+ *   • `white` / `black` / shadows and the `whiteA*` / `scrim*` overlays — they
+ *     sit on ACCENT buttons, on the dark media-viewer chrome, or directly over
+ *     the user's photos/videos, where they must stay high-contrast in either
+ *     mode.
+ *   • the `chrome*` surfaces — the full-screen viewer, editor and bottom sheets
+ *     keep a dark backdrop in both themes (the Google/Apple Photos convention
+ *     for a full-screen media viewer).
+ *   • the brand `accent*` shades — legible on either background.
+ * Everything that IS the browsing surface — grid/list backgrounds, cards, tiles,
+ * category pills, the record screen, document/audio preview cards, and all text
+ * and hairlines drawn on them — flips.
+ *
+ * Tokens that overlap the plugin's own theme (`primary`, `textMuted`, `success`,
+ * `error`, `surfaceMuted`) are always taken straight from the active theme so
+ * the JS chrome and the native camera screens stay on one palette.
+ */
+import { useEffect, useState } from 'react';
+import {
+  DEFAULT_CAMERA_THEME_CONFIG,
+  getCurrentCameraTheme,
+  subscribeToCameraTheme,
+} from '../theme';
+import type { CameraThemeConfig } from '../types';
+
+type ThemeColors = CameraThemeConfig['colors'];
+const base = DEFAULT_CAMERA_THEME_CONFIG.colors;
+
+/**
+ * Relative luminance (0 = black … 1 = white) of a `#rgb`/`#rrggbb` color, used
+ * only to decide dark-vs-light. rgba()/rgb() and unparseable values fall back to
+ * "dark" so an unknown theme keeps the original shipped (dark) shell.
+ */
+const luminance = (color: string): number => {
+  const hex = color.trim().replace(/^#/, '');
+  const expand =
+    hex.length === 3 ? hex.split('').map((c) => c + c).join('') : hex;
+  if (expand.length < 6 || /[^0-9a-fA-F]/.test(expand.slice(0, 6))) return 0;
+  const r = parseInt(expand.slice(0, 2), 16) / 255;
+  const g = parseInt(expand.slice(2, 4), 16) / 255;
+  const b = parseInt(expand.slice(4, 6), 16) / 255;
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+/** Whether the active theme reads as dark (drives which shell token set is used). */
+export const isDarkTheme = (colors: ThemeColors = base): boolean =>
+  luminance(colors.background) < 0.5;
+
+// ── Shared tokens (identical in both themes) ─────────────────────────────────
+// Painted on accents, on the dark media viewer, or directly over user media, so
+// they must stay high-contrast regardless of the browsing theme.
+const SHARED = {
+  // Core neutrals / shadows.
+  white: '#FFFFFF',
+  black: '#000000',
+  blackShort: '#000',
+  inkDark: '#111',
+  ink: '#333',
+  grayMid: '#666',
+
+  // Dark media-viewer / editor / bottom-sheet chrome (dark in both themes).
+  chromeDark: '#1E1E1E',
+  chromeGray: '#2D2D2D',
+  chromeSystem: '#2C2C2E',
+  chromeSystemAlt: '#3A3A3C',
+  // The full-screen media viewer's near-black backdrop. Fixed in both themes so
+  // photos/videos always read against a neutral dark canvas (the Google/Apple
+  // Photos convention) — value = the dark theme's `appBackgroundDeepest`, so the
+  // dark shell is byte-identical while the light shell keeps a dark viewer.
+  viewerBackdrop: '#050715',
+  // Text drawn ON the dark chrome (viewer counter, compression menu, metadata
+  // sheet). These must stay light in BOTH themes — the flipping text tokens would
+  // turn dark-on-dark in light mode — so they live in SHARED, not ShellSurfaces.
+  chromeText: '#F1F5F9',
+  chromeTextMuted: '#A0A9C9',
+
+  // Brand accents (legible on either background).
+  accentGreen: '#4CAF50',
+  accentGreenDark: '#388E3C',
+  accentMint: '#3DD9A4',
+  accentTeal: '#1E81A5',
+  accentBlue: '#007AFF',
+  accentSky: '#6C9AFF',
+  accentIndigo: '#6070FF',
+  accentIndigoDeep: '#3A46E0',
+  accentPeriwinkle: '#C7D2FE',
+  accentViolet: '#8F86FF',
+  accentLavender: '#B79CFF',
+  accentPurple: '#5856D6',
+  accentPurpleMuted: '#5F58A8',
+  accentOrange: '#FF9500',
+  accentAmber: '#FFB454',
+  accentRose: '#FF7A85',
+  accentSalmon: '#FCA5A5',
+
+  // Overlays over media / dark chrome (white-alpha), black scrims, dark sheets.
+  whiteA12: 'rgba(255, 255, 255, 0.12)',
+  whiteA15: 'rgba(255, 255, 255, 0.15)',
+  whiteA20: 'rgba(255, 255, 255, 0.2)',
+  whiteA25: 'rgba(255, 255, 255, 0.25)',
+  whiteA30: 'rgba(255, 255, 255, 0.3)',
+  whiteA35: 'rgba(255, 255, 255, 0.35)',
+  whiteA40: 'rgba(255, 255, 255, 0.4)',
+  whiteA90: 'rgba(255,255,255,0.9)',
+  rippleStrong: 'rgba(255, 255, 255, 0.25)',
+  rippleMedium: 'rgba(255, 255, 255, 0.18)',
+  scrimA22: 'rgba(0,0,0,0.22)',
+  scrimA30: 'rgba(0, 0, 0, 0.3)',
+  scrimA55: 'rgba(0, 0, 0, 0.55)',
+  scrimA55Tight: 'rgba(0,0,0,0.55)',
+  scrimA60: 'rgba(0, 0, 0, 0.6)',
+  scrimA70: 'rgba(0, 0, 0, 0.7)',
+  sheet85: 'rgba(20, 20, 22, 0.85)',
+  sheet95: 'rgba(20, 20, 22, 0.95)',
+  greenTintA10: 'rgba(76, 175, 80, 0.1)',
+  greenTintA18: 'rgba(76, 175, 80, 0.18)',
+  greenTintA28: 'rgba(76, 175, 80, 0.28)',
+};
+
+// ── Browsing surfaces + text + hairlines (these flip with the theme) ─────────
+// Same keys in both maps (the ShellSurfaces shape enforces parity); the dark map
+// is the shell's original shipped values, so the dark theme is pixel-identical.
+interface ShellSurfaces {
+  appBackground: string;
+  appBackgroundDeep: string;
+  appBackgroundDeepest: string;
+  surface: string;
+  surfaceRaised: string;
+  surfaceCard: string;
+  surfaceIndigo: string;
+  surfaceViolet: string;
+  surfacePlum: string;
+  surfaceNavy: string;
+  surfaceGreenTint: string;
+  surfaceAmberTint: string;
+  surfaceRoseTint: string;
+  textBright: string;
+  textSoft: string;
+  textPale: string;
+  textSystem: string;
+  textFaded: string;
+  textDim: string;
+  textSlate: string;
+  textSteel: string;
+  textGray: string;
+  textCharcoal: string;
+  navInactive: string;
+  hairline: string;
+  hairlineFaint: string;
+  hairlineFainter: string;
+}
+
+const DARK_SURFACES: ShellSurfaces = {
+  appBackground: '#0B0D1F',
+  appBackgroundDeep: '#0A0D1C',
+  appBackgroundDeepest: '#050715',
+  surface: '#141A32',
+  surfaceRaised: '#1B2247',
+  surfaceCard: '#191A23',
+  surfaceIndigo: '#1F2243',
+  surfaceViolet: '#221D42',
+  surfacePlum: '#2A2040',
+  surfaceNavy: '#182450',
+  surfaceGreenTint: '#12322B',
+  surfaceAmberTint: '#33260F',
+  surfaceRoseTint: '#33202A',
+  textBright: '#F1F5F9',
+  textSoft: '#E2E8F0',
+  textPale: '#E2E2E2',
+  textSystem: '#E5E5EA',
+  textFaded: '#A0A9C9',
+  textDim: '#5A6178',
+  textSlate: '#64748B',
+  textSteel: '#8A93B5',
+  textGray: '#A0A0A0',
+  textCharcoal: '#4B5563',
+  navInactive: '#666872',
+  hairline: 'rgba(255,255,255,0.08)',
+  hairlineFaint: 'rgba(255,255,255,0.07)',
+  hairlineFainter: 'rgba(255,255,255,0.06)',
+};
+
+// Day-mode surfaces: clean white cards on an off-white grid, slate-family text,
+// black-alpha hairlines. Tints mirror the file-type badge families in light.
+const LIGHT_SURFACES: ShellSurfaces = {
+  appBackground: '#F5F6FA',
+  appBackgroundDeep: '#EDEFF6',
+  appBackgroundDeepest: '#E3E7F1',
+  surface: '#FFFFFF',
+  surfaceRaised: '#FFFFFF',
+  surfaceCard: '#FFFFFF',
+  surfaceIndigo: '#EEF1FF',
+  surfaceViolet: '#F3EEFF',
+  surfacePlum: '#F5EEFF',
+  surfaceNavy: '#E9EEFF',
+  surfaceGreenTint: '#E3F5EE',
+  surfaceAmberTint: '#FBF0DD',
+  surfaceRoseTint: '#FCE7EC',
+  textBright: '#0F172A',
+  textSoft: '#1E293B',
+  textPale: '#334155',
+  textSystem: '#1C1C1E',
+  textFaded: '#5A6274',
+  textDim: '#8A93A6',
+  textSlate: '#64748B',
+  textSteel: '#5B647F',
+  textGray: '#6B7280',
+  textCharcoal: '#4B5563',
+  navInactive: '#9AA0AE',
+  hairline: 'rgba(0,0,0,0.08)',
+  hairlineFaint: 'rgba(0,0,0,0.06)',
+  hairlineFainter: 'rgba(0,0,0,0.05)',
+};
+
+/** Build the shell palette from a plugin theme; the dark set = today's exact UI. */
+export const createPalette = (colors: ThemeColors = base) => {
+  const dark = isDarkTheme(colors);
+  return {
+    // ── Plugin-linked tokens (always from the active theme) ──────────
+    primary: colors.primary,
+    textMuted: colors.textMuted,
+    success: colors.success,
+    error: colors.error,
+    // Inactive counterpart of `primary` for meter/waveform bars.
+    surfaceMuted: colors.surfaceMuted,
+
+    // ── Shared (non-flipping) tokens ────────────────────────────────
+    ...SHARED,
+
+    // ── Browsing surfaces / text / hairlines (flip with the theme) ──
+    ...(dark ? DARK_SURFACES : LIGHT_SURFACES),
+
+    /** True when the active theme is dark — lets a component branch layout/logic. */
+    isDark: dark,
+  };
+};
+
+export type LibraryPalette = ReturnType<typeof createPalette>;
+
+/** Launch-time palette snapshot — used by static StyleSheet.create() styles. */
+export const libraryPalette: LibraryPalette = createPalette(
+  getCurrentCameraTheme().colors
+);
+
+/**
+ * Live palette hook: re-derives the whole shell palette whenever the global
+ * camera theme changes. Use in components that must react to runtime
+ * re-theming (i.e. the persistent library shell); static one-shot styles can
+ * keep the launch-time `libraryPalette`.
+ */
+export function useLibraryPalette(): LibraryPalette {
+  const [current, setCurrent] = useState<LibraryPalette>(() =>
+    createPalette(getCurrentCameraTheme().colors)
+  );
+
+  useEffect(
+    () =>
+      subscribeToCameraTheme((theme) =>
+        setCurrent(createPalette(theme.colors))
+      ),
+    []
+  );
+
+  return current;
+}

package/src/library/responsive.ts

@@ -0,0 +1,49 @@
+/**
+ * responsive — the ONE source of scaling math for the media library shell.
+ *
+ * Every screen and component (MediaLibraryScreen, ExpandableFab, FileTiles,
+ * Document/Audio previews) imports these helpers instead of re-deriving them
+ * from Dimensions.get('window') locally, so chrome scales identically
+ * everywhere and there is a single place to reason about device size.
+ *
+ * Portrait-normalized: the SHORTER window edge is width, the longer is height.
+ * Module-level Dimensions.get is a launch-time snapshot — without
+ * normalization, an app launched in landscape would compute scaleW from the
+ * ~844px edge and permanently inflate every padding, radius and font. Layout
+ * that must track live rotation (pager page widths, viewer slides) uses
+ * useWindowDimensions at render time instead; these helpers size CHROME
+ * (paddings, fonts, icons), which should stay constant across rotation.
+ */
+import { Dimensions, PixelRatio } from 'react-native';
+
+const { width: WIN_W, height: WIN_H } = Dimensions.get('window');
+
+/** Portrait-normalized window edges (launch-time snapshot). */
+export const SCREEN_W = Math.min(WIN_W, WIN_H);
+export const SCREEN_H = Math.max(WIN_W, WIN_H);
+
+/** Design base — standard iPhone / mid-range Android portrait canvas. */
+export const BASE_W = 390;
+export const BASE_H = 844;
+
+// Clamped: tablets get moderately larger chrome, not 2× paddings; tiny phones
+// never shrink touch targets below ~85% of design size.
+const scaleW = Math.min(Math.max(SCREEN_W / BASE_W, 0.85), 1.35);
+const scaleH = Math.min(Math.max(SCREEN_H / BASE_H, 0.85), 1.35);
+const fontScale = PixelRatio.getFontScale();
+
+/** Width-proportional scaling. */
+export const wp = (size: number) => Math.round(size * scaleW);
+
+/** Height-proportional scaling. */
+export const hp = (size: number) => Math.round(size * scaleH);
+
+/** Moderate scale — averages width scale with 1:1 for balanced sizing. */
+export const ms = (size: number, factor = 0.5) =>
+  Math.round(size + (scaleW - 1) * size * factor);
+
+/** Font scaling — clamped, and neutralizes the system font-size setting. */
+export const fs = (size: number) => {
+  const scaled = Math.round(size * Math.min(scaleW, 1.35));
+  return Math.round(scaled / fontScale);
+};