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

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

@@ -1,397 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 24 Jun 2025 at 10:15 PM
- **/
-
-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 { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-
-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, { justifyContent: 'center' }]}>
-            <View
-              style={{
-                width: '60%',
-                height: scale(12),
-                marginBottom: scale(6),
-              }}
-            />
-            <View
-              style={{
-                width: '90%',
-                height: scale(10),
-                marginBottom: scale(4),
-              }}
-            />
-            <View
-              style={{
-                width: '70%',
-                height: scale(10),
-                marginBottom: scale(4),
-              }}
-            />
-            <View
-              style={{
-                width: '40%',
-                height: scale(10),
-                marginBottom: scale(4),
-              }}
-            />
-            <View style={{ width: '30%', height: scale(10) }} />
-          </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 } = useInternalTheme(theme);
-
-  const listData = useMemo(
-    () =>
-      isLoading
-        ? (Array.from({ length: skeletonCount }, (_, i) => ({
-            _id: `skeleton-${i}`,
-            content: {
-              name: '',
-              description: '',
-              poster: '',
-              thumbnail: '',
-            },
-          })) as any)
-        : 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),
-  },
-});
-
-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

@@ -1,120 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 17 Oct 2025 at 10:16 PM
- */
-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 { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-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 } = useInternalTheme(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),
-    },
-  });