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

package/src/components/Reels/ReelsSeries/MediaControls/MediaControlsProvider.tsx

@@ -1,314 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import GradientOverlay from '../../ReelsSeries/components/GradientOverlay';
-import Like from '../../ReelsSeries/components/Like';
-
-import type {
-  ISeriesItem,
-  ISeriesEpisode,
-  ModalState,
-  ILikeMoreData,
-} from '../types';
-import type { ITheme } from '../../../../theme';
-
-import TopControls from './TopControls';
-import MiddleControls from './MiddleControls';
-import RightControls from './RightControls';
-import BottomControls from './BottomControls';
-import DetailsModal from '../Model/DetailsModal';
-import UnLockModal from '../Model/UnlockModal';
-import SettingModal from '../Model/SettingModal';
-import { videoRef } from '../../utils/Controls';
-import { DEFAULT_QUALITIES, getVideoQualities } from '../utils/quality';
-
-export interface ContentProps {
-  series: ISeriesItem;
-  episode: ISeriesEpisode;
-  activeIndex: number;
-}
-export interface UnlockProps {
-  isVisible: boolean;
-  onClose: () => void;
-}
-
-export interface VideoProps {
-  currentTime: number;
-  duration: number;
-  paused: boolean;
-  buffering: boolean;
-  showCenterControls: boolean;
-  isLocked: boolean;
-  hasError: boolean;
-}
-
-export interface LikeProps {
-  liked: boolean;
-  count: number;
-  showAnimation: boolean;
-}
-
-export interface ActionsProps {
-  onLike?: (ep: ISeriesEpisode) => void;
-  onUnlockPress?: (ep: ISeriesEpisode) => void;
-  onEpisodeSelect?: (ep: ISeriesEpisode) => void;
-  onLikeMore?: (item: ILikeMoreData) => void;
-  onShare?: () => void;
-  onUnLock?: () => void;
-}
-
-export interface NavigationProps {
-  onBack?: () => void;
-  onSearch?: () => void;
-}
-
-export interface SettingsProps {
-  playbackRate: number;
-  quality: string;
-  onPlaybackRateChange: (rate: number) => void;
-  onQualityChange: (q: string) => void;
-}
-
-export interface MediaControlsProps {
-  children: React.ReactNode;
-  content: ContentProps;
-  video: VideoProps;
-  likes: LikeProps;
-  actions: ActionsProps;
-  navigation: NavigationProps;
-  isFullScreen: boolean;
-  settings: SettingsProps;
-  modal?: ModalState;
-  setModal?: (m: ModalState) => void;
-  unlock: UnlockProps;
-  theme: ITheme;
-}
-
-const MediaControlsProvider: React.FC<MediaControlsProps> = ({
-  children,
-  content,
-  video,
-  likes,
-  actions,
-  navigation,
-  settings,
-  modal,
-  isFullScreen,
-  unlock,
-  setModal,
-  theme,
-}) => {
-  const { series, episode, activeIndex } = content;
-  const isSeries = series?.episodes ? true : false;
-
-  const {
-    currentTime,
-    duration,
-    paused,
-    buffering,
-    showCenterControls,
-    isLocked,
-    hasError,
-  } = video;
-
-  const { liked, count, showAnimation } = likes;
-
-  const {
-    onLike,
-    onEpisodeSelect,
-    onLikeMore,
-    onUnlockPress,
-    onShare,
-    onUnLock,
-  } = actions;
-
-  const { onBack, onSearch } = navigation;
-
-  const { playbackRate, quality, onPlaybackRateChange, onQualityChange } =
-    settings;
-
-  // Qualities state is managed outside of the modal for smoother UX and to
-  // avoid performing API calls inside modal components.
-  const [qualities, setQualities] = React.useState<string[]>(DEFAULT_QUALITIES);
-  const [qualitiesLoading, setQualitiesLoading] = React.useState(false);
-  const lastLoadedUrlRef = React.useRef<string | null>(null);
-
-  React.useEffect(() => {
-    // Only fetch when settings modal is requested, and let the shared util
-    // handle caching per m3u8 URL to avoid repeated network calls.
-    if (modal?.type !== 'settings') {
-      return;
-    }
-
-    const videoUrl = episode.videoUrl;
-
-    // If we've already loaded qualities for this URL once, don't toggle
-    // loading again or refetch – this prevents repeated "open/close" feel
-    // and keeps the modal content stable.
-    if (videoUrl && lastLoadedUrlRef.current === videoUrl) {
-      return;
-    }
-
-    let isCancelled = false;
-
-    const fetchQualities = async () => {
-      if (!videoUrl || !videoUrl.includes('.m3u8')) {
-        if (!isCancelled) {
-          setQualities(DEFAULT_QUALITIES);
-          setQualitiesLoading(false);
-          lastLoadedUrlRef.current = videoUrl ?? null;
-        }
-        return;
-      }
-
-      setQualitiesLoading(true);
-
-      try {
-        const qualityOptions = await getVideoQualities(videoUrl);
-        if (isCancelled) 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);
-        }
-
-        lastLoadedUrlRef.current = videoUrl;
-      } catch (err) {
-        if (!isCancelled) {
-          setQualities(DEFAULT_QUALITIES);
-          lastLoadedUrlRef.current = videoUrl ?? null;
-        }
-      } finally {
-        if (!isCancelled) {
-          setQualitiesLoading(false);
-        }
-      }
-    };
-
-    fetchQualities();
-
-    return () => {
-      isCancelled = true;
-    };
-  }, [episode.videoUrl, modal?.type]);
-
-  const episodeLabel = React.useMemo(() => {
-    return series.episodes.length > 0
-      ? `Ep ${activeIndex + 1}/${series.episodes.length}`
-      : undefined;
-  }, [activeIndex, series.episodes.length]);
-
-  return (
-    <View style={styles.root}>
-      {/* ❤️ Like Animation */}
-      <Like visible={showAnimation} />
-
-      {/* Video behind controls */}
-      {children}
-
-      {/* Gradient overlay */}
-      <GradientOverlay />
-
-      {/* UI Controls */}
-      <View style={StyleSheet.absoluteFillObject}>
-        {/* TOP */}
-        <TopControls
-          theme={theme}
-          onBack={onBack}
-          episodeLabel={episodeLabel}
-          onSettings={() => setModal?.({ type: 'settings', isVisible: true })}
-          onSearch={onSearch}
-        />
-
-        {/* CENTER */}
-        <MiddleControls
-          isLocked={isLocked}
-          theme={theme}
-          onUnLock={onUnLock}
-          isVisible={showCenterControls}
-          isPaused={paused}
-          isBuffering={buffering}
-          hasError={hasError}
-        />
-
-        {/* RIGHT ACTIONS */}
-        <RightControls
-          episode={episode}
-          isLiked={liked}
-          likeCount={count}
-          onLike={onLike}
-          showEpisodesButton={isSeries}
-          onDetailsPress={() =>
-            setModal?.({ type: 'details', isVisible: true })
-          }
-          onShare={onShare}
-        />
-
-        <BottomControls
-          theme={theme}
-          series={series}
-          episodeIndex={activeIndex}
-          videoCurrentTime={currentTime}
-          videoDuration={duration}
-          isFullScreen={isFullScreen}
-          onEpisodesPress={() =>
-            setModal?.({ type: 'details', isVisible: true })
-          }
-          onSeek={(time) => videoRef.current?.seek(time)}
-        />
-      </View>
-
-      {/* DETAILS MODAL */}
-      {isSeries && (
-        <DetailsModal
-          reel={episode}
-          data={series}
-          activeEpisodeIndex={activeIndex}
-          theme={theme}
-          isVisible={modal?.type === 'details' && modal.isVisible}
-          onClose={() => setModal?.({ type: 'none', isVisible: false })}
-          onEpisodeSelect={onEpisodeSelect}
-          onLikeMorePress={onLikeMore}
-        />
-      )}
-
-      {/* SETTINGS MODAL */}
-      <SettingModal
-        theme={theme}
-        speed={playbackRate}
-        quality={quality}
-        qualities={qualities}
-        qualitiesLoading={qualitiesLoading}
-        onSpeedChange={onPlaybackRateChange}
-        onQualityChange={onQualityChange}
-        isVisible={modal?.type === 'settings' && modal.isVisible}
-        onClose={() => setModal?.({ type: 'none', isVisible: false })}
-      />
-
-      <UnLockModal
-        isVisible={unlock.isVisible}
-        onClose={() => unlock.onClose()}
-        theme={theme}
-        episode={episode}
-        data={series}
-        onUnlockPress={onUnlockPress}
-      />
-    </View>
-  );
-};
-
-export default MediaControlsProvider;
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-});

