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

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

@@ -0,0 +1,338 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useState } from 'react';
+import {
+  Text,
+  View,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  Dimensions,
+  TouchableWithoutFeedback,
+  FlatList,
+} from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
+import type { ITheme } from '../../../../theme';
+import type { ILikeMoreData } from '../types';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+interface SynopsisProps {
+  theme: ITheme;
+  description: string;
+  likeMoreData?: ILikeMoreData[];
+  onLikeMorePress?: (item: ILikeMoreData) => void;
+}
+
+const MAX_LINES = 5;
+
+const Synopsis: React.FC<SynopsisProps> = ({
+  theme,
+  description,
+  likeMoreData = [],
+  onLikeMorePress,
+}) => {
+  const [showMore, setShowMore] = useState(false);
+
+  const numColumns = SCREEN_WIDTH >= 420 ? 4 : 3;
+  const cardSpacing = scale(3);
+  const containerPadding = moderateScale(5);
+
+  // Calculate if description needs "Show More" button
+  // Approximate: ~50-60 characters per line for fontSize 11, lineHeight 16
+  const charsPerLine = 55;
+  const estimatedLines = description
+    ? Math.ceil(description.length / charsPerLine)
+    : 0;
+  const shouldShowButton = description && estimatedLines > MAX_LINES;
+
+  // Calculate card width for grid - ensure no overflow
+  const totalSpacing = cardSpacing * (numColumns - 1);
+  const totalPadding = containerPadding * 7;
+  const availableWidth = SCREEN_WIDTH - totalPadding - totalSpacing;
+  const cardWidth = Math.floor(availableWidth / numColumns);
+
+  const keyExtractor = useCallback(
+    (item: ILikeMoreData) => item.id.toString(),
+    []
+  );
+
+  const toggleShowMore = useCallback(() => {
+    setShowMore((prev) => !prev);
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: ILikeMoreData; index: number }) => {
+      const isLastInRow = (index + 1) % numColumns === 0;
+      const dynamicCardStyle = {
+        width: cardWidth,
+        maxWidth: cardWidth,
+        marginRight: isLastInRow ? 0 : cardSpacing,
+      };
+
+      return (
+        <TouchableOpacity
+          style={[styles.card, dynamicCardStyle]}
+          activeOpacity={0.8}
+          onPress={() => onLikeMorePress?.(item)}
+        >
+          <View style={styles.imageContainer}>
+            <Image
+              source={{
+                uri: item?.thumbnail || '',
+              }}
+              style={[
+                styles.thumbnail,
+                { backgroundColor: theme.colors.surfaceDisabled },
+              ]}
+              resizeMode="cover"
+            />
+          </View>
+          <Text
+            style={[styles.title, { color: theme.colors.textPrimary }]}
+            numberOfLines={2}
+            ellipsizeMode="tail"
+          >
+            {item.name || 'Untitled'}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [
+      theme.colors.textPrimary,
+      theme.colors.surfaceDisabled,
+      onLikeMorePress,
+      cardWidth,
+      cardSpacing,
+      numColumns,
+    ]
+  );
+
+  const renderListHeader = useCallback(
+    () => (
+      <TouchableWithoutFeedback>
+        <View style={styles.headerContainer}>
+          {/* Description */}
+          <View style={styles.descriptionContainer}>
+            <Text
+              style={[styles.description, { color: theme.colors.textPrimary }]}
+              numberOfLines={showMore ? undefined : MAX_LINES}
+            >
+              {description ||
+                'No synopsis available for this reel. Please check back later.'}
+            </Text>
+
+            {/* Show More / Show Less button */}
+            {description && shouldShowButton && (
+              <TouchableOpacity
+                activeOpacity={0.7}
+                onPress={toggleShowMore}
+                style={styles.showMoreButton}
+              >
+                <Text
+                  style={[styles.showMoreText, { color: theme.colors.primary }]}
+                >
+                  {showMore ? 'Show Less ▲' : 'Show More ▼'}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+
+          {/* Header - Only show if there's data */}
+          {likeMoreData.length > 0 && (
+            <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={theme.colors.textPrimary} />
+                  </LinearGradient>
+                </Defs>
+              </Svg>
+
+              <Text
+                style={[styles.headerText, { color: theme.colors.textPrimary }]}
+              >
+                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={theme.colors.textPrimary} />
+                  </LinearGradient>
+                </Defs>
+              </Svg>
+            </View>
+          )}
+        </View>
+      </TouchableWithoutFeedback>
+    ),
+    [
+      description,
+      likeMoreData.length,
+      showMore,
+      shouldShowButton,
+      toggleShowMore,
+      theme.colors.textPrimary,
+      theme.colors.primary,
+    ]
+  );
+
+  const renderListEmpty = useCallback(
+    () => (
+      <Text
+        style={[styles.noEpisodesText, { color: theme.colors.textSecondary }]}
+      >
+        No recommendations available.
+      </Text>
+    ),
+    [theme.colors.textSecondary]
+  );
+
+  return (
+    <FlatList
+      data={likeMoreData}
+      keyExtractor={keyExtractor}
+      renderItem={renderItem}
+      ListHeaderComponent={renderListHeader}
+      ListEmptyComponent={
+        likeMoreData.length === 0 ? renderListEmpty : undefined
+      }
+      numColumns={numColumns}
+      showsVerticalScrollIndicator={false}
+      scrollEnabled={true}
+      contentContainerStyle={[
+        styles.contentContainer,
+        {
+          paddingHorizontal: containerPadding,
+        },
+        likeMoreData.length === 0 && styles.contentContainerEmpty,
+      ]}
+      style={[styles.flatList]}
+      removeClippedSubviews={false}
+      nestedScrollEnabled={true}
+      bounces={false}
+      initialNumToRender={numColumns * 2}
+      maxToRenderPerBatch={numColumns * 2}
+      disableVirtualization={false}
+    />
+  );
+};
+
+export default Synopsis;
+
+const styles = StyleSheet.create({
+  flatList: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  headerContainer: {
+    paddingBottom: verticalScale(8),
+    overflow: 'hidden',
+    width: '100%',
+    alignItems: 'center',
+  },
+  descriptionContainer: {
+    overflow: 'hidden',
+  },
+  description: {
+    fontSize: RFValue(11),
+    lineHeight: RFValue(16),
+    marginBottom: verticalScale(6),
+    letterSpacing: 0.2,
+    opacity: 0.8,
+    flexWrap: 'wrap',
+  },
+  showMoreButton: {
+    alignSelf: 'flex-start',
+    marginBottom: verticalScale(10),
+  },
+  showMoreText: {
+    fontSize: RFValue(10),
+    fontWeight: '500',
+    letterSpacing: 0.3,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: verticalScale(5),
+    marginTop: verticalScale(8),
+    width: '100%',
+    alignSelf: 'center',
+  },
+  headerText: {
+    fontSize: RFValue(12),
+    fontWeight: '600',
+    textAlign: 'center',
+    marginHorizontal: scale(10),
+    letterSpacing: 0.5,
+  },
+  contentContainer: {
+    paddingBottom: verticalScale(30),
+    paddingTop: verticalScale(4),
+  },
+  contentContainerEmpty: {
+    paddingBottom: verticalScale(30),
+  },
+  card: {
+    borderRadius: moderateScale(10),
+    overflow: 'hidden',
+    marginBottom: verticalScale(10),
+  },
+  imageContainer: {
+    width: '100%',
+    overflow: 'hidden',
+  },
+  thumbnail: {
+    width: '100%',
+    aspectRatio: 1 / 1.5,
+    borderRadius: moderateScale(5),
+  },
+  title: {
+    fontSize: RFValue(10),
+    fontWeight: '500',
+    lineHeight: RFValue(14),
+    marginTop: verticalScale(1.5),
+    letterSpacing: 0.1,
+    flexShrink: 1,
+  },
+  noEpisodesText: {
+    fontSize: RFValue(12),
+    textAlign: 'center',
+    marginTop: verticalScale(16),
+    marginBottom: verticalScale(8),
+    paddingVertical: verticalScale(20),
+  },
+});

package/src/components/Reels/ReelsSeries/components/VideoControls/QualityControl.tsx

@@ -0,0 +1,185 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+} from 'react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ITheme } from '../../../../../theme';
+import {
+  DEFAULT_QUALITIES,
+  getVideoQualities,
+  type QualityOption,
+} from '../../utils/quality';
+
+interface QualityControlProps {
+  activeQuality: QualityOption;
+  theme: ITheme;
+  onQualityChange: (quality: QualityOption) => void;
+  videoUrl?: string;
+  qualities?: QualityOption[];
+  currentQuality?: string;
+
+  loading?: boolean;
+}
+
+const QualityControl: React.FC<QualityControlProps> = ({
+  activeQuality,
+  theme,
+  onQualityChange,
+  videoUrl,
+  qualities: externalQualities,
+  loading: externalLoading,
+  currentQuality,
+}) => {
+  const isControlled = typeof externalQualities !== 'undefined';
+  const [qualities, setQualities] = useState<QualityOption[]>(
+    externalQualities ?? (DEFAULT_QUALITIES as unknown as QualityOption[])
+  );
+  const [loading, setLoading] = useState(false);
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  // Keep local state in sync when controlled externally
+  useEffect(() => {
+    if (isControlled) {
+      setQualities(
+        externalQualities ?? (DEFAULT_QUALITIES as unknown as QualityOption[])
+      );
+    }
+  }, [externalQualities, isControlled]);
+
+  // Uncontrolled mode – fetch qualities internally based on videoUrl
+  useEffect(() => {
+    if (isControlled) return;
+
+    const fetchQualities = async () => {
+      if (!videoUrl || !videoUrl.includes('.m3u8')) {
+        if (isMounted.current)
+          setQualities(DEFAULT_QUALITIES as unknown as QualityOption[]);
+        return;
+      }
+
+      setLoading(true);
+
+      try {
+        const qualityOptions = await getVideoQualities(videoUrl);
+        if (!isMounted.current) return;
+
+        if (qualityOptions.length > 0) {
+          setQualities(qualityOptions);
+        } else {
+          setQualities(DEFAULT_QUALITIES as unknown as QualityOption[]);
+        }
+      } catch (err) {
+        console.error('Failed to fetch qualities:', err);
+        if (isMounted.current)
+          setQualities(DEFAULT_QUALITIES as unknown as QualityOption[]);
+      } finally {
+        if (isMounted.current) setLoading(false);
+      }
+    };
+
+    fetchQualities();
+  }, [videoUrl, isControlled]);
+
+  const isLoading = isControlled ? Boolean(externalLoading) : loading;
+  const renderedQualities =
+    qualities && qualities.length > 0 ? qualities : DEFAULT_QUALITIES;
+
+  // Show loading indicator if we are fetching and only have the default "Auto" option
+  if (isLoading && renderedQualities.length <= 1) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="small" color={theme.colors.button} />
+        <Text
+          style={[styles.loadingText, { color: theme.colors.textSecondary }]}
+        >
+          Loading qualities...
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {renderedQualities.map((quality, index) => {
+        // Fix: Use label comparison instead of object reference comparison
+        const isSelected = activeQuality?.quality === quality.quality;
+        const optionButtonStyle = {
+          backgroundColor: isSelected
+            ? theme.colors.button
+            : theme.colors.surfaceDisabled,
+        };
+        const optionTextStyle = {
+          color: isSelected
+            ? theme.colors.buttonText
+            : theme.colors.textPrimary,
+          fontWeight: isSelected ? ('700' as const) : ('400' as const),
+        };
+
+        return (
+          <TouchableOpacity
+            key={index.toString()}
+            activeOpacity={0.8}
+            style={[styles.optionButton, optionButtonStyle]}
+            onPress={() => onQualityChange(quality)}
+          >
+            <Text style={[styles.optionText, optionTextStyle]}>
+              {quality.quality === 'Auto' && currentQuality
+                ? `Auto (${currentQuality})`
+                : quality.quality}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+export default React.memo(QualityControl);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: moderateScale(10),
+  },
+  optionButton: {
+    width: '30%',
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: moderateScale(16),
+    borderRadius: moderateScale(8),
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: verticalScale(12),
+  },
+  optionText: {
+    fontSize: RFValue(14),
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: verticalScale(40),
+  },
+  loadingText: {
+    marginTop: verticalScale(12),
+    fontSize: RFValue(12),
+  },
+});

package/src/components/Reels/ReelsSeries/components/VideoControls/SpeedControl.tsx

@@ -0,0 +1,77 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ITheme } from '../../../../../theme';
+
+interface SpeedControlProps {
+  activeSpeed: number;
+  theme: ITheme;
+  onSpeedChange: (speed: number) => void;
+}
+
+const SPEED_OPTIONS = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
+
+const SpeedControl: React.FC<SpeedControlProps> = ({
+  activeSpeed,
+  theme,
+  onSpeedChange,
+}) => {
+  return (
+    <View style={styles.container}>
+      {SPEED_OPTIONS.map((speed, index) => {
+        const isSelected = activeSpeed === speed;
+        const optionButtonStyle = {
+          backgroundColor: isSelected
+            ? theme.colors.button
+            : theme.colors.surfaceDisabled,
+        };
+        const optionTextStyle = {
+          color: isSelected
+            ? theme.colors.buttonText
+            : theme.colors.textPrimary,
+          fontWeight: isSelected ? ('700' as const) : ('400' as const),
+        };
+
+        return (
+          <TouchableOpacity
+            key={index.toString()}
+            activeOpacity={0.8}
+            style={[styles.optionButton, optionButtonStyle]}
+            onPress={() => onSpeedChange(speed)}
+          >
+            <Text style={[styles.optionText, optionTextStyle]}>{speed}x</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+export default React.memo(SpeedControl);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    marginHorizontal: moderateScale(4), // instead of gap
+  },
+  optionButton: {
+    width: '30%',
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: moderateScale(16),
+    borderRadius: moderateScale(8),
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: verticalScale(12), // spacing instead of gap
+  },
+  optionText: {
+    fontSize: RFValue(14),
+  },
+});

package/src/components/Reels/ReelsSeries/components/VideoControls/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export { default as SpeedControl } from './SpeedControl';
+export { default as QualityControl } from './QualityControl';

package/src/components/Reels/ReelsSeries/types.ts

@@ -0,0 +1,78 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type { OnProgressData } from 'react-native-video';
+
+export interface ILikeMoreData {
+  id: string;
+  name: string;
+  thumbnail: string;
+}
+export interface ISeriesEpisode {
+  videoUrl: string;
+  episodeId: string;
+  episodeName: string;
+  episodeNumber: number;
+  duration: string;
+  isLocked: boolean;
+}
+
+export interface ISeriesItem {
+  id: string;
+  title: string;
+  thumbnail: string;
+  description: string;
+  episodes: ISeriesEpisode[];
+  likes: number;
+  views: number;
+  createdAt: string;
+  shares: number;
+  isLiked: boolean;
+  likeMoreData?: ILikeMoreData[];
+}
+export interface IReelsData {
+  data: ISeriesItem[];
+}
+// For like state
+export interface LikedState {
+  liked: boolean;
+  count: number;
+}
+export interface ModalState {
+  isVisible: boolean;
+  type: 'none' | 'details' | 'settings';
+}
+
+export interface IReelsWatchProgress {
+  series: ISeriesItem;
+  episode: ISeriesEpisode;
+  currentTime: number;
+  duration: number;
+  /**
+   * Whether the current episode has been watched till (almost) the end.
+   */
+  isVideoCompleted: boolean;
+  /**
+   * Total time (in seconds) this episode has been watched.
+   * For short reels this generally matches `currentTime`.
+   */
+  totalWatchTime: number;
+  /**
+   * The currently playing video quality (e.g., "720p").
+   */
+  currentQuality?: string;
+}
+export interface OnVideoProgressCurrentTrack {
+  seriesId: string;
+  seriesTitle: string;
+  episodeId: string;
+  episodeNumber: number;
+  episodeName: string;
+  videoDuration: number;
+}
+
+export interface OnVideoProgress extends OnProgressData {
+  currentTrack: OnVideoProgressCurrentTrack | null;
+}