@zezosoft/zezo-ott-react-native-ui-kit 1.0.9 → 1.1.1

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

@@ -0,0 +1,154 @@
+import React from 'react';
+import { StyleSheet, View, Image } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { Button } from '../../../Button';
+import { Text } from '../../../Text';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { BottomSheet } from '../../../BottomSheet';
+
+import type { ITheme } from '../../../../theme';
+import type { ISeriesEpisode, ISeriesItem } from '../types';
+
+interface UnLockModalProps {
+  episode: ISeriesEpisode;
+  data: ISeriesItem;
+  theme: ITheme;
+  isVisible: boolean;
+  onClose?: () => void;
+  onUnlockPress?: (ep: ISeriesEpisode) => void;
+}
+
+const UnLockModal: React.FC<UnLockModalProps> = ({
+  episode,
+  data,
+  theme,
+  isVisible,
+  onClose,
+  onUnlockPress,
+}) => {
+  return (
+    <BottomSheet
+      key={'UnlockModal'}
+      theme={theme}
+      visible={isVisible}
+      onClose={onClose}
+      height="55%" // prevent overflow
+      showCloseButton
+      scrollable={false}
+    >
+      <LinearGradient
+        colors={[theme.colors.background, theme.colors.background]}
+        style={styles.gradientContainer}
+      >
+        <View style={styles.contentWrapper}>
+          {/* Thumbnail */}
+          {data.thumbnail ? (
+            <Image
+              source={{ uri: data.thumbnail }}
+              style={styles.thumbnail}
+              resizeMode="cover"
+            />
+          ) : null}
+
+          {/* Title */}
+          <Text
+            numberOfLines={2}
+            ellipsizeMode="tail"
+            style={[styles.title, { color: theme.colors.textPrimary }]}
+          >
+            {data.title}
+          </Text>
+
+          {/* Description */}
+          <Text
+            numberOfLines={3}
+            ellipsizeMode="tail"
+            style={[styles.description, { color: theme.colors.textSecondary }]}
+          >
+            {data.description}
+          </Text>
+
+          {/* Unlock Button */}
+          <Button.Primary
+            theme={{
+              dark: theme.colors,
+              light: theme.colors,
+            }}
+            title="Unlock Now"
+            onPress={() => onUnlockPress?.(episode)}
+            containerStyle={styles.unlockButton}
+          />
+
+          {/* Tagline */}
+          <Text
+            numberOfLines={2}
+            ellipsizeMode="tail"
+            style={[styles.smallNote, { color: theme.colors.textSecondary }]}
+          >
+            Unlocking gives you full access to this and all future episodes.
+          </Text>
+        </View>
+      </LinearGradient>
+    </BottomSheet>
+  );
+};
+
+export default UnLockModal;
+
+const styles = StyleSheet.create({
+  gradientContainer: {
+    flex: 1,
+    paddingTop: verticalScale(10),
+    marginHorizontal: moderateScale(15),
+  },
+
+  contentWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingTop: verticalScale(8),
+    paddingHorizontal: moderateScale(8),
+  },
+
+  thumbnail: {
+    width: moderateScale(110),
+    height: moderateScale(150),
+    borderRadius: moderateScale(10),
+    marginBottom: verticalScale(10),
+    flexShrink: 0, // Prevents image from shrinking
+  },
+
+  title: {
+    fontSize: RFValue(17),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(5),
+    paddingHorizontal: moderateScale(10),
+    width: '95%',
+    flexShrink: 1, // prevents overflow
+  },
+
+  description: {
+    fontSize: RFValue(12),
+    textAlign: 'center',
+    marginBottom: verticalScale(15),
+    paddingHorizontal: moderateScale(20),
+    lineHeight: RFValue(16),
+    width: '95%',
+    flexShrink: 1, // prevents layout overflow
+  },
+
+  unlockButton: {
+    width: '95%',
+    marginBottom: verticalScale(10),
+  },
+
+  smallNote: {
+    fontSize: RFValue(10),
+    opacity: 0.7,
+    textAlign: 'center',
+    width: '95%',
+    flexShrink: 1, // ensures it stays inside modal
+  },
+});

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

@@ -3,29 +3,37 @@ import {
   FlatList,
   Dimensions,
   StyleSheet,
-  View,
-  TouchableOpacity,
   type ViewToken,
+  Platform,
 } 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';
+import type { IReelsData, ISeriesEpisode } from './types';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useInternalTheme } from '../../../theme/hook';
+import type { ThemeOverride } from '../../../theme';
+import { View } from '../../View';
 
 const { height } = Dimensions.get('window');
