@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

package/src/components/User/WatchHistory/WatchHistory.tsx

@@ -0,0 +1,175 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 07:32 PM
+ */
+
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity, 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 { useTheme } from '../../../theme';
+
+import AppHeader from '../../Headers/AppHeader';
+import { Text } from '../../Text';
+import CardPoster from '../../Content/Card/components/CardPoster';
+import type { IContentData } from '../../../types';
+import type { AppTheme } from '../../../theme/themes';
+
+export interface IHistoryItem {
+  _id: string;
+  content: IContentData;
+  content_type: 'movie' | 'series' | 'live_stream';
+  currentTime: number;
+  duration: number;
+  season_number?: number;
+  episode_number?: number;
+  completed: boolean;
+  current_season?: any;
+  current_episode?: any;
+}
+
+export interface WatchHistoryProps {
+  data: IHistoryItem[];
+  isLoading?: boolean;
+
+  // Header Config
+  title?: string;
+  headerComponent?: React.ReactNode;
+  onBackPress?: () => void;
+  onSearchPress?: () => void;
+  showSearchIcon?: boolean;
+
+  // Grid & Layout Customization
+  itemDimension?: number;
+  spacing?: number;
+  listStyle?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+
+  // Theme
+  theme?: AppTheme;
+
+  // Rendering Overrides
+  renderItem?: (item: IHistoryItem, index: number) => React.ReactElement | null;
+  skeletonCount?: number;
+  skeletonComponent?: React.ReactElement;
+
+  // Empty State
+  noDataComponent?: React.ReactNode;
+  noDataText?: string;
+
+  // Interaction
+  onPressItem?: (item: IHistoryItem) => void;
+
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+}
+
+export const WatchHistory: React.FC<WatchHistoryProps> = ({
+  data = [],
+  isLoading = false,
+  title = 'Watch History',
+  headerComponent,
+  onBackPress = () => {},
+  onSearchPress = () => {},
+  showSearchIcon = true,
+  itemDimension = 90,
+  spacing = 10,
+  listStyle,
+  contentContainerStyle,
+  theme,
+  renderItem,
+  skeletonCount = 9,
+  skeletonComponent,
+  noDataComponent,
+  noDataText = 'No Watch History Found',
+  onPressItem,
+
+  onEndReached,
+  onEndReachedThreshold
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const listData = isLoading
+    ? Array.from({ length: skeletonCount }, (_, i) => ({
+        _id: `skeleton-${i}`
+      }))
+    : data;
+
+  const renderGridItem: ListRenderItem<any> = ({ item, index }) => {
+    if (isLoading && skeletonComponent) return skeletonComponent;
+    if (!isLoading && renderItem) return renderItem(item, index);
+
+    return (
+      <TouchableOpacity key={item._id || index} onPress={() => onPressItem?.(item)} activeOpacity={0.8}>
+        <CardPoster theme={appliedTheme} isLoading={isLoading} posterUri={item?.content?.poster} />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {headerComponent ? (
+        headerComponent
+      ) : (
+        <AppHeader
+          onBackPress={onBackPress}
+          title={title}
+          titleAlign="left"
+          theme={appliedTheme}
+          titleStyle={{
+            ...styles.title,
+            color: appliedTheme.colors.onBackground
+          }}
+          onRightPress={onSearchPress}
+          rightIcon={showSearchIcon ? <Search size={scale(23)} color={appliedTheme.colors.onBackground} /> : undefined}
+        />
+      )}
+
+      {isLoading || data.length > 0 ? (
+        <FlatGrid
+          itemDimension={itemDimension}
+          spacing={spacing}
+          data={listData}
+          keyExtractor={(item, index) => item._id || `item-${index}`}
+          style={listStyle}
+          contentContainerStyle={contentContainerStyle}
+          renderItem={renderGridItem}
+          onEndReached={onEndReached}
+          onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+        />
+      ) : noDataComponent ? (
+        <>{noDataComponent}</>
+      ) : (
+        <View style={styles.noData}>
+          <Text style={styles.noDataText}>{noDataText}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  title: {
+    fontSize: scale(15)
+  },
+  noData: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  noDataText: {
+    fontSize: scale(14),
+    opacity: 0.5
+  }
+});
+
+export namespace WatchHistory {
+  export type Props = WatchHistoryProps;
+  export type Data = Props['data'];
+  export type Item = Props['data'][number];
+}

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

@@ -0,0 +1,290 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 10:15 PM
+ **/
+
+import React 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 { IContentData } from '../../../types';
+import type { AppTheme, ITheme } from '../../../theme/themes';
+
+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?: AppTheme;
+  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' }> = ({ 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>
+  );
+};
+
+export const WatchLater: 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 = isLoading
+    ? (Array.from({ length: skeletonCount }, (_, i) => ({
+        _id: `skeleton-${i}`,
+        content: {
+          name: '',
+          description: '',
+          poster: '',
+          thumbnail: ''
+        }
+      })) as any)
+    : data;
+
+  const renderGridItem: ListRenderItem<IWatchLaterItem> = ({ 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={() => onPressItem?.(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 numberOfLines={1} style={styles.detailedTitle}>
+              {item?.content?.name}
+            </Text>
+            <Text numberOfLines={4} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
+              {item?.content?.description}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      );
+    }
+
+    return (
+      <TouchableOpacity key={item._id || index} onPress={() => onPressItem?.(item)} activeOpacity={0.8}>
+        <CardPoster theme={appliedTheme} isLoading={isLoading} posterUri={item?.content?.poster} />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {React.isValidElement(headerComponent) ? (
+        headerComponent
+      ) : (
+        <AppHeader
+          onBackPress={onBackPress}
+          title={title}
+          titleAlign="left"
+          theme={appliedTheme}
+          titleStyle={{
+            ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
+            color: appliedTheme.colors.onBackground
+          }}
+          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={(item, index) => item._id || `item-${index}`}
+            style={listStyle}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            renderItem={renderGridItem}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+          />
+        ) : (
+          <FlatList
+            data={listData}
+            keyExtractor={(item, index) => item._id || `item-${index}`}
+            renderItem={renderGridItem}
+            style={listStyle}
+            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            onEndReached={onEndReached}
+            onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
+            showsVerticalScrollIndicator={false}
+          />
+        )
+      ) : noDataComponent ? (
+        <>{noDataComponent}</>
+      ) : (
+        <View style={styles.noData}>
+          <Text style={styles.noDataText}>{noDataText}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  noData: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  noDataText: {
+    fontSize: scale(14),
+    opacity: 0.5
+  },
+  contentContainerFlatStyle: {
+    paddingBottom: scale(100)
+  },
+  thumbnailWrapper: {
+    width: scale(140),
+    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(8)
+  },
+  detailedTitle: {
+    fontSize: scale(13),
+    fontWeight: 'bold'
+  },
+  detailedDesc: {
+    fontSize: scale(10),
+    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

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { useTheme } from '../../../theme';
+import type { AppTheme } from '../../../theme/themes';
+
+const fallbackAvatar = require('../../../assets/img/profile.jpg');
+
+type UserAvatarProps = {
+  avatarUri?: string;
+  size?: number;
+  theme?: AppTheme;
+};
+
+const UserAvatar: React.FC<UserAvatarProps> = ({ avatarUri, size = scale(80), theme }) => {
+  const [imageError, setImageError] = useState(false);
+  const { theme: appliedTheme } = useTheme(theme);
+  const borderColor = appliedTheme.colors.primary;
+
+  return (
+    <View style={styles(size).wrapper}>
+      <Image
+        source={imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }}
+        style={[styles(size).avatar, { borderColor }]}
+        onError={() => setImageError(true)}
+      />
+    </View>
+  );
+};
+
+export default UserAvatar;
+const styles = (size: number) =>
+  StyleSheet.create({
+    wrapper: {
+      position: 'relative'
+    },
+    avatar: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      borderWidth: scale(1.5)
+    }
+  });

package/src/components/User/components/UserSection.tsx

@@ -0,0 +1,181 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 23 Jun 2025 at 11:22 AM
+ */
+import React from 'react';
+import { View, Pressable, type TextStyle, type ViewStyle } from 'react-native';
+import { Edit3 } from 'lucide-react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import UserAvatar from './UserAvatar';
+import { Text } from '../../Text';
+import { useTheme } from '../../../theme';
+import type { AppTheme } from '../../../theme/themes';
+
+export interface UserInfo {
+  name: string;
+  avatarUri: string;
+  emailOrPhone: string;
+  onEditPress?: () => void;
+}
+
+export interface UserInfoTextStyle {
+  nameStyle?: TextStyle;
+  emailStyle?: TextStyle;
+}
+
+interface UserSectionProps {
+  userInfo: UserInfo;
+  isLoading?: boolean;
+  renderUserInfo?: (userInfo: UserInfo) => React.ReactNode;
+  theme?: AppTheme;
+  avatarComponent?: React.ReactNode;
+  skeletonProps?: Partial<React.ComponentProps<typeof SkeletonPlaceholder>>;
+  userInfoTextStyle?: UserInfoTextStyle;
+}
+
+const UserSection: React.FC<UserSectionProps> = ({
+  userInfo,
+  isLoading,
+  renderUserInfo,
+  theme,
+  avatarComponent,
+  skeletonProps = {},
+  userInfoTextStyle = {}
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  if (!userInfo) return null;
+  if (renderUserInfo) return renderUserInfo(userInfo);
+
+  if (isLoading) {
+    return (
+      <View style={styles.userInfoContainer}>
+        <SkeletonPlaceholder
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          borderRadius={moderateScale(8)}
+          {...skeletonProps}
+        >
+          <View style={styles.skeletonWrapper}>
+            <View style={styles.skeletonAvatar} />
+            <View style={styles.skeletonName} />
+            <View style={styles.skeletonEmail} />
+          </View>
+        </SkeletonPlaceholder>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.userInfoContainer}>
+      <View style={styles.avatarWrapper}>
+        {avatarComponent ?? (
+          <>
+            <UserAvatar avatarUri={userInfo.avatarUri} theme={appliedTheme} />
+            {userInfo.onEditPress && (
+              <Pressable
+                onPress={userInfo.onEditPress}
+                style={[
+                  styles.editButton,
+                  {
+                    borderColor: appliedTheme.colors.primary,
+                    backgroundColor: appliedTheme.colors.white,
+                    shadowColor: appliedTheme.colors.surface
+                  }
+                ]}
+                android_ripple={{
+                  color: appliedTheme.colors.surfaceDisabled
+                }}
+              >
+                <View style={styles.editContent}>
+                  <Edit3 size={moderateScale(14)} color={appliedTheme.colors.primary} />
+                </View>
+              </Pressable>
+            )}
+          </>
+        )}
+      </View>
+
+      {userInfo.name && (
+        <Text style={[styles.userName, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.nameStyle]}>
+          {userInfo.name}
+        </Text>
+      )}
+      {userInfo.emailOrPhone && (
+        <Text style={[styles.userEmail, { color: appliedTheme.colors.onBackground }, userInfoTextStyle.emailStyle]}>
+          {userInfo.emailOrPhone}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default UserSection;
+
+// Styles
+const styles = {
+  userInfoContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: verticalScale(10),
+    height: verticalScale(200)
+  } as ViewStyle,
+  avatarWrapper: {
+    position: 'relative'
+  } as ViewStyle,
+  editButton: {
+    position: 'absolute',
+    bottom: scale(2),
+    right: scale(2),
+    width: scale(22),
+    height: scale(22),
+    borderRadius: scale(11),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    elevation: 1,
+    shadowOffset: { width: 0, height: 0.5 },
+    shadowOpacity: 0.1,
+    shadowRadius: 0.5
+  } as ViewStyle,
+  editContent: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  } as ViewStyle,
+  editLabel: {
+    fontSize: moderateScale(9),
+    marginTop: verticalScale(1),
+    fontWeight: '500',
+    lineHeight: moderateScale(12)
+  } as TextStyle,
+  userName: {
+    fontSize: moderateScale(16),
+    fontWeight: '600',
+    marginTop: verticalScale(10),
+    marginBottom: verticalScale(2)
+  } as TextStyle,
+  userEmail: {
+    fontSize: moderateScale(14),
+    opacity: 0.7
+  } as TextStyle,
+  skeletonWrapper: {
+    alignItems: 'center'
+  } as ViewStyle,
+  skeletonAvatar: {
+    width: scale(80),
+    height: scale(80),
+    borderRadius: scale(40),
+    marginBottom: verticalScale(12)
+  } as ViewStyle,
+  skeletonName: {
+    width: scale(120),
+    height: verticalScale(18),
+    borderRadius: moderateScale(4),
+    marginBottom: verticalScale(6)
+  } as ViewStyle,
+  skeletonEmail: {
+    width: scale(160),
+    height: verticalScale(14),
+    borderRadius: moderateScale(4)
+  } as ViewStyle
+};

package/src/components/User/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 24 Jun 2025 at 05:02 PM
+ */
+
+import { WatchHistory } from './WatchHistory/WatchHistory';
+import { WatchLater } from './WatchLater/WatchLater';
+import { DeviceSessions } from './DeviceSessions/DeviceSessions';
+export { WatchHistory, WatchLater, DeviceSessions };