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

package/src/components/Reels/ReelsSeries/components/Episodes.tsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  FlatList,
-  StyleSheet,
-  Dimensions,
-  TouchableOpacity,
-} from 'react-native';
-import { Lock } from 'lucide-react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import AnimatedThreeLines from './AnimatedThreeLines';
-import type { ITheme } from '../../../../theme';
-import type { ISeriesEpisode, ISeriesItem } from '../types';
-
-const { width } = Dimensions.get('window');
-const NUM_COLUMNS = 6;
-
-interface EpisodesProps {
-  theme: ITheme;
-  reel: ISeriesEpisode;
-  data: ISeriesItem;
-  onEpisodeSelect?: (episode: ISeriesEpisode) => void;
-  totalReels?: number;
-}
-
-const Episodes: React.FC<EpisodesProps> = ({
-  theme,
-  reel,
-  data,
-  onEpisodeSelect,
-}) => {
-  const boxWidth = React.useMemo(() => {
-    return (
-      (width - moderateScale(15) * 2 - moderateScale(6) * NUM_COLUMNS) /
-      NUM_COLUMNS
-    );
-  }, []);
-
-  const episodesArray = React.useMemo(() => {
-    return (data.episodes || []).map((episode) => ({
-      episode,
-      episodeNumber: episode.episodeNumber,
-    }));
-  }, [data.episodes]);
-
-  const renderItem = ({
-    item,
-  }: {
-    item: { episode: ISeriesEpisode; episodeNumber: number };
-  }) => {
-    const { episode, episodeNumber } = item;
-    const isAvailable = !episode.isLocked;
-    const isActive = episodeNumber === reel.episodeNumber;
-    return (
-      <TouchableOpacity
-        key={`episode-${episodeNumber}`}
-        onPress={() => onEpisodeSelect?.(episode)}
-        activeOpacity={0.8}
-        disabled={false}
-      >
-        <View
-          style={[
-            styles.box,
-            {
-              backgroundColor: isActive
-                ? theme.colors.elevation.level2
-                : theme.colors.elevation.level1,
-              width: boxWidth,
-            },
-          ]}
-        >
-          <Text style={[styles.number, { color: theme.colors.textPrimary }]}>
-            {episodeNumber}
-          </Text>
-
-          {!isAvailable && (
-            <View
-              style={[
-                styles.lockContainer,
-                { backgroundColor: theme.colors.surfaceDisabled },
-              ]}
-            >
-              <Lock color={theme.colors.textPrimary} size={moderateScale(11)} />
-            </View>
-          )}
-
-          {isActive && (
-            <AnimatedThreeLines
-              isActive={isActive}
-              color={theme.colors.primary}
-              style={styles.animatedIndicator}
-            />
-          )}
-        </View>
-      </TouchableOpacity>
-    );
-  };
-
-  return (
-    <FlatList
-      data={episodesArray}
-      numColumns={NUM_COLUMNS}
-      keyExtractor={(item) => `episode-${item.episode.episodeId}`}
-      renderItem={renderItem}
-      contentContainerStyle={[{ paddingBottom: verticalScale(20) }]}
-      showsVerticalScrollIndicator={false}
-      scrollEnabled={true}
-      removeClippedSubviews={true}
-      windowSize={10}
-      initialNumToRender={NUM_COLUMNS * 2}
-      nestedScrollEnabled={true}
-    />
-  );
-};
-
-export default Episodes;
-
-const styles = StyleSheet.create({
-  box: {
-    borderRadius: moderateScale(10),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: moderateScale(2.5),
-    marginHorizontal: moderateScale(2.5),
-    position: 'relative',
-    aspectRatio: 1,
-  },
-  number: {
-    fontSize: RFValue(15),
-    fontWeight: '600',
-  },
-  lockContainer: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    width: moderateScale(18),
-    height: moderateScale(18),
-    borderRadius: moderateScale(7),
-    borderTopLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  animatedIndicator: {
-    position: 'absolute',
-    bottom: verticalScale(6),
-    left: moderateScale(6),
-    justifyContent: 'center',
-    opacity: 0.9,
-    alignItems: 'center',
-  },
-});

