@venomousone/rn-videokit 0.1.0

package/src/components/VideoKit.tsx

@@ -0,0 +1,415 @@
+import { useCallback, useEffect, useRef, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  StatusBar,
+  Modal,
+  useWindowDimensions,
+} from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+import {
+  useVideoStoreApi,
+  VideoPlayerProvider,
+} from './core/VideoPlayerContext';
+import { VideoPlayer } from './core/VideoPlayer';
+
+import { useVideoControls } from '../hooks/useVideoControls';
+import { useVideoOrientation } from '../hooks/useVideoOrientation';
+import {
+  useVideoPlayerContext,
+  useVideoStore,
+} from './core/VideoPlayerContext';
+import { useVideoBrightness } from '../hooks/useVideoBrightness';
+
+import { PlayPauseButton } from './controls/PlayPauseButton';
+import { Scrubber } from './controls/Scrubber';
+import { TimeDisplay } from './controls/TimeDisplay';
+import { VolumeButton } from './controls/VolumeButton';
+import { FullscreenButton } from './controls/FullscreenButton';
+import { SpeedButton } from './controls/SpeedButton';
+
+import { BufferingOverlay } from './overlays/BufferingOverlay';
+import { ErrorOverlay } from './overlays/ErrorOverlay';
+import { LoadingPoster } from './overlays/LoadingPoster';
+import {
+  DoubleTapSeek,
+  type DoubleTapSeekHandle,
+} from './overlays/DoubleTapSeek';
+
+import type { VideoKitProps } from '../types';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useVideoVolume } from '../hooks/useVideoVolume';
+import { VolumeManager } from 'react-native-volume-manager';
+
+// ─── Inner component (has access to context) ─────────────────────────────────
+function VideoKitInner({
+  source,
+  poster,
+  autoPlay = false,
+  loop = false,
+  onProgress,
+  onEnd,
+  onError,
+  onBuffer,
+  onFullscreenChange,
+  autoHideDelay = 3000,
+  doubleTapSeekSeconds = 10,
+  style,
+  testID,
+  safeAreaInsets,
+  controls,
+  muted,
+}: VideoKitProps) {
+  const { videoRef } = useVideoPlayerContext();
+  const doubleTapRef = useRef<DoubleTapSeekHandle>(null);
+  const layoutWidth = useSharedValue(0);
+  const isFullscreen = useVideoStore((s) => s.isFullscreen);
+  const { height } = useWindowDimensions();
+
+  useVideoOrientation();
+
+  const { showControls, keepControlsVisible, toggleControls } =
+    useVideoControls(autoHideDelay);
+  const { adjustBrightness } = useVideoBrightness();
+  const { adjustVolume } = useVideoVolume();
+  const controlsVisible = useVideoStore((s) => s.controlsVisible);
+  const {
+    currentTime,
+    duration,
+    setSpeed,
+    setStatus,
+    setError,
+    setMuted,
+    setFullscreen,
+  } = useVideoStoreApi().getState();
+  const resolvedControls = useMemo(() => {
+    if (controls === false) return null;
+    if (controls === true || controls === undefined) {
+      return {
+        playPause: true,
+        scrubber: true,
+        time: true,
+        volume: true,
+        fullscreen: true,
+        speed: true,
+      };
+    }
+    return {
+      playPause: true,
+      scrubber: true,
+      time: true,
+      volume: true,
+      fullscreen: true,
+      speed: true,
+      ...controls,
+    };
+  }, [controls]);
+
+  // ── Seek helper (JS thread) ──────────────────────────────────────────────
+  const seekBy = useCallback(
+    (seconds: number) => {
+      const next = Math.max(0, Math.min(currentTime + seconds, duration));
+      videoRef?.current?.seek(next);
+    },
+    [videoRef, currentTime, duration]
+  );
+
+  const handleDoubleTap = useCallback(
+    (side: 'left' | 'right') => {
+      doubleTapRef.current?.show(side, doubleTapSeekSeconds);
+      seekBy(side === 'left' ? -doubleTapSeekSeconds : doubleTapSeekSeconds);
+      showControls();
+    },
+    [doubleTapSeekSeconds, seekBy, showControls]
+  );
+
+  const handleLongPressStart = useCallback(() => {
+    setSpeed(2);
+  }, [setSpeed]);
+
+  const handleLongPressEnd = useCallback(() => {
+    setSpeed(1);
+  }, [setSpeed]);
+
+  // ── Gestures ────────────────────────────────────────────────────────────
+
+  const panGesture = Gesture.Pan()
+
+    .minDistance(10)
+    .onEnd((e) => {
+      'worklet';
+      // vertical swipe — not a brightness/volume gesture
+      if (Math.abs(e.translationY) > Math.abs(e.translationX) * 1.5) {
+        const isSignificantSwipe = Math.abs(e.translationY) > 60;
+        if (isSignificantSwipe) {
+          if (e.translationY < 0) {
+            // swipe up → enter fullscreen
+            scheduleOnRN(() => setFullscreen(true));
+          } else if (e.translationY > 0) {
+            // swipe down → exit fullscreen
+            scheduleOnRN(() => setFullscreen(false));
+          }
+        }
+      }
+    })
+    .activeOffsetY([-10, 10]) // only vertical pans
+    .failOffsetX([-10, 10]) // horizontal movement cancels it
+    .onUpdate((e) => {
+      'worklet';
+      const delta = -(e.translationY / height) / 3; // negative because swipe up = brighter
+      const isLeftSide = e.x < layoutWidth.value / 2;
+
+      if (isLeftSide) {
+        scheduleOnRN(adjustBrightness, delta);
+      } else {
+        scheduleOnRN(adjustVolume, delta);
+      }
+    });
+
+  const doubleTap = Gesture.Tap()
+    .numberOfTaps(2)
+    .maxDuration(250)
+    .onEnd((e) => {
+      'worklet';
+
+      const leftZone = layoutWidth.value * 0.35;
+      const rightZone = layoutWidth.value * 0.65;
+
+      if (e.x < leftZone) {
+        scheduleOnRN(handleDoubleTap, 'left');
+      } else if (e.x > rightZone) {
+        scheduleOnRN(handleDoubleTap, 'right');
+      } else {
+        // scheduleOnRN(toggleControls);
+      }
+    });
+
+  const singleTap = Gesture.Tap()
+    // .maxDuration(250)
+    .onEnd(() => {
+      'worklet';
+      scheduleOnRN(toggleControls);
+    });
+
+  const longPress = Gesture.LongPress()
+    .minDuration(400)
+    .onStart(() => {
+      'worklet';
+      scheduleOnRN(handleLongPressStart);
+    })
+    .onEnd(() => {
+      'worklet';
+      scheduleOnRN(handleLongPressEnd);
+    });
+
+  const taps = Gesture.Exclusive(doubleTap, singleTap);
+
+  const composed = Gesture.Simultaneous(taps, longPress, panGesture);
+
+  // ── Controls animated opacity ────────────────────────────────────────────
+  const controlsStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(controlsVisible ? 1 : 0, { duration: 200 }),
+  }));
+
+  const handleRetry = useCallback(() => {
+    setStatus('loading');
+    setError(null);
+  }, [setStatus, setError]);
+
+  const insets = isFullscreen
+    ? {
+        paddingBottom: 8 + (safeAreaInsets?.bottom ?? 0),
+        paddingLeft: 12 + (safeAreaInsets?.left ?? 0),
+        paddingRight: 12 + (safeAreaInsets?.right ?? 0),
+      }
+    : undefined;
+
+  const playerContent = (
+    <View
+      style={[
+        styles.container,
+        isFullscreen
+          ? {
+              ...styles.fullscreenContainer,
+              width: '100%',
+              height: '100%',
+            }
+          : style,
+        {
+          overflow: isFullscreen ? 'visible' : 'hidden',
+        },
+      ]}
+      testID={testID}
+      onLayout={(e) => {
+        layoutWidth.value = e.nativeEvent.layout.width;
+      }}
+    >
+      {/* ── Raw video ── */}
+      <VideoPlayer
+        source={source}
+        autoPlay={autoPlay}
+        loop={loop}
+        poster={poster}
+        onProgress={onProgress}
+        onEnd={onEnd}
+        onError={onError}
+        onBuffer={onBuffer}
+      />
+
+      {/* ── Gesture + overlay layer ── */}
+      <GestureDetector gesture={composed}>
+        <Animated.View
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              // backgroundColor: 'purple',
+            },
+          ]}
+          collapsable={false}
+        />
+      </GestureDetector>
+
+      {/* Overlays */}
+      <LoadingPoster uri={poster} />
+      <BufferingOverlay />
+      <ErrorOverlay onRetry={handleRetry} />
+      <DoubleTapSeek ref={doubleTapRef} />
+
+      {/* Full-screen dim overlay — fades with controls */}
+      <Animated.View
+        style={[StyleSheet.absoluteFill, styles.dimOverlay, controlsStyle]}
+        pointerEvents="none"
+      />
+
+      {/* Controls — fade in/out */}
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+          },
+          controlsStyle,
+        ]}
+        pointerEvents={controlsVisible ? 'auto' : 'none'}
+      >
+        {/* Bottom gradient area */}
+        <View style={[styles.bottomControls, insets]}>
+          {resolvedControls?.scrubber && (
+            <Scrubber
+              onScrubStart={keepControlsVisible}
+              onScrubEnd={showControls}
+            />
+          )}
+          <View style={styles.buttonRow}>
+            {resolvedControls?.playPause && <PlayPauseButton />}
+            {resolvedControls?.time && <TimeDisplay />}
+            <View style={styles.spacer} />
+            {resolvedControls?.speed && <SpeedButton />}
+            {resolvedControls?.volume && <VolumeButton />}
+            {resolvedControls?.fullscreen && (
+              <FullscreenButton
+                onFullscreenChange={(v) => {
+                  StatusBar.setHidden(v, 'fade');
+                  onFullscreenChange?.(v);
+                }}
+              />
+            )}
+          </View>
+        </View>
+      </Animated.View>
+    </View>
+  );
+
+  // In VideoKit.tsx, on mount:
+  useEffect(() => {
+    VolumeManager.showNativeVolumeUI({ enabled: false });
+    return () => {
+      VolumeManager.showNativeVolumeUI({ enabled: true });
+    };
+  }, []);
+
+  //on mount and when prop changes
+  useEffect(() => {
+    setMuted(muted ?? false);
+  }, [muted, setMuted]);
+
+  return isFullscreen ? (
+    <Modal
+      visible
+      presentationStyle="fullScreen"
+      hardwareAccelerated
+      navigationBarTranslucent
+      statusBarTranslucent
+      supportedOrientations={['landscape', 'landscape-left', 'landscape-right']}
+      onDismiss={() => {
+        setFullscreen(false);
+        onFullscreenChange?.(false);
+      }}
+      onRequestClose={() => {
+        setFullscreen(false);
+        onFullscreenChange?.(false);
+        StatusBar.setHidden(false, 'fade');
+      }}
+      onShow={() => {}}
+      style={{
+        margin: 0,
+      }}
+    >
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        {playerContent}
+      </GestureHandlerRootView>
+    </Modal>
+  ) : (
+    <>
+      {/* placeholder so layout doesn't collapse */}
+      {/* <View style={[styles.container, style]} /> */}
+      {playerContent}
+    </>
+  );
+}
+
+// ─── Public export (wraps with providers) ─────────────────────────────────────
+export function VideoKit(props: VideoKitProps) {
+  return (
+    <VideoPlayerProvider>
+      <VideoKitInner {...props} />
+    </VideoPlayerProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#000',
+    position: 'relative',
+  },
+  dimOverlay: {
+    backgroundColor: 'rgba(0,0,0,0.45)',
+  },
+  bottomControls: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: 8,
+    paddingHorizontal: 12,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginTop: 4,
+  },
+  fullscreenContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  spacer: { flex: 1 },
+});

