@zezosoft/zezo-ott-react-native-video-player 1.0.0

package/src/VideoPlayer/MediaControls/BottomControls.tsx

@@ -0,0 +1,185 @@
+import React, { useCallback } from 'react';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type GestureResponderEvent,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+import {
+  Settings as SettingsIcon,
+  SlidersHorizontal as SpeedIcon,
+  Subtitles as SubtitlesIcon,
+  ListChecks as EpisodesIcon,
+} from 'lucide-react-native';
+
+import { useVideoPlayerStore } from '../store/videoPlayerStore';
+import { videoRef } from '../utils/videoRef';
+import type { SettingsAction } from '../store/videoPlayer.type';
+import { formatTime } from '../utils';
+import ProgressBar from '../components/ProgressBar';
+import { useVideoPlayerConfig } from '../context';
+
+type ControlButtonProps = {
+  onPress: (event: GestureResponderEvent) => void;
+  icon: React.ReactNode;
+  label: string;
+  accessibilityLabel?: string;
+  buttonStyle?: ViewStyle;
+  labelStyle?: TextStyle;
+  colors: {
+    text: string;
+  };
+};
+
+const ControlButton: React.FC<ControlButtonProps> = ({
+  onPress,
+  icon,
+  label,
+  accessibilityLabel,
+  buttonStyle,
+  labelStyle,
+  colors,
+}) => (
+  <TouchableOpacity
+    onPress={onPress}
+    style={[styles.button, buttonStyle]}
+    activeOpacity={0.8}
+    accessibilityLabel={accessibilityLabel ?? label}
+  >
+    {icon}
+    <Text style={[styles.buttonText, labelStyle, { color: colors.text }]}>
+      {label}
+    </Text>
+  </TouchableOpacity>
+);
+
+const BottomControls = () => {
+  const {
+    duration,
+    currentTime,
+    activeTrack,
+    playableDuration,
+    setSettingsModal,
+    setIsPaused,
+    setControlsVisible,
+    playBackRateLabel,
+  } = useVideoPlayerStore();
+
+  const { colors } = useVideoPlayerConfig();
+  const getRemainingTime = useCallback(
+    (totalDuration: number, currentPos: number) => {
+      const remainingTime = totalDuration - currentPos;
+      return formatTime(Math.max(remainingTime, 0));
+    },
+    []
+  );
+
+  const onSeek = (value: number) => {
+    videoRef.current?.seek(value);
+  };
+
+  const onOpenSettings = (type: SettingsAction) => {
+    setSettingsModal({ action: type, isVisible: true });
+    setIsPaused(true);
+    setControlsVisible(false);
+  };
+
+  return (
+    <View>
+      {/* Progress Bar Section */}
+      <View style={styles.sliderContainer}>
+        <View style={styles.sliderWrapper}>
+          <ProgressBar
+            duration={duration}
+            currentTime={currentTime}
+            bufferedTime={playableDuration}
+            onSeek={onSeek}
+          />
+        </View>
+        <Text style={[styles.timeText, { color: colors.text }]}>
+          {getRemainingTime(duration, currentTime)}
+        </Text>
+      </View>
+
+      {/* Action Buttons */}
+      <View style={styles.buttonsContainer}>
+        <ControlButton
+          onPress={() => onOpenSettings('speed')}
+          icon={<SpeedIcon size={moderateScale(18)} color={colors.text} />}
+          label={
+            playBackRateLabel && playBackRateLabel !== 'Normal'
+              ? `Speed (${playBackRateLabel})`
+              : 'Speed'
+          }
+          colors={colors}
+        />
+        <ControlButton
+          onPress={() => onOpenSettings('audioOrSubtitle')}
+          icon={<SubtitlesIcon size={moderateScale(19)} color={colors.text} />}
+          label="Audio & Subtitles"
+          colors={colors}
+        />
+        <ControlButton
+          onPress={() => onOpenSettings('settings')}
+          icon={<SettingsIcon size={moderateScale(18)} color={colors.text} />}
+          label="Settings"
+          colors={colors}
+        />
+        {!activeTrack?.isTrailer && activeTrack?.type === 'series' && (
+          <ControlButton
+            onPress={() => onOpenSettings('episodes')}
+            icon={<EpisodesIcon size={moderateScale(17)} color={colors.text} />}
+            label="Episodes"
+            colors={colors}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default BottomControls;
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: scale(12),
+  },
+  sliderWrapper: {
+    flex: 1,
+    minWidth: 0,
+  },
+  timeText: {
+    width: scale(50),
+    textAlign: 'right',
+    marginLeft: scale(4),
+    fontSize: RFValue(12),
+    fontWeight: '500',
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    paddingHorizontal: scale(10),
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(6),
+    marginHorizontal: scale(6),
+    marginVertical: verticalScale(4),
+    borderRadius: moderateScale(8),
+  },
+  buttonText: {
+    fontSize: RFValue(13),
+    marginLeft: scale(6),
+  },
+});

package/src/VideoPlayer/MediaControls/MediaControls.tsx

@@ -0,0 +1,29 @@
+import { memo } from 'react';
+import { StyleSheet, SafeAreaView } 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 (
+    <SafeAreaView style={styles.container}>
+      <TopControls onClose={onClose} />
+      <MiddleControls />
+      <BottomControls />
+    </SafeAreaView>
+  );
+};
+
+export default memo(MediaControls);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+});

