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

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),
-  },
-});

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

@@ -1,146 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { BottomSheet } from '../../../../components/BottomSheet';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ITheme } from '../../../../theme';
-import { QualityControl, SpeedControl } from '../components/VideoControls';
-
-interface SettingModalProps {
-  theme: ITheme;
-  speed: number;
-  quality: string;
-  qualities: string[];
-  qualitiesLoading: boolean;
-
-  onSpeedChange: (speed: number) => void;
-  onQualityChange: (quality: string) => void;
-
-  isVisible: boolean;
-  onClose: () => void;
-}
-
-const SettingModal: React.FC<SettingModalProps> = ({
-  theme,
-  speed,
-  quality,
-  qualities,
-  qualitiesLoading,
-  onSpeedChange,
-  onQualityChange,
-  isVisible,
-  onClose,
-}) => {
-  const [activeTab, setActiveTab] = useState<'speed' | 'quality'>('speed');
-
-  const handleSelect = (callback: any, value: any) => {
-    callback(value);
-    setTimeout(onClose, 200);
-  };
-
-  return (
-    <BottomSheet
-      theme={theme}
-      title="Video Settings"
-      height="50%"
-      visible={isVisible}
-      onClose={onClose}
-      handleIndicatorStyle={{ backgroundColor: theme.colors.button }}
-    >
-      {/* Tabs */}
-      <View style={styles.tabContainer}>
-        {['speed', 'quality'].map((tab) => {
-          const isActive = activeTab === tab;
-          return (
-            <TouchableOpacity
-              key={tab}
-              style={[
-                styles.tab,
-                isActive && {
-                  borderBottomWidth: 2,
-                  borderBottomColor: theme.colors.textPrimary,
-                },
-              ]}
-              onPress={() => setActiveTab(tab as 'speed' | 'quality')}
-            >
-              <Text
-                style={[
-                  styles.tabText,
-                  {
-                    color: theme.colors.textPrimary,
-                    opacity: isActive ? 1 : 0.5,
-                  },
-                ]}
-              >
-                {tab === 'speed' ? 'Playback' : 'Quality'}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-
-      {/* Content */}
-      <View style={styles.contentContainer}>
-        {activeTab === 'speed' && (
-          <Animated.View
-            entering={FadeIn.duration(150)}
-            exiting={FadeOut.duration(150)}
-            style={styles.animatedContent}
-          >
-            <SpeedControl
-              activeSpeed={speed}
-              theme={theme}
-              onSpeedChange={(value) => handleSelect(onSpeedChange, value)}
-            />
-          </Animated.View>
-        )}
-
-        {activeTab === 'quality' && (
-          <Animated.View
-            entering={FadeIn.duration(150)}
-            exiting={FadeOut.duration(150)}
-            style={styles.animatedContent}
-          >
-            <QualityControl
-              activeQuality={quality}
-              theme={theme}
-              qualities={qualities}
-              loading={qualitiesLoading}
-              onQualityChange={(value) => handleSelect(onQualityChange, value)}
-            />
-          </Animated.View>
-        )}
-      </View>
-    </BottomSheet>
-  );
-};
-
-export default SettingModal;
-
-const styles = StyleSheet.create({
-  tabContainer: {
-    flexDirection: 'row',
-    paddingHorizontal: moderateScale(16),
-    marginTop: verticalScale(10),
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    paddingBottom: 8,
-    marginHorizontal: moderateScale(12),
-  },
-  tabText: {
-    fontSize: RFValue(14),
-    fontWeight: '700',
-  },
-  contentContainer: {
-    flex: 1,
-    marginTop: verticalScale(20),
-    paddingHorizontal: moderateScale(16),
-  },
-  animatedContent: {
-    width: '100%',
-    minHeight: verticalScale(200),
-  },
-});

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

@@ -1,154 +0,0 @@
-import React from 'react';
-import { StyleSheet, View, Image } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { Button } from '../../../Button';
-import { Text } from '../../../Text';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { BottomSheet } from '../../../BottomSheet';
-
-import type { ITheme } from '../../../../theme';
-import type { ISeriesEpisode, ISeriesItem } from '../types';
-
-interface UnLockModalProps {
-  episode: ISeriesEpisode;
-  data: ISeriesItem;
-  theme: ITheme;
-  isVisible: boolean;
-  onClose?: () => void;
-  onUnlockPress?: (ep: ISeriesEpisode) => void;
-}
-
-const UnLockModal: React.FC<UnLockModalProps> = ({
-  episode,
-  data,
-  theme,
-  isVisible,
-  onClose,
-  onUnlockPress,
-}) => {
-  return (
-    <BottomSheet
-      key={'UnlockModal'}
-      theme={theme}
-      visible={isVisible}
-      onClose={onClose}
-      height="55%" // prevent overflow
-      showCloseButton
-      scrollable={false}
-    >
-      <LinearGradient
-        colors={[theme.colors.background, theme.colors.background]}
-        style={styles.gradientContainer}
-      >
-        <View style={styles.contentWrapper}>
-          {/* Thumbnail */}
-          {data.thumbnail ? (
-            <Image
-              source={{ uri: data.thumbnail }}
-              style={styles.thumbnail}
-              resizeMode="cover"
-            />
-          ) : null}
-
-          {/* Title */}
-          <Text
-            numberOfLines={2}
-            ellipsizeMode="tail"
-            style={[styles.title, { color: theme.colors.textPrimary }]}
-          >
-            {data.title}
-          </Text>
-
-          {/* Description */}
-          <Text
-            numberOfLines={3}
-            ellipsizeMode="tail"
-            style={[styles.description, { color: theme.colors.textSecondary }]}
-          >
-            {data.description}
-          </Text>
-
-          {/* Unlock Button */}
-          <Button.Primary
-            theme={{
-              dark: theme.colors,
-              light: theme.colors,
-            }}
-            title="Unlock Now"
-            onPress={() => onUnlockPress?.(episode)}
-            containerStyle={styles.unlockButton}
-          />
-
-          {/* Tagline */}
-          <Text
-            numberOfLines={2}
-            ellipsizeMode="tail"
-            style={[styles.smallNote, { color: theme.colors.textSecondary }]}
-          >
-            Unlocking gives you full access to this and all future episodes.
-          </Text>
-        </View>
-      </LinearGradient>
-    </BottomSheet>
-  );
-};
-
-export default UnLockModal;
-
-const styles = StyleSheet.create({
-  gradientContainer: {
-    flex: 1,
-    paddingTop: verticalScale(10),
-    marginHorizontal: moderateScale(15),
-  },
-
-  contentWrapper: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    paddingTop: verticalScale(8),
-    paddingHorizontal: moderateScale(8),
-  },
-
-  thumbnail: {
-    width: moderateScale(110),
-    height: moderateScale(150),
-    borderRadius: moderateScale(10),
-    marginBottom: verticalScale(10),
-    flexShrink: 0, // Prevents image from shrinking
-  },
-
-  title: {
-    fontSize: RFValue(17),
-    fontWeight: '700',
-    textAlign: 'center',
-    marginBottom: verticalScale(5),
-    paddingHorizontal: moderateScale(10),
-    width: '95%',
-    flexShrink: 1, // prevents overflow
-  },
-
-  description: {
-    fontSize: RFValue(12),
-    textAlign: 'center',
-    marginBottom: verticalScale(15),
-    paddingHorizontal: moderateScale(20),
-    lineHeight: RFValue(16),
-    width: '95%',
-    flexShrink: 1, // prevents layout overflow
-  },
-
-  unlockButton: {
-    width: '95%',
-    marginBottom: verticalScale(10),
-  },
-
-  smallNote: {
-    fontSize: RFValue(10),
-    opacity: 0.7,
-    textAlign: 'center',
-    width: '95%',
-    flexShrink: 1, // ensures it stays inside modal
-  },
-});