@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

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

@@ -0,0 +1,92 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React from 'react';
+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 { IContentData } from '../../../types';
+import type { ITheme } from '../../../theme/themes';
+
+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 = ({ genres, theme, isLoading = false, style }: Props): React.ReactElement => {
+  if (isLoading || !genres?.length) {
+    return (
+      <SkeletonPlaceholder
+        backgroundColor={theme.colors.skeletonBaseColor}
+        highlightColor={theme.colors.skeletonHighlightColor}
+        borderRadius={scale(16)}
+      >
+        <View style={StyleSheet.flatten([styles.tagRow, style?.container])}>
+          {[1, 2, 3].map((_, idx) => (
+            <View key={idx} style={StyleSheet.flatten([styles.skeletonTag, style?.skeletonTag])} />
+          ))}
+        </View>
+      </SkeletonPlaceholder>
+    );
+  }
+
+  return (
+    <View style={StyleSheet.flatten([styles.tagRow, style?.container])}>
+      {genres.map((tag, idx) => (
+        <View
+          key={idx}
+          style={StyleSheet.flatten([
+            styles.tagContainer,
+            { backgroundColor: theme.colors.surfaceVariant, borderColor: theme.colors.border },
+            style?.tagContainer
+          ])}
+        >
+          <Text
+            style={StyleSheet.flatten([styles.tagText, { color: theme.colors.textPrimary }, style?.tagText])}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {tag?.name || String(tag)}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  tagRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: scale(4),
+    paddingHorizontal: scale(10),
+    marginVertical: verticalScale(6)
+  },
+  tagContainer: {
+    paddingHorizontal: scale(10),
+    paddingVertical: scale(4),
+    borderWidth: scale(0.5),
+    borderRadius: scale(14),
+    maxWidth: '100%',
+    alignSelf: 'flex-start'
+  },
+  tagText: {
+    fontSize: scale(11),
+    maxWidth: scale(110)
+  },
+  skeletonTag: {
+    width: scale(56),
+    height: scale(24),
+    borderRadius: scale(14)
+  }
+});

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

@@ -0,0 +1,244 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 04:50 PM
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { View, StyleSheet, Animated, Text } 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 { PlayButton } from './PlayButton';
+import { TrailerButton } from './TrailerButton';
+import BackBtn from '../../Button/BackBtn';
+import MenuBtn from '../../Button/MenuBtn';
+import type { HeroBannerProps } from '../../../types/content/content-view.types';
+
+const SKELETON_CIRCLE_SIZE = scale(50);
+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,
+  isLoading = false,
+  onPressPlay,
+  onBackPress,
+  style,
+  renderButtons,
+  renderSkeletons,
+  menuActions
+}: HeroBannerProps) => {
+  const [hasImageLoaded, setHasImageLoaded] = useState(false);
+  const [imageLoadError, setImageLoadError] = useState(false);
+
+  const handlePressPlay = useCallback(() => {
+    onPressPlay?.();
+  }, [onPressPlay]);
+
+  const showSkeleton = isLoading || (!hasImageLoaded && !imageLoadError);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          height: BANNER_HEIGHT,
+          width: '100%',
+          overflow: 'hidden',
+          position: 'relative',
+          backgroundColor: theme.colors.backgroundDisabled
+        },
+        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: scale(16),
+          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
+        }
+      }),
+    [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={theme} onPress={onBackPress} style={styles.defaultBackBtn} size={scale(20)} />
+          )))}
+
+      {/* 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={theme} style={styles.defaultMenuBtn} actions={menuActions} />)}
+
+      {/* Gradient Overlay */}
+      <LinearGradient
+        colors={theme.colors.heroBannerGradient}
+        style={[StyleSheet.absoluteFill, { zIndex: 3 }]}
+        locations={GRADIENT_LOCATIONS}
+      />
+
+      {/* 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>
+      )}
+
+      {/* 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>
+        </>
+      )}
+
+      {/* Play & Trailer Buttons */}
+      {!showSkeleton && !imageLoadError && (
+        <>
+          <Animated.View style={styles.centeredContent}>
+            {renderButtons?.play?.() ?? <PlayButton onPress={handlePressPlay} />}
+          </Animated.View>
+
+          <Animated.View style={styles.trailerButtonWrapper}>
+            {renderButtons?.trailer?.() ?? <TrailerButton onPress={handlePressPlay} />}
+          </Animated.View>
+        </>
+      )}
+
+      {/* Error UI */}
+      {imageLoadError && !isLoading && (
+        <Animated.View style={styles.errorContainer}>
+          <Text style={styles.errorText}>Failed to load image</Text>
+        </Animated.View>
+      )}
+    </View>
+  );
+};

