@venomousone/rn-videokit 0.1.0

package/src/components/controls/SpeedButton.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useVideoStore } from '../core/VideoPlayerContext';
+
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+export function SpeedButton() {
+  const speed = useVideoStore((s) => s.speed);
+  const { setSpeed } = useVideoStore((s) => s);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={() => setOpen(true)}
+        style={styles.btn}
+        hitSlop={12}
+      >
+        <Text style={styles.label}>{speed === 1 ? '1×' : `${speed}×`}</Text>
+      </TouchableOpacity>
+
+      <Modal transparent visible={open} onRequestClose={() => setOpen(false)}>
+        <TouchableOpacity
+          style={styles.backdrop}
+          activeOpacity={1}
+          onPress={() => setOpen(false)}
+        >
+          <View style={styles.sheet}>
+            <Text style={styles.title}>Playback Speed</Text>
+            {SPEEDS.map((s) => (
+              <TouchableOpacity
+                key={s}
+                style={[styles.option, speed === s && styles.optionActive]}
+                onPress={() => {
+                  setSpeed(s);
+                  setOpen(false);
+                }}
+              >
+                <Text
+                  style={[
+                    styles.optionText,
+                    speed === s && styles.optionTextActive,
+                  ]}
+                >
+                  {s === 1 ? 'Normal' : `${s}×`}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: { padding: 4 },
+  label: { color: '#fff', fontSize: 12, fontWeight: '700' },
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    backgroundColor: '#1a1a1a',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 20,
+    paddingBottom: 36,
+    gap: 4,
+  },
+  title: {
+    color: '#aaa',
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  option: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+  },
+  optionActive: { backgroundColor: 'rgba(255,255,255,0.1)' },
+  optionText: { color: '#fff', fontSize: 15 },
+  optionTextActive: { fontWeight: '700' },
+});

package/src/components/controls/TimeDisplay.tsx

@@ -0,0 +1,21 @@
+import { StyleSheet, Text } from 'react-native';
+import { useVideoStore } from '../core/VideoPlayerContext';
+import { formatTime } from '../../utils/formatTime';
+
+export function TimeDisplay() {
+  const currentTime = useVideoStore((s) => s.currentTime);
+  const duration = useVideoStore((s) => s.duration);
+
+  return (
+    <Text style={styles.text}>
+      {formatTime(currentTime)}
+      <Text style={styles.separator}> / </Text>
+      {formatTime(duration)}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: { color: '#fff', fontSize: 12, fontWeight: '500' },
+  separator: { color: 'rgba(255,255,255,0.5)' },
+});

package/src/components/controls/VolumeButton.tsx

@@ -0,0 +1,23 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useVideoStore } from '../core/VideoPlayerContext';
+import { Icon } from './Icon';
+
+export function VolumeButton() {
+  const muted = useVideoStore((s) => s.muted);
+  const { setMuted } = useVideoStore((s) => s);
+
+  return (
+    <TouchableOpacity
+      onPress={() => setMuted(!muted)}
+      style={styles.btn}
+      hitSlop={12}
+    >
+      <Icon size={22} name={muted ? 'mute' : 'volume'} />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  btn: { padding: 4 },
+  icon: { fontSize: 18, color: '#fff' },
+});