package/src/components/Reels/ReelsSeries/MediaControls/MiddleControls.tsx

@@ -1,196 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import { Pause, Play, AlertCircle } from 'lucide-react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import RotatingLoader from '../../ReelsSeries/components/RotatingLoader';
-import { Button } from '../../../Button';
-import type { ITheme } from '../../../../theme';
-
-interface MiddleControlsProps {
-  isVisible: boolean;
-  isPaused: boolean;
-  isBuffering: boolean;
-  isLocked: boolean;
-  hasError: boolean;
-  onUnLock?: () => void;
-  theme: ITheme;
-}
-
-const MiddleControls: React.FC<MiddleControlsProps> = ({
-  isVisible,
-  isPaused,
-  isBuffering,
-  isLocked,
-  hasError,
-  onUnLock,
-  theme,
-}) => {
-  if (!isVisible) return null;
-
-  return (
-    <View style={styles.container} pointerEvents="box-none">
-      {/* ERROR MESSAGE */}
-      {hasError && !isBuffering && (
-        <View style={styles.errorWrapper}>
-          <View style={styles.errorContainer}>
-            <View style={styles.errorIconContainer}>
-              <AlertCircle
-                color={styles.errorIconColor.color}
-                size={moderateScale(28)}
-                strokeWidth={2.5}
-              />
-            </View>
-            <Text style={styles.errorText}>Unable to play video</Text>
-            <Text style={styles.errorSubtext}>Please try again later</Text>
-          </View>
-        </View>
-      )}
-
-      {/* BUFFERING LOADER */}
-      {isBuffering && !hasError && (
-        <View style={styles.loaderWrapper}>
-          <RotatingLoader
-            color={theme.colors.buttonText}
-            containerStyle={[
-              styles.loadingContainer,
-              { backgroundColor: theme.colors.button },
-            ]}
-            autoRotate={isBuffering}
-          />
-        </View>
-      )}
-
-      {/* PLAY / PAUSE ICON */}
-      {!isBuffering && !isLocked && !hasError && (
-        <View style={styles.iconWrapper}>
-          <View
-            style={[
-              styles.iconBackground,
-              { backgroundColor: theme.colors.button },
-            ]}
-            pointerEvents="none"
-          >
-            {isPaused ? (
-              <Play color={theme.colors.buttonText} size={moderateScale(26)} />
-            ) : (
-              <Pause color={theme.colors.buttonText} size={moderateScale(26)} />
-            )}
-          </View>
-        </View>
-      )}
-
-      {/* LOCKED → SHOW UNLOCK BUTTON */}
-      {!isBuffering && isLocked && !hasError && (
-        <View style={styles.unlockWrapper}>
-          <Button.Primary
-            title="Unlock Episode"
-            onPress={onUnLock}
-            theme={{
-              dark: theme.colors,
-              light: theme.colors,
-            }}
-            containerStyle={styles.unlockButton}
-          />
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default MiddleControls;
-
-/* ---------------------- STYLES ---------------------- */
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    height: '100%',
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 5,
-  },
-
-  /* BUFFERING */
-  loaderWrapper: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loadingContainer: {
-    // backgroundColor: 'rgba(0,0,0,0.5)',
-    padding: moderateScale(8),
-    borderRadius: 50,
-  },
-
-  /* PLAY/PAUSE */
-  iconWrapper: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  iconBackground: {
-    // backgroundColor: 'rgba(0,0,0,0.55)',
-    padding: moderateScale(12),
-    borderRadius: 50,
-  },
-
-  /* UNLOCK */
-  unlockWrapper: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  unlockButton: {
-    paddingVertical: moderateScale(12),
-    paddingHorizontal: moderateScale(20),
-    borderRadius: moderateScale(30),
-  },
-
-  /* ERROR */
-  errorWrapper: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  errorContainer: {
-    backgroundColor: 'rgba(21, 21, 21, 0.95)',
-    padding: moderateScale(20),
-    borderRadius: moderateScale(16),
-    alignItems: 'center',
-    minWidth: moderateScale(220),
-    borderWidth: 2,
-    borderColor: '#FF4444',
-    shadowColor: '#FF4444',
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 12,
-    elevation: 10,
-  },
-  errorIconContainer: {
-    width: moderateScale(56),
-    height: moderateScale(56),
-    borderRadius: moderateScale(28),
-    backgroundColor: 'rgba(255, 68, 68, 0.15)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: verticalScale(8),
-  },
-  errorIconColor: {
-    color: '#FF4444',
-  },
-  errorText: {
-    fontSize: RFValue(16),
-    fontWeight: '700',
-    marginTop: verticalScale(8),
-    textAlign: 'center',
-    letterSpacing: 0.3,
-    color: '#FFFFFF',
-  },
-  errorSubtext: {
-    fontSize: RFValue(13),
-    marginTop: verticalScale(6),
-    textAlign: 'center',
-    color: 'rgba(255, 255, 255, 0.75)',
-  },
-});

package/src/components/Reels/ReelsSeries/MediaControls/RightControls.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Heart, Forward, ListVideo } from 'lucide-react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ISeriesEpisode } from '../types';
-import { formatCount } from '../../../../utils/Formater';
-
-interface RightControlsProps {
-  episode: ISeriesEpisode;
-  isLiked: boolean;
-  likeCount: number;
-
-  onLike?: (item: ISeriesEpisode) => void;
-  onDetailsPress?: () => void;
-  onShare?: () => void;
-
-  showEpisodesButton?: boolean;
-}
-
-const RightControls: React.FC<RightControlsProps> = ({
-  episode,
-  isLiked,
-  likeCount,
-  onLike,
-  onShare,
-  onDetailsPress,
-  showEpisodesButton = true,
-}) => {
-  return (
-    <View style={styles.container}>
-      {/* ❤️ Like */}
-      <TouchableOpacity
-        style={styles.actionButton}
-        onPress={() => onLike?.(episode)}
-        activeOpacity={0.7}
-      >
-        <Heart
-          size={moderateScale(26)}
-          color={isLiked ? 'red' : '#fff'}
-          fill={isLiked ? 'red' : 'none'}
-        />
-        <Text style={styles.actionLabel}>
-          {formatCount(Number(likeCount) || 0)}
-        </Text>
-      </TouchableOpacity>
-
-      {/* 📺 Episodes / Details */}
-      {showEpisodesButton && (
-        <TouchableOpacity
-          style={styles.actionButton}
-          onPress={onDetailsPress}
-          activeOpacity={0.7}
-        >
-          <ListVideo color={'#fff'} size={moderateScale(26)} />
-          <Text style={styles.actionLabel}>Episodes</Text>
-        </TouchableOpacity>
-      )}
-
-      {/* 📤 Share */}
-      {onShare && (
-        <TouchableOpacity
-          style={styles.actionButton}
-          onPress={onShare}
-          activeOpacity={0.7}
-        >
-          <Forward color={'#fff'} size={moderateScale(26)} />
-          <Text style={styles.actionLabel}>Share</Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-export default RightControls;
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    bottom: verticalScale(120),
-    right: moderateScale(10),
-    flexDirection: 'column',
-    zIndex: 20,
-  },
-  actionButton: {
-    marginVertical: verticalScale(10),
-    alignItems: 'center',
-  },
-  actionLabel: {
-    marginTop: verticalScale(4),
-    fontSize: RFValue(10),
-    color: '#fff',
-    textAlign: 'center',
-  },
-});