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

package/src/components/Reels/ReelsSeries/Model/SettingModal.tsx

@@ -11,7 +11,8 @@ interface SettingModalProps {
   theme: ITheme;
   speed: number;
   quality: string;
-  videoUrl?: string;
+  qualities: string[];
+  qualitiesLoading: boolean;
 
   onSpeedChange: (speed: number) => void;
   onQualityChange: (quality: string) => void;
@@ -24,7 +25,8 @@ const SettingModal: React.FC<SettingModalProps> = ({
   theme,
   speed,
   quality,
-  videoUrl,
+  qualities,
+  qualitiesLoading,
   onSpeedChange,
   onQualityChange,
   isVisible,
@@ -102,8 +104,9 @@ const SettingModal: React.FC<SettingModalProps> = ({
           >
             <QualityControl
               activeQuality={quality}
-              videoUrl={videoUrl}
               theme={theme}
+              qualities={qualities}
+              loading={qualitiesLoading}
               onQualityChange={(value) => handleSelect(onQualityChange, value)}
             />
           </Animated.View>

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

@@ -1,30 +1,26 @@
 import React, { useState, useCallback, useRef, useMemo } from 'react';
 import {
   FlatList,
-  Dimensions,
   StyleSheet,
-  type ViewToken,
-  Platform,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
 } from 'react-native';
-import { debounce } from 'lodash';
-import ReelsSeriesItem from './ReelsSeriesItem';
-import { verticalScale } from 'react-native-size-matters';
-import type { IReelsData, ISeriesEpisode } from './types';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import ReelsSeriesItem from './ReelsSeriesItem';
+import type { IReelsData, ISeriesEpisode, IReelsWatchProgress } from './types';
 import { useInternalTheme } from '../../../theme/hook';
 import type { ThemeOverride } from '../../../theme';
 import { View } from '../../View';
-
-const { height } = Dimensions.get('window');
-const PRELOAD_RANGE = 3;
-const VIEWABILITY_THRESHOLD = 80;
-const DEBOUNCE_DELAY = 100;
+import Display from '../../../utils/Display';
+import { AppStatusBar } from '../../common/AppStatusBar';
+const { fullHeight: height } = Display;
+const PRELOAD_RANGE = 1;
 
 type ReelsProps = {
   data: IReelsData['data'];
   autoScroll?: boolean;
   onEndReached?: () => void;
-  onLikePress?: (id: string, liked: boolean) => void;
+  onLikePress?: (data: { id: string; liked: boolean }) => void;
   onEpisodesPress?: (id: string) => void;
   onSharePress?: (id: string) => void;
   onSearchPress?: () => void;
@@ -34,6 +30,8 @@ type ReelsProps = {
   isFullScreen?: boolean;
   theme?: ThemeOverride;
   onEpisodeUnlockPress?: (episode: ISeriesEpisode) => void;
+  onViewCount?: (data: { id: string }) => void;
+  onWatchProgress?: (data: IReelsWatchProgress) => void;
 };
 
 export const ReelsSeries: React.FC<ReelsProps> = ({
@@ -46,30 +44,33 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
   onSearchPress,
   onBackPress,
   isFocused = true,
-  tabBarHeight,
+  tabBarHeight: _tabBarHeight, // kept for backward compatibility, not used in height calc
   isFullScreen = false,
   theme: overrideTheme,
   onEpisodeUnlockPress,
+  onViewCount,
+  onWatchProgress,
 }) => {
   const { theme } = useInternalTheme(overrideTheme);
-  const insets = useSafeAreaInsets();
   const [currentVisibleIndex, setCurrentVisibleIndex] = useState<number>(0);
+  const [layoutHeight, setLayoutHeight] = useState<number>(height);
   const listRef =
     useRef<FlatList<ISeriesEpisode & { seriesIndex: number }>>(null);
+  const insets = useSafeAreaInsets();
 
   // Computed values
-  const calculatedTabBarHeight = useMemo(
-    () =>
-      tabBarHeight ??
-      insets.bottom + verticalScale(Platform.OS === 'android' ? 45 : 30),
-    [tabBarHeight, insets.bottom]
-  );
+  // Match container layout height when available, otherwise fall back to full
+  // window height. In full-screen, subtract bottom inset so content isn't
+  // hidden behind system UI.
+  const ITEM_HEIGHT = useMemo(() => {
+    const baseHeight = layoutHeight ?? height;
+    if (!isFullScreen) {
+      return baseHeight;
+    }
 
-  const SCREEN_HEIGHT = useMemo(
-    () =>
-      isFullScreen ? height - insets.bottom : height - calculatedTabBarHeight,
-    [isFullScreen, insets.bottom, calculatedTabBarHeight]
-  );
+    const bottomInset = insets.bottom ?? 0;
+    return Math.max(0, baseHeight - bottomInset);
+  }, [layoutHeight, isFullScreen, insets.bottom]);
 
   const backgroundColor = useMemo(
     () => (isFullScreen ? theme.colors.black : theme.colors.background),
@@ -107,6 +108,15 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
     [flattenedEpisodes]
   );
 
+  const handleAutoScrollNext = useCallback(() => {
+    const nextIndex = currentVisibleIndex + 1;
+    if (nextIndex >= flattenedEpisodes.length) {
+      return;
+    }
+    listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+    setCurrentVisibleIndex(nextIndex);
+  }, [currentVisibleIndex, flattenedEpisodes.length]);
+
   const renderReelList = useCallback(
     ({
       item,
@@ -127,7 +137,7 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
         <ReelsSeriesItem
           reel={episode}
           data={seriesData}
-          videoHeight={SCREEN_HEIGHT}
+          videoHeight={ITEM_HEIGHT}
           onLikePress={onLikePress}
           onEpisodesPress={() => onEpisodesPress?.(item.episodeId)}
           onSharePress={() => onSharePress?.(item.episodeId)}
@@ -135,11 +145,15 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
           activeEpisodeIndex={currentVisibleIndex}
           preload={preload}
           onEpisodeSelect={handlePlayEpisode}
+          onAutoScrollNext={handleAutoScrollNext}
+          isFullScreen={isFullScreen}
           autoScroll={autoScroll}
           theme={theme}
           onBackPress={onBackPress}
           onSearchPress={onSearchPress}
           onEpisodeUnlockPress={onEpisodeUnlockPress}
+          onViewCount={onViewCount}
+          onWatchProgress={onWatchProgress}
         />
       );
     },
@@ -147,9 +161,10 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
       data,
       currentVisibleIndex,
       isFocused,
-      SCREEN_HEIGHT,
+      ITEM_HEIGHT,
       onLikePress,
       handlePlayEpisode,
+      isFullScreen,
       autoScroll,
       theme,
       onBackPress,
@@ -157,41 +172,58 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
       onEpisodeUnlockPress,
       onEpisodesPress,
       onSharePress,
+      onViewCount,
+      onWatchProgress,
+      handleAutoScrollNext,
     ]
   );
 
-  // Viewability configuration
-  const viewabilityConfig = useRef({
-    itemVisiblePercentThreshold: VIEWABILITY_THRESHOLD,
-  }).current;
+  const getItemLayout = useCallback(
+    (_: unknown, index: number) => {
+      const itemHeight = ITEM_HEIGHT;
+      return {
+        length: itemHeight,
+        offset: itemHeight * index,
+        index,
+      };
+    },
+    [ITEM_HEIGHT]
+  );
+
+  const handleMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const itemHeight = ITEM_HEIGHT || 1;
+      const offsetY = event.nativeEvent.contentOffset.y;
+      const index = Math.round(offsetY / itemHeight);
 
-  const onViewableItemsChanged = useRef(
-    debounce(({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
-      const visibleIndex = viewableItems[0]?.index;
       if (
-        visibleIndex !== undefined &&
-        visibleIndex !== null &&
-        visibleIndex >= 0
+        index !== currentVisibleIndex &&
+        index >= 0 &&
+        index < flattenedEpisodes.length
       ) {
-        setCurrentVisibleIndex(visibleIndex);
+        setCurrentVisibleIndex(index);
       }
-    }, DEBOUNCE_DELAY)
-  ).current;
-
-  const getItemLayout = useCallback(
-    (_: unknown, index: number) => ({
-      length: SCREEN_HEIGHT,
-      offset: SCREEN_HEIGHT * index,
-      index,
-    }),
-    [SCREEN_HEIGHT]
+    },
+    [ITEM_HEIGHT, currentVisibleIndex, flattenedEpisodes.length]
   );
 
   return (
     <View style={styles.mainContainer} backgroundColor={backgroundColor}>
+      <AppStatusBar theme={overrideTheme} transparent />
       <View
-        style={[styles.container, { height: SCREEN_HEIGHT }]}
+        style={[
+          styles.container,
+          isFullScreen && insets.bottom
+            ? { paddingBottom: insets.bottom }
+            : null,
+        ]}
         backgroundColor={backgroundColor}
+        onLayout={(event) => {
+          const h = event.nativeEvent.layout.height;
+          if (h && h > 0 && h !== layoutHeight) {
+            setLayoutHeight(h);
+          }
+        }}
       >
         <FlatList
           ref={listRef}
@@ -200,17 +232,17 @@ export const ReelsSeries: React.FC<ReelsProps> = ({
           renderItem={renderReelList}
           onEndReached={onEndReached}
           pagingEnabled
-          viewabilityConfig={viewabilityConfig}
           disableIntervalMomentum
           removeClippedSubviews
+          windowSize={5}
           maxToRenderPerBatch={2}
-          onViewableItemsChanged={onViewableItemsChanged}
-          initialNumToRender={1}
+          initialNumToRender={2}
           onEndReachedThreshold={0.1}
           decelerationRate="fast"
           showsVerticalScrollIndicator={false}
-          scrollEventThrottle={16}
-          snapToInterval={SCREEN_HEIGHT}
+          scrollEventThrottle={32}
+          onMomentumScrollEnd={handleMomentumScrollEnd}
+          snapToInterval={ITEM_HEIGHT}
           snapToAlignment="start"
           getItemLayout={getItemLayout}
         />
@@ -226,6 +258,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   container: {
+    flex: 1,
     overflow: 'hidden',
   },
 });

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

@@ -34,29 +34,36 @@ import {
 import { clearTimeoutSafely, setTimeoutSafely } from '../utils';
 import MediaControlsProvider from './MediaControls/MediaControlsProvider';
 import FastImage from 'react-native-fast-image';
+import type { IReelsWatchProgress } from './types';
 
 const INITIAL_MODAL_STATE: ModalState = {
   type: 'none',
   isVisible: false,
 };
 
+const MIN_VIEW_DURATION_SEC = 5;
+
 interface IReelItemProps {
   reel: ISeriesEpisode;
   data: ISeriesItem;
   autoScroll?: boolean;
   videoHeight: number;
-  onLikePress?: (id: string, liked: boolean) => void;
+  onLikePress?: (data: { id: string; liked: boolean }) => void;
   onEpisodesPress?: () => void;
   onSharePress?: () => void;
   isVisible: boolean;
   preload: boolean;
   activeEpisodeIndex: number;
+  isFullScreen: boolean;
   onEpisodeSelect: (episode: ISeriesEpisode) => void;
   theme: ITheme;
   onBackPress?: () => void;
   onSearchPress?: () => void;
   onLikeMorePress?: (item: ILikeMoreData) => void;
   onEpisodeUnlockPress?: (episode: ISeriesEpisode) => void;
+  onViewCount?: (data: { id: string }) => void;
+  onWatchProgress?: (data: IReelsWatchProgress) => void;
+  onAutoScrollNext?: () => void;
 }
 
 const ReelItem: React.FC<IReelItemProps> = ({
@@ -68,13 +75,17 @@ const ReelItem: React.FC<IReelItemProps> = ({
   onSharePress,
   onBackPress,
   isVisible,
+  isFullScreen,
   preload,
   activeEpisodeIndex,
   onEpisodeSelect,
   onSearchPress,
   onLikeMorePress,
   onEpisodeUnlockPress,
+  onViewCount,
   theme,
+  onWatchProgress,
+  onAutoScrollNext,
 }) => {
   // State
   const [buffering, setBuffering] = useState(true);
@@ -88,13 +99,15 @@ const ReelItem: React.FC<IReelItemProps> = ({
   const [duration, setDuration] = useState(0);
   const [playbackRate, setPlaybackRate] = useState(1);
   const [videoQuality, setVideoQuality] = useState('Auto');
-  const [isLiked, setIsLiked] = useState(data.isLiked);
-  const [likesCount, setLikesCount] = useState(data.likes);
+  const [isLiked, setIsLiked] = useState(() => Boolean(data.isLiked));
+  const [likesCount, setLikesCount] = useState(() => Number(data.likes) || 0);
   const [hasError, setHasError] = useState(false);
 
   // Refs
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const likeAnimTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const viewCountedRef = useRef(false);
+  const autoScrolledRef = useRef(false);
 
   // Constants
   const isLocked = reel.isLocked;
@@ -130,11 +143,25 @@ const ReelItem: React.FC<IReelItemProps> = ({
     setUnlockModalVisible(true);
   }, []);
 
-  // Effects
+  // Reset view-counted flag when episode changes
+  useEffect(() => {
+    viewCountedRef.current = false;
+    autoScrolledRef.current = false;
+  }, [reel.episodeId]);
+
+  // Reset video timing state when episode changes
   useEffect(() => {
-    setIsLiked(data.isLiked);
-    setLikesCount(data.likes);
-  }, [data.isLiked, data.likes]);
+    setCurrentTime(0);
+    setDuration(0);
+    setBuffering(true);
+    setHasError(false);
+  }, [reel.episodeId]);
+
+  // Sync like state from parent when episode changes or parent updates data
+  useEffect(() => {
+    setIsLiked(Boolean(data.isLiked));
+    setLikesCount(Number(data.likes) || 0);
+  }, [reel.episodeId, data.isLiked, data.likes]);
 
   useEffect(() => {
     if (!isVisible) {
@@ -164,15 +191,12 @@ const ReelItem: React.FC<IReelItemProps> = ({
 
   const handleLikePress = useCallback(() => {
     const newLiked = !isLiked;
-    const newCount = newLiked ? likesCount + 1 : Math.max(0, likesCount - 1);
+    const count = Number(likesCount) || 0;
+    const newCount = newLiked ? count + 1 : Math.max(0, count - 1);
 
     setIsLiked(newLiked);
     setLikesCount(newCount);
 
-    // Update data object for parent component
-    data.isLiked = newLiked;
-    data.likes = newCount;
-
     if (newLiked) {
       setShowLikeAnim(true);
       setTimeoutSafely(
@@ -182,8 +206,10 @@ const ReelItem: React.FC<IReelItemProps> = ({
       );
     }
 
-    onLikePress?.(reel.episodeId, newLiked);
-  }, [isLiked, likesCount, data, onLikePress, reel.episodeId]);
+    // Parent should update its data (e.g. in onLikePress) so that like state
+    // persists across scroll and re-mounts
+    onLikePress?.({ id: reel.episodeId, liked: newLiked });
+  }, [isLiked, likesCount, onLikePress, reel.episodeId]);
 
   const handleTogglePlay = useCallback(() => {
     setIsPaused((prev) => !prev);
@@ -211,14 +237,6 @@ const ReelItem: React.FC<IReelItemProps> = ({
     [closeAllModals, onEpisodeSelect, openUnlockModal]
   );
 
-  const handleVideoEnd = useCallback(() => {
-    if (!autoScroll) return;
-    const nextEpisode = data.episodes?.[activeEpisodeIndex + 1];
-    if (nextEpisode) {
-      onEpisodeSelect(nextEpisode);
-    }
-  }, [autoScroll, data.episodes, activeEpisodeIndex, onEpisodeSelect]);
-
   // Gestures
   const handleLockedTap = useCallback(() => {
     closeAllModals();
@@ -329,6 +347,14 @@ const ReelItem: React.FC<IReelItemProps> = ({
     [playbackRate, videoQuality]
   );
 
+  const handleVideoEnd = useCallback(() => {
+    if (!autoScroll || isLocked || autoScrolledRef.current) {
+      return;
+    }
+    autoScrolledRef.current = true;
+    onAutoScrollNext?.();
+  }, [autoScroll, isLocked, onAutoScrollNext]);
+
   // ----------------------- RENDER -----------------------
   return (
     <View style={[styles.container, { height: videoHeight }]}>
@@ -341,6 +367,7 @@ const ReelItem: React.FC<IReelItemProps> = ({
         video={videoProps}
         likes={likesProps}
         actions={actionsProps}
+        isFullScreen={isFullScreen}
         navigation={navigationProps}
         settings={settingsProps}
       >
@@ -360,10 +387,10 @@ const ReelItem: React.FC<IReelItemProps> = ({
               )}
               {(isVisible || preload) && (
                 <Video
-                  ref={videoRef}
+                  ref={isVisible ? videoRef : undefined}
                   source={{ uri: videoUri }}
                   paused={finalPause}
-                  repeat
+                  repeat={!autoScroll}
                   resizeMode="cover"
                   poster={thumbnail}
                   posterResizeMode="cover"
@@ -378,10 +405,44 @@ const ReelItem: React.FC<IReelItemProps> = ({
                     setHasError(false);
                   }}
                   onLoad={(info) => {
-                    setDuration(info.duration);
+                    if (
+                      Number(info.duration) > 0 &&
+                      Number(info.duration) < 100000
+                    ) {
+                      setDuration(Number(info.duration));
+                    }
                     setHasError(false);
                   }}
-                  onProgress={(p) => setCurrentTime(p.currentTime)}
+                  onProgress={(p) => {
+                    setCurrentTime(p.currentTime);
+                    if (isVisible) {
+                      const safeDuration =
+                        duration > 0
+                          ? duration
+                          : Number((p as any).seekableDuration) || 0;
+                      const totalWatchTime = p.currentTime;
+                      const isVideoCompleted =
+                        safeDuration > 0 &&
+                        totalWatchTime >= safeDuration - 0.5;
+
+                      onWatchProgress?.({
+                        series: data,
+                        episode: reel,
+                        currentTime: p.currentTime,
+                        duration: safeDuration,
+                        isVideoCompleted,
+                        totalWatchTime,
+                      });
+
+                      if (
+                        p.currentTime >= MIN_VIEW_DURATION_SEC &&
+                        !viewCountedRef.current
+                      ) {
+                        viewCountedRef.current = true;
+                        onViewCount?.({ id: reel.episodeId });
+                      }
+                    }
+                  }}
                   onEnd={handleVideoEnd}
                   style={StyleSheet.absoluteFillObject}
                   controls={false}
@@ -403,16 +464,18 @@ const ReelItem: React.FC<IReelItemProps> = ({
   );
 };
 
-// Memo comparison
+// Memo comparison – compare likes numerically so string/number don't cause extra re-renders
 const areEqual = (prev: IReelItemProps, next: IReelItemProps) => {
+  const prevLikes = Number(prev.data.likes) || 0;
+  const nextLikes = Number(next.data.likes) || 0;
   return (
     prev.reel.episodeId === next.reel.episodeId &&
     prev.isVisible === next.isVisible &&
     prev.preload === next.preload &&
     prev.activeEpisodeIndex === next.activeEpisodeIndex &&
     prev.videoHeight === next.videoHeight &&
-    prev.data.isLiked === next.data.isLiked &&
-    prev.data.likes === next.data.likes &&
+    Boolean(prev.data.isLiked) === Boolean(next.data.isLiked) &&
+    prevLikes === nextLikes &&
     prev.reel.isLocked === next.reel.isLocked &&
     prev.reel.videoUrl === next.reel.videoUrl &&
     prev.isVisible === next.isVisible
@@ -427,6 +490,5 @@ const styles = StyleSheet.create({
   container: {
     width,
     overflow: 'hidden',
-    backgroundColor: '#000',
   },
 });

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

@@ -9,55 +9,38 @@ import {
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { RFValue } from 'react-native-responsive-fontsize';
 import type { ITheme } from '../../../../../theme';
+import { DEFAULT_QUALITIES, getVideoQualities } from '../../utils/quality';
 
 interface QualityControlProps {
   activeQuality: string;
   theme: ITheme;
   onQualityChange: (quality: string) => void;
   videoUrl?: string;
+  /**
+   * Optional externally-controlled qualities list.
+   * When provided, QualityControl will not perform internal fetching
+   * and will instead render this list.
+   */
+  qualities?: string[];
+  /**
+   * Optional externally-controlled loading state.
+   * Only used when `qualities` is provided.
+   */
+  loading?: boolean;
 }
 
-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,
+  qualities: externalQualities,
+  loading: externalLoading,
 }) => {
-  const [qualities, setQualities] = useState<string[]>(DEFAULT_QUALITIES);
+  const isControlled = typeof externalQualities !== 'undefined';
+  const [qualities, setQualities] = useState<string[]>(
+    externalQualities ?? DEFAULT_QUALITIES
+  );
   const [loading, setLoading] = useState(false);
   const isMounted = useRef(true);
 
@@ -68,7 +51,17 @@ const QualityControl: React.FC<QualityControlProps> = ({
     };
   }, []);
 
+  // Keep local state in sync when controlled externally
   useEffect(() => {
+    if (isControlled) {
+      setQualities(externalQualities ?? DEFAULT_QUALITIES);
+    }
+  }, [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);
@@ -102,9 +95,13 @@ const QualityControl: React.FC<QualityControlProps> = ({
     };
 
     fetchQualities();
-  }, [videoUrl]);
+  }, [videoUrl, isControlled]);
+
+  const isLoading = isControlled ? Boolean(externalLoading) : loading;
+  const renderedQualities =
+    qualities && qualities.length > 0 ? qualities : DEFAULT_QUALITIES;
 
-  if (loading) {
+  if (!isControlled && isLoading) {
     return (
       <View style={styles.loadingContainer}>
         <ActivityIndicator size="small" color={theme.colors.button} />
@@ -119,7 +116,7 @@ const QualityControl: React.FC<QualityControlProps> = ({
 
   return (
     <View style={styles.container}>
-      {qualities.map((quality, index) => {
+      {renderedQualities.map((quality, index) => {
         const isSelected = activeQuality === quality;
 
         return (

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

@@ -36,3 +36,19 @@ 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;
+}