@zezosoft/zezo-ott-react-native-video-player 1.0.4 → 1.0.5

package/src/VideoPlayer/VideoPlayerCore.tsx

@@ -1,356 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { AppState, View, type AppStateStatus } from 'react-native';
-import Video, {
-  type OnProgressData,
-  type SelectedTrack,
-} from 'react-native-video';
-import { type EdgeInsets } from 'react-native-safe-area-context';
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-} from 'react-native-gesture-handler';
-import {
-  runOnJS,
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-} from 'react-native-reanimated';
-
-import { hideControlsStyles, videoRef } from './utils';
-import { getVideoSource, handlePause } from './utils';
-import MediaControlsProvider from './MediaControls/MediaControlsProvider';
-import { useVideoPlayerStore } from './store/videoPlayerStore';
-import { useAdsPlayerStore } from '../AdsPlayer/store/adsPlayerStore';
-import { createPlayerEvents } from './utils';
-import globalStyles from './styles/globalStyles';
-import { VideoPlayerConfigProvider, type VideoPlayerTheme } from './context';
-import { useWatchReporter, type ExtendedWatchProgress } from './utils';
-import type { MediaEpisode } from './store/videoPlayer.type';
-import Toast from './components/Toast';
-
-export interface VideoPlayerCoreProps {
-  onClose?: () => void;
-  isFocused?: boolean;
-  seekTime?: number | null;
-  mode?: 'fullscreen' | 'normal';
-  autoNext?: boolean;
-  event?: {
-    onPressEpisode?: ({
-      episode,
-    }: {
-      episode: MediaEpisode;
-    }) => Promise<boolean>;
-  };
-  theme?: Partial<VideoPlayerTheme>;
-  onWatchProgress?: (progress: ExtendedWatchProgress) => void;
-  insets: EdgeInsets;
-  isPausedOverride?: boolean;
-  onVideoEnd?: () => void;
-}
-
-const VideoPlayerCore: React.FC<VideoPlayerCoreProps> = ({
-  onClose,
-  seekTime,
-  event,
-  autoNext = true,
-  theme,
-  onWatchProgress,
-  insets,
-  isPausedOverride,
-  onVideoEnd,
-}) => {
-  // Use separate selectors to avoid infinite loop (object selectors create new objects on each call)
-  const isPaused = useVideoPlayerStore((state) => state.isPaused);
-  const playBackRate = useVideoPlayerStore((state) => state.playBackRate);
-  const resizeMode = useVideoPlayerStore((state) => state.resizeMode);
-  const controlsVisible = useVideoPlayerStore((state) => state.controlsVisible);
-  const selectedAudioTrack = useVideoPlayerStore(
-    (state) => state.selectedAudioTrack
-  );
-  const selectedSubtitleTrack = useVideoPlayerStore(
-    (state) => state.selectedSubtitleTrack
-  );
-  const selectedVideoTrack = useVideoPlayerStore(
-    (state) => state.selectedVideoTrack
-  );
-  const maxBitRate = useVideoPlayerStore((state) => state.maxBitRate);
-  const playList = useVideoPlayerStore((state) => state.playList);
-  const currentTrackIndex = useVideoPlayerStore(
-    (state) => state.currentTrackIndex
-  );
-  const activeTrack = useVideoPlayerStore((state) => state.activeTrack);
-
-  const setResizeMode = useVideoPlayerStore((state) => state.setResizeMode);
-  const setControlsVisible = useVideoPlayerStore(
-    (state) => state.setControlsVisible
-  );
-  const setIsPaused = useVideoPlayerStore((state) => state.setIsPaused);
-  const setError = useVideoPlayerStore((state) => state.setError);
-
-  const playerEventsRef = useRef(createPlayerEvents());
-  const playerEvents = playerEventsRef.current;
-  const { reportProgress } = useWatchReporter({ onWatchProgress });
-  const seekTimeRef = useRef(seekTime);
-
-  // Toast state
-  const [toastMessage, setToastMessage] = useState<string | null>(null);
-  const toastOpacity = useSharedValue(0);
-
-  // Pinch gesture state
-  const pinchStartScale = useRef(1);
-
-  useEffect(() => {
-    seekTimeRef.current = seekTime;
-  }, [seekTime]);
-
-  const effectivePaused = useMemo(
-    () => (isPausedOverride !== undefined ? isPausedOverride : isPaused),
-    [isPausedOverride, isPaused]
-  );
-
-  const videoSource = useMemo(
-    () => getVideoSource({ playList, currentTrackIndex }),
-    [playList, currentTrackIndex]
-  );
-
-  const selectedAudioTrackMemo = useMemo(
-    () => selectedAudioTrack as SelectedTrack,
-    [selectedAudioTrack]
-  );
-
-  const selectedTextTrackMemo = useMemo(
-    () =>
-      selectedSubtitleTrack?.value === 'Off'
-        ? undefined
-        : (selectedSubtitleTrack as SelectedTrack),
-    [selectedSubtitleTrack]
-  );
-
-  const selectedVideoTrackMemo = useMemo(
-    () =>
-      selectedVideoTrack
-        ? {
-            type: selectedVideoTrack.type,
-            value: selectedVideoTrack.value,
-          }
-        : undefined,
-    [selectedVideoTrack]
-  );
-
-  // Memoize video style for performance
-  const videoStyle = useMemo(() => globalStyles.absoluteFill, []);
-
-  // Memoize buffer config for performance
-  const bufferConfig = useMemo(
-    () => ({
-      minBufferMs: 15000,
-      maxBufferMs: 50000,
-      bufferForPlaybackMs: 2500,
-      bufferForPlaybackAfterRebufferMs: 5000,
-    }),
-    []
-  );
-
-  useEffect(() => {
-    if (seekTimeRef.current && !activeTrack?.isTrailer && videoRef?.current) {
-      videoRef.current.seek(seekTimeRef.current);
-    }
-  }, [seekTime, activeTrack?.isTrailer]);
-
-  const handleAppStateChange = useCallback(
-    (nextState: AppStateStatus) => {
-      if (nextState === 'inactive' || nextState === 'background') {
-        handlePause();
-        setIsPaused(true);
-        reportProgress('PROGRESS');
-      }
-    },
-    [setIsPaused, reportProgress]
-  );
-
-  useEffect(() => {
-    const sub = AppState.addEventListener('change', handleAppStateChange);
-    return () => sub.remove();
-  }, [handleAppStateChange]);
-
-  const handleProgress = useCallback(
-    (progressEvent: OnProgressData) => {
-      playerEvents.onProgress(progressEvent);
-    },
-    [playerEvents]
-  );
-
-  const handleVideoEnd = useCallback(() => {
-    if (onVideoEnd) {
-      onVideoEnd();
-    } else {
-      playerEvents.onEnd({
-        reportProgress,
-        onPressEpisode: event?.onPressEpisode ?? (async () => true),
-        autoNext,
-      });
-    }
-  }, [
-    onVideoEnd,
-    playerEvents,
-    reportProgress,
-    event?.onPressEpisode,
-    autoNext,
-  ]);
-
-  const handleError = useCallback(() => {
-    setError("Video couldn't be loaded");
-  }, [setError]);
-
-  const handleTap = useCallback(() => {
-    setControlsVisible(!controlsVisible);
-  }, [controlsVisible, setControlsVisible]);
-
-  const showToast = useCallback(
-    (message: string) => {
-      setToastMessage(message);
-      toastOpacity.value = withTiming(1, { duration: 200 });
-      setTimeout(() => {
-        toastOpacity.value = withTiming(0, { duration: 200 }, () => {
-          runOnJS(setToastMessage)(null);
-        });
-      }, 2000);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  const handlePinchEnd = useCallback(
-    (finalScale: number) => {
-      // Determine pinch direction based on scale change
-      // If scale increased (pinch out) → cover (zoomed to fill)
-      // If scale decreased (pinch in) → contain (original)
-      const scaleChange = finalScale - pinchStartScale.current;
-      const newMode = scaleChange > 0 ? 'cover' : 'contain';
-      setResizeMode(newMode);
-
-      // Show toast message
-      const message = newMode === 'cover' ? 'Zoomed to Fill' : 'Original';
-      showToast(message);
-    },
-    [setResizeMode, showToast]
-  );
-
-  // Animated style for toast
-  const toastAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: toastOpacity.value,
-    };
-  }, []);
-
-  const pinchGesture = useMemo(
-    () =>
-      Gesture.Pinch()
-        .onStart((pinchEvent) => {
-          'worklet';
-          pinchStartScale.current = pinchEvent.scale;
-        })
-        .onEnd((pinchEvent) => {
-          'worklet';
-          runOnJS(handlePinchEnd)(pinchEvent.scale);
-        }),
-    [handlePinchEnd]
-  );
-
-  const tapGesture = useMemo(
-    () =>
-      Gesture.Tap()
-        .onEnd(() => {
-          runOnJS(handleTap)();
-        })
-        .maxDuration(250),
-    [handleTap]
-  );
-
-  const composedGestures = useMemo(
-    () => Gesture.Race(pinchGesture, tapGesture),
-    [pinchGesture, tapGesture]
-  );
-
-  const handleClose = useCallback(() => {
-    reportProgress('VIDEO_CLOSE');
-    // Reset stores after report is sent
-    setTimeout(() => {
-      const { resetStore } = useVideoPlayerStore.getState();
-      const { resetAdsStore } = useAdsPlayerStore.getState();
-      resetStore();
-      resetAdsStore();
-    }, 0);
-    onClose?.();
-  }, [reportProgress, onClose]);
-
-  const handlePressEpisode = useCallback(
-    async ({ episode }: { episode: MediaEpisode }) => {
-      if (event?.onPressEpisode) {
-        return await event.onPressEpisode({ episode });
-      }
-      return Promise.resolve(true);
-    },
-    [event]
-  );
-
-  return (
-    <VideoPlayerConfigProvider theme={theme}>
-      <GestureHandlerRootView style={globalStyles.flexOne}>
-        <MediaControlsProvider
-          onClose={handleClose}
-          onPressEpisode={handlePressEpisode}
-          reportProgress={reportProgress}
-          insets={insets}
-        >
-          <GestureDetector gesture={composedGestures}>
-            <View style={globalStyles.flexOneWithBlackBackground}>
-              <Video
-                ref={videoRef}
-                source={videoSource}
-                paused={effectivePaused}
-                onProgress={handleProgress}
-                onLoad={playerEvents.onLoad}
-                onBuffer={playerEvents.onBuffer}
-                onEnd={handleVideoEnd}
-                onLoadStart={playerEvents.onLoadStart}
-                onError={handleError}
-                controls={false}
-                resizeMode={resizeMode || 'contain'}
-                rate={playBackRate || 1}
-                selectedAudioTrack={selectedAudioTrackMemo}
-                selectedTextTrack={selectedTextTrackMemo}
-                selectedVideoTrack={selectedVideoTrackMemo}
-                maxBitRate={maxBitRate ?? undefined}
-                style={videoStyle}
-                controlsStyles={hideControlsStyles}
-                ignoreSilentSwitch="ignore"
-                playInBackground={false}
-                playWhenInactive={false}
-                allowsExternalPlayback={true}
-                bufferConfig={bufferConfig}
-              />
-              {toastMessage && (
-                <Toast
-                  message={toastMessage}
-                  animatedStyle={toastAnimatedStyle}
-                  insets={insets}
-                  position="top"
-                />
-              )}
-            </View>
-          </GestureDetector>
-        </MediaControlsProvider>
-      </GestureHandlerRootView>
-    </VideoPlayerConfigProvider>
-  );
-};
-
-export default React.memo(VideoPlayerCore);

