@zezosoft/zezo-ott-react-native-ui-kit 1.3.5 → 1.3.6

package/src/components/Reels/ReelsSeries/MediaControls/TopControls.tsx

@@ -0,0 +1,168 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { ArrowLeft, Search, Settings } from 'lucide-react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { ITheme } from '../../../../theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text } from '../../../Text';
+
+interface TopControlsProps {
+  theme: ITheme;
+  episodeLabel?: string;
+  onBack?: () => void;
+  onSearch?: () => void;
+  onSettings?: () => void;
+}
+
+type BackBtnProps = {
+  size?: number;
+  color?: string;
+  onPress?: () => void;
+  theme: ITheme;
+  enableBlur?: boolean;
+  label?: string;
+};
+const BackBtn: React.FC<BackBtnProps> = ({
+  size = scale(24),
+  color,
+  onPress,
+  theme,
+  label,
+}) => {
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else {
+      Alert.alert(
+        'Back Action Not Provided',
+        'Please define the back action using onPress prop.'
+      );
+    }
+  };
+  const hasLabel = !!label;
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      style={styles.backButton}
+      onPress={handlePress}
+    >
+      <ArrowLeft size={size} color={color || theme.colors.textPrimary} />
+      {hasLabel && (
+        <Text
+          style={[styles.text, { color: color || theme.colors.textPrimary }]}
+          color={color || theme.colors.textPrimary}
+        >
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const TopControls: React.FC<TopControlsProps> = ({
+  theme,
+  episodeLabel,
+  onBack,
+  onSearch,
+  onSettings,
+}) => {
+  const insets = useSafeAreaInsets();
+  const top = insets.top;
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          top,
+          paddingLeft: scale(16),
+          paddingRight: scale(16),
+        },
+      ]}
+    >
+      {/* Back Button with Episode Number */}
+      <View style={styles.leftContainer}>
+        {onBack && (
+          <BackBtn
+            theme={theme}
+            onPress={onBack}
+            color={theme.colors.white}
+            size={scale(20)}
+            label={episodeLabel}
+          />
+        )}
+      </View>
+
+      {/* Right Side Controls Container */}
+      <View style={styles.rightControlsContainer}>
+        {/* Search Button */}
+        {onSearch && (
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={onSearch}
+            activeOpacity={0.7}
+          >
+            <Search color={theme.colors.white} size={verticalScale(22)} />
+          </TouchableOpacity>
+        )}
+
+        {/* Video Controls Button */}
+        <TouchableOpacity
+          style={styles.iconButton}
+          onPress={onSettings}
+          activeOpacity={0.7}
+        >
+          <Settings color={theme.colors.white} size={verticalScale(22)} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default TopControls;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  leftContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  backButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: scale(4),
+  },
+  rightControlsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  iconButton: {
+    padding: scale(8),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: scale(14),
+    fontWeight: '600',
+    marginLeft: scale(8),
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: { width: 0, height: verticalScale(1) },
+    textShadowRadius: scale(3),
+  },
+});

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

@@ -0,0 +1,207 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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;
+            const tabActiveStyle = {
+              borderBottomColor: theme.colors.textPrimary,
+              borderBottomWidth: isActive ? moderateScale(2) : 0,
+            };
+            const tabTextStyle = {
+              color: theme.colors.textPrimary,
+              opacity: isActive ? 1 : 0.6,
+            };
+            return (
+              <TouchableOpacity
+                key={item.key}
+                style={[styles.tab, tabActiveStyle]}
+                onPress={() => {
+                  const tab = routes.find((r) => r.key === item.key)?.key;
+                  tab && setActiveTab(tab as 'synopsis' | 'episodes');
+                }}
+              >
+                <Text style={[styles.tabText, tabTextStyle]}>{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,151 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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';
+import type { QualityOption } from '../utils/quality';
+
+interface SettingModalProps {
+  theme: ITheme;
+  speed: number;
+  quality: QualityOption;
+  qualities: QualityOption[];
+  qualitiesLoading: boolean;
+
+  onSpeedChange: (speed: number) => void;
+  onQualityChange: (quality: QualityOption) => void;
+  currentQuality?: string;
+
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+const SettingModal: React.FC<SettingModalProps> = ({
+  theme,
+  speed,
+  quality,
+  qualities,
+  qualitiesLoading,
+  onSpeedChange,
+  onQualityChange,
+  currentQuality,
+  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;
+          const tabActiveStyle = isActive
+            ? {
+                borderBottomWidth: 2,
+                borderBottomColor: theme.colors.textPrimary,
+              }
+            : undefined;
+          const tabTextStyle = {
+            color: theme.colors.textPrimary,
+            opacity: isActive ? 1 : 0.5,
+          };
+          return (
+            <TouchableOpacity
+              key={tab}
+              style={[styles.tab, tabActiveStyle]}
+              onPress={() => setActiveTab(tab as 'speed' | 'quality')}
+            >
+              <Text style={[styles.tabText, tabTextStyle]}>
+                {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}
+              theme={theme}
+              qualities={qualities}
+              loading={qualitiesLoading}
+              currentQuality={currentQuality}
+              onQualityChange={(q) => handleSelect(onQualityChange, q)}
+            />
+          </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,159 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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
+  },
+});