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

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),
+  },
+});

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 }],
+  },
+});