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

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

@@ -0,0 +1,210 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
+import { BottomSheet } from '../../../BottomSheet';
+import LinearGradient from 'react-native-linear-gradient';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import Episodes from '../../ReelsSeries/components/Episodes';
+import Synopsis from '../../ReelsSeries/components/Synopsis';
+import type { ILikeMoreData, ISeriesEpisode, ISeriesItem } from '../types';
+import { formatCount } from '../../../../utils/Formater';
+import type { ITheme } from '../../../../theme';
+
+interface DetailsModalProps {
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+  activeEpisodeIndex: number;
+  onEpisodeSelect?: (episode: ISeriesEpisode) => void;
+  theme: ITheme;
+  onLikeMorePress?: (item: ILikeMoreData) => void;
+  isVisible: boolean;
+  onClose?: () => void;
+}
+
+const DetailsModal: React.FC<DetailsModalProps> = ({
+  reel,
+  data,
+  activeEpisodeIndex: _activeEpisodeIndex,
+  onEpisodeSelect,
+  theme,
+  onLikeMorePress,
+  isVisible,
+  onClose,
+}) => {
+  const [activeTab, setActiveTab] = useState<'synopsis' | 'episodes'>(
+    'synopsis'
+  );
+  const [routes] = useState<
+    {
+      key: string;
+      title: string;
+    }[]
+  >([
+    { key: 'synopsis', title: 'Synopsis' },
+    { key: 'episodes', title: 'Episodes' },
+  ]);
+
+  return (
+    <BottomSheet
+      key={'detailsModal'}
+      theme={theme}
+      visible={isVisible}
+      onClose={onClose}
+      height="75%"
+      showCloseButton
+      scrollable={false}
+    >
+      <LinearGradient
+        colors={[theme.colors.background, theme.colors.background]}
+        style={styles.gradientContainer}
+      >
+        {/* Creator + Title */}
+        <View style={styles.headerRow}>
+          <Image
+            source={{ uri: data.thumbnail }}
+            style={[
+              styles.reelPosterImage,
+              { backgroundColor: theme.colors.surfaceDisabled },
+            ]}
+          />
+          <View style={styles.titleContainer}>
+            <Text
+              style={[styles.reelTitleText, { color: theme.colors.onSurface }]}
+            >
+              {data.title}
+            </Text>
+            <Text
+              style={[
+                styles.reelDescriptionText,
+                { color: theme.colors.textSecondary },
+              ]}
+              numberOfLines={3}
+            >
+              {data.description}
+            </Text>
+            <Text
+              style={[
+                styles.reelViewsText,
+                { color: theme.colors.textSecondary },
+              ]}
+            >
+              {formatCount(data.views || 0)} Views
+            </Text>
+          </View>
+        </View>
+        {/* Tab View */}
+        <View style={styles.tabContainer}>
+          {routes.map((item) => {
+            const isActive =
+              activeTab === routes.find((r) => r.key === item.key)?.key;
+            return (
+              <TouchableOpacity
+                key={item.key}
+                style={[
+                  styles.tab,
+                  {
+                    borderBottomColor: theme.colors.textPrimary,
+                    borderBottomWidth: isActive ? moderateScale(2) : 0,
+                  },
+                ]}
+                onPress={() => {
+                  const tab = routes.find((r) => r.key === item.key)?.key;
+                  tab && setActiveTab(tab as 'synopsis' | 'episodes');
+                }}
+              >
+                <Text
+                  style={[
+                    styles.tabText,
+                    {
+                      color: theme.colors.textPrimary,
+                      opacity: isActive ? 1 : 0.6,
+                    },
+                  ]}
+                >
+                  {item.title}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+        {/* Tab View Content */}
+        <View style={styles.contentContainer}>
+          {activeTab === 'synopsis' && (
+            <Synopsis
+              theme={theme}
+              description={data.description}
+              likeMoreData={data.likeMoreData}
+              onLikeMorePress={onLikeMorePress}
+            />
+          )}
+          {activeTab === 'episodes' && (
+            <Episodes
+              theme={theme}
+              reel={reel}
+              data={data}
+              onEpisodeSelect={(episode) => {
+                onEpisodeSelect?.(episode);
+                onClose?.();
+              }}
+            />
+          )}
+        </View>
+      </LinearGradient>
+    </BottomSheet>
+  );
+};
+
+export default DetailsModal;
+
+const styles = StyleSheet.create({
+  gradientContainer: {
+    flex: 1,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    marginHorizontal: moderateScale(5),
+    marginBottom: verticalScale(10),
+  },
+  titleContainer: {
+    flex: 1,
+  },
+  reelPosterImage: {
+    width: moderateScale(80),
+    aspectRatio: 1 / 1.5,
+    borderRadius: moderateScale(8),
+    marginRight: moderateScale(10),
+  },
+  reelTitleText: {
+    fontSize: RFValue(13),
+    fontWeight: '600',
+    textAlign: 'justify',
+    flexWrap: 'wrap',
+    marginRight: moderateScale(33),
+  },
+  reelDescriptionText: {
+    fontSize: RFValue(10),
+    marginBottom: verticalScale(4),
+    marginTop: verticalScale(3.5),
+  },
+  reelViewsText: {
+    fontSize: RFValue(10),
+    marginTop: verticalScale(2),
+  },
+  tabContainer: {
+    flexDirection: 'row',
+    marginTop: verticalScale(5),
+    marginHorizontal: moderateScale(5),
+    gap: moderateScale(15),
+  },
+  tab: {
+    paddingBottom: verticalScale(6),
+  },
+  tabText: {
+    fontSize: RFValue(11),
+    fontWeight: '700',
+  },
+  contentContainer: {
+    flex: 1,
+    marginTop: verticalScale(8),
+  },
+});

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

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

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