@zezosoft/zezo-ott-react-native-ui-kit 1.0.1 → 1.0.3

package/src/components/ContentView/components/EpisodeCard.tsx

@@ -62,7 +62,7 @@ const formatDate = (dateString: string): string => {
   return date.toLocaleDateString('en-US', {
     day: '2-digit',
     month: 'short',
-    year: 'numeric'
+    year: 'numeric',
   });
 };
 
@@ -76,15 +76,22 @@ const EpisodeCardItem = memo(
     theme,
     style,
     thumbnailHeight,
-    isLoading = false
+    isLoading = false,
   }: EpisodeCardItemProps) => {
     const handlePress = useCallback(() => {
       if (!isLoading) {
-        onPress?.({ season_id, episode_id: episode._id, episode_number: episode.number });
+        onPress?.({
+          season_id,
+          episode_id: episode._id,
+          episode_number: episode.number,
+        });
       }
     }, [season_id, episode._id, episode.number, onPress, isLoading]);
 
-    const isVerticalMode = useMemo(() => style && (style as any).width === Display.fullWidth - scale(16), [style]);
+    const isVerticalMode = useMemo(
+      () => style && (style as any).width === Display.fullWidth - scale(16),
+      [style]
+    );
 
     const cardStyle = useMemo(
       () => [
@@ -95,11 +102,19 @@ const EpisodeCardItem = memo(
           shadowOffset: { width: 0, height: isVerticalMode ? 0 : 1 },
           shadowOpacity: isVerticalMode ? 0 : 0.1,
           shadowRadius: isVerticalMode ? 0 : 2,
-          backgroundColor: isVerticalMode ? 'transparent' : theme.colors.surfaceVariant,
-          flexDirection: isVerticalMode ? ('row' as const) : ('column' as const),
+          backgroundColor: isVerticalMode
+            ? 'transparent'
+            : theme.colors.surfaceVariant,
+          flexDirection: isVerticalMode
+            ? ('row' as const)
+            : ('column' as const),
           borderWidth: isVerticalMode ? 0 : theme.dark ? 0 : BORDER_WIDTH,
-          borderColor: isVerticalMode ? 'transparent' : theme.dark ? 'transparent' : theme.colors.border
-        }
+          borderColor: isVerticalMode
+            ? 'transparent'
+            : theme.dark
+              ? 'transparent'
+              : theme.colors.border,
+        },
       ],
       [style, isVerticalMode, theme]
     );
@@ -114,9 +129,9 @@ const EpisodeCardItem = memo(
               borderRadius: moderateScale(6),
               width: windowWidth * 0.45,
               aspectRatio: THUMBNAIL_ASPECT_RATIO,
-              height: thumbnailHeight
+              height: thumbnailHeight,
             }
-          : { borderRadius: 0, height: thumbnailHeight }
+          : { borderRadius: 0, height: thumbnailHeight },
       ],
       [isVerticalMode, thumbnailHeight, windowWidth]
     );
