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

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Heart, Forward, ListVideo } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ISeriesEpisode } from '../types';
+
+interface RightControlsProps {
+  episode: ISeriesEpisode;
+  isLiked: boolean;
+  likeCount: number;
+
+  onLike?: (item: ISeriesEpisode) => void;
+  onDetailsPress?: () => void;
+  onShare?: () => void;
+
+  showEpisodesButton?: boolean;
+}
+
+const RightControls: React.FC<RightControlsProps> = ({
+  episode,
+  isLiked,
+  likeCount,
+  onLike,
+  onShare,
+  onDetailsPress,
+  showEpisodesButton = true,
+}) => {
+  return (
+    <View style={styles.container}>
+      {/* ❤️ Like */}
+      <TouchableOpacity
+        style={styles.actionButton}
+        onPress={() => onLike?.(episode)}
+        activeOpacity={0.7}
+      >
+        <Heart
+          size={moderateScale(26)}
+          color={isLiked ? 'red' : '#fff'}
+          fill={isLiked ? 'red' : 'none'}
+        />
+        <Text style={styles.actionLabel}>{likeCount}</Text>
+      </TouchableOpacity>
+
+      {/* 📺 Episodes / Details */}
+      {showEpisodesButton && (
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={onDetailsPress}
+          activeOpacity={0.7}
+        >
+          <ListVideo color={'#fff'} size={moderateScale(26)} />
+          <Text style={styles.actionLabel}>Episodes</Text>
+        </TouchableOpacity>
+      )}
+
+      {/* 📤 Share */}
+      {onShare && (
+        <TouchableOpacity
+          style={styles.actionButton}
+          onPress={onShare}
+          activeOpacity={0.7}
+        >
+          <Forward color={'#fff'} size={moderateScale(26)} />
+          <Text style={styles.actionLabel}>Share</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default RightControls;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: verticalScale(120),
+    right: moderateScale(10),
+    flexDirection: 'column',
+    zIndex: 20,
+  },
+  actionButton: {
+    marginVertical: verticalScale(10),
+    alignItems: 'center',
+  },
+  actionLabel: {
+    marginTop: verticalScale(4),
+    fontSize: RFValue(10),
+    color: '#fff',
+    textAlign: 'center',
+  },
+});

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

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