package/src/VideoPlayer/components/ProgressBar.tsx

@@ -1,211 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useMemo, useCallback, useRef } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { Slider } from 'react-native-awesome-slider';
-import { useSharedValue, withTiming, Easing } from 'react-native-reanimated';
-import { moderateScale } from 'react-native-size-matters';
-import { useVideoPlayerConfig } from '../context';
-
-interface Props {
-  duration: number;
-  currentTime: number;
-  bufferedTime: number;
-  onSeek?: (time: number) => void;
-  showThumb?: boolean;
-  height?: number;
-  disabled?: boolean;
-  adMarkers?: number[];
-}
-
-const SEEK_COOLDOWN_MS = 400;
-const PROGRESS_ANIM_DURATION = 220;
-const CACHE_ANIM_DURATION = 280;
-const SMOOTH_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
-
-const ProgressBar: React.FC<Props> = React.memo(
-  ({
-    duration,
-    currentTime,
-    bufferedTime,
-    onSeek,
-    showThumb = true,
-    disabled = false,
-    adMarkers = [],
-    height,
-  }) => {
-    const { colors, metrics } = useVideoPlayerConfig();
-    const sliderHeight = height ?? metrics.sliderHeight;
-    const thumbSize = useMemo(() => {
-      return sliderHeight * 3;
-    }, [sliderHeight]);
-
-    const progress = useSharedValue(currentTime);
-    const cache = useSharedValue(bufferedTime);
-    const min = useSharedValue(0);
-    const max = useSharedValue(duration);
-
-    const isSlidingRef = useRef(false);
-    const seekCooldownUntilRef = useRef(0);
-    const seekCooldownTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-      null
-    );
-
-    useEffect(() => {
-      if (isSlidingRef.current) return;
-      if (Date.now() < seekCooldownUntilRef.current) return;
-      progress.value = withTiming(currentTime, {
-        duration: PROGRESS_ANIM_DURATION,
-        easing: SMOOTH_EASING,
-      });
-    }, [currentTime]);
-
-    useEffect(() => {
-      cache.value = withTiming(bufferedTime, {
-        duration: CACHE_ANIM_DURATION,
-        easing: SMOOTH_EASING,
-      });
-    }, [bufferedTime]);
-
-    useEffect(() => {
-      max.value = duration;
-    }, [duration]);
-
-    const adPositions = useMemo(() => {
-      if (duration <= 0) return [];
-      return adMarkers.map((t) => (t / duration) * 100);
-    }, [adMarkers, duration]);
-
-    const handleSeek = useCallback(
-      (value: number) => {
-        if (!disabled) onSeek?.(value);
-      },
-      [onSeek, disabled]
-    );
-
-    const handleSlidingStart = useCallback(() => {
-      isSlidingRef.current = true;
-      if (seekCooldownTimeoutRef.current) {
-        clearTimeout(seekCooldownTimeoutRef.current);
-        seekCooldownTimeoutRef.current = null;
-      }
-    }, []);
-
-    const handleSlidingComplete = useCallback(
-      (value: number) => {
-        progress.value = value;
-        seekCooldownUntilRef.current = Date.now() + SEEK_COOLDOWN_MS;
-        seekCooldownTimeoutRef.current = setTimeout(() => {
-          isSlidingRef.current = false;
-          seekCooldownTimeoutRef.current = null;
-        }, SEEK_COOLDOWN_MS);
-      },
-      [progress]
-    );
-
-    useEffect(() => {
-      return () => {
-        if (seekCooldownTimeoutRef.current) {
-          clearTimeout(seekCooldownTimeoutRef.current);
-        }
-      };
-    }, []);
-
-    return (
-      <View style={[styles.container, { height: thumbSize }]}>
-        <Slider
-          progress={progress}
-          minimumValue={min}
-          maximumValue={max}
-          cache={cache}
-          disable={disabled}
-          onSlidingStart={handleSlidingStart}
-          onSlidingComplete={handleSlidingComplete}
-          onValueChange={handleSeek}
-          containerStyle={[
-            styles.sliderContainer,
-            {
-              borderRadius: sliderHeight / 2,
-              height: sliderHeight,
-            },
-          ]}
-          renderThumb={
-            showThumb
-              ? () => (
-                  <View
-                    style={{
-                      backgroundColor: colors.primary,
-                      width: thumbSize,
-                      height: thumbSize,
-                      borderRadius: thumbSize / 2,
-                    }}
-                  />
-                )
-              : () => null
-          }
-          renderBubble={() => null}
-          thumbWidth={showThumb ? thumbSize : 0}
-          theme={{
-            minimumTrackTintColor: colors.primary,
-            maximumTrackTintColor: colors.secondary,
-            cacheTrackTintColor: colors.buffer,
-            disableMinTrackTintColor: colors.primary,
-            bubbleBackgroundColor: colors.white,
-          }}
-        />
-
-        {/* Ad Markers */}
-        {adPositions.length > 0 && (
-          <View style={styles.adMarkersContainer} pointerEvents="none">
-            {adPositions.map((pos, index) => (
-              <View
-                key={`ad-${index}`}
-                style={[
-                  styles.adMarker,
-                  {
-                    left: `${pos}%`,
-                    backgroundColor: colors.primary,
-                    width: sliderHeight,
-                  },
-                ]}
-              />
-            ))}
-          </View>
-        )}
-      </View>
-    );
-  },
-  (p, n) =>
-    p.currentTime === n.currentTime &&
-    p.bufferedTime === n.bufferedTime &&
-    p.duration === n.duration &&
-    p.disabled === n.disabled &&
-    p.showThumb === n.showThumb &&
-    p.height === n.height &&
-    JSON.stringify(p.adMarkers) === JSON.stringify(n.adMarkers)
-);
-
-export default ProgressBar;
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'relative',
-    width: '100%',
-    overflow: 'hidden',
-    justifyContent: 'center',
-  },
-  sliderContainer: {
-    overflow: 'hidden',
-  },
-  adMarkersContainer: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-  },
-  adMarker: {
-    position: 'absolute',
-    aspectRatio: 1,
-    top: '50%',
-    transform: [{ translateY: -moderateScale(2.5) }],
-  },
-});