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

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) }],
-  },
-});

package/src/VideoPlayer/components/SkipAndNextControls.tsx

@@ -1,192 +0,0 @@
-import React, { useEffect } from 'react';
-import {
-  TouchableOpacity,
-  View,
-  StyleSheet,
-  Text,
-  type TextStyle,
-} from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-} from 'react-native-reanimated';
-import { scale } from 'react-native-size-matters';
-import { useVideoPlayerStore } from '../store/videoPlayerStore';
-import { videoRef, Display } from '../utils';
-import { handleNext } from '../utils';
-import type { MediaEpisode } from '../store/videoPlayer.type';
-import { useVideoPlayerConfig } from '../context';
-import type { ExtendedWatchProgress } from '../utils';
-
-type SkipAndNextControlsProps = {
-  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
-  reportProgress: (event: ExtendedWatchProgress['event']) => void;
-};
-
-const SkipAndNextControls: React.FC<SkipAndNextControlsProps> = ({
-  onPressEpisode,
-  reportProgress,
-}) => {
-  const {
-    activeTrack,
-    currentTime,
-    isSkipIntroVisible,
-    isNextEpisodeVisible,
-    setIsNextEpisodeVisible,
-    setIsSkipIntroVisible,
-    settingsModal,
-    controlsVisible,
-  } = useVideoPlayerStore();
-  const { colors } = useVideoPlayerConfig();
-
-  if (activeTrack?.type !== 'series') return null;
-
-  const showSkipIntro =
-    isSkipIntroVisible &&
-    !settingsModal.isVisible &&
-    activeTrack.skipIntro &&
-    activeTrack.skipIntro.start < currentTime &&
-    currentTime < activeTrack.skipIntro.end;
-
-  const showNextEpisode =
-    isNextEpisodeVisible &&
-    !settingsModal.isVisible &&
-    activeTrack.nextEpisodeAt &&
-    activeTrack.nextEpisodeAt < currentTime;
-
-  return (
-    <>
-      {showSkipIntro && (
-        <ActionButton
-          label="Skip intro"
-          onPress={() => {
-            if (activeTrack.skipIntro?.end) {
-              videoRef?.current?.seek(activeTrack.skipIntro.end);
-            }
-          }}
-          onCancel={() => setIsSkipIntroVisible(false)}
-          position="left"
-          colors={{ text: colors.black, onBackground: colors.onBackground }}
-          controlsVisible={controlsVisible}
-        />
-      )}
-
-      {showNextEpisode && (
-        <ActionButton
-          label="Next episode"
-          onPress={() => {
-            reportProgress('EPISODE_CHANGE');
-            handleNext({ onPressEpisode, autoNext: true });
-          }}
-          onCancel={() => setIsNextEpisodeVisible(false)}
-          position="right"
-          colors={{ text: colors.black, onBackground: colors.onBackground }}
-          controlsVisible={controlsVisible}
-        />
-      )}
-    </>
-  );
-};
-
-export default SkipAndNextControls;
-
-type ActionButtonColors = {
-  text: string;
-  onBackground: string;
-};
-
-type ActionButtonProps = {
-  label: string;
-  onPress: () => void;
-  onCancel: () => void;
-  position: 'left' | 'right';
-  colors: ActionButtonColors;
-  controlsVisible: boolean;
-};
-
-const ActionButton: React.FC<ActionButtonProps> = ({
-  label,
-  onPress,
-  onCancel,
-  position,
-  colors,
-  controlsVisible,
-}) => {
-  const opacity = useSharedValue(0);
-  const translateY = useSharedValue(10);
-  const bottom = useSharedValue(
-    controlsVisible ? Display.setHeight(12) : Display.setHeight(10)
-  );
-
-  useEffect(() => {
-    opacity.value = withTiming(1, { duration: 100 });
-    translateY.value = withTiming(0, { duration: 100 });
-  }, [opacity, translateY]);
-
-  useEffect(() => {
-    bottom.value = withTiming(
-      controlsVisible ? Display.setHeight(12) : Display.setHeight(10),
-      { duration: 100 }
-    );
-  }, [bottom, controlsVisible]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{ translateY: translateY.value }],
-    bottom: bottom.value,
-  }));
-
-  return (
-    <Animated.View
-      style={[
-        styles.overlayButton,
-        animatedStyle,
-        position === 'left' ? { left: scale(58) } : { right: scale(58) },
-      ]}
-    >
-      <View style={styles.buttonRow}>
-        <TouchableOpacity
-          style={[
-            styles.actionButton,
-            { backgroundColor: colors.onBackground },
-          ]}
-          onPress={onPress}
-        >
-          <Text style={makeTextStyle(colors.text)}>{label}</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[
-            styles.actionButton,
-            { backgroundColor: colors.onBackground },
-          ]}
-          onPress={onCancel}
-        >
-          <Text style={makeTextStyle(colors.text)}>Cancel</Text>
-        </TouchableOpacity>
-      </View>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  overlayButton: {
-    position: 'absolute', // fixed, not animated
-    zIndex: 10,
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    gap: scale(10),
-  },
-  actionButton: {
-    paddingHorizontal: scale(20),
-    paddingVertical: scale(8),
-    borderRadius: scale(8),
-    alignSelf: 'flex-start',
-  },
-});
-
-const makeTextStyle = (color: string): TextStyle => ({
-  color,
-  fontWeight: '600',
-});

package/src/VideoPlayer/components/SubtitleView.tsx

