react-native-image-stitcher 0.1.0

package/src/camera/CaptureHeader.tsx

@@ -0,0 +1,184 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CaptureHeader — top-of-screen header for any capture surface.
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │  ‹ Back        Cola Promo End Cap                        │
+ *   │  Photograph the promotional cola end cap.                │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Two stacked rows — title row (back arrow + centred title) and an
+ * optional guidance line below.  Lives in the SDK so every capture
+ * surface gets identical chrome without re-implementing safe-area
+ * handling, accessibility labels, and contrast on a black preview.
+ *
+ * Theming:
+ *   The host has its own theme system; rather than coupling the SDK
+ *   to it, the component exposes a small set of color props
+ *   (defaulted to white-on-black for visibility against the camera
+ *   preview).  Hosts that want to override pass `colors`.
+ */
+
+import React from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+
+export interface CaptureHeaderProps {
+  /** The audit / surface title.  Centred horizontally. */
+  title: string;
+  /**
+   * Called when the back affordance is pressed.  If omitted, the
+   * back button is hidden entirely (use this for surfaces invoked
+   * as a top-level tab where back doesn't make sense).
+   */
+  onBack?: () => void;
+  /** Custom label for the back button.  Defaults to "‹ Back". */
+  backLabel?: string;
+  /**
+   * Called when the gear / settings affordance is pressed.  If
+   * omitted, no settings icon is rendered.  Wire this to the
+   * host's PanoramaSettingsModal `visible` state.
+   */
+  onSettingsPress?: () => void;
+  /**
+   * Optional second-line guidance text shown below the title row.
+   * Renders nothing if absent.
+   */
+  guidance?: string;
+  /**
+   * Top inset in pixels.  Pass `useSafeAreaInsets().top` from
+   * react-native-safe-area-context if your app uses it; otherwise a
+   * sensible default is applied.
+   */
+  topInset?: number;
+  /** Override the default text/background colors. */
+  colors?: {
+    background?: string;
+    title?: string;
+    accent?: string;
+    guidanceBackground?: string;
+    guidanceText?: string;
+  };
+  /** Additional style applied to the outer container. */
+  style?: StyleProp<ViewStyle>;
+}
+
+
+export function CaptureHeader({
+  title,
+  onBack,
+  backLabel = '‹ Back',
+  onSettingsPress,
+  guidance,
+  topInset = 0,
+  colors,
+  style,
+}: CaptureHeaderProps): React.JSX.Element {
+  const bg = colors?.background ?? '#000000';
+  const titleColor = colors?.title ?? '#ffffff';
+  const accent = colors?.accent ?? '#FF9F0A';
+  const guidanceBg = colors?.guidanceBackground ?? 'rgba(255,255,255,0.08)';
+  const guidanceColor = colors?.guidanceText ?? '#ffffff';
+
+  return (
+    <View style={[{ backgroundColor: bg }, style]}>
+      <View style={[styles.titleRow, { paddingTop: topInset + 8 }]}>
+        {onBack ? (
+          <Pressable
+            onPress={onBack}
+            hitSlop={12}
+            accessibilityRole="button"
+            accessibilityLabel="Go back"
+            style={styles.backButton}
+          >
+            <Text style={[styles.backText, { color: accent }]}>
+              {backLabel}
+            </Text>
+          </Pressable>
+        ) : (
+          // Empty spacer keeps the title centred even when back is hidden.
+          <View style={styles.backButton} />
+        )}
+        <Text
+          style={[styles.title, { color: titleColor }]}
+          numberOfLines={1}
+          accessibilityRole="header"
+        >
+          {title}
+        </Text>
+        {/* Settings gear (right side).  Falls back to a spacer when
+         *  the host doesn't wire a handler — keeps the title centred. */}
+        {onSettingsPress ? (
+          <Pressable
+            onPress={onSettingsPress}
+            hitSlop={12}
+            accessibilityRole="button"
+            accessibilityLabel="Open panorama settings"
+            style={styles.backButton}
+          >
+            <Text style={[styles.gearIcon, { color: accent }]}>⚙</Text>
+          </Pressable>
+        ) : (
+          <View style={styles.backButton} />
+        )}
+      </View>
+
+      {guidance ? (
+        <View
+          style={[styles.guidance, { backgroundColor: guidanceBg }]}
+          accessibilityRole="text"
+        >
+          <Text
+            style={[styles.guidanceText, { color: guidanceColor }]}
+            numberOfLines={2}
+          >
+            {guidance}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+
+const styles = StyleSheet.create({
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  backButton: {
+    minWidth: 64,
+    paddingVertical: 4,
+  },
+  backText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  title: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  guidance: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  guidanceText: {
+    fontSize: 13,
+  },
+  gearIcon: {
+    fontSize: 22,
+    textAlign: 'right',
+  },
+});

package/src/camera/CapturePreview.tsx

@@ -0,0 +1,318 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * CapturePreview — shared full-screen image preview used for BOTH:
+ *   1. Tap-to-preview from <CaptureThumbnailStrip> (existing thumbnails)
+ *   2. Post-stitch confirmation (newly produced panorama)
+ *
+ *   ┌──────────────────────────────────────────────────────────┐
+ *   │                                              [✕ close]   │
+ *   │            ┌──────────────────────────────┐              │
+ *   │            │     image (resizeMode=        │              │
+ *   │            │              contain)         │              │
+ *   │            └──────────────────────────────┘              │
+ *   │                                                          │
+ *   │      [action 1]   [action 2]   [action 3]                │
+ *   └──────────────────────────────────────────────────────────┘
+ *
+ * Actions are passed in by the host so a single component can
+ * render the right buttons for each context:
+ *   - Thumbnail tap, unsubmitted capture → [Delete] [Recapture]
+ *   - Thumbnail tap, already-synced capture → [] (just close)
+ *   - Post-stitch → [Discard] [Retry] [Save]
+ *
+ * The component is presentational — it does not know about audit
+ * state, sync state, or any host-domain concept beyond the URI +
+ * dimensions to display and the action callbacks to fire.
+ */
+
+import React from 'react';
+import {
+  Image,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+
+export type CapturePreviewActionVariant =
+  | 'primary'
+  | 'neutral'
+  | 'ghost'
+  | 'destructive';
+
+
+export interface CapturePreviewAction {
+  /** Button label (visible text). */
+  label: string;
+  /** Optional leading glyph — usually a unicode arrow / check / cross. */
+  icon?: string;
+  /** Visual variant.  Defaults to "neutral". */
+  variant?: CapturePreviewActionVariant;
+  /** Disabled state — useful while an async action is in flight. */
+  disabled?: boolean;
+  /**
+   * Called when the user presses the button.  Caller decides
+   * whether the preview should close after — call `onClose` from
+   * inside if that's the desired behaviour.
+   */
+  onPress: () => void;
+}
+
+
+export interface CapturePreviewProps {
+  /** Whether the modal is shown.  Drive from host state. */
+  visible: boolean;
+  /** file:// or http(s) URI to display. */
+  imageUri: string;
+  /** Image width in px (for aspect-ratio rendering). */
+  imageWidth?: number;
+  /** Image height in px. */
+  imageHeight?: number;
+  /**
+   * Action buttons rendered along the bottom.  Empty array (or
+   * undefined) renders no buttons — only the close affordance is
+   * available.  Up to 3 actions display cleanly across most
+   * widths; more wraps on a typical phone.
+   */
+  actions?: CapturePreviewAction[];
+  /**
+   * Called when the user dismisses the preview without choosing an
+   * action — tap on the close button, tap on the backdrop outside
+   * the image, or hardware back on Android.
+   */
+  onClose: () => void;
+  /** Optional title shown at the top of the modal. */
+  title?: string;
+}
+
+
+export function CapturePreview({
+  visible,
+  imageUri,
+  imageWidth,
+  imageHeight,
+  actions,
+  onClose,
+  title,
+}: CapturePreviewProps): React.JSX.Element {
+  const aspectRatio =
+    imageWidth && imageHeight && imageWidth > 0 && imageHeight > 0
+      ? imageWidth / imageHeight
+      : 16 / 9;
+  const hasActions = actions && actions.length > 0;
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <View style={styles.backdrop}>
+        {/* Top bar — title centred, close X right-aligned. */}
+        <View style={styles.topBar}>
+          <View style={styles.topBarSpacer} />
+          {title ? (
+            <Text style={styles.title} accessibilityRole="header">
+              {title}
+            </Text>
+          ) : (
+            <View style={styles.topBarSpacer} />
+          )}
+          <Pressable
+            onPress={onClose}
+            hitSlop={20}
+            style={styles.closeButton}
+            accessibilityRole="button"
+            accessibilityLabel="Close preview"
+          >
+            <Text style={styles.closeText}>×</Text>
+          </Pressable>
+        </View>
+
+        {/* Tapping outside the image (on the dim backdrop) also
+         *  closes — matches the quick-dismiss pattern users learn
+         *  from iOS share sheets. */}
+        <Pressable
+          style={styles.imageWrapper}
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="Close preview"
+        >
+          <Image
+            source={{ uri: imageUri }}
+            style={[styles.image, { aspectRatio }]}
+            resizeMode="contain"
+            accessibilityIgnoresInvertColors
+          />
+        </Pressable>
+
+        {hasActions ? (
+          <View style={styles.buttonRow}>
+            {actions!.map((action, idx) => (
+              <Pressable
+                key={`${action.label}-${idx}`}
+                onPress={action.onPress}
+                disabled={action.disabled}
+                style={[
+                  styles.button,
+                  buttonStyleFor(action.variant ?? 'neutral'),
+                  action.disabled ? styles.buttonDisabled : null,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel={action.label}
+                accessibilityState={{ disabled: action.disabled }}
+              >
+                <Text
+                  style={[
+                    styles.buttonText,
+                    buttonTextStyleFor(action.variant ?? 'neutral'),
+                  ]}
+                  numberOfLines={1}
+                >
+                  {action.icon ? `${action.icon}  ` : ''}{action.label}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        ) : null}
+      </View>
+    </Modal>
+  );
+}
+
+
+function buttonStyleFor(variant: CapturePreviewActionVariant) {
+  switch (variant) {
+    case 'primary':
+      return styles.buttonPrimary;
+    case 'destructive':
+      return styles.buttonDestructive;
+    case 'ghost':
+      return styles.buttonGhost;
+    case 'neutral':
+    default:
+      return styles.buttonNeutral;
+  }
+}
+
+
+function buttonTextStyleFor(variant: CapturePreviewActionVariant) {
+  switch (variant) {
+    case 'primary':
+      return styles.buttonTextPrimary;
+    case 'destructive':
+      return styles.buttonTextDestructive;
+    case 'ghost':
+      return styles.buttonTextGhost;
+    case 'neutral':
+    default:
+      return styles.buttonTextNeutral;
+  }
+}
+
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.96)',
+    paddingTop: 56,
+    paddingBottom: 32,
+    paddingHorizontal: 16,
+  },
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  topBarSpacer: {
+    width: 44,
+  },
+  title: {
+    flex: 1,
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  closeButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(255,255,255,0.12)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeText: {
+    color: '#ffffff',
+    fontSize: 28,
+    fontWeight: '300',
+    lineHeight: 32,
+    marginTop: -2,
+  },
+  imageWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: '100%',
+    maxHeight: '100%',
+    backgroundColor: '#111',
+    borderRadius: 4,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 16,
+    gap: 12,
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonDisabled: {
+    opacity: 0.45,
+  },
+  buttonPrimary: {
+    backgroundColor: '#34C759',
+  },
+  buttonNeutral: {
+    backgroundColor: 'rgba(255,255,255,0.12)',
+  },
+  buttonGhost: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  buttonDestructive: {
+    backgroundColor: '#FF3B30',
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  buttonTextPrimary: {
+    color: '#ffffff',
+    fontWeight: '700',
+  },
+  buttonTextNeutral: {
+    color: '#ffffff',
+  },
+  buttonTextGhost: {
+    color: '#ffffff',
+    opacity: 0.9,
+    fontWeight: '500',
+  },
+  buttonTextDestructive: {
+    color: '#ffffff',
+    fontWeight: '700',
+  },
+});