@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.4

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Heart, Forward, ChevronRight, ListVideo } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ISeriesEpisode, ISeriesItem } from './types';
+
+interface ICommenProps {
+  data: ISeriesItem;
+  currentTime: number;
+  duration: number;
+  onLikePress: () => void;
+  onPlayPausePress: () => void;
+  onEpisodesPress: () => void;
+  onSharePress?: () => void;
+  activeEpisodeIndex: number;
+}
+
+interface IReelSeriesOverlayProps extends ICommenProps {
+  reel: ISeriesEpisode;
+}
+
+const ReelSeriesOverlay: React.FC<IReelSeriesOverlayProps> = ({
+  data,
+  currentTime,
+  duration,
+  onLikePress,
+  onEpisodesPress,
+  onSharePress,
+  activeEpisodeIndex,
+}) => {
+  return (
+    <View style={styles.overlay}>
+      {/* Right Side Actions */}
+      <View style={styles.rightIcons}>
+        <TouchableOpacity
+          style={styles.iconBox}
+          onPress={onLikePress}
+          activeOpacity={0.7}
+        >
+          <Heart
+            size={moderateScale(25)}
+            color={data.isLiked ? 'red' : '#fff'}
+            fill={data.isLiked ? 'red' : 'none'}
+          />
+          <Text style={[styles.iconLabel, { color: '#fff' }]}>
+            {data.likes}
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.iconBox} onPress={onEpisodesPress}>
+          <ListVideo color={'#fff'} size={moderateScale(25)} />
+          <Text style={[styles.iconLabel, { color: '#fff' }]}>Episodes</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.iconBox} onPress={onSharePress}>
+          <Forward color={'#fff'} size={moderateScale(25)} />
+          <Text style={[styles.iconLabel, { color: '#fff' }]}>Share</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Title & Description */}
+      <View style={styles.titleBox}>
+        <Text style={[styles.title, { color: '#fff' }]}>
+          {data.title.length <= 25
+            ? data.title
+            : data.title.slice(0, 25) + '...'}
+        </Text>
+        <Text
+          numberOfLines={2}
+          style={[
+            styles.description,
+            { color: '#fff', marginTop: 2.5, opacity: 0.9 },
+          ]}
+        >
+          {data.description}
+        </Text>
+      </View>
+
+      {/* Episodes Button */}
+
+      <TouchableOpacity
+        style={[styles.episodesRow, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
+        onPress={onEpisodesPress}
+      >
+        <View style={styles.bottomLeft}>
+          <ListVideo
+            color={'#fff'}
+            width={moderateScale(20)}
+            height={moderateScale(20)}
+          />
+          <Text style={[styles.episodes, { color: '#fff' }]}>
+            {activeEpisodeIndex + 1} / {data.episodes.length} Episodes
+          </Text>
+        </View>
+        <ChevronRight color={'#fff'} size={moderateScale(22)} />
+      </TouchableOpacity>
+
+      {/* Progress Bar */}
+      <View style={styles.progressBar}>
+        <View
+          style={[
+            styles.progressFill,
+            {
+              width: duration > 0 ? `${(currentTime / duration) * 100}%` : '0%',
+            },
+          ]}
+        />
+        {duration > 0 && (
+          <View
+            style={[
+              styles.progressKnob,
+              { left: `${(currentTime / duration) * 100}%` },
+            ]}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default ReelSeriesOverlay;
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    paddingBottom: verticalScale(12),
+    paddingHorizontal: moderateScale(12),
+  },
+  centerPlayPauseButton: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: [{ translateX: -25 }, { translateY: -25 }],
+    width: moderateScale(50),
+    height: moderateScale(50),
+    borderRadius: moderateScale(25),
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 5,
+  },
+  rightIcons: {
+    position: 'absolute',
+    bottom: verticalScale(120),
+    right: moderateScale(10),
+    alignItems: 'center',
+  },
+  iconBox: { marginVertical: verticalScale(8), alignItems: 'center' },
+  iconLabel: { fontSize: RFValue(10), marginTop: verticalScale(4) },
+  titleBox: { marginBottom: verticalScale(10) },
+  following: { fontSize: RFValue(10), fontWeight: '500' },
+  title: { fontSize: RFValue(13), fontWeight: '500' },
+  description: { fontSize: RFValue(10) },
+  episodesRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: moderateScale(8),
+    paddingHorizontal: moderateScale(12),
+    paddingVertical: verticalScale(8),
+    marginBottom: verticalScale(6),
+  },
+  bottomLeft: { flexDirection: 'row', alignItems: 'center' },
+  episodes: { fontSize: RFValue(13), marginLeft: moderateScale(10) },
+  progressBar: {
+    height: verticalScale(2),
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    borderRadius: moderateScale(1),
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#fff',
+    borderRadius: moderateScale(1),
+  },
+  progressKnob: {
+    position: 'absolute',
+    top: -verticalScale(2),
+    width: moderateScale(7),
+    height: moderateScale(7),
+    borderRadius: moderateScale(5),
+    backgroundColor: '#fff',
+    transform: [{ translateX: -5 }],
+  },
+});

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

