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

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

@@ -1,162 +0,0 @@
-/**
- * @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

@@ -1,181 +0,0 @@
-/**
- * @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

@@ -1,229 +0,0 @@
-/**
- * @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

@@ -1,12 +0,0 @@
-/**
- * @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

@@ -1,13 +0,0 @@
-/**
- * @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,
-};