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

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

@@ -0,0 +1,162 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { Play, ShoppingCart } from 'lucide-react-native';
+import { Button } from '../../../Button';
+import type { ThemeOverride } from '../../../../theme/themes';
+import { useTheme } from '../../../../theme';
+
+export type playButtonConfig = {
+  title: string;
+  mode: 'WATCH NOW' | 'RENT NOW' | 'SUBSCRIBE' | 'LOADING';
+};
+
+interface Props {
+  onPressPlay?: ({ is_trailer }: { is_trailer: boolean }) => void;
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+  playButtonConfig?: playButtonConfig;
+  contentType?: string;
+}
+
+export const PlayOrTrailer = React.memo(
+  ({
+    onPressPlay,
+    theme,
+    isLoading = false,
+    playButtonConfig,
+    contentType,
+  }: Props) => {
+    const { theme: appliedTheme } = useTheme(theme);
+    const isLiveStream = contentType === 'live_stream';
+
+    const iconSize = scale(18);
+    const isPlayButtonLoading = playButtonConfig?.mode === 'LOADING';
+    const isAnyButtonDisabled = isLoading || isPlayButtonLoading;
+
+    const handlePressPlay = useCallback(
+      ({ is_trailer }: { is_trailer: boolean }) => {
+        onPressPlay?.({ is_trailer });
+      },
+      [onPressPlay]
+    );
+
+    const handlePressWatchNow = useCallback(
+      () => handlePressPlay({ is_trailer: false }),
+      [handlePressPlay]
+    );
+
+    const handlePressTrailer = useCallback(
+      () => handlePressPlay({ is_trailer: true }),
+      [handlePressPlay]
+    );
+
+    const playIcon = useMemo(() => {
+      if (playButtonConfig?.mode === 'RENT NOW') {
+        return (
+          <ShoppingCart
+            size={22}
+            color={appliedTheme.colors.black}
+            fill={appliedTheme.colors.black}
+            strokeWidth={2}
+          />
+        );
+      }
+
+      return (
+        <Play
+          size={iconSize}
+          color={appliedTheme.colors.black}
+          fill={appliedTheme.colors.black}
+          stroke="none"
+        />
+      );
+    }, [playButtonConfig, iconSize, appliedTheme]);
+
+    const watchNowTheme: ThemeOverride = {
+      light: {
+        button: appliedTheme.colors.surfaceVariant,
+        buttonText: appliedTheme.colors.black,
+        buttonDisabled: appliedTheme.colors.surfaceVariant,
+      },
+      dark: {
+        button: appliedTheme.colors.white,
+        buttonDisabled: appliedTheme.colors.white,
+        buttonText: appliedTheme.colors.black,
+      },
+    };
+
+    const trailerTheme: ThemeOverride = {
+      light: {
+        button: appliedTheme.colors.onBackground,
+        buttonText: appliedTheme.colors.white,
+      },
+      dark: {
+        button: appliedTheme.colors.surface,
+        buttonText: appliedTheme.colors.onSurface,
+      },
+    };
+
+    if (isLoading) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          borderRadius={scale(8)}
+        >
+          <View style={styles.container}>
+            <View style={styles.skeletonButton} />
+            {!isLiveStream && <View style={styles.skeletonButton} />}
+          </View>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    return (
+      <View style={styles.container}>
+        <Button.Primary
+          title={playButtonConfig?.title || 'Watch Now'}
+          onPress={handlePressWatchNow}
+          loading={isPlayButtonLoading}
+          disabled={isAnyButtonDisabled}
+          theme={watchNowTheme}
+          containerStyle={styles.button}
+          leftIcon={playIcon}
+        />
+
+        {!isLiveStream && (
+          <Button.Primary
+            title="Trailer"
+            onPress={handlePressTrailer}
+            theme={trailerTheme}
+            containerStyle={styles.button}
+          />
+        )}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: scale(10),
+    paddingHorizontal: scale(12),
+    alignItems: 'center',
+    marginTop: scale(10),
+  },
+  button: {
+    flex: 1,
+  },
+  skeletonButton: {
+    flex: 1,
+    height: scale(42),
+    borderRadius: scale(8),
+  },
+});

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

