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

package/src/components/ContentView/components/HeroBanner.tsx

@@ -3,7 +3,7 @@
  * @lastModified Wed 02 Jul 2025 at 04:50 PM
  */
 
-import { useState, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { View, StyleSheet, Animated } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
@@ -25,306 +25,348 @@ const BANNER_HEIGHT = verticalScale(200);
 const GRADIENT_LOCATIONS = [0.75, 0.9, 1];
 const BACK_BTN_SIZE = scale(35);
 
-export const HeroBanner = ({
-  backgroundImage,
-  title,
-  theme: themeOverride,
-  isLoading = false,
-  onPressPlay,
-  onBackPress,
-  style,
-  renderButtons,
-  renderSkeletons,
-  menuActions,
-  content_offering_type,
-}: HeroBannerProps) => {
-  const { theme } = useInternalTheme(themeOverride);
-  const [hasImageLoaded, setHasImageLoaded] = useState(false);
-  const [imageLoadError, setImageLoadError] = useState(false);
+export const HeroBanner = React.memo(
+  ({
+    backgroundImage,
+    title,
+    theme: themeOverride,
+    isLoading = false,
+    onPressPlay,
+    onBackPress,
+    style,
+    renderButtons,
+    renderSkeletons,
+    menuActions,
+    content_offering_type,
+  }: HeroBannerProps) => {
+    const { theme } = useInternalTheme(themeOverride);
+    const [hasImageLoaded, setHasImageLoaded] = useState(false);
+    const [imageLoadError, setImageLoadError] = useState(false);
 
-  const handlePressPlay = useCallback(
-    ({ is_trailer }: { is_trailer: boolean }) => {
-      onPressPlay?.({ is_trailer });
-    },
-    [onPressPlay]
-  );
+    // Reset image loading state when isLoading prop changes
+    useEffect(() => {
+      if (isLoading) {
+        setHasImageLoaded(false);
+        setImageLoadError(false);
+      }
+    }, [isLoading]);
 
-  const showSkeleton = isLoading || (!hasImageLoaded && !imageLoadError);
+    // Reset when backgroundImage changes
+    useEffect(() => {
+      if (backgroundImage) {
+        setHasImageLoaded(false);
+        setImageLoadError(false);
+      }
+    }, [backgroundImage]);
 
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          height: BANNER_HEIGHT,
-          width: '100%',
-          overflow: 'hidden',
-          position: 'relative',
-          backgroundColor: theme.colors.backgroundDisabled,
-        },
-        rentOrBuyIcon: {
-          position: 'absolute',
-          bottom: verticalScale(20),
-          zIndex: 4,
-          left: scale(10),
-        },
-        centeredContent: {
-          ...StyleSheet.absoluteFillObject,
-          justifyContent: 'center',
-          alignItems: 'center',
-          zIndex: 4,
-          pointerEvents: 'box-none',
-        },
-        skeletonContainer: {
-          ...StyleSheet.absoluteFillObject,
-          backgroundColor: theme.colors.backgroundDisabled,
-          justifyContent: 'center',
-          alignItems: 'center',
-          zIndex: 2,
-        },
-        errorContainer: {
-          ...StyleSheet.absoluteFillObject,
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: theme.colors.backgroundDisabled,
-          zIndex: 1,
-        },
-        errorText: {
-          color: theme.colors.textSecondary,
-          fontSize: RFValue(15),
-          textAlign: 'center',
-        },
-        imageContainer: {
-          ...StyleSheet.absoluteFillObject,
-          zIndex: 0,
-        },
-        trailerButtonWrapper: {
-          ...StyleSheet.absoluteFillObject,
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          bottom: verticalScale(10),
-          zIndex: 4,
-          pointerEvents: 'box-none',
-        },
-        backBtnSkeleton: {
-          position: 'absolute',
-          top: scale(6),
-          left: scale(13),
-          zIndex: 4,
-        },
-        menuBtnSkeleton: {
-          position: 'absolute',
-          top: scale(6),
-          right: scale(13),
-          zIndex: 4,
-        },
-        defaultBackBtn: {
-          position: 'absolute',
-          top: scale(6),
-          left: scale(13),
-          zIndex: 4,
-          backgroundColor: theme.colors.background,
-        },
-        defaultMenuBtn: {
-          position: 'absolute',
-          top: scale(6),
-          right: scale(13),
-          zIndex: 4,
-          backgroundColor: theme.colors.background,
-        },
-        badge: {
-          position: 'absolute',
-          bottom: verticalScale(20),
-          left: scale(10),
-          paddingHorizontal: scale(8),
-          paddingVertical: scale(4),
-          borderRadius: scale(8),
-        },
-      }),
-    [theme]
-  );
+    const handlePressPlay = useCallback(
+      ({ is_trailer }: { is_trailer: boolean }) => {
+        onPressPlay?.({ is_trailer });
+      },
+      [onPressPlay]
+    );
 
