@venomousone/rn-videokit 0.1.0

package/src/components/overlays/GestureIndicator.tsx

@@ -0,0 +1,114 @@
+import React, { forwardRef, useImperativeHandle, useCallback } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+export type GestureIndicatorType = 'brightness' | 'volume';
+
+export interface GestureIndicatorHandle {
+  show: (type: GestureIndicatorType, value: number) => void;
+  update: (value: number) => void;
+  hide: () => void;
+}
+
+export const GestureIndicator = forwardRef<GestureIndicatorHandle>((_, ref) => {
+  const opacity = useSharedValue(0);
+  const fillHeight = useSharedValue(0);
+
+  // JS state via ref to avoid re-renders
+  const typeRef = React.useRef<GestureIndicatorType>('brightness');
+  const [type, setType] = React.useState<GestureIndicatorType>('brightness');
+  const [value, setValue] = React.useState(0);
+  const hideTimerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const scheduleAutoHide = useCallback(() => {
+    clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      opacity.value = withTiming(0, { duration: 300 });
+    }, 1200);
+  }, [opacity]);
+
+  useImperativeHandle(ref, () => ({
+    show: (t, v) => {
+      typeRef.current = t;
+      scheduleOnRN(() => {
+        setType(t);
+        setValue(v);
+      });
+      opacity.value = withTiming(1, { duration: 150 });
+      fillHeight.value = withTiming(v, { duration: 100 });
+      scheduleAutoHide();
+    },
+    update: (v) => {
+      scheduleOnRN(() => setValue(v));
+      fillHeight.value = withTiming(v, { duration: 80 });
+      scheduleAutoHide();
+    },
+    hide: () => {
+      clearTimeout(hideTimerRef.current);
+      opacity.value = withTiming(0, { duration: 200 });
+    },
+  }));
+
+  const containerStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const fillStyle = useAnimatedStyle(() => ({
+    height: `${fillHeight.value * 100}%`,
+  }));
+
+  const icon = type === 'brightness' ? '☀️' : value === 0 ? '🔇' : '🔊';
+
+  return (
+    <Animated.View
+      style={[styles.container, containerStyle]}
+      pointerEvents="none"
+    >
+      <Text style={styles.icon}>{icon}</Text>
+      <View style={styles.track}>
+        <Animated.View style={[styles.fill, fillStyle]} />
+      </View>
+      <Text style={styles.value}>{Math.round(value * 100)}%</Text>
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: [{ translateX: -28 }, { translateY: -80 }],
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: 'rgba(0,0,0,0.65)',
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    width: 56,
+  },
+  icon: { fontSize: 18 },
+  track: {
+    width: 4,
+    height: 80,
+    backgroundColor: 'rgba(255,255,255,0.25)',
+    borderRadius: 2,
+    justifyContent: 'flex-end',
+    overflow: 'hidden',
+  },
+  fill: {
+    width: '100%',
+    backgroundColor: '#fff',
+    borderRadius: 2,
+  },
+  value: {
+    color: '#fff',
+    fontSize: 11,
+    fontWeight: '600',
+  },
+});

package/src/components/overlays/LoadingPoster.tsx

@@ -0,0 +1,21 @@
+import { Image, StyleSheet, View } from 'react-native';
+import { useVideoStore } from '../core/VideoPlayerContext';
+
+interface Props {
+  uri?: string;
+}
+
+export function LoadingPoster({ uri }: Props) {
+  const status = useVideoStore((s) => s.status);
+  if (!uri || status !== 'idle') return null;
+
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      <Image
+        source={{ uri }}
+        style={StyleSheet.absoluteFill}
+        resizeMode="cover"
+      />
+    </View>
+  );
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useVideoPlayer } from './useVideoPlayer';
+export { useVideoControls } from './useVideoControls';
+export { useVideoOrientation } from './useVideoOrientation';

package/src/hooks/useVideoBrightness.ts

