react-native-ensys-camera-x 1.0.7

package/src/library/components/VideoPreview.tsx

@@ -0,0 +1,478 @@
+/**
+ * VideoPreview — in-app video preview for a video asset in the full-screen viewer.
+ *
+ * Provides a polished, native-feel player on top of the native aspect-fit video surface
+ * (NativeVideoViewManager owns rotation-correct, contain scaling — the frame is never
+ * stretched, zoomed, or cropped for any resolution / orientation):
+ *   - a lighter, centred play / pause control,
+ *   - ±10s skip-back / skip-forward controls,
+ *   - a draggable seek bar with current-time and total-duration readouts.
+ *
+ * All player state (play, pause, seek, forward, backward, replay, end-of-video) is kept in
+ * sync with the native player through onPlaybackProgress / onPlaybackEnded and the `seekTo`
+ * view command.
+ */
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  UIManager,
+  findNodeHandle,
+  Text,
+  Platform,
+  type GestureResponderEvent,
+} from 'react-native';
+import type { CameraAsset } from '../../types';
+import { NativeCustomVideoView } from '../../NativeCustomVideoView';
+import { RenderIcon } from '../../icons';
+import { useCameraLocalization } from '../../localization';
+
+import { useLibraryPalette, type LibraryPalette } from '../palette';
+import { localizeDigits } from '../localizedFormat';
+
+/** How far a single skip-back / skip-forward tap moves the playhead. */
+const SEEK_STEP_MS = 10000;
+const SEEK_STEP_LABEL = '10';
+// While the finger is dragging the scrubber the thumb tracks it every frame, but native seeks
+// are throttled to this cadence so a fast drag can't flood MediaPlayer with seek requests.
+// A final, precise seek always fires on release, so the end position is exact.
+const NATIVE_SEEK_MIN_INTERVAL_MS = 50;
+// Treat the last 100ms as "ended" so a replay tap is offered even if progress stops a frame short.
+const END_EPSILON_MS = 100;
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(Math.max(value, min), max);
+
+const formatTime = (ms: number, locale?: string): string => {
+  if (!Number.isFinite(ms) || ms < 0) return localizeDigits('0:00', locale);
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return localizeDigits(`${minutes}:${String(seconds).padStart(2, '0')}`, locale);
+};
+
+export interface VideoPreviewProps {
+  asset: CameraAsset;
+  paused: boolean;
+  onTogglePause: () => void;
+  onPlaybackEnded?: () => void;
+  active: boolean;
+  controlsVisible: boolean;
+  /**
+   * Fired ONLY when the video playback area itself is tapped. The host toggles the three transport
+   * controls: a tap reveals them, and a tap while they are showing hides them again. There is no
+   * auto-hide timer — once shown the controls stay until the video is tapped again. Deliberately
+   * scoped to the video surface: the X/close, counter, Share/Delete/Info and surrounding chrome are
+   * OUTSIDE this handler and never affect (or trigger) control visibility.
+   */
+  onVideoAreaPress: () => void;
+  onControlInteraction: () => void;
+}
+
+export const VideoPreview = ({
+  asset,
+  paused,
+  onTogglePause,
+  onPlaybackEnded,
+  active,
+  controlsVisible,
+  onVideoAreaPress,
+  onControlInteraction,
+}: VideoPreviewProps) => {
+  const { t, locale } = useCameraLocalization();
+  const palette = useLibraryPalette();
+  const styles = useMemo(() => makeStyles(palette), [palette]);
+  const seekLabel = localizeDigits(SEEK_STEP_LABEL, locale);
+  const previewUri = asset.documentUri || asset.uri;
+  const nativeRef = useRef<null | { focus?: () => void }>(null);
+
+  const [currentTimeMs, setCurrentTimeMs] = useState(0);
+  const [durationMs, setDurationMs] = useState(0);
+
+  // Measured width of the scrubber track, used to turn a touch X into a 0..1 ratio.
+  const trackWidthRef = useRef(0);
+  // True while the finger is down on the scrubber: native progress events are ignored for the
+  // playhead so the thumb tracks the finger instead of being yanked back by the player's
+  // reported position (which lags a drag by up to one 200ms progress tick).
+  const isScrubbingRef = useRef(false);
+  // Latest scrub ratio, kept in a ref for the terminate handler (which has no event X).
+  const scrubValueRef = useRef(0);
+  // Timestamp of the last native seek dispatched mid-drag (throttling — see the constant above).
+  const lastNativeSeekRef = useRef(0);
+  // The one source of truth for the fill + thumb visual position. Driving it with `setValue`
+  // moves the connected Animated.Views directly (no React reconciliation), so the thumb tracks
+  // the finger every frame instead of dropping frames on per-move `setState` re-renders.
+  const scrubAnimationRef = useRef(new Animated.Value(0)).current;
+
+  const syncSeekFromNative = useCallback((nextCurrent: number, nextDuration: number) => {
+    const safeDuration = Number.isFinite(nextDuration) ? Math.max(0, nextDuration) : 0;
+    const safeCurrent = Number.isFinite(nextCurrent) ? Math.max(0, nextCurrent) : 0;
+    const boundedCurrent = safeDuration > 0 ? Math.min(safeCurrent, safeDuration) : 0;
+    const ratio = safeDuration > 0 ? boundedCurrent / safeDuration : 0;
+    setDurationMs(safeDuration);
+    setCurrentTimeMs(boundedCurrent);
+    scrubValueRef.current = ratio;
+    scrubAnimationRef.setValue(ratio);
+  }, []);
+
+  // Low-level: send the seek command to the native player only (no optimistic UI update). The
+  // native side clamps to the real duration and uses SEEK_CLOSEST, and every call is guarded, so
+  // rapid repeated seeks (a fast drag) can neither crash nor reset the clip.
+  const dispatchNativeSeek = useCallback((targetMs: number) => {
+    const handle = findNodeHandle(nativeRef.current as any);
+    if (handle === null || handle === undefined) return;
+    const safeMs = Number.isFinite(targetMs) ? Math.max(0, Math.round(targetMs)) : 0;
+    const manager = (UIManager as any).NativeCustomVideoView;
+    const commandId = manager?.Commands?.seekTo ?? 1;
+    if (Platform.OS === 'android') {
+      UIManager.dispatchViewManagerCommand(handle, commandId, [safeMs]);
+    }
+  }, []);
+
+  // Seek to an absolute position and immediately reflect it in the UI (skip buttons + replay).
+  const seekTo = useCallback(
+    (targetMs: number) => {
+      const bounded = durationMs > 0 ? clamp(targetMs, 0, durationMs) : Math.max(0, targetMs);
+      dispatchNativeSeek(bounded);
+      const ratio = durationMs > 0 ? bounded / durationMs : 0;
+      setCurrentTimeMs(bounded);
+      scrubValueRef.current = ratio;
+      // Move the thumb immediately (skip / replay) rather than waiting for the next progress tick.
+      scrubAnimationRef.setValue(ratio);
+    },
+    [durationMs, dispatchNativeSeek]
+  );
+
+  const handleSeekDelta = useCallback(
+    (deltaMs: number) => {
+      const base = durationMs > 0 ? currentTimeMs : 0;
+      seekTo(base + deltaMs);
+    },
+    [currentTimeMs, durationMs, seekTo]
+  );
+
+  const handlePrimaryAction = useCallback(() => {
+    const ended = durationMs > 0 && currentTimeMs >= durationMs - END_EPSILON_MS;
+    if (ended) {
+      // Replay from the start; if we were paused at the end, resume playing too.
+      seekTo(0);
+      if (paused) onTogglePause();
+      return;
+    }
+    onTogglePause();
+  }, [currentTimeMs, durationMs, onTogglePause, paused, seekTo]);
+
+  // Drag/tap the scrubber. The thumb + fill are moved every frame through the Animated.Value
+  // (a direct native update — no React re-render), while the time-label `setState` and the native
+  // seek are throttled together so a fast drag neither janks on reconciliation nor floods
+  // MediaPlayer. A final, precise update always fires on release (`commit`).
+  const scrubTo = useCallback(
+    (ratio: number, commit: boolean) => {
+      const clampedRatio = clamp(ratio, 0, 1);
+      const target = durationMs > 0 ? clampedRatio * durationMs : 0;
+      scrubValueRef.current = clampedRatio;
+      scrubAnimationRef.setValue(clampedRatio);
+      const now = Date.now();
+      if (commit) {
+        lastNativeSeekRef.current = now;
+        setCurrentTimeMs(target);
+        dispatchNativeSeek(target);
+        return;
+      }
+      if (now - lastNativeSeekRef.current >= NATIVE_SEEK_MIN_INTERVAL_MS) {
+        lastNativeSeekRef.current = now;
+        setCurrentTimeMs(target);
+        dispatchNativeSeek(target);
+      }
+    },
+    [durationMs, dispatchNativeSeek]
+  );
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        // Win the gesture over the enclosing horizontal pager so a sideways drag on the bar
+        // scrubs the video instead of paging to the next slide.
+        onMoveShouldSetPanResponderCapture: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: (evt: GestureResponderEvent) => {
+          onControlInteraction();
+          isScrubbingRef.current = true;
+          const width = trackWidthRef.current;
+          if (width > 0) scrubTo(evt.nativeEvent.locationX / width, false);
+        },
+        onPanResponderMove: (evt: GestureResponderEvent) => {
+          const width = trackWidthRef.current;
+          if (width > 0) scrubTo(evt.nativeEvent.locationX / width, false);
+        },
+        onPanResponderRelease: (evt: GestureResponderEvent) => {
+          const width = trackWidthRef.current;
+          const ratio = width > 0 ? evt.nativeEvent.locationX / width : scrubValueRef.current;
+          scrubTo(ratio, true);
+          isScrubbingRef.current = false;
+          // Keep the controls visible after the drag finishes (they no longer auto-hide).
+          onControlInteraction();
+        },
+        onPanResponderTerminate: () => {
+          scrubTo(scrubValueRef.current, true);
+          isScrubbingRef.current = false;
+        },
+      }),
+    [scrubTo, onControlInteraction]
+  );
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.videoWrapper}>
+        <NativeCustomVideoView
+          ref={nativeRef as any}
+          src={previewUri}
+          style={styles.video}
+          active={active}
+          paused={paused}
+          onPlaybackProgress={(event) => {
+            const { currentTimeMs: nextCurrent, durationMs: nextDuration } = event.nativeEvent;
+            if (isScrubbingRef.current) {
+              // Keep the duration fresh, but don't fight the finger over the playhead.
+              const safeDuration = Number.isFinite(nextDuration) ? Math.max(0, nextDuration) : 0;
+              setDurationMs(safeDuration);
+            } else {
+              syncSeekFromNative(nextCurrent, nextDuration);
+            }
+          }}
+          onPlaybackEnded={(event) => {
+            const endedDuration = event.nativeEvent.durationMs;
+            syncSeekFromNative(endedDuration, endedDuration);
+            onPlaybackEnded?.();
+          }}
+        />
+
+        {/* Dedicated video-area press handler. It fills ONLY the video surface (inside
+            videoWrapper) and sits UNDER the transport controls / scrubber, so tapping the video
+            toggles the controls (show, then hide on the next tap), while taps on the buttons or the
+            scrubber are handled by those (on top) and never reach here. Chrome outside this
+            wrapper — X/close, counter, Share/Delete/Info — is a sibling elsewhere in the tree and
+            is wholly unaffected. */}
+        <TouchableOpacity
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={onVideoAreaPress}
+          accessibilityLabel={t('toggleVideoControls')}
+        />
+
+        {controlsVisible && (
+          <>
+            <View style={styles.controlsOverlay} pointerEvents="box-none">
+              <TouchableOpacity
+                style={styles.skipButton}
+                activeOpacity={0.7}
+                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                onPress={() => {
+                  onControlInteraction();
+                  handleSeekDelta(-SEEK_STEP_MS);
+                }}
+                accessibilityRole="button"
+                accessibilityLabel={t('seekBackward', seekLabel)}
+              >
+                <RenderIcon name="circular_seek" direction="back" label={seekLabel} size={24} color={palette.whiteA90} strokeWidth={2} />
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.playButton}
+                activeOpacity={0.8}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                onPress={() => {
+                  onControlInteraction();
+                  handlePrimaryAction();
+                }}
+                accessibilityRole="button"
+                accessibilityLabel={t(paused ? 'play' : 'pause')}
+              >
+                <View style={styles.playBackdrop}>
+                  {/* A play triangle is optically left-heavy in a circle — nudge it right. */}
+                  <View style={{ paddingLeft: paused ? 3 : 0 }}>
+                    <RenderIcon name={paused ? 'play' : 'pause'} size={30} color={palette.whiteA90} />
+                  </View>
+                </View>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.skipButton}
+                activeOpacity={0.7}
+                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                onPress={() => {
+                  onControlInteraction();
+                  handleSeekDelta(SEEK_STEP_MS);
+                }}
+                accessibilityRole="button"
+                accessibilityLabel={t('seekForward', seekLabel)}
+              >
+                <RenderIcon name="circular_seek" direction="forward" label={seekLabel} size={24} color={palette.whiteA90} strokeWidth={2} />
+              </TouchableOpacity>
+            </View>
+            <View style={styles.scrubberWrap}>
+              <View style={styles.timeRow} pointerEvents="none">
+                <Text style={styles.timeLabel}>{formatTime(currentTimeMs, locale)}</Text>
+                <Text style={styles.timeLabel}>{formatTime(durationMs, locale)}</Text>
+              </View>
+              <View
+                style={styles.scrubberTouch}
+                onLayout={(event) => {
+                  trackWidthRef.current = event.nativeEvent.layout.width;
+                }}
+                {...panResponder.panHandlers}
+              >
+                <View style={styles.scrubberTrack}>
+                  <Animated.View
+                    style={[
+                      styles.scrubberFill,
+                      {
+                        width: scrubAnimationRef.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: ['0%', '100%'],
+                        }),
+                      },
+                    ]}
+                  />
+                  <Animated.View
+                    style={[
+                      styles.scrubberThumb,
+                      {
+                        left: scrubAnimationRef.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: ['0%', '100%'],
+                        }),
+                      },
+                    ]}
+                  />
+                </View>
+              </View>
+            </View>
+          </>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const makeStyles = (palette: LibraryPalette) =>
+  StyleSheet.create({
+  wrap: {
+    flex: 1,
+    width: '100%',
+    overflow: 'hidden',
+  },
+  videoWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    position: 'relative',
+    minHeight: 220,
+  },
+  video: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  controlsOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 26,
+  },
+  skipButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.18)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)',
+  },
+  playButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  // Subtle scrim so the lighter icon stays clearly visible over any (even bright) frame.
+  playBackdrop: {
+    width: 58,
+    height: 58,
+    borderRadius: 29,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.25)',
+  },
+  scrubberWrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 4,
+    width: '100%',
+    paddingHorizontal: 18,
+    paddingTop: 4,
+    paddingBottom: 2,
+    backgroundColor: 'rgba(0,0,0,0.22)',
+  },
+  // Tall, full-width hit area so the thin bar is still easy to grab and drag.
+  scrubberTouch: {
+    width: '100%',
+    height: 28,
+    justifyContent: 'center',
+  },
+  scrubberTrack: {
+    width: '100%',
+    height: 4,
+    borderRadius: 2,
+    position: 'relative',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,255,255,0.25)',
+  },
+  scrubberFill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: palette.primary,
+  },
+  scrubberThumb: {
+    position: 'absolute',
+    top: -5,
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: palette.white,
+    marginLeft: -7,
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+  },
+  timeRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 2,
+  },
+  timeLabel: {
+    // Sits over the video (behind a dark scrubber scrim) — stays light in both themes.
+    color: palette.white,
+    fontSize: 12,
+    fontWeight: '500',
+    opacity: 0.9,
+  },
+});

