react-native-video-provider 0.1.1

package/src/components/GestureOverlay.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useRef, type PropsWithChildren } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+export interface GestureOverlayProps extends PropsWithChildren {
+  onSingleTap?: () => void;
+  onDoubleTapLeft?: () => void;
+  onDoubleTapRight?: () => void;
+  onLongPress?: () => void;
+}
+
+const DOUBLE_TAP_MS = 280;
+
+/**
+ * Tap layer for player chrome: single tap (toggle controls), double tap
+ * left/right (seek back/forward), long press. Pinch/brightness/volume
+ * gestures are on the roadmap (need native cooperation).
+ */
+export function GestureOverlay({
+  onSingleTap,
+  onDoubleTapLeft,
+  onDoubleTapRight,
+  onLongPress,
+  children,
+}: GestureOverlayProps) {
+  const width = useRef(0);
+  const lastTap = useRef(0);
+  const singleTapTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const onLayout = useCallback((e: LayoutChangeEvent) => {
+    width.current = e.nativeEvent.layout.width;
+  }, []);
+
+  const handlePress = useCallback(
+    (e: GestureResponderEvent) => {
+      const now = Date.now();
+      const x = e.nativeEvent.locationX;
+
+      if (now - lastTap.current < DOUBLE_TAP_MS) {
+        lastTap.current = 0;
+        if (singleTapTimer.current) {
+          clearTimeout(singleTapTimer.current);
+          singleTapTimer.current = null;
+        }
+        if (x < width.current / 2) {
+          onDoubleTapLeft?.();
+        } else {
+          onDoubleTapRight?.();
+        }
+        return;
+      }
+
+      lastTap.current = now;
+      singleTapTimer.current = setTimeout(() => {
+        singleTapTimer.current = null;
+        onSingleTap?.();
+      }, DOUBLE_TAP_MS);
+    },
+    [onSingleTap, onDoubleTapLeft, onDoubleTapRight]
+  );
+
+  return (
+    <Pressable
+      style={StyleSheet.absoluteFill}
+      onLayout={onLayout}
+      onPress={handlePress}
+      onLongPress={onLongPress}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/src/components/MiniPlayer.tsx

@@ -0,0 +1,93 @@
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { usePlayback } from '../hooks/usePlayback';
+import { useVideoManager } from '../provider/VideoContext';
+import { VideoSurface } from './VideoSurface';
+
+export interface MiniPlayerProps extends ViewProps {
+  /** Surface id. Default "__au_mini__". */
+  surfaceId?: string;
+  /** Tapping the bar (e.g. navigate back to the detail screen). */
+  onPress?: () => void;
+  /** Called by the ✕ button; button hidden when omitted. */
+  onClose?: () => void;
+}
+
+/**
+ * Docked mini player bar (Spotify style): thumbnail surface, title,
+ * play/pause and close. Attach it with `attach(surfaceId)` — typically when
+ * the user leaves the screen that owned playback.
+ */
+export function MiniPlayer({
+  surfaceId = '__au_mini__',
+  onPress,
+  onClose,
+  style,
+  ...rest
+}: MiniPlayerProps) {
+  const manager = useVideoManager();
+  const playing = usePlayback((s) => s.playing);
+  const title = usePlayback((s) => s.currentVideo?.title ?? '');
+
+  return (
+    <View style={[styles.bar, style]} {...rest}>
+      <Pressable style={styles.body} onPress={onPress}>
+        <VideoSurface surfaceId={surfaceId} style={styles.thumb} />
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+      </Pressable>
+      <Pressable
+        style={styles.button}
+        hitSlop={8}
+        onPress={() => manager.toggle()}
+      >
+        <Text style={styles.icon}>{playing ? '❙❙' : '▶'}</Text>
+      </Pressable>
+      {onClose ? (
+        <Pressable style={styles.button} hitSlop={8} onPress={onClose}>
+          <Text style={styles.icon}>✕</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#1c1c1e',
+    height: 56,
+    paddingRight: 8,
+  },
+  body: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  thumb: {
+    width: 56 * (16 / 9),
+    height: 56,
+    backgroundColor: '#000',
+  },
+  title: {
+    flex: 1,
+    color: '#fff',
+    fontSize: 14,
+  },
+  button: {
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  icon: {
+    color: '#fff',
+    fontSize: 16,
+  },
+});

package/src/components/VideoControls.tsx

@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+} from 'react-native';
+import { useVideoManager } from '../provider/VideoContext';
+import { usePlayback } from '../hooks/usePlayback';
+import { formatTime } from '../utils/formatTime';
+import { GestureOverlay } from './GestureOverlay';
+
+export interface VideoControlsProps {
+  /** Seconds jumped by double-tap. Default 10. */
+  doubleTapSeek?: number;
+  /** Auto-hide delay in ms. Default 3000. */
+  hideAfter?: number;
+  /** Show the fullscreen toggle button. Default true. */
+  showFullscreenButton?: boolean;
+  /** Called by the close (✕) button; button hidden when omitted. */
+  onClose?: () => void;
+}
+
+/**
+ * Minimal built-in chrome: play/pause, seek bar, time, mute and fullscreen
+ * toggles, with tap-to-show / double-tap-to-seek gestures. Apps wanting a
+ * custom design can ignore this and build on usePlayback()/useVideo().
+ */
+export function VideoControls({
+  doubleTapSeek = 10,
+  hideAfter = 3000,
+  showFullscreenButton = true,
+  onClose,
+}: VideoControlsProps) {
+  const manager = useVideoManager();
+  const playing = usePlayback((s) => s.playing);
+  const buffering = usePlayback((s) => s.buffering);
+  const position = usePlayback((s) => s.position);
+  const duration = usePlayback((s) => s.duration);
+  const muted = usePlayback((s) => s.muted);
+  const fullscreen = usePlayback((s) => s.fullscreen);
+
+  const [visible, setVisible] = useState(true);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const trackWidth = useRef(0);
+
+  const scheduleHide = useCallback(() => {
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+    }
+    hideTimer.current = setTimeout(() => setVisible(false), hideAfter);
+  }, [hideAfter]);
+
+  useEffect(() => {
+    if (visible && playing) {
+      scheduleHide();
+    }
+    return () => {
+      if (hideTimer.current) {
+        clearTimeout(hideTimer.current);
+      }
+    };
+  }, [visible, playing, scheduleHide]);
+
+  const toggleVisible = useCallback(() => setVisible((v) => !v), []);
+
+  const onTrackLayout = useCallback((e: LayoutChangeEvent) => {
+    trackWidth.current = e.nativeEvent.layout.width;
+  }, []);
+
+  const onTrackPress = useCallback(
+    (e: GestureResponderEvent) => {
+      if (trackWidth.current > 0 && duration > 0) {
+        const ratio = e.nativeEvent.locationX / trackWidth.current;
+        manager.seek(ratio * duration);
+      }
+      scheduleHide();
+    },
+    [manager, duration, scheduleHide]
+  );
+
+  const progress = duration > 0 ? Math.min(position / duration, 1) : 0;
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      <GestureOverlay
+        onSingleTap={toggleVisible}
+        onDoubleTapLeft={() => manager.seekBy(-doubleTapSeek)}
+        onDoubleTapRight={() => manager.seekBy(doubleTapSeek)}
+      />
+      {visible ? (
+        <View style={styles.chrome} pointerEvents="box-none">
+          <View style={styles.topRow}>
+            {onClose ? (
+              <Pressable style={styles.button} onPress={onClose} hitSlop={8}>
+                <Text style={styles.icon}>✕</Text>
+              </Pressable>
+            ) : (
+              <View />
+            )}
+            <Pressable
+              style={styles.button}
+              onPress={() => (muted ? manager.unmute() : manager.mute())}
+              hitSlop={8}
+            >
+              <Text style={styles.icon}>{muted ? '🔇' : '🔊'}</Text>
+            </Pressable>
+          </View>
+
+          <Pressable
+            style={styles.playButton}
+            onPress={() => {
+              manager.toggle();
+              scheduleHide();
+            }}
+            hitSlop={16}
+          >
+            <Text style={styles.playIcon}>
+              {buffering ? '…' : playing ? '❙❙' : '▶'}
+            </Text>
+          </Pressable>
+
+          <View style={styles.bottomRow}>
+            <Text style={styles.time}>{formatTime(position)}</Text>
+            <Pressable
+              style={styles.track}
+              onLayout={onTrackLayout}
+              onPress={onTrackPress}
+            >
+              <View style={styles.trackBg} />
+              <View
+                style={[styles.trackFill, { width: `${progress * 100}%` }]}
+              />
+            </Pressable>
+            <Text style={styles.time}>{formatTime(duration)}</Text>
+            {showFullscreenButton ? (
+              <Pressable
+                style={styles.button}
+                onPress={() => manager.toggleFullscreen()}
+                hitSlop={8}
+              >
+                <Text style={styles.icon}>{fullscreen ? '⤡' : '⤢'}</Text>
+              </Pressable>
+            ) : null}
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  chrome: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    justifyContent: 'space-between',
+  },
+  topRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 12,
+  },
+  playButton: {
+    alignSelf: 'center',
+  },
+  playIcon: {
+    color: '#fff',
+    fontSize: 34,
+  },
+  bottomRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingBottom: 12,
+    gap: 8,
+  },
+  time: {
+    color: '#fff',
+    fontSize: 12,
+    fontVariant: ['tabular-nums'],
+  },
+  track: {
+    flex: 1,
+    height: 24,
+    justifyContent: 'center',
+  },
+  trackBg: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: 'rgba(255,255,255,0.35)',
+  },
+  trackFill: {
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: '#fff',
+  },
+  button: {
+    padding: 4,
+  },
+  icon: {
+    color: '#fff',
+    fontSize: 18,
+  },
+});