@@ -0,0 +1,34 @@
+import { useCallback, useRef } from 'react';
+import {
+  getBrightnessLevel,
+  setBrightnessLevel,
+} from '@reeq/react-native-device-brightness';
+import { clamp } from '../utils/clamp';
+
+export function useVideoBrightness() {
+  const current = useRef<number | null>(null);
+
+  const init = useCallback(() => {
+    try {
+      current.current = getBrightnessLevel();
+    } catch (e) {
+      console.warn('[VideoKit] brightness init failed:', e);
+    }
+  }, []);
+
+  const adjust = useCallback((delta: number) => {
+    try {
+      // lazy init — read current brightness on first adjust
+      if (current.current === null) {
+        current.current = getBrightnessLevel();
+      }
+      const next = clamp(current.current + delta, 0, 1);
+      current.current = next;
+      setBrightnessLevel(next);
+    } catch (e) {
+      console.warn('[VideoKit] brightness adjust failed:', e);
+    }
+  }, []);
+
+  return { initBrightness: init, adjustBrightness: adjust };
+}

package/src/hooks/useVideoControls.ts

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  useVideoStore,
+  useVideoStoreApi,
+} from '../components/core/VideoPlayerContext';
+
+/**
+ * Manages controls visibility with an auto-hide timer.
+ * Call `showControls()` on any user interaction to reset the timer.
+ */
+export function useVideoControls(autoHideDelayMs = 3000) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const status = useVideoStore((s) => s.status);
+  const {} = useVideoStore((s) => s);
+  const controlsVisible = useVideoStore((s) => s.controlsVisible);
+  const store = useVideoStoreApi();
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const scheduleHide = useCallback(() => {
+    clearTimer();
+    timerRef.current = setTimeout(() => {
+      store.getState().setControlsVisible(false);
+    }, autoHideDelayMs);
+  }, [clearTimer, autoHideDelayMs, store]);
+
+  const showControls = useCallback(() => {
+    store.getState().setControlsVisible(true);
+    if (status === 'playing') {
+      scheduleHide();
+    }
+  }, [store, status, scheduleHide]);
+
+  const toggleControls = useCallback(() => {
+    store.getState().setControlsVisible(!controlsVisible);
+  }, [controlsVisible, store]);
+
+  const keepControlsVisible = useCallback(() => {
+    // Call this during scrub to cancel auto-hide
+    clearTimer();
+    store.getState().setControlsVisible(true);
+  }, [clearTimer, store]);
+
+  // When playback starts, begin the hide countdown
+  useEffect(() => {
+    if (status === 'playing' && controlsVisible) {
+      clearTimer();
+      scheduleHide();
+    } else if (status !== 'playing' && controlsVisible) {
+      clearTimer();
+      scheduleHide();
+    } else {
+      clearTimer();
+      scheduleHide();
+    }
+    return clearTimer;
+  }, [status, controlsVisible, scheduleHide, clearTimer]);
+
+  return { controlsVisible, showControls, keepControlsVisible, toggleControls };
+}

package/src/hooks/useVideoOrientation.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import Orientation from 'react-native-orientation-locker';
+import { useVideoStore } from '../components/core/VideoPlayerContext';
+
+/**
+ * Locks/unlocks screen orientation in response to fullscreen state.
+ * Fullscreen → landscape; exit → portrait.
+ */
+export function useVideoOrientation() {
+  const isFullscreen = useVideoStore((s) => s.isFullscreen);
+
+  useEffect(() => {
+    if (isFullscreen) {
+      Orientation.lockToLandscape();
+    } else {
+      Orientation.lockToPortrait();
+    }
+    return () => {
+      Orientation.unlockAllOrientations();
+    };
+  }, [isFullscreen]);
+}

package/src/hooks/useVideoPlayer.ts

