@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

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

@@ -0,0 +1,234 @@
+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';
+
+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;
+  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,
+  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;
+
+  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}
+          onEpisodesPress={() =>
+            setModal?.({ type: 'details', isVisible: true })
+          }
+        />
+      </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}
+        videoUrl={episode.videoUrl}
+        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

@@ -0,0 +1,196 @@
+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,92 @@
+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';
+
+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}>{likeCount}</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',
+  },
+});

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

@@ -0,0 +1,163 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { ArrowLeft, Search, Settings } from 'lucide-react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { ITheme } from '../../../../theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text } from '../../../Text';
+
+interface TopControlsProps {
+  theme: ITheme;
+  episodeLabel?: string;
+  onBack?: () => void;
+  onSearch?: () => void;
+  onSettings?: () => void;
+}
+
+type BackBtnProps = {
+  size?: number;
+  color?: string;
+  onPress?: () => void;
+  theme: ITheme;
+  enableBlur?: boolean;
+  label?: string;
+};
+const BackBtn: React.FC<BackBtnProps> = ({
+  size = scale(24),
+  color,
+  onPress,
+  theme,
+  label,
+}) => {
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else {
+      Alert.alert(
+        'Back Action Not Provided',
+        'Please define the back action using onPress prop.'
+      );
+    }
+  };
+  const hasLabel = !!label;
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      style={styles.backButton}
+      onPress={handlePress}
+    >
+      <ArrowLeft size={size} color={color || theme.colors.textPrimary} />
+      {hasLabel && (
+        <Text
+          style={[styles.text, { color: color || theme.colors.textPrimary }]}
+          color={color || theme.colors.textPrimary}
+        >
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const TopControls: React.FC<TopControlsProps> = ({
+  theme,
+  episodeLabel,
+  onBack,
+  onSearch,
+  onSettings,
+}) => {
+  const insets = useSafeAreaInsets();
+  const top = insets.top;
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          top,
+          paddingLeft: scale(16),
+          paddingRight: scale(16),
+        },
+      ]}
+    >
+      {/* Back Button with Episode Number */}
+      <View style={styles.leftContainer}>
+        {onBack && (
+          <BackBtn
+            theme={theme}
+            onPress={onBack}
+            color={theme.colors.white}
+            size={scale(20)}
+            label={episodeLabel}
+          />
+        )}
+      </View>
+
+      {/* Right Side Controls Container */}
+      <View style={styles.rightControlsContainer}>
+        {/* Search Button */}
+        {onSearch && (
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={onSearch}
+            activeOpacity={0.7}
+          >
+            <Search color={theme.colors.white} size={verticalScale(22)} />
+          </TouchableOpacity>
+        )}
+
+        {/* Video Controls Button */}
+        <TouchableOpacity
+          style={styles.iconButton}
+          onPress={onSettings}
+          activeOpacity={0.7}
+        >
+          <Settings color={theme.colors.white} size={verticalScale(22)} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default TopControls;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  leftContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  backButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: scale(4),
+  },
+  rightControlsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  iconButton: {
+    padding: scale(8),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: scale(14),
+    fontWeight: '600',
+    marginLeft: scale(8),
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: { width: 0, height: verticalScale(1) },
+    textShadowRadius: scale(3),
+  },
+});