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

package/src/components/Input/InputOne.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Tue 17 Jun 2025 at 11:20 AM
  */
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import {
   StyleSheet,
   View,
@@ -45,9 +45,20 @@ const InputOne: React.FC<InputOneProps> = ({
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
   const [showPassword, setShowPassword] = useState(false);
-  const [isFocused, setIsFocused] = useState(false); // 👈 focus state जोड़ी गई
-  const isPasswordField = !!secureTextEntry;
-  const inputSecure = isPasswordField && !showPassword;
+  const [isFocused, setIsFocused] = useState(false);
+
+  const isPasswordField = useMemo(() => !!secureTextEntry, [secureTextEntry]);
+  const inputSecure = useMemo(
+    () => isPasswordField && !showPassword,
+    [isPasswordField, showPassword]
+  );
+
+  const handleFocus = useCallback(() => setIsFocused(true), []);
+  const handleBlur = useCallback(() => setIsFocused(false), []);
+  const togglePassword = useCallback(
+    () => setShowPassword((prev) => !prev),
+    []
+  );
 
   const {
     textPrimary,
@@ -57,126 +68,143 @@ const InputOne: React.FC<InputOneProps> = ({
     outlineDisabled,
     error: inputErrorColor,
     background,
-    primary, // अगर theme में primary color हो तो उसे भी use करेंगे
+    primary,
   } = appliedTheme?.colors || {};
 
+  const labelColor = useMemo(
+    () => (error ? inputErrorColor : disabled ? textDisabled : textPrimary),
+    [error, disabled, inputErrorColor, textDisabled, textPrimary]
+  );
+
+  const labelContainerStyle = useMemo(
+    () => [
+      styles.labelContainer,
+      { backgroundColor: background, borderRadius: scale(5) },
+    ],
+    [background]
+  );
+
+  const labelStyle = useMemo(
+    () => [styles.label, { color: labelColor }],
+    [labelColor]
+  );
+
+  const borderColor = useMemo(
+    () =>
+      disabled
+        ? outlineDisabled
+        : error
+          ? inputErrorColor
+          : isFocused
+            ? primary || '#007AFF'
+            : outline,
+    [
+      disabled,
+      error,
+      isFocused,
+      outlineDisabled,
+      inputErrorColor,
+      primary,
+      outline,
+    ]
+  );
+
+  const wrapperBackgroundColor = useMemo(
+    () =>
+      disabled
+        ? appliedTheme.colors.backgroundDisabled
+        : error
+          ? appliedTheme.colors.errorContainer
+          : appliedTheme.colors.background,
+    [disabled, error, appliedTheme.colors]
+  );
+
+  const inputWrapperStyle = useMemo(
+    () => [
+      styles.inputWrapper,
+      {
+        borderColor,
+        backgroundColor: wrapperBackgroundColor,
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+      },
+    ],
+    [borderColor, wrapperBackgroundColor]
+  );
+
+  const inputTextColor = useMemo(
+    () => (disabled ? textDisabled : error ? inputErrorColor : textPrimary),
+    [disabled, error, textDisabled, inputErrorColor, textPrimary]
+  );
+
+  const inputColorStyle = useMemo(
+    () => [styles.input, { color: inputTextColor }, inputStyle],
+    [inputTextColor, inputStyle]
+  );
+
+  const placeholderColor = useMemo(
+    () => placeholderTextColor || (disabled ? textDisabled : textSecondary),
+    [placeholderTextColor, disabled, textDisabled, textSecondary]
+  );
+
+  const cursorColor = useMemo(
+    () =>
+      disabled
+        ? textDisabled
+        : error
+          ? inputErrorColor
+          : isFocused
+            ? primary || '#007AFF'
+            : textPrimary,
+    [
+      disabled,
+      error,
+      isFocused,
+      textDisabled,
+      inputErrorColor,
+      primary,
+      textPrimary,
+    ]
+  );
+
+  const iconColor = useMemo(
+    () => (disabled ? textDisabled : error ? inputErrorColor : textPrimary),
+    [disabled, error, textDisabled, inputErrorColor, textPrimary]
+  );
+
+  const textContentType = useMemo(
+    () => (isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'),
+    [isPasswordField, props.textContentType]
+  );
+
   return (
     <View style={[styles.container, containerStyle]}>
       {label && (
-        <View
-          style={[
-            styles.labelContainer,
-            { backgroundColor: background, borderRadius: scale(5) },
-          ]}
-        >
-          <Text
-            style={[
-              styles.label,
-              {
-                color: error
-                  ? inputErrorColor
-                  : disabled
-                    ? textDisabled
-                    : textPrimary,
-              },
-            ]}
-          >
-            {label}
-          </Text>
+        <View style={labelContainerStyle}>
+          <Text style={labelStyle}>{label}</Text>
         </View>
       )}
 
-      <View
-        style={[
-          styles.inputWrapper,
-          {
-            borderColor: disabled
-              ? outlineDisabled
-              : error
-                ? inputErrorColor
-                : isFocused
-                  ? primary || '#007AFF'
-                  : outline,
-            backgroundColor: disabled
-              ? appliedTheme.colors.backgroundDisabled
-              : error
-                ? appliedTheme.colors.errorContainer
-                : appliedTheme.colors.background,
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        ]}
-      >
+      <View style={inputWrapperStyle}>
         <TextInput
           {...props}
           editable={!disabled}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          placeholderTextColor={
-            placeholderTextColor || (disabled ? textDisabled : textSecondary)
-          }
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={placeholderColor}
           secureTextEntry={inputSecure}
-          textContentType={
-            isPasswordField ? 'oneTimeCode' : props.textContentType || 'none'
-          }
-          cursorColor={
-            disabled
-              ? textDisabled
-              : error
-                ? inputErrorColor
-                : isFocused
-                  ? primary || '#007AFF'
-                  : textPrimary
-          }
-          selectionColor={
-            disabled
-              ? textDisabled
-              : error
-                ? inputErrorColor
-                : isFocused
-                  ? primary || '#007AFF'
-                  : textPrimary
-          }
-          style={[
-            styles.input,
-            {
-              color: disabled
-                ? textDisabled
-                : error
-                  ? inputErrorColor
-                  : textPrimary,
-            },
-            inputStyle,
-          ]}
+          textContentType={textContentType}
+          cursorColor={cursorColor}
+          selectionColor={cursorColor}
+          style={inputColorStyle}
         />
 
         {isPasswordField && (
-          <TouchableOpacity
-            onPress={() => setShowPassword((prev) => !prev)}
-            disabled={disabled}
-          >
+          <TouchableOpacity onPress={togglePassword} disabled={disabled}>
             {showPassword ? (
-              <EyeOff
-                size={scale(20)}
-                color={
-                  disabled
-                    ? textDisabled
-                    : error
-                      ? inputErrorColor
-                      : textPrimary
-                }
-              />
+              <EyeOff size={scale(20)} color={iconColor} />
             ) : (
-              <Eye
-                size={scale(20)}
-                color={
-                  disabled
-                    ? textDisabled
-                    : error
-                      ? inputErrorColor
-                      : textPrimary
-                }
-              />
+              <Eye size={scale(20)} color={iconColor} />
             )}
           </TouchableOpacity>
         )}
@@ -191,7 +219,7 @@ const InputOne: React.FC<InputOneProps> = ({
   );
 };
 
-export default InputOne;
+export default React.memo(InputOne);
 
 const styles = StyleSheet.create({
   container: {

package/src/components/Loader/Loader.tsx

@@ -5,13 +5,13 @@ interface LoaderProps {
   color?: string;
 }
 
-export const Loader: React.FC<LoaderProps> = ({ color }) => {
+export const Loader: React.FC<LoaderProps> = React.memo(({ color }) => {
   return (
     <View style={styles.root}>
       <ActivityIndicator size="large" color={color} />
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   root: {

package/src/components/Logo/Logo.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Sun 08 Jun 2025 at 03:23 PM
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Image,
   View,
@@ -49,29 +49,50 @@ export const Logo: React.FC<ILogoProps> = ({
   } = useSplashCache({
     logoUrl: logoUri,
   });
-  const finalSource = logoPath
-    ? {
-        uri: logoPath.startsWith('file://') ? logoPath : `file://${logoPath}`,
-      }
-    : logoUri
-      ? { uri: logoUri }
-      : fallbackUri
-        ? { uri: fallbackUri }
-        : undefined;
+  const finalSource = useMemo(
+    () =>
+      logoPath
+        ? {
+            uri: logoPath.startsWith('file://')
+              ? logoPath
+              : `file://${logoPath}`,
+          }
+        : logoUri
+          ? { uri: logoUri }
+          : fallbackUri
+            ? { uri: fallbackUri }
+            : undefined,
+    [logoPath, logoUri, fallbackUri]
+  );
+
+  const containerStyleMemo = useMemo(
+    () => [
+      {
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+      },
+      containerStyle,
+    ],
+    [containerStyle]
+  );
+
+  const imageStyleMemo = useMemo(
+    () => [
+      {
+        width: moderateScale(width),
+        height: moderateScale(height),
+        ...(aspectRatio ? { aspectRatio } : {}),
+      },
+      imageStyle,
+    ],
+    [width, height, aspectRatio, imageStyle]
+  );
 
   if (!finalSource && !isLoading) {
     return null;
   }
   return (
-    <View
-      style={[
-        {
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-        containerStyle,
-      ]}
-    >
+    <View style={containerStyleMemo}>
       {isLoading || isSplashLoading ? (
         <SkeletonPlaceholder
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
@@ -91,14 +112,7 @@ export const Logo: React.FC<ILogoProps> = ({
           <Image
             source={finalSource}
             resizeMode={resizeMode}
-            style={[
-              {
-                width: moderateScale(width),
-                height: moderateScale(height),
-                ...(aspectRatio ? { aspectRatio } : {}),
-              },
-              imageStyle,
-            ]}
+            style={imageStyleMemo}
             onError={() => {
               return null;
             }}
@@ -108,3 +122,5 @@ export const Logo: React.FC<ILogoProps> = ({
     </View>
   );
 };
+
+export default React.memo(Logo);

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) }],
+  },
+});