package/src/components/Reels/ReelsSeries/components/GradientOverlay.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { StyleSheet } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-
-interface GradientOverlayProps {
-  children?: React.ReactNode;
-}
-
-const GradientOverlay: React.FC<GradientOverlayProps> = ({ children }) => {
-  return (
-    <>
-      <LinearGradient
-        colors={['rgba(0,0,0,0.9)', 'rgba(0,0,0,0.5)', 'transparent']}
-        style={styles.topGradient}
-      />
-
-      <LinearGradient
-        colors={['transparent', 'rgba(0,0,0,0.3)', 'rgba(0,0,0,0.9)']}
-        style={styles.bottomGradient}
-      />
-      {children}
-    </>
-  );
-};
-
-export default GradientOverlay;
-
-const styles = StyleSheet.create({
-  topGradient: {
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-    height: 180,
-  },
-  bottomGradient: {
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    height: 220,
-  },
-});

package/src/components/Reels/ReelsSeries/components/Like.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import LottieView from 'lottie-react-native';
-import DoubleTapAnim from '../../../../assets/animations/heart.json';
-
-interface LikeProps {
-  visible: boolean;
-}
-
-const Like: React.FC<LikeProps> = ({ visible }) => {
-  if (!visible) return null;
-
-  return (
-    <View style={styles.container}>
-      <LottieView
-        style={styles.lottie}
-        source={DoubleTapAnim}
-        autoPlay
-        loop={false}
-      />
-    </View>
-  );
-};
-
-export default Like;
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 5,
-  },
-  lottie: {
-    width: '100%',
-    height: '100%',
-  },
-});

package/src/components/Reels/ReelsSeries/components/RotatingLoader.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import {
-  StyleSheet,
-  Animated,
-  Easing,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import { Loader } from 'lucide-react-native';
-import { moderateScale } from 'react-native-size-matters';
-
-interface RotatingLoaderProps {
-  size?: number;
-  color?: string;
-  containerStyle?: StyleProp<ViewStyle>;
-  rotationDuration?: number; // Duration in milliseconds for one full rotation
-  autoRotate?: boolean; // Whether to auto-rotate (default: true)
-}
-
-const RotatingLoader: React.FC<RotatingLoaderProps> = ({
-  size = moderateScale(35),
-  color = '#fff',
-  containerStyle,
-  rotationDuration = 1300,
-  autoRotate = true,
-}) => {
-  const rotateAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (autoRotate) {
-      rotateAnim.setValue(0);
-      const animation = Animated.loop(
-        Animated.timing(rotateAnim, {
-          toValue: 1,
-          duration: rotationDuration,
-          easing: Easing.linear,
-          useNativeDriver: true,
-        })
-      );
-      animation.start();
-
-      return () => {
-        animation.stop();
-        rotateAnim.stopAnimation();
-      };
-    }
-    return undefined;
-  }, [autoRotate, rotationDuration, rotateAnim]);
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        containerStyle,
-        {
-          transform: [
-            {
-              rotate: rotateAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: ['0deg', '360deg'],
-              }),
-            },
-          ],
-        },
-      ]}
-    >
-      <Loader size={size} color={color} />
-    </Animated.View>
-  );
-};
-
-export default RotatingLoader;
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

package/src/components/Reels/ReelsSeries/components/Synopsis.tsx

