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

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

@@ -1,123 +0,0 @@
-/**
- * @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

@@ -1,402 +0,0 @@
-/**
- * @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

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