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

package/src/components/NewRelease/NewReleaseSheet.tsx

@@ -1,250 +0,0 @@
-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

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

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

@@ -1,221 +0,0 @@
-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',
-  },
-});