react-native-ensys-camera-x 1.0.7

package/src/library/components/AudioPreview.tsx

@@ -0,0 +1,73 @@
+/**
+ * AudioPreview — a messaging-app-style preview for an audio asset in the full-screen viewer.
+ *
+ * Audio has no pixel frame, so this is a card: the shared MediaMetadataHeader (file name, size,
+ * date, time, duration — identical chrome to the document strip) above a NATIVE audio transport
+ * (play/pause, scrubber, elapsed/total time) driven by MediaPlayer through NativeAudioPlayerView.
+ * No third-party playback or preview library is used — the controls and duration come from the
+ * native Android layer; the card chrome is RN.
+ */
+import { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { CameraAsset } from '../../types';
+import { NativeAudioPlayerView } from '../../NativeAudioPlayerView';
+import { useCameraLocalization } from '../../localization';
+import { MediaMetadataHeader } from './MediaMetadataHeader';
+
+// ── Responsive scaling — shared with the whole app (portrait-normalized + clamped) ──
+import { ms } from '../responsive';
+import { useLibraryPalette, type LibraryPalette } from '../palette';
+
+export const AudioPreview = ({
+  asset,
+  active,
+}: {
+  asset: CameraAsset;
+  active: boolean;
+}) => {
+  const { t } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const previewUri = asset.documentUri || asset.uri;
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.container}>
+        <MediaMetadataHeader asset={asset} showDuration fallbackName={t('audio')} />
+        <View style={styles.card}>
+          {/* Native transport: play/pause + scrubber + elapsed/total time. */}
+          <NativeAudioPlayerView
+            src={previewUri}
+            active={active}
+            tintColor={palette.primary}
+            style={styles.player}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const makeStyles = (palette: LibraryPalette) =>
+  StyleSheet.create({
+    wrap: {
+      flex: 1,
+      width: '100%',
+      justifyContent: 'center',
+    },
+    container: {
+      backgroundColor: palette.surface,
+      borderRadius: ms(20),
+      borderWidth: 1,
+      borderColor: palette.hairline,
+      paddingHorizontal: ms(12),
+      paddingVertical: ms(14),
+    },
+    card: {
+      width: '100%',
+    },
+    player: {
+      width: '100%',
+      height: ms(64),
+    },
+  });

package/src/library/components/DocumentPreview.tsx

@@ -0,0 +1,361 @@
+/**
+ * DocumentPreview — in-app document preview for a document asset in the full-screen viewer.
+ *
+ * Rendered DIRECTLY inside the viewer slide through NativeDocumentPreviewView — no external
+ * app, no third-party preview library. PDF uses PdfRenderer; TXT/JSON/XML native text views;
+ * PPT/PPTX use the dedicated native PowerPoint extractor/formatter/Canvas viewer. DOCX/XLSX/
+ * ODT/ODS/RTF/CSV/EPUB are parsed natively (OOXML/ODF/RTF/EPUB structure) into layout-faithful
+ * HTML shown by a locked-down WebView. The viewer's paging, counter and close chrome are
+ * untouched: this component only fills its slide.
+ *
+ * Formats with no parser (binary-era DOC/XLS, Apple PAGES, archives, …) — and any file the
+ * native layer reports it cannot actually render — fall back to the informational card (type
+ * glyph + extension badge, file name, extension, human-readable size) with an "Open" button
+ * handing non-PowerPoint files to an external viewer via ACTION_VIEW as the last resort.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import type { CameraAsset } from '../../types';
+import { openDocument } from '../../nativeActions';
+import {
+  getDocumentPreviewKind,
+  isNativeDocumentPreviewAvailable,
+  NativeDocumentPreviewView,
+} from '../../NativeDocumentPreviewView';
+import { useCameraLocalization } from '../../localization';
+import { RenderIcon } from '../../icons';
+
+// ── Responsive scaling — shared with the whole app (portrait-normalized + clamped) ──
+import { ms, fs } from '../responsive';
+import { useLibraryPalette, type LibraryPalette } from '../palette';
+
+function baseNameOf(value?: string): string | null {
+  if (!value) return null;
+  const withoutQuery = value.split(/[?#]/)[0] ?? '';
+  const segments = withoutQuery.split(/[\\/]/);
+  let candidate = segments[segments.length - 1] ?? '';
+  try {
+    candidate = decodeURIComponent(candidate);
+  } catch {
+    // Keep the raw segment if it is malformed.
+  }
+  candidate = candidate.trim();
+  return candidate.length > 0 ? candidate : null;
+}
+
+function fileNameFromUri(uri?: string): string | null {
+  const base = baseNameOf(uri);
+  if (!base) return null;
+  const dot = base.lastIndexOf('.');
+  return dot > 0 && dot < base.length - 1 ? base : null;
+}
+
+function extensionOf(fileName?: string, mimeType?: string): string {
+  if (fileName) {
+    const dot = fileName.lastIndexOf('.');
+    if (dot >= 0 && dot < fileName.length - 1) {
+      return fileName.slice(dot + 1).toUpperCase();
+    }
+  }
+  if (mimeType) {
+    const slash = mimeType.lastIndexOf('/');
+    if (slash >= 0) return mimeType.slice(slash + 1).toUpperCase();
+  }
+  return 'FILE';
+}
+
+function formatSize(bytes?: number): string | null {
+  if (bytes === undefined || bytes === null || bytes <= 0) return null;
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const rounded = value >= 10 || unit === 0 ? Math.round(value) : Math.round(value * 10) / 10;
+  return `${rounded} ${units[unit]}`;
+}
+
+function isPowerPointExtension(ext: string): boolean {
+  return ['PPT', 'PPTX', 'PPS', 'PPSX', 'POT', 'POTX'].includes(ext);
+}
+
+export const DocumentPreview = ({
+  asset,
+  active = true,
+}: {
+  asset: CameraAsset;
+  /**
+   * False while this document's page is off-screen in the paging viewer — pauses expensive
+   * native work (PDF page rasterization), mirroring the audio/video cells' `active` gate.
+   */
+  active?: boolean;
+}) => {
+  const { t } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const [opening, setOpening] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Set when the native layer reports the file can't actually be rendered (corrupt PDF,
+  // binary bytes in a ".txt", missing WebView, …) — drops this asset to the info card.
+  const [renderFailed, setRenderFailed] = useState(false);
+
+  const [resolvedAsset, setResolvedAsset] = useState<CameraAsset>(asset);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadResolvedAsset = async () => {
+      try {
+        const refreshed = await import('../fileMetadata').then((mod) => mod.refreshAssetMetadata(asset));
+        if (!cancelled) setResolvedAsset(await refreshed);
+      } catch {
+        if (!cancelled) setResolvedAsset(asset);
+      }
+    };
+
+    loadResolvedAsset();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [asset]);
+
+  const resolvedName =
+    fileNameFromUri(resolvedAsset.documentUri) ??
+    fileNameFromUri(resolvedAsset.uri) ??
+    baseNameOf(resolvedAsset.fileName) ??
+    t('document');
+  const ext = extensionOf(resolvedName, resolvedAsset.mimeType);
+  const name = resolvedName;
+  const sizeLabel = formatSize(resolvedAsset.size) ?? t('unknownSize');
+  const isPowerPoint = isPowerPointExtension(ext);
+
+  // A recycled/re-sourced cell must never keep the previous document's failure state.
+  useEffect(() => {
+    setRenderFailed(false);
+  }, [asset.documentUri, asset.uri]);
+
+  const handleOpen = useCallback(async () => {
+    if (opening) return;
+    setError(null);
+    setOpening(true);
+    try {
+      const launched = await openDocument(previewUri, resolvedAsset.mimeType ?? '');
+      if (!launched) {
+        setError(t('noAppToOpenFile'));
+      }
+    } catch {
+      setError(t('couldNotOpenFile'));
+    } finally {
+      setOpening(false);
+    }
+  }, [resolvedAsset.documentUri, resolvedAsset.uri, resolvedAsset.mimeType, opening, t]);
+
+  const handlePreviewError = useCallback(() => setRenderFailed(true), []);
+
+  const previewUri = resolvedAsset.documentUri || resolvedAsset.uri;
+  const kind = getDocumentPreviewKind(
+    previewUri ? baseNameOf(previewUri) ?? resolvedAsset.fileName : resolvedAsset.fileName,
+    resolvedAsset.mimeType
+  );
+  const canPreviewInApp =
+    kind !== null && !renderFailed && isNativeDocumentPreviewAvailable();
+
+  if (canPreviewInApp) {
+    return (
+      <View style={styles.previewWrap}>
+        {/* The native document surface. Scrolls vertically (PDF pages / long text), which
+            coexists with the viewer's horizontal paging: sideways swipes still change slides. */}
+        <View style={styles.previewSurface}>
+          <NativeDocumentPreviewView
+            src={previewUri}
+            kind={kind}
+            active={active}
+            onPreviewError={handlePreviewError}
+            style={styles.previewNative}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.card}>
+        <View style={styles.iconBadge}>
+          <RenderIcon name="document" size={ms(46)} color={palette.isDark ? palette.accentPeriwinkle : palette.accentIndigo} strokeWidth={2} />
+          <View style={styles.extBadge}>
+            <Text style={styles.extBadgeText} numberOfLines={1}>
+              {ext}
+            </Text>
+          </View>
+        </View>
+
+        <Text style={styles.name} numberOfLines={2} ellipsizeMode="middle">
+          {name}
+        </Text>
+
+        <View style={styles.metaRow}>
+          <Text style={styles.metaText}>{ext}</Text>
+          <View style={styles.metaDot} />
+          <Text style={styles.metaText}>{sizeLabel}</Text>
+        </View>
+
+        <Text style={styles.noPreviewText}>
+          {renderFailed
+            ? t('fileCouldNotBePreviewed')
+            : t('noInAppPreview')}
+        </Text>
+
+        {!isPowerPoint ? (
+          <Pressable
+            style={({ pressed }) => [
+              styles.openButton,
+              pressed && styles.openButtonPressed,
+              opening && styles.openButtonDisabled,
+            ]}
+            onPress={handleOpen}
+            disabled={opening}
+            accessibilityRole="button"
+            accessibilityLabel={t('openNamed', name)}
+          >
+            <Text style={styles.openButtonText}>
+              {opening ? t('opening') : t('open')}
+            </Text>
+          </Pressable>
+        ) : null}
+
+        {error ? <Text style={styles.errorText}>{error}</Text> : null}
+      </View>
+    </View>
+  );
+};
+
+const makeStyles = (palette: LibraryPalette) =>
+  StyleSheet.create({
+  // ── Inline native preview ─────────────────────────────────────────
+  previewWrap: {
+    flex: 1,
+    width: '100%',
+  },
+  // The file strip's own styles now live in MediaMetadataHeader (shared with the
+  // image/video/audio previews).
+  previewSurface: {
+    flex: 1,
+    borderRadius: ms(14),
+    // Clips the square-cornered native surface (RecyclerView/WebView/ScrollView) to the
+    // rounded frame.
+    overflow: 'hidden',
+    backgroundColor: palette.surface,
+    borderWidth: 1,
+    borderColor: palette.hairline,
+  },
+  previewNative: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+
+  // ── Info card (unsupported formats / render failures) ────────────
+  wrap: {
+    flex: 1,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  card: {
+    width: '86%',
+    maxWidth: ms(360),
+    backgroundColor: palette.surface,
+    borderRadius: ms(20),
+    borderWidth: 1,
+    borderColor: palette.hairline,
+    paddingVertical: ms(28),
+    paddingHorizontal: ms(22),
+    alignItems: 'center',
+  },
+  iconBadge: {
+    width: ms(88),
+    height: ms(88),
+    borderRadius: ms(22),
+    backgroundColor: palette.surfaceRaised,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: ms(18),
+  },
+  extBadge: {
+    position: 'absolute',
+    bottom: -ms(6),
+    paddingHorizontal: ms(8),
+    paddingVertical: ms(2),
+    borderRadius: ms(6),
+    backgroundColor: palette.primary,
+    maxWidth: ms(72),
+  },
+  extBadgeText: {
+    color: palette.white,
+    fontSize: fs(10),
+    fontWeight: '800',
+    letterSpacing: 0.5,
+  },
+  name: {
+    color: palette.textBright,
+    fontSize: fs(16),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: ms(8),
+  },
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: ms(14),
+  },
+  metaText: {
+    color: palette.textFaded,
+    fontSize: fs(12.5),
+    fontWeight: '500',
+  },
+  metaDot: {
+    width: ms(3),
+    height: ms(3),
+    borderRadius: ms(2),
+    backgroundColor: palette.textDim,
+    marginHorizontal: ms(8),
+  },
+  noPreviewText: {
+    color: palette.textSteel,
+    fontSize: fs(12),
+    fontWeight: '500',
+    textAlign: 'center',
+    marginBottom: ms(18),
+  },
+  openButton: {
+    minWidth: ms(150),
+    paddingVertical: ms(12),
+    paddingHorizontal: ms(28),
+    borderRadius: ms(14),
+    backgroundColor: palette.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  openButtonPressed: {
+    backgroundColor: palette.accentIndigoDeep,
+  },
+  openButtonDisabled: {
+    opacity: 0.6,
+  },
+  openButtonText: {
+    color: palette.white,
+    fontSize: fs(14.5),
+    fontWeight: '700',
+  },
+  errorText: {
+    color: palette.accentSalmon,
+    fontSize: fs(12),
+    fontWeight: '500',
+    marginTop: ms(14),
+    textAlign: 'center',
+  },
+});