package/src/components/core/VideoPlayer.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import Video, {
+  type VideoRef,
+  type OnLoadData,
+  type OnProgressData,
+  type OnBufferData,
+  type OnVideoErrorData,
+} from 'react-native-video';
+import { useVideoPlayerContext, useVideoStore } from './VideoPlayerContext';
+import type { VideoSource, VideoProgress } from '../../types';
+
+interface Props {
+  source: VideoSource;
+  autoPlay: boolean;
+  loop: boolean;
+  poster?: string;
+  onProgress?: (p: VideoProgress) => void;
+  onEnd?: () => void;
+  onError?: (e: Error) => void;
+  onBuffer?: (buffering: boolean) => void;
+}
+
+export function VideoPlayer({
+  source,
+  autoPlay,
+  loop,
+  poster,
+  onProgress,
+  onEnd,
+  onError,
+  onBuffer,
+}: Props) {
+  const { videoRef } = useVideoPlayerContext();
+  const {
+    setStatus,
+    setCurrentTime,
+    setDuration,
+    setBuffered,
+    setError,
+    status,
+  } = useVideoStore((s) => s); // state as reactive subscriptions
+  const muted = useVideoStore((s) => s.muted);
+  const speed = useVideoStore((s) => s.speed);
+  const isPaused = useVideoStore(
+    (s) => s.status === 'paused' || s.status === 'idle' || s.status === 'error'
+  );
+
+  const handleLoad = useCallback(
+    (data: OnLoadData) => {
+      setDuration(data.duration);
+      setStatus(autoPlay ? 'playing' : 'paused');
+    },
+    [autoPlay, setDuration, setStatus]
+  );
+
+  const handleProgress = useCallback(
+    (data: OnProgressData) => {
+      setCurrentTime(data.currentTime);
+      setBuffered(data.playableDuration);
+      onProgress?.({
+        currentTime: data.currentTime,
+        playableDuration: data.playableDuration,
+        seekableDuration: data.seekableDuration,
+      });
+    },
+    [onProgress, setCurrentTime, setBuffered]
+  );
+
+  const bufferTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const handleBuffer = useCallback(
+    ({ isBuffering }: OnBufferData) => {
+      clearTimeout(bufferTimerRef.current);
+      if (isBuffering) {
+        setStatus('buffering');
+        onBuffer?.(true);
+      } else {
+        // debounce the recovery — ignore spurious false events
+        bufferTimerRef.current = setTimeout(() => {
+          setStatus('playing');
+          onBuffer?.(false);
+        }, 300);
+      }
+    },
+    [onBuffer, setStatus]
+  );
+
+  const handleError = useCallback(
+    (e: OnVideoErrorData) => {
+      const msg = e.error?.errorString ?? 'Playback error';
+      setError(msg);
+      setStatus('error');
+      onError?.(new Error(msg));
+    },
+    [onError, setError, setStatus]
+  );
+
+  const handleEnd = useCallback(() => {
+    setStatus('paused');
+    onEnd?.();
+  }, [onEnd, setStatus]);
+
+  return (
+    <Video
+      ref={videoRef as React.RefObject<VideoRef>}
+      source={{
+        bufferConfig: {
+          minBufferMs: 2500,
+          maxBufferMs: 10000,
+          bufferForPlaybackMs: 1000,
+          bufferForPlaybackAfterRebufferMs: 2000,
+        },
+        ...(source as any),
+      }}
+      poster={poster}
+      paused={isPaused}
+      muted={muted}
+      rate={speed}
+      repeat={loop}
+      style={StyleSheet.absoluteFill}
+      resizeMode="contain"
+      controls={false}
+      progressUpdateInterval={250}
+      onLoad={handleLoad}
+      onProgress={handleProgress}
+      onBuffer={handleBuffer}
+      onError={handleError}
+      onEnd={handleEnd}
+      pointerEvents="none"
+      onLoadStart={() => {
+        setStatus('loading');
+      }}
+      onReadyForDisplay={() => {
+        // only auto-play if we haven't been manually paused
+        if (status === 'loading' || status === 'buffering') {
+          setStatus(autoPlay ? 'playing' : 'paused');
+        }
+      }}
+      bufferConfig={{
+        minBufferMs: 2500,
+        maxBufferMs: 10000,
+        bufferForPlaybackMs: 1000,
+        bufferForPlaybackAfterRebufferMs: 2000,
+      }}
+    />
+  );
+}

package/src/components/core/VideoPlayerContext.tsx

