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

package/src/components/Logo/Logo.tsx

@@ -1,8 +1,8 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:23 PM
+ * @lastModified Tue 17 Feb 2026 at 04:10 PM
  */
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   Image,
   View,
@@ -43,27 +43,35 @@ export const Logo: React.FC<ILogoProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
+  const [hasError, setHasError] = useState(false);
+
   const {
     data: { logoPath },
     isLoading: isSplashLoading,
   } = useSplashCache({
     logoUrl: logoUri,
   });
-  const finalSource = useMemo(
-    () =>
-      logoPath
-        ? {
-            uri: logoPath.startsWith('file://')
-              ? logoPath
-              : `file://${logoPath}`,
-          }
-        : logoUri
-          ? { uri: logoUri }
-          : fallbackUri
-            ? { uri: fallbackUri }
-            : undefined,
-    [logoPath, logoUri, fallbackUri]
-  );
+  const finalSource = useMemo(() => {
+    if (hasError) {
+      return fallbackUri ? { uri: fallbackUri } : undefined;
+    }
+
+    if (logoPath) {
+      return {
+        uri: logoPath.startsWith('file://') ? logoPath : `file://${logoPath}`,
+      };
+    }
+
+    if (logoUri) {
+      return { uri: logoUri };
+    }
+
+    if (fallbackUri) {
+      return { uri: fallbackUri };
+    }
+
+    return undefined;
+  }, [logoPath, logoUri, fallbackUri, hasError]);
 
   const containerStyleMemo = useMemo(
     () => [
@@ -88,12 +96,12 @@ export const Logo: React.FC<ILogoProps> = ({
     [width, height, aspectRatio, imageStyle]
   );
 
-  if (!finalSource && !isLoading) {
-    return null;
-  }
+  const showSkeleton = isLoading || isSplashLoading;
+  const showPlaceholder = !finalSource;
+
   return (
     <View style={containerStyleMemo}>
-      {isLoading || isSplashLoading ? (
+      {showSkeleton ? (
         <SkeletonPlaceholder
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
@@ -103,22 +111,33 @@ export const Logo: React.FC<ILogoProps> = ({
           <SkeletonPlaceholder.Item
             alignSelf="center"
             width={moderateScale(width)}
-            height={moderateScale(width / 2)}
+            height={moderateScale(height)}
             borderRadius={4}
           />
         </SkeletonPlaceholder>
-      ) : (
-        finalSource && (
-          <Image
-            source={finalSource}
-            resizeMode={resizeMode}
-            style={imageStyleMemo}
-            onError={() => {
-              return null;
-            }}
-          />
-        )
-      )}
+      ) : finalSource ? (
+        <Image
+          source={finalSource}
+          resizeMode={resizeMode}
+          style={imageStyleMemo}
+          onError={() => {
+            if (!hasError) {
+              setHasError(true);
+            }
+          }}
+        />
+      ) : showPlaceholder ? (
+        <View
+          style={[
+            {
+              width: moderateScale(width),
+              height: moderateScale(height),
+              borderRadius: 4,
+              backgroundColor: appliedTheme.colors.skeletonBaseColor,
+            },
+          ]}
+        />
+      ) : null}
     </View>
   );
 };

package/src/components/NewRelease/NewReleaseSheet.tsx

@@ -0,0 +1,250 @@
+import { useState, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { scale } from 'react-native-size-matters';
+import FastImage from 'react-native-fast-image';
+import { RFValue } from 'react-native-responsive-fontsize';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { Text } from '../Text';
+import type { ThemeOverride } from '../../theme';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { useInternalTheme } from '../../theme/hook';
+import { Button } from '../Button';
+import { BottomSheetOne } from '../BottomSheet';
+import { CirclePlay } from 'lucide-react-native';
+
+interface NewReleaseSheetSkeletonProps {
+  baseColor: string;
+  highlightColor: string;
+}
+
+const NewReleaseSheetSkeleton = ({
+  baseColor,
+  highlightColor,
+}: NewReleaseSheetSkeletonProps) => (
+  <SkeletonPlaceholder
+    backgroundColor={baseColor}
+    highlightColor={highlightColor}
+  >
+    <SkeletonPlaceholder.Item alignItems="center">
+      <SkeletonPlaceholder.Item {...styles.skeletonHeader} />
+      <SkeletonPlaceholder.Item {...styles.skeletonPoster} />
+      <SkeletonPlaceholder.Item {...styles.skeletonTitle} />
+      <SkeletonPlaceholder.Item {...styles.skeletonDescription} />
+      <SkeletonPlaceholder.Item {...styles.skeletonButton} />
+    </SkeletonPlaceholder.Item>
+  </SkeletonPlaceholder>
+);
+
+interface NewReleaseSheetContentProps {
+  data: IContentData;
+  theme?: ThemeOverride;
+  onPressWatchNow?: (data: IContentData) => void;
+  onClose: () => void;
+}
+
+const NewReleaseSheetContent = ({
+  data,
+  theme,
+  onPressWatchNow,
+  onClose,
+}: NewReleaseSheetContentProps) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  const handleWatchNow = () => {
+    onClose();
+    onPressWatchNow?.(data);
+  };
+
+  return (
+    <>
+      <Text style={styles.header} color={appliedTheme.colors.newRelease}>
+        New Release
+      </Text>
+      <FastImage
+        source={{ uri: data.poster }}
+        style={styles.poster}
+        resizeMode={FastImage.resizeMode.cover}
+      />
+      <Text style={styles.title} color={appliedTheme.colors.white}>
+        {data.name}
+      </Text>
+      <Text
+        numberOfLines={3}
+        style={styles.description}
+        color={appliedTheme.colors.white}
+      >
+        {data.description}
+      </Text>
+      <Button.Primary
+        containerStyle={{
+          ...styles.button,
+          backgroundColor: appliedTheme.colors.button,
+          alignSelf: 'center',
+        }}
+        theme={theme}
+        title="Watch Now"
+        titleStyle={{
+          ...styles.buttonTitle,
+          color: appliedTheme.colors.buttonText,
+        }}
+        onPress={handleWatchNow}
+        leftIcon={
+          <CirclePlay size={25} color={appliedTheme.colors.buttonText} />
+        }
+      />
+    </>
+  );
+};
+
+interface Props {
+  theme?: ThemeOverride;
+  data?: IContentData | null;
+  onPressWatchNow?: (data: IContentData) => void;
+}
+
+export const NewReleaseSheet = ({ theme, data, onPressWatchNow }: Props) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [hasOpened, setHasOpened] = useState(false);
+  const { theme: appliedTheme } = useInternalTheme(theme);
+
+  useEffect(() => {
+    if (data && !hasOpened) {
+      const timer = setTimeout(() => {
+        setIsVisible(true);
+        setHasOpened(true);
+      }, 1500);
+
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [data, hasOpened]);
+
+  const isLoading = !data;
+  const showSheet = isVisible && !!data;
+
+  const handleClose = () => {
+    setIsVisible(false);
+    setHasOpened(true);
+  };
+
+  return (
+    <BottomSheetOne
+      key="new-release-sheet"
+      theme={appliedTheme}
+      visible={showSheet}
+      onClose={() => setIsVisible(false)}
+      height="70%"
+      showCloseButton
+      scrollable={false}
+      backgroundImage={!isLoading ? data?.poster : undefined}
+    >
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.container}>
+          {isLoading ? (
+            <NewReleaseSheetSkeleton
+              baseColor={appliedTheme.colors.skeletonBaseColor}
+              highlightColor={appliedTheme.colors.skeletonHighlightColor}
+            />
+          ) : (
+            data && (
+              <NewReleaseSheetContent
+                data={data}
+                theme={theme}
+                onPressWatchNow={onPressWatchNow}
+                onClose={handleClose}
+              />
+            )
+          )}
+        </View>
+      </SafeAreaView>
+    </BottomSheetOne>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingHorizontal: scale(8),
+  },
+  header: {
+    marginTop: scale(4),
+    paddingHorizontal: scale(8),
+    fontSize: RFValue(15),
+    textAlign: 'center',
+  },
+  poster: {
+    width: scale(170),
+    aspectRatio: 2 / 3,
+    borderRadius: scale(12),
+    marginTop: scale(10),
+    elevation: 12,
+  },
+  title: {
+    marginTop: scale(12),
+    paddingHorizontal: scale(10),
+    fontSize: RFValue(17),
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  description: {
+    marginTop: scale(10),
+    paddingHorizontal: scale(14),
+    fontSize: RFValue(12),
+    textAlign: 'center',
+    opacity: 0.8,
+    lineHeight: RFValue(15),
+  },
+  button: {
+    marginTop: scale(20),
+    marginBottom: scale(14),
+    width: scale(170),
+    minWidth: scale(170),
+    maxWidth: '100%',
+    height: scale(41),
+    borderRadius: scale(27),
+  },
+  buttonTitle: {
+    fontSize: RFValue(14),
+    fontWeight: '700',
+  },
+  // Skeleton – matches content layout (poster 170 × 2/3, title/desc/button)
+  skeletonHeader: {
+    width: scale(100),
+    height: scale(16),
+    borderRadius: scale(4),
+    marginTop: scale(4),
+  },
+  skeletonPoster: {
+    width: scale(170),
+    height: scale(255),
+    borderRadius: scale(12),
+    marginTop: scale(10),
+  },
+  skeletonTitle: {
+    width: scale(140),
+    height: scale(20),
+    borderRadius: scale(4),
+    marginTop: scale(12),
+  },
+  skeletonDescription: {
+    width: scale(170),
+    height: scale(42),
+    borderRadius: scale(6),
+    marginTop: scale(10),
+  },
+  skeletonButton: {
+    width: scale(170),
+    height: scale(41),
+    borderRadius: scale(27),
+    marginTop: scale(20),
+    marginBottom: scale(14),
+  },
+});
+
+// rgb(215, 10, 132)

package/src/components/NewRelease/index.ts

@@ -0,0 +1 @@
+export * from './NewReleaseSheet';

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { ChevronRight, ListVideo } from 'lucide-react-native';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { Slider } from 'react-native-awesome-slider';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
 import type { ISeriesItem } from '../types';
 import type { ITheme } from '../../../../theme';
 
@@ -11,8 +13,10 @@ interface BottomControlsProps {
   episodeIndex: number;
   videoCurrentTime: number;
   videoDuration: number;
+  isFullScreen: boolean;
   onEpisodesPress?: () => void;
   theme: ITheme;
+  onSeek?: (time: number) => void;
 }
 
 const BottomControls: React.FC<BottomControlsProps> = ({
@@ -21,18 +25,51 @@ const BottomControls: React.FC<BottomControlsProps> = ({
   videoCurrentTime,
   videoDuration,
   onEpisodesPress,
+  isFullScreen,
   theme,
+  onSeek,
 }) => {
-  const progressPercentage =
-    videoDuration > 0 ? (videoCurrentTime / videoDuration) * 100 : 0;
-
   const truncatedTitle =
     series.title.length <= 25
       ? series.title
       : series.title.slice(0, 25) + '...';
 
+  const progress = useSharedValue(videoCurrentTime);
+  const minimumValue = useSharedValue(0);
+  const maximumValue = useSharedValue(videoDuration > 0 ? videoDuration : 1);
+  const isScrubbing = useSharedValue(false);
+  const thumbScale = useSharedValue(1);
+  const scrubTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Keep slider in sync with video time
+  useEffect(() => {
+    if (!isScrubbing.value) {
+      progress.value = videoCurrentTime;
+    }
+  }, [videoCurrentTime, progress, isScrubbing]);
+
+  // Update duration when it changes
+  useEffect(() => {
+    maximumValue.value = videoDuration > 0 ? videoDuration : 1;
+  }, [videoDuration, maximumValue]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (scrubTimeoutRef.current) {
+        clearTimeout(scrubTimeoutRef.current);
+        scrubTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
   return (
-    <View style={styles.container}>
+    <View
+      style={[
+        styles.container,
+        { bottom: isFullScreen ? verticalScale(5) : verticalScale(0) },
+      ]}
+    >
       {/* Series Info Section */}
       <View style={styles.seriesInfo}>
         <Text style={styles.seriesTitle}>{truncatedTitle}</Text>
@@ -62,27 +99,48 @@ const BottomControls: React.FC<BottomControlsProps> = ({
 
       {/* Video Progress Bar */}
       <View style={styles.progressBarContainer}>
-        <View style={styles.progressBarWrapper}>
-          <View
-            style={[
-              styles.progressBarFill,
-              {
-                width: `${progressPercentage}%`,
-                backgroundColor: theme.colors.primary,
-              },
-            ]}
-          />
-          {videoDuration > 0 && (
-            <View
-              style={[
-                styles.progressBarKnob,
-                {
-                  left: `${progressPercentage}%`,
-                },
-              ]}
-            />
-          )}
-        </View>
+        <Slider
+          progress={progress}
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          isScrubbing={isScrubbing}
+          thumbScaleValue={thumbScale}
+          sliderHeight={verticalScale(2)}
+          disable={videoDuration <= 0}
+          disableTapEvent={false}
+          theme={{
+            minimumTrackTintColor: theme.colors.primary,
+            maximumTrackTintColor: 'rgba(255, 255, 255, 0.3)',
+            cacheTrackTintColor: 'rgba(255, 255, 255, 0.3)',
+            disableMinTrackTintColor: 'rgba(255, 255, 255, 0.5)',
+            bubbleBackgroundColor: 'transparent',
+            heartbeatColor: theme.colors.primary,
+          }}
+          containerStyle={styles.progressBarWrapper}
+          renderThumb={() => <View style={styles.sliderThumb} />}
+          bubbleWidth={0}
+          bubbleMaxWidth={0}
+          onSlidingStart={() => {
+            if (scrubTimeoutRef.current) {
+              clearTimeout(scrubTimeoutRef.current);
+              scrubTimeoutRef.current = null;
+            }
+            isScrubbing.value = true;
+            thumbScale.value = withTiming(1.4, { duration: 120 });
+          }}
+          onSlidingComplete={(value) => {
+            progress.value = value;
+            thumbScale.value = withTiming(1, { duration: 120 });
+            onSeek?.(value);
+
+            // Give the video a brief moment to seek before
+            // re-syncing slider with currentTime to avoid jumps
+            scrubTimeoutRef.current = setTimeout(() => {
+              isScrubbing.value = false;
+              scrubTimeoutRef.current = null;
+            }, 400);
+          }}
+        />
       </View>
     </View>
   );
@@ -94,8 +152,9 @@ const styles = StyleSheet.create({
   container: {
     position: 'absolute',
     bottom: 0,
+    width: '100%',
     zIndex: 10,
-    marginHorizontal: moderateScale(8),
+    paddingHorizontal: moderateScale(8),
   },
   seriesInfo: {
     marginBottom: verticalScale(10),
@@ -153,4 +212,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     transform: [{ translateX: -moderateScale(3.5) }],
   },
+  sliderThumb: {
+    width: moderateScale(7),
+    height: moderateScale(7),
+    borderRadius: moderateScale(3.5),
+    backgroundColor: '#fff',
+  },
 });

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

@@ -19,6 +19,8 @@ import BottomControls from './BottomControls';
 import DetailsModal from '../Model/DetailsModal';
 import UnLockModal from '../Model/UnlockModal';
 import SettingModal from '../Model/SettingModal';
+import { videoRef } from '../../utils/Controls';
+import { DEFAULT_QUALITIES, getVideoQualities } from '../utils/quality';
 
 export interface ContentProps {
   series: ISeriesItem;
@@ -74,6 +76,7 @@ export interface MediaControlsProps {
   likes: LikeProps;
   actions: ActionsProps;
   navigation: NavigationProps;
+  isFullScreen: boolean;
   settings: SettingsProps;
   modal?: ModalState;
   setModal?: (m: ModalState) => void;
@@ -90,6 +93,7 @@ const MediaControlsProvider: React.FC<MediaControlsProps> = ({
   navigation,
   settings,
   modal,
+  isFullScreen,
   unlock,
   setModal,
   theme,
@@ -123,6 +127,79 @@ const MediaControlsProvider: React.FC<MediaControlsProps> = ({
   const { playbackRate, quality, onPlaybackRateChange, onQualityChange } =
     settings;
 
+  // Qualities state is managed outside of the modal for smoother UX and to
+  // avoid performing API calls inside modal components.
+  const [qualities, setQualities] = React.useState<string[]>(DEFAULT_QUALITIES);
+  const [qualitiesLoading, setQualitiesLoading] = React.useState(false);
+  const lastLoadedUrlRef = React.useRef<string | null>(null);
+
+  React.useEffect(() => {
+    // Only fetch when settings modal is requested, and let the shared util
+    // handle caching per m3u8 URL to avoid repeated network calls.
+    if (modal?.type !== 'settings') {
+      return;
+    }
+
+    const videoUrl = episode.videoUrl;
+
+    // If we've already loaded qualities for this URL once, don't toggle
+    // loading again or refetch – this prevents repeated "open/close" feel
+    // and keeps the modal content stable.
+    if (videoUrl && lastLoadedUrlRef.current === videoUrl) {
+      return;
+    }
+
+    let isCancelled = false;
+
+    const fetchQualities = async () => {
+      if (!videoUrl || !videoUrl.includes('.m3u8')) {
+        if (!isCancelled) {
+          setQualities(DEFAULT_QUALITIES);
+          setQualitiesLoading(false);
+          lastLoadedUrlRef.current = videoUrl ?? null;
+        }
+        return;
+      }
+
+      setQualitiesLoading(true);
+
+      try {
+        const qualityOptions = await getVideoQualities(videoUrl);
+        if (isCancelled) 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);
+        }
+
+        lastLoadedUrlRef.current = videoUrl;
+      } catch (err) {
+        if (!isCancelled) {
+          setQualities(DEFAULT_QUALITIES);
+          lastLoadedUrlRef.current = videoUrl ?? null;
+        }
+      } finally {
+        if (!isCancelled) {
+          setQualitiesLoading(false);
+        }
+      }
+    };
+
+    fetchQualities();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [episode.videoUrl, modal?.type]);
+
   const episodeLabel = React.useMemo(() => {
     return series.episodes.length > 0
       ? `Ep ${activeIndex + 1}/${series.episodes.length}`
@@ -181,9 +258,11 @@ const MediaControlsProvider: React.FC<MediaControlsProps> = ({
           episodeIndex={activeIndex}
           videoCurrentTime={currentTime}
           videoDuration={duration}
+          isFullScreen={isFullScreen}
           onEpisodesPress={() =>
             setModal?.({ type: 'details', isVisible: true })
           }
+          onSeek={(time) => videoRef.current?.seek(time)}
         />
       </View>
 
@@ -206,7 +285,8 @@ const MediaControlsProvider: React.FC<MediaControlsProps> = ({
         theme={theme}
         speed={playbackRate}
         quality={quality}
-        videoUrl={episode.videoUrl}
+        qualities={qualities}
+        qualitiesLoading={qualitiesLoading}
         onSpeedChange={onPlaybackRateChange}
         onQualityChange={onQualityChange}
         isVisible={modal?.type === 'settings' && modal.isVisible}

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

@@ -4,6 +4,7 @@ import { Heart, Forward, ListVideo } from 'lucide-react-native';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { RFValue } from 'react-native-responsive-fontsize';
 import type { ISeriesEpisode } from '../types';
+import { formatCount } from '../../../../utils/Formater';
 
 interface RightControlsProps {
   episode: ISeriesEpisode;
@@ -39,7 +40,9 @@ const RightControls: React.FC<RightControlsProps> = ({
           color={isLiked ? 'red' : '#fff'}
           fill={isLiked ? 'red' : 'none'}
         />
-        <Text style={styles.actionLabel}>{likeCount}</Text>
+        <Text style={styles.actionLabel}>
+          {formatCount(Number(likeCount) || 0)}
+        </Text>
       </TouchableOpacity>
 
       {/* 📺 Episodes / Details */}