@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.2

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

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

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

@@ -1,185 +0,0 @@
-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 }],
-  },
-});