@@ -0,0 +1,69 @@
+import { useCallback } from 'react';
+import { useVideoStore } from '../components/core/VideoPlayerContext';
+import { useVideoPlayerContext } from '../components/core/VideoPlayerContext';
+import type { VideoPlayerAPI, VideoPlayerState } from '../types';
+
+/**
+ * Headless hook. Use this when you want to build your own UI
+ * while delegating all playback state to rn-videokit.
+ */
+export function useVideoPlayer(): VideoPlayerState & VideoPlayerAPI {
+  const { videoRef } = useVideoPlayerContext();
+
+  const status = useVideoStore((s) => s.status);
+  const currentTime = useVideoStore((s) => s.currentTime);
+  const duration = useVideoStore((s) => s.duration);
+  const buffered = useVideoStore((s) => s.buffered);
+  const muted = useVideoStore((s) => s.muted);
+  const speed = useVideoStore((s) => s.speed);
+  const isFullscreen = useVideoStore((s) => s.isFullscreen);
+  const error = useVideoStore((s) => s.error);
+
+  const { setMuted, setSpeed, setFullscreen, setStatus } = useVideoStore(
+    (s) => s
+  );
+
+  const play = useCallback(() => {
+    setStatus('playing');
+  }, [setStatus]);
+
+  const pause = useCallback(() => {
+    setStatus('paused');
+  }, [setStatus]);
+
+  const seek = useCallback(
+    (seconds: number) => {
+      videoRef?.current?.seek(seconds);
+    },
+    [videoRef]
+  );
+
+  const enterFullscreen = useCallback(
+    () => setFullscreen(true),
+    [setFullscreen]
+  );
+  const exitFullscreen = useCallback(
+    () => setFullscreen(false),
+    [setFullscreen]
+  );
+
+  return {
+    // State
+    status,
+    currentTime,
+    duration,
+    buffered,
+    muted,
+    speed,
+    isFullscreen,
+    error,
+    // API
+    play,
+    pause,
+    seek,
+    setMuted,
+    setSpeed,
+    enterFullscreen,
+    exitFullscreen,
+  };
+}

