@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

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

@@ -0,0 +1,324 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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,
+  type QualityOption,
+} 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: QualityOption;
+  onPlaybackRateChange: (rate: number) => void;
+  onQualityChange: (quality: QualityOption) => void;
+  currentQuality?: string;
+}
+
+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,
+    currentQuality,
+  } = 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<QualityOption[]>(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) {
+          setQualities(qualityOptions);
+        } else {
+          setQualities(DEFAULT_QUALITIES);
+        }
+
+        lastLoadedUrlRef.current = videoUrl;
+      } catch {
+        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.absoluteFill}>
+        {/* 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}
+        currentQuality={currentQuality}
+        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

@@ -0,0 +1,201 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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

@@ -0,0 +1,100 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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',
+  },
+});