@zezosoft/zezo-ott-react-native-ui-kit 1.1.0 → 1.1.1

package/lib/typescript/src/components/Reels/ReelsSeries/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Reels/ReelsSeries/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IAEd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB;AAGD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Reels/ReelsSeries/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AACD,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC;CAChC;AACD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,WAAW,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;CACvC"}

package/lib/typescript/src/components/Reels/utils/Controls/gestureUtils.d.ts

@@ -0,0 +1,10 @@
+import { Gesture } from 'react-native-gesture-handler';
+/**
+ * Create a tap gesture handler
+ */
+export declare const useCreateTapGesture: (isInOverlay: (x: number, y: number) => boolean, isLocked: boolean, handleLockedTap: () => void) => (onAction: () => void, numberOfTaps?: number) => import("react-native-gesture-handler/lib/typescript/handlers/gestures/tapGesture").TapGesture;
+/**
+ * Create combined gesture (single tap and double tap)
+ */
+export declare const useCombinedGesture: (singleTap: ReturnType<typeof Gesture.Tap>, doubleTap: ReturnType<typeof Gesture.Tap>) => import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").ExclusiveGesture;
+//# sourceMappingURL=gestureUtils.d.ts.map

package/lib/typescript/src/components/Reels/utils/Controls/gestureUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gestureUtils.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Reels/utils/Controls/gestureUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAGvD;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,EAC9C,UAAU,OAAO,EACjB,iBAAiB,MAAM,IAAI,gBAGd,MAAM,IAAI,yHAexB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,UAAU,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,EACzC,WAAW,UAAU,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,gHAM1C,CAAC"}

package/lib/typescript/src/components/Reels/utils/Controls/index.d.ts

@@ -0,0 +1,5 @@
+export * from './videoRef';
+export * from './videoControlsConstants';
+export * from './overlayUtils';
+export * from './gestureUtils';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/Reels/utils/Controls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Reels/utils/Controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/lib/typescript/src/components/Reels/utils/Controls/overlayUtils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Calculate overlay thresholds
+ */
+export declare const useOverlayThresholds: (videoHeight: number) => {
+    rightThreshold: number;
+    bottomThreshold: number;
+};
+/**
+ * Check if coordinates are in overlay area
+ */
+export declare const useIsInOverlay: (rightThreshold: number, bottomThreshold: number) => (x: number, y: number) => boolean;
+//# sourceMappingURL=overlayUtils.d.ts.map

package/lib/typescript/src/components/Reels/utils/Controls/overlayUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayUtils.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Reels/utils/Controls/overlayUtils.ts"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,aAAa,MAAM;;;CASvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,gBAAgB,MAAM,EACtB,iBAAiB,MAAM,SAGjB,MAAM,KAAK,MAAM,YAGxB,CAAC"}

package/lib/typescript/src/components/Reels/utils/Controls/videoControlsConstants.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Video Controls Constants
+ */
+export declare const GESTURE_MAX_DURATION = 300;
+export declare const PAUSE_ICON_TIMEOUT = 800;
+export declare const LIKE_ANIM_TIMEOUT = 1200;
+export declare const UNLOCK_MODAL_DELAY = 500;
+export declare const OVERLAY_RIGHT_OFFSET = 80;
+export declare const OVERLAY_BOTTOM_OFFSET = 150;
+export declare const videoControlsStyles: {
+    hideForward: boolean;
+    hideDuration: boolean;
+    hideFullscreen: boolean;
+    hidePlayPause: boolean;
+    hideNavigationBarOnFullScreenMode: boolean;
+    hideNotificationBarOnFullScreenMode: boolean;
+    hideNext: boolean;
+    hidePosition: boolean;
+    hidePrevious: boolean;
+    hideRewind: boolean;
+    hideSeekBar: boolean;
+    hideSettingButton: boolean;
+};
+//# sourceMappingURL=videoControlsConstants.d.ts.map

package/lib/typescript/src/components/Reels/utils/Controls/videoControlsConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"videoControlsConstants.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Reels/utils/Controls/videoControlsConstants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;CAa/B,CAAC"}

package/lib/typescript/src/components/Reels/utils/Controls/videoRef.d.ts

@@ -0,0 +1,3 @@
+import type { VideoRef } from 'react-native-video';
+export declare const videoRef: import("react").RefObject<VideoRef | null>;
+//# sourceMappingURL=videoRef.d.ts.map

package/lib/typescript/src/components/Reels/utils/Controls/videoRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"videoRef.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/Reels/utils/Controls/videoRef.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,eAAO,MAAM,QAAQ,4CAAwB,CAAC"}

package/lib/typescript/src/components/Reels/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './timeoutUtils';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/Reels/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Reels/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib/typescript/src/components/Reels/utils/timeoutUtils.d.ts

