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

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

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