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

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

@@ -1,216 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified Tue 13 Jun 2026 at 02:28 PM
- */
-
-import React, { useRef, useState, useCallback, useMemo } from 'react';
-import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
-import {
-  View,
-  StyleSheet,
-  ScrollView,
-  TouchableOpacity,
-  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';
-import type { ITheme } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-type Props = {
-  theme: ITheme;
-  title?: IContentData['name'];
-  description?: IContentData['description'];
-  release_year?: IContentData['release_year'];
-  isLoading?: boolean;
-  style?: {
-    container?: StyleProp<ViewStyle>;
-    title?: StyleProp<TextStyle>;
-    body?: StyleProp<TextStyle>;
-    scrollExpanded?: StyleProp<ViewStyle>;
-    toggleText?: StyleProp<TextStyle>;
-    skeletonLine?: StyleProp<ViewStyle>;
-    releaseYear?: StyleProp<ViewStyle>;
-  };
-};
-
-export const AboutSection = React.memo(
-  ({
-    theme,
-    title = 'About',
-    release_year,
-    description,
-    isLoading = false,
-    style,
-  }: Props) => {
-    const [expanded, setExpanded] = useState(false);
-    const scrollRef = useRef<ScrollView>(null);
-    const skeletonItems = useSkeletonItems(4);
-
-    const toggle = useCallback(() => {
-      if (expanded) {
-        scrollRef.current?.scrollTo({ y: 0, animated: false });
-      }
-      setExpanded((prev) => !prev);
-    }, [expanded]);
-
-    // Memoize show toggle condition
-    const showToggle = useMemo(
-      () => description && description.length > 150,
-      [description]
-    );
-
-    // Memoize container style
-    const containerStyle = useMemo(
-      () => [styles.container, style?.container],
-      [style?.container]
-    );
-
-    // Memoize title style
-    const titleStyleMemo = useMemo(
-      () => [styles.title, style?.title],
-      [style?.title]
-    );
-
-    // Memoize body style
-    const bodyStyleMemo = useMemo(
-      () => [styles.body, style?.body],
-      [style?.body]
-    );
-
-    // Memoize scroll expanded style
-    const scrollExpandedStyleMemo = useMemo(
-      () => [styles.scrollExpanded, style?.scrollExpanded],
-      [style?.scrollExpanded]
-    );
-
-    // Memoize release year style
-    const releaseYearStyleMemo = useMemo(
-      () => [styles.releaseYear, style?.releaseYear],
-      [style?.releaseYear]
-    );
-
-    // Memoize toggle text style
-    const toggleTextStyleMemo = useMemo(
-      () => [
-        styles.toggleText,
-        { color: theme.colors.primary },
-        style?.toggleText,
-      ],
-      [theme.colors.primary, style?.toggleText]
-    );
-
-    if (isLoading || !description) {
-      return (
-        <SkeletonPlaceholder
-          backgroundColor={theme.colors.skeletonBaseColor}
-          highlightColor={theme.colors.skeletonHighlightColor}
-        >
-          <SkeletonPlaceholder.Item
-            paddingHorizontal={scale(12)}
-            marginTop={verticalScale(7)}
-          >
-            <SkeletonPlaceholder.Item
-              width={scale(70)}
-              height={scale(16)}
-              borderRadius={scale(4)}
-              marginBottom={scale(10)}
-              style={style?.skeletonLine}
-            />
-            {skeletonItems.map((_, idx) => (
-              <SkeletonPlaceholder.Item
-                key={idx}
-                width={idx === 3 ? '80%' : idx % 3 === 0 ? '95%' : '100%'}
-                height={scale(14)}
-                borderRadius={scale(4)}
-                marginBottom={scale(6)}
-                style={style?.skeletonLine}
-              />
-            ))}
-          </SkeletonPlaceholder.Item>
-        </SkeletonPlaceholder>
-      );
-    }
-
-    return (
-      <View style={containerStyle}>
-        <Text color={theme.colors.primary} style={titleStyleMemo}>
-          {title}
-        </Text>
-
-        {/* Release Year */}
-        {release_year && (
-          <Text color={theme.colors.onSurface} style={releaseYearStyleMemo}>
-            Release:{' '}
-            <Text color={theme.colors.textPrimary}>{release_year}</Text>
-          </Text>
-        )}
-
-        {!expanded ? (
-          <Text
-            color={theme.colors.onSurface}
-            style={bodyStyleMemo}
-            numberOfLines={3}
-            ellipsizeMode="tail"
-          >
-            {description}
-          </Text>
-        ) : (
-          <ScrollView
-            style={scrollExpandedStyleMemo}
-            showsVerticalScrollIndicator
-            ref={scrollRef}
-            nestedScrollEnabled
-          >
-            <Text color={theme.colors.onSurface} style={bodyStyleMemo}>
-              {description}
-            </Text>
-          </ScrollView>
-        )}
-
-        {showToggle && (
-          <TouchableOpacity onPress={toggle}>
-            <Text style={toggleTextStyleMemo}>
-              {expanded ? 'See less' : 'See more'}
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: scale(12),
-    marginTop: verticalScale(7),
-  },
-  title: {
-    fontSize: RFValue(13),
-    fontWeight: 'bold',
-    marginBottom: scale(6),
-  },
-  body: {
-    fontSize: RFValue(11),
-    lineHeight: scale(16),
-    textAlign: 'auto',
-  },
-  scrollExpanded: {
-    maxHeight: verticalScale(250),
-  },
-  releaseYear: {
-    fontSize: RFValue(12),
-    fontWeight: '500',
-    marginBottom: scale(6),
-    letterSpacing: 0.3,
-  },
-  toggleText: {
-    fontSize: RFValue(9.5),
-    fontWeight: '600',
-    marginTop: scale(4),
-  },
-});

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

@@ -1,193 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified Sat 17 Jan 2026 at 02:28 PM
- */
-
-import React, { memo, useMemo } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { Text } from '../../../Text';
-import type { ITheme } from '../../../../theme/themes';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-type ContentPerson = {
-  _id: string;
-  name: string;
-  type?: string;
-};
-
-type Props = {
-  theme: ITheme;
-  isLoading?: boolean;
-  content: IContentData;
-};
-
-const InfoRow = memo(
-  ({
-    label,
-    value,
-    theme,
-  }: {
-    label: string;
-    value?: string;
-    theme: ITheme;
-  }) => {
-    const displayValue = value && value.trim().length > 0 ? value : 'N/A';
-
-    return (
-      <View style={styles.row}>
-        <Text style={[styles.label, { color: theme.colors.textPrimary }]}>
-          {label}
-        </Text>
-
-        <Text style={[styles.value, { color: theme.colors.textPrimary }]}>
-          {displayValue}
-        </Text>
-      </View>
-    );
-  }
-);
-
-export const Details: React.FC<Props> = ({
-  theme,
-  isLoading = false,
-  content,
-}) => {
-  const castList = useMemo(() => content?.cast ?? [], [content?.cast]);
-
-  const { actors, directors, writers, producers } = useMemo(() => {
-    const grouped = {
-      actors: [] as ContentPerson[],
-      directors: [] as ContentPerson[],
-      writers: [] as ContentPerson[],
-      producers: [] as ContentPerson[],
-    };
-
-    castList.forEach((person) => {
-      switch (person.type) {
-        case 'actor':
-          grouped.actors.push(person);
-          break;
-        case 'director':
-          grouped.directors.push(person);
-          break;
-        case 'writer':
-          grouped.writers.push(person);
-          break;
-        case 'producer':
-          grouped.producers.push(person);
-          break;
-        default:
-          break;
-      }
-    });
-
-    return grouped;
-  }, [castList]);
-
-  if (isLoading) {
-    return (
-      <SkeletonPlaceholder
-        backgroundColor={theme.colors.skeletonBaseColor}
-        highlightColor={theme.colors.skeletonHighlightColor}
-      >
-        <SkeletonPlaceholder.Item
-          paddingHorizontal={scale(14)}
-          marginTop={verticalScale(16)}
-        >
-          {Array.from({ length: 6 }).map((_, index) => (
-            <SkeletonPlaceholder.Item
-              key={index}
-              flexDirection="row"
-              alignItems="center"
-              marginBottom={verticalScale(14)}
-            >
-              <SkeletonPlaceholder.Item
-                width={scale(120)}
-                height={verticalScale(14)}
-                borderRadius={4}
-              />
-              <SkeletonPlaceholder.Item
-                flex={1}
-                height={verticalScale(14)}
-                marginLeft={scale(12)}
-                borderRadius={4}
-              />
-            </SkeletonPlaceholder.Item>
-          ))}
-        </SkeletonPlaceholder.Item>
-      </SkeletonPlaceholder>
-    );
-  }
-
-  return (
-    <ScrollView
-      style={styles.container}
-      contentContainerStyle={styles.content}
-      showsVerticalScrollIndicator={false}
-    >
-      <InfoRow
-        label="Year of release"
-        value={content?.release_year ? String(content.release_year) : 'N/A'}
-        theme={theme}
-      />
-
-      <InfoRow
-        label="Cast"
-        value={actors.map((a) => a.name).join(', ')}
-        theme={theme}
-      />
-
-      <InfoRow
-        label="Director"
-        value={directors.map((d) => d.name).join(', ')}
-        theme={theme}
-      />
-
-      <InfoRow
-        label="Writers"
-        value={writers.map((w) => w.name).join(', ')}
-        theme={theme}
-      />
-
-      <InfoRow
-        label="Producers"
-        value={producers.map((p) => p.name).join(', ')}
-        theme={theme}
-      />
-
-      <InfoRow label="Maturity" value={content?.u_age} theme={theme} />
-    </ScrollView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-
-  content: {
-    paddingHorizontal: scale(14),
-    paddingBottom: verticalScale(24),
-  },
-
-  row: {
-    flexDirection: 'row',
-    marginBottom: verticalScale(16),
-    alignItems: 'flex-start',
-  },
-
-  label: {
-    flex: 0.55,
-    fontSize: RFValue(11),
-    lineHeight: RFValue(20),
-    opacity: 0.85,
-  },
-
-  value: {
-    flex: 0.55,
-    fontSize: RFValue(11),
-  },
-});