@@ -129,7 +144,11 @@ const EpisodeCardItem = memo(
             highlightColor={theme.colors.skeletonHighlightColor}
           >
             {isVerticalMode ? (
-              <SkeletonPlaceholder.Item flexDirection="row" alignItems="flex-start" width="100%">
+              <SkeletonPlaceholder.Item
+                flexDirection="row"
+                alignItems="flex-start"
+                width="100%"
+              >
                 <SkeletonPlaceholder.Item
                   width="45%"
                   aspectRatio={THUMBNAIL_ASPECT_RATIO}
@@ -141,7 +160,11 @@ const EpisodeCardItem = memo(
                   justifyContent="center"
                   paddingTop={scale(2)}
                 >
-                  <SkeletonPlaceholder.Item width="80%" height={verticalScale(12)} borderRadius={moderateScale(4)} />
+                  <SkeletonPlaceholder.Item
+                    width="80%"
+                    height={verticalScale(12)}
+                    borderRadius={moderateScale(4)}
+                  />
                   {Array(4)
                     .fill(0)
                     .map((_, index) => (
@@ -178,7 +201,10 @@ const EpisodeCardItem = memo(
         <View style={[styles.cardContent, isVerticalMode && styles.cardGrid]}>
           <View style={thumbnailStyle}>
             <FastImage
-              source={{ uri: episode.thumbnail, priority: FastImage.priority.high }}
+              source={{
+                uri: episode.thumbnail,
+                priority: FastImage.priority.high,
+              }}
               style={styles.thumbnail}
               resizeMode={FastImage.resizeMode.cover}
               fallback
@@ -190,16 +216,29 @@ const EpisodeCardItem = memo(
               resizeMode={FastImage.resizeMode.cover}
             />
           </View>
-          <View style={[isVerticalMode ? styles.textRightHalf : styles.textWrapper]}>
-            <Text numberOfLines={1} color={theme.colors.textPrimary} style={styles.title}>
+          <View
+            style={[isVerticalMode ? styles.textRightHalf : styles.textWrapper]}
+          >
+            <Text
+              numberOfLines={1}
+              color={theme.colors.textPrimary}
+              style={styles.title}
+            >
               {episode.name || `Episode ${episode.number}`}
             </Text>
-            <Text color={theme.colors.onSurface} style={{ fontSize: RFValue(9), marginTop: verticalScale(2) }}>
+            <Text
+              color={theme.colors.onSurface}
+              style={{ fontSize: RFValue(9), marginTop: verticalScale(2) }}
+            >
               {`S${String(season_number).padStart(2, '0')} | E${String(episode.number).padStart(2, '0')} | `}
               {episode.createdAt && formatDate(episode.createdAt)}
             </Text>
             {!!episode.description && (
-              <Text numberOfLines={isVerticalMode ? 4 : 2} color={theme.colors.textSecondary} style={styles.subtitle}>
+              <Text
+                numberOfLines={isVerticalMode ? 4 : 2}
+                color={theme.colors.textSecondary}
+                style={styles.subtitle}
+              >
                 {episode.description}
               </Text>
             )}
@@ -217,14 +256,26 @@ const EpisodeCardItem = memo(
 );
 
 // Main Component
-export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode = 'horizontal' }: EpisodeCardProps) => {
+export const EpisodeCard = ({
+  seasons,
+  onPress,
+  theme,
+  isLoading = false,
+  mode = 'horizontal',
+}: EpisodeCardProps) => {
   const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
   const windowWidth = Display.fullWidth;
 
-  const selectedSeason = useMemo(() => seasons[selectedSeasonIndex] || null, [seasons, selectedSeasonIndex]);
+  const selectedSeason = useMemo(
+    () => seasons[selectedSeasonIndex] || null,
+    [seasons, selectedSeasonIndex]
+  );
 
   const cardWidth = useMemo(
-    () => (mode === 'horizontal' ? Math.min(windowWidth * 0.45, moderateScale(180)) : windowWidth - scale(16)),
+    () =>
+      mode === 'horizontal'
+        ? Math.min(windowWidth * 0.45, moderateScale(180))
+        : windowWidth - scale(16),
     [windowWidth, mode]
   );
 
@@ -242,9 +293,12 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
         style={[
           styles.tab,
           {
-            backgroundColor: selectedSeasonIndex === index ? theme.colors.button : theme.colors.surfaceVariant,
-            borderColor: theme.colors.border
-          }
+            backgroundColor:
+              selectedSeasonIndex === index
+                ? theme.colors.button
+                : theme.colors.surfaceVariant,
+            borderColor: theme.colors.border,
+          },
         ]}
         accessibilityRole="tab"
         accessibilityState={{ selected: selectedSeasonIndex === index }}
@@ -253,7 +307,12 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
         <Text
           style={[
             styles.tabText,
-            { color: selectedSeasonIndex === index ? theme.colors.buttonText : theme.colors.textPrimary }
+            {
+              color:
+                selectedSeasonIndex === index
+                  ? theme.colors.buttonText
+                  : theme.colors.textPrimary,
+            },
           ]}
         >
           {season.name || `Season ${index + 1}`}
@@ -299,7 +358,7 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
           updatedAt: '',
           source_type: 'HLS',
           content_offering_type: 'FREE',
-          status: true
+          status: true,
         }}
         onPress={onPress}
         style={{ width: cardWidth }}
@@ -312,7 +371,9 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
 
   if (isLoading) {
     return (
-      <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+      <View
+        style={[styles.container, { backgroundColor: theme.colors.background }]}
+      >
         <FlatList
           data={Array(SKELETON_COUNT).fill(0)}
           keyExtractor={(_, index) => `skeleton_tab_${index}`}
@@ -354,7 +415,9 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
       <FlatList
         data={seasons}
         renderItem={renderSeasonTab}
@@ -372,7 +435,9 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
         renderItem={renderEpisodeItem}
         ListEmptyComponent={
           <View style={styles.emptyContainer}>
-            <Text color={theme.colors.textSecondary}>No episodes available</Text>
+            <Text color={theme.colors.textSecondary}>
+              No episodes available
+            </Text>
           </View>
         }
       />
@@ -385,70 +450,70 @@ const styles = StyleSheet.create({
   container: {
     paddingVertical: verticalScale(4),
     flexDirection: 'column',
-    gap: CONTAINER_GAP
+    gap: CONTAINER_GAP,
   },
   tabsContainer: {
-    paddingHorizontal: CONTAINER_PADDING_HORIZONTAL
+    paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
   },
   tab: {
     paddingHorizontal: TAB_PADDING_HORIZONTAL,
     paddingVertical: TAB_PADDING_VERTICAL,
     borderRadius: moderateScale(16),
     marginRight: TAB_MARGIN_RIGHT,
-    borderWidth: BORDER_WIDTH
+    borderWidth: BORDER_WIDTH,
   },
   tabText: {
     fontSize: TITLE_FONT_SIZE,
-    fontWeight: '600'
+    fontWeight: '600',
   },
   listContainer: {
     paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
-    gap: CONTAINER_GAP
+    gap: CONTAINER_GAP,
   },
   card: {
     borderRadius: moderateScale(8),
     overflow: 'hidden',
-    elevation: CARD_ELEVATION
+    elevation: CARD_ELEVATION,
   },
   cardContent: {
     flexDirection: 'column',
-    width: '100%'
+    width: '100%',
   },
   cardGrid: {
     flexDirection: 'row',
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
   },
   thumbnailCommon: {
     overflow: 'hidden',
     backgroundColor: '#ccc',
-    width: '100%'
+    width: '100%',
   },
   thumbnail: {
     width: '100%',
-    height: '100%'
+    height: '100%',
   },
   textWrapper: {
-    padding: TEXT_PADDING
+    padding: TEXT_PADDING,
   },
   textRightHalf: {
     flex: 1,
     width: '55%',
     paddingVertical: verticalScale(2),
     paddingHorizontal: TEXT_PADDING,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   title: {
     fontSize: TITLE_FONT_SIZE,
-    fontWeight: '600'
+    fontWeight: '600',
   },
   subtitle: {
     fontSize: SUBTITLE_FONT_SIZE,
     lineHeight: SUBTITLE_LINE_HEIGHT,
     opacity: 0.8,
-    marginTop: verticalScale(2)
+    marginTop: verticalScale(2),
   },
   emptyContainer: {
     padding: CONTAINER_PADDING_HORIZONTAL,
-    alignItems: 'center'
-  }
+    alignItems: 'center',
+  },
 });

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

@@ -4,7 +4,13 @@
  */
 
 import React from 'react';
-import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+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';
@@ -24,7 +30,12 @@ type Props = {
   };
 };
 
-export const GenreTags = ({ genres, theme, isLoading = false, style }: Props): React.ReactElement => {
+export const GenreTags = ({
+  genres,
+  theme,
+  isLoading = false,
+  style,
+}: Props): React.ReactElement => {
   if (isLoading || !genres?.length) {
     return (
       <SkeletonPlaceholder
@@ -34,7 +45,13 @@ export const GenreTags = ({ genres, theme, isLoading = false, style }: Props): R
       >
         <View style={StyleSheet.flatten([styles.tagRow, style?.container])}>
           {[1, 2, 3].map((_, idx) => (
-            <View key={idx} style={StyleSheet.flatten([styles.skeletonTag, style?.skeletonTag])} />
+            <View
+              key={idx}
+              style={StyleSheet.flatten([
+                styles.skeletonTag,
+                style?.skeletonTag,
+              ])}
+            />
           ))}
         </View>
       </SkeletonPlaceholder>
@@ -48,12 +65,19 @@ export const GenreTags = ({ genres, theme, isLoading = false, style }: Props): R
           key={idx}
           style={StyleSheet.flatten([
             styles.tagContainer,
-            { backgroundColor: theme.colors.surfaceVariant, borderColor: theme.colors.border },
-            style?.tagContainer
+            {
+              backgroundColor: theme.colors.surfaceVariant,
+              borderColor: theme.colors.border,
+            },
+            style?.tagContainer,
           ])}
         >
           <Text
-            style={StyleSheet.flatten([styles.tagText, { color: theme.colors.textPrimary }, style?.tagText])}
+            style={StyleSheet.flatten([
+              styles.tagText,
+              { color: theme.colors.textPrimary },
+              style?.tagText,
+            ])}
             numberOfLines={1}
             ellipsizeMode="tail"
           >
@@ -71,7 +95,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     gap: scale(4),
     paddingHorizontal: scale(10),
-    marginVertical: verticalScale(6)
+    marginVertical: verticalScale(6),
   },
   tagContainer: {
     paddingHorizontal: scale(10),
@@ -79,15 +103,15 @@ const styles = StyleSheet.create({
     borderWidth: scale(0.5),
     borderRadius: scale(14),
     maxWidth: '100%',
-    alignSelf: 'flex-start'
+    alignSelf: 'flex-start',
   },
   tagText: {
     fontSize: RFValue(9),
-    maxWidth: scale(110)
+    maxWidth: scale(110),
   },
   skeletonTag: {
     width: scale(56),
     height: scale(24),
-    borderRadius: scale(14)
-  }
+    borderRadius: scale(14),
+  },
 });

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

@@ -3,7 +3,7 @@
  * @lastModified Wed 02 Jul 2025 at 04:50 PM
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import { 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';
@@ -32,14 +32,17 @@ export const HeroBanner = ({
   style,
   renderButtons,
   renderSkeletons,
-  menuActions
+  menuActions,
 }: HeroBannerProps) => {
   const [hasImageLoaded, setHasImageLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
 
-  const handlePressPlay = useCallback(() => {
-    onPressPlay?.();
-  }, [onPressPlay]);
+  const handlePressPlay = useCallback(
+    ({ is_trailer }: { is_trailer: boolean }) => {
+      onPressPlay?.({ is_trailer });
+    },
+    [onPressPlay]
+  );
 
   const showSkeleton = isLoading || (!hasImageLoaded && !imageLoadError);
 
@@ -51,37 +54,37 @@ export const HeroBanner = ({
           width: '100%',
           overflow: 'hidden',
           position: 'relative',
-          backgroundColor: theme.colors.backgroundDisabled
+          backgroundColor: theme.colors.backgroundDisabled,
         },
         centeredContent: {
           ...StyleSheet.absoluteFillObject,
           justifyContent: 'center',
           alignItems: 'center',
           zIndex: 4,
-          pointerEvents: 'box-none'
+          pointerEvents: 'box-none',
         },
         skeletonContainer: {
           ...StyleSheet.absoluteFillObject,
           backgroundColor: theme.colors.backgroundDisabled,
           justifyContent: 'center',
           alignItems: 'center',
-          zIndex: 2
+          zIndex: 2,
         },
         errorContainer: {
           ...StyleSheet.absoluteFillObject,
           justifyContent: 'center',
           alignItems: 'center',
           backgroundColor: theme.colors.backgroundDisabled,
-          zIndex: 1
+          zIndex: 1,
         },
         errorText: {
           color: theme.colors.textSecondary,
           fontSize: RFValue(15),
-          textAlign: 'center'
+          textAlign: 'center',
         },
         imageContainer: {
           ...StyleSheet.absoluteFillObject,
-          zIndex: 0
+          zIndex: 0,
         },
         trailerButtonWrapper: {
           ...StyleSheet.absoluteFillObject,
@@ -89,34 +92,34 @@ export const HeroBanner = ({
           alignItems: 'center',
           bottom: verticalScale(10),
           zIndex: 4,
-          pointerEvents: 'box-none'
+          pointerEvents: 'box-none',
         },
         backBtnSkeleton: {
           position: 'absolute',
           top: scale(6),
           left: scale(13),
-          zIndex: 4
+          zIndex: 4,
         },
         menuBtnSkeleton: {
           position: 'absolute',
           top: scale(6),
           right: scale(13),
-          zIndex: 4
+          zIndex: 4,
         },
         defaultBackBtn: {
           position: 'absolute',
           top: scale(6),
           left: scale(13),
           zIndex: 4,
-          backgroundColor: theme.colors.background
+          backgroundColor: theme.colors.background,
         },
         defaultMenuBtn: {
           position: 'absolute',
           top: scale(6),
           right: scale(13),
           zIndex: 4,
-          backgroundColor: theme.colors.background
-        }
+          backgroundColor: theme.colors.background,
+        },
       }),
     [theme]
   );
@@ -142,7 +145,12 @@ export const HeroBanner = ({
           ))
         : (renderButtons?.back?.() ??
           (onBackPress && (
-            <BackBtn theme={theme} onPress={onBackPress} style={styles.defaultBackBtn} size={scale(20)} />
+            <BackBtn
+              theme={theme}
+              onPress={onBackPress}
+              style={styles.defaultBackBtn}
+              size={scale(20)}
+            />
           )))}
 
       {/* Menu Button */}
@@ -163,7 +171,13 @@ export const HeroBanner = ({
             </View>
           ))
         : menuActions &&
-          (renderButtons?.menu?.() ?? <MenuBtn theme={theme} style={styles.defaultMenuBtn} actions={menuActions} />)}
+          (renderButtons?.menu?.() ?? (
+            <MenuBtn
+              theme={theme}
+              style={styles.defaultMenuBtn}
+              actions={menuActions}
+            />
+          ))}
 
       {/* Gradient Overlay */}
       <LinearGradient
@@ -177,7 +191,10 @@ export const HeroBanner = ({
         <View style={styles.imageContainer}>
           <FastImage
             style={StyleSheet.absoluteFillObject}
-            source={{ uri: backgroundImage, cache: FastImage.cacheControl.immutable }}
+            source={{
+              uri: backgroundImage,
+              cache: FastImage.cacheControl.immutable,
+            }}
             resizeMode={FastImage.resizeMode.cover}
             onLoad={() => setHasImageLoaded(true)}
             onError={() => setImageLoadError(true)}
@@ -196,7 +213,12 @@ export const HeroBanner = ({
                 highlightColor={theme.colors.skeletonHighlightColor}
                 speed={800}
               >
-                <SkeletonPlaceholder.Item width="100%" height="100%" justifyContent="center" alignItems="center">
+                <SkeletonPlaceholder.Item
+                  width="100%"
+                  height="100%"
+                  justifyContent="center"
+                  alignItems="center"
+                >
                   <SkeletonPlaceholder.Item
                     width={SKELETON_CIRCLE_SIZE}
                     height={SKELETON_CIRCLE_SIZE}
@@ -214,7 +236,11 @@ export const HeroBanner = ({
                 highlightColor={theme.colors.skeletonHighlightColor}
                 speed={800}
               >
-                <SkeletonPlaceholder.Item width={scale(110)} height={verticalScale(25)} borderRadius={scale(14)} />
+                <SkeletonPlaceholder.Item
+                  width={scale(110)}
+                  height={verticalScale(25)}
+                  borderRadius={scale(14)}
+                />
               </SkeletonPlaceholder>
             )}
           </View>
@@ -225,11 +251,19 @@ export const HeroBanner = ({
       {!showSkeleton && !imageLoadError && (
         <>
           <Animated.View style={styles.centeredContent}>
-            {renderButtons?.play?.() ?? <PlayButton onPress={handlePressPlay} />}
+            {renderButtons?.play?.() ?? (
+              <PlayButton
+                onPress={() => handlePressPlay({ is_trailer: false })}
+              />
+            )}
           </Animated.View>
 
           <Animated.View style={styles.trailerButtonWrapper}>
-            {renderButtons?.trailer?.() ?? <TrailerButton onPress={handlePressPlay} />}
+            {renderButtons?.trailer?.() ?? (
+              <TrailerButton
+                onPress={() => handlePressPlay({ is_trailer: true })}
+              />
+            )}
           </Animated.View>
         </>
       )}

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

@@ -3,8 +3,11 @@
  * @lastModified Wed 02 Jul 2025 at 03:38 PM
  * */
 
-import React from 'react';
-import { TouchableOpacity, StyleSheet, type GestureResponderEvent } from 'react-native';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  type GestureResponderEvent,
+} from 'react-native';
 import { PlayCircleIcon } from 'lucide-react-native';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
 
@@ -15,7 +18,12 @@ interface Props {
   backgroundColor?: string;
 }
 
-export const PlayButton = ({ onPress, size = scale(40), color = 'black', backgroundColor = '#FFD700' }: Props) => {
+export const PlayButton = ({
+  onPress,
+  size = scale(40),
+  color = 'black',
+  backgroundColor = '#FFD700',
+}: Props) => {
   return (
     <TouchableOpacity
       activeOpacity={0.8}
@@ -32,6 +40,6 @@ const styles = StyleSheet.create({
     padding: moderateScale(6),
     marginBottom: verticalScale(10),
     alignItems: 'center',
-    justifyContent: 'center'
-  }
+    justifyContent: 'center',
+  },
 });