react-native-ensys-camera-x 1.0.7

package/src/theme.tsx

@@ -0,0 +1,467 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react';
+
+import type {
+  CameraThemeConfig,
+  CameraThemeInput,
+  CameraThemePreset,
+  CameraThemePalette,
+  CameraThemeTypography,
+  CameraThemeSpacing,
+  CameraThemeBorderRadius,
+  CameraThemeShadow,
+  CameraThemeComponentStyles,
+} from './types';
+
+/**
+ * Recursively-optional view of a theme object.
+ *
+ * The presets below, and every override a host passes in, only name the handful
+ * of values they actually change — nested sections included. A plain
+ * `Partial<CameraThemeConfig>` is shallow, so it would demand a *complete*
+ * `components` / `typography` object as soon as either is mentioned at all.
+ * [mergeDeep] merges section by section, so this is the type that describes what
+ * it really accepts. Functions and arrays are left intact (replaced wholesale
+ * rather than merged), matching [mergeDeep]'s runtime behaviour.
+ */
+type DeepPartial<T> = T extends (...args: never[]) => unknown
+  ? T
+  : T extends readonly unknown[]
+    ? T
+    : T extends object
+      ? { [K in keyof T]?: DeepPartial<T[K]> }
+      : T;
+
+const createShadow = (
+  color: string,
+  opacity: number,
+  radius: number,
+  offsetHeight: number
+): CameraThemeShadow => ({
+  color,
+  opacity,
+  radius,
+  offset: { width: 0, height: offsetHeight },
+});
+
+const createPalette = (): CameraThemePalette => ({
+  background: '#000000',
+  surface: '#111827',
+  surfaceMuted: '#1F2937',
+  surfaceElevated: '#FFFFFF',
+  primary: '#4A56FF',
+  primaryMuted: 'rgba(74, 86, 255, 0.16)',
+  primaryContrast: '#FFFFFF',
+  text: '#FFFFFF',
+  textMuted: '#94A3B8',
+  textSecondary: '#CBD5E1',
+  border: 'rgba(255,255,255,0.12)',
+  borderStrong: 'rgba(255,255,255,0.2)',
+  overlay: 'rgba(0, 0, 0, 0.45)',
+  overlayStrong: 'rgba(0, 0, 0, 0.68)',
+  accent: '#4A56FF',
+  success: '#34D399',
+  error: '#FF5B5B',
+  warning: '#FBBF24',
+});
+
+const createTypography = (): CameraThemeTypography => ({
+  fontFamily: 'System',
+  headingSize: 18,
+  bodySize: 16,
+  captionSize: 13,
+  buttonSize: 14,
+  fontWeights: {
+    regular: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+});
+
+const createSpacing = (): CameraThemeSpacing => ({
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  xxl: 24,
+});
+
+const createBorderRadius = (): CameraThemeBorderRadius => ({
+  sm: 6,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  pill: 999,
+  circle: 999,
+});
+
+const createComponents = (): CameraThemeComponentStyles => ({
+  cameraPreview: {
+    background: '#111111',
+    overlay: 'rgba(0, 0, 0, 0.3)',
+    placeholderText: '#FFFFFF',
+    loadingText: '#FFFFFF',
+    controlButtonBackground: 'rgba(0, 0, 0, 0.5)',
+    controlButtonText: '#FFFFFF',
+    captureButtonBackground: '#FFFFFF',
+    captureButtonInnerBorder: '#333333',
+    closeButtonBackground: 'rgba(0, 0, 0, 0.5)',
+    closeButtonText: '#FFFFFF',
+    modeIndicatorBackground: 'rgba(0, 0, 0, 0.6)',
+    modeIndicatorText: '#FFFFFF',
+    controlButtonSize: 50,
+    controlIconSize: 22,
+    controlButtonTextSize: 24,
+    captureButtonSize: 70,
+    captureButtonInnerSize: 60,
+    captureButtonBorderWidth: 2,
+    closeButtonSize: 40,
+    closeIconSize: 20,
+    closeButtonTextSize: 24,
+    modeIndicatorRadius: 15,
+    modeIndicatorPaddingVertical: 6,
+    modeIndicatorPaddingHorizontal: 12,
+    modeIndicatorIconSize: 18,
+    modeIndicatorTextSize: 20,
+    controlsBottomInset: 20,
+    controlsPaddingHorizontal: 30,
+    topInset: 20,
+    sideInset: 20,
+    placeholderTextSize: 18,
+    loadingTextSize: 16,
+    disabledOpacity: 0.7,
+  },
+  responsivePreviewContainer: {
+    background: '#000000',
+    borderRadius: 18,
+    widthRatio: 0.96,
+    maxWidth: 720,
+    maxHeightRatio: 0.92,
+  },
+  audioPlayer: {
+    containerBackground: '#1E293B',
+    borderColor: 'rgba(255,255,255,0.08)',
+    borderRadius: 16,
+    shadow: createShadow('#000000', 0.3, 8, 4),
+    progressTrackBackground: 'rgba(255,255,255,0.1)',
+    progressFillBackground: '#4A56FF',
+    iconButtonBackground: 'rgba(255,255,255,0.1)',
+    iconColor: '#FFFFFF',
+    titleColor: '#E2E8F0',
+    textColor: '#FFFFFF',
+    containerBorderWidth: 1,
+    containerElevation: 8,
+    progressTrackHeight: 4,
+    contentPaddingHorizontal: 12,
+    contentPaddingVertical: 12,
+    iconButtonSize: 40,
+    iconButtonRadius: 20,
+    playIconSize: 18,
+    closeIconSize: 16,
+    titleFontSize: 15,
+    titleFontWeight: '600',
+    titleMarginHorizontal: 12,
+    iconTextSize: 16,
+    iconTextWeight: '800',
+    activeOpacity: 0.9,
+  },
+});
+
+const baseThemeConfig: CameraThemeConfig = {
+  name: 'default',
+  colors: createPalette(),
+  typography: createTypography(),
+  spacing: createSpacing(),
+  borderRadius: createBorderRadius(),
+  shadows: {
+    small: createShadow('#000000', 0.2, 4, 2),
+    medium: createShadow('#000000', 0.3, 8, 4),
+  },
+  components: createComponents(),
+};
+
+const presetOverrides: Record<
+  CameraThemePreset,
+  DeepPartial<CameraThemeConfig>
+> = {
+  default: {},
+  dark: {
+    colors: {
+      background: '#050816',
+      surface: '#111827',
+      surfaceMuted: '#1F2937',
+      surfaceElevated: '#FFFFFF',
+      primary: '#4A56FF',
+      primaryMuted: 'rgba(74, 86, 255, 0.16)',
+      primaryContrast: '#FFFFFF',
+      text: '#FFFFFF',
+      textMuted: '#94A3B8',
+      textSecondary: '#CBD5E1',
+      border: 'rgba(255,255,255,0.12)',
+      borderStrong: 'rgba(255,255,255,0.2)',
+      overlay: 'rgba(0, 0, 0, 0.45)',
+      overlayStrong: 'rgba(0, 0, 0, 0.68)',
+      accent: '#4A56FF',
+      success: '#34D399',
+      error: '#FF5B5B',
+      warning: '#FBBF24',
+    },
+  },
+  light: {
+    colors: {
+      background: '#F8FAFC',
+      surface: '#FFFFFF',
+      surfaceMuted: '#F1F5F9',
+      surfaceElevated: '#FFFFFF',
+      primary: '#4A56FF',
+      primaryMuted: 'rgba(74, 86, 255, 0.16)',
+      primaryContrast: '#FFFFFF',
+      text: '#0F172A',
+      textMuted: '#64748B',
+      textSecondary: '#334155',
+      border: 'rgba(15, 23, 42, 0.1)',
+      borderStrong: 'rgba(15, 23, 42, 0.16)',
+      overlay: 'rgba(15, 23, 42, 0.32)',
+      overlayStrong: 'rgba(15, 23, 42, 0.54)',
+      accent: '#4A56FF',
+      success: '#16A34A',
+      error: '#DC2626',
+      warning: '#D97706',
+    },
+    components: {
+      cameraPreview: {
+        background: '#F8FAFC',
+        overlay: 'rgba(15, 23, 42, 0.2)',
+        placeholderText: '#0F172A',
+        loadingText: '#0F172A',
+        controlButtonBackground: 'rgba(15, 23, 42, 0.2)',
+        controlButtonText: '#0F172A',
+        captureButtonBackground: '#FFFFFF',
+        captureButtonInnerBorder: '#CBD5E1',
+        closeButtonBackground: 'rgba(15, 23, 42, 0.2)',
+        closeButtonText: '#0F172A',
+        modeIndicatorBackground: 'rgba(15, 23, 42, 0.16)',
+        modeIndicatorText: '#0F172A',
+      },
+      responsivePreviewContainer: {
+        background: '#F8FAFC',
+        borderRadius: 18,
+      },
+      audioPlayer: {
+        containerBackground: '#FFFFFF',
+        borderColor: 'rgba(15, 23, 42, 0.08)',
+        borderRadius: 16,
+        shadow: createShadow('#CBD5E1', 0.2, 8, 4),
+        progressTrackBackground: 'rgba(15, 23, 42, 0.1)',
+        progressFillBackground: '#4A56FF',
+        iconButtonBackground: 'rgba(15, 23, 42, 0.08)',
+        iconColor: '#0F172A',
+        titleColor: '#334155',
+        textColor: '#0F172A',
+      },
+    },
+  },
+  minimal: {
+    colors: {
+      background: '#000000',
+      surface: '#111111',
+      surfaceMuted: '#1A1A1A',
+      surfaceElevated: '#1F1F1F',
+      primary: '#FFFFFF',
+      primaryMuted: 'rgba(255, 255, 255, 0.16)',
+      primaryContrast: '#000000',
+      text: '#FFFFFF',
+      textMuted: '#A1A1AA',
+      textSecondary: '#D4D4D8',
+      border: 'rgba(255,255,255,0.12)',
+      borderStrong: 'rgba(255,255,255,0.24)',
+      overlay: 'rgba(0, 0, 0, 0.6)',
+      overlayStrong: 'rgba(0, 0, 0, 0.8)',
+      accent: '#FFFFFF',
+      success: '#FFFFFF',
+      error: '#FFFFFF',
+      warning: '#FFFFFF',
+    },
+    typography: {
+      fontFamily: 'System',
+      headingSize: 16,
+      bodySize: 14,
+      captionSize: 12,
+      buttonSize: 13,
+    },
+    components: {
+      cameraPreview: {
+        background: '#000000',
+        overlay: 'rgba(255,255,255,0.08)',
+        placeholderText: '#FFFFFF',
+        loadingText: '#FFFFFF',
+        controlButtonBackground: 'rgba(255,255,255,0.12)',
+        controlButtonText: '#FFFFFF',
+        captureButtonBackground: '#FFFFFF',
+        captureButtonInnerBorder: '#FFFFFF',
+        closeButtonBackground: 'rgba(255,255,255,0.12)',
+        closeButtonText: '#FFFFFF',
+        modeIndicatorBackground: 'rgba(255,255,255,0.12)',
+        modeIndicatorText: '#FFFFFF',
+      },
+      responsivePreviewContainer: {
+        background: '#000000',
+        borderRadius: 16,
+      },
+      audioPlayer: {
+        containerBackground: '#111111',
+        borderColor: 'rgba(255,255,255,0.12)',
+        borderRadius: 12,
+        shadow: createShadow('#000000', 0.2, 4, 2),
+        progressTrackBackground: 'rgba(255,255,255,0.12)',
+        progressFillBackground: '#FFFFFF',
+        iconButtonBackground: 'rgba(255,255,255,0.12)',
+        iconColor: '#FFFFFF',
+        titleColor: '#FFFFFF',
+        textColor: '#FFFFFF',
+      },
+    },
+  },
+};
+
+function mergeDeep<T>(base: T, override?: DeepPartial<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 (
+      value !== null &&
+      typeof value === 'object' &&
+      !Array.isArray(value) &&
+      existing !== null &&
+      typeof existing === 'object' &&
+      !Array.isArray(existing)
+    ) {
+      merged[key] = mergeDeep(existing as Record<string, unknown>, value as Record<string, unknown>);
+    } else {
+      merged[key] = value;
+    }
+  });
+
+  return merged as T;
+}
+
+export const DEFAULT_CAMERA_THEME_CONFIG: CameraThemeConfig = (() => {
+  const preset = presetOverrides.default;
+  return mergeDeep(baseThemeConfig, { ...preset, name: 'default' }) as CameraThemeConfig;
+})();
+
+export function createCameraTheme(
+  overrides: Partial<CameraThemeConfig> = {}
+): CameraThemeConfig {
+  return mergeDeep(DEFAULT_CAMERA_THEME_CONFIG, overrides) as CameraThemeConfig;
+}
+
+export function resolveCameraTheme(
+  theme?: CameraThemeInput
+): CameraThemeConfig {
+  if (!theme) {
+    return getCurrentCameraTheme();
+  }
+
+  if (typeof theme === 'string') {
+    const preset = presetOverrides[theme as CameraThemePreset] ?? presetOverrides.default;
+    return mergeDeep(DEFAULT_CAMERA_THEME_CONFIG, {
+      ...preset,
+      name: theme as CameraThemePreset,
+    }) as CameraThemeConfig;
+  }
+
+  return mergeDeep(DEFAULT_CAMERA_THEME_CONFIG, theme) as CameraThemeConfig;
+}
+
+const CameraThemeContext = createContext<CameraThemeConfig | undefined>(undefined);
+
+let currentCameraTheme: CameraThemeConfig = DEFAULT_CAMERA_THEME_CONFIG;
+const themeListeners = new Set<(theme: CameraThemeConfig) => void>();
+
+export function setGlobalCameraTheme(theme: CameraThemeInput): CameraThemeConfig {
+  const resolved = resolveCameraTheme(theme);
+  currentCameraTheme = resolved;
+  themeListeners.forEach((listener) => listener(resolved));
+  return resolved;
+}
+
+export function getCurrentCameraTheme(): CameraThemeConfig {
+  return currentCameraTheme;
+}
+
+export function subscribeToCameraTheme(
+  listener: (theme: CameraThemeConfig) => void
+): () => void {
+  themeListeners.add(listener);
+  return () => {
+    themeListeners.delete(listener);
+  };
+}
+
+export interface CameraThemeProviderProps {
+  children: ReactNode;
+  theme?: CameraThemeInput;
+}
+
+export const CameraThemeProvider: FC<CameraThemeProviderProps> = ({
+  children,
+  theme,
+}) => {
+  const [activeTheme, setActiveTheme] = useState<CameraThemeConfig>(() =>
+    resolveCameraTheme(theme ?? getCurrentCameraTheme())
+  );
+
+  useEffect(() => {
+    if (theme !== undefined) {
+      const resolved = setGlobalCameraTheme(theme);
+      setActiveTheme(resolved);
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    const unsubscribe = subscribeToCameraTheme((nextTheme) => {
+      setActiveTheme(nextTheme);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const value = useMemo(() => activeTheme, [activeTheme]);
+
+  return (
+    <CameraThemeContext.Provider value={value}>
+      {children}
+    </CameraThemeContext.Provider>
+  );
+};
+
+export function useCameraTheme(): CameraThemeConfig {
+  const contextTheme = useContext(CameraThemeContext);
+  const [theme, setTheme] = useState<CameraThemeConfig>(getCurrentCameraTheme());
+
+  useEffect(() => {
+    const unsubscribe = subscribeToCameraTheme((nextTheme) => {
+      setTheme(nextTheme);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return contextTheme ?? theme;
+}
+