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

package/src/components/User/WatchLater/WatchLater.tsx

@@ -0,0 +1,400 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useMemo, useCallback } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  FlatList,
+  type TextStyle,
+  type StyleProp,
+  type ViewStyle,
+  type ListRenderItem,
+} from 'react-native';
+import { FlatGrid } from 'react-native-super-grid';
+import { scale } from 'react-native-size-matters';
+import { Search } from 'lucide-react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+
+import { useTheme } from '../../../theme';
+
+import AppHeader from '../../Headers/AppHeader';
+import { Text } from '../../Text';
+import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+import CardPoster from '../../Content/Card/components/CardPoster';
+import type { ITheme, ThemeOverride } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+type IWatchLaterItem = {
+  _id: string;
+  user_id?: string;
+  content: IContentData;
+  updatedAt?: string;
+};
+
+export type WatchLaterProps = {
+  data: IWatchLaterItem[];
+  isLoading?: boolean;
+  title?: string;
+  headerComponent?: React.ReactNode;
+  onBackPress?: () => void;
+  onSearchPress?: () => void;
+  showSearchIcon?: boolean;
+  itemDimension?: number;
+  spacing?: number;
+  titleStyle?: StyleProp<TextStyle>;
+  listStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  theme?: ThemeOverride;
+  viewMode?: 'poster' | 'detailed';
+  renderItem?: (
+    item: IWatchLaterItem,
+    index: number
+  ) => React.ReactElement | null;
+  skeletonCount?: number;
+  skeletonComponent?: React.ReactElement;
+  noDataComponent?: React.ReactNode;
+  noDataText?: string;
+  onPressItem?: (item: IWatchLaterItem) => void;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+};
+
+const DefaultSkeleton: React.FC<{
+  theme: ITheme;
+  viewMode: 'poster' | 'detailed';
+}> = memo(({ theme, viewMode }) => {
+  if (viewMode === 'detailed') {
+    return (
+      <SkeletonPlaceholder
+        borderRadius={6}
+        highlightColor={theme.colors.skeletonHighlightColor}
+        backgroundColor={theme.colors.skeletonBaseColor}
+      >
+        <View style={styles.detailedItem}>
+          <View style={styles.thumbnailWrapper} />
+          <View style={[styles.detailedInfo, styles.skeletonInfoCenter]}>
+            <View style={styles.skeletonBar60} />
+            <View style={styles.skeletonBar90} />
+            <View style={styles.skeletonBar70} />
+            <View style={styles.skeletonBar40} />
+            <View style={styles.skeletonBar30} />
+          </View>
+        </View>
+      </SkeletonPlaceholder>
+    );
+  }
+
+  return (
+    <SkeletonPlaceholder
+      borderRadius={6}
+      highlightColor={theme.colors.skeletonHighlightColor}
+      backgroundColor={theme.colors.skeletonBaseColor}
+    >
+      <View
+        style={{ height: scale(140), borderRadius: scale(6), margin: scale(1) }}
+      />
+    </SkeletonPlaceholder>
+  );
+});
+
+DefaultSkeleton.displayName = 'DefaultSkeleton';
+
+const WatchLaterComponent: React.FC<WatchLaterProps> = ({
+  data = [],
+  isLoading = false,
+  title = 'Watch Later',
+  headerComponent,
+  onBackPress,
+  onSearchPress = () => {},
+  showSearchIcon = true,
+  itemDimension = 90,
+  spacing = 10,
+  listStyle,
+  titleStyle,
+  contentContainerStyle,
+  theme,
+  renderItem,
+  skeletonCount = 9,
+  skeletonComponent,
+  noDataComponent,
+  noDataText = 'No Watch Later Found',
+  onPressItem,
+  onEndReached,
+  onEndReachedThreshold,
+  viewMode = 'poster',
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const listData = useMemo(
+    () =>
+      isLoading
+        ? (Array.from({ length: skeletonCount }, (_, i) => ({
+            _id: `skeleton-${i}`,
+            content: {
+              name: '',
+              description: '',
+              poster: '',
+              thumbnail: '',
+            } as IContentData,
+          })) as IWatchLaterItem[])
+        : data,
+    [isLoading, skeletonCount, data]
+  );
+
+  const handleItemPress = useCallback(
+    (item: IWatchLaterItem) => {
+      onPressItem?.(item);
+    },
+    [onPressItem]
+  );
+
+  const detailedDescStyle = useMemo(
+    () => [styles.detailedDesc, { color: appliedTheme.colors.textSecondary }],
+    [appliedTheme.colors.textSecondary]
+  );
+
+  const renderGridItem: ListRenderItem<IWatchLaterItem> = useCallback(
+    ({ item, index }) => {
+      if (isLoading) {
+        return (
+          skeletonComponent ?? (
+            <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />
+          )
+        );
+      }
+
+      if (renderItem) return renderItem(item, index);
+
+      if (viewMode === 'detailed') {
+        return (
+          <TouchableOpacity
+            key={item._id}
+            onPress={() => handleItemPress(item)}
+            activeOpacity={0.8}
+            style={styles.detailedItem}
+          >
+            <View style={styles.thumbnailWrapper}>
+              <ThumbnailCard
+                theme={appliedTheme}
+                isLoading={false}
+                thumbnailUri={item?.content?.thumbnail}
+                wrapperStyle={styles.thumbnailImage}
+              />
+            </View>
+            <View style={styles.detailedInfo}>
+              <Text
+                theme={theme}
+                numberOfLines={1}
+                style={styles.detailedTitle}
+              >
+                {item?.content?.name}
+              </Text>
+              <Text theme={theme} numberOfLines={5} style={detailedDescStyle}>
+                {item?.content?.description}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        );
+      }
+
+      return (
+        <TouchableOpacity
+          key={item._id || index}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={0.8}
+        >
+          <CardPoster
+            content_offering_type={item?.content?.content_offering_type}
+            contentType={item?.content?.type}
+            theme={appliedTheme}
+            isLoading={isLoading}
+            posterUri={item?.content?.poster}
+          />
+        </TouchableOpacity>
+      );
+    },
+    [
+      isLoading,
+      skeletonComponent,
+      appliedTheme,
+      viewMode,
+      renderItem,
+      handleItemPress,
+      theme,
+      detailedDescStyle,
+    ]
+  );
+
+  const keyExtractor = useCallback(
+    (item: IWatchLaterItem, index: number) => item._id || `item-${index}`,
+    []
+  );
+
+  const contentContainerStyleMemo = useMemo(
+    () => [styles.contentContainerFlatStyle, contentContainerStyle],
+    [contentContainerStyle]
+  );
+
+  const titleStyleMemo = useMemo(
+    () => ({
+      ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
+      color: appliedTheme.colors.onBackground,
+    }),
+    [titleStyle, appliedTheme.colors.onBackground]
+  );
+
+  return (
+    <View style={styles.container}>
+      {React.isValidElement(headerComponent) ? (
+        headerComponent
+      ) : (
+        <AppHeader
+          onBackPress={onBackPress}
+          title={title}
+          titleAlign="left"
+          theme={theme}
+          titleStyle={titleStyleMemo}
+          onRightPress={onSearchPress}
+          rightIcon={
+            showSearchIcon ? (
+              <Search
+                size={scale(23)}
+                color={appliedTheme.colors.onBackground}
+              />
+            ) : undefined
+          }
+        />
+      )}
+
+      {isLoading || data.length > 0 ? (
+        viewMode === 'poster' ? (
+          <FlatGrid
+            itemDimension={itemDimension}
+            spacing={spacing}
+            data={listData}
+            keyExtractor={keyExtractor}
+            style={listStyle}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={contentContainerStyleMemo}
+            renderItem={renderGridItem}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+          />
+        ) : (
+          <FlatList
+            data={listData}
+            keyExtractor={keyExtractor}
+            renderItem={renderGridItem}
+            style={listStyle}
+            contentContainerStyle={contentContainerStyleMemo}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+            showsVerticalScrollIndicator={false}
+          />
+        )
+      ) : noDataComponent ? (
+        <>{noDataComponent}</>
+      ) : (
+        <View style={styles.noData}>
+          <Text style={styles.noDataText}>{noDataText}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export const WatchLater = memo(WatchLaterComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  noData: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  noDataText: {
+    fontSize: RFValue(13),
+    opacity: 0.5,
+  },
+  contentContainerFlatStyle: {
+    paddingBottom: scale(50),
+  },
+  thumbnailWrapper: {
+    width: scale(150),
+    aspectRatio: 16 / 9,
+    borderRadius: scale(6),
+    overflow: 'hidden',
+    backgroundColor: '#222',
+    alignSelf: 'stretch',
+  },
+  thumbnailImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 0,
+  },
+  detailedItem: {
+    flexDirection: 'row',
+    marginVertical: scale(6),
+    paddingHorizontal: scale(10),
+    alignItems: 'flex-start',
+  },
+  detailedPoster: {
+    width: scale(80),
+    height: scale(120),
+    borderRadius: scale(6),
+  },
+  detailedInfo: {
+    flex: 1,
+    marginLeft: scale(5),
+  },
+  detailedTitle: {
+    fontSize: RFValue(11),
+    fontWeight: '500',
+  },
+  detailedDesc: {
+    fontSize: RFValue(9),
+    textAlign: 'auto',
+    fontWeight: '400',
+    marginTop: scale(1),
+  },
+  skeletonInfoCenter: {
+    justifyContent: 'center',
+  },
+  skeletonBar60: {
+    width: '60%',
+    height: scale(12),
+    marginBottom: scale(6),
+  },
+  skeletonBar90: {
+    width: '90%',
+    height: scale(10),
+    marginBottom: scale(4),
+  },
+  skeletonBar70: {
+    width: '70%',
+    height: scale(10),
+    marginBottom: scale(4),
+  },
+  skeletonBar40: {
+    width: '40%',
+    height: scale(10),
+    marginBottom: scale(4),
+  },
+  skeletonBar30: {
+    width: '30%',
+    height: scale(10),
+  },
+});
+
+export namespace WatchLater {
+  export type Props = WatchLaterProps;
+  export type Data = Props['data'];
+  export type Item = Props['data'][number];
+}

package/src/components/User/components/UserAvatar.tsx

@@ -0,0 +1,121 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useState, memo, useMemo, useCallback } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '../../../theme';
+import type { ThemeOverride } from '../../../theme/themes';
+
+const fallbackAvatar = require('../../../assets/img/profile.jpg');
+
+type UserAvatarProps = {
+  avatarUri?: string;
+  size?: number;
+  theme?: ThemeOverride;
+};
+
+const UserAvatarComponent: React.FC<UserAvatarProps> = ({
+  avatarUri,
+  size = scale(80),
+  theme,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const [imageError, setImageError] = useState(false);
+  const [loading, setLoading] = useState(!!avatarUri);
+
+  // Memoize colors
+  const borderColor = useMemo(
+    () => appliedTheme.colors.primary || '#ccc',
+    [appliedTheme.colors.primary]
+  );
+
+  const skeletonBaseColor = useMemo(
+    () => appliedTheme.colors.skeletonBaseColor || '#E0E0E0',
+    [appliedTheme.colors.skeletonBaseColor]
+  );
+
+  const skeletonHighlightColor = useMemo(
+    () => appliedTheme.colors.skeletonHighlightColor || '#F5F5F5',
+    [appliedTheme.colors.skeletonHighlightColor]
+  );
+
+  // Memoize handlers
+  const handleError = useCallback(() => {
+    setImageError(true);
+    setLoading(false);
+  }, []);
+
+  const handleLoadStart = useCallback(() => {
+    setLoading(true);
+  }, []);
+
+  const handleLoadEnd = useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  // Memoize image source
+  const imageSource = useMemo(
+    () => (imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }),
+    [imageError, avatarUri]
+  );
+
+  // Memoize styles
+  const avatarStyles = useMemo(() => styles(size), [size]);
+  const avatarImageStyle = useMemo(
+    () => [avatarStyles.avatar, { borderColor, position: 'absolute' as const }],
+    [avatarStyles.avatar, borderColor]
+  );
+
+  // Memoize skeleton borderRadius
+  const skeletonBorderRadius = useMemo(() => size / 2, [size]);
+
+  return (
+    <View style={avatarStyles.wrapper}>
+      {loading && (
+        <SkeletonPlaceholder
+          backgroundColor={skeletonBaseColor}
+          highlightColor={skeletonHighlightColor}
+          borderRadius={skeletonBorderRadius}
+        >
+          <SkeletonPlaceholder.Item
+            width={size}
+            height={size}
+            borderRadius={skeletonBorderRadius}
+          />
+        </SkeletonPlaceholder>
+      )}
+
+      <Image
+        source={imageSource}
+        style={avatarImageStyle}
+        onError={handleError}
+        onLoadStart={handleLoadStart}
+        onLoadEnd={handleLoadEnd}
+      />
+    </View>
+  );
+};
+
+const UserAvatar = memo(UserAvatarComponent);
+export default UserAvatar;
+
+const styles = (size: number) =>
+  StyleSheet.create({
+    wrapper: {
+      width: size,
+      height: size,
+      position: 'relative',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    avatar: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: scale(1.5),
+    },
+  });