@@ -0,0 +1,163 @@
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import {
+  FlatList,
+  Dimensions,
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  type ViewToken,
+} from 'react-native';
+import { debounce } from 'lodash';
+import ReelsSeriesItem from './ReelsSeriesItem';
+import { verticalScale } from 'react-native-size-matters';
+import { Search } from 'lucide-react-native';
+import type { ISeriesEpisode, ISeriesItem } from './types';
+
+const { height } = Dimensions.get('window');
+const TAB_BAR_HEIGHT = verticalScale(65);
+const SCREEN_HEIGHT = height - TAB_BAR_HEIGHT;
+
+type ReelsProps = {
+  data: ISeriesItem;
+  autoScroll?: boolean;
+  onEndReached?: () => void;
+  onLikePress?: (id: string, liked: boolean) => void;
+  onEpisodesPress?: (id: string) => void;
+  onSharePress?: (id: string) => void;
+  onSearchPress?: () => void;
+  isFocused?: boolean;
+};
+
+export const ReelsSeries: React.FC<ReelsProps> = ({
+  data,
+  autoScroll,
+  onEndReached,
+  onLikePress,
+  onEpisodesPress,
+  onSharePress,
+  onSearchPress,
+  isFocused = true,
+}) => {
+  const [currentVisibleIndex, setCurrentVisibleIndex] = useState<number>(0);
+  const listRef = useRef<FlatList<ISeriesEpisode>>(null);
+  const keyExtractor = useCallback(
+    (item: ISeriesEpisode) => item.episodeId.toString(),
+    []
+  );
+
+  const hendlePlayEpisode = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= (data.episodes?.length || 0)) return;
+      listRef.current?.scrollToIndex({ index, animated: true });
+      setCurrentVisibleIndex(index);
+    },
+    [data.episodes]
+  );
+
+  const renderReelList = useCallback(
+    ({ item, index }: { item: ISeriesEpisode; index: number }) => {
+      return (
+        <ReelsSeriesItem
+          key={item.episodeId}
+          reel={item}
+          data={data}
+          videoHeight={SCREEN_HEIGHT}
+          onLikePress={onLikePress}
+          onEpisodesPress={() => onEpisodesPress?.(item.episodeId)}
+          onSharePress={() => onSharePress?.(item.episodeId)}
+          isVisible={index === currentVisibleIndex && isFocused}
+          activeEpisodeIndex={currentVisibleIndex}
+          preload={Math.abs(currentVisibleIndex + 3) >= index}
+          onEpisodeSelect={hendlePlayEpisode}
+          autoScroll={autoScroll}
+        />
+      );
+    },
+    [
+      data,
+      onLikePress,
+      currentVisibleIndex,
+      isFocused,
+      hendlePlayEpisode,
+      autoScroll,
+      onEpisodesPress,
+      onSharePress,
+    ]
+  );
+
+  const memoizedRenderReelList = useMemo(
+    () => renderReelList,
+    [renderReelList]
+  );
+
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: 80,
+  }).current;
+
+  const onViewableItemsChanged = useRef(
+    debounce(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      if (viewableItems.length > 0) {
+        setCurrentVisibleIndex(viewableItems[0]?.index || 0);
+      }
+    }, 100)
+  ).current;
+
+  const getItemLayout = useCallback(
+    (_: any, index: number) => ({
+      length: SCREEN_HEIGHT,
+      offset: SCREEN_HEIGHT * index,
+      index,
+    }),
+    []
+  );
+
+  return (
+    <View style={[styles.container, { backgroundColor: '#000' }]}>
+      {onSearchPress && (
+        <TouchableOpacity
+          style={[
+            styles.fixedSearch,
+            {
+              top: verticalScale(40),
+              right: 16,
+            },
+          ]}
+          onPress={onSearchPress}
+        >
+          <Search color={'#fff'} size={verticalScale(22)} />
+        </TouchableOpacity>
+      )}
+
+      <FlatList
+        ref={listRef}
+        data={data.episodes || []}
+        keyExtractor={keyExtractor}
+        renderItem={memoizedRenderReelList as any}
+        windowSize={2}
+        onEndReached={onEndReached}
+        pagingEnabled
+        viewabilityConfig={viewabilityConfig}
+        disableIntervalMomentum={true}
+        removeClippedSubviews
+        maxToRenderPerBatch={2}
+        onViewableItemsChanged={onViewableItemsChanged}
+        initialNumToRender={1}
+        onEndReachedThreshold={0.1}
+        decelerationRate="fast"
+        showsVerticalScrollIndicator={false}
+        scrollEventThrottle={16}
+        snapToInterval={SCREEN_HEIGHT}
+        snapToAlignment="start"
+        getItemLayout={getItemLayout}
+        contentContainerStyle={{ paddingBottom: TAB_BAR_HEIGHT }}
+      />
+    </View>
+  );
+};
+
+export default ReelsSeries;
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  fixedSearch: { position: 'absolute', zIndex: 10 },
+});

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

