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

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