package/src/library/components/ViewerCounter.tsx

@@ -0,0 +1,71 @@
+/**
+ * ViewerCounter — the "3 / 16" position readout in the full-screen viewer's top-right corner.
+ *
+ * Exists as its own component purely for update cost. The counter has to track the finger, which
+ * means reacting to `onScroll` (~60 events/sec), and the viewer lives inside the app's root
+ * component — pushing the live index into that component's state would re-render the whole screen
+ * (and re-run the viewer FlatList's renderItem identity) on every slide crossing of a fast fling.
+ *
+ * So the parent drives this imperatively through a ref: `setIndex()` re-renders these two lines of
+ * text and nothing else. The `index` prop remains the source of truth for React-driven changes
+ * (opening the viewer, momentum settling, a resize re-snap) and re-syncs the local value whenever
+ * it changes, so the imperative fast path can never leave the counter out of step at rest.
+ */
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Text, type StyleProp, type TextStyle } from 'react-native';
+import { useCameraLocalization } from '../../localization';
+import { localizeDigits } from '../localizedFormat';
+
+export interface ViewerCounterHandle {
+  /** Show `index` (0-based) immediately. Ignored when it doesn't change the rendered text. */
+  setIndex: (index: number) => void;
+}
+
+export interface ViewerCounterProps {
+  /** Settled 0-based position — re-syncs the counter when the parent moves it. */
+  index: number;
+  total: number;
+  style?: StyleProp<TextStyle>;
+}
+
+export const ViewerCounter = forwardRef<ViewerCounterHandle, ViewerCounterProps>(
+  ({ index, total, style }, ref) => {
+    const { t, locale } = useCameraLocalization();
+    const [displayIndex, setDisplayIndex] = useState(index);
+
+    // Parent-driven moves (open, momentum end, resize re-snap) win over whatever the last
+    // scroll frame left behind.
+    useEffect(() => {
+      setDisplayIndex(index);
+    }, [index]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        setIndex: (next: number) => {
+          // Bail on an unchanged value so a 60Hz scroll stream costs one setState per slide
+          // crossing, not one per frame. React would bail out on an identical value anyway;
+          // this skips the dispatch entirely.
+          setDisplayIndex((prev) => (prev === next ? prev : next));
+        },
+      }),
+      []
+    );
+
+    // An empty list would render "1 / 0"; clamp so the readout stays sane while a delete is
+    // in flight.
+    const position = total > 0 ? Math.min(displayIndex, total - 1) + 1 : 0;
+
+    return (
+      <Text style={style}>
+        {t(
+          'mediaCounter',
+          localizeDigits(String(position), locale),
+          localizeDigits(String(total), locale)
+        )}
+      </Text>
+    );
+  }
+);
+
+ViewerCounter.displayName = 'ViewerCounter';