@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/Reels/ReelsSeries/components/VideoControls/QualityControl.tsx

@@ -1,187 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  ActivityIndicator,
-} from 'react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ITheme } from '../../../../../theme';
-import { DEFAULT_QUALITIES, getVideoQualities } from '../../utils/quality';
-
-interface QualityControlProps {
-  activeQuality: string;
-  theme: ITheme;
-  onQualityChange: (quality: string) => void;
-  videoUrl?: string;
-  /**
-   * Optional externally-controlled qualities list.
-   * When provided, QualityControl will not perform internal fetching
-   * and will instead render this list.
-   */
-  qualities?: string[];
-  /**
-   * Optional externally-controlled loading state.
-   * Only used when `qualities` is provided.
-   */
-  loading?: boolean;
-}
-
-const QualityControl: React.FC<QualityControlProps> = ({
-  activeQuality,
-  theme,
-  onQualityChange,
-  videoUrl,
-  qualities: externalQualities,
-  loading: externalLoading,
-}) => {
-  const isControlled = typeof externalQualities !== 'undefined';
-  const [qualities, setQualities] = useState<string[]>(
-    externalQualities ?? DEFAULT_QUALITIES
-  );
-  const [loading, setLoading] = useState(false);
-  const isMounted = useRef(true);
-
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  // Keep local state in sync when controlled externally
-  useEffect(() => {
-    if (isControlled) {
-      setQualities(externalQualities ?? DEFAULT_QUALITIES);
-    }
-  }, [externalQualities, isControlled]);
-
-  // Uncontrolled mode – fetch qualities internally based on videoUrl
-  useEffect(() => {
-    if (isControlled) return;
-
-    const fetchQualities = async () => {
-      if (!videoUrl || !videoUrl.includes('.m3u8')) {
-        if (isMounted.current) setQualities(DEFAULT_QUALITIES);
-        return;
-      }
-
-      setLoading(true);
-
-      try {
-        const qualityOptions = await getVideoQualities(videoUrl);
-        if (!isMounted.current) return;
-
-        if (qualityOptions.length > 0) {
-          const qualityStrings = [
-            'Auto',
-            ...qualityOptions
-              .map((q) => q.quality)
-              .filter((v, i, self) => self.indexOf(v) === i)
-              .sort((a, b) => parseInt(b, 10) - parseInt(a, 10)),
-          ];
-          setQualities(qualityStrings);
-        } else {
-          setQualities(DEFAULT_QUALITIES);
-        }
-      } catch (err) {
-        console.error('Failed to fetch qualities:', err);
-        if (isMounted.current) setQualities(DEFAULT_QUALITIES);
-      } finally {
-        if (isMounted.current) setLoading(false);
-      }
-    };
-
-    fetchQualities();
-  }, [videoUrl, isControlled]);
-
-  const isLoading = isControlled ? Boolean(externalLoading) : loading;
-  const renderedQualities =
-    qualities && qualities.length > 0 ? qualities : DEFAULT_QUALITIES;
-
-  if (!isControlled && isLoading) {
-    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="small" color={theme.colors.button} />
-        <Text
-          style={[styles.loadingText, { color: theme.colors.textSecondary }]}
-        >
-          Loading qualities...
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      {renderedQualities.map((quality, index) => {
-        const isSelected = activeQuality === quality;
-
-        return (
-          <TouchableOpacity
-            key={index.toString()}
-            activeOpacity={0.8}
-            style={[
-              styles.optionButton,
-              {
-                backgroundColor: isSelected
-                  ? theme.colors.button
-                  : theme.colors.surfaceDisabled,
-              },
-            ]}
-            onPress={() => onQualityChange(quality)}
-          >
-            <Text
-              style={[
-                styles.optionText,
-                {
-                  color: isSelected
-                    ? theme.colors.buttonText
-                    : theme.colors.textPrimary,
-                  fontWeight: isSelected ? '700' : '400',
-                },
-              ]}
-            >
-              {quality}
-            </Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-};
-
-export default React.memo(QualityControl);
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    gap: moderateScale(10),
-  },
-  optionButton: {
-    width: '30%',
-    paddingVertical: verticalScale(12),
-    paddingHorizontal: moderateScale(16),
-    borderRadius: moderateScale(8),
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: verticalScale(12),
-  },
-  optionText: {
-    fontSize: RFValue(14),
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: verticalScale(40),
-  },
-  loadingText: {
-    marginTop: verticalScale(12),
-    fontSize: RFValue(12),
-  },
-});

package/src/components/Reels/ReelsSeries/components/VideoControls/SpeedControl.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ITheme } from '../../../../../theme';
-
-interface SpeedControlProps {
-  activeSpeed: number;
-  theme: ITheme;
-  onSpeedChange: (speed: number) => void;
-}
-
-const SPEED_OPTIONS = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
-
-const SpeedControl: React.FC<SpeedControlProps> = ({
-  activeSpeed,
-  theme,
-  onSpeedChange,
-}) => {
-  return (
-    <View style={styles.container}>
-      {SPEED_OPTIONS.map((speed, index) => {
-        const isSelected = activeSpeed === speed;
-
-        return (
-          <TouchableOpacity
-            key={index.toString()}
-            activeOpacity={0.8}
-            style={[
-              styles.optionButton,
-              {
-                backgroundColor: isSelected
-                  ? theme.colors.button
-                  : theme.colors.surfaceDisabled,
-              },
-            ]}
-            onPress={() => onSpeedChange(speed)}
-          >
-            <Text
-              style={[
-                styles.optionText,
-                {
-                  color: isSelected
-                    ? theme.colors.buttonText
-                    : theme.colors.textPrimary,
-                  fontWeight: isSelected ? '700' : '400',
-                },
-              ]}
-            >
-              {speed}x
-            </Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-};
-
-export default React.memo(SpeedControl);
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    marginHorizontal: moderateScale(4), // instead of gap
-  },
-  optionButton: {
-    width: '30%',
-    paddingVertical: verticalScale(12),
-    paddingHorizontal: moderateScale(16),
-    borderRadius: moderateScale(8),
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: verticalScale(12), // spacing instead of gap
-  },
-  optionText: {
-    fontSize: RFValue(14),
-  },
-});

package/src/components/Reels/ReelsSeries/components/VideoControls/index.ts

@@ -1,2 +0,0 @@
-export { default as SpeedControl } from './SpeedControl';
-export { default as QualityControl } from './QualityControl';

package/src/components/Reels/ReelsSeries/types.ts

@@ -1,54 +0,0 @@
-export interface ILikeMoreData {
-  id: string;
-  name: string;
-  thumbnail: string;
-}
-export interface ISeriesEpisode {
-  videoUrl: string;
-  episodeId: string;
-  episodeNumber: number;
-  duration: string;
-  isLocked: boolean;
-}
-
-export interface ISeriesItem {
-  id: string;
-  title: string;
-  thumbnail: string;
-  description: string;
-  episodes: ISeriesEpisode[];
-  likes: number;
-  views: number;
-  createdAt: string;
-  shares: number;
-  isLiked: boolean;
-  likeMoreData?: ILikeMoreData[];
-}
-export interface IReelsData {
-  data: ISeriesItem[];
-}
-// For like state
-export interface LikedState {
-  liked: boolean;
-  count: number;
-}
-export interface ModalState {
-  isVisible: boolean;
-  type: 'none' | 'details' | 'settings';
-}
-
-export interface IReelsWatchProgress {
-  series: ISeriesItem;
-  episode: ISeriesEpisode;
-  currentTime: number;
-  duration: number;
-  /**
-   * Whether the current episode has been watched till (almost) the end.
-   */
-  isVideoCompleted: boolean;
-  /**
-   * Total time (in seconds) this episode has been watched.
-   * For short reels this generally matches `currentTime`.
-   */
-  totalWatchTime: number;
-}

package/src/components/Reels/ReelsSeries/useReelsWatchProgress.ts

@@ -1,85 +0,0 @@
-import React from 'react';
-import type { IReelsWatchProgress } from './types';
-
-type UseReelsWatchProgressParams = {
-  /**
-   * Whether the parent screen is currently focused/visible.
-   * When this becomes false, the last watch progress will be flushed once.
-   */
-  isFocused: boolean;
-  /**
-   * Callback invoked whenever an episode's watch progress should be
-   * "finalized" – e.g. when the user switches episodes, leaves the screen
-   * or the component unmounts.
-   */
-  onFlush: (progress: IReelsWatchProgress) => void;
-};
-
-type UseReelsWatchProgressResult = {
-  /**
-   * Pass this directly to `ReelsSeries` / `ReelsSeriesItem` as
-   * the `onWatchProgress` handler.
-   */
-  handleWatchProgress: (progress: IReelsWatchProgress) => void;
-};
-
-/**
- * Reusable hook that tracks the last watched episode progress and ensures
- * it is flushed exactly once when:
- * - The user switches to a different episode
- * - The parent screen loses focus
- * - The parent component unmounts
- *
- * This hook is intentionally UI-kit only and delegates side‑effects
- * (API calls, analytics, etc.) to the provided `onFlush` callback.
- */
-export const useReelsWatchProgress = ({
-  isFocused,
-  onFlush,
-}: UseReelsWatchProgressParams): UseReelsWatchProgressResult => {
-  const lastProgressRef = React.useRef<IReelsWatchProgress | null>(null);
-  const flushProgressRef = React.useRef(onFlush);
-
-  // Always keep the latest flush callback
-  React.useEffect(() => {
-    flushProgressRef.current = onFlush;
-  }, [onFlush]);
-
-  const handleWatchProgress = React.useCallback(
-    (progress: IReelsWatchProgress) => {
-      const previous = lastProgressRef.current;
-
-      // If user changed episode, flush previous episode's progress once
-      if (
-        previous &&
-        previous.episode.episodeId !== progress.episode.episodeId
-      ) {
-        flushProgressRef.current(previous);
-      }
-
-      // Always store the latest progress for the current episode
-      lastProgressRef.current = progress;
-    },
-    []
-  );
-
-  // When screen loses focus (user navigates away), flush last progress once
-  React.useEffect(() => {
-    if (!isFocused && lastProgressRef.current) {
-      flushProgressRef.current(lastProgressRef.current);
-      lastProgressRef.current = null;
-    }
-  }, [isFocused]);
-
-  // On unmount, flush any remaining progress
-  React.useEffect(() => {
-    return () => {
-      if (lastProgressRef.current) {
-        flushProgressRef.current(lastProgressRef.current);
-        lastProgressRef.current = null;
-      }
-    };
-  }, []);
-
-  return { handleWatchProgress };
-};

package/src/components/Reels/ReelsSeries/utils/quality.ts

@@ -1,48 +0,0 @@
-export interface QualityOption {
-  quality: string;
-  url: string;
-}
-
-export const DEFAULT_QUALITIES = ['Auto', '1080p', '720p', '480p', '360p'];
-
-// Simple in-memory cache to avoid fetching the same playlist multiple times
-const qualitiesCache: Record<string, QualityOption[]> = {};
-
-/**
- * Fetches available video qualities from m3u8 playlist.
- */
-export const getVideoQualities = async (
-  m3u8Url: string
-): Promise<QualityOption[]> => {
-  // Return cached result if available to avoid repeated network calls
-  if (qualitiesCache[m3u8Url]) {
-    return qualitiesCache[m3u8Url];
-  }
-
-  try {
-    const res = await fetch(m3u8Url);
-    const text = await res.text();
-    const qualities: QualityOption[] = [];
-    const lines = text.split('\n');
-
-    for (let i = 0; i < lines.length; i++) {
-      if (lines?.[i]?.includes('#EXT-X-STREAM-INF')) {
-        // Example line:
-        // #EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360,...
-        const resolutionMatch = lines?.[i]?.match(/RESOLUTION=\d+x(\d+)/);
-        const url = lines[i + 1]?.trim();
-        if (resolutionMatch && url) {
-          qualities.push({ quality: `${resolutionMatch[1]}p`, url });
-        }
-      }
-    }
-
-    // Cache the result (even if empty) so we don't re-fetch for this URL
-    qualitiesCache[m3u8Url] = qualities;
-
-    return qualities;
-  } catch (error) {
-    console.error('Error fetching video qualities:', error);
-    return [];
-  }
-};

package/src/components/Reels/index.ts

@@ -1,9 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 24 Jun 2025 at 05:02 PM
- */
-
-import { ReelsSeries } from './ReelsSeries/ReelsSeries';
-export * from './ReelsSeries/types';
-export { ReelsSeries };
-export * from './ReelsSeries/useReelsWatchProgress';

package/src/components/Reels/utils/Controls/gestureUtils.ts

@@ -1,42 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { Gesture } from 'react-native-gesture-handler';
-import { GESTURE_MAX_DURATION } from './videoControlsConstants';
-
-/**
- * Create a tap gesture handler
- */
-export const useCreateTapGesture = (
-  isInOverlay: (x: number, y: number) => boolean,
-  isLocked: boolean,
-  handleLockedTap: () => void
-) => {
-  return useCallback(
-    (onAction: () => void, numberOfTaps = 1) =>
-      Gesture.Tap()
-        .maxDuration(GESTURE_MAX_DURATION)
-        .numberOfTaps(numberOfTaps)
-        .onStart(({ x, y }) => {
-          if (isInOverlay(x, y)) return;
-          if (isLocked) {
-            handleLockedTap();
-            return;
-          }
-          onAction();
-        })
-        .runOnJS(true),
-    [isInOverlay, isLocked, handleLockedTap]
-  );
-};
-
-/**
- * Create combined gesture (single tap and double tap)
- */
-export const useCombinedGesture = (
-  singleTap: ReturnType<typeof Gesture.Tap>,
-  doubleTap: ReturnType<typeof Gesture.Tap>
-) => {
-  return useMemo(
-    () => Gesture.Exclusive(doubleTap, singleTap),
-    [doubleTap, singleTap]
-  );
-};

package/src/components/Reels/utils/Controls/index.ts

@@ -1,4 +0,0 @@
-export * from './videoRef';
-export * from './videoControlsConstants';
-export * from './overlayUtils';
-export * from './gestureUtils';

package/src/components/Reels/utils/Controls/overlayUtils.ts

@@ -1,35 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import { Dimensions } from 'react-native';
-import {
-  OVERLAY_RIGHT_OFFSET,
-  OVERLAY_BOTTOM_OFFSET,
-} from './videoControlsConstants';
-
-const { width } = Dimensions.get('window');
-
-/**
- * Calculate overlay thresholds
- */
-export const useOverlayThresholds = (videoHeight: number) => {
-  const rightThreshold = useMemo(() => width - OVERLAY_RIGHT_OFFSET, []);
-
-  const bottomThreshold = useMemo(
-    () => videoHeight - OVERLAY_BOTTOM_OFFSET,
-    [videoHeight]
-  );
-
-  return { rightThreshold, bottomThreshold };
-};
-
-/**
- * Check if coordinates are in overlay area
- */
-export const useIsInOverlay = (
-  rightThreshold: number,
-  bottomThreshold: number
-) => {
-  return useCallback(
-    (x: number, y: number) => x > rightThreshold || y > bottomThreshold,
-    [rightThreshold, bottomThreshold]
-  );
-};

package/src/components/Reels/utils/Controls/videoControlsConstants.ts

@@ -1,25 +0,0 @@
-/**
- * Video Controls Constants
- */
-
-export const GESTURE_MAX_DURATION = 300;
-export const PAUSE_ICON_TIMEOUT = 800;
-export const LIKE_ANIM_TIMEOUT = 1200;
-export const UNLOCK_MODAL_DELAY = 500;
-export const OVERLAY_RIGHT_OFFSET = 80;
-export const OVERLAY_BOTTOM_OFFSET = 150;
-
-export const videoControlsStyles = {
-  hideForward: true,
-  hideDuration: true,
-  hideFullscreen: true,
-  hidePlayPause: true,
-  hideNavigationBarOnFullScreenMode: true,
-  hideNotificationBarOnFullScreenMode: true,
-  hideNext: true,
-  hidePosition: true,
-  hidePrevious: true,
-  hideRewind: true,
-  hideSeekBar: true,
-  hideSettingButton: true,
-};

package/src/components/Reels/utils/Controls/videoRef.ts

@@ -1,4 +0,0 @@
-import { createRef } from 'react';
-import type { VideoRef } from 'react-native-video';
-
-export const videoRef = createRef<VideoRef>();

package/src/components/Reels/utils/index.ts

@@ -1 +0,0 @@
-export * from './timeoutUtils';

package/src/components/Reels/utils/timeoutUtils.ts

@@ -1,29 +0,0 @@
-import { type MutableRefObject } from 'react';
-
-/**
- * Safely clears a timeout stored in a ref
- * @param ref - React ref containing the timeout
- */
-export const clearTimeoutSafely = (
-  ref: MutableRefObject<NodeJS.Timeout | null>
-): void => {
-  if (ref.current) {
-    clearTimeout(ref.current);
-    ref.current = null;
-  }
-};
-
-/**
- * Safely sets a timeout and stores it in a ref, clearing any existing timeout first
- * @param ref - React ref to store the timeout
- * @param callback - Function to execute after delay
- * @param delay - Delay in milliseconds
- */
-export const setTimeoutSafely = (
-  ref: MutableRefObject<NodeJS.Timeout | null>,
-  callback: () => void,
-  delay: number
-): void => {
-  clearTimeoutSafely(ref);
-  ref.current = setTimeout(callback, delay);
-};