@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

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

@@ -1,264 +0,0 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
-import {
-  FlatList,
-  StyleSheet,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import ReelsSeriesItem from './ReelsSeriesItem';
-import type { IReelsData, ISeriesEpisode, IReelsWatchProgress } from './types';
-import { useInternalTheme } from '../../../theme/hook';
-import type { ThemeOverride } from '../../../theme';
-import { View } from '../../View';
-import Display from '../../../utils/Display';
-import { AppStatusBar } from '../../common/AppStatusBar';
-const { fullHeight: height } = Display;
-const PRELOAD_RANGE = 1;
-
-type ReelsProps = {
-  data: IReelsData['data'];
-  autoScroll?: boolean;
-  onEndReached?: () => void;
-  onLikePress?: (data: { id: string; liked: boolean }) => void;
-  onEpisodesPress?: (id: string) => void;
-  onSharePress?: (id: string) => void;
-  onSearchPress?: () => void;
-  onBackPress?: () => void;
-  isFocused?: boolean;
-  tabBarHeight?: number;
-  isFullScreen?: boolean;
-  theme?: ThemeOverride;
-  onEpisodeUnlockPress?: (episode: ISeriesEpisode) => void;
-  onViewCount?: (data: { id: string }) => void;
-  onWatchProgress?: (data: IReelsWatchProgress) => void;
-};
-
-export const ReelsSeries: React.FC<ReelsProps> = ({
-  data,
-  autoScroll,
-  onEndReached,
-  onLikePress,
-  onEpisodesPress,
-  onSharePress,
-  onSearchPress,
-  onBackPress,
-  isFocused = true,
-  tabBarHeight: _tabBarHeight, // kept for backward compatibility, not used in height calc
-  isFullScreen = false,
-  theme: overrideTheme,
-  onEpisodeUnlockPress,
-  onViewCount,
-  onWatchProgress,
-}) => {
-  const { theme } = useInternalTheme(overrideTheme);
-  const [currentVisibleIndex, setCurrentVisibleIndex] = useState<number>(0);
-  const [layoutHeight, setLayoutHeight] = useState<number>(height);
-  const listRef =
-    useRef<FlatList<ISeriesEpisode & { seriesIndex: number }>>(null);
-  const insets = useSafeAreaInsets();
-
-  // Computed values
-  // Match container layout height when available, otherwise fall back to full
-  // window height. In full-screen, subtract bottom inset so content isn't
-  // hidden behind system UI.
-  const ITEM_HEIGHT = useMemo(() => {
-    const baseHeight = layoutHeight ?? height;
-    if (!isFullScreen) {
-      return baseHeight;
-    }
-
-    const bottomInset = insets.bottom ?? 0;
-    return Math.max(0, baseHeight - bottomInset);
-  }, [layoutHeight, isFullScreen, insets.bottom]);
-
-  const backgroundColor = useMemo(
-    () => (isFullScreen ? theme.colors.black : theme.colors.background),
-    [isFullScreen, theme.colors.black, theme.colors.background]
-  );
-
-  // Flatten all episodes from all series items and track which series they belong to
-  const flattenedEpisodes = useMemo(() => {
-    const episodes: Array<ISeriesEpisode & { seriesIndex: number }> = [];
-    data.forEach((seriesItem, seriesIndex) => {
-      seriesItem.episodes?.forEach((episode) => {
-        episodes.push({ ...episode, seriesIndex });
-      });
-    });
-    return episodes;
-  }, [data]);
-
-  const keyExtractor = useCallback(
-    (item: ISeriesEpisode & { seriesIndex: number }) =>
-      item.episodeId.toString(),
-    []
-  );
-
-  const handlePlayEpisode = useCallback(
-    (episode: ISeriesEpisode) => {
-      const index = flattenedEpisodes.findIndex(
-        (ep) => ep.episodeId === episode.episodeId
-      );
-
-      if (index < 0 || index >= flattenedEpisodes.length) return;
-
-      listRef.current?.scrollToIndex({ index, animated: true });
-      setCurrentVisibleIndex(index);
-    },
-    [flattenedEpisodes]
-  );
-
-  const handleAutoScrollNext = useCallback(() => {
-    const nextIndex = currentVisibleIndex + 1;
-    if (nextIndex >= flattenedEpisodes.length) {
-      return;
-    }
-    listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
-    setCurrentVisibleIndex(nextIndex);
-  }, [currentVisibleIndex, flattenedEpisodes.length]);
-
-  const renderReelList = useCallback(
-    ({
-      item,
-      index,
-    }: {
-      item: ISeriesEpisode & { seriesIndex: number };
-      index: number;
-    }) => {
-      const seriesData = data[item.seriesIndex];
-      if (!seriesData) return null;
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { seriesIndex, ...episode } = item;
-      const isVisible = index === currentVisibleIndex && isFocused;
-      const preload = Math.abs(index - currentVisibleIndex) <= PRELOAD_RANGE;
-
-      return (
-        <ReelsSeriesItem
-          reel={episode}
-          data={seriesData}
-          videoHeight={ITEM_HEIGHT}
-          onLikePress={onLikePress}
-          onEpisodesPress={() => onEpisodesPress?.(item.episodeId)}
-          onSharePress={() => onSharePress?.(item.episodeId)}
-          isVisible={isVisible}
-          activeEpisodeIndex={currentVisibleIndex}
-          preload={preload}
-          onEpisodeSelect={handlePlayEpisode}
-          onAutoScrollNext={handleAutoScrollNext}
-          isFullScreen={isFullScreen}
-          autoScroll={autoScroll}
-          theme={theme}
-          onBackPress={onBackPress}
-          onSearchPress={onSearchPress}
-          onEpisodeUnlockPress={onEpisodeUnlockPress}
-          onViewCount={onViewCount}
-          onWatchProgress={onWatchProgress}
-        />
-      );
-    },
-    [
-      data,
-      currentVisibleIndex,
-      isFocused,
-      ITEM_HEIGHT,
-      onLikePress,
-      handlePlayEpisode,
-      isFullScreen,
-      autoScroll,
-      theme,
-      onBackPress,
-      onSearchPress,
-      onEpisodeUnlockPress,
-      onEpisodesPress,
-      onSharePress,
-      onViewCount,
-      onWatchProgress,
-      handleAutoScrollNext,
-    ]
-  );
-
-  const getItemLayout = useCallback(
-    (_: unknown, index: number) => {
-      const itemHeight = ITEM_HEIGHT;
-      return {
-        length: itemHeight,
-        offset: itemHeight * index,
-        index,
-      };
-    },
-    [ITEM_HEIGHT]
-  );
-
-  const handleMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const itemHeight = ITEM_HEIGHT || 1;
-      const offsetY = event.nativeEvent.contentOffset.y;
-      const index = Math.round(offsetY / itemHeight);
-
-      if (
-        index !== currentVisibleIndex &&
-        index >= 0 &&
-        index < flattenedEpisodes.length
-      ) {
-        setCurrentVisibleIndex(index);
-      }
-    },
-    [ITEM_HEIGHT, currentVisibleIndex, flattenedEpisodes.length]
-  );
-
-  return (
-    <View style={styles.mainContainer} backgroundColor={backgroundColor}>
-      <AppStatusBar theme={overrideTheme} transparent />
-      <View
-        style={[
-          styles.container,
-          isFullScreen && insets.bottom
-            ? { paddingBottom: insets.bottom }
-            : null,
-        ]}
-        backgroundColor={backgroundColor}
-        onLayout={(event) => {
-          const h = event.nativeEvent.layout.height;
-          if (h && h > 0 && h !== layoutHeight) {
-            setLayoutHeight(h);
-          }
-        }}
-      >
-        <FlatList
-          ref={listRef}
-          data={flattenedEpisodes}
-          keyExtractor={keyExtractor}
-          renderItem={renderReelList}
-          onEndReached={onEndReached}
-          pagingEnabled
-          disableIntervalMomentum
-          removeClippedSubviews
-          windowSize={5}
-          maxToRenderPerBatch={2}
-          initialNumToRender={2}
-          onEndReachedThreshold={0.1}
-          decelerationRate="fast"
-          showsVerticalScrollIndicator={false}
-          scrollEventThrottle={32}
-          onMomentumScrollEnd={handleMomentumScrollEnd}
-          snapToInterval={ITEM_HEIGHT}
-          snapToAlignment="start"
-          getItemLayout={getItemLayout}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default ReelsSeries;
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-  },
-  container: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-});