@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

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,92 +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';
-
-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

@@ -1,163 +0,0 @@
-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),
-  },
-});

package/src/components/Reels/ReelsSeries/Model/DetailsModal.tsx

@@ -1,210 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
-import { BottomSheet } from '../../../BottomSheet';
-import LinearGradient from 'react-native-linear-gradient';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import Episodes from '../../ReelsSeries/components/Episodes';
-import Synopsis from '../../ReelsSeries/components/Synopsis';
-import type { ILikeMoreData, ISeriesEpisode, ISeriesItem } from '../types';
-import { formatCount } from '../../../../utils/Formater';
-import type { ITheme } from '../../../../theme';
-
-interface DetailsModalProps {
-  reel: ISeriesEpisode;
-  data: ISeriesItem;
-  activeEpisodeIndex: number;
-  onEpisodeSelect?: (episode: ISeriesEpisode) => void;
-  theme: ITheme;
-  onLikeMorePress?: (item: ILikeMoreData) => void;
-  isVisible: boolean;
-  onClose?: () => void;
-}
-
-const DetailsModal: React.FC<DetailsModalProps> = ({
-  reel,
-  data,
-  activeEpisodeIndex: _activeEpisodeIndex,
-  onEpisodeSelect,
-  theme,
-  onLikeMorePress,
-  isVisible,
-  onClose,
-}) => {
-  const [activeTab, setActiveTab] = useState<'synopsis' | 'episodes'>(
-    'synopsis'
-  );
-  const [routes] = useState<
-    {
-      key: string;
-      title: string;
-    }[]
-  >([
-    { key: 'synopsis', title: 'Synopsis' },
-    { key: 'episodes', title: 'Episodes' },
-  ]);
-
-  return (
-    <BottomSheet
-      key={'detailsModal'}
-      theme={theme}
-      visible={isVisible}
-      onClose={onClose}
-      height="75%"
-      showCloseButton
-      scrollable={false}
-    >
-      <LinearGradient
-        colors={[theme.colors.background, theme.colors.background]}
-        style={styles.gradientContainer}
-      >
-        {/* Creator + Title */}
-        <View style={styles.headerRow}>
-          <Image
-            source={{ uri: data.thumbnail }}
-            style={[
-              styles.reelPosterImage,
-              { backgroundColor: theme.colors.surfaceDisabled },
-            ]}
-          />
-          <View style={styles.titleContainer}>
-            <Text
-              style={[styles.reelTitleText, { color: theme.colors.onSurface }]}
-            >
-              {data.title}
-            </Text>
-            <Text
-              style={[
-                styles.reelDescriptionText,
-                { color: theme.colors.textSecondary },
-              ]}
-              numberOfLines={3}
-            >
-              {data.description}
-            </Text>
-            <Text
-              style={[
-                styles.reelViewsText,
-                { color: theme.colors.textSecondary },
-              ]}
-            >
-              {formatCount(data.views || 0)} Views
-            </Text>
-          </View>
-        </View>
-        {/* Tab View */}
-        <View style={styles.tabContainer}>
-          {routes.map((item) => {
-            const isActive =
-              activeTab === routes.find((r) => r.key === item.key)?.key;
-            return (
-              <TouchableOpacity
-                key={item.key}
-                style={[
-                  styles.tab,
-                  {
-                    borderBottomColor: theme.colors.textPrimary,
-                    borderBottomWidth: isActive ? moderateScale(2) : 0,
-                  },
-                ]}
-                onPress={() => {
-                  const tab = routes.find((r) => r.key === item.key)?.key;
-                  tab && setActiveTab(tab as 'synopsis' | 'episodes');
-                }}
-              >
-                <Text
-                  style={[
-                    styles.tabText,
-                    {
-                      color: theme.colors.textPrimary,
-                      opacity: isActive ? 1 : 0.6,
-                    },
-                  ]}
-                >
-                  {item.title}
-                </Text>
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-        {/* Tab View Content */}
-        <View style={styles.contentContainer}>
-          {activeTab === 'synopsis' && (
-            <Synopsis
-              theme={theme}
-              description={data.description}
-              likeMoreData={data.likeMoreData}
-              onLikeMorePress={onLikeMorePress}
-            />
-          )}
-          {activeTab === 'episodes' && (
-            <Episodes
-              theme={theme}
-              reel={reel}
-              data={data}
-              onEpisodeSelect={(episode) => {
-                onEpisodeSelect?.(episode);
-                onClose?.();
-              }}
-            />
-          )}
-        </View>
-      </LinearGradient>
-    </BottomSheet>
-  );
-};
-
-export default DetailsModal;
-
-const styles = StyleSheet.create({
-  gradientContainer: {
-    flex: 1,
-  },
-  headerRow: {
-    flexDirection: 'row',
-    marginHorizontal: moderateScale(5),
-    marginBottom: verticalScale(10),
-  },
-  titleContainer: {
-    flex: 1,
-  },
-  reelPosterImage: {
-    width: moderateScale(80),
-    aspectRatio: 1 / 1.5,
-    borderRadius: moderateScale(8),
-    marginRight: moderateScale(10),
-  },
-  reelTitleText: {
-    fontSize: RFValue(13),
-    fontWeight: '600',
-    textAlign: 'justify',
-    flexWrap: 'wrap',
-    marginRight: moderateScale(33),
-  },
-  reelDescriptionText: {
-    fontSize: RFValue(10),
-    marginBottom: verticalScale(4),
-    marginTop: verticalScale(3.5),
-  },
-  reelViewsText: {
-    fontSize: RFValue(10),
-    marginTop: verticalScale(2),
-  },
-  tabContainer: {
-    flexDirection: 'row',
-    marginTop: verticalScale(5),
-    marginHorizontal: moderateScale(5),
-    gap: moderateScale(15),
-  },
-  tab: {
-    paddingBottom: verticalScale(6),
-  },
-  tabText: {
-    fontSize: RFValue(11),
-    fontWeight: '700',
-  },
-  contentContainer: {
-    flex: 1,
-    marginTop: verticalScale(8),
-  },
-});