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

package/src/components/Content/Card/components/CardPoster.tsx

@@ -0,0 +1,204 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 10:29 AM
+ */
+import React, { useState, useEffect, useMemo } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import type { ImageStyle as FastImageStyle, ImageStyle, ResizeMode } from 'react-native-fast-image';
+import FastImage from 'react-native-fast-image';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../../../Text';
+import { ImageOff } from 'lucide-react-native';
+import type { ITheme } from '../../../../theme/themes';
+
+export type CardPosterProps = {
+  posterUri: string;
+  theme: ITheme;
+  isLoading?: boolean;
+  borderRadius?: number;
+  posterWrapperStyle?: StyleProp<ViewStyle>;
+  imageStyle?: FastImageStyle;
+  resizeMode?: ResizeMode;
+};
+
+const CardPoster: React.FC<CardPosterProps> = ({
+  posterUri,
+  theme,
+  isLoading = false,
+  borderRadius = scale(6),
+  posterWrapperStyle,
+  imageStyle,
+  resizeMode = FastImage.resizeMode.cover
+}) => {
+  const [imageLoading, setImageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    setImageLoading(true);
+    setImageError(false);
+  }, [posterUri]);
+
+  const hasValidPoster = useMemo(() => {
+    if (!posterUri || typeof posterUri !== 'string') return false;
+
+    const cleaned = posterUri.trim();
+    return (
+      (cleaned.startsWith('http://') || cleaned.startsWith('https://')) &&
+      /\.(jpg|jpeg|png|webp|gif|bmp)$/i.test(cleaned)
+    );
+  }, [posterUri]);
+  useEffect(() => {
+    if (hasValidPoster) {
+      FastImage.preload([{ uri: posterUri }]);
+    }
+  }, [posterUri, hasValidPoster]);
+  const showSkeleton = isLoading || (imageLoading && !imageError && hasValidPoster);
+
+  const fallbackImageStyle: ImageStyle = useMemo(
+    () => ({
+      width: '100%',
+      aspectRatio: 2 / 3,
+      borderRadius,
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }),
+    [borderRadius]
+  );
+
+  return (
+    <View
+      style={[
+        styles.posterWrapper,
+        styles.defaultPosterWrapper,
+        {
+          borderRadius,
+          backgroundColor: theme.colors.background,
+          shadowColor: theme.colors.shadow
+        },
+        posterWrapperStyle
+      ]}
+    >
+      {showSkeleton && (
+        <View style={[styles.skeletonWrapper, { borderRadius }]}>
+          <SkeletonPlaceholder
+            backgroundColor={theme.colors.skeletonBaseColor}
+            highlightColor={theme.colors.skeletonHighlightColor}
+            speed={1000}
+          >
+            <SkeletonPlaceholder.Item style={[styles.skeleton, { borderRadius }]} />
+          </SkeletonPlaceholder>
+        </View>
+      )}
+
+      {hasValidPoster && (
+        <FastImage
+          source={{
+            uri: posterUri,
+            cache: FastImage.cacheControl.immutable,
+            priority: FastImage.priority.normal
+          }}
+          style={[fallbackImageStyle, showSkeleton ? styles.hidden : styles.visible, imageStyle]}
+          resizeMode={resizeMode}
+          onLoadStart={() => {
+            if (hasValidPoster) {
+              setImageLoading(true);
+              setImageError(false);
+            }
+          }}
+          onLoad={() => {
+            setImageLoading(false);
+          }}
+          onError={() => {
+            setTimeout(() => {
+              setImageLoading(false);
+              setImageError(true);
+            }, 100);
+          }}
+        />
+      )}
+
+      {!showSkeleton && (!hasValidPoster || imageError) && (
+        <View
+          style={[
+            styles.fallbackWrapper,
+            { borderRadius, backgroundColor: theme.colors.background, borderColor: theme.colors.error }
+          ]}
+        >
+          <View
+            style={[
+              styles.fallback,
+              {
+                backgroundColor: theme.colors.errorContainer
+              }
+            ]}
+          >
+            <ImageOff size={scale(18)} color={theme.colors.error} />
+            <Text style={styles.fallbackText} color={theme.colors.error}>
+              Image Failed
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(CardPoster);
+
+const styles = StyleSheet.create({
+  posterWrapper: {
+    width: '100%',
+    aspectRatio: 2 / 3,
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  defaultPosterWrapper: {
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 2
+  },
+  skeletonWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    aspectRatio: 2 / 3,
+    overflow: 'hidden'
+  },
+  skeleton: {
+    width: '100%',
+    aspectRatio: 2 / 3
+  },
+  visible: {
+    opacity: 1
+  },
+  hidden: {
+    opacity: 0
+  },
+  fallbackWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    aspectRatio: 2 / 3,
+    borderWidth: scale(1),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  fallback: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    aspectRatio: 2 / 3,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  fallbackText: {
+    marginTop: scale(4),
+    fontSize: scale(10)
+  }
+});

package/src/components/Content/Card/components/NavigateToMore.tsx

@@ -0,0 +1,58 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 25 Jun 2025 at 11:59 AM
+ */
+
+import React from 'react';
+import { StyleSheet, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import ShowAllButton, { type ShowAllButtonProps } from './ShowAllButton';
+import { Text } from '../../../Text';
+
+interface IProps {
+  title: string;
+  onPress: () => void;
+  titleStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  showAllProps?: Partial<ShowAllButtonProps>;
+}
+
+const NavigateToMore: React.FC<IProps> = ({
+  onPress,
+  title,
+  titleStyle,
+  containerStyle,
+  showAllProps
+}): React.ReactElement => {
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.titleWrapper}>
+        <Text style={[styles.title, titleStyle]} numberOfLines={1} ellipsizeMode="tail">
+          {title}
+        </Text>
+      </View>
+      <ShowAllButton onPress={onPress} {...showAllProps} />
+    </View>
+  );
+};
+
+export default NavigateToMore;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: verticalScale(6),
+    marginTop: verticalScale(1)
+  },
+  titleWrapper: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: scale(13),
+    fontWeight: '600',
+    textTransform: 'capitalize'
+  }
+});

