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

package/src/components/ContentView/components/MiniInfo.tsx

@@ -3,7 +3,7 @@
  * @lastModified Tue 11 Nov 2025 at 09:23 PM
  */
 
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -60,188 +60,210 @@ export function formatCurrency(
   }).format(amount);
 }
 
-export const MiniInfo = ({
-  content,
-  theme,
-  userData,
-  isLoading = false,
-  style,
-  labels,
-  visible = true,
-}: Props): React.ReactElement | null => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  if (!visible) return null;
-  const textLabels = {
-    purchased: labels?.purchased || 'Purchased',
-    rented: labels?.rented || 'Rented',
-    buyOrRent: labels?.buyOrRent || 'Buy or Rent',
-    rentedExpiryPrefix: labels?.rentedExpiryPrefix || '',
-    purchasedMsg: labels?.purchasedMsg || 'You purchased this content',
-  };
+export const MiniInfo = React.memo(
+  ({
+    content,
+    theme,
+    userData,
+    isLoading = false,
+    style,
+    labels,
+    visible = true,
+  }: Props): React.ReactElement | null => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
 
-  if (isLoading) {
-    return (
-      <View
-        style={[
-          styles.container,
-          style?.container,
-          {
-            backgroundColor: appliedTheme.colors.background,
-            borderColor: appliedTheme.colors.border,
-          },
-        ]}
-      >
-        <SkeletonPlaceholder
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-        >
-          <SkeletonPlaceholder.Item
-            flexDirection="row"
-            alignItems="center"
-            marginBottom={scale(6)}
-          >
-            <SkeletonPlaceholder.Item
-              width={scale(100)}
-              height={scale(20)}
-              borderRadius={scale(4)}
-            />
-            <SkeletonPlaceholder.Item
-              width={scale(60)}
-              height={scale(20)}
-              borderRadius={scale(4)}
-              marginLeft={scale(8)}
-            />
-          </SkeletonPlaceholder.Item>
-
-          <SkeletonPlaceholder.Item
-            width={scale(120)}
-            height={scale(16)}
-            borderRadius={scale(4)}
-            marginBottom={scale(4)}
-          />
-
-          <SkeletonPlaceholder.Item
-            width={scale(80)}
-            height={scale(14)}
-            borderRadius={scale(4)}
-          />
-        </SkeletonPlaceholder>
-      </View>
+    // All hooks must be called before any early returns
+    const textLabels = useMemo(
+      () => ({
+        purchased: labels?.purchased || 'Purchased',
+        rented: labels?.rented || 'Rented',
+        buyOrRent: labels?.buyOrRent || 'Buy or Rent',
+        rentedExpiryPrefix: labels?.rentedExpiryPrefix || '',
+        purchasedMsg: labels?.purchasedMsg || 'You purchased this content',
+      }),
+      [labels]
     );
-  }
-
-  if (!content) return null;
 
-  const { content_offering_type, price, is_buy_or_rent, rent_duration } =
-    content;
+    const containerStyle = useMemo(
+      () => [
+        styles.container,
+        style?.container,
+        {
+          backgroundColor: appliedTheme.colors.background,
+          borderColor: appliedTheme.colors.border,
+        },
+      ],
+      [
+        style?.container,
+        appliedTheme.colors.background,
+        appliedTheme.colors.border,
+      ]
+    );
 
-  if (content_offering_type !== 'BUY_OR_RENT') return null;
+    const badgeStyle = useMemo(
+      () => [
+        styles.badge,
+        {
+          backgroundColor: appliedTheme.colors.primary,
+          shadowColor: appliedTheme.colors.textPrimary,
+        },
+        style?.badge,
+      ],
+      [
+        appliedTheme.colors.primary,
+        appliedTheme.colors.textPrimary,
+        style?.badge,
+      ]
+    );
 
-  const renderBadge = () => {
-    let text = textLabels.buyOrRent;
+    const badgeTextStyle = useMemo(
+      () => ({
+        color: appliedTheme.colors.onPrimary,
+        fontWeight: '600' as const,
+      }),
+      [appliedTheme.colors.onPrimary]
+    );
 
-    if (userData?.is_buy_or_rent === 'BUY') {
-      text = textLabels.purchased;
-    } else if (userData?.is_buy_or_rent === 'RENT') {
-      text = textLabels.rented;
-    }
+    // Memoize price info style
+    const priceTextStyle = useMemo(
+      () => [
+        styles.subTitle,
+        { color: appliedTheme.colors.textPrimary },
+        style?.price,
+      ],
+      [appliedTheme.colors.textPrimary, style?.price]
+    );
 
-    return (
-      <View
-        style={[
-          styles.badge,
-          {
-            backgroundColor: appliedTheme.colors.primary,
-            shadowColor: appliedTheme.colors.textPrimary,
-          },
-          style?.badge,
-        ]}
-      >
-        <Text
-          type="caption"
-          style={{ color: appliedTheme.colors.onPrimary, fontWeight: '600' }}
-        >
-          {text}
-        </Text>
-      </View>
+    // Memoize expiry text style
+    const expiryTextStyle = useMemo(
+      () => ({
+        color: appliedTheme.colors.textSecondary,
+        marginTop: scale(4),
+      }),
+      [appliedTheme.colors.textSecondary]
     );
-  };
 
-  const renderPriceInfo = () => {
-    if (!price) return null;
+    // Extract content values safely
+    const content_offering_type = content?.content_offering_type;
+    const price = content?.price;
+    const is_buy_or_rent = content?.is_buy_or_rent;
+    const rent_duration = content?.rent_duration;
 
-    const text =
-      is_buy_or_rent === 'BUY'
-        ? `Price: ${formatCurrency(price)}`
-        : `Rent: ${formatCurrency(price)} for ${rent_duration ?? 1} day(s)`;
+    const renderBadge = useCallback(() => {
+      let text = textLabels.buyOrRent;
 
-    return (
-      <Text
-        type="subtitle"
-        style={[
-          styles.subTitle,
-          { color: appliedTheme.colors.textPrimary },
-          style?.price,
-        ]}
-      >
-        {text}
-      </Text>
-    );
-  };
+      if (userData?.is_buy_or_rent === 'BUY') {
+        text = textLabels.purchased;
+      } else if (userData?.is_buy_or_rent === 'RENT') {
+        text = textLabels.rented;
+      }
 
-  const renderUserExpiry = () => {
-    if (!userData?.is_buy_or_rent) return null;
+      return (
+        <View style={badgeStyle}>
+          <Text type="caption" style={badgeTextStyle}>
+            {text}
+          </Text>
+        </View>
+      );
+    }, [textLabels, userData?.is_buy_or_rent, badgeStyle, badgeTextStyle]);
+
+    const renderPriceInfo = useCallback(() => {
+      if (!price) return null;
+
+      const text =
+        is_buy_or_rent === 'BUY'
+          ? `Price: ${formatCurrency(price)}`
+          : `Rent: ${formatCurrency(price)} for ${rent_duration ?? 1} day(s)`;
 
-    if (userData.is_buy_or_rent === 'BUY') {
       return (
-        <Text
-          type="caption"
-          style={{
-            color: appliedTheme.colors.textSecondary,
-            marginTop: scale(4),
-          }}
-        >
-          {textLabels.purchasedMsg}
+        <Text type="subtitle" style={priceTextStyle}>
+          {text}
         </Text>
       );
-    }
+    }, [price, is_buy_or_rent, rent_duration, priceTextStyle]);
+
+    const renderUserExpiry = useCallback(() => {
+      if (!userData?.is_buy_or_rent) return null;
+
+      if (userData.is_buy_or_rent === 'BUY') {
+        return (
+          <Text type="caption" style={expiryTextStyle}>
+            {textLabels.purchasedMsg}
+          </Text>
+        );
+      }
+
+      if (userData.is_buy_or_rent === 'RENT') {
+        return (
+          <Text type="caption" style={expiryTextStyle}>
+            {textLabels.rentedExpiryPrefix} {userData?.rent_expiry_date}
+          </Text>
+        );
+      }
+
+      return null;
+    }, [userData, textLabels, expiryTextStyle]);
 
-    if (userData.is_buy_or_rent === 'RENT') {
+    // Early returns after all hooks
+    if (!visible) return null;
+
+    if (isLoading) {
       return (
-        <Text
-          type="caption"
-          style={{
-            color: appliedTheme.colors.textSecondary,
-            marginTop: scale(4),
-          }}
-        >
-          {textLabels.rentedExpiryPrefix} {userData?.rent_expiry_date}
-        </Text>
+        <View style={containerStyle}>
+          <SkeletonPlaceholder
+            backgroundColor={appliedTheme.colors.skeletonBaseColor}
+            highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          >
+            <SkeletonPlaceholder.Item
+              flexDirection="row"
+              alignItems="center"
+              marginBottom={scale(6)}
+            >
+              <SkeletonPlaceholder.Item
+                width={scale(100)}
+                height={scale(20)}
+                borderRadius={scale(4)}
+              />
+              <SkeletonPlaceholder.Item
+                width={scale(60)}
+                height={scale(20)}
+                borderRadius={scale(4)}
+                marginLeft={scale(8)}
+              />
+            </SkeletonPlaceholder.Item>
+
+            <SkeletonPlaceholder.Item
+              width={scale(120)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+              marginBottom={scale(4)}
+            />
+
+            <SkeletonPlaceholder.Item
+              width={scale(80)}
+              height={scale(14)}
+              borderRadius={scale(4)}
+            />
+          </SkeletonPlaceholder>
+        </View>
       );
     }
 
-    return null;
-  };
+    if (!content) return null;
 
-  return (
-    <View
-      style={[
-        styles.container,
-        style?.container,
-        {
-          backgroundColor: appliedTheme.colors.background,
-          borderColor: appliedTheme.colors.border,
-        },
-      ]}
-    >
-      <View style={styles.headerRow}>{renderBadge()}</View>
+    if (content_offering_type !== 'BUY_OR_RENT') return null;
 
-      {!userData?.is_buy_or_rent && renderPriceInfo()}
+    return (
+      <View style={containerStyle}>
+        <View style={styles.headerRow}>{renderBadge()}</View>
 
-      {renderUserExpiry()}
-    </View>
-  );
-};
+        {!userData?.is_buy_or_rent && renderPriceInfo()}
+
+        {renderUserExpiry()}
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: {

package/src/components/ContentView/components/PlayButton.tsx

@@ -3,6 +3,7 @@
  * @lastModified Wed 02 Jul 2025 at 03:38 PM
  * */
 
+import React, { useMemo } from 'react';
 import {
   TouchableOpacity,
   StyleSheet,
@@ -10,6 +11,7 @@ import {
 } from 'react-native';
 import { PlayCircleIcon } from 'lucide-react-native';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useSafePressHandler } from '../../../hooks/useSafeCallback';
 
 interface Props {
   onPress?: (event: GestureResponderEvent) => void;
@@ -18,22 +20,31 @@ interface Props {
   backgroundColor?: string;
 }
 
-export const PlayButton = ({
-  onPress,
-  size = scale(40),
-  color = 'black',
-  backgroundColor = '#FFD700',
-}: Props) => {
-  return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={onPress}
-      style={[styles.button, { backgroundColor, borderRadius: size }]}
-    >
-      <PlayCircleIcon size={size} color={color} />
-    </TouchableOpacity>
-  );
-};
+export const PlayButton = React.memo(
+  ({
+    onPress,
+    size = scale(40),
+    color = 'black',
+    backgroundColor = '#FFD700',
+  }: Props) => {
+    const buttonStyle = useMemo(
+      () => [styles.button, { backgroundColor, borderRadius: size }],
+      [backgroundColor, size]
+    );
+
+    const handlePress = useSafePressHandler(onPress);
+
+    return (
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={handlePress}
+        style={buttonStyle}
+      >
+        <PlayCircleIcon size={size} color={color} />
+      </TouchableOpacity>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   button: {

package/src/components/ContentView/components/Title.tsx

@@ -3,7 +3,7 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   StyleSheet,
@@ -32,85 +32,102 @@ type Props = {
   };
 };
 
-export const Title = ({
-  title,
-  subtitle,
-  rating,
-  theme,
-  isLoading = false,
-  style,
-}: Props): React.ReactElement => {
-  if (isLoading) {
-    return (
-      <View style={StyleSheet.flatten([styles.container, style?.container])}>
-        <SkeletonPlaceholder
-          backgroundColor={theme.colors.skeletonBaseColor}
-          highlightColor={theme.colors.skeletonHighlightColor}
-        >
-          <SkeletonPlaceholder.Item>
-            {/* Title & Subtitle */}
-            <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
-              <SkeletonPlaceholder.Item
-                width={scale(160)}
-                height={scale(22)}
-                borderRadius={scale(4)}
-              />
+export const Title = React.memo(
+  ({
+    title,
+    subtitle,
+    rating,
+    theme,
+    isLoading = false,
+    style,
+  }: Props): React.ReactElement => {
+    const containerStyle = useMemo(
+      () => StyleSheet.flatten([styles.container, style?.container]),
+      [style?.container]
+    );
+
+    const titleStyle = useMemo(
+      () => StyleSheet.flatten([styles.title, style?.title]),
+      [style?.title]
+    );
+
+    const subTitleStyle = useMemo(
+      () => StyleSheet.flatten([styles.subTitle, style?.subTitle]),
+      [style?.subTitle]
+    );
+
+    const ratingStyle = useMemo(
+      () => StyleSheet.flatten([styles.rating, style?.rating]),
+      [style?.rating]
+    );
+
+    if (isLoading) {
+      return (
+        <View style={containerStyle}>
+          <SkeletonPlaceholder
+            backgroundColor={theme.colors.skeletonBaseColor}
+            highlightColor={theme.colors.skeletonHighlightColor}
+          >
+            <SkeletonPlaceholder.Item>
+              {/* Title & Subtitle */}
+              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
+                <SkeletonPlaceholder.Item
+                  width={scale(160)}
+                  height={scale(22)}
+                  borderRadius={scale(4)}
+                />
+                <SkeletonPlaceholder.Item
+                  width={scale(60)}
+                  height={scale(22)}
+                  borderRadius={scale(4)}
+                  marginLeft={scale(6)}
+                />
+              </SkeletonPlaceholder.Item>
+
+              {/* Rating */}
               <SkeletonPlaceholder.Item
-                width={scale(60)}
-                height={scale(22)}
+                width={scale(36)}
+                height={scale(16)}
                 borderRadius={scale(4)}
-                marginLeft={scale(6)}
+                marginTop={scale(6)}
               />
             </SkeletonPlaceholder.Item>
+          </SkeletonPlaceholder>
+        </View>
+      );
+    }
+
+    return (
+      <View style={containerStyle}>
+        <View>
+          <Text
+            color={theme.colors.textPrimary}
+            style={titleStyle}
+            ellipsizeMode="tail"
+          >
+            {title}
+            {!!subtitle && (
+              <Text
+                color={theme.colors.textSecondary}
+                style={subTitleStyle}
+                ellipsizeMode="tail"
+              >
+                {' '}
+                {`: ${subtitle}`}
+              </Text>
+            )}
+          </Text>
+        </View>
 
-            {/* Rating */}
-            <SkeletonPlaceholder.Item
-              width={scale(36)}
-              height={scale(16)}
-              borderRadius={scale(4)}
-              marginTop={scale(6)}
-            />
-          </SkeletonPlaceholder.Item>
-        </SkeletonPlaceholder>
+        {!!rating && (
+          <Text color={theme.colors.textSecondary} style={ratingStyle}>
+            ⭐ {rating}
+          </Text>
+        )}
       </View>
     );
   }
-
-  return (
-    <View style={StyleSheet.flatten([styles.container, style?.container])}>
-      <View>
-        <Text
-          color={theme.colors.textPrimary}
-          style={StyleSheet.flatten([styles.title, style?.title])}
-          // numberOfLines={1}
-          ellipsizeMode="tail"
-        >
-          {title}
-          {!!subtitle && (
-            <Text
-              color={theme.colors.textSecondary}
-              style={StyleSheet.flatten([styles.subTitle, style?.subTitle])}
-              // numberOfLines={1}
-              ellipsizeMode="tail"
-            >
-              {' '}
-              {`: ${subtitle}`}
-            </Text>
-          )}
-        </Text>
-      </View>
-
-      {!!rating && (
-        <Text
-          color={theme.colors.textSecondary}
-          style={StyleSheet.flatten([styles.rating, style?.rating])}
-        >
-          ⭐ {rating}
-        </Text>
-      )}
-    </View>
-  );
-};
+);
 
 const styles = StyleSheet.create({
   container: {