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

package/src/VideoPlayer/MediaControls/MediaControls.tsx

@@ -1,30 +0,0 @@
-import { memo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import TopControls from './TopControls';
-import MiddleControls from './MiddleControls';
-import BottomControls from './BottomControls';
-
-export type MediaControlsProps = {
-  onClose?: () => void;
-};
-
-const MediaControls: React.FC<MediaControlsProps> = ({ onClose }) => {
-  return (
-    <View style={styles.container}>
-      <TopControls onClose={onClose} />
-      <MiddleControls />
-      <BottomControls />
-    </View>
-  );
-};
-
-export default memo(MediaControls);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    minHeight: 0,
-  },
-});

package/src/VideoPlayer/MediaControls/MediaControlsProvider.tsx

@@ -1,104 +0,0 @@
-import React, { useEffect, useRef, useMemo } from 'react';
-import { TouchableOpacity, View, type ViewStyle, Animated } from 'react-native';
-import { type EdgeInsets } from 'react-native-safe-area-context';
-import { moderateScale } from 'react-native-size-matters';
-import MediaControls, { type MediaControlsProps } from './MediaControls';
-import SettingModal from '../Settings/SettingModal';
-import { useVideoPlayerStore } from '../store/videoPlayerStore';
-import SkipAndNextControls from '../components/SkipAndNextControls';
-import type { MediaEpisode } from '../store/videoPlayer.type';
-import globalStyles from '../styles/globalStyles';
-import type { ExtendedWatchProgress } from '../utils';
-import SubtitleView from '../components/SubtitleView';
-
-const HORIZONTAL_PADDING = moderateScale(12);
-const BOTTOM_PADDING_EXTRA = moderateScale(8);
-const MIN_TOP_PADDING = moderateScale(10);
-
-interface MediaControlsProviderProps extends MediaControlsProps {
-  children: React.ReactNode;
-  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
-  reportProgress: (event: ExtendedWatchProgress['event']) => void;
-  insets: EdgeInsets;
-}
-
-const MediaControlsProvider: React.FC<MediaControlsProviderProps> = ({
-  children,
-  onClose,
-  onPressEpisode,
-  reportProgress,
-  insets,
-}) => {
-  const { top, bottom, left, right } = insets;
-  const controlsVisible = useVideoPlayerStore((state) => state.controlsVisible);
-  const setControlsVisible = useVideoPlayerStore(
-    (state) => state.setControlsVisible
-  );
-  const controlsTimer = useVideoPlayerStore((state) => state.controlsTimer);
-  const timeoutId = React.useRef<NodeJS.Timeout | null>(null);
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-
-  // Safe-area padding: never negative, single source of truth (MediaControls uses View, not SafeAreaView)
-  const containerPadding: ViewStyle = useMemo(
-    () => ({
-      paddingTop: top - MIN_TOP_PADDING,
-      paddingBottom: bottom + BOTTOM_PADDING_EXTRA,
-      paddingLeft: left + HORIZONTAL_PADDING,
-      paddingRight: right + HORIZONTAL_PADDING,
-    }),
-    [top, bottom, left, right]
-  );
-
-  // Memoize animated style
-  const animatedStyle = useMemo(
-    () => [globalStyles.absoluteFill, { opacity: fadeAnim }],
-    [fadeAnim]
-  );
-
-  useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: controlsVisible ? 1 : 0,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-
-    if (controlsVisible) {
-      timeoutId.current = setTimeout(() => {
-        setControlsVisible(false);
-      }, controlsTimer * 1000);
-    }
-
-    return () => {
-      if (timeoutId.current) clearTimeout(timeoutId.current);
-    };
-  }, [controlsVisible, controlsTimer, setControlsVisible, fadeAnim]);
-
-  return (
-    <View style={globalStyles.flexOne}>
-      {children}
-      <Animated.View
-        pointerEvents={controlsVisible ? 'auto' : 'none'}
-        style={animatedStyle}
-      >
-        <TouchableOpacity
-          onPress={() => setControlsVisible(false)}
-          style={[globalStyles.controlsContainer, containerPadding]}
-          activeOpacity={1}
-        >
-          <MediaControls onClose={onClose} />
-        </TouchableOpacity>
-      </Animated.View>
-      <SettingModal
-        onPressEpisode={onPressEpisode}
-        reportProgress={reportProgress}
-      />
-      <SubtitleView />
-      <SkipAndNextControls
-        onPressEpisode={onPressEpisode}
-        reportProgress={reportProgress}
-      />
-    </View>
-  );
-};
-
-export default MediaControlsProvider;