-  return (
-    <View style={[styles.container, style]} accessibilityLabel={title}>
-      {/* Back Button */}
-      {showSkeleton
-        ? (renderSkeletons?.back?.() ?? (
-            <View style={styles.backBtnSkeleton}>
-              <SkeletonPlaceholder
-                backgroundColor={theme.colors.skeletonBaseColor}
-                highlightColor={theme.colors.skeletonHighlightColor}
-                speed={800}
-              >
-                <SkeletonPlaceholder.Item
-                  width={BACK_BTN_SIZE}
-                  height={BACK_BTN_SIZE}
-                  borderRadius={BACK_BTN_SIZE / 2}
-                />
-              </SkeletonPlaceholder>
-            </View>
-          ))
-        : (renderButtons?.back?.() ??
-          (onBackPress && (
-            <BackBtn
-              theme={themeOverride}
-              onPress={onBackPress}
-              style={styles.defaultBackBtn}
-              size={scale(20)}
-            />
-          )))}
+    const showSkeleton = useMemo(
+      () =>
+        isLoading || (!hasImageLoaded && !imageLoadError && backgroundImage),
+      [isLoading, hasImageLoaded, imageLoadError, backgroundImage]
+    );
 
-      {/* Menu Button */}
-      {showSkeleton && menuActions
-        ? (renderSkeletons?.menu?.() ?? (
-            <View style={styles.menuBtnSkeleton}>
-              <SkeletonPlaceholder
-                backgroundColor={theme.colors.skeletonBaseColor}
-                highlightColor={theme.colors.skeletonHighlightColor}
-                speed={800}
-              >
-                <SkeletonPlaceholder.Item
-                  width={BACK_BTN_SIZE}
-                  height={BACK_BTN_SIZE}
-                  borderRadius={BACK_BTN_SIZE / 2}
-                />
-              </SkeletonPlaceholder>
-            </View>
-          ))
-        : menuActions &&
-          (renderButtons?.menu?.() ?? (
-            <MenuBtn
-              theme={themeOverride}
-              style={styles.defaultMenuBtn}
-              actions={menuActions}
-            />
-          ))}
+    const handleImageLoad = useCallback(() => {
+      setHasImageLoaded(true);
+    }, []);
 
-      {/* Gradient Overlay */}
-      <LinearGradient
-        colors={theme.colors.heroBannerGradient}
-        style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
-        locations={GRADIENT_LOCATIONS}
-      />
+    const handleImageError = useCallback(() => {
+      setImageLoadError(true);
+    }, []);
 
-      {/* Background Image */}
-      {!isLoading && (
-        <>
-          <View style={styles.imageContainer}>
-            <FastImage
-              style={StyleSheet.absoluteFillObject}
-              source={{
-                uri: backgroundImage,
-                cache: FastImage.cacheControl.immutable,
-              }}
-              resizeMode={FastImage.resizeMode.cover}
-              onLoad={() => setHasImageLoaded(true)}
-              onError={() => setImageLoadError(true)}
-              accessibilityLabel={`Background image for ${title}`}
-            />
-          </View>
-          {/* Badge above gradient */}
-          {content_offering_type && content_offering_type === 'FREE' && (
-            <View
-              style={[
-                styles.badge,
-                { backgroundColor: theme.colors.primary, zIndex: 2 },
-              ]}
-            >
-              <Text
-                type="caption"
-                style={{ color: theme.colors.onPrimary, fontWeight: '600' }}
-                theme={themeOverride}
-              >
-                {content_offering_type}
-              </Text>
-            </View>
-          )}
+    // Memoize image source
+    const imageSource = useMemo(
+      () => ({
+        uri: backgroundImage,
+        cache: FastImage.cacheControl.immutable,
+      }),
+      [backgroundImage]
+    );
 
-          {content_offering_type && (
-            <RentOrBuyIcon
-              size={30}
-              theme={theme}
-              style={[styles.rentOrBuyIcon, { zIndex: 2 }]}
-              content_offering_type={content_offering_type}
-            />
-          )}
-        </>
-      )}
+    // Memoize gradient colors
+    const gradientColors = useMemo(
+      () => theme.colors.heroBannerGradient,
+      [theme.colors.heroBannerGradient]
+    );
 
-      {/* Skeleton UI */}
-      {showSkeleton && (
-        <>
-          <View style={styles.skeletonContainer}>
-            {renderSkeletons?.play?.() ?? (
-              <SkeletonPlaceholder
-                backgroundColor={theme.colors.skeletonBaseColor}
-                highlightColor={theme.colors.skeletonHighlightColor}
-                speed={800}
-              >
-                <SkeletonPlaceholder.Item
-                  width="100%"
-                  height="100%"
-                  justifyContent="center"
-                  alignItems="center"
+    const styles = useMemo(
+      () =>
+        StyleSheet.create({
+          container: {
+            height: BANNER_HEIGHT,
+            width: '100%',
+            overflow: 'hidden',
+            position: 'relative',
+            backgroundColor: theme.colors.backgroundDisabled,
+          },
+          rentOrBuyIcon: {
+            position: 'absolute',
+            bottom: verticalScale(20),
+            zIndex: 4,
+            left: scale(10),
+          },
+          centeredContent: {
+            ...StyleSheet.absoluteFillObject,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 4,
+            pointerEvents: 'box-none',
+          },
+          skeletonContainer: {
+            ...StyleSheet.absoluteFillObject,
+            backgroundColor: theme.colors.backgroundDisabled,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 2,
+          },
+          errorContainer: {
+            ...StyleSheet.absoluteFillObject,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: theme.colors.backgroundDisabled,
+            zIndex: 1,
+          },
+          errorText: {
+            color: theme.colors.textSecondary,
+            fontSize: RFValue(15),
+            textAlign: 'center',
+          },
+          imageContainer: {
+            ...StyleSheet.absoluteFillObject,
+            zIndex: 0,
+          },
+          trailerButtonWrapper: {
+            ...StyleSheet.absoluteFillObject,
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            bottom: verticalScale(10),
+            zIndex: 4,
+            pointerEvents: 'box-none',
+          },
+          backBtnSkeleton: {
+            position: 'absolute',
+            top: scale(6),
+            left: scale(13),
+            zIndex: 4,
+          },
+          menuBtnSkeleton: {
+            position: 'absolute',
+            top: scale(6),
+            right: scale(13),
+            zIndex: 4,
+          },
+          defaultBackBtn: {
+            position: 'absolute',
+            top: scale(6),
+            left: scale(13),
+            zIndex: 4,
+            backgroundColor: theme.colors.background,
+          },
+          defaultMenuBtn: {
+            position: 'absolute',
+            top: scale(6),
+            right: scale(13),
+            zIndex: 4,
+            backgroundColor: theme.colors.background,
+          },
+          badge: {
+            position: 'absolute',
+            bottom: verticalScale(20),
+            left: scale(10),
+            paddingHorizontal: scale(8),
+            paddingVertical: scale(4),
+            borderRadius: scale(8),
+          },
+        }),
+      [theme]
+    );
+
+    return (
+      <View style={[styles.container, style]} accessibilityLabel={title}>
+        {/* Back Button */}
+        {showSkeleton
+          ? (renderSkeletons?.back?.() ?? (
+              <View style={styles.backBtnSkeleton}>
+                <SkeletonPlaceholder
+                  backgroundColor={theme.colors.skeletonBaseColor}
+                  highlightColor={theme.colors.skeletonHighlightColor}
+                  speed={800}
                 >
                   <SkeletonPlaceholder.Item
-                    width={SKELETON_CIRCLE_SIZE}
-                    height={SKELETON_CIRCLE_SIZE}
-                    borderRadius={SKELETON_CIRCLE_SIZE / 2}
+                    width={BACK_BTN_SIZE}
+                    height={BACK_BTN_SIZE}
+                    borderRadius={BACK_BTN_SIZE / 2}
                   />
-                </SkeletonPlaceholder.Item>
-              </SkeletonPlaceholder>
-            )}
-          </View>
+                </SkeletonPlaceholder>
+              </View>
+            ))
+          : (renderButtons?.back?.() ??
+            (onBackPress && (
+              <BackBtn
+                theme={themeOverride}
+                onPress={onBackPress}
+                style={styles.defaultBackBtn}
+                size={scale(20)}
+              />
+            )))}
 
-          <View style={styles.trailerButtonWrapper}>
-            {renderSkeletons?.trailer?.() ?? (
-              <SkeletonPlaceholder
-                backgroundColor={theme.colors.skeletonBaseColor}
-                highlightColor={theme.colors.skeletonHighlightColor}
-                speed={800}
-              >
-                <SkeletonPlaceholder.Item
-                  width={scale(110)}
-                  height={verticalScale(25)}
-                  borderRadius={scale(14)}
-                />
-              </SkeletonPlaceholder>
-            )}
-          </View>
-        </>
-      )}
+        {/* Menu Button */}
+        {showSkeleton && menuActions
+          ? (renderSkeletons?.menu?.() ?? (
+              <View style={styles.menuBtnSkeleton}>
+                <SkeletonPlaceholder
+                  backgroundColor={theme.colors.skeletonBaseColor}
+                  highlightColor={theme.colors.skeletonHighlightColor}
+                  speed={800}
+                >
+                  <SkeletonPlaceholder.Item
+                    width={BACK_BTN_SIZE}
+                    height={BACK_BTN_SIZE}
+                    borderRadius={BACK_BTN_SIZE / 2}
+                  />
+                </SkeletonPlaceholder>
+              </View>
+            ))
+          : menuActions &&
+            (renderButtons?.menu?.() ?? (
+              <MenuBtn
+                theme={themeOverride}
+                style={styles.defaultMenuBtn}
+                actions={menuActions}
+              />
+            ))}
+
+        {/* Gradient Overlay */}
+        <LinearGradient
+          colors={gradientColors}
+          style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
+          locations={GRADIENT_LOCATIONS}
+        />
 
-      {/* Play & Trailer Buttons */}
-      {!showSkeleton && !imageLoadError && (
-        <>
-          <Animated.View style={styles.centeredContent}>
-            {renderButtons?.play?.() ?? (
-              <PlayButton
-                color={theme.colors.buttonText}
-                backgroundColor={theme.colors.button}
-                onPress={() => handlePressPlay({ is_trailer: false })}
+        {/* Background Image */}
+        {!isLoading && (
+          <>
+            <View style={styles.imageContainer}>
+              <FastImage
+                style={StyleSheet.absoluteFillObject}
+                source={imageSource}
+                resizeMode={FastImage.resizeMode.cover}
+                onLoad={handleImageLoad}
+                onError={handleImageError}
+                accessibilityLabel={`Background image for ${title}`}
               />
+            </View>
+            {/* Badge above gradient */}
+            {content_offering_type && content_offering_type === 'FREE' && (
+              <View
+                style={[
+                  styles.badge,
+                  { backgroundColor: theme.colors.primary, zIndex: 2 },
+                ]}
+              >
+                <Text
+                  type="caption"
+                  style={{ color: theme.colors.onPrimary, fontWeight: '600' }}
+                  theme={themeOverride}
+                >
+                  {content_offering_type}
+                </Text>
+              </View>
             )}
-          </Animated.View>
 
-          <Animated.View style={styles.trailerButtonWrapper}>
-            {renderButtons?.trailer?.() ?? (
-              <TrailerButton
-                color={theme.colors.buttonText}
-                backgroundColor={theme.colors.button}
-                onPress={() => handlePressPlay({ is_trailer: true })}
+            {content_offering_type && (
+              <RentOrBuyIcon
+                size={30}
+                theme={theme}
+                style={[styles.rentOrBuyIcon, { zIndex: 2 }]}
+                content_offering_type={content_offering_type}
               />
             )}
-          </Animated.View>
-        </>
-      )}
+          </>
+        )}
+
+        {/* Skeleton UI */}
+        {showSkeleton && (
+          <>
+            <View style={styles.skeletonContainer}>
+              {renderSkeletons?.play?.() ?? (
+                <SkeletonPlaceholder
+                  backgroundColor={theme.colors.skeletonBaseColor}
+                  highlightColor={theme.colors.skeletonHighlightColor}
+                  speed={800}
+                >
+                  <SkeletonPlaceholder.Item
+                    width="100%"
+                    height="100%"
+                    justifyContent="center"
+                    alignItems="center"
+                  >
+                    <SkeletonPlaceholder.Item
+                      width={SKELETON_CIRCLE_SIZE}
+                      height={SKELETON_CIRCLE_SIZE}
+                      borderRadius={SKELETON_CIRCLE_SIZE / 2}
+                    />
+                  </SkeletonPlaceholder.Item>
+                </SkeletonPlaceholder>
+              )}
+            </View>
+
+            <View style={styles.trailerButtonWrapper}>
+              {renderSkeletons?.trailer?.() ?? (
+                <SkeletonPlaceholder
+                  backgroundColor={theme.colors.skeletonBaseColor}
+                  highlightColor={theme.colors.skeletonHighlightColor}
+                  speed={800}
+                >
+                  <SkeletonPlaceholder.Item
+                    width={scale(110)}
+                    height={verticalScale(25)}
+                    borderRadius={scale(14)}
+                  />
+                </SkeletonPlaceholder>
+              )}
+            </View>
+          </>
+        )}
 
-      {/* Error UI */}
-      {imageLoadError && !isLoading && (
-        <Animated.View style={styles.errorContainer}>
-          <Text style={styles.errorText}>Failed to load image</Text>
-        </Animated.View>
-      )}
-    </View>
-  );
-};
+        {/* Play & Trailer Buttons */}
+        {!showSkeleton && !imageLoadError && (
+          <>
+            <Animated.View style={styles.centeredContent}>
+              {renderButtons?.play?.() ?? (
+                <PlayButton
+                  color={theme.colors.buttonText}
+                  backgroundColor={theme.colors.button}
+                  onPress={() => handlePressPlay({ is_trailer: false })}
+                />
+              )}
+            </Animated.View>
+
+            <Animated.View style={styles.trailerButtonWrapper}>
+              {renderButtons?.trailer?.() ?? (
+                <TrailerButton
+                  color={theme.colors.buttonText}
+                  backgroundColor={theme.colors.button}
+                  onPress={() => handlePressPlay({ is_trailer: true })}
+                />
+              )}
+            </Animated.View>
+          </>
+        )}
+
+        {/* Error UI */}
+        {imageLoadError && !isLoading && (
+          <Animated.View style={styles.errorContainer}>
+            <Text style={styles.errorText}>Failed to load image</Text>
+          </Animated.View>
+        )}
+      </View>
+    );
+  }
+);