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

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

@@ -0,0 +1,184 @@
+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/{Model → components}/Episodes.tsx

@@ -7,69 +7,90 @@ import {
   Dimensions,
   TouchableOpacity,
 } from 'react-native';
-import { Lock, ChartNoAxesColumnIncreasing } from 'lucide-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 { height, width } = Dimensions.get('window');
+const { width } = Dimensions.get('window');
 const NUM_COLUMNS = 6;
 
 interface EpisodesProps {
+  theme: ITheme;
   reel: ISeriesEpisode;
   data: ISeriesItem;
-  currentReel: number;
-  onEpisodeSelect?: (index: number) => void;
+  onEpisodeSelect?: (episode: ISeriesEpisode) => void;
   totalReels?: number;
 }
 
 const Episodes: React.FC<EpisodesProps> = ({
+  theme,
+  reel,
   data,
-  currentReel,
   onEpisodeSelect,
-  totalReels = 0,
 }) => {
-  const totalBoxes = Math.max(data.episodes?.length || 0, totalReels);
-  const EpisodeData = Array.from({ length: totalBoxes }, (_, i) => i + 1);
+  const boxWidth = React.useMemo(() => {
+    return (
+      (width - moderateScale(15) * 2 - moderateScale(6) * NUM_COLUMNS) /
+      NUM_COLUMNS
+    );
+  }, []);
 
-  const renderItem = ({ item }: { item: number }) => {
-    const isAvailable = item <= (data.episodes.length ?? 0);
-    const isActive = item === currentReel + 1;
+  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-${item}`}
-        onPress={() => isAvailable && onEpisodeSelect?.(item - 1)}
+        key={`episode-${episodeNumber}`}
+        onPress={() => onEpisodeSelect?.(episode)}
         activeOpacity={0.8}
+        disabled={false}
       >
         <View
           style={[
             styles.box,
             {
               backgroundColor: isActive
-                ? 'rgba(60,60,60,1)'
-                : 'rgba(34,34,34,1)',
+                ? theme.colors.elevation.level2
+                : theme.colors.elevation.level1,
+              width: boxWidth,
             },
           ]}
         >
-          <Text style={[styles.number, { color: 'white' }]}>{item}</Text>
+          <Text style={[styles.number, { color: theme.colors.textPrimary }]}>
+            {episodeNumber}
+          </Text>
 
           {!isAvailable && (
             <View
               style={[
                 styles.lockContainer,
-                { backgroundColor: 'rgba(76,76,76,1)' },
+                { backgroundColor: theme.colors.surfaceDisabled },
               ]}
             >
-              <Lock color={'white'} size={moderateScale(11)} />
+              <Lock color={theme.colors.textPrimary} size={moderateScale(11)} />
             </View>
           )}
 
           {isActive && (
-            <ChartNoAxesColumnIncreasing
-              color={'white'}
-              size={moderateScale(16)}
-              style={styles.activeIcon}
+            <AnimatedThreeLines
+              isActive={isActive}
+              color={theme.colors.primary}
+              style={styles.animatedIndicator}
             />
           )}
         </View>
@@ -79,17 +100,17 @@ const Episodes: React.FC<EpisodesProps> = ({
 
   return (
     <FlatList
-      data={EpisodeData}
+      data={episodesArray}
       numColumns={NUM_COLUMNS}
-      keyExtractor={(item) => `episode-${item}`}
+      keyExtractor={(item) => `episode-${item.episode.episodeId}`}
       renderItem={renderItem}
       contentContainerStyle={[{ paddingBottom: verticalScale(20) }]}
       showsVerticalScrollIndicator={false}
-      scrollEnabled={true} // important for modal
-      removeClippedSubviews={true} // improves performance
-      windowSize={10} // virtualized window
+      scrollEnabled={true}
+      removeClippedSubviews={true}
+      windowSize={10}
       initialNumToRender={NUM_COLUMNS * 2}
-      nestedScrollEnabled={true} // Allows scroll inside modal
+      nestedScrollEnabled={true}
     />
   );
 };
@@ -98,16 +119,13 @@ export default Episodes;
 
 const styles = StyleSheet.create({
   box: {
-    width:
-      (width - moderateScale(8) * 2 - moderateScale(6) * NUM_COLUMNS) /
-      NUM_COLUMNS,
-    height: (height * 0.52) / 8,
     borderRadius: moderateScale(10),
     justifyContent: 'center',
     alignItems: 'center',
     marginVertical: moderateScale(2.5),
     marginHorizontal: moderateScale(2.5),
     position: 'relative',
+    aspectRatio: 1,
   },
   number: {
     fontSize: RFValue(15),
@@ -125,9 +143,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  activeIcon: {
+  animatedIndicator: {
     position: 'absolute',
     bottom: verticalScale(6),
     left: moderateScale(6),
+    justifyContent: 'center',
+    opacity: 0.9,
+    alignItems: 'center',
   },
 });

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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,40 @@
+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

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