@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

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

@@ -0,0 +1,413 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Tue 14 Jul 2026 at 3:57 PM
+ */
+
+// ─── Imports ─────────────────────────────────────────────────────────────────
+
+import React, { 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';
+import { scale, verticalScale } from 'react-native-size-matters';
+import FastImage, { type ImageStyle } from 'react-native-fast-image';
+import tinycolor from 'tinycolor2';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+import { PlayButton } from '../../shared/PlayButton';
+import { TrailerButton } from '../../shared/TrailerButton';
+import BackBtn from '../../../Button/BackBtn';
+import MenuBtn from '../../../Button/MenuBtn';
+import RentOrBuyIcon from '../../../Content/Card/components/RentOrBuyIcon';
+import LiveBadge from '../../../Content/Card/components/LiveBadge';
+import { Text } from '../../../Text';
+import { useTheme } from '../../../../theme';
+import { useImageLoader } from '../../../../hooks/Images';
+import type { HeroBannerProps } from '../../../../types/content/content-view.types';
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+
+const BANNER_HEIGHT = verticalScale(200);
+const BACK_BTN_SIZE = scale(35);
+const SKELETON_CIRCLE_SIZE = scale(50);
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const HeroBanner = React.memo(
+  ({
+    backgroundImage,
+    title,
+    theme: themeOverride,
+    isLoading = false,
+    onPressPlay,
+    onBackPress,
+    menuActions,
+    content_offering_type,
+    contentType,
+  }: HeroBannerProps) => {
+    const { theme } = useTheme(themeOverride);
+    const isLiveStream = contentType === 'live_stream';
+
+    const {
+      imageError,
+      showSkeleton: imageLoadingSkeleton,
+      imageSource,
+      handleLoad: handleImageLoad,
+      handleError: handleImageError,
+    } = useImageLoader({
+      imageUri: backgroundImage || '',
+      isLoading,
+    });
+
+    const showSkeleton = useMemo(
+      () => isLoading || (imageLoadingSkeleton && !!backgroundImage),
+      [isLoading, imageLoadingSkeleton, backgroundImage]
+    );
+
+    const shouldShowLiveBadge = !showSkeleton && !imageError && isLiveStream;
+    const showHeader = !!(onBackPress || shouldShowLiveBadge || menuActions);
+
+    const gradientColors = useMemo(() => {
+      const base = theme.colors.background;
+      return [
+        tinycolor(base).toRgbString(),
+        tinycolor(base).setAlpha(0.66).toRgbString(),
+        tinycolor(base).setAlpha(0.2).toRgbString(),
+        tinycolor(base).setAlpha(0.1).toRgbString(),
+        'rgba(0, 0, 0, 0)',
+      ];
+    }, [theme.colors.background]);
+
+    const handlePressPlay = useCallback(
+      ({ is_trailer }: { is_trailer: boolean }) => {
+        onPressPlay?.({ is_trailer });
+      },
+      [onPressPlay]
+    );
+
+    // Dynamic styles
+    const containerStyle = [
+      styles.container,
+      { backgroundColor: theme.colors.backgroundDisabled },
+    ];
+
+    const badgeStyle = [
+      styles.badge,
+      { backgroundColor: theme.colors.primary },
+    ];
+
+    const badgeTextStyle = [
+      styles.badgeText,
+      { color: theme.colors.onPrimary },
+    ];
+
+    const backBtnStyle = [
+      styles.button,
+      { backgroundColor: theme.colors.background },
+    ];
+
+    return (
+      <View style={containerStyle} accessibilityLabel={title}>
+        {/* ── Header: Back Button, Live Badge, Menu ── */}
+        {showHeader && (
+          <View style={styles.header} pointerEvents="box-none">
+            {/* Left: Back Button */}
+            <View style={styles.headerLeft}>
+              {showSkeleton ? (
+                <SkeletonPlaceholder
+                  backgroundColor={theme.colors.skeletonBaseColor}
+                  highlightColor={theme.colors.skeletonHighlightColor}
+                  speed={800}
+                >
+                  <SkeletonPlaceholder.Item {...styles.roundBtnSkeletonItem} />
+                </SkeletonPlaceholder>
+              ) : (
+                onBackPress && (
+                  <BackBtn
+                    theme={themeOverride}
+                    onPress={onBackPress}
+                    style={backBtnStyle}
+                    size={scale(32)}
+                  />
+                )
+              )}
+
+              {shouldShowLiveBadge && (
+                <LiveBadge
+                  theme={theme}
+                  size="large"
+                  style={styles.liveBadgeInline}
+                />
+              )}
+            </View>
+
+            {/* Right: Menu Button */}
+            <View style={styles.headerRight}>
+              {menuActions &&
+                (showSkeleton ? (
+                  <SkeletonPlaceholder
+                    backgroundColor={theme.colors.skeletonBaseColor}
+                    highlightColor={theme.colors.skeletonHighlightColor}
+                    speed={800}
+                  >
+                    <SkeletonPlaceholder.Item
+                      {...styles.roundBtnSkeletonItem}
+                    />
+                  </SkeletonPlaceholder>
+                ) : (
+                  <MenuBtn
+                    style={styles.button}
+                    theme={themeOverride}
+                    actions={menuActions}
+                  />
+                ))}
+            </View>
+          </View>
+        )}
+
+        {/* ── Background: Gradient + Image + Badges ── */}
+        {!showSkeleton && (
+          <LinearGradient
+            colors={gradientColors}
+            style={styles.gradient}
+            start={{ x: 0, y: 1 }}
+            end={{ x: 0, y: 0 }}
+          />
+        )}
+
+        {!isLoading && (
+          <>
+            <View style={styles.imageContainer}>
+              <FastImage
+                style={StyleSheet.absoluteFill as ImageStyle}
+                source={imageSource}
+                resizeMode={FastImage.resizeMode.cover}
+                onLoad={handleImageLoad}
+                onError={handleImageError}
+                accessibilityLabel={`Background image for ${title}`}
+              />
+            </View>
+
+            {content_offering_type === 'FREE' && (
+              <View style={badgeStyle}>
+                <Text
+                  type="caption"
+                  style={badgeTextStyle}
+                  theme={themeOverride}
+                >
+                  {content_offering_type}
+                </Text>
+              </View>
+            )}
+
+            {content_offering_type && (
+              <RentOrBuyIcon
+                size={30}
+                theme={theme}
+                style={styles.rentOrBuyIcon}
+                content_offering_type={content_offering_type}
+              />
+            )}
+          </>
+        )}
+
+        {/* ── Skeleton: Play + Trailer placeholders ── */}
+        {showSkeleton && !imageError && onPressPlay && (
+          <>
+            <View style={styles.skeletonContainer}>
+              <SkeletonPlaceholder
+                backgroundColor={theme.colors.skeletonBaseColor}
+                highlightColor={theme.colors.skeletonHighlightColor}
+                speed={800}
+              >
+                <SkeletonPlaceholder.Item {...styles.skeletonPlayWrapper}>
+                  <SkeletonPlaceholder.Item {...styles.skeletonPlayCircle} />
+                </SkeletonPlaceholder.Item>
+              </SkeletonPlaceholder>
+            </View>
+
+            {!isLiveStream && (
+              <View style={styles.trailerButtonWrapper}>
+                <SkeletonPlaceholder
+                  backgroundColor={theme.colors.skeletonBaseColor}
+                  highlightColor={theme.colors.skeletonHighlightColor}
+                  speed={800}
+                >
+                  <SkeletonPlaceholder.Item {...styles.skeletonTrailerBtn} />
+                </SkeletonPlaceholder>
+              </View>
+            )}
+          </>
+        )}
+
+        {/* ── Center: Play Button ── */}
+        {/* ── Footer: Trailer Button ── */}
+        {!showSkeleton && !imageError && onPressPlay && (
+          <>
+            <Animated.View style={styles.centeredContent}>
+              <PlayButton
+                color={theme.colors.buttonText}
+                backgroundColor={theme.colors.button}
+                onPress={() => handlePressPlay({ is_trailer: false })}
+              />
+            </Animated.View>
+
+            {!isLiveStream && (
+              <Animated.View style={styles.trailerButtonWrapper}>
+                <TrailerButton
+                  color={theme.colors.buttonText}
+                  backgroundColor={theme.colors.button}
+                  onPress={() => handlePressPlay({ is_trailer: true })}
+                />
+              </Animated.View>
+            )}
+          </>
+        )}
+
+        {/* ── Error: Image load failure ── */}
+        {imageError && !isLoading && (
+          <Animated.View style={styles.errorContainer}>
+            <Text
+              style={[styles.errorText, { color: theme.colors.textSecondary }]}
+            >
+              Failed to load image
+            </Text>
+          </Animated.View>
+        )}
+      </View>
+    );
+  }
+);
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  // Layout
+  container: {
+    height: BANNER_HEIGHT,
+    width: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  imageContainer: {
+    ...StyleSheet.absoluteFill,
+    zIndex: 0,
+  },
+  gradient: {
+    ...StyleSheet.absoluteFill,
+    zIndex: 1,
+  },
+
+  button: {
+    position: 'static',
+    left: scale(0),
+  },
+  // Header
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: scale(8),
+    paddingTop: verticalScale(8),
+  },
+  headerLeft: {
+    flex: 1,
+    alignItems: 'center',
+    gap: scale(7),
+    flexDirection: 'row',
+  },
+
+  headerRight: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+  liveBadgeInline: {
+    position: 'relative',
+    top: 0,
+    left: 0,
+  },
+
+  // Center (Play button)
+  centeredContent: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 4,
+    pointerEvents: 'box-none',
+  },
+
+  // Footer (Trailer button)
+  trailerButtonWrapper: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    bottom: verticalScale(10),
+    zIndex: 4,
+    pointerEvents: 'box-none',
+  },
+
+  // Badges & Icons
+  badge: {
+    position: 'absolute',
+    bottom: verticalScale(20),
+    left: scale(10),
+    paddingHorizontal: scale(8),
+    paddingVertical: scale(4),
+    borderRadius: scale(8),
+    zIndex: 2,
+  },
+  badgeText: {
+    fontWeight: '600',
+  },
+  rentOrBuyIcon: {
+    position: 'absolute',
+    bottom: verticalScale(20),
+    left: scale(10),
+    zIndex: 2,
+  },
+
+  // Skeleton
+  skeletonContainer: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 2,
+  },
+  skeletonPlayWrapper: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  skeletonPlayCircle: {
+    width: SKELETON_CIRCLE_SIZE,
+    height: SKELETON_CIRCLE_SIZE,
+    borderRadius: SKELETON_CIRCLE_SIZE / 2,
+  },
+  skeletonTrailerBtn: {
+    width: scale(110),
+    height: verticalScale(25),
+    borderRadius: scale(14),
+  },
+  roundBtnSkeletonItem: {
+    width: BACK_BTN_SIZE,
+    height: BACK_BTN_SIZE,
+    borderRadius: BACK_BTN_SIZE / 2,
+  },
+
+  // Error
+  errorContainer: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  errorText: {
+    fontSize: RFValue(15),
+    textAlign: 'center',
+  },
+});