package/src/components/VideoPlayer.tsx

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import { useVideoManager } from '../provider/VideoContext';
+import type { ResizeMode, VideoSource } from '../types/video';
+import { VideoControls } from './VideoControls';
+import { VideoSurface } from './VideoSurface';
+
+export interface VideoPlayerProps extends ViewProps {
+  source: VideoSource;
+  /** Default true. */
+  autoplay?: boolean;
+  /**
+   * Surface id to register/attach under. Defaults to `player:<source.id>`,
+   * so a feed item and a detail screen showing the same video naturally
+   * hand the player off to whichever mounted last.
+   */
+  surfaceId?: string;
+  /** Show built-in controls. Default true. */
+  controls?: boolean;
+  resizeMode?: ResizeMode;
+}
+
+/**
+ * Convenience all-in-one player: `setSource` (same-video handoff aware) +
+ * `attach` + surface + optional controls. Rendering two VideoPlayers with
+ * the same source id moves the ONE engine — it never creates a second one.
+ *
+ * ```tsx
+ * <VideoPlayer source={{ id: '123', uri }} style={{ aspectRatio: 16 / 9 }} />
+ * ```
+ */
+export function VideoPlayer({
+  source,
+  autoplay = true,
+  surfaceId,
+  controls = true,
+  resizeMode,
+  style,
+  ...rest
+}: VideoPlayerProps) {
+  const manager = useVideoManager();
+  const id = surfaceId ?? `player:${source.id}`;
+
+  useEffect(() => {
+    manager.setSource(source, { autoplay, surfaceId: id });
+    // Attach on mount / when the video identity changes. Other source
+    // fields (title, headers) don't retrigger: identity is source.id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manager, source.id, id]);
+
+  useEffect(() => {
+    if (resizeMode) {
+      manager.setResizeMode(resizeMode);
+    }
+  }, [manager, resizeMode]);
+
+  return (
+    <View style={[styles.container, style]} {...rest}>
+      <VideoSurface surfaceId={id} style={styles.surface} />
+      {controls ? <VideoControls /> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#000',
+    overflow: 'hidden',
+  },
+  surface: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});

package/src/components/VideoSurface.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import type { ViewProps } from 'react-native';
+import AuVideoSurfaceNativeComponent from '../AuVideoSurfaceNativeComponent';
+import { useVideoManager } from '../provider/VideoContext';
+
+export interface VideoSurfaceProps extends ViewProps {
+  /** Id this surface registers under. Attach the player with `attach(id)`. */
+  surfaceId: string;
+  /** Attach the player to this surface as soon as it mounts. Default false. */
+  autoAttach?: boolean;
+}
+
+/**
+ * A dumb rendering surface. It never creates a player — it only marks a
+ * spot where the singleton engine can render. Mount as many as you like;
+ * the player shows in at most one at a time.
+ *
+ * ```tsx
+ * <VideoSurface surfaceId="feed" style={{ aspectRatio: 16 / 9 }} />
+ * ```
+ */
+export function VideoSurface({
+  surfaceId,
+  autoAttach = false,
+  ...rest
+}: VideoSurfaceProps) {
+  const manager = useVideoManager();
+
+  useEffect(() => {
+    if (autoAttach) {
+      manager.attach(surfaceId);
+    }
+    return () => {
+      manager.handleSurfaceUnmount(surfaceId);
+    };
+  }, [manager, surfaceId, autoAttach]);
+
+  return <AuVideoSurfaceNativeComponent surfaceId={surfaceId} {...rest} />;
+}