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

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

@@ -0,0 +1,189 @@
+/**
+ * @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

@@ -0,0 +1,159 @@
+/**
+ * @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

@@ -0,0 +1,46 @@
+/**
+ * @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

@@ -0,0 +1,45 @@
+/**
+ * @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

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