package/src/hooks/useVideoVolume.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { VolumeManager } from 'react-native-volume-manager';
+import { clamp } from '../utils/clamp';
+
+export function useVideoVolume() {
+  const currentVolume = useRef<number>(0.5);
+
+  const init = useCallback(async () => {
+    try {
+      const { volume } = await VolumeManager.getVolume();
+      currentVolume.current = volume;
+    } catch (e) {
+      console.warn('[VideoKit] volume init failed:', e);
+    }
+  }, []);
+
+  const adjustVolume = useCallback(async (delta: number) => {
+    try {
+      const next = clamp(currentVolume.current + delta, 0, 1);
+      currentVolume.current = next;
+      await VolumeManager.setVolume(next);
+    } catch (e) {
+      console.warn('[VideoKit] volume adjust failed:', e);
+    }
+  }, []);
+
+  useEffect(() => {
+    init();
+    const sub = VolumeManager.addVolumeListener(({ volume }) => {
+      currentVolume.current = volume;
+    });
+    return () => sub.remove();
+  }, [init]);
+
+  return { initVolume: init, adjustVolume, currentVolume };
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export { VideoKit } from './components/VideoKit';
+export { useVideoPlayer } from './hooks/useVideoPlayer';
+export { useVideoStore } from './components/core/VideoPlayerContext';
+export { VideoPlayerProvider } from './components/core/VideoPlayerContext';
+
+export type {
+  VideoKitProps,
+  VideoKitTheme,
+  VideoKitControlsConfig,
+  VideoSource,
+  VideoPlayerAPI,
+  VideoPlayerState,
+  VideoProgress,
+  PlaybackStatus,
+} from './types';

package/src/types/index.ts

@@ -0,0 +1,137 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { VideoSrc } from 'react-native-video';
+
+// ─── Source ──────────────────────────────────────────────────────────────────
+
+export type VideoSource =
+  | VideoSrc
+  | { uri: string; headers?: Record<string, string> }
+  | number; // require('./local.mp4')
+
+// ─── Theme ───────────────────────────────────────────────────────────────────
+
+export interface VideoKitTheme {
+  /** Primary accent color (scrubber thumb, active icons). Default: '#ffffff' */
+  accentColor?: string;
+  /** Controls tint (icons, time text). Default: '#ffffff' */
+  controlsTint?: string;
+  /** Overlay background. Default: 'rgba(0,0,0,0.45)' */
+  overlayColor?: string;
+  /** Scrubber track height. Default: 3 */
+  trackHeight?: number;
+}
+
+// ─── Controls Config ─────────────────────────────────────────────────────────
+
+export interface VideoKitControlsConfig {
+  /** Show play/pause button. Default: true */
+  playPause?: boolean;
+  /** Show scrubber. Default: true */
+  scrubber?: boolean;
+  /** Show time display (current / duration). Default: true */
+  time?: boolean;
+  /** Show mute/volume button. Default: true */
+  volume?: boolean;
+  /** Show fullscreen button. Default: true */
+  fullscreen?: boolean;
+  /** Show playback speed button. Default: true */
+  speed?: boolean;
+}
+
+// ─── Playback State ──────────────────────────────────────────────────────────
+
+export type PlaybackStatus =
+  | 'idle'
+  | 'loading'
+  | 'buffering'
+  | 'playing'
+  | 'paused'
+  | 'error';
+
+export interface VideoProgress {
+  currentTime: number;
+  playableDuration: number;
+  seekableDuration: number;
+}
+
+// ─── VideoKit Props ──────────────────────────────────────────────────────────
+
+export interface VideoKitProps {
+  /** Video source — URI object or local require(). Required. */
+  source: VideoSource;
+
+  /** Poster image shown before first frame. */
+  poster?: string;
+
+  /** Start playing on mount. Default: false */
+  autoPlay?: boolean;
+
+  /** Loop playback. Default: false */
+  loop?: boolean;
+
+  /** Mute audio. Default: false */
+  muted?: boolean;
+
+  /** Called every 250 ms while playing. */
+  onProgress?: (progress: VideoProgress) => void;
+
+  /** Called when playback reaches the end. */
+  onEnd?: () => void;
+
+  /** Called when fullscreen toggle is triggered. */
+  onFullscreenChange?: (isFullscreen: boolean) => void;
+
+  /** Called when an error occurs. */
+  onError?: (error: Error) => void;
+
+  /** Called when buffering state changes. */
+  onBuffer?: (isBuffering: boolean) => void;
+
+  /** Fine-grained control over which controls render. */
+  controls?: VideoKitControlsConfig | boolean;
+
+  /** Visual theming overrides. */
+  theme?: VideoKitTheme;
+
+  /** Duration in ms before controls auto-hide. Default: 3000 */
+  autoHideDelay?: number;
+
+  /** Seek amount in seconds for double-tap. Default: 10 */
+  doubleTapSeekSeconds?: number;
+
+  /** Container style. */
+  style?: StyleProp<ViewStyle>;
+
+  /** Test ID for E2E. */
+  testID?: string;
+
+  safeAreaInsets?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+}
+
+// ─── Headless Hook API ───────────────────────────────────────────────────────
+
+export interface VideoPlayerAPI {
+  play: () => void;
+  pause: () => void;
+  seek: (seconds: number) => void;
+  setMuted: (muted: boolean) => void;
+  setSpeed: (rate: number) => void;
+  enterFullscreen: () => void;
+  exitFullscreen: () => void;
+}
+
+export interface VideoPlayerState {
+  status: PlaybackStatus;
+  currentTime: number;
+  duration: number;
+  buffered: number;
+  muted: boolean;
+  speed: number;
+  isFullscreen: boolean;
+  error: string | null;
+}

package/src/utils/clamp.ts

@@ -0,0 +1,4 @@
+export const clamp = (value: number, min: number, max: number): number => {
+  'worklet';
+  return Math.min(Math.max(value, min), max);
+};

package/src/utils/formatTime.ts

@@ -0,0 +1,9 @@
+export const formatTime = (seconds: number): string => {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) {
+    return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  }
+  return `${m}:${String(s).padStart(2, '0')}`;
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './clamp';
+export * from './formatTime';