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

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

@@ -1,338 +0,0 @@
-/**
- * @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

@@ -1,185 +0,0 @@
-/**
- * @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

@@ -1,77 +0,0 @@
-/**
- * @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

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

@@ -1,78 +0,0 @@
-/**
- * @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;
-}