@@ -0,0 +1,333 @@
+import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
+import { View, Dimensions, StyleSheet } from 'react-native';
+import ReelSeriesOverlay from './ReelSeriesOverlay';
+import ReelSeriesDetailsModal from './ReelSeriesDetailsModal';
+import type { ISeriesEpisode, ISeriesItem } from './types';
+import { Video, type VideoRef } from 'react-native-video';
+import FastImage from 'react-native-fast-image';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import { Pause, Play } from 'lucide-react-native';
+import { moderateScale } from 'react-native-size-matters';
+import LottieView from 'lottie-react-native';
+import DoubleTapAnim from '../../../assets/animations/heart.json';
+
+const { width } = Dimensions.get('window');
+
+interface IReelItemProps {
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+  autoScroll?: boolean;
+  videoHeight: number;
+  onLikePress?: (id: string, liked: boolean) => void;
+  onEpisodesPress?: () => void;
+  onSharePress?: () => void;
+  isVisible: boolean;
+  preload: boolean;
+  activeEpisodeIndex: number;
+  onEpisodeSelect: (index: number) => void;
+}
+
+const ReelItem: React.FC<IReelItemProps> = ({
+  reel,
+  data,
+  autoScroll,
+  videoHeight,
+  onLikePress,
+  onSharePress,
+  isVisible,
+  preload,
+  activeEpisodeIndex,
+  onEpisodeSelect,
+}) => {
+  const videoRef = useRef<VideoRef>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [isPaused, setIsPaused] = useState<boolean>(false);
+  const [paused, setPaused] = useState<string | null>(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [videoLoaded, setVideoLoaded] = useState(false);
+  const [showLikeAnim, setShowLikeAnim] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsPaused(!isVisible);
+    if (!isVisible) {
+      setPaused(null);
+      setVideoLoaded(false);
+    }
+  }, [isVisible]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const videoUri = reel.videoUrl || '';
+  // Handle like
+  const handleLikePress = useCallback(() => {
+    const newLiked = !data.isLiked;
+    data.isLiked = newLiked;
+    data.likes += newLiked ? 1 : -1;
+    if (newLiked) {
+      setShowLikeAnim(true);
+      setTimeout(() => setShowLikeAnim(false), 1200);
+    }
+    onLikePress?.(reel.episodeId, newLiked);
+  }, [data, onLikePress, reel.episodeId]);
+
+  const handleEpisodeSelect = (index: number) => {
+    if (data && index >= 0 && index < data.episodes.length) {
+      onEpisodeSelect(index);
+      setModalVisible(false);
+    }
+  };
+
+  const handleVideoLoad = () => {
+    setVideoLoaded(true);
+  };
+
+  const handleTogglePlay = useCallback(() => {
+    // Use functional updates to ensure we get the current state
+    setIsPaused((prevIsPaused) => {
+      const newIsPaused = !prevIsPaused;
+      const currentState = newIsPaused ? 'paused' : 'play';
+
+      setPaused(currentState);
+
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Set new timeout
+      timeoutRef.current = setTimeout(() => {
+        if (currentState === 'play') {
+          setPaused(null);
+        }
+      }, 700);
+
+      return newIsPaused;
+    });
+  }, []);
+
+  const singleTap = Gesture.Tap()
+    .maxDuration(300)
+    .onStart((event) => {
+      // Check if the tap is in the overlay area (right side icons or bottom area)
+      const { x, y } = event;
+      const screenWidth = width;
+      const screenHeight = videoHeight;
+
+      // Right side icons area (right 80px)
+      const rightIconsArea = x > screenWidth - 80;
+
+      // Bottom area (bottom 150px)
+      const bottomArea = y > screenHeight - 150;
+
+      // If tap is in overlay area, don't trigger play/pause
+      if (rightIconsArea || bottomArea) {
+        return;
+      }
+      handleTogglePlay();
+    })
+    .runOnJS(true);
+
+  const doubleTap = Gesture.Tap()
+    .maxDuration(300)
+    .numberOfTaps(2)
+    .onStart((event) => {
+      // Check if the tap is in the overlay area (right side icons or bottom area)
+      const { x, y } = event;
+      const screenWidth = width;
+      const screenHeight = videoHeight;
+
+      // Right side icons area (right 80px)
+      const rightIconsArea = x > screenWidth - 80;
+
+      // Bottom area (bottom 150px)
+      const bottomArea = y > screenHeight - 150;
+
+      // If tap is in overlay area, don't trigger like
+      if (rightIconsArea || bottomArea) {
+        return;
+      }
+
+      handleLikePress();
+    })
+    .runOnJS(true);
+
+  const combined = Gesture.Exclusive(doubleTap, singleTap);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { height: videoHeight, backgroundColor: '#000' },
+      ]}
+    >
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <GestureDetector gesture={combined}>
+          <View style={{ flex: 1 }} collapsable={false}>
+            {/* Video Player */}
+            {!videoLoaded && (
+              <FastImage
+                source={{
+                  uri: data.thumbnail,
+                  priority: FastImage.priority.high,
+                }}
+                defaultSource={require('../../../assets/img/play.png')}
+                resizeMode={FastImage.resizeMode.cover}
+              />
+            )}
+
+            {isVisible || preload ? (
+              <Video
+                poster={data.thumbnail}
+                ref={videoRef}
+                source={{ uri: videoUri }}
+                style={StyleSheet.absoluteFillObject}
+                resizeMode="cover"
+                posterResizeMode="cover"
+                repeat
+                paused={isPaused}
+                onLoad={(e) => setDuration(e.duration)}
+                onProgress={({ currentTime: ct }) => setCurrentTime(ct)}
+                ignoreSilentSwitch="ignore"
+                playWhenInactive={false}
+                playInBackground={false}
+                controls={false}
+                controlsStyles={{
+                  hideForward: true,
+                  hideDuration: true,
+                  hideFullscreen: true,
+                  hidePlayPause: true,
+                  hideNavigationBarOnFullScreenMode: true,
+                  hideNotificationBarOnFullScreenMode: true,
+                  hideNext: true,
+                  hidePosition: true,
+                  hidePrevious: true,
+                  hideRewind: true,
+                  hideSeekBar: true,
+                  hideSettingButton: true,
+                }}
+                disableFocus={true}
+                shutterColor="transparent"
+                onReadyForDisplay={handleVideoLoad}
+                onEnd={() => {
+                  if (autoScroll) {
+                    onEpisodeSelect(activeEpisodeIndex + 1);
+                  }
+                }}
+              />
+            ) : null}
+
+            {showLikeAnim && (
+              <View style={styles.lottieContainer}>
+                <LottieView
+                  style={styles.lottie}
+                  source={DoubleTapAnim}
+                  autoPlay
+                  loop={false}
+                />
+              </View>
+            )}
+
+            {paused !== null && (
+              <View
+                style={[
+                  styles.playPauseButtonContainer,
+                  { height: videoHeight },
+                ]}
+              >
+                <View style={styles.shadow} pointerEvents="none">
+                  {paused === 'paused' ? (
+                    <Pause color={'#fff'} size={moderateScale(25)} />
+                  ) : (
+                    <Play color={'#fff'} size={moderateScale(25)} />
+                  )}
+                </View>
+              </View>
+            )}
+
+            {/* Overlay */}
+            <ReelSeriesOverlay
+              data={data}
+              reel={reel}
+              currentTime={currentTime}
+              duration={duration}
+              onLikePress={handleLikePress}
+              onPlayPausePress={() => setIsPaused((prev) => !prev)}
+              onEpisodesPress={() => {
+                setModalVisible(true);
+              }}
+              onSharePress={onSharePress}
+              activeEpisodeIndex={activeEpisodeIndex}
+            />
+
+            {/* Modal */}
+            <ReelSeriesDetailsModal
+              visible={modalVisible}
+              onClose={() => setModalVisible(false)}
+              reel={reel}
+              data={data}
+              activeEpisodeIndex={activeEpisodeIndex}
+              onEpisodeSelect={handleEpisodeSelect}
+            />
+          </View>
+        </GestureDetector>
+      </GestureHandlerRootView>
+    </View>
+  );
+};
+
+const areEqual = (prevProps: IReelItemProps, nextProps: IReelItemProps) => {
+  return (
+    prevProps?.reel?.episodeId === nextProps?.reel?.episodeId &&
+    prevProps?.isVisible === nextProps?.isVisible
+  );
+};
+
+export default memo(ReelItem, areEqual);
+
+const styles = StyleSheet.create({
+  container: {
+    width,
+    position: 'relative',
+    overflow: 'hidden',
+    flex: 1,
+    flexGrow: 1,
+  },
+  playPauseButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  shadow: {
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    padding: moderateScale(10),
+    borderRadius: moderateScale(50),
+  },
+  lottieContainer: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lottie: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/src/components/Reels/ReelsSeries/types.ts

@@ -0,0 +1,27 @@
+export interface ISeriesEpisode {
+  videoUrl: string;
+  episodeId: string;
+  episodeNumber: number;
+  duration: string;
+  isLocked: boolean;
+}
+
+export interface ISeriesItem {
+  id: string;
+  title: string;
+
+  thumbnail: string;
+  description: string;
+  episodes: ISeriesEpisode[];
+  likes: number;
+  views: number;
+  createdAt: string;
+  shares: number;
+  isLiked: boolean;
+}
+
+// For like state
+export interface LikedState {
+  liked: boolean;
+  count: number;
+}