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

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

@@ -0,0 +1,226 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Tue 13 Jun 2026 at 02:28 PM
+ */
+
+import React, { useMemo } 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 { ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { LikeShareActions } from './LikeShareActions';
+import type { LikeShareEventArgs } from '../../../../types';
+
+type Props = {
+  contentId: IContentData['_id'];
+  subtitle: string;
+  rating: IContentData['rating'];
+  releaseYear?: string | number | null;
+  duration?: string | number | null;
+  language?: string | null;
+  theme: ITheme;
+  isLoading?: boolean;
+  isLiked?: boolean;
+  onPressLike?: (args: LikeShareEventArgs) => void;
+  onPressShare?: (args: LikeShareEventArgs) => void;
+  style?: {
+    container?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    subTitle?: StyleProp<TextStyle>;
+    rating?: StyleProp<TextStyle>;
+    releaseYear?: StyleProp<TextStyle>;
+    duration?: StyleProp<TextStyle>;
+    language?: StyleProp<TextStyle>;
+  };
+};
+
+export const Title = React.memo(
+  ({
+    contentId,
+    subtitle,
+    rating,
+    releaseYear,
+    duration,
+    language,
+    theme,
+    isLoading = false,
+    isLiked,
+    onPressLike,
+    onPressShare,
+    style,
+  }: Props): React.ReactElement => {
+    const containerStyle = useMemo(
+      () => StyleSheet.flatten([styles.container, style?.container]),
+      [style?.container]
+    );
+
+    const subTitleStyle = useMemo(
+      () => StyleSheet.flatten([styles.subTitle, style?.subTitle]),
+      [style?.subTitle]
+    );
+
+    const ratingStyle = useMemo(
+      () => StyleSheet.flatten([styles.rating, style?.rating]),
+      [style?.rating]
+    );
+
+    const releaseYearStyle = useMemo(
+      () => StyleSheet.flatten([styles.metaText, style?.releaseYear]),
+      [style?.releaseYear]
+    );
+
+    const durationStyle = useMemo(
+      () => StyleSheet.flatten([styles.metaText, style?.duration]),
+      [style?.duration]
+    );
+
+    const languageStyle = useMemo(
+      () => StyleSheet.flatten([styles.metaText, style?.language]),
+      [style?.language]
+    );
+
+    if (isLoading) {
+      return (
+        <View style={containerStyle}>
+          <SkeletonPlaceholder
+            backgroundColor={theme.colors.skeletonBaseColor}
+            highlightColor={theme.colors.skeletonHighlightColor}
+          >
+            <SkeletonPlaceholder.Item>
+              <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>
+
+              <SkeletonPlaceholder.Item
+                width={scale(36)}
+                height={scale(16)}
+                borderRadius={scale(4)}
+                marginTop={scale(6)}
+              />
+            </SkeletonPlaceholder.Item>
+          </SkeletonPlaceholder>
+        </View>
+      );
+    }
+
+    return (
+      <View style={containerStyle}>
+        <View style={styles.metaRow}>
+          <View style={styles.leftMeta}>
+            {!!subtitle && (
+              <View
+                style={[
+                  styles.subTitleContainer,
+                  { backgroundColor: theme.colors.surfaceVariant },
+                ]}
+              >
+                <Text
+                  color={theme.colors.textPrimary}
+                  style={subTitleStyle}
+                  numberOfLines={1}
+                >
+                  {subtitle}
+                </Text>
+              </View>
+            )}
+
+            {!!releaseYear && (
+              <Text color={theme.colors.textPrimary} style={releaseYearStyle}>
+                • {releaseYear}
+              </Text>
+            )}
+
+            {!!duration && (
+              <Text color={theme.colors.textPrimary} style={durationStyle}>
+                • {duration}
+              </Text>
+            )}
+
+            {!!language && (
+              <Text color={theme.colors.textPrimary} style={languageStyle}>
+                • {language}
+              </Text>
+            )}
+          </View>
+
+          <LikeShareActions
+            theme={theme}
+            contentId={contentId}
+            isLiked={isLiked}
+            isLoading={isLoading}
+            onPressLike={onPressLike}
+            onPressShare={onPressShare}
+          />
+        </View>
+
+        {!!rating && (
+          <Text color={theme.colors.textSecondary} style={ratingStyle}>
+            ⭐ {rating}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: scale(12),
+    marginTop: scale(5),
+  },
+
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+
+  leftMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    flex: 1,
+  },
+
+  subTitleContainer: {
+    alignSelf: 'center',
+    paddingHorizontal: scale(8),
+    paddingVertical: scale(2),
+    borderRadius: scale(6),
+    marginRight: scale(6),
+  },
+
+  subTitle: {
+    fontSize: RFValue(12),
+    fontWeight: '500',
+  },
+
+  metaText: {
+    fontSize: RFValue(14),
+    marginRight: scale(4),
+  },
+
+  rating: {
+    fontSize: RFValue(12),
+    marginTop: scale(4),
+  },
+});

package/src/components/ContentView/Two/components/index.ts

@@ -0,0 +1,15 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Sat 17 Jan 2026 at 02:28 PM
+ */
+
+export * from './PlayOrTrailer';
+export * from './Title';
+export * from './HeroBanner';
+export * from './GenreTags';
+export * from './AboutSection';
+export * from './LikeShareActions';
+export * from './SectionTabs';
+export * from './MoreLikeThisContentList ';
+export * from './Details';
+export * from './EpisodeCard';

package/src/components/ContentView/index.ts

@@ -3,5 +3,11 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-export * from './ContentView';
+import { ContentViewOne } from './One/ContentViewOne';
+import { ContentViewTwo } from './Two/ContentViewTwo';
+
 export { default as MoreContentList } from './MoreContentList';
+export const ContentView = {
+  One: ContentViewOne,
+  Two: ContentViewTwo,
+};

package/src/components/Headers/Four.tsx

@@ -0,0 +1,83 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 13 Jun 2025 at 11:10 AM
+ */
+import React, { useMemo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Logo } from '../Logo/Logo';
+import type { ThemeOverride } from '../../theme/themes';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import CategoryCardTwo, {
+  type ICategory,
+} from '../Content/Card/Category/CategroyTwo';
+
+export interface HeaderFourProps {
+  logoUri: string;
+  category?: ICategory[] | null;
+  activeCategory?: ICategory | null;
+  onPressCategory?: (category: ICategory) => void;
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+}
+
+const HeaderFour: React.FC<HeaderFourProps> = ({
+  logoUri,
+  category,
+  activeCategory,
+  onPressCategory,
+  theme,
+  isLoading,
+}) => {
+  const insets = useSafeAreaInsets();
+
+  const headerStyle = useMemo(
+    () => [styles.headerContainer, { paddingTop: insets.top }],
+    [insets.top]
+  );
+
+  return (
+    <View style={headerStyle}>
+      <View style={styles.leftContainer}>
+        <View style={styles.logo}>
+          <Logo
+            width={scale(55)}
+            height={scale(50)}
+            logoUri={logoUri}
+            isLoading={isLoading}
+            theme={theme}
+          />
+        </View>
+        <CategoryCardTwo
+          category={category ?? undefined}
+          activeCategory={activeCategory ?? undefined}
+          onPressCategory={onPressCategory}
+          theme={theme}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(HeaderFour);
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: verticalScale(40),
+    paddingHorizontal: scale(8),
+  },
+
+  leftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: scale(10),
+  },
+  logo: {
+    alignItems: 'center',
+    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
+  },
+});

