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

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

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

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

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

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

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

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

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

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

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

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

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

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