@@ -0,0 +1,133 @@
+import React, { createContext, useContext, useRef } from 'react';
+import { useRef as useStoreRef } from 'react';
+import type { VideoRef } from 'react-native-video';
+import { createStore, useStore } from 'zustand';
+import type { PlaybackStatus, VideoKitTheme } from '../../types';
+
+//Theme
+
+const ThemeContext = createContext<VideoKitTheme>({});
+export const useVideoTheme = () => useContext(ThemeContext);
+
+// ─── Store shape ─────────────────────────────────────────────────────────────
+
+interface VideoState {
+  status: PlaybackStatus;
+  currentTime: number;
+  duration: number;
+  buffered: number;
+  muted: boolean;
+  speed: number;
+  isFullscreen: boolean;
+  controlsVisible: boolean;
+  error: string | null;
+  setStatus: (status: PlaybackStatus) => void;
+  setCurrentTime: (t: number) => void;
+  setDuration: (d: number) => void;
+  setBuffered: (b: number) => void;
+  setMuted: (m: boolean) => void;
+  setSpeed: (s: number) => void;
+  setFullscreen: (f: boolean) => void;
+  setControlsVisible: (v: boolean) => void;
+  setError: (e: string | null) => void;
+  reset: () => void;
+}
+
+const initialState = {
+  status: 'idle' as PlaybackStatus,
+  currentTime: 0,
+  duration: 0,
+  buffered: 0,
+  muted: false,
+  speed: 1,
+  isFullscreen: false,
+  controlsVisible: true,
+  error: null,
+};
+
+export type VideoStore = ReturnType<typeof createVideoStore>;
+
+export const createVideoStore = () =>
+  createStore<VideoState>((set) => ({
+    ...initialState,
+    setStatus: (status) => set({ status }),
+    setCurrentTime: (currentTime) => set({ currentTime }),
+    setDuration: (duration) => set({ duration }),
+    setBuffered: (buffered) => set({ buffered }),
+    setMuted: (muted) => set({ muted }),
+    setSpeed: (speed) => set({ speed }),
+    setFullscreen: (isFullscreen) => set({ isFullscreen }),
+    setControlsVisible: (controlsVisible) => set({ controlsVisible }),
+    setError: (error) => set({ error }),
+    reset: () => set(initialState),
+  }));
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+interface VideoPlayerContextValue {
+  videoRef: React.RefObject<VideoRef | null>;
+  store: VideoStore;
+}
+
+const VideoPlayerContext = createContext<VideoPlayerContextValue | null>(null);
+
+// ─── Provider ────────────────────────────────────────────────────────────────
+
+export const VideoPlayerProvider = ({
+  children,
+  theme,
+}: {
+  children: React.ReactNode;
+  theme?: VideoKitTheme;
+}) => {
+  const videoRef = useRef<VideoRef | null>(null);
+  const storeRef = useStoreRef<VideoStore | null>(null);
+
+  // create the store once per provider instance
+  if (storeRef.current === null) {
+    storeRef.current = createVideoStore();
+  }
+
+  return (
+    <VideoPlayerContext.Provider value={{ videoRef, store: storeRef.current }}>
+      <ThemeContext.Provider value={theme ?? {}}>
+        {children}
+      </ThemeContext.Provider>
+    </VideoPlayerContext.Provider>
+  );
+};
+
+// ─── Hooks ───────────────────────────────────────────────────────────────────
+
+export const useVideoPlayerContext = () => {
+  const ctx = useContext(VideoPlayerContext);
+  if (!ctx)
+    throw new Error(
+      'useVideoPlayerContext must be used inside VideoPlayerProvider'
+    );
+  return ctx;
+};
+
+/**
+ * Scoped reactive store hook — replaces the old global useVideoStore.
+ * Use this everywhere instead of the old import.
+ */
+export const useVideoStore: <T>(selector: (state: VideoState) => T) => T = (
+  selector
+) => {
+  const { store } = useVideoPlayerContext();
+  return useStore(store, selector);
+};
+// export function useVideoStore<T>(selector: (state: VideoState) => T): T {
+//   const { store } = useVideoPlayerContext();
+//   return useStore(store, selector);
+// }
+
+/**
+ * For imperative access (getState / setState) without subscribing.
+ * Use in callbacks and gesture handlers.
+ */
+export const useVideoStoreApi = () => {
+  const { store } = useVideoPlayerContext();
+  return store;
+};

package/src/components/core/index.ts

@@ -0,0 +1,5 @@
+export { useVideoStore } from './VideoPlayerContext';
+export {
+  VideoPlayerProvider,
+  useVideoPlayerContext,
+} from './VideoPlayerContext';

package/src/components/index.ts