@@ -1,53 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { scale } from 'react-native-size-matters';
-import Subtitles from 'react-native-subtitles';
-import { useVideoPlayerStore } from '../store/videoPlayerStore';
-import { Display } from '../utils';
-import { useVideoPlayerConfig } from '../context';
-
-const SubtitleView = () => {
-  const { activeSubtitle, currentTime, controlsVisible, settingsModal } =
-    useVideoPlayerStore();
-  const { colors } = useVideoPlayerConfig();
-  if (
-    !activeSubtitle ||
-    !activeSubtitle.url ||
-    controlsVisible ||
-    settingsModal.isVisible
-  ) {
-    return null;
-  }
-  return (
-    <View style={styles.container}>
-      <Subtitles
-        containerStyle={styles.subtitleContainer}
-        textStyle={{ ...styles.text, color: colors.text }}
-        currentTime={currentTime}
-        selectedsubtitle={{
-          file: activeSubtitle.url,
-        }}
-      />
-    </View>
-  );
-};
-
-export default SubtitleView;
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    position: 'absolute',
-    bottom: Display.setHeight(3),
-    zIndex: 10,
-  },
-  subtitleContainer: {
-    padding: scale(10),
-  },
-  text: {
-    fontSize: RFValue(14),
-    paddingHorizontal: scale(10),
-    paddingVertical: scale(5),
-    borderRadius: scale(5),
-  },
-});

package/src/VideoPlayer/components/Toast.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import Animated, { type AnimatedStyle } from 'react-native-reanimated';
-import { type EdgeInsets } from 'react-native-safe-area-context';
-import { scale } from 'react-native-size-matters';
-import { useVideoPlayerConfig } from '../context';
-
-export interface ToastProps {
-  message: string;
-  animatedStyle: AnimatedStyle<any>;
-  insets: EdgeInsets;
-  position?: 'top' | 'bottom';
-}
-
-const Toast: React.FC<ToastProps> = ({
-  message,
-  animatedStyle,
-  insets,
-  position = 'top',
-}) => {
-  const { colors } = useVideoPlayerConfig();
-
-  const containerStyle = [
-    styles.container,
-    position === 'top'
-      ? { top: (insets.top || 0) + scale(6) }
-      : { bottom: (insets.bottom || 0) + scale(6) },
-    animatedStyle,
-  ];
-
-  return (
-    <Animated.View style={containerStyle}>
-      <View style={styles.toast}>
-        <Text style={[styles.text, { color: colors.text }]}>{message}</Text>
-      </View>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    alignSelf: 'center',
-    zIndex: 1000,
-  },
-  toast: {
-    paddingHorizontal: scale(12),
-    paddingVertical: scale(6),
-    borderRadius: scale(4),
-    minWidth: scale(80),
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-  },
-  text: {
-    fontSize: scale(12),
-    fontWeight: '600',
-  },
-});
-
-export default Toast;

package/src/VideoPlayer/context/VideoPlayerConfig.tsx

@@ -1,65 +0,0 @@
-import { createContext, useContext, type ReactNode } from 'react';
-import { scale } from 'react-native-size-matters';
-
-export interface VideoPlayerTheme {
-  colors: {
-    primary: string;
-    secondary: string;
-    background: string;
-    onBackground: string;
-    text: string;
-    white: string;
-    black: string;
-    track: string;
-    buffer: string;
-  };
-  metrics: {
-    thumbSize: number;
-    sliderHeight: number;
-    controlSize: number;
-  };
-}
-
-const defaultTheme: VideoPlayerTheme = {
-  colors: {
-    primary: '#ff0000',
-    secondary: '#999999',
-    background: '#000000',
-    onBackground: '#E2E8F0',
-    text: '#ffffff',
-    white: '#ffffff',
-    black: '#000000',
-    track: '#868686f0',
-    buffer: '#ffffffd1',
-  },
-  metrics: {
-    thumbSize: scale(14),
-    sliderHeight: scale(4),
-    controlSize: scale(28),
-  },
-};
-
-const VideoPlayerConfigContext = createContext<VideoPlayerTheme>(defaultTheme);
-
-export const VideoPlayerConfigProvider = ({
-  children,
-  theme,
-}: {
-  children: ReactNode;
-  theme?: Partial<VideoPlayerTheme>;
-}) => {
-  const mergedTheme: VideoPlayerTheme = {
-    ...defaultTheme,
-    ...theme,
-    colors: { ...defaultTheme.colors, ...theme?.colors },
-    metrics: { ...defaultTheme.metrics, ...theme?.metrics },
-  };
-
-  return (
-    <VideoPlayerConfigContext.Provider value={mergedTheme}>
-      {children}
-    </VideoPlayerConfigContext.Provider>
-  );
-};
-
-export const useVideoPlayerConfig = () => useContext(VideoPlayerConfigContext);

package/src/VideoPlayer/context/index.ts

@@ -1,5 +0,0 @@
-export {
-  VideoPlayerConfigProvider,
-  useVideoPlayerConfig,
-} from './VideoPlayerConfig';
-export type { VideoPlayerTheme } from './VideoPlayerConfig';

package/src/VideoPlayer/index.ts

@@ -1,4 +0,0 @@
-export { default as VideoPlayerCore } from './VideoPlayerCore';
-export * from './store';
-export * from './utils';
-export * from './context';

package/src/VideoPlayer/store/index.ts

@@ -1,2 +0,0 @@
-export * from './videoPlayerStore';
-export * from './videoPlayer.type';