react-native-ensys-camera-x 1.0.7

package/src/library/components/MediaMetadataHeader.tsx

@@ -0,0 +1,208 @@
+/**
+ * MediaMetadataHeader — THE metadata strip for every media kind in the full-screen viewer.
+ *
+ * This is the document preview's header, lifted out verbatim: same row, same extension badge,
+ * same two-line text group, same paddings/type scale. Images, videos, audio AND documents all
+ * render through this one component, so the header can never drift between media types — there
+ * is only one set of styles to drift.
+ *
+ * What differs per kind is only WHICH fields are in the meta line, never how it looks:
+ *   images    → size · date · time · resolution
+ *   videos    → size · date · time · duration
+ *   audio     → size · date · time · duration
+ *   documents → page count · size   (unchanged from the original document strip)
+ *
+ * Every field is optional. A missing/unreadable value drops its chunk out of the line entirely
+ * rather than rendering an "Unknown …" placeholder, and the row keeps its exact height either
+ * way — the meta line is a single line whatever survives.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { CameraAsset } from '../../types';
+import { useCameraLocalization } from '../../localization';
+
+import { ms, fs } from '../responsive';
+import { useLibraryPalette, type LibraryPalette } from '../palette';
+import { refreshAssetMetadata } from '../fileMetadata';
+import {
+  formatFileSize,
+  formatMediaDate,
+  formatMediaTime,
+  formatMediaDuration,
+  formatDimensions,
+} from '../localizedFormat';
+
+export interface MediaMetadataHeaderProps {
+  asset: CameraAsset;
+  /** Append `width × height` — images only, and only when both are known. */
+  showDimensions?: boolean;
+  /** Append the clip length — videos and audio. */
+  showDuration?: boolean;
+  /** Meta chunk rendered before the size (the document strip's page count). */
+  leadingMeta?: string | null;
+  /** Include the capture date and time chunks. @default true */
+  showDateTime?: boolean;
+  /** Shown when the asset carries no usable file name at all. @default 'Media' */
+  fallbackName?: string;
+}
+
+/**
+ * Last path segment of a name or URI — never the full path.
+ *
+ * `fileName` is usually already a bare display name, but it can arrive as an absolute path
+ * (documents dir publish) or a SAF/`file://` URI depending on where the asset came from, and
+ * the header must show `IMG_20260803_114530.jpg`, not `/storage/emulated/0/…/IMG_…jpg`.
+ */
+function baseNameOf(value?: string): string | null {
+  if (!value) return null;
+  // Drop any query/fragment a content:// or file:// URI may carry.
+  const withoutQuery = value.split(/[?#]/)[0] ?? '';
+  const segments = withoutQuery.split(/[\\/]/);
+  let candidate = segments[segments.length - 1] ?? '';
+  try {
+    candidate = decodeURIComponent(candidate);
+  } catch {
+    // Malformed percent-escapes — keep the raw segment.
+  }
+  candidate = candidate.trim();
+  return candidate.length > 0 ? candidate : null;
+}
+
+/**
+ * A URI's last segment, but only when it actually looks like a file name. A `content://` URI
+ * ends in a bare MediaStore row id ("1234"), which is not a name worth showing.
+ */
+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 | undefined | null,
+  mimeType: string | undefined,
+  fallback: 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 fallback;
+}
+
+export const MediaMetadataHeader = ({
+  asset,
+  showDimensions = false,
+  showDuration = false,
+  leadingMeta = null,
+  showDateTime = true,
+  fallbackName,
+}: MediaMetadataHeaderProps) => {
+  const { t, locale } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const [resolvedAsset, setResolvedAsset] = useState<CameraAsset>(asset);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadResolvedAsset = async () => {
+      try {
+        const refreshed = await refreshAssetMetadata(asset);
+        if (!cancelled) setResolvedAsset(refreshed);
+      } catch {
+        if (!cancelled) setResolvedAsset(asset);
+      }
+    };
+
+    loadResolvedAsset();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [asset]);
+
+  // Name only — never a path. Falls back to the URI's last segment when it looks like a real
+  // file name, so a picked file with no display name still shows something meaningful.
+  const previewUri = resolvedAsset.documentUri || resolvedAsset.uri;
+  const pathName = fileNameFromUri(previewUri) ?? fileNameFromUri(resolvedAsset.uri);
+  const name = pathName ?? baseNameOf(resolvedAsset.fileName) ?? fallbackName ?? t('media');
+  const ext = extensionOf(name, resolvedAsset.mimeType, t('fileTypeGeneric'));
+
+  // Missing values contribute nothing — no placeholder text, no layout shift.
+  const metaParts = [
+    leadingMeta,
+    formatFileSize(resolvedAsset.size, locale, t),
+    showDateTime ? formatMediaDate(resolvedAsset.dateTaken, locale) : null,
+    showDateTime ? formatMediaTime(resolvedAsset.dateTaken, locale) : null,
+    showDuration ? formatMediaDuration(resolvedAsset.duration, locale) : null,
+    showDimensions
+      ? formatDimensions(resolvedAsset.width, resolvedAsset.height, locale)
+      : null,
+  ].filter((part): part is string => Boolean(part));
+
+  return (
+    <View style={styles.header}>
+      <View style={styles.badge}>
+        <Text style={styles.badgeText} numberOfLines={1}>
+          {ext}
+        </Text>
+      </View>
+      <View style={styles.textGroup}>
+        <Text style={styles.name} numberOfLines={1} ellipsizeMode="middle">
+          {name}
+        </Text>
+        {metaParts.length > 0 ? (
+          <Text style={styles.meta} numberOfLines={1} ellipsizeMode="tail">
+            {metaParts.join(' · ')}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const makeStyles = (palette: LibraryPalette) =>
+  StyleSheet.create({
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: ms(4),
+      paddingBottom: ms(10),
+    },
+    badge: {
+      paddingHorizontal: ms(8),
+      paddingVertical: ms(4),
+      borderRadius: ms(6),
+      backgroundColor: palette.primary,
+      maxWidth: ms(72),
+      marginRight: ms(10),
+    },
+    badgeText: {
+      color: palette.white,
+      fontSize: fs(10),
+      fontWeight: '800',
+      letterSpacing: 0.5,
+    },
+    textGroup: {
+      flex: 1,
+    },
+    name: {
+      color: palette.textBright,
+      fontSize: fs(13.5),
+      fontWeight: '700',
+    },
+    meta: {
+      color: palette.textFaded,
+      fontSize: fs(11),
+      fontWeight: '500',
+      marginTop: ms(1),
+    },
+  });