-const TAB_BAR_HEIGHT = verticalScale(65);
-const SCREEN_HEIGHT = height - TAB_BAR_HEIGHT;
+const PRELOAD_RANGE = 3;
+const VIEWABILITY_THRESHOLD = 80;
+const DEBOUNCE_DELAY = 100;
 
 type ReelsProps = {
-  data: ISeriesItem;
+  data: IReelsData['data'];
   autoScroll?: boolean;
   onEndReached?: () => void;
   onLikePress?: (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;
 };
 
 export const ReelsSeries: React.FC<ReelsProps> = ({
@@ -36,121 +44,177 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
   onEpisodesPress,
   onSharePress,
   onSearchPress,
+  onBackPress,
   isFocused = true,
+  tabBarHeight,
+  isFullScreen = false,
+  theme: overrideTheme,
+  onEpisodeUnlockPress,
 }) => {
+  const { theme } = useInternalTheme(overrideTheme);
+  const insets = useSafeAreaInsets();
   const [currentVisibleIndex, setCurrentVisibleIndex] = useState<number>(0);
-  const listRef = useRef<FlatList<ISeriesEpisode>>(null);
+  const listRef =
+    useRef<FlatList<ISeriesEpisode & { seriesIndex: number }>>(null);
+
+  // Computed values
+  const calculatedTabBarHeight = useMemo(
+    () =>
+      tabBarHeight ??
+      insets.bottom + verticalScale(Platform.OS === 'android' ? 45 : 30),
+    [tabBarHeight, insets.bottom]
+  );
+
+  const SCREEN_HEIGHT = useMemo(
+    () =>
+      isFullScreen ? height - insets.bottom : height - calculatedTabBarHeight,
+    [isFullScreen, insets.bottom, calculatedTabBarHeight]
+  );
+
+  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) => item.episodeId.toString(),
+    (item: ISeriesEpisode & { seriesIndex: number }) =>
+      item.episodeId.toString(),
     []
   );
 
-  const hendlePlayEpisode = useCallback(
-    (index: number) => {
-      if (index < 0 || index >= (data.episodes?.length || 0)) return;
+  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);
     },
-    [data.episodes]
+    [flattenedEpisodes]
   );
 
   const renderReelList = useCallback(
-    ({ item, index }: { item: ISeriesEpisode; index: number }) => {
+    ({
+      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
-          key={item.episodeId}
-          reel={item}
-          data={data}
+          reel={episode}
+          data={seriesData}
           videoHeight={SCREEN_HEIGHT}
           onLikePress={onLikePress}
           onEpisodesPress={() => onEpisodesPress?.(item.episodeId)}
           onSharePress={() => onSharePress?.(item.episodeId)}
-          isVisible={index === currentVisibleIndex && isFocused}
+          isVisible={isVisible}
           activeEpisodeIndex={currentVisibleIndex}
-          preload={Math.abs(currentVisibleIndex + 3) >= index}
-          onEpisodeSelect={hendlePlayEpisode}
+          preload={preload}
+          onEpisodeSelect={handlePlayEpisode}
           autoScroll={autoScroll}
+          theme={theme}
+          onBackPress={onBackPress}
+          onSearchPress={onSearchPress}
+          onEpisodeUnlockPress={onEpisodeUnlockPress}
         />
       );
     },
     [
       data,
-      onLikePress,
       currentVisibleIndex,
       isFocused,
-      hendlePlayEpisode,
+      SCREEN_HEIGHT,
+      onLikePress,
+      handlePlayEpisode,
       autoScroll,
+      theme,
+      onBackPress,
+      onSearchPress,
+      onEpisodeUnlockPress,
       onEpisodesPress,
       onSharePress,
     ]
   );
 
-  const memoizedRenderReelList = useMemo(
-    () => renderReelList,
-    [renderReelList]
-  );
-
+  // Viewability configuration
   const viewabilityConfig = useRef({
-    itemVisiblePercentThreshold: 80,
+    itemVisiblePercentThreshold: VIEWABILITY_THRESHOLD,
   }).current;
 
   const onViewableItemsChanged = useRef(
     debounce(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
-      if (viewableItems.length > 0) {
-        setCurrentVisibleIndex(viewableItems[0]?.index || 0);
+      const visibleIndex = viewableItems[0]?.index;
+      if (
+        visibleIndex !== undefined &&
+        visibleIndex !== null &&
+        visibleIndex >= 0
+      ) {
+        setCurrentVisibleIndex(visibleIndex);
       }
-    }, 100)
+    }, DEBOUNCE_DELAY)
   ).current;
 
   const getItemLayout = useCallback(
-    (_: any, index: number) => ({
+    (_: unknown, index: number) => ({
       length: SCREEN_HEIGHT,
       offset: SCREEN_HEIGHT * index,
       index,
     }),
-    []
+    [SCREEN_HEIGHT]
   );
 
   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 style={styles.mainContainer} backgroundColor={backgroundColor}>
+      <View
+        style={[styles.container, { height: SCREEN_HEIGHT }]}
+        backgroundColor={backgroundColor}
+      >
+        <FlatList
+          ref={listRef}
+          data={flattenedEpisodes}
+          keyExtractor={keyExtractor}
+          renderItem={renderReelList}
+          onEndReached={onEndReached}
+          pagingEnabled
+          viewabilityConfig={viewabilityConfig}
+          disableIntervalMomentum
+          removeClippedSubviews
+          maxToRenderPerBatch={2}
+          onViewableItemsChanged={onViewableItemsChanged}
+          initialNumToRender={1}
+          onEndReachedThreshold={0.1}
+          decelerationRate="fast"
+          showsVerticalScrollIndicator={false}
+          scrollEventThrottle={16}
+          snapToInterval={SCREEN_HEIGHT}
+          snapToAlignment="start"
+          getItemLayout={getItemLayout}
+        />
+      </View>
     </View>
   );
 };
@@ -158,6 +222,10 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
 export default ReelsSeries;
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
-  fixedSearch: { position: 'absolute', zIndex: 10 },
+  mainContainer: {
+    flex: 1,
+  },
+  container: {
+    overflow: 'hidden',
+  },
 });