package/src/components/controls/FullscreenButton.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useVideoStore } from '../core/VideoPlayerContext';
+import { Icon } from './Icon';
+
+interface Props {
+  onFullscreenChange?: (isFullscreen: boolean) => void;
+}
+
+export function FullscreenButton({ onFullscreenChange }: Props) {
+  const isFullscreen = useVideoStore((s) => s.isFullscreen);
+  const { setFullscreen } = useVideoStore((s) => s);
+
+  const toggle = () => {
+    const next = !isFullscreen;
+    setFullscreen(next);
+    onFullscreenChange?.(next);
+  };
+
+  return (
+    <TouchableOpacity onPress={toggle} style={styles.btn} hitSlop={12}>
+      <Icon name={isFullscreen ? 'fullscreen-exit' : 'fullscreen'} size={22} />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: { padding: 4 },
+  icon: { fontSize: 18, color: '#fff' },
+});

package/src/components/controls/Icon.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import Svg, { Path, Polygon, Rect } from 'react-native-svg';
+
+type IconName =
+  | 'play'
+  | 'pause'
+  | 'volume'
+  | 'mute'
+  | 'fullscreen'
+  | 'fullscreen-exit';
+
+interface Props {
+  name: IconName;
+  size?: number;
+  color?: string;
+}
+
+const PATHS: Record<IconName, React.ReactElement> = {
+  'play': (
+    <Svg viewBox="0 0 24 24">
+      <Polygon points="5,3 19,12 5,21" fill="currentColor" />
+    </Svg>
+  ),
+  'pause': (
+    <Svg viewBox="0 0 24 24">
+      <Rect x="6" y="4" width="4" height="16" fill="currentColor" />
+      <Rect x="14" y="4" width="4" height="16" fill="currentColor" />
+    </Svg>
+  ),
+  'volume': (
+    <Svg viewBox="0 0 24 24">
+      <Path
+        d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"
+        fill="currentColor"
+      />
+    </Svg>
+  ),
+  'mute': (
+    <Svg viewBox="0 0 24 24">
+      <Path
+        d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
+        fill="currentColor"
+      />
+    </Svg>
+  ),
+  'fullscreen': (
+    <Svg viewBox="0 0 24 24">
+      <Path
+        d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+        fill="currentColor"
+      />
+    </Svg>
+  ),
+  'fullscreen-exit': (
+    <Svg viewBox="0 0 24 24">
+      <Path
+        d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
+        fill="currentColor"
+      />
+    </Svg>
+  ),
+};
+
+export function Icon({ name, size = 24, color = '#fff' }: Props) {
+  const element = PATHS[name];
+  return React.cloneElement(element, {
+    width: size,
+    height: size,
+    color,
+  } as any);
+}

