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

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

@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import { Lock, ChartNoAxesColumnIncreasing } 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';
+
+const { height, width } = Dimensions.get('window');
+const NUM_COLUMNS = 6;
+
+interface EpisodesProps {
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+  currentReel: number;
+  onEpisodeSelect?: (index: number) => void;
+  totalReels?: number;
+}
+
+const Episodes: React.FC<EpisodesProps> = ({
+  data,
+  currentReel,
+  onEpisodeSelect,
+  totalReels = 0,
+}) => {
+  const totalBoxes = Math.max(data.episodes?.length || 0, totalReels);
+  const EpisodeData = Array.from({ length: totalBoxes }, (_, i) => i + 1);
+
+  const renderItem = ({ item }: { item: number }) => {
+    const isAvailable = item <= (data.episodes.length ?? 0);
+    const isActive = item === currentReel + 1;
+
+    return (
+      <TouchableOpacity
+        key={`episode-${item}`}
+        onPress={() => isAvailable && onEpisodeSelect?.(item - 1)}
+        activeOpacity={0.8}
+      >
+        <View
+          style={[
+            styles.box,
+            {
+              backgroundColor: isActive
+                ? 'rgba(60,60,60,1)'
+                : 'rgba(34,34,34,1)',
+            },
+          ]}
+        >
+          <Text style={[styles.number, { color: 'white' }]}>{item}</Text>
+
+          {!isAvailable && (
+            <View
+              style={[
+                styles.lockContainer,
+                { backgroundColor: 'rgba(76,76,76,1)' },
+              ]}
+            >
+              <Lock color={'white'} size={moderateScale(11)} />
+            </View>
+          )}
+
+          {isActive && (
+            <ChartNoAxesColumnIncreasing
+              color={'white'}
+              size={moderateScale(16)}
+              style={styles.activeIcon}
+            />
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <FlatList
+      data={EpisodeData}
+      numColumns={NUM_COLUMNS}
+      keyExtractor={(item) => `episode-${item}`}
+      renderItem={renderItem}
+      contentContainerStyle={[{ paddingBottom: verticalScale(20) }]}
+      showsVerticalScrollIndicator={false}
+      scrollEnabled={true} // important for modal
+      removeClippedSubviews={true} // improves performance
+      windowSize={10} // virtualized window
+      initialNumToRender={NUM_COLUMNS * 2}
+      nestedScrollEnabled={true} // Allows scroll inside modal
+    />
+  );
+};
+
+export default Episodes;
+
+const styles = StyleSheet.create({
+  box: {
+    width:
+      (width - moderateScale(8) * 2 - moderateScale(6) * NUM_COLUMNS) /
+      NUM_COLUMNS,
+    height: (height * 0.52) / 8,
+    borderRadius: moderateScale(10),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: moderateScale(2.5),
+    marginHorizontal: moderateScale(2.5),
+    position: 'relative',
+  },
+  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',
+  },
+  activeIcon: {
+    position: 'absolute',
+    bottom: verticalScale(6),
+    left: moderateScale(6),
+  },
+});

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

@@ -0,0 +1,249 @@
+import React, { useCallback } from 'react';
+import {
+  Text,
+  View,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+  FlatList,
+} from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import type { ISeriesEpisode, ISeriesItem } from '../types';
+import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const GAP = moderateScale(10);
+
+interface SynopsisProps {
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+}
+
+interface ILikeMoreData {
+  id: number;
+  name: string;
+  thumbnail: string;
+}
+
+const likeMoreData: Array<ILikeMoreData> = [
+  {
+    id: 1,
+    name: 'Housefull 5',
+    thumbnail:
+      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZFKczA4mK0DoFSiKN75aAtWdhm_AZvCWGkwPl2StUpOQYq6_b',
+  },
+  {
+    id: 2,
+    name: 'Sample Episode',
+    thumbnail:
+      'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTfRd3dwJUToDAbEB4afBWcic5_HCwbKbn-B7-ZgF7niTa-MTIt',
+  },
+  {
+    id: 3,
+    name: 'Tees Maar Khan',
+    thumbnail:
+      'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSwz8vklTTg8YdCqRHg9aauHq9BgpVgxLUvldi-Doz_Eh7ZIiVl',
+  },
+  {
+    id: 4,
+    name: 'Aap Jaisa Koi',
+    thumbnail:
+      'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQujccf3ymM7lkv83Y6TkS5BkcLYJLTu2d3rJQYxh6cGqwx8AuR',
+  },
+  {
+    id: 5,
+    name: 'Kaalidhar Laapata',
+    thumbnail:
+      'https://upload.wikimedia.org/wikipedia/en/b/bd/Kaalidhar_Laapata.jpg',
+  },
+  {
+    id: 6,
+    name: 'Aankhon Ki Gustaakhiyan',
+    thumbnail:
+      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLqG-A_lUucNT4TOcY1u42ujHyPbwuJvRLbO4zjNS8iuzNQ_6X',
+  },
+];
+
+const Synopsis: React.FC<SynopsisProps> = ({ data }) => {
+  // responsive columns
+  const numColumns = SCREEN_WIDTH >= 420 ? 4 : 3;
+  const keyExtractor = useCallback(
+    (item: ILikeMoreData) => item.id.toString(),
+    []
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: ILikeMoreData; index: number }) => (
+      <TouchableOpacity
+        style={[styles.card]}
+        activeOpacity={0.8}
+        onPress={() => {
+          // Handle item press if needed
+          console.log('Pressed item:', item.name);
+        }}
+      >
+        <Image
+          source={{
+            uri:
+              item.thumbnail ||
+              'https://via.placeholder.com/300x400?text=Episode',
+          }}
+          style={styles.thumbnail}
+          resizeMode="cover"
+        />
+        <Text
+          style={[styles.title, { color: '#fff', width: scale(90) }]}
+          numberOfLines={2}
+        >
+          {item.name || 'Untitled'}
+        </Text>
+      </TouchableOpacity>
+    ),
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text
+        style={{
+          color: 'rgba(255,255,255,1)',
+          fontSize: RFValue(10),
+          lineHeight: RFValue(14),
+          marginBottom: verticalScale(12),
+        }}
+      >
+        {data.description ||
+          'No synopsis available for this reel. Please check back later.'}
+      </Text>
+
+      {/* Header */}
+      <View style={styles.header}>
+        <Svg width={22} height={2} viewBox="0 0 22 2" fill="none">
+          <Path d="M21.692 1.196H.594" stroke="url(#a)" strokeWidth={1.005} />
+          <Defs>
+            <LinearGradient
+              id="a"
+              x1={0.594}
+              y1={1.696}
+              x2={21.692}
+              y2={1.696}
+              gradientUnits="userSpaceOnUse"
+            >
+              <Stop stopOpacity={0} />
+              <Stop offset={1} stopColor="#fff" />
+            </LinearGradient>
+          </Defs>
+        </Svg>
+        <Text
+          style={{
+            color: '#fff',
+            fontSize: 12,
+            textAlign: 'center',
+            marginHorizontal: scale(8),
+          }}
+        >
+          More Like This
+        </Text>
+        <Svg width={22} height={2} viewBox="0 0 22 2" fill="none">
+          <Path
+            d="M.312 1.196H21.41"
+            stroke="url(#paint0_linear_797_3114)"
+            strokeWidth={1.00467}
+          />
+          <Defs>
+            <LinearGradient
+              id="paint0_linear_797_3114"
+              x1={21.4102}
+              y1={1.69629}
+              x2={0.312025}
+              y2={1.69629}
+              gradientUnits="userSpaceOnUse"
+            >
+              <Stop stopOpacity={0} />
+              <Stop offset={1} stopColor="#fff" />
+            </LinearGradient>
+          </Defs>
+        </Svg>
+      </View>
+
+      {/* Episodes Grid */}
+      {likeMoreData.length === 0 ? (
+        <Text style={styles.noEpisodesText}>No recommendations available.</Text>
+      ) : (
+        <FlatList
+          data={likeMoreData}
+          keyExtractor={keyExtractor}
+          renderItem={renderItem}
+          numColumns={numColumns}
+          columnWrapperStyle={{
+            justifyContent: 'space-between',
+            marginBottom: GAP,
+          }}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{
+            paddingBottom: verticalScale(16),
+          }}
+          removeClippedSubviews={false} // Disable to prevent recycling issues
+          nestedScrollEnabled={true} // Allows scroll inside modal
+          getItemLayout={(_data, index) => ({
+            length: verticalScale(120) + verticalScale(6) + verticalScale(20), // thumbnail + margin + text
+            offset:
+              (verticalScale(120) + verticalScale(6) + verticalScale(20)) *
+              Math.floor(index / numColumns),
+            index,
+          })}
+          initialNumToRender={6}
+          maxToRenderPerBatch={6}
+          windowSize={5}
+          disableVirtualization={false}
+        />
+      )}
+    </View>
+  );
+};
+
+export default Synopsis;
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: verticalScale(12),
+  },
+  headerLine: {
+    height: verticalScale(1.5),
+    width: moderateScale(50),
+    marginHorizontal: moderateScale(8),
+    borderRadius: 999,
+  },
+  headerLabel: {
+    fontSize: RFValue(12),
+    textAlign: 'center',
+  },
+  card: {
+    // alignItems: 'center',
+  },
+  thumbnail: {
+    width: '100%',
+    height: verticalScale(120),
+    borderRadius: moderateScale(8),
+    marginBottom: verticalScale(6),
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    aspectRatio: 3 / 4,
+  },
+  title: {
+    fontSize: RFValue(10),
+    // textAlign: 'center',
+  },
+  noEpisodesText: {
+    color: 'rgba(180,180,180,1)',
+    fontSize: RFValue(13),
+    textAlign: 'center',
+    marginTop: verticalScale(8),
+    marginBottom: verticalScale(12),
+  },
+});

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

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Dimensions,
+} from 'react-native';
+import Modal from 'react-native-modal';
+import LinearGradient from 'react-native-linear-gradient';
+import { X } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import Episodes from './Model/Episodes';
+import Synopsis from './Model/Synopsis';
+import type { ISeriesEpisode, ISeriesItem } from './types';
+import { formatCount } from '../../../utils/Formater';
+
+const { height } = Dimensions.get('window');
+
+interface ReelSeriesDetailsModalProps {
+  visible: boolean;
+  onClose: () => void;
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+  activeEpisodeIndex: number;
+  onEpisodeSelect: (index: number) => void;
+}
+
+const ReelSeriesDetailsModal: React.FC<ReelSeriesDetailsModalProps> = ({
+  visible,
+  onClose,
+  reel,
+  data,
+  activeEpisodeIndex,
+  onEpisodeSelect,
+}) => {
+  const [activeTab, setActiveTab] = useState<'synopsis' | 'episodes'>(
+    'synopsis'
+  );
+  const [routes] = useState<
+    {
+      key: string;
+      title: string;
+    }[]
+  >([
+    { key: 'synopsis', title: 'Synopsis' },
+    { key: 'episodes', title: 'Episodes' },
+  ]);
+
+  return (
+    <Modal
+      isVisible={visible}
+      onBackdropPress={onClose}
+      swipeDirection="down"
+      onSwipeComplete={onClose}
+      backdropOpacity={0.5}
+      style={{ margin: 0, justifyContent: 'flex-end' }}
+      propagateSwipe
+    >
+      <LinearGradient
+        colors={['rgba(103,85,35,1)', 'rgba(21,21,21,1)']}
+        style={styles.bottomSheetContainer}
+      >
+        {/* Drag Handle */}
+        <View style={styles.dragHandle} />
+        {/* Close Button */}
+        <TouchableOpacity onPress={onClose} style={styles.closeButtonWrapper}>
+          <X size={moderateScale(16)} color={'#fff'} />
+        </TouchableOpacity>
+        {/* Creator + Title */}
+        <View style={styles.headerRow}>
+          <Image
+            source={{ uri: data.thumbnail }}
+            style={styles.reelPosterImage}
+          />
+          <View style={{ flex: 1 }}>
+            <Text style={styles.reelTitleText}>{data.title}</Text>
+            <Text style={styles.reelDescriptionText} numberOfLines={3}>
+              {data.description}
+            </Text>
+            <Text style={styles.reelViewsText}>
+              {formatCount(data.views || 0)} Views
+            </Text>
+          </View>
+        </View>
+        {/* Tab View */}
+        <View
+          style={{
+            flexDirection: 'row',
+            // justifyContent: 'space-around',
+            marginTop: verticalScale(10),
+          }}
+        >
+          {routes.map((item) => (
+            <TouchableOpacity
+              key={item.key}
+              style={{
+                borderBottomColor: 'white',
+                borderBottomWidth:
+                  activeTab === routes.find((r) => r.key === item.key)?.key
+                    ? 2
+                    : 0,
+                paddingBottom: 6,
+                marginHorizontal: 12,
+              }}
+              onPress={() => {
+                const tab = routes.find((r) => r.key === item.key)?.key;
+                tab && setActiveTab(tab as 'synopsis' | 'episodes');
+              }}
+            >
+              <Text
+                style={{
+                  color: 'white',
+                  fontSize: RFValue(11),
+                  fontWeight: '700',
+                  opacity:
+                    activeTab === routes.find((r) => r.key === item.key)?.key
+                      ? 1
+                      : 0.6,
+                }}
+              >
+                {item.title}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+        {/* Tab View Content */}
+        <View
+          style={{
+            flex: 1,
+            marginTop: verticalScale(8),
+            marginHorizontal: 12,
+          }}
+        >
+          {activeTab === 'synopsis' && <Synopsis reel={reel} data={data} />}
+          {activeTab === 'episodes' && (
+            <Episodes
+              reel={reel}
+              data={data}
+              currentReel={activeEpisodeIndex}
+              onEpisodeSelect={onEpisodeSelect}
+            />
+          )}
+        </View>
+      </LinearGradient>
+    </Modal>
+  );
+};
+
+export default ReelSeriesDetailsModal;
+
+const styles = StyleSheet.create({
+  bottomSheetContainer: {
+    height: height * 0.9,
+    borderTopLeftRadius: moderateScale(20),
+    borderTopRightRadius: moderateScale(20),
+    overflow: 'hidden',
+    paddingTop: verticalScale(10),
+  },
+  dragHandle: {
+    width: moderateScale(50),
+    height: verticalScale(5),
+    borderRadius: moderateScale(3),
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    alignSelf: 'center',
+    marginBottom: verticalScale(10),
+  },
+  closeButtonWrapper: {
+    position: 'absolute',
+    top: verticalScale(10),
+    right: moderateScale(14),
+    zIndex: 10,
+    borderRadius: moderateScale(18),
+    width: moderateScale(30),
+    height: moderateScale(30),
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.26)',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    paddingHorizontal: moderateScale(16),
+    marginBottom: verticalScale(10),
+  },
+  reelPosterImage: {
+    width: moderateScale(80),
+    height: verticalScale(100),
+    borderRadius: moderateScale(8),
+    marginRight: moderateScale(12),
+  },
+  reelTitleText: {
+    fontSize: RFValue(14),
+    fontWeight: '600',
+    color: '#fff',
+  },
+  reelDescriptionText: {
+    fontSize: RFValue(10),
+    color: 'rgba(215,215,215,1)',
+    marginBottom: verticalScale(4),
+    marginTop: verticalScale(3.5),
+  },
+  reelViewsText: {
+    fontSize: RFValue(10),
+    color: 'rgba(215,215,215,1)',
+    marginTop: verticalScale(2),
+  },
+});