package/src/VideoPlayer/MediaControls/MediaControlsProvider.tsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+  Animated,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { moderateScale } from 'react-native-size-matters';
+import MediaControls, { type MediaControlsProps } from './MediaControls';
+import SettingModal from '../model/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/useWatchReporter';
+import SubtitleView from '../components/SubtitleView';
+
+interface MediaControlsProviderProps extends MediaControlsProps {
+  children: React.ReactNode;
+  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
+  reportProgress: (event: ExtendedWatchProgress['event']) => void;
+}
+
+const MediaControlsProvider: React.FC<MediaControlsProviderProps> = ({
+  children,
+  onClose,
+  onPressEpisode,
+  reportProgress,
+}) => {
+  const { controlsVisible, setControlsVisible, controlsTimer } =
+    useVideoPlayerStore();
+  const { top, bottom, left, right } = useSafeAreaInsets();
+  const timeid = React.useRef<NodeJS.Timeout | null>(null);
+
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: controlsVisible ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+
+    if (controlsVisible) {
+      timeid.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, controlsTimer * 1000);
+    }
+
+    return () => {
+      if (timeid.current) clearTimeout(timeid.current);
+    };
+  }, [controlsVisible, controlsTimer, setControlsVisible, fadeAnim]);
+
+  const containerPadding: ViewStyle = {
+    paddingTop: top,
+    paddingBottom: bottom + moderateScale(5),
+    paddingLeft: left + moderateScale(10),
+    paddingRight: right + moderateScale(10),
+  };
+
+  return (
+    <View style={globalStyles.flexOne}>
+      {children}
+      <Animated.View
+        pointerEvents={controlsVisible ? 'auto' : 'none'}
+        style={[StyleSheet.absoluteFillObject, { opacity: fadeAnim }]}
+      >
+        <TouchableOpacity
+          onPress={() => setControlsVisible(false)}
+          style={[styles.container, containerPadding]}
+          activeOpacity={1}
+        >
+          <MediaControls onClose={onClose} />
+        </TouchableOpacity>
+      </Animated.View>
+      <SettingModal
+        onPressEpisode={onPressEpisode}
+        reportProgress={reportProgress}
+      />
+      <SubtitleView />
+      <SkipAndNextControls
+        onPressEpisode={onPressEpisode}
+        reportProgress={reportProgress}
+      />
+    </View>
+  );
+};
+
+export default MediaControlsProvider;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});

