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

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

@@ -0,0 +1,90 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React from 'react';
+import type { IReelsWatchProgress } from './types';
+
+type UseReelsWatchProgressParams = {
+  /**
+   * Whether the parent screen is currently focused/visible.
+   * When this becomes false, the last watch progress will be flushed once.
+   */
+  isFocused: boolean;
+  /**
+   * Callback invoked whenever an episode's watch progress should be
+   * "finalized" – e.g. when the user switches episodes, leaves the screen
+   * or the component unmounts.
+   */
+  onFlush: (progress: IReelsWatchProgress) => void;
+};
+
+type UseReelsWatchProgressResult = {
+  /**
+   * Pass this directly to `ReelsSeries` / `ReelsSeriesItem` as
+   * the `onWatchProgress` handler.
+   */
+  handleWatchProgress: (progress: IReelsWatchProgress) => void;
+};
+
+/**
+ * Reusable hook that tracks the last watched episode progress and ensures
+ * it is flushed exactly once when:
+ * - The user switches to a different episode
+ * - The parent screen loses focus
+ * - The parent component unmounts
+ *
+ * This hook is intentionally UI-kit only and delegates side‑effects
+ * (API calls, analytics, etc.) to the provided `onFlush` callback.
+ */
+export const useReelsWatchProgress = ({
+  isFocused,
+  onFlush,
+}: UseReelsWatchProgressParams): UseReelsWatchProgressResult => {
+  const lastProgressRef = React.useRef<IReelsWatchProgress | null>(null);
+  const flushProgressRef = React.useRef(onFlush);
+
+  // Always keep the latest flush callback
+  React.useEffect(() => {
+    flushProgressRef.current = onFlush;
+  }, [onFlush]);
+
+  const handleWatchProgress = React.useCallback(
+    (progress: IReelsWatchProgress) => {
+      const previous = lastProgressRef.current;
+
+      // If user changed episode, flush previous episode's progress once
+      if (
+        previous &&
+        previous.episode.episodeId !== progress.episode.episodeId
+      ) {
+        flushProgressRef.current(previous);
+      }
+
+      // Always store the latest progress for the current episode
+      lastProgressRef.current = progress;
+    },
+    []
+  );
+
+  // When screen loses focus (user navigates away), flush last progress once
+  React.useEffect(() => {
+    if (!isFocused && lastProgressRef.current) {
+      flushProgressRef.current(lastProgressRef.current);
+      lastProgressRef.current = null;
+    }
+  }, [isFocused]);
+
+  // On unmount, flush any remaining progress
+  React.useEffect(() => {
+    return () => {
+      if (lastProgressRef.current) {
+        flushProgressRef.current(lastProgressRef.current);
+        lastProgressRef.current = null;
+      }
+    };
+  }, []);
+
+  return { handleWatchProgress };
+};

package/src/components/Reels/ReelsSeries/utils/quality.ts

@@ -0,0 +1,72 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export interface QualityOption {
+  quality: string;
+  url: string;
+}
+
+export const DEFAULT_QUALITIES: QualityOption[] = [
+  {
+    quality: 'Auto',
+    url: '',
+  },
+];
+
+// Simple in-memory cache
+const qualitiesCache: Record<string, QualityOption[]> = {};
+
+export const getVideoQualities = async (
+  m3u8Url: string
+): Promise<QualityOption[]> => {
+  // Return cached result
+  if (qualitiesCache[m3u8Url]) {
+    return qualitiesCache[m3u8Url];
+  }
+
+  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: new URL(url, m3u8Url).toString(), // handle relative URLs
+          });
+        }
+      }
+    }
+
+    const sortedQualities = qualities.sort(
+      (a, b) => parseInt(b.quality, 10) - parseInt(a.quality, 10)
+    );
+
+    // ✅ Add Auto option at the top
+    const finalQualities: QualityOption[] = [
+      {
+        quality: 'Auto',
+        url: m3u8Url, // master playlist
+      },
+      ...sortedQualities,
+    ];
+
+    qualitiesCache[m3u8Url] = finalQualities;
+    return finalQualities;
+  } catch {
+    return [
+      {
+        quality: 'Auto',
+        url: m3u8Url,
+      },
+    ];
+  }
+};

