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

package/src/components/ContentView/Two/components/GenreTags.tsx

@@ -0,0 +1,123 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Tue 13 Jun 2025 at 02:28 PM
+ */
+
+import React, { useMemo } from 'react';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { Text } from '../../../Text';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale, verticalScale } from 'react-native-size-matters';
+import type { ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+type Props = {
+  genres?: IContentData['genres'];
+  theme: ITheme;
+  isLoading?: boolean;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    tagContainer?: StyleProp<ViewStyle>;
+    tagText?: StyleProp<TextStyle>;
+    skeletonTag?: StyleProp<ViewStyle>;
+  };
+};
+
+export const GenreTags = React.memo(
+  ({ genres, theme, isLoading = false, style }: Props): React.ReactElement => {
+    const skeletonItems = useSkeletonItems(3, (i) => i + 1);
+
+    const tagTextStyle = useMemo(
+      () => [
+        styles.tagText,
+        { color: theme.colors.textPrimary },
+        style?.tagText,
+      ],
+      [theme.colors.textPrimary, style?.tagText]
+    );
+
+    const containerStyleMemo = useMemo(
+      () => StyleSheet.flatten([styles.tagRow, style?.container]),
+      [style?.container]
+    );
+
+    if (isLoading || !genres?.length) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+          borderRadius={scale(16)}
+        >
+          <View style={containerStyleMemo}>
+            {skeletonItems.map((_, idx) => (
+              <View
+                key={idx}
+                style={StyleSheet.flatten([
+                  styles.skeletonTag,
+                  style?.skeletonTag,
+                ])}
+              />
+            ))}
+          </View>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    return (
+      <View style={containerStyleMemo}>
+        {genres.map((tag, idx) => (
+          <View key={idx} style={styles.inlineRow}>
+            <Text style={tagTextStyle} numberOfLines={1} ellipsizeMode="tail">
+              {tag?.name || String(tag)}
+            </Text>
+
+            {idx < genres.length - 1 && (
+              <Text
+                style={[styles.separator, { color: theme.colors.textPrimary }]}
+              >
+                |
+              </Text>
+            )}
+          </View>
+        ))}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  tagRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginTop: verticalScale(10),
+    paddingHorizontal: scale(10),
+    marginVertical: verticalScale(6),
+  },
+  inlineRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tagText: {
+    fontSize: RFValue(12),
+    maxWidth: scale(110),
+  },
+  separator: {
+    marginHorizontal: scale(6),
+    fontSize: RFValue(12),
+    opacity: 0.7,
+  },
+  skeletonTag: {
+    width: scale(56),
+    height: scale(24),
+    borderRadius: scale(14),
+    marginRight: scale(6),
+  },
+});

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