package/src/components/ContentView/components/PlayButton.tsx

@@ -0,0 +1,37 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 03:38 PM
+ * */
+
+import React from 'react';
+import { TouchableOpacity, StyleSheet, type GestureResponderEvent } from 'react-native';
+import { PlayCircleIcon } from 'lucide-react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+
+interface Props {
+  onPress?: (event: GestureResponderEvent) => void;
+  size?: number;
+  color?: string;
+  backgroundColor?: string;
+}
+
+export const PlayButton = ({ onPress, size = scale(40), color = 'black', backgroundColor = '#FFD700' }: Props) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={[styles.button, { backgroundColor, borderRadius: size }]}
+    >
+      <PlayCircleIcon size={size} color={color} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    padding: moderateScale(6),
+    marginBottom: verticalScale(10),
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/src/components/ContentView/components/Title.tsx

@@ -0,0 +1,120 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+import type { IContentData } from '../../../types';
+import type { ITheme } from '../../../theme/themes';
+
+type Props = {
+  title: IContentData['name'];
+  subtitle: string;
+  rating: IContentData['rating'];
+  theme: ITheme;
+  isLoading?: boolean;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    subTitle?: StyleProp<TextStyle>;
+    rating?: StyleProp<TextStyle>;
+  };
+};
+
+export const Title = ({ title, subtitle, rating, theme, isLoading = false, style }: Props): React.ReactElement => {
+  if (isLoading) {
+    return (
+      <View style={StyleSheet.flatten([styles.container, style?.container])}>
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+        >
+          <SkeletonPlaceholder.Item>
+            {/* Title & Subtitle */}
+            <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
+              <SkeletonPlaceholder.Item width={scale(160)} height={scale(22)} borderRadius={scale(4)} />
+              <SkeletonPlaceholder.Item
+                width={scale(60)}
+                height={scale(22)}
+                borderRadius={scale(4)}
+                marginLeft={scale(6)}
+              />
+            </SkeletonPlaceholder.Item>
+
+            {/* Rating */}
+            <SkeletonPlaceholder.Item
+              width={scale(36)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+              marginTop={scale(6)}
+            />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      </View>
+    );
+  }
+
+  return (
+    <View style={StyleSheet.flatten([styles.container, style?.container])}>
+      <View style={styles.row}>
+        <Text
+          color={theme.colors.textPrimary}
+          style={StyleSheet.flatten([styles.title, style?.title])}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {title}
+        </Text>
+
+        {!!subtitle && (
+          <Text
+            color={theme.colors.textSecondary}
+            style={StyleSheet.flatten([styles.subTitle, style?.subTitle])}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {`: ${subtitle}`}
+          </Text>
+        )}
+      </View>
+
+      {!!rating && (
+        <Text color={theme.colors.textSecondary} style={StyleSheet.flatten([styles.rating, style?.rating])}>
+          ⭐ {rating}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: scale(12),
+    marginTop: scale(5)
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: '100%'
+  },
+  title: {
+    fontSize: scale(18),
+    fontWeight: 'bold',
+    flexShrink: 1,
+    maxWidth: '60%'
+  },
+  subTitle: {
+    fontSize: scale(18),
+    marginLeft: scale(4),
+    flexShrink: 1,
+    maxWidth: '40%'
+  },
+  rating: {
+    fontSize: scale(14),
+    marginTop: scale(4)
+  }
+});

package/src/components/ContentView/components/TrailerButton.tsx

@@ -0,0 +1,53 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 03:39 PM
+ */
+
+import { PlayCircle } from 'lucide-react-native';
+import React from 'react';
+import { TouchableOpacity, StyleSheet, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+
+interface Props {
+  onPress?: (event: GestureResponderEvent) => void;
+  label?: string;
+  iconSize?: number;
+  iconColor?: string;
+  backgroundColor?: string;
+  textStyle?: TextStyle;
+  style?: ViewStyle;
+}
+
+export const TrailerButton = ({
+  onPress,
+  label = 'Watch Trailer',
+  iconSize = scale(18),
+  iconColor = '#000',
+  backgroundColor = '#FFD700',
+  textStyle,
+  style
+}: Props) => {
+  return (
+    <TouchableOpacity onPress={onPress} activeOpacity={0.8} style={[styles.button, { backgroundColor }, style]}>
+      <PlayCircle size={iconSize} color={iconColor} />
+      <Text style={[styles.text, textStyle]}> {label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    paddingVertical: verticalScale(3),
+    paddingHorizontal: scale(6),
+    borderRadius: moderateScale(20),
+    alignItems: 'center'
+  },
+  text: {
+    color: '#000',
+    fontWeight: '600',
+    fontSize: scale(12),
+    marginLeft: scale(2)
+  }
+});

package/src/components/ContentView/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+export * from './ContentView';

package/src/components/Headers/AppHeader.tsx

@@ -0,0 +1,122 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 21 Jun 2025 at 02:52 PM
+ */
+import React from 'react';
+import { View, Pressable, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { ArrowLeft } from 'lucide-react-native';
+import { useTheme } from '../../theme';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../Text';
+import type { AppTheme } from '../../theme/themes';
+
+export type AppHeaderProps = {
+  title: string;
+  onBackPress?: () => void;
+  onRightPress?: () => void;
+  rightIcon?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  titleStyle?: TextStyle;
+  titleAlign?: 'center' | 'left';
+  theme?: AppTheme;
+};
+
+const AppHeader: React.FC<AppHeaderProps> = ({
+  title,
+  onBackPress,
+  onRightPress,
+  rightIcon,
+  style,
+  titleStyle,
+  titleAlign = 'center',
+  theme
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  return (
+    <View style={[styles.header, { backgroundColor: appliedTheme.colors.background }, style]}>
+      {/* Left icon */}
+      {onBackPress && (
+        <Pressable
+          onPress={onBackPress}
+          android_ripple={{
+            color: appliedTheme.colors.surfaceDisabled,
+            borderless: false,
+            radius: scale(20)
+          }}
+          style={styles.iconButton}
+        >
+          <ArrowLeft size={scale(22)} color={appliedTheme.colors.textPrimary} />
+        </Pressable>
+      )}
+
+      {/* Title */}
+      <View style={[styles.titleWrapper, titleAlign === 'center' ? styles.centered : styles.leftAligned]}>
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.title,
+            { color: appliedTheme.colors.onBackground },
+            !onBackPress && { fontSize: moderateScale(20) },
+            titleStyle
+          ]}
+        >
+          {title}
+        </Text>
+      </View>
+
+      {/* Right icon */}
+      {rightIcon ? (
+        <Pressable
+          onPress={onRightPress}
+          android_ripple={{
+            color: appliedTheme.colors.surfaceDisabled,
+            borderless: false,
+            radius: scale(20)
+          }}
+          style={styles.iconButton}
+        >
+          {rightIcon}
+        </Pressable>
+      ) : (
+        <View style={styles.iconButton} />
+      )}
+    </View>
+  );
+};
+
+export default AppHeader;
+
+const styles = StyleSheet.create({
+  header: {
+    height: verticalScale(56),
+    paddingHorizontal: scale(12),
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  iconButton: {
+    width: scale(40),
+    height: scale(40),
+    borderRadius: scale(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    backgroundColor: 'transparent'
+  },
+
+  titleWrapper: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  centered: {
+    alignItems: 'center'
+  },
+  leftAligned: {
+    alignItems: 'flex-start',
+    paddingLeft: scale(4)
+  },
+  title: {
+    fontSize: moderateScale(18),
+    fontWeight: 'bold'
+  }
+});