package/src/VideoPlayer/MediaControls/MiddleControls.tsx

@@ -1,259 +0,0 @@
-import React, { useState, useRef, useMemo } from 'react';
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  Animated,
-  Easing,
-} from 'react-native';
-import { moderateScale, scale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { Play, Pause, RotateCcw, RotateCw } from 'lucide-react-native';
-
-import { useVideoPlayerStore } from '../store/videoPlayerStore';
-import { videoRef } from '../utils';
-import { handlePause } from '../utils';
-import { useVideoPlayerConfig } from '../context';
-import RotatingLoader from '../../AdsPlayer/components/RotatingLoader';
-import globalStyles from '../styles/globalStyles';
-
-const BUTTON_SIZE = moderateScale(80);
-const SMALL_BUTTON_SIZE = moderateScale(60);
-const FEEDBACK_DURATION = 500;
-const MOVE_DISTANCE = 60;
-const SKIP_INCREMENT = 10;
-
-type SkipButtonProps = {
-  direction: 'forward' | 'backward';
-  onPress: ({ second }: { second: number }) => void;
-  colors: { text: string };
-  disabled?: boolean;
-};
-
-const MiddleControls: React.FC = () => {
-  const {
-    isPaused,
-    isBuffering,
-    setStartWatchTime,
-    error,
-    setIsPaused,
-    duration,
-    currentTime,
-    setCurrentTime,
-  } = useVideoPlayerStore();
-
-  const { colors } = useVideoPlayerConfig();
-
-  const isVideoEnded = duration > 0 && currentTime >= duration;
-
-  const handleSkip = (delta: number) => {
-    let newTime = currentTime + delta;
-    if (newTime < 0) newTime = 0;
-    if (newTime > duration) newTime = duration;
-
-    videoRef?.current?.seek(newTime);
-    setCurrentTime(newTime);
-  };
-
-  const handlePlayPause = () => {
-    if (isVideoEnded) {
-      videoRef.current?.seek(0);
-      setCurrentTime(0);
-      setIsPaused(false);
-      setStartWatchTime(Date.now());
-      return;
-    }
-
-    if (!isPaused) {
-      handlePause();
-      setIsPaused(true);
-    } else {
-      setIsPaused(false);
-      setStartWatchTime(Date.now());
-    }
-  };
-
-  // Memoize container style
-  const containerStyle = useMemo(
-    () => [globalStyles.absoluteFill, styles.container],
-    []
-  );
-
-  if (error) {
-    return (
-      <View style={containerStyle}>
-        <Text style={[styles.errorText, { color: colors.text }]}>{error}</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={containerStyle}>
-      <SkipButton
-        direction="backward"
-        onPress={({ second }) => handleSkip(-second)}
-        colors={colors}
-        disabled={currentTime <= 0}
-      />
-
-      {isBuffering ? (
-        <View style={[styles.button, styles.playButton]}>
-          <RotatingLoader
-            color={colors.text}
-            autoRotate={isBuffering}
-            size={scale(50)}
-          />
-        </View>
-      ) : (
-        <TouchableOpacity
-          onPress={handlePlayPause}
-          style={[styles.button, styles.playButton]}
-          activeOpacity={0.8}
-        >
-          {isPaused ? (
-            <Play size={scale(50)} color={colors.text} />
-          ) : (
-            <Pause size={scale(50)} color={colors.text} />
-          )}
-        </TouchableOpacity>
-      )}
-
-      <SkipButton
-        direction="forward"
-        onPress={({ second }) => handleSkip(second)}
-        colors={colors}
-        disabled={currentTime >= duration}
-      />
-    </View>
-  );
-};
-
-export default MiddleControls;
-
-const SkipButton: React.FC<SkipButtonProps> = ({
-  direction,
-  onPress,
-  colors,
-  disabled,
-}) => {
-  const [step, setStep] = useState(0);
-  const anim = useRef(new Animated.Value(0)).current;
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const handlePress = () => {
-    if (disabled) return;
-
-    const newStep = step + SKIP_INCREMENT;
-    setStep(newStep);
-    onPress({ second: newStep });
-
-    anim.setValue(0);
-    Animated.timing(anim, {
-      toValue: 1,
-      duration: FEEDBACK_DURATION,
-      easing: Easing.out(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setStep(0), FEEDBACK_DURATION);
-  };
-
-  const translateX = anim.interpolate({
-    inputRange: [0, 1],
-    outputRange:
-      direction === 'forward'
-        ? [SMALL_BUTTON_SIZE, SMALL_BUTTON_SIZE + MOVE_DISTANCE]
-        : [-SMALL_BUTTON_SIZE, -SMALL_BUTTON_SIZE - MOVE_DISTANCE],
-  });
-
-  const opacity = anim.interpolate({
-    inputRange: [0, 0.8, 1],
-    outputRange: [1, 1, 0],
-  });
-
-  const scaleAnim = anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [1, 1.3, 1],
-  });
-
-  return (
-    <TouchableOpacity
-      onPress={handlePress}
-      style={[
-        styles.button,
-        styles.smallButton,
-        disabled && styles.disabledButton,
-      ]}
-      activeOpacity={disabled ? 1 : 0.7}
-      disabled={disabled}
-    >
-      {/* Skip Icon */}
-      {direction === 'forward' ? (
-        <RotateCw size={scale(35)} color={colors.text} />
-      ) : (
-        <RotateCcw size={scale(35)} color={colors.text} />
-      )}
-
-      {/* Skip Duration Feedback */}
-      {step > 0 && !disabled && (
-        <Animated.View
-          style={[
-            styles.feedbackOverlay,
-            {
-              transform: [{ translateX }, { scale: scaleAnim }],
-              opacity,
-            },
-          ]}
-        >
-          <Text style={[styles.feedbackText, { color: colors.text }]}>
-            {step}s
-          </Text>
-        </Animated.View>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 100,
-  },
-  playButton: {
-    width: BUTTON_SIZE,
-    height: BUTTON_SIZE,
-    marginHorizontal: moderateScale(14),
-  },
-  smallButton: {
-    width: SMALL_BUTTON_SIZE,
-    height: SMALL_BUTTON_SIZE,
-    marginHorizontal: moderateScale(10),
-  },
-  disabledButton: {
-    opacity: 0.3,
-  },
-  errorText: {
-    fontSize: RFValue(18),
-    fontWeight: '600',
-    textAlign: 'center',
-    paddingHorizontal: scale(20),
-  },
-  feedbackOverlay: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  feedbackText: {
-    fontSize: RFValue(15),
-    fontWeight: '600',
-  },
-});

package/src/VideoPlayer/MediaControls/TopControls.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
-import { moderateScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { X } from 'lucide-react-native';
-import { lockToPortrait } from '../utils';
-import { useVideoPlayerConfig } from '../context';
-import { useVideoPlayerStore } from '../store/videoPlayerStore';
-
-interface TopControlsProps {
-  onClose?: () => void;
-}
-
-const TopControls: React.FC<TopControlsProps> = ({ onClose }) => {
-  const { activeTrack } = useVideoPlayerStore();
-  const { colors } = useVideoPlayerConfig();
-  const handleClose = () => {
-    // onClose already handles reportProgress and store reset in VideoPlayerCore
-    onClose?.();
-    lockToPortrait();
-  };
-
-  const showSubtitle =
-    activeTrack?.isTrailer ||
-    activeTrack?.seasonNumber !== undefined ||
-    activeTrack?.episodeNumber !== undefined;
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.textContainer}>
-        <Text
-          numberOfLines={1}
-          ellipsizeMode="tail"
-          style={[styles.title, { color: colors.text }]}
-        >
-          {activeTrack?.title || 'Unknown'}
-        </Text>
-        {showSubtitle && (
-          <Text style={[styles.subtitle, { color: colors.text }]}>
-            {activeTrack?.isTrailer
-              ? 'Trailer'
-              : `${
-                  activeTrack?.seasonNumber
-                    ? `S${activeTrack.seasonNumber} `
-                    : ''
-                }${
-                  activeTrack?.episodeNumber
-                    ? `E${activeTrack.episodeNumber}`
-                    : ''
-                }`}
-          </Text>
-        )}
-      </View>
-
-      <TouchableOpacity
-        style={styles.closeButton}
-        onPress={handleClose}
-        accessibilityRole="button"
-        accessibilityLabel="Close player"
-        accessibilityHint="Closes the video player and exits"
-      >
-        <X size={moderateScale(25)} color={colors.text} />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default TopControls;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: moderateScale(16),
-    paddingVertical: moderateScale(8),
-    zIndex: 51,
-  },
-  textContainer: {
-    flex: 1,
-    minWidth: 0,
-    paddingRight: moderateScale(10),
-  },
-  title: {
-    fontSize: RFValue(18),
-    fontWeight: '600',
-  },
-  subtitle: {
-    fontSize: RFValue(14),
-    fontWeight: '400',
-    marginTop: moderateScale(2),
-  },
-  closeButton: {
-    width: moderateScale(40),
-    height: moderateScale(40),
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: moderateScale(20),
-  },
-});