@@ -0,0 +1,14 @@
+import { type MutableRefObject } from 'react';
+/**
+ * Safely clears a timeout stored in a ref
+ * @param ref - React ref containing the timeout
+ */
+export declare const clearTimeoutSafely: (ref: MutableRefObject<NodeJS.Timeout | null>) => void;
+/**
+ * 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 declare const setTimeoutSafely: (ref: MutableRefObject<NodeJS.Timeout | null>, callback: () => void, delay: number) => void;
+//# sourceMappingURL=timeoutUtils.d.ts.map

package/lib/typescript/src/components/Reels/utils/timeoutUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeoutUtils.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Reels/utils/timeoutUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,KAAK,gBAAgB,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,KAC3C,IAKF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,KAAK,gBAAgB,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,EAC5C,UAAU,MAAM,IAAI,EACpB,OAAO,MAAM,KACZ,IAGF,CAAC"}

package/lib/typescript/src/components/index.d.ts

@@ -25,4 +25,5 @@ export * from './Subscription';
 export * from './Alert';
 export * from './Reels';
 export * from './BlurView';
+export * from './BottomSheet';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zezosoft/zezo-ott-react-native-ui-kit",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A professional React Native UI component library built for OTT applications.",
   "main": "./lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",

package/src/components/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,195 @@
+import React, { useCallback, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ScrollView,
+  Dimensions,
+} from 'react-native';
+import type { ViewStyle } from 'react-native';
+import Modal from 'react-native-modal';
+import { X } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import Animated from 'react-native-reanimated';
+import type { ITheme } from '../../theme';
+import { Text } from '../Text';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export interface BottomSheetProps {
+  theme: ITheme;
+  children: ReactNode;
+  title?: string;
+  height?: string | number;
+  showCloseButton?: boolean;
+  visible?: boolean;
+  onClose?: () => void;
+  handleIndicatorStyle?: ViewStyle;
+  scrollable?: boolean;
+}
+
+const BottomSheet: React.FC<BottomSheetProps> = ({
+  theme,
+  children,
+  title,
+  height,
+  showCloseButton = true,
+  visible = false,
+  onClose,
+  handleIndicatorStyle,
+  scrollable = true,
+}) => {
+  const calculatedHeight = useMemo(() => {
+    if (!height) return SCREEN_HEIGHT * 0.75;
+
+    if (typeof height === 'number') return height;
+
+    if (typeof height === 'string' && height.includes('%')) {
+      const num = parseFloat(height);
+      if (!isNaN(num)) {
+        return (num / 100) * SCREEN_HEIGHT;
+      }
+    }
+
+    return SCREEN_HEIGHT * 0.75;
+  }, [height]);
+
+  const handleClosePress = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+
+  const renderHeader = useMemo(() => {
+    if (title) {
+      return (
+        <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
+          {title}
+        </Text>
+      );
+    }
+    return null;
+  }, [title, theme.colors.textPrimary]);
+
+  const renderCloseButton = useMemo(() => {
+    if (!showCloseButton) return null;
+    return (
+      <TouchableOpacity
+        onPress={handleClosePress}
+        style={[
+          styles.closeButtonWrapper,
+          { backgroundColor: theme.colors.button },
+        ]}
+        activeOpacity={0.8}
+      >
+        <X size={moderateScale(16)} color={theme.colors.buttonText} />
+      </TouchableOpacity>
+    );
+  }, [showCloseButton, handleClosePress, theme.colors]);
+
+  return (
+    <Modal
+      isVisible={visible}
+      onBackdropPress={handleClosePress}
+      onSwipeComplete={handleClosePress}
+      style={styles.modal}
+      backdropOpacity={0.45}
+      // swipeDirection="down"
+      animationIn="slideInUp"
+      animationOut="slideOutDown"
+      animationInTiming={260}
+      animationOutTiming={220}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      propagateSwipe
+      avoidKeyboard
+      statusBarTranslucent={false}
+      hardwareAccelerated
+    >
+      <Animated.View
+        style={[
+          styles.bottomSheetContainer,
+          {
+            backgroundColor: theme.colors.background,
+            maxHeight: calculatedHeight,
+          },
+        ]}
+      >
+        {renderCloseButton}
+        <View
+          style={[
+            styles.handleIndicator,
+            { backgroundColor: theme.colors.button },
+            handleIndicatorStyle,
+          ]}
+        />
+
+        {scrollable ? (
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            bounces={false}
+            nestedScrollEnabled
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.scrollContent}
+          >
+            {renderHeader}
+            {children}
+          </ScrollView>
+        ) : (
+          <View style={styles.viewContent}>
+            {renderHeader}
+            {children}
+          </View>
+        )}
+      </Animated.View>
+    </Modal>
+  );
+};
+
+export default BottomSheet;
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  bottomSheetContainer: {
+    borderTopLeftRadius: moderateScale(22),
+    borderTopRightRadius: moderateScale(22),
+    overflow: 'hidden',
+    position: 'relative',
+    flex: 1,
+  },
+  handleIndicator: {
+    width: moderateScale(45),
+    height: verticalScale(4),
+    borderRadius: moderateScale(3),
+    alignSelf: 'center',
+    marginVertical: verticalScale(10),
+  },
+  scrollContent: {
+    flex: 1,
+    paddingBottom: verticalScale(30),
+    paddingHorizontal: moderateScale(12),
+  },
+  viewContent: {
+    paddingBottom: verticalScale(10),
+    paddingHorizontal: moderateScale(12),
+    flex: 1,
+  },
+  closeButtonWrapper: {
+    position: 'absolute',
+    top: verticalScale(10),
+    right: moderateScale(14),
+    borderRadius: moderateScale(18),
+    padding: moderateScale(6),
+    zIndex: 1000,
+    elevation: 10,
+  },
+  title: {
+    fontSize: RFValue(16),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(15),
+  },
+});

package/src/components/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from './BottomSheet';
+export type { BottomSheetProps } from './BottomSheet';

package/src/components/Button/BackBtn.tsx

@@ -9,6 +9,7 @@ import {
   Alert,
   Platform,
   type ViewStyle,
+  type TextStyle,
   type StyleProp,
 } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
@@ -17,6 +18,7 @@ import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { BlurView } from '@react-native-community/blur';
 import type { ThemeOverride } from '../../theme/themes';
+import { Text } from '../Text';
 
 type BackBtnProps = {
   size?: number;
@@ -25,6 +27,8 @@ type BackBtnProps = {
   style?: StyleProp<ViewStyle>;
   theme?: ThemeOverride;
   enableBlur?: boolean;
+  label?: string;
+  textStyle?: StyleProp<TextStyle>;
 };
 
 const BackBtn: React.FC<BackBtnProps> = ({
@@ -34,6 +38,8 @@ const BackBtn: React.FC<BackBtnProps> = ({
   style,
   theme,
   enableBlur = false,
+  label,
+  textStyle,
 }) => {
   const insets = useSafeAreaInsets();
   const { theme: appliedTheme } = useInternalTheme(theme);
@@ -61,12 +67,14 @@ const BackBtn: React.FC<BackBtnProps> = ({
   const hasBackground = !!flattenedStyle.backgroundColor;
 
   const shouldRenderBlur = enableBlur && hasBackground;
+  const hasLabel = !!label;
 
   return (
     <TouchableOpacity
       activeOpacity={0.8}
       style={[
         styles.container,
+        hasLabel && styles.containerWithText,
         !hasTopInStyle && { top: calculatedTop },
         style,
       ]}
@@ -86,6 +94,18 @@ const BackBtn: React.FC<BackBtnProps> = ({
       )}
 
       <ArrowLeft size={size} color={color || appliedTheme.colors.textPrimary} />
+      {hasLabel && (
+        <Text
+          style={[
+            styles.text,
+            { color: color || appliedTheme.colors.textPrimary },
+            textStyle,
+          ]}
+          color={color || appliedTheme.colors.textPrimary}
+        >
+          {label}
+        </Text>
+      )}
     </TouchableOpacity>
   );
 };
@@ -102,4 +122,17 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     overflow: 'hidden',
   },
+  containerWithText: {
+    flexDirection: 'row',
+    borderRadius: scale(20),
+    paddingHorizontal: scale(12),
+  },
+  text: {
+    fontSize: scale(14),
+    fontWeight: '600',
+    marginLeft: scale(8),
+    textShadowColor: 'rgba(0, 0, 0, 0.75)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 3,
+  },
 });

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

@@ -0,0 +1,156 @@
+import React 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 type { ISeriesItem } from '../types';
+import type { ITheme } from '../../../../theme';
+
+interface BottomControlsProps {
+  series: ISeriesItem;
+  episodeIndex: number;
+  videoCurrentTime: number;
+  videoDuration: number;
+  onEpisodesPress?: () => void;
+  theme: ITheme;
+}
+
+const BottomControls: React.FC<BottomControlsProps> = ({
+  series,
+  episodeIndex,
+  videoCurrentTime,
+  videoDuration,
+  onEpisodesPress,
+  theme,
+}) => {
+  const progressPercentage =
+    videoDuration > 0 ? (videoCurrentTime / videoDuration) * 100 : 0;
+
+  const truncatedTitle =
+    series.title.length <= 25
+      ? series.title
+      : series.title.slice(0, 25) + '...';
+
+  return (
+    <View style={styles.container}>
+      {/* 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}>
+        <View style={styles.progressBarWrapper}>
+          <View
+            style={[
+              styles.progressBarFill,
+              {
+                width: `${progressPercentage}%`,
+                backgroundColor: theme.colors.primary,
+              },
+            ]}
+          />
+          {videoDuration > 0 && (
+            <View
+              style={[
+                styles.progressBarKnob,
+                {
+                  left: `${progressPercentage}%`,
+                },
+              ]}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default BottomControls;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    zIndex: 10,
+    marginHorizontal: 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) }],
+  },
+});