@@ -0,0 +1,402 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Sat 17 Jan 2026 at 02:28 PM
+ */
+
+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 from 'react-native-fast-image';
+import tinycolor from 'tinycolor2';
+
+import BackBtn from '../../../Button/BackBtn';
+import MenuBtn from '../../../Button/MenuBtn';
+import type { HeroBannerProps } from '../../../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../../theme/hook';
+import { Text } from '../../../Text';
+import { useImageLoader } from '../../../../hooks/Images';
+import { PlayButton } from '../../One/components/PlayButton';
+import { TrailerButton } from '../../One/components/TrailerButton';
+
+const SKELETON_CIRCLE_SIZE = scale(50);
+const BANNER_HEIGHT = verticalScale(200);
+const BACK_BTN_SIZE = scale(35);
+
+export const HeroBanner = React.memo(
+  ({
+    backgroundImage,
+    title,
+    titleImage,
+    theme: themeOverride,
+    isLoading = false,
+    onPressPlay,
+    onBackPress,
+    style,
+    renderButtons,
+    renderSkeletons,
+    menuActions,
+    content_offering_type,
+  }: HeroBannerProps) => {
+    const { theme } = useInternalTheme(themeOverride);
+
+    // Use reusable image loading hook with caching support
+    const {
+      imageError,
+      showSkeleton: imageShowSkeleton,
+      imageSource,
+      handleLoad: handleImageLoad,
+      handleError: handleImageError,
+    } = useImageLoader({
+      imageUri: backgroundImage || '',
+      isLoading,
+    });
+
+    const handlePressPlay = useCallback(
+      ({ is_trailer }: { is_trailer: boolean }) => {
+        onPressPlay?.({ is_trailer });
+      },
+      [onPressPlay]
+    );
+
+    const showSkeleton = useMemo(
+      () => isLoading || (imageShowSkeleton && !!backgroundImage),
+      [isLoading, imageShowSkeleton, backgroundImage]
+    );
+
+    // Memoize gradient colors - use theme gradient with optimized transition
+    const gradientColors = useMemo(() => {
+      const bgColorBase = theme.colors.background;
+      return [
+        tinycolor(bgColorBase).toRgbString(), // Solid at bottom (100% opacity)
+        tinycolor(bgColorBase).setAlpha(0.66).toRgbString(), // 66% opacity
+        tinycolor(bgColorBase).setAlpha(0.2).toRgbString(), // 20% opacity
+        tinycolor(bgColorBase).setAlpha(0.1).toRgbString(), // 10% opacity
+        'rgba(0, 0, 0, 0)',
+      ];
+    }, [theme.colors.background]);
+
+    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: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: theme.colors.backgroundDisabled,
+            alignItems: 'center',
+          },
+
+          image: {
+            width: '100%',
+            height: BANNER_HEIGHT,
+            aspectRatio: 16 / 9,
+            alignSelf: 'flex-start',
+          },
+
+          titleImageWrapper: {
+            position: 'absolute',
+            bottom: verticalScale(10),
+            left: scale(12),
+            zIndex: 3,
+          },
+
+          titleImage: {
+            width: scale(140),
+            height: verticalScale(32),
+          },
+
+          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(7),
+            left: scale(7),
+            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={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(26)}
+              />
+            )))}
+
+        {/* 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 */}
+        {!showSkeleton && (
+          <LinearGradient
+            colors={gradientColors}
+            style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
+            start={{ x: 0, y: 1 }}
+            end={{ x: 0, y: 0 }}
+          />
+        )}
+        {/* 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}`}
+                            /> */}
+              <FastImage
+                source={imageSource}
+                style={styles.image}
+                resizeMode={FastImage.resizeMode.contain}
+                onLoad={handleImageLoad}
+                onError={handleImageError}
+                accessibilityLabel={`Background image for ${title}`}
+              />
+            </View>
+            {/* Title Image – Bottom Left */}
+            {!!titleImage && !showSkeleton && (
+              <View style={styles.titleImageWrapper}>
+                <FastImage
+                  source={{ uri: titleImage }}
+                  style={styles.titleImage}
+                  resizeMode={FastImage.resizeMode.contain}
+                  accessibilityLabel={`Title 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>
+            )}
+
+            {content_offering_type && (
+              <RentOrBuyIcon
+                size={30}
+                theme={theme}
+                style={[styles.rentOrBuyIcon, { zIndex: 2 }]}
+                content_offering_type={content_offering_type}
+              />
+            )}
+          </>
+        )}
+
+        {/* Skeleton UI */}
+        {showSkeleton && !imageError && onPressPlay && (
+          <>
+            <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>
+          </>
+        )}
+
+        {/* Play & Trailer Buttons */}
+        {!showSkeleton && !imageError && onPressPlay && (
+          <>
+            <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 */}
+        {imageError && !isLoading && (
+          <Animated.View style={styles.errorContainer}>
+            <Text style={styles.errorText}>Failed to load image</Text>
+          </Animated.View>
+        )}
+      </View>
+    );
+  }
+);

package/src/components/ContentView/Two/components/LikeShareActions.tsx

@@ -0,0 +1,125 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Tue 13 Jun 2026 at 02:28 PM
+ */
+
+import React, { useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ITheme } from '../../../../theme/themes';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { Heart, Share2 } from 'lucide-react-native';
+import type { LikeShareEventArgs } from '../../../../types';
+
+type Props = {
+  theme: ITheme;
+  contentId: IContentData['_id'];
+  isLiked?: boolean;
+  isLoading?: boolean;
+  onPressLike?: (args: LikeShareEventArgs) => void;
+  onPressShare?: (args: LikeShareEventArgs) => void;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    likeButton?: StyleProp<ViewStyle>;
+    shareButton?: StyleProp<ViewStyle>;
+  };
+};
+
+export const LikeShareActions = React.memo(
+  ({
+    theme,
+    contentId,
+    isLiked = false,
+    isLoading = false,
+    onPressLike,
+    onPressShare,
+    style,
+  }: Props) => {
+    const styles = useMemo(() => createStyles(theme), [theme]);
+
+    if (isLoading) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+        >
+          <View style={styles.skeletonRow}>
+            <SkeletonPlaceholder.Item
+              width={scale(22)}
+              height={scale(22)}
+              borderRadius={scale(11)}
+            />
+            <SkeletonPlaceholder.Item
+              width={scale(22)}
+              height={scale(22)}
+              borderRadius={scale(11)}
+              marginLeft={scale(12)}
+            />
+          </View>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    return (
+      <View style={[styles.container, style?.container]}>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={[styles.iconWrapper, style?.likeButton]}
+          onPress={() =>
+            onPressLike?.({
+              id: contentId,
+              source: 'title',
+            })
+          }
+        >
+          <Heart
+            size={RFValue(18)}
+            color={
+              isLiked ? theme.colors.premiumIcon : theme.colors.textSecondary
+            }
+            fill={isLiked ? theme.colors.premiumIcon : theme.colors.white}
+          />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={[styles.iconWrapper, style?.shareButton]}
+          onPress={() =>
+            onPressShare?.({
+              id: contentId,
+              source: 'title',
+            })
+          }
+        >
+          <Share2 size={RFValue(18)} color={theme.colors.textSecondary} />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+);
+
+const createStyles = (theme: ITheme) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    iconWrapper: {
+      marginLeft: scale(12),
+      padding: scale(6),
+      borderRadius: scale(20),
+      backgroundColor: theme.colors.surfaceVariant,
+    },
+    skeletonRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+  });