package/src/components/Content/Card/components/NoContentFallback.tsx

@@ -0,0 +1,129 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 25 Jun 2025 at 11:59 AM
+ */
+
+import React, { useCallback } from 'react';
+import { TouchableOpacity, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../../../Text';
+import { useTheme } from '../../../../theme';
+import type { AppTheme } from '../../../../theme/themes';
+
+type NoContentFallbackProps = {
+  message?: string;
+  retryText?: string;
+  onRetry?: () => void;
+  theme?: AppTheme;
+  emoji?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+const NoContentFallback = ({
+  message = 'No content available right now.\nPlease check back later.',
+  retryText = 'Try Again',
+  onRetry,
+  theme,
+  emoji = '😔',
+  style
+}: NoContentFallbackProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const scaleValue = useSharedValue(1);
+
+  const handlePressIn = useCallback(() => {
+    scaleValue.value = withSpring(0.95, { damping: 15, stiffness: 200 });
+  }, [scaleValue]);
+
+  const handlePressOut = useCallback(() => {
+    scaleValue.value = withSpring(1, { damping: 15, stiffness: 200 });
+  }, [scaleValue]);
+
+  const animatedButtonStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scaleValue.value }]
+  }));
+
+  return (
+    <Animated.View
+      style={[styles.container, style, { backgroundColor: appliedTheme.colors.background }]}
+      accessibilityLabel="No content available"
+      accessibilityHint="Check back later or try again"
+    >
+      <Animated.Text style={[styles.emoji, { color: appliedTheme.colors.textPrimary }]}>{emoji}</Animated.Text>
+      <Text
+        style={[
+          styles.message,
+          {
+            color: appliedTheme.colors.textSecondary
+          }
+        ]}
+      >
+        {message}
+      </Text>
+      {onRetry && (
+        <TouchableOpacity
+          onPress={onRetry}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          style={[
+            styles.retryButton,
+            {
+              backgroundColor: appliedTheme.colors.primary,
+              borderColor: appliedTheme.colors.outline
+            }
+          ]}
+          accessibilityLabel={retryText}
+          accessibilityRole="button"
+        >
+          <Animated.View style={animatedButtonStyle}>
+            <Text
+              style={[
+                styles.retryText,
+                {
+                  color: appliedTheme.colors.textPrimary
+                }
+              ]}
+            >
+              {retryText}
+            </Text>
+          </Animated.View>
+        </TouchableOpacity>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(20),
+    paddingVertical: verticalScale(40)
+  },
+  emoji: {
+    fontSize: scale(64),
+    marginBottom: verticalScale(16),
+    textAlign: 'center'
+  },
+  message: {
+    fontSize: scale(16),
+    textAlign: 'center',
+    fontWeight: '500',
+    lineHeight: verticalScale(22),
+    marginBottom: verticalScale(20)
+  },
+  retryButton: {
+    paddingHorizontal: scale(24),
+    paddingVertical: verticalScale(12),
+    borderRadius: scale(8),
+    borderWidth: scale(1)
+  },
+  retryText: {
+    fontSize: scale(14),
+    fontWeight: '600',
+    textAlign: 'center'
+  }
+});
+
+export default NoContentFallback;