package/src/components/Reels/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { ReelsSeries } from './ReelsSeries/ReelsSeries';
+export * from './ReelsSeries/types';
+export { ReelsSeries };
+export * from './ReelsSeries/useReelsWatchProgress';

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

@@ -0,0 +1,46 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import {
+  useTapGesture,
+  useExclusiveGestures,
+  type TapGesture,
+} from 'react-native-gesture-handler';
+import { GESTURE_MAX_DURATION } from './videoControlsConstants';
+
+/**
+ * Create a tap gesture handler using the new hook-based API
+ */
+export const useCreateTapGesture = (
+  onAction: () => void,
+  numberOfTaps: number,
+  isInOverlay: (x: number, y: number) => boolean,
+  isLocked: boolean,
+  handleLockedTap: () => void
+) => {
+  return useTapGesture({
+    maxDuration: GESTURE_MAX_DURATION,
+    numberOfTaps,
+    runOnJS: true,
+    onActivate: ({ x, y }) => {
+      if (isInOverlay(x, y)) return;
+      if (isLocked) {
+        handleLockedTap();
+        return;
+      }
+      onAction();
+    },
+  });
+};
+
+/**
+ * Create combined gesture (single tap and double tap) using the new hook-based API
+ */
+export const useCombinedGesture = (
+  singleTap: TapGesture,
+  doubleTap: TapGesture
+) => {
+  return useExclusiveGestures(doubleTap, singleTap);
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './videoRef';
+export * from './videoControlsConstants';
+export * from './overlayUtils';
+export * from './gestureUtils';

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

@@ -0,0 +1,40 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { useMemo, useCallback } from 'react';
+import { Dimensions } from 'react-native';
+import {
+  OVERLAY_RIGHT_OFFSET,
+  OVERLAY_BOTTOM_OFFSET,
+} from './videoControlsConstants';
+
+const { width } = Dimensions.get('window');
+
+/**
+ * Calculate overlay thresholds
+ */
+export const useOverlayThresholds = (videoHeight: number) => {
+  const rightThreshold = useMemo(() => width - OVERLAY_RIGHT_OFFSET, []);
+
+  const bottomThreshold = useMemo(
+    () => videoHeight - OVERLAY_BOTTOM_OFFSET,
+    [videoHeight]
+  );
+
+  return { rightThreshold, bottomThreshold };
+};
+
+/**
+ * Check if coordinates are in overlay area
+ */
+export const useIsInOverlay = (
+  rightThreshold: number,
+  bottomThreshold: number
+) => {
+  return useCallback(
+    (x: number, y: number) => x > rightThreshold || y > bottomThreshold,
+    [rightThreshold, bottomThreshold]
+  );
+};

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

@@ -0,0 +1,30 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+/**
+ * Video Controls Constants
+ */
+
+export const GESTURE_MAX_DURATION = 300;
+export const PAUSE_ICON_TIMEOUT = 800;
+export const LIKE_ANIM_TIMEOUT = 1200;
+export const UNLOCK_MODAL_DELAY = 500;
+export const OVERLAY_RIGHT_OFFSET = 80;
+export const OVERLAY_BOTTOM_OFFSET = 150;
+
+export const videoControlsStyles = {
+  hideForward: true,
+  hideDuration: true,
+  hideFullscreen: true,
+  hidePlayPause: true,
+  hideNavigationBarOnFullScreenMode: true,
+  hideNotificationBarOnFullScreenMode: true,
+  hideNext: true,
+  hidePosition: true,
+  hidePrevious: true,
+  hideRewind: true,
+  hideSeekBar: true,
+  hideSettingButton: true,
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { createRef } from 'react';
+import type { VideoRef } from 'react-native-video';
+
+export const videoRef = createRef<VideoRef>();

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

@@ -0,0 +1,6 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './timeoutUtils';

package/src/components/Reels/utils/timeoutUtils.ts

@@ -0,0 +1,34 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { type MutableRefObject } from 'react';
+
+/**
+ * Safely clears a timeout stored in a ref
+ * @param ref - React ref containing the timeout
+ */
+export const clearTimeoutSafely = (
+  ref: MutableRefObject<NodeJS.Timeout | null>
+): void => {
+  if (ref.current) {
+    clearTimeout(ref.current);
+    ref.current = null;
+  }
+};
+
+/**
+ * Safely sets a timeout and stores it in a ref, clearing any existing timeout first
+ * @param ref - React ref to store the timeout
+ * @param callback - Function to execute after delay
+ * @param delay - Delay in milliseconds
+ */
+export const setTimeoutSafely = (
+  ref: MutableRefObject<NodeJS.Timeout | null>,
+  callback: () => void,
+  delay: number
+): void => {
+  clearTimeoutSafely(ref);
+  ref.current = setTimeout(callback, delay);
+};

package/src/components/Search/One.tsx

@@ -0,0 +1,262 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useCallback, useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  FlatList,
+  Keyboard,
+  type ListRenderItem,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import InputTwo from '../Input/InputTwo';
+import { LucideSearch, XCircle } from 'lucide-react-native';
+import { Text } from '../Text';
+import { scale, verticalScale } from 'react-native-size-matters';
+import HideKeyboard from '../Keyboard/HideKeyboard';
+import SearchCard, {
+  type SearchCardSkeletonConfig,
+} from './components/SearchCard';
+import { useDebounce } from '../../hooks/useDebounce';
+import { useSkeletonItems } from '../../hooks/useSkeletonItems';
+import type { IGetSectionData, ISectionItem, MoreFetchData } from '../../types';
+import type { ThemeOverride } from '../../theme/themes';
+import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
+import RecentSearchesSection from './components/RecentSearchesSection';
+import Cards from '../Content/Card';
+import type { RecommendedCardStyles } from '../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+// Types
+export type ISearchItem = IContentData;
+export type SearchOneFormValues = { keyword: string };
+
+export type SearchOneProps = {
+  placeholder?: string;
+  results?: ISearchItem[];
+  search: string;
+  isLoading?: boolean;
+  events?: {
+    onSubmit: (values: SearchOneFormValues) => void;
+    onClear?: () => void;
+    onChangeText?: (text: string) => void;
+    onItemPress?: (args: { item: IContentData }) => void;
+    onPressRecommendedItem?: (args: { item: IContentData }) => void;
+    onPressRecommendedMore?: (args: {
+      section_id: IGetSectionData['_id'];
+      name: IGetSectionData['name'];
+      type: IGetSectionData['type'];
+    }) => void;
+    moreFetchDataRecommended?: MoreFetchData<IContentData>;
+  };
+  pillMaxCount?: number;
+  skeletonCardCount?: number;
+  noResultsText?: string;
+  recommendedContentCardStyles?: RecommendedCardStyles;
+  skeletonConfig?: SearchCardSkeletonConfig;
+  theme?: ThemeOverride;
+  recommendedContent?: ISectionItem | null;
+};
+
+const SearchBar: React.FC<SearchOneProps> = ({
+  placeholder = 'Search',
+  results,
+  search = '',
+  isLoading = false,
+  events,
+  pillMaxCount = 20,
+  skeletonCardCount = 6,
+  skeletonConfig,
+  noResultsText = 'No results found',
+  recommendedContentCardStyles,
+  theme,
+  recommendedContent,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const {
+    recentSearches,
+    addSearchTerm,
+    clearSearches,
+    isLoading: recentSearchesLoading,
+  } = useRecentSearchesStore();
+
+  const {
+    colors: { textPrimary, background },
+  } = appliedTheme;
+
+  const trimmedSearch = search.trim();
+
+  const debouncedSubmit = useDebounce((keyword: string) => {
+    const trimmed = keyword.trim();
+    if (trimmed) {
+      events?.onSubmit({ keyword: trimmed });
+      addSearchTerm(trimmed, pillMaxCount);
+    }
+  }, 600);
+
+  const handleTyping = useCallback(
+    (text: string) => {
+      events?.onChangeText?.(text);
+      debouncedSubmit(text);
+    },
+    [events, debouncedSubmit]
+  );
+
+  const handleClear = useCallback(() => {
+    events?.onChangeText?.('');
+    events?.onSubmit({ keyword: '' });
+    events?.onClear?.();
+    Keyboard.dismiss();
+  }, [events]);
+
+  const handleItemPress = useCallback(
+    (item: ISearchItem) => {
+      events?.onItemPress?.({ item });
+    },
+    [events]
+  );
+
+  const skeletonItems = useSkeletonItems<ISearchItem>(skeletonCardCount);
+
+  const showRecent =
+    !recentSearchesLoading && trimmedSearch === '' && recentSearches.length > 0;
+
+  const shouldShowFooter = !isLoading && (!results || results.length === 0);
+
+  const renderItem: ListRenderItem<ISearchItem> = ({ item, index }) => (
+    <View style={styles.container} key={item?._id || index}>
+      <SearchCard
+        isLoading={isLoading}
+        title={item?.name}
+        thumbnail={item?.thumbnail || item?.poster || ''}
+        description={item?.description}
+        category={item?.type}
+        theme={theme}
+        contentType={item?.type}
+        onPress={() => !isLoading && handleItemPress(item)}
+        skeletonConfig={skeletonConfig}
+      />
+    </View>
+  );
+
+  const renderFooter = useMemo(() => {
+    if (!shouldShowFooter) return undefined;
+
+    return (
+      <>
+        {showRecent && (
+          <View style={styles.container}>
+            <RecentSearchesSection
+              recentSearches={recentSearches}
+              isLoading={isLoading}
+              onPressItem={handleTyping}
+              onClearAll={clearSearches}
+              theme={appliedTheme}
+            />
+          </View>
+        )}
+
+        {recommendedContent && recommendedContent?.content?.data.length > 0 && (
+          <Cards.Styles.Two
+            section_id={recommendedContent._id}
+            title={recommendedContent.name}
+            titleStyle={styles.recommendedTitle}
+            type={recommendedContent.type}
+            data={recommendedContent.content}
+            isLoading={isLoading}
+            theme={theme}
+            onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
+            onPressMore={events?.onPressRecommendedMore}
+            moreFetchData={events?.moreFetchDataRecommended}
+            {...recommendedContentCardStyles}
+          />
+        )}
+      </>
+    );
+  }, [
+    shouldShowFooter,
+    showRecent,
+    recentSearches,
+    isLoading,
+    handleTyping,
+    clearSearches,
+    appliedTheme,
+    recommendedContent,
+    theme,
+    events,
+    recommendedContentCardStyles,
+  ]);
+
+  const renderEmptyComponent = () =>
+    !isLoading && trimmedSearch.length > 0 && results?.length === 0 ? (
+      <Text style={styles.emptyText} color={textPrimary}>
+        {noResultsText}
+      </Text>
+    ) : undefined;
+
+  return (
+    <View style={[styles.mainContainer, { backgroundColor: background }]}>
+      <View style={styles.container}>
+        <InputTwo
+          theme={theme}
+          value={search}
+          placeholder={placeholder}
+          onChangeText={handleTyping}
+          leftIcon={<LucideSearch size={scale(20)} color="#aaa" />}
+          rightIcon={
+            search.length > 0 ? <XCircle size={24} color={textPrimary} /> : null
+          }
+          onPressRightIcon={handleClear}
+          accessibilityLabel="Search"
+        />
+      </View>
+
+      <HideKeyboard keyboardVerticalOffset={scale(10)}>
+        <FlatList
+          data={isLoading ? skeletonItems : results}
+          keyExtractor={(item, idx) => item?._id || `item-${idx}`}
+          renderItem={renderItem}
+          ListEmptyComponent={renderEmptyComponent()}
+          ListFooterComponent={renderFooter}
+          contentContainerStyle={styles.listContent}
+          showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+          style={styles.list}
+        />
+      </HideKeyboard>
+    </View>
+  );
+};
+
+export default memo(SearchBar);
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    paddingTop: Platform.OS === 'ios' ? scale(18) : scale(12),
+  },
+  container: {
+    paddingHorizontal: scale(16),
+  },
+  recommendedTitle: {
+    fontSize: RFValue(13),
+  },
+  emptyText: {
+    fontSize: RFValue(12),
+    textAlign: 'center',
+    marginTop: verticalScale(20),
+  },
+  list: {
+    flex: 1,
+    marginTop: scale(2),
+  },
+  listContent: {
+    paddingBottom: verticalScale(80),
+    paddingTop: scale(12),
+  },
+});