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

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

@@ -1,413 +0,0 @@
-/**
- * @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',
-  },
-});