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

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

@@ -0,0 +1,189 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Tue 14 Jul 2026 at 2:55 PM
+ */
+
+import React, { useMemo } from 'react';
+import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ITheme } from '../../../theme/themes';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+type Props = {
+  theme: ITheme;
+  genres?: IContentData['genres'];
+  isLoading?: boolean;
+  layoutMode?: 'badge' | 'inline';
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    tagContainer?: StyleProp<ViewStyle>;
+    tagText?: StyleProp<TextStyle>;
+    skeletonTag?: StyleProp<ViewStyle>;
+  };
+};
+
+export const GenreTags = React.memo(
+  ({
+    theme,
+    genres,
+    isLoading = false,
+    layoutMode = 'badge',
+    style,
+  }: Props): React.ReactElement | null => {
+    const skeletonItems = useSkeletonItems(3, (i: any) => i + 1);
+
+    const isInlineMode = layoutMode === 'inline';
+
+    const tagTextStyle = useMemo(
+      () => [
+        isInlineMode ? styles.tagTextInline : styles.tagTextBadge,
+        { color: theme.colors.textPrimary },
+        style?.tagText,
+      ],
+      [isInlineMode, theme.colors.textPrimary, style?.tagText]
+    );
+
+    const containerStyleMemo = useMemo(
+      () => [
+        isInlineMode ? styles.tagRowInline : styles.tagRowBadge,
+        style?.container,
+      ],
+      [isInlineMode, style?.container]
+    );
+
+    const tagContainerBaseStyle = useMemo(
+      () => ({
+        backgroundColor: theme.colors.surfaceVariant,
+        borderColor: theme.colors.border,
+      }),
+      [theme.colors.surfaceVariant, theme.colors.border]
+    );
+
+    if (isLoading) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+          speed={800}
+        >
+          <View style={containerStyleMemo}>
+            {skeletonItems.map((item: any) => (
+              <SkeletonPlaceholder.Item
+                key={item}
+                width={scale(56)}
+                height={scale(24)}
+                borderRadius={scale(14)}
+                marginRight={scale(6)}
+                style={style?.skeletonTag}
+              />
+            ))}
+          </View>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    if (!genres?.length) {
+      return null;
+    }
+
+    return (
+      <View style={containerStyleMemo}>
+        {genres.map((tag, idx) => {
+          const name = tag?.name || String(tag);
+          if (isInlineMode) {
+            return (
+              <View key={idx} style={styles.inlineRow}>
+                <Text
+                  style={tagTextStyle}
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {name}
+                </Text>
+                {idx < genres.length - 1 && (
+                  <Text
+                    style={[
+                      styles.separator,
+                      { color: theme.colors.textPrimary },
+                    ]}
+                  >
+                    |
+                  </Text>
+                )}
+              </View>
+            );
+          }
+
+          return (
+            <View
+              key={idx}
+              style={[
+                styles.tagContainer,
+                tagContainerBaseStyle,
+                style?.tagContainer,
+              ]}
+            >
+              <Text style={tagTextStyle} numberOfLines={1} ellipsizeMode="tail">
+                {name}
+              </Text>
+            </View>
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+GenreTags.displayName = 'GenreTags';
+
+const styles = StyleSheet.create({
+  tagRowBadge: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: scale(4),
+    paddingHorizontal: scale(10),
+    marginVertical: verticalScale(6),
+  },
+  tagRowInline: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginTop: verticalScale(10),
+    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',
+  },
+  inlineRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tagTextBadge: {
+    fontSize: RFValue(9),
+    maxWidth: scale(110),
+  },
+  tagTextInline: {
+    fontSize: RFValue(12),
+    maxWidth: scale(110),
+  },
+  separator: {
+    marginHorizontal: scale(6),
+    fontSize: RFValue(12),
+    opacity: 0.7,
+  },
+});

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

@@ -0,0 +1,52 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { PlayCircleIcon } from 'lucide-react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useSafePressHandler } from '../../../hooks/useSafeCallback';
+
+interface Props {
+  onPress?: () => void;
+  size?: number;
+  color?: string;
+  backgroundColor?: string;
+}
+
+export const PlayButton = React.memo(
+  ({
+    onPress,
+    size = scale(40),
+    color = 'black',
+    backgroundColor = '#FFD700',
+  }: Props) => {
+    const buttonStyle = useMemo(
+      () => [styles.button, { backgroundColor, borderRadius: size }],
+      [backgroundColor, size]
+    );
+
+    const handlePress = useSafePressHandler(onPress);
+
+    return (
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={handlePress}
+        style={buttonStyle}
+      >
+        <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/shared/TrailerButton.tsx

@@ -0,0 +1,76 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { PlayCircle } from 'lucide-react-native';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  type TextStyle,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+import { useSafePressHandler } from '../../../hooks/useSafeCallback';
+
+interface Props {
+  onPress?: () => void;
+  label?: string;
+  iconSize?: number;
+  color?: string;
+  backgroundColor?: string;
+  textStyle?: StyleProp<TextStyle>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const TrailerButton = React.memo(
+  ({
+    onPress,
+    label = 'Watch Trailer',
+    iconSize = scale(18),
+    color = '#000',
+    backgroundColor = '#FFD700',
+    textStyle,
+    style,
+  }: Props) => {
+    const buttonStyle = useMemo(
+      () => [styles.button, { backgroundColor }, style],
+      [backgroundColor, style]
+    );
+
+    const textStyleMemo = useMemo(() => [styles.text, textStyle], [textStyle]);
+
+    const handlePress = useSafePressHandler(onPress);
+
+    return (
+      <TouchableOpacity
+        onPress={handlePress}
+        activeOpacity={0.8}
+        style={buttonStyle}
+      >
+        <PlayCircle size={iconSize} color={color} />
+        <Text style={textStyleMemo} color={color}>
+          {label}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    paddingVertical: verticalScale(3),
+    paddingHorizontal: scale(6),
+    borderRadius: moderateScale(20),
+    alignItems: 'center',
+  },
+  text: {
+    fontWeight: '600',
+    fontSize: scale(12),
+    marginLeft: scale(2),
+  },
+});

package/src/components/Fallbacks/NoContentFallback.tsx

@@ -0,0 +1,175 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  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 { ThemeOverride } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { AlertCircle } from 'lucide-react-native';
+
+export type NoContentFallbackProps = {
+  message?: string;
+  retryText?: string;
+  onRetry?: () => void;
+  isLoading?: boolean;
+  theme?: ThemeOverride;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const NoContentFallback = React.memo(
+  ({
+    message = 'No content available right now.\nPlease check back later.',
+    retryText = 'Try Again',
+    onRetry,
+    theme,
+    style,
+    isLoading = false,
+  }: NoContentFallbackProps) => {
+    const { theme: appliedTheme } = useTheme(theme);
+    const scaleValue = useSharedValue(1);
+
+    const handlePressIn = useCallback(() => {
+      if (isLoading) return; // disable press animation during loading
+      scaleValue.value = withSpring(0.95, { damping: 15, stiffness: 200 });
+    }, [scaleValue, isLoading]);
+
+    const handlePressOut = useCallback(() => {
+      if (isLoading) return;
+      scaleValue.value = withSpring(1, { damping: 15, stiffness: 200 });
+    }, [scaleValue, isLoading]);
+
+    const animatedButtonStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: scaleValue.value }],
+    }));
+
+    const iconColor = useMemo(
+      () => appliedTheme?.colors?.textSecondary ?? '#999',
+      [appliedTheme?.colors?.textSecondary]
+    );
+
+    const messageStyle = useMemo(
+      () => [styles.message, { color: appliedTheme.colors.textSecondary }],
+      [appliedTheme.colors.textSecondary]
+    );
+
+    const retryButtonStyle = useMemo(
+      () => [
+        styles.retryButton,
+        {
+          backgroundColor: isLoading
+            ? appliedTheme.colors.primary
+            : appliedTheme.colors.primary,
+          opacity: isLoading ? 0.8 : 1,
+        },
+      ],
+      [isLoading, appliedTheme.colors.primary]
+    );
+
+    const retryTextStyle = useMemo(
+      () => [styles.retryText, { color: appliedTheme.colors.onPrimary }],
+      [appliedTheme.colors.onPrimary]
+    );
+
+    const handleRetry = useCallback(() => {
+      if (!isLoading && onRetry) {
+        onRetry();
+      }
+    }, [isLoading, onRetry]);
+
+    return (
+      <Animated.View
+        style={[styles.container, style]}
+        accessibilityLabel="No content available"
+        accessibilityHint="Check back later or try again"
+      >
+        <AlertCircle
+          size={RFValue(63)}
+          color={iconColor}
+          style={{ marginBottom: scale(20) }}
+        />
+
+        <Text style={messageStyle}>{message}</Text>
+
+        {onRetry && (
+          <TouchableOpacity
+            onPress={handleRetry}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            activeOpacity={0.7}
+            disabled={isLoading}
+            style={retryButtonStyle}
+            accessibilityLabel={retryText}
+            accessibilityRole="button"
+          >
+            <Animated.View style={[animatedButtonStyle, styles.rowCenter]}>
+              {isLoading ? (
+                <>
+                  <ActivityIndicator
+                    size="small"
+                    color={appliedTheme.colors.onPrimary}
+                    style={styles.marginRight8}
+                  />
+                  <Text style={retryTextStyle}>Loading...</Text>
+                </>
+              ) : (
+                <Text style={retryTextStyle}>{retryText}</Text>
+              )}
+            </Animated.View>
+          </TouchableOpacity>
+        )}
+      </Animated.View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: scale(20),
+    paddingVertical: verticalScale(40),
+  },
+  message: {
+    fontSize: RFValue(15),
+    textAlign: 'center',
+    fontWeight: '500',
+    lineHeight: verticalScale(22),
+    marginBottom: verticalScale(20),
+  },
+  retryButton: {
+    paddingHorizontal: scale(18),
+    paddingVertical: verticalScale(10),
+    borderRadius: scale(8),
+    alignItems: 'center',
+  },
+  retryText: {
+    fontSize: RFValue(13),
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  marginRight8: {
+    marginRight: scale(8),
+  },
+});

package/src/components/Fallbacks/NotFoundFallback.tsx

@@ -0,0 +1,94 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { Button } from '../Button';
+import type { ThemeOverride } from '../../theme';
+import { View } from '../View';
+import { Text } from '../Text';
+import { AlertCircle } from 'lucide-react-native';
+import { useTheme } from '../../theme';
+
+interface NotFoundFallbackProps {
+  title?: string;
+  subtitle?: string;
+  content?: React.ReactNode;
+  onPressBack?: () => void;
+  backButtonText?: string;
+  theme?: ThemeOverride;
+  iconSize?: number;
+  iconColor?: string;
+}
+
+const NotFoundFallbackComponent: React.FC<NotFoundFallbackProps> = ({
+  title = 'Content Not Found',
+  subtitle = "We couldn't find anything to show here. Please check back later.",
+  content,
+  onPressBack,
+  backButtonText = 'Go Back',
+  theme,
+  iconSize = scale(60),
+  iconColor,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const finalIconColor = useMemo(
+    () => iconColor ?? appliedTheme?.colors?.textSecondary ?? '#999',
+    [iconColor, appliedTheme?.colors?.textSecondary]
+  );
+
+  if (content) return <>{content}</>;
+
+  return (
+    <View style={styles.container}>
+      <AlertCircle
+        size={iconSize}
+        color={finalIconColor}
+        style={{ marginBottom: scale(20) }}
+      />
+
+      <Text style={styles.title} type="title" theme={theme}>
+        {title}
+      </Text>
+      <Text style={styles.subtitle} type="subtitle" theme={theme}>
+        {subtitle}
+      </Text>
+
+      {onPressBack && (
+        <Button.Primary
+          theme={theme}
+          title={backButtonText}
+          onPress={onPressBack}
+        />
+      )}
+    </View>
+  );
+};
+
+export const NotFoundFallback = React.memo(NotFoundFallbackComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: scale(30),
+    paddingBottom: scale(30),
+    backgroundColor: 'transparent',
+  },
+  title: {
+    fontSize: scale(18),
+    fontWeight: '700',
+    marginBottom: scale(8),
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: scale(14),
+    textAlign: 'center',
+    marginBottom: scale(20),
+  },
+});

package/src/components/Fallbacks/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './NotFoundFallback';
+export * from './NoContentFallback';