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

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

@@ -0,0 +1,332 @@
+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;
+      return (
+        <TouchableOpacity
+          style={[
+            styles.card,
+            {
+              width: cardWidth,
+              maxWidth: cardWidth,
+              marginRight: isLastInRow ? 0 : cardSpacing,
+            },
+          ]}
+          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 : null}
+      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,190 @@
+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';
+
+interface QualityControlProps {
+  activeQuality: string;
+  theme: ITheme;
+  onQualityChange: (quality: string) => void;
+  videoUrl?: string;
+}
+
+interface QualityOption {
+  quality: string;
+  url: string;
+}
+
+const DEFAULT_QUALITIES = ['Auto', '1080p', '720p', '480p', '360p'];
+
+/**
+ * Fetches available video qualities from m3u8 playlist.
+ */
+const getVideoQualities = async (m3u8Url: string): Promise<QualityOption[]> => {
+  try {
+    const res = await fetch(m3u8Url);
+    const text = await res.text();
+    const qualities: QualityOption[] = [];
+    const lines = text.split('\n');
+
+    for (let i = 0; i < lines.length; i++) {
+      if (lines?.[i]?.includes('#EXT-X-STREAM-INF')) {
+        const resolutionMatch = lines?.[i]?.match(/RESOLUTION=\\d+x(\\d+)/);
+        const url = lines[i + 1]?.trim();
+        if (resolutionMatch && url) {
+          qualities.push({ quality: `${resolutionMatch[1]}p`, url });
+        }
+      }
+    }
+
+    return qualities;
+  } catch (error) {
+    console.error('Error fetching video qualities:', error);
+    return [];
+  }
+};
+
+const QualityControl: React.FC<QualityControlProps> = ({
+  activeQuality,
+  theme,
+  onQualityChange,
+  videoUrl,
+}) => {
+  const [qualities, setQualities] = useState<string[]>(DEFAULT_QUALITIES);
+  const [loading, setLoading] = useState(false);
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const fetchQualities = async () => {
+      if (!videoUrl || !videoUrl.includes('.m3u8')) {
+        if (isMounted.current) setQualities(DEFAULT_QUALITIES);
+        return;
+      }
+
+      setLoading(true);
+
+      try {
+        const qualityOptions = await getVideoQualities(videoUrl);
+        if (!isMounted.current) return;
+
+        if (qualityOptions.length > 0) {
+          const qualityStrings = [
+            'Auto',
+            ...qualityOptions
+              .map((q) => q.quality)
+              .filter((v, i, self) => self.indexOf(v) === i)
+              .sort((a, b) => parseInt(b, 10) - parseInt(a, 10)),
+          ];
+          setQualities(qualityStrings);
+        } else {
+          setQualities(DEFAULT_QUALITIES);
+        }
+      } catch (err) {
+        console.error('Failed to fetch qualities:', err);
+        if (isMounted.current) setQualities(DEFAULT_QUALITIES);
+      } finally {
+        if (isMounted.current) setLoading(false);
+      }
+    };
+
+    fetchQualities();
+  }, [videoUrl]);
+
+  if (loading) {
+    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}>
+      {qualities.map((quality, index) => {
+        const isSelected = activeQuality === quality;
+
+        return (
+          <TouchableOpacity
+            key={index.toString()}
+            activeOpacity={0.8}
+            style={[
+              styles.optionButton,
+              {
+                backgroundColor: isSelected
+                  ? theme.colors.button
+                  : theme.colors.surfaceDisabled,
+              },
+            ]}
+            onPress={() => onQualityChange(quality)}
+          >
+            <Text
+              style={[
+                styles.optionText,
+                {
+                  color: isSelected
+                    ? theme.colors.buttonText
+                    : theme.colors.textPrimary,
+                  fontWeight: isSelected ? '700' : '400',
+                },
+              ]}
+            >
+              {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,80 @@
+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;
+
+        return (
+          <TouchableOpacity
+            key={index.toString()}
+            activeOpacity={0.8}
+            style={[
+              styles.optionButton,
+              {
+                backgroundColor: isSelected
+                  ? theme.colors.button
+                  : theme.colors.surfaceDisabled,
+              },
+            ]}
+            onPress={() => onSpeedChange(speed)}
+          >
+            <Text
+              style={[
+                styles.optionText,
+                {
+                  color: isSelected
+                    ? theme.colors.buttonText
+                    : theme.colors.textPrimary,
+                  fontWeight: isSelected ? '700' : '400',
+                },
+              ]}
+            >
+              {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,2 @@
+export { default as SpeedControl } from './SpeedControl';
+export { default as QualityControl } from './QualityControl';

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

@@ -1,3 +1,8 @@
+export interface ILikeMoreData {
+  id: string;
+  name: string;
+  thumbnail: string;
+}
 export interface ISeriesEpisode {
   videoUrl: string;
   episodeId: string;
@@ -9,7 +14,6 @@ export interface ISeriesEpisode {
 export interface ISeriesItem {
   id: string;
   title: string;
-
   thumbnail: string;
   description: string;
   episodes: ISeriesEpisode[];
@@ -18,10 +22,17 @@ export interface ISeriesItem {
   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';
+}

package/src/components/Reels/utils/Controls/gestureUtils.ts

@@ -0,0 +1,42 @@
+import { useCallback, useMemo } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { GESTURE_MAX_DURATION } from './videoControlsConstants';
+
+/**
+ * Create a tap gesture handler
+ */
+export const useCreateTapGesture = (
+  isInOverlay: (x: number, y: number) => boolean,
+  isLocked: boolean,
+  handleLockedTap: () => void
+) => {
+  return useCallback(
+    (onAction: () => void, numberOfTaps = 1) =>
+      Gesture.Tap()
+        .maxDuration(GESTURE_MAX_DURATION)
+        .numberOfTaps(numberOfTaps)
+        .onStart(({ x, y }) => {
+          if (isInOverlay(x, y)) return;
+          if (isLocked) {
+            handleLockedTap();
+            return;
+          }
+          onAction();
+        })
+        .runOnJS(true),
+    [isInOverlay, isLocked, handleLockedTap]
+  );
+};
+
+/**
+ * Create combined gesture (single tap and double tap)
+ */
+export const useCombinedGesture = (
+  singleTap: ReturnType<typeof Gesture.Tap>,
+  doubleTap: ReturnType<typeof Gesture.Tap>
+) => {
+  return useMemo(
+    () => Gesture.Exclusive(doubleTap, singleTap),
+    [doubleTap, singleTap]
+  );
+};

package/src/components/Reels/utils/Controls/index.ts

@@ -0,0 +1,4 @@
+export * from './videoRef';
+export * from './videoControlsConstants';
+export * from './overlayUtils';
+export * from './gestureUtils';