@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

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

@@ -1,143 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { BottomSheet } from '../../../../components/BottomSheet';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ITheme } from '../../../../theme';
-import { QualityControl, SpeedControl } from '../components/VideoControls';
-
-interface SettingModalProps {
-  theme: ITheme;
-  speed: number;
-  quality: string;
-  videoUrl?: string;
-
-  onSpeedChange: (speed: number) => void;
-  onQualityChange: (quality: string) => void;
-
-  isVisible: boolean;
-  onClose: () => void;
-}
-
-const SettingModal: React.FC<SettingModalProps> = ({
-  theme,
-  speed,
-  quality,
-  videoUrl,
-  onSpeedChange,
-  onQualityChange,
-  isVisible,
-  onClose,
-}) => {
-  const [activeTab, setActiveTab] = useState<'speed' | 'quality'>('speed');
-
-  const handleSelect = (callback: any, value: any) => {
-    callback(value);
-    setTimeout(onClose, 200);
-  };
-
-  return (
-    <BottomSheet
-      theme={theme}
-      title="Video Settings"
-      height="50%"
-      visible={isVisible}
-      onClose={onClose}
-      handleIndicatorStyle={{ backgroundColor: theme.colors.button }}
-    >
-      {/* Tabs */}
-      <View style={styles.tabContainer}>
-        {['speed', 'quality'].map((tab) => {
-          const isActive = activeTab === tab;
-          return (
-            <TouchableOpacity
-              key={tab}
-              style={[
-                styles.tab,
-                isActive && {
-                  borderBottomWidth: 2,
-                  borderBottomColor: theme.colors.textPrimary,
-                },
-              ]}
-              onPress={() => setActiveTab(tab as 'speed' | 'quality')}
-            >
-              <Text
-                style={[
-                  styles.tabText,
-                  {
-                    color: theme.colors.textPrimary,
-                    opacity: isActive ? 1 : 0.5,
-                  },
-                ]}
-              >
-                {tab === 'speed' ? 'Playback' : 'Quality'}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-
-      {/* Content */}
-      <View style={styles.contentContainer}>
-        {activeTab === 'speed' && (
-          <Animated.View
-            entering={FadeIn.duration(150)}
-            exiting={FadeOut.duration(150)}
-            style={styles.animatedContent}
-          >
-            <SpeedControl
-              activeSpeed={speed}
-              theme={theme}
-              onSpeedChange={(value) => handleSelect(onSpeedChange, value)}
-            />
-          </Animated.View>
-        )}
-
-        {activeTab === 'quality' && (
-          <Animated.View
-            entering={FadeIn.duration(150)}
-            exiting={FadeOut.duration(150)}
-            style={styles.animatedContent}
-          >
-            <QualityControl
-              activeQuality={quality}
-              videoUrl={videoUrl}
-              theme={theme}
-              onQualityChange={(value) => handleSelect(onQualityChange, value)}
-            />
-          </Animated.View>
-        )}
-      </View>
-    </BottomSheet>
-  );
-};
-
-export default SettingModal;
-
-const styles = StyleSheet.create({
-  tabContainer: {
-    flexDirection: 'row',
-    paddingHorizontal: moderateScale(16),
-    marginTop: verticalScale(10),
-  },
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    paddingBottom: 8,
-    marginHorizontal: moderateScale(12),
-  },
-  tabText: {
-    fontSize: RFValue(14),
-    fontWeight: '700',
-  },
-  contentContainer: {
-    flex: 1,
-    marginTop: verticalScale(20),
-    paddingHorizontal: moderateScale(16),
-  },
-  animatedContent: {
-    width: '100%',
-    minHeight: verticalScale(200),
-  },
-});

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

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

@@ -1,231 +0,0 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
-import {
-  FlatList,
-  Dimensions,
-  StyleSheet,
-  type ViewToken,
-  Platform,
-} from 'react-native';
-import { debounce } from 'lodash';
-import ReelsSeriesItem from './ReelsSeriesItem';
-import { verticalScale } from 'react-native-size-matters';
-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 PRELOAD_RANGE = 3;
-const VIEWABILITY_THRESHOLD = 80;
-const DEBOUNCE_DELAY = 100;
-
-type ReelsProps = {
-  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> = ({
-  data,
-  autoScroll,
-  onEndReached,
-  onLikePress,
-  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 & { 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 & { 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 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={SCREEN_HEIGHT}
-          onLikePress={onLikePress}
-          onEpisodesPress={() => onEpisodesPress?.(item.episodeId)}
-          onSharePress={() => onSharePress?.(item.episodeId)}
-          isVisible={isVisible}
-          activeEpisodeIndex={currentVisibleIndex}
-          preload={preload}
-          onEpisodeSelect={handlePlayEpisode}
-          autoScroll={autoScroll}
-          theme={theme}
-          onBackPress={onBackPress}
-          onSearchPress={onSearchPress}
-          onEpisodeUnlockPress={onEpisodeUnlockPress}
-        />
-      );
-    },
-    [
-      data,
-      currentVisibleIndex,
-      isFocused,
-      SCREEN_HEIGHT,
-      onLikePress,
-      handlePlayEpisode,
-      autoScroll,
-      theme,
-      onBackPress,
-      onSearchPress,
-      onEpisodeUnlockPress,
-      onEpisodesPress,
-      onSharePress,
-    ]
-  );
-
-  // Viewability configuration
-  const viewabilityConfig = useRef({
-    itemVisiblePercentThreshold: VIEWABILITY_THRESHOLD,
-  }).current;
-
-  const onViewableItemsChanged = useRef(
-    debounce(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
-      const visibleIndex = viewableItems[0]?.index;
-      if (
-        visibleIndex !== undefined &&
-        visibleIndex !== null &&
-        visibleIndex >= 0
-      ) {
-        setCurrentVisibleIndex(visibleIndex);
-      }
-    }, DEBOUNCE_DELAY)
-  ).current;
-
-  const getItemLayout = useCallback(
-    (_: unknown, index: number) => ({
-      length: SCREEN_HEIGHT,
-      offset: SCREEN_HEIGHT * index,
-      index,
-    }),
-    [SCREEN_HEIGHT]
-  );
-
-  return (
-    <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>
-  );
-};
-
-export default ReelsSeries;
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-  },
-  container: {
-    overflow: 'hidden',
-  },
-});