@@ -1,332 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import {
-  Text,
-  View,
-  Image,
-  StyleSheet,
-  TouchableOpacity,
-  Dimensions,
-  TouchableWithoutFeedback,
-  FlatList,
-} from 'react-native';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
-import type { ITheme } from '../../../../theme';
-import type { ILikeMoreData } from '../types';
-
-const { width: SCREEN_WIDTH } = Dimensions.get('window');
-
-interface SynopsisProps {
-  theme: ITheme;
-  description: string;
-  likeMoreData?: ILikeMoreData[];
-  onLikeMorePress?: (item: ILikeMoreData) => void;
-}
-
-const MAX_LINES = 5;
-
-const Synopsis: React.FC<SynopsisProps> = ({
-  theme,
-  description,
-  likeMoreData = [],
-  onLikeMorePress,
-}) => {
-  const [showMore, setShowMore] = useState(false);
-
-  const numColumns = SCREEN_WIDTH >= 420 ? 4 : 3;
-  const cardSpacing = scale(3);
-  const containerPadding = moderateScale(5);
-
-  // Calculate if description needs "Show More" button
-  // Approximate: ~50-60 characters per line for fontSize 11, lineHeight 16
-  const charsPerLine = 55;
-  const estimatedLines = description
-    ? Math.ceil(description.length / charsPerLine)
-    : 0;
-  const shouldShowButton = description && estimatedLines > MAX_LINES;
-
-  // Calculate card width for grid - ensure no overflow
-  const totalSpacing = cardSpacing * (numColumns - 1);
-  const totalPadding = containerPadding * 7;
-  const availableWidth = SCREEN_WIDTH - totalPadding - totalSpacing;
-  const cardWidth = Math.floor(availableWidth / numColumns);
-
-  const keyExtractor = useCallback(
-    (item: ILikeMoreData) => item.id.toString(),
-    []
-  );
-
-  const toggleShowMore = useCallback(() => {
-    setShowMore((prev) => !prev);
-  }, []);
-
-  const renderItem = useCallback(
-    ({ item, index }: { item: ILikeMoreData; index: number }) => {
-      const isLastInRow = (index + 1) % numColumns === 0;
-      return (
-        <TouchableOpacity
-          style={[
-            styles.card,
-            {
-              width: cardWidth,
-              maxWidth: cardWidth,
-              marginRight: isLastInRow ? 0 : cardSpacing,
-            },
-          ]}
-          activeOpacity={0.8}
-          onPress={() => onLikeMorePress?.(item)}
-        >
-          <View style={styles.imageContainer}>
-            <Image
-              source={{
-                uri: item?.thumbnail || '',
-              }}
-              style={[
-                styles.thumbnail,
-                { backgroundColor: theme.colors.surfaceDisabled },
-              ]}
-              resizeMode="cover"
-            />
-          </View>
-          <Text
-            style={[styles.title, { color: theme.colors.textPrimary }]}
-            numberOfLines={2}
-            ellipsizeMode="tail"
-          >
-            {item.name || 'Untitled'}
-          </Text>
-        </TouchableOpacity>
-      );
-    },
-    [
-      theme.colors.textPrimary,
-      theme.colors.surfaceDisabled,
-      onLikeMorePress,
-      cardWidth,
-      cardSpacing,
-      numColumns,
-    ]
-  );
-
-  const renderListHeader = useCallback(
-    () => (
-      <TouchableWithoutFeedback>
-        <View style={styles.headerContainer}>
-          {/* Description */}
-          <View style={styles.descriptionContainer}>
-            <Text
-              style={[styles.description, { color: theme.colors.textPrimary }]}
-              numberOfLines={showMore ? undefined : MAX_LINES}
-            >
-              {description ||
-                'No synopsis available for this reel. Please check back later.'}
-            </Text>
-
-            {/* Show More / Show Less button */}
-            {description && shouldShowButton && (
-              <TouchableOpacity
-                activeOpacity={0.7}
-                onPress={toggleShowMore}
-                style={styles.showMoreButton}
-              >
-                <Text
-                  style={[styles.showMoreText, { color: theme.colors.primary }]}
-                >
-                  {showMore ? 'Show Less ▲' : 'Show More ▼'}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-
-          {/* Header - Only show if there's data */}
-          {likeMoreData.length > 0 && (
-            <View style={styles.header}>
-              <Svg width={22} height={2} viewBox="0 0 22 2" fill="none">
-                <Path
-                  d="M21.692 1.196H.594"
-                  stroke="url(#a)"
-                  strokeWidth={1.005}
-                />
-                <Defs>
-                  <LinearGradient
-                    id="a"
-                    x1={0.594}
-                    y1={1.696}
-                    x2={21.692}
-                    y2={1.696}
-                    gradientUnits="userSpaceOnUse"
-                  >
-                    <Stop stopOpacity={0} />
-                    <Stop offset={1} stopColor={theme.colors.textPrimary} />
-                  </LinearGradient>
-                </Defs>
-              </Svg>
-
-              <Text
-                style={[styles.headerText, { color: theme.colors.textPrimary }]}
-              >
-                More Like This
-              </Text>
-
-              <Svg width={22} height={2} viewBox="0 0 22 2" fill="none">
-                <Path
-                  d="M.312 1.196H21.41"
-                  stroke="url(#paint0_linear_797_3114)"
-                  strokeWidth={1.00467}
-                />
-                <Defs>
-                  <LinearGradient
-                    id="paint0_linear_797_3114"
-                    x1={21.4102}
-                    y1={1.69629}
-                    x2={0.312025}
-                    y2={1.69629}
-                    gradientUnits="userSpaceOnUse"
-                  >
-                    <Stop stopOpacity={0} />
-                    <Stop offset={1} stopColor={theme.colors.textPrimary} />
-                  </LinearGradient>
-                </Defs>
-              </Svg>
-            </View>
-          )}
-        </View>
-      </TouchableWithoutFeedback>
-    ),
-    [
-      description,
-      likeMoreData.length,
-      showMore,
-      shouldShowButton,
-      toggleShowMore,
-      theme.colors.textPrimary,
-      theme.colors.primary,
-    ]
-  );
-
-  const renderListEmpty = useCallback(
-    () => (
-      <Text
-        style={[styles.noEpisodesText, { color: theme.colors.textSecondary }]}
-      >
-        No recommendations available.
-      </Text>
-    ),
-    [theme.colors.textSecondary]
-  );
-
-  return (
-    <FlatList
-      data={likeMoreData}
-      keyExtractor={keyExtractor}
-      renderItem={renderItem}
-      ListHeaderComponent={renderListHeader}
-      ListEmptyComponent={likeMoreData.length === 0 ? renderListEmpty : null}
-      numColumns={numColumns}
-      showsVerticalScrollIndicator={false}
-      scrollEnabled={true}
-      contentContainerStyle={[
-        styles.contentContainer,
-        {
-          paddingHorizontal: containerPadding,
-        },
-        likeMoreData.length === 0 && styles.contentContainerEmpty,
-      ]}
-      style={[styles.flatList]}
-      removeClippedSubviews={false}
-      nestedScrollEnabled={true}
-      bounces={false}
-      initialNumToRender={numColumns * 2}
-      maxToRenderPerBatch={numColumns * 2}
-      disableVirtualization={false}
-    />
-  );
-};
-
-export default Synopsis;
-
-const styles = StyleSheet.create({
-  flatList: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-  headerContainer: {
-    paddingBottom: verticalScale(8),
-    overflow: 'hidden',
-    width: '100%',
-    alignItems: 'center',
-  },
-  descriptionContainer: {
-    overflow: 'hidden',
-  },
-  description: {
-    fontSize: RFValue(11),
-    lineHeight: RFValue(16),
-    marginBottom: verticalScale(6),
-    letterSpacing: 0.2,
-    opacity: 0.8,
-    flexWrap: 'wrap',
-  },
-  showMoreButton: {
-    alignSelf: 'flex-start',
-    marginBottom: verticalScale(10),
-  },
-  showMoreText: {
-    fontSize: RFValue(10),
-    fontWeight: '500',
-    letterSpacing: 0.3,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: verticalScale(5),
-    marginTop: verticalScale(8),
-    width: '100%',
-    alignSelf: 'center',
-  },
-  headerText: {
-    fontSize: RFValue(12),
-    fontWeight: '600',
-    textAlign: 'center',
-    marginHorizontal: scale(10),
-    letterSpacing: 0.5,
-  },
-  contentContainer: {
-    paddingBottom: verticalScale(30),
-    paddingTop: verticalScale(4),
-  },
-  contentContainerEmpty: {
-    paddingBottom: verticalScale(30),
-  },
-  card: {
-    borderRadius: moderateScale(10),
-    overflow: 'hidden',
-    marginBottom: verticalScale(10),
-  },
-  imageContainer: {
-    width: '100%',
-    overflow: 'hidden',
-  },
-  thumbnail: {
-    width: '100%',
-    aspectRatio: 1 / 1.5,
-    borderRadius: moderateScale(5),
-  },
-  title: {
-    fontSize: RFValue(10),
-    fontWeight: '500',
-    lineHeight: RFValue(14),
-    marginTop: verticalScale(1.5),
-    letterSpacing: 0.1,
-    flexShrink: 1,
-  },
-  noEpisodesText: {
-    fontSize: RFValue(12),
-    textAlign: 'center',
-    marginTop: verticalScale(16),
-    marginBottom: verticalScale(8),
-    paddingVertical: verticalScale(20),
-  },
-});