package/src/components/controls/PlayPauseButton.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { Icon } from './Icon';
+import { useVideoStore } from '../core/VideoPlayerContext';
+
+export function PlayPauseButton() {
+  const status = useVideoStore((s) => s.status);
+  const setStatus = useVideoStore((s) => s.setStatus);
+
+  const isPlaying = status === 'playing';
+
+  const toggle = () => {
+    setStatus(isPlaying ? 'paused' : 'playing');
+  };
+
+  return (
+    <TouchableOpacity onPress={toggle} style={styles.btn} hitSlop={12}>
+      <Icon name={isPlaying ? 'pause' : 'play'} size={22} />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: { padding: 4 },
+  icon: { fontSize: 20, color: '#fff' },
+});

package/src/components/controls/Scrubber.tsx

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  useVideoPlayerContext,
+  useVideoStore,
+  // useVideoTheme,
+} from '../core/VideoPlayerContext';
+import { clamp } from '../../utils/clamp';
+import { scheduleOnRN } from 'react-native-worklets';
+
+interface Props {
+  onScrubStart?: () => void;
+  onScrubEnd?: () => void;
+}
+
+export function Scrubber({ onScrubStart, onScrubEnd }: Props) {
+  const { videoRef } = useVideoPlayerContext();
+  const currentTime = useVideoStore((s) => s.currentTime);
+  const duration = useVideoStore((s) => s.duration);
+  const buffered = useVideoStore((s) => s.buffered);
+  const { duration: d, status, setStatus } = useVideoStore((s) => s);
+  // const { accentColor = '#fff', trackHeight = 3 } = useVideoTheme();
+
+  // Shared values for Reanimated
+  const trackWidth = useSharedValue(1);
+  const thumbX = useSharedValue(0);
+  const isDragging = useSharedValue(false);
+  const isDraggingRef = useRef(false);
+  const dragStartX = useSharedValue(0);
+  const dragStartThumb = useSharedValue(0);
+
+  // Sync playback progress → thumb position (when not dragging)
+  useEffect(() => {
+    if (!isDraggingRef.current && duration > 0) {
+      thumbX.value = withTiming((currentTime / duration) * trackWidth.value, {
+        duration: 200,
+      });
+    }
+  }, [currentTime, duration, thumbX, trackWidth]);
+
+  const handleScrubStart = useCallback(() => {
+    isDraggingRef.current = true;
+    onScrubStart?.();
+  }, [onScrubStart]);
+
+  const handleScrubEnd = useCallback(
+    (x: number) => {
+      if (d > 0) {
+        const seekTime = clamp((x / trackWidth.value) * d, 0, d);
+        videoRef?.current?.seek(seekTime);
+        if (status === 'playing') {
+          setTimeout(() => setStatus('playing'), 150);
+        }
+      }
+      isDraggingRef.current = false;
+      onScrubEnd?.();
+    },
+    [videoRef, trackWidth, onScrubEnd, setStatus, d, status]
+  );
+
+  const panGesture = Gesture.Pan()
+    .minDistance(0)
+    .onStart((e) => {
+      'worklet';
+      isDragging.value = true;
+
+      dragStartX.value = e.x;
+      dragStartThumb.value = thumbX.value;
+      scheduleOnRN(handleScrubStart);
+    })
+    .onUpdate((e) => {
+      'worklet';
+
+      const delta = e.x - dragStartX.value;
+      thumbX.value = clamp(dragStartThumb.value + delta, 0, trackWidth.value);
+    })
+    .onEnd(() => {
+      'worklet';
+      isDragging.value = false;
+      scheduleOnRN(handleScrubEnd, thumbX.value);
+    });
+
+  const fillStyle = useAnimatedStyle(() => ({
+    width: thumbX.value,
+  }));
+
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: thumbX.value }],
+  }));
+
+  const bufferedWidth =
+    duration > 0 ? clamp((buffered / duration) * 100, 0, 100) : 0;
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View
+        style={styles.trackHitArea}
+        onLayout={(e) => {
+          trackWidth.value = e.nativeEvent.layout.width;
+        }}
+      >
+        <View style={styles.track}>
+          {/* Buffered */}
+          <View style={[styles.bufferedFill, { width: `${bufferedWidth}%` }]} />
+          {/* Played */}
+          <Animated.View style={[styles.playedFill, fillStyle]} />
+          {/* Thumb */}
+          <Animated.View style={[styles.thumb, thumbStyle]} />
+        </View>
+      </View>
+    </GestureDetector>
+  );
+}
+
+const TRACK_HEIGHT = 3;
+const THUMB_SIZE = 14;
+
+const styles = StyleSheet.create({
+  trackHitArea: {
+    height: 28,
+    justifyContent: 'center',
+    paddingHorizontal: THUMB_SIZE / 2,
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    borderRadius: TRACK_HEIGHT / 2,
+    overflow: 'visible',
+  },
+  bufferedFill: {
+    position: 'absolute',
+    height: TRACK_HEIGHT,
+    backgroundColor: 'rgba(255,255,255,0.4)',
+    borderRadius: TRACK_HEIGHT / 2,
+  },
+  playedFill: {
+    position: 'absolute',
+    height: TRACK_HEIGHT,
+    backgroundColor: '#fff',
+    borderRadius: TRACK_HEIGHT / 2,
+  },
+  thumb: {
+    position: 'absolute',
+    top: -(THUMB_SIZE / 2 - TRACK_HEIGHT / 2),
+    left: -THUMB_SIZE / 2,
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    backgroundColor: '#fff',
+  },
+});