package/src/VideoPlayer/MediaControls/MiddleControls.tsx

@@ -0,0 +1,232 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState, useRef } from 'react';
+import {
+  ActivityIndicator,
+  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/videoRef';
+import { handlePause } from '../utils';
+import { useVideoPlayerConfig } from '../context';
+
+const BUTTON_SIZE = moderateScale(80);
+const SMALL_BUTTON_SIZE = moderateScale(60);
+const FEEDBACK_DURATION = 500;
+const MOVE_DISTANCE = 60;
+
+const MiddleControls = () => {
+  const {
+    isPaused,
+    isBuffering,
+    setStartWatchTime,
+    error,
+    setIsPaused,
+    duration,
+    currentTime,
+    setCurrentTime,
+  } = useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+
+  if (error) {
+    return (
+      <View style={[StyleSheet.absoluteFillObject, styles.container]}>
+        <Text style={[styles.errorText, { color: colors.text }]}>{error}</Text>
+      </View>
+    );
+  }
+
+  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 isVideoEnded = duration > 0 && currentTime >= duration;
+
+  return (
+    <View style={[StyleSheet.absoluteFillObject, styles.container]}>
+      {/* Backward */}
+      <SkipButton
+        direction="backward"
+        onPress={({ second }) => handleSkip(-second)}
+        colors={colors}
+        disabled={currentTime <= 0}
+      />
+
+      {/* Play / Pause */}
+      <TouchableOpacity
+        onPress={() => {
+          if (isBuffering) return;
+
+          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());
+          }
+        }}
+        style={[styles.button, styles.playButton]}
+        activeOpacity={0.8}
+      >
+        {isBuffering ? (
+          <ActivityIndicator size={scale(50)} color={colors.text} />
+        ) : isPaused ? (
+          <Play size={scale(50)} color={colors.text} />
+        ) : (
+          <Pause size={scale(50)} color={colors.text} />
+        )}
+      </TouchableOpacity>
+
+      {/* Forward */}
+      <SkipButton
+        direction="forward"
+        onPress={({ second }) => handleSkip(second)}
+        colors={colors}
+        disabled={currentTime >= duration}
+      />
+    </View>
+  );
+};
+
+export default MiddleControls;
+
+type SkipButtonProps = {
+  direction: 'forward' | 'backward';
+  onPress: ({ second }: { second: number }) => void;
+  colors: { text: string };
+  disabled?: boolean;
+};
+
+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 + 10;
+    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 && { opacity: 0.3 }]}
+      activeOpacity={disabled ? 1 : 0.7}
+      disabled={disabled}
+    >
+      {direction === 'forward' ? (
+        <RotateCw size={scale(35)} color={colors.text} />
+      ) : (
+        <RotateCcw size={scale(35)} color={colors.text} />
+      )}
+
+      {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),
+  },
+  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

@@ -0,0 +1,92 @@
+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 { useVideoPlayerStore } from '../store/videoPlayerStore';
+import { lockToPortrait } from '../utils/lockOrientation';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useVideoPlayerConfig } from '../context';
+
+interface TopControlsProps {
+  onClose?: () => void;
+}
+
+const TopControls: React.FC<TopControlsProps> = ({ onClose }) => {
+  const { activeTrack, resetStore } = useVideoPlayerStore();
+  const { top } = useSafeAreaInsets();
+  const { colors } = useVideoPlayerConfig();
+  const handleClose = () => {
+    onClose?.();
+    resetStore();
+    lockToPortrait();
+  };
+
+  const showSubtitle =
+    activeTrack?.isTrailer ||
+    activeTrack?.seasonNumber !== undefined ||
+    activeTrack?.episodeNumber !== undefined;
+
+  return (
+    <View style={[styles.container, { paddingTop: top + moderateScale(10) }]}>
+      <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),
+    zIndex: 51,
+  },
+  textContainer: {
+    flex: 1,
+    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),
+  },
+});