@@ -0,0 +1,25 @@
+// ─── Main component ───────────────────────────────────────────────────────────
+export { VideoPlayer } from './core/VideoPlayer';
+export { VideoKit } from './VideoKit';
+
+// ─── Headless hook ────────────────────────────────────────────────────────────
+export { useVideoPlayer } from '../hooks/useVideoPlayer';
+
+// ─── Context & store (for advanced usage) ────────────────────────────────────
+export {
+  VideoPlayerProvider,
+  useVideoPlayerContext,
+  useVideoStore,
+} from './core/VideoPlayerContext';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+export type {
+  VideoKitProps,
+  VideoKitTheme,
+  VideoKitControlsConfig,
+  VideoSource,
+  VideoPlayerAPI,
+  VideoPlayerState,
+  VideoProgress,
+  PlaybackStatus,
+} from '../types';

package/src/components/overlays/BufferingOverlay.tsx

@@ -0,0 +1,21 @@
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { useVideoStore } from '../core/VideoPlayerContext';
+
+export function BufferingOverlay() {
+  const status = useVideoStore((s) => s.status);
+  if (status !== 'buffering' && status !== 'loading') return null;
+
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color="#fff" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/overlays/DoubleTapSeek.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+export interface DoubleTapSeekHandle {
+  show: (side: 'left' | 'right', seconds: number) => void;
+}
+
+export const DoubleTapSeek = forwardRef<DoubleTapSeekHandle>((_, ref) => {
+  const [state, setState] = useState<{
+    side: 'left' | 'right';
+    seconds: number;
+  } | null>(null);
+
+  const opacity = useSharedValue(0);
+  const scale = useSharedValue(0.8);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const hide = () => setState(null);
+
+  useImperativeHandle(ref, () => ({
+    show: (side, seconds) => {
+      clearTimeout(timerRef.current);
+      setState({ side, seconds });
+      opacity.value = withSequence(
+        withTiming(1, { duration: 100 }),
+        withTiming(1, { duration: 400 }),
+        withTiming(0, { duration: 200 }, (done) => {
+          if (done) scheduleOnRN(hide);
+        })
+      );
+      scale.value = withSequence(
+        withTiming(1, { duration: 150 }),
+        withTiming(0.9, { duration: 350 })
+      );
+    },
+  }));
+
+  const animStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ scale: scale.value }],
+  }));
+
+  if (!state) return null;
+
+  const isLeft = state.side === 'left';
+
+  return (
+    <View
+      style={[styles.container, isLeft ? styles.left : styles.right]}
+      pointerEvents="none"
+    >
+      <Animated.View style={[styles.ripple, animStyle]}>
+        <Text style={styles.arrow}>{isLeft ? '«' : '»'}</Text>
+        <Text style={styles.label}>
+          {isLeft ? `-${state.seconds}s` : `+${state.seconds}s`}
+        </Text>
+      </Animated.View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    width: '40%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  left: { left: 0 },
+  right: { right: 0 },
+  ripple: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+  },
+  arrow: { color: '#fff', fontSize: 20, fontWeight: '700' },
+  label: { color: '#fff', fontSize: 11, fontWeight: '600' },
+});

package/src/components/overlays/ErrorOverlay.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useVideoStore } from '../core/VideoPlayerContext';
+
+interface Props {
+  onRetry?: () => void;
+}
+
+export function ErrorOverlay({ onRetry }: Props) {
+  const status = useVideoStore((s) => s.status);
+  const error = useVideoStore((s) => s.error);
+  if (status !== 'error') return null;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.icon}>⚠️</Text>
+      <Text style={styles.message}>{error ?? 'Something went wrong'}</Text>
+      {onRetry && (
+        <TouchableOpacity style={styles.retryBtn} onPress={onRetry}>
+          <Text style={styles.retryText}>Retry</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.75)',
+    gap: 12,
+  },
+  icon: { fontSize: 36 },
+  message: {
+    color: '#fff',
+    fontSize: 14,
+    textAlign: 'center',
+    paddingHorizontal: 24,
+  },
+  retryBtn: {
+    marginTop: 8,
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    backgroundColor: '#fff',
+    borderRadius: 20,
+  },
+  retryText: { color: '#000', fontWeight: '700', fontSize: 14 },
+});