package/src/components/Content/Card/components/ShowAllButton.tsx

@@ -0,0 +1,83 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 25 Jun 2025 at 11:58 AM
+ **/
+
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  type GestureResponderEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle
+} from 'react-native';
+import { moderateScale, scale } from 'react-native-size-matters';
+import { Text } from '../../../Text';
+import { ChevronRight } from 'lucide-react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+export type ShowAllButtonProps = {
+  text?: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  iconSize?: number;
+  gap?: number;
+  iconColor?: string;
+  textStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  iconPosition?: 'left' | 'right';
+  IconComponent?: React.ReactNode;
+};
+
+const ShowAllButton: React.FC<ShowAllButtonProps> = ({
+  text = 'Show All',
+  onPress,
+  iconSize = scale(14),
+  gap = 3,
+  iconColor = '#ffffff',
+  iconPosition = 'right',
+  IconComponent,
+  textStyle,
+  containerStyle
+}): React.ReactElement => {
+  const icon = IconComponent ?? (
+    <View style={styles.iconWrapper}>
+      <ChevronRight size={iconSize} color={iconColor} />
+    </View>
+  );
+
+  return (
+    <TouchableOpacity style={[styles.buttonContainer, containerStyle]} onPress={onPress} activeOpacity={0.7}>
+      <View style={[styles.innerRow, { columnGap: moderateScale(gap) }]}>
+        {iconPosition === 'left' && icon}
+        <Text style={[styles.text, textStyle]}>{text}</Text>
+        {iconPosition === 'right' && icon}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default ShowAllButton;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  innerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  iconWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center'
+  },
+  text: {
+    fontSize: RFValue(9),
+    fontWeight: '400',
+    textTransform: 'capitalize',
+    letterSpacing: 0.3
+  }
+});

package/src/components/Content/Card/components/ThumbnailCard.tsx

@@ -0,0 +1,150 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 25 Jun 2025 at 05:40 PM
+ */
+
+import React, { useState } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import type { ImageStyle as FastImageStyle, ResizeMode } from 'react-native-fast-image';
+import FastImage from 'react-native-fast-image';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Text } from '../../../Text';
+import { ImageOff } from 'lucide-react-native';
+import type { ITheme } from '../../../../theme/themes';
+
+export type ThumbnailCardProps = {
+  thumbnailUri?: string;
+  theme: ITheme;
+  isLoading?: boolean;
+  borderRadius?: number;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  imageStyle?: FastImageStyle;
+  resizeMode?: ResizeMode;
+};
+
+export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
+  thumbnailUri = '',
+  theme,
+  isLoading = false,
+  borderRadius = scale(6),
+  wrapperStyle,
+  imageStyle,
+  resizeMode = FastImage.resizeMode.cover
+}) => {
+  const [imageLoading, setImageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+
+  const hasValidThumbnail = !!thumbnailUri && thumbnailUri.startsWith('http');
+  const showSkeleton = isLoading || (imageLoading && !imageError);
+
+  const fallbackImageStyle: FastImageStyle = {
+    width: '100%',
+    aspectRatio: 16 / 9,
+    borderRadius,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  };
+
+  return (
+    <View
+      style={[
+        styles.thumbnailWrapper,
+        {
+          borderRadius,
+          backgroundColor: theme.colors.background,
+          shadowColor: theme.colors.shadow
+        },
+        wrapperStyle
+      ]}
+    >
+      {showSkeleton && (
+        <View style={[styles.skeletonWrapper, { borderRadius }]}>
+          <SkeletonPlaceholder
+            backgroundColor={theme.colors.skeletonBaseColor}
+            highlightColor={theme.colors.skeletonHighlightColor}
+          >
+            <SkeletonPlaceholder.Item style={[styles.skeleton, { borderRadius }]} />
+          </SkeletonPlaceholder>
+        </View>
+      )}
+
+      {hasValidThumbnail && (
+        <FastImage
+          source={{ uri: thumbnailUri }}
+          style={[fallbackImageStyle, showSkeleton ? styles.hidden : styles.visible, imageStyle]}
+          resizeMode={resizeMode}
+          onLoadStart={() => {
+            setImageLoading(true);
+            setImageError(false);
+          }}
+          onLoadEnd={() => setImageLoading(false)}
+          onError={() => {
+            setImageLoading(false);
+            setImageError(true);
+          }}
+        />
+      )}
+
+      {!showSkeleton && (!hasValidThumbnail || imageError) && (
+        <View
+          style={[
+            styles.fallback,
+            {
+              borderRadius,
+              backgroundColor: theme.colors.errorContainer,
+              borderColor: theme.colors.error
+            }
+          ]}
+        >
+          <ImageOff size={scale(18)} color={theme.colors.error} />
+          <Text style={styles.fallbackText} color={theme.colors.error}>
+            Image Failed
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  thumbnailWrapper: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  skeletonWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    aspectRatio: 16 / 9,
+    overflow: 'hidden'
+  },
+  skeleton: {
+    width: '100%',
+    aspectRatio: 16 / 9
+  },
+  visible: {
+    opacity: 1
+  },
+  hidden: {
+    opacity: 0
+  },
+  fallback: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    aspectRatio: 16 / 9,
+    borderWidth: scale(1),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  fallbackText: {
+    marginTop: scale(4),
+    fontSize: scale(10)
+  }
+});

package/src/components/Content/Card/index.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Sun 08 Jun 2025 at 03:49 PM
+ */
+import StyleOne from './Styles/One';
+import TopTen from './Styles/TopTen';
+import StyleTwo from './Styles/Two';
+import StyleThree from './Styles/Three';
+import StyleFour from './Styles/Four';
+import StyleFive from './Styles/Five';
+import StyleSix from './Styles/Six';
+import NowWatching from './NowWatching/NowWatching';
+import RotateCarousel from './Styles/RotateInOut';
+import CategoryCard from './Category/Category';
+const Cards = {
+  Styles: {
+    One: StyleOne,
+    Two: StyleTwo,
+    Three: StyleThree,
+    Four: StyleFour,
+    Five: StyleFive,
+    Six: StyleSix,
+    TopTen: TopTen,
+    RotateCarousel,
+    NowWatching,
+    Category: CategoryCard
+  }
+};
+
+export default Cards;