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

package/src/components/NewRelease/NewReleaseSheet.tsx

@@ -0,0 +1,260 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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 { useTheme } from '../../theme';
+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 } = useTheme(theme);
+
+  const handleWatchNow = () => {
+    onClose();
+    onPressWatchNow?.(data);
+  };
+
+  const buttonStyle = {
+    ...styles.button,
+    backgroundColor: appliedTheme.colors.button,
+    alignSelf: 'center' as const,
+  };
+
+  const buttonTitleStyle = {
+    ...styles.buttonTitle,
+    color: appliedTheme.colors.buttonText,
+  };
+
+  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={buttonStyle}
+        theme={theme}
+        title="Watch Now"
+        titleStyle={buttonTitleStyle}
+        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 } = useTheme(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;
+
+  const handleClose = () => {
+    setIsVisible(false);
+    setHasOpened(true);
+  };
+
+  return (
+    <BottomSheetOne
+      key="new-release-sheet"
+      theme={appliedTheme}
+      visible={showSheet}
+      onClose={handleClose}
+      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,6 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './NewReleaseSheet';

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

@@ -0,0 +1,226 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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';
+
+interface BottomControlsProps {
+  series: ISeriesItem;
+  episodeIndex: number;
+  videoCurrentTime: number;
+  videoDuration: number;
+  isFullScreen: boolean;
+  onEpisodesPress?: () => void;
+  theme: ITheme;
+  onSeek?: (time: number) => void;
+}
+
+const BottomControls: React.FC<BottomControlsProps> = ({
+  series,
+  episodeIndex,
+  videoCurrentTime,
+  videoDuration,
+  onEpisodesPress,
+  isFullScreen,
+  theme,
+  onSeek,
+}) => {
+  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,
+        { bottom: isFullScreen ? verticalScale(5) : verticalScale(0) },
+      ]}
+    >
+      {/* Series Info Section */}
+      <View style={styles.seriesInfo}>
+        <Text style={styles.seriesTitle}>{truncatedTitle}</Text>
+        <Text numberOfLines={2} style={styles.seriesDescription}>
+          {series.description}
+        </Text>
+      </View>
+
+      {/* Episodes Selector Button */}
+      <TouchableOpacity
+        style={styles.episodesButton}
+        onPress={onEpisodesPress}
+        activeOpacity={0.7}
+      >
+        <View style={styles.episodesButtonContent}>
+          <ListVideo
+            color={'#fff'}
+            width={moderateScale(20)}
+            height={moderateScale(20)}
+          />
+          <Text style={styles.episodesText}>
+            {episodeIndex + 1} / {series.episodes.length} Episodes
+          </Text>
+        </View>
+        <ChevronRight color={'#fff'} size={moderateScale(22)} />
+      </TouchableOpacity>
+
+      {/* Video Progress Bar */}
+      <View style={styles.progressBarContainer}>
+        <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>
+  );
+};
+
+export default BottomControls;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 10,
+    paddingHorizontal: moderateScale(8),
+  },
+  seriesInfo: {
+    marginBottom: verticalScale(10),
+  },
+  seriesTitle: {
+    fontSize: RFValue(13),
+    fontWeight: '500',
+    color: '#fff',
+  },
+  seriesDescription: {
+    fontSize: RFValue(10),
+    color: '#fff',
+    marginTop: 2.5,
+    opacity: 0.9,
+  },
+  episodesButton: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    borderRadius: moderateScale(8),
+    paddingHorizontal: moderateScale(12),
+    paddingVertical: verticalScale(8),
+  },
+  episodesButtonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  episodesText: {
+    fontSize: RFValue(13),
+    color: '#fff',
+    marginLeft: moderateScale(10),
+  },
+  progressBarContainer: {
+    marginVertical: verticalScale(10),
+    marginHorizontal: moderateScale(5),
+  },
+  progressBarWrapper: {
+    height: verticalScale(2),
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    borderRadius: moderateScale(1),
+    position: 'relative',
+  },
+  progressBarFill: {
+    height: '100%',
+    // backgroundColor: '#fff',
+    borderRadius: moderateScale(1),
+  },
+  progressBarKnob: {
+    position: 'absolute',
+    top: -verticalScale(2),
+    width: moderateScale(7),
+    height: moderateScale(7),
+    borderRadius: moderateScale(5),
+    backgroundColor: '#fff',
+    transform: [{ translateX: -moderateScale(3.5) }],
+  },
+  sliderThumb: {
+    width: moderateScale(7),
+    height: moderateScale(7),
+    borderRadius: moderateScale(3.5),
+    backgroundColor: '#fff',
+  },
+});