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

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

@@ -1,189 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Mon 13 Jul 2026 at 10:13 AM
- */
-
-import React, { useEffect, useRef } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import Svg, { Rect } from 'react-native-svg';
-
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
-
-interface AnimatedThreeLinesProps {
-  isActive: boolean;
-  size?: number;
-  color?: string;
-  style?: StyleProp<ViewStyle>;
-  animationDuration?: number;
-  delayBetweenLines?: number;
-}
-
-const AnimatedThreeLines: React.FC<AnimatedThreeLinesProps> = ({
-  isActive,
-  size = 16,
-  color = 'white',
-  style,
-  animationDuration = 600,
-  delayBetweenLines = 200,
-}) => {
-  const line1Anim = useRef(new Animated.Value(0)).current;
-  const line2Anim = useRef(new Animated.Value(0)).current;
-  const line3Anim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (isActive) {
-      // Custom bezier easing for ultra-smooth animation
-      const smoothEasing = Easing.bezier(0.4, 0.0, 0.2, 1); // Material Design easing
-
-      // Start continuous smooth animation
-      const createAnimation = (animValue: Animated.Value, delay: number) => {
-        return Animated.loop(
-          Animated.sequence([
-            Animated.delay(delay),
-            Animated.timing(animValue, {
-              toValue: 1,
-              duration: animationDuration,
-              easing: smoothEasing,
-              useNativeDriver: false, // SVG doesn't support native driver
-            }),
-            Animated.timing(animValue, {
-              toValue: 0,
-              duration: animationDuration,
-              easing: smoothEasing,
-              useNativeDriver: false, // SVG doesn't support native driver
-            }),
-          ]),
-          { iterations: -1 } // Infinite loop
-        );
-      };
-
-      const anim1 = createAnimation(line1Anim, 0);
-      const anim2 = createAnimation(line2Anim, delayBetweenLines);
-      const anim3 = createAnimation(line3Anim, delayBetweenLines * 2);
-
-      // Start all animations
-      anim1.start();
-      anim2.start();
-      anim3.start();
-
-      return () => {
-        anim1.stop();
-        anim2.stop();
-        anim3.stop();
-        // Reset values on cleanup
-        line1Anim.setValue(0);
-        line2Anim.setValue(0);
-        line3Anim.setValue(0);
-      };
-    } else {
-      // Smoothly reset to initial state when not active
-      Animated.parallel([
-        Animated.timing(line1Anim, {
-          toValue: 0,
-          duration: 200,
-          easing: Easing.out(Easing.ease),
-          useNativeDriver: false,
-        }),
-        Animated.timing(line2Anim, {
-          toValue: 0,
-          duration: 200,
-          easing: Easing.out(Easing.ease),
-          useNativeDriver: false,
-        }),
-        Animated.timing(line3Anim, {
-          toValue: 0,
-          duration: 200,
-          easing: Easing.out(Easing.ease),
-          useNativeDriver: false,
-        }),
-      ]).start();
-    }
-    return undefined;
-  }, [
-    isActive,
-    line1Anim,
-    line2Anim,
-    line3Anim,
-    animationDuration,
-    delayBetweenLines,
-  ]);
-
-  // Animate height and Y position for ultra-smooth up/down movement
-  // Using extended input range for smoother interpolation
-  const line1Height = line1Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [4, 7, 10],
-    extrapolate: 'clamp',
-  });
-
-  const line1Y = line1Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [12, 9, 6], // Move up as height increases
-    extrapolate: 'clamp',
-  });
-
-  const line2Height = line2Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [6, 9, 12],
-    extrapolate: 'clamp',
-  });
-
-  const line2Y = line2Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [10, 7, 4], // Move up as height increases
-    extrapolate: 'clamp',
-  });
-
-  const line3Height = line3Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [4, 6, 8],
-    extrapolate: 'clamp',
-  });
-
-  const line3Y = line3Anim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [12, 10, 8], // Move up as height increases
-    extrapolate: 'clamp',
-  });
-
-  return (
-    <View style={[styles.container, style]}>
-      <Svg width={size} height={size} viewBox="0 0 16 16">
-        <AnimatedRect
-          x={1}
-          y={line1Y}
-          width={2.5}
-          height={line1Height}
-          rx={1.25}
-          fill={color}
-        />
-        <AnimatedRect
-          x={6}
-          y={line2Y}
-          width={2.5}
-          height={line2Height}
-          rx={1.25}
-          fill={color}
-        />
-        <AnimatedRect
-          x={11}
-          y={line3Y}
-          width={2.5}
-          height={line3Height}
-          rx={1.25}
-          fill={color}
-        />
-      </Svg>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default AnimatedThreeLines;

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

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