package/src/components/Headers/Three.tsx

@@ -3,39 +3,88 @@
  * @lastModified Fri 13 Jun 2025 at 11:10 AM
  */
 import React, { useMemo } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  useAnimatedStyle,
+  interpolate,
+  Extrapolation,
+  type SharedValue,
+} from 'react-native-reanimated';
 import { Logo } from '../Logo/Logo';
 import type { ThemeOverride } from '../../theme/themes';
 import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import CategoryCard from '../Content/Card/Category/Category';
+import type { ICategory } from '../Content/Card/Category/CategroyTwo';
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 
 export interface HeaderThreeProps {
   logoUri: string;
-  category?: React.ReactNode;
+  categories?: ICategory[];
+  activeCategory?: ICategory;
+  onPressCategory?: (category: ICategory) => void;
   theme?: ThemeOverride;
   isLoading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  scrollY?: SharedValue<number>;
+  scrollThreshold?: number;
 }
 
 const HeaderThree: React.FC<HeaderThreeProps> = ({
   logoUri,
-  category,
+  categories,
   theme,
   isLoading,
+  style,
+  scrollY,
+  scrollThreshold = 50,
+  activeCategory,
+  onPressCategory,
 }) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
 
-  const headerStyle = useMemo(
-    () => [
-      styles.headerContainer,
-      { backgroundColor: appliedTheme.colors.background },
-    ],
-    [appliedTheme.colors.background]
+  const headerWrapperStyle = useMemo(
+    () => [styles.wrapper, { backgroundColor: 'transparent' }, style],
+    [style]
   );
 
+  const gradientColors = useMemo(() => {
+    const bgColor = appliedTheme.colors.background;
+    return [bgColor, isDarkMode ? 'rgba(0,0, 0, 0)' : 'rgba(255,255, 255, 0)'];
+  }, [appliedTheme.colors.background, isDarkMode]);
+
+  const scrollBackgroundStyle = useAnimatedStyle(() => {
+    if (!scrollY) {
+      return { opacity: 0 };
+    }
+
+    const opacity = interpolate(
+      scrollY.value,
+      [0, scrollThreshold],
+      [0, 1],
+      Extrapolation.CLAMP
+    );
+
+    return {
+      opacity,
+    };
+  }, [scrollY, scrollThreshold]);
+
   return (
-    <View style={headerStyle}>
-      <View style={styles.leftContainer}>
-        <View style={styles.logo}>
+    <View style={headerWrapperStyle}>
+      {scrollY && (
+        <AnimatedLinearGradient
+          colors={gradientColors}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          locations={[0.75, 1]}
+          style={[styles.scrollBackgroundOverlay, scrollBackgroundStyle]}
+        />
+      )}
+      <View style={styles.headerContent}>
+        <View style={styles.logoContainer}>
           <Logo
             width={scale(55)}
             height={scale(50)}
@@ -43,7 +92,16 @@ const HeaderThree: React.FC<HeaderThreeProps> = ({
             isLoading={isLoading}
           />
         </View>
-        {category || null}
+        {categories && (
+          <View style={styles.categoryWrapper}>
+            <CategoryCard
+              category={categories}
+              theme={theme}
+              activeCategory={activeCategory}
+              onPressCategory={onPressCategory}
+            />
+          </View>
+        )}
       </View>
     </View>
   );
@@ -52,21 +110,26 @@ const HeaderThree: React.FC<HeaderThreeProps> = ({
 export default React.memo(HeaderThree);
 
 const styles = StyleSheet.create({
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: scale(8),
-    height: verticalScale(40),
+  wrapper: {
+    overflow: 'hidden',
   },
-
-  leftContainer: {
+  scrollBackgroundOverlay: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  headerContent: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: scale(10),
+    paddingHorizontal: scale(10),
+    minHeight: verticalScale(40),
+    zIndex: 9999,
   },
-  logo: {
+  logoContainer: {
     alignItems: 'center',
-    marginVertical: Platform.OS === 'ios' ? verticalScale(0) : verticalScale(5),
+    justifyContent: 'center',
+    marginVertical: verticalScale(5),
+  },
+  categoryWrapper: {
+    flex: 1,
+    marginLeft: scale(10),
   },
 });

package/src/components/Headers/index.ts

@@ -6,11 +6,13 @@
 import HeaderOne from './One';
 import HeaderThree from './Three';
 import HeaderTwo from './Two';
+import HeaderFour from './Four';
 
 const Header = {
   One: HeaderOne,
   Two: HeaderTwo,
   Three: HeaderThree,
+  Four: HeaderFour,
 };
 
 export { Header };

package/src/components/Input/Input.ts

@@ -4,13 +4,17 @@
  */
 
 import InputOne from './InputOne';
+import InputThree from './InputThree';
 import InputTwo from './InputTwo';
 import PhoneNumberInputOne from './PhoneNumberInput';
+import PhoneNumberInputTwo from './PhoneNumberInputTwo';
 
 const Input = {
   One: InputOne,
   Two: InputTwo,
+  Three: InputThree,
   Phone: PhoneNumberInputOne,
+  phone: PhoneNumberInputTwo,
 };
 
 export { Input };