@@ -0,0 +1,181 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Text } from '../../../Text';
+import type { ITheme } from '../../../../theme/themes';
+
+export type TabKey = 'more' | 'details';
+
+type StyleProps = {
+  container?: StyleProp<ViewStyle>;
+  tab?: StyleProp<ViewStyle>;
+  title?: StyleProp<TextStyle>;
+  indicator?: StyleProp<ViewStyle>;
+};
+
+type Props = {
+  theme: ITheme;
+
+  /** 🔥 Controlled props */
+  activeTab: TabKey;
+  onTabChange: (tab: TabKey) => void;
+
+  /** Optional */
+  isLoading?: boolean;
+  leftTitle?: string;
+  rightTitle?: string;
+
+  style?: StyleProps;
+};
+
+export const SectionTabs = React.memo(
+  ({
+    theme,
+    activeTab,
+    onTabChange,
+    isLoading = false,
+    leftTitle = 'More like this',
+    rightTitle = 'Details',
+    style = {},
+  }: Props) => {
+    const handlePress = useCallback(
+      (tab: TabKey) => {
+        if (tab !== activeTab) {
+          onTabChange(tab);
+        }
+      },
+      [activeTab, onTabChange]
+    );
+
+    /** 🔹 Skeleton loader */
+    if (isLoading) {
+      return (
+        <SkeletonPlaceholder
+          backgroundColor={theme.colors.skeletonBaseColor}
+          highlightColor={theme.colors.skeletonHighlightColor}
+        >
+          <SkeletonPlaceholder.Item
+            flexDirection="row"
+            justifyContent="space-between"
+            paddingHorizontal={scale(12)}
+            marginVertical={scale(12)}
+          >
+            <SkeletonPlaceholder.Item
+              width={scale(120)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+            />
+            <SkeletonPlaceholder.Item
+              width={scale(80)}
+              height={scale(16)}
+              borderRadius={scale(4)}
+            />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      );
+    }
+
+    if (!leftTitle && !rightTitle) {
+      return null;
+    }
+    return (
+      <View style={[styles.container, style.container]}>
+        <View style={styles.row}>
+          {/* 🔹 More like this */}
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => handlePress('more')}
+            style={[styles.tab, style.tab]}
+          >
+            <Text
+              style={[
+                styles.title,
+                { color: theme.colors.textPrimary },
+                style.title,
+              ]}
+            >
+              {leftTitle}
+            </Text>
+
+            {activeTab === 'more' && (
+              <View
+                style={[
+                  styles.indicator,
+                  { backgroundColor: theme.colors.primary },
+                  style.indicator,
+                ]}
+              />
+            )}
+          </TouchableOpacity>
+
+          {/* 🔹 Details */}
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => handlePress('details')}
+            style={[styles.tab, style.tab]}
+          >
+            <Text
+              style={[
+                styles.title,
+                { color: theme.colors.textPrimary },
+                style.title,
+              ]}
+            >
+              {rightTitle}
+            </Text>
+
+            {activeTab === 'details' && (
+              <View
+                style={[
+                  styles.indicator,
+                  { backgroundColor: theme.colors.primary },
+                  style.indicator,
+                ]}
+              />
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: scale(12),
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: scale(12),
+    justifyContent: 'space-between',
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: RFValue(14),
+    fontWeight: '600',
+  },
+  indicator: {
+    marginTop: scale(6),
+    marginBottom: scale(10),
+    height: scale(2.5),
+    borderRadius: scale(2),
+    width: '100%',
+  },
+});

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

@@ -0,0 +1,229 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+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 | null => {
+    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}>
+                {subtitle ? '  •  ' : ''}
+                {releaseYear}
+              </Text>
+            )}
+
+            {!!duration && (
+              <Text color={theme.colors.textPrimary} style={durationStyle}>
+                {subtitle || releaseYear ? '  •  ' : ''}
+                {duration}
+              </Text>
+            )}
+
+            {!!language && (
+              <Text color={theme.colors.textPrimary} style={languageStyle}>
+                {subtitle || releaseYear || duration ? '  •  ' : ''}
+                {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(12),
+    marginRight: scale(4),
+  },
+
+  rating: {
+    fontSize: RFValue(12),
+    marginTop: scale(4),
+  },
+});

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

@@ -0,0 +1,12 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export * from './PlayOrTrailer';
+export * from './Title';
+export * from './HeroBanner';
+export * from './LikeShareActions';
+export * from './SectionTabs';
+export * from './MoreLikeThisContentList ';
+export * from './Details';

package/src/components/ContentView/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { ContentViewOne } from './One/ContentViewOne';
+import { ContentViewTwo } from './Two/ContentViewTwo';
+
+export { default as MoreContentList } from './MoreContentList';
+export const ContentView = {
+  One: ContentViewOne,
+  Two: ContentViewTwo,
+};