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

package/src/components/User/DeviceSessions/DeviceSessions.tsx

@@ -0,0 +1,374 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Mon 30 Jun 2025 at 05:00 PM
+ */
+
+import React from 'react';
+import { View, StyleSheet, FlatList, TouchableOpacity, type StyleProp, type ViewStyle, Alert } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { Text } from '../../Text';
+import { useTheme } from '../../../theme/hook/useTheme';
+import AppHeader from '../../Headers/AppHeader';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import type { AppTheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type IUserLocation = {
+  country: string | null;
+  state: string | null;
+  city: string | null;
+};
+type IDeviceInfo = {
+  name: string | null;
+  browser: string | null;
+  location: IUserLocation | null;
+};
+type ISessions = {
+  id: string;
+  token: string;
+  refreshToken: string | null;
+  fingerprint: string;
+  deviceId: string | null;
+  lastActivity?: Date;
+  deviceInfo: IDeviceInfo | null;
+};
+
+type TextLabels = {
+  thisDevice?: string;
+  logOut?: string;
+  lastActivePrefix?: string;
+  noSessions?: string;
+  loadingLogoutText?: string;
+  cannotLogoutThisDeviceTitle?: string;
+  cannotLogoutThisDeviceMessage?: string;
+};
+
+type IDeviceSessionsProps = {
+  sessions: ISessions[];
+  activeSessionId?: string;
+  error?: string;
+  onLogout: ({ session }: { session: ISessions }) => void;
+  onBackPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  title?: string;
+  renderLogoutButton?: ({ session }: { session: ISessions }) => React.ReactNode;
+  renderContent?: ({ session, isActive }: { session: ISessions; isActive: boolean }) => React.ReactNode | null;
+  textLabels?: TextLabels;
+  headerStyle?: StyleProp<ViewStyle>;
+  headerTitleAlign?: 'left' | 'center';
+  headerTitleStyle?: StyleProp<any>;
+  renderHeader?: () => React.ReactNode;
+  theme?: AppTheme;
+  isLoading?: boolean;
+  isLoadingLogout?: boolean;
+};
+
+export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
+  sessions,
+  activeSessionId,
+  onLogout,
+  onBackPress = () => {},
+  title = 'Manage Devices',
+  style,
+  error,
+  renderLogoutButton,
+  renderContent,
+  textLabels,
+  headerStyle = {},
+  headerTitleAlign = 'center',
+  headerTitleStyle,
+  renderHeader,
+  theme,
+  isLoading,
+  isLoadingLogout
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const colors = appliedTheme.colors;
+
+  const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(null);
+
+  const {
+    thisDevice = 'This Device',
+    logOut = 'LOG OUT',
+    lastActivePrefix = 'Last active:',
+    noSessions = 'No active sessions found.',
+    loadingLogoutText = 'Logging out...',
+    cannotLogoutThisDeviceTitle = '⚠️ Cannot Logout',
+    cannotLogoutThisDeviceMessage = 'You cannot log out of this device.'
+  } = textLabels || {};
+
+  const renderItem = ({ item }: { item: ISessions }): React.ReactElement | null => {
+    const isActive = item?.id === activeSessionId;
+    const isLoggingOut = isLoadingLogout && logoutSessionId === item.id;
+    if (renderContent) {
+      return (
+        (renderContent({
+          session: item,
+          isActive
+        }) as React.ReactElement) ?? null
+      );
+    }
+
+    const { name = 'Device', browser, location } = item.deviceInfo || {};
+    const hasLocation = location?.city || location?.state || location?.country;
+    const handleLogoutPress = () => {
+      if (isActive) {
+        Alert.alert(cannotLogoutThisDeviceTitle, cannotLogoutThisDeviceMessage, [{ text: 'Cancel', style: 'cancel' }], {
+          cancelable: true
+        });
+        return;
+      }
+      setLogoutSessionId(item.id);
+      onLogout({ session: item });
+    };
+    return (
+      <View
+        style={[
+          styles.deviceRow,
+          {
+            backgroundColor: colors.surfaceVariant,
+            borderColor: colors.outlineVariant ?? colors.outline,
+            shadowColor: colors.shadow ?? '#000'
+          }
+        ]}
+      >
+        <View style={styles.deviceInfo}>
+          {(name || isActive) && (
+            <View style={styles.deviceRowHeader}>
+              {name && (
+                <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.deviceName, { color: colors.onSurface }]}>
+                  {name}
+                </Text>
+              )}
+              {isActive && (
+                <View style={[styles.badge, { backgroundColor: colors.button }]}>
+                  <Text numberOfLines={1} style={[styles.badgeText, { color: colors.black }]}>
+                    {thisDevice}
+                  </Text>
+                </View>
+              )}
+            </View>
+          )}
+
+          {(browser || hasLocation) && (
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
+            >
+              {browser}
+              {browser && hasLocation ? ' · ' : ''}
+              {hasLocation && [location?.city, location?.state, location?.country].filter(Boolean).join(', ')}
+            </Text>
+          )}
+
+          {item?.lastActivity && (
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[styles.deviceMeta, { color: colors.onSurfaceVariant }]}
+            >
+              {lastActivePrefix} {new Date(item.lastActivity).toLocaleString()}
+            </Text>
+          )}
+        </View>
+
+        {renderLogoutButton ? (
+          renderLogoutButton({
+            session: item
+          })
+        ) : (
+          <TouchableOpacity
+            style={[styles.logoutButton, { borderColor: colors.border }]}
+            disabled={isLoggingOut}
+            activeOpacity={0.7}
+            onPress={handleLogoutPress}
+          >
+            <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.logoutText, { color: colors.primary }]}>
+              {isLoggingOut ? loadingLogoutText : logOut}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  const renderSkeleton = () => {
+    return (
+      <View style={styles.listContent}>
+        {[...Array(4)].map((_, index) => (
+          <View
+            key={index}
+            style={{
+              borderWidth: StyleSheet.hairlineWidth,
+              borderColor: colors.outlineVariant ?? colors.outline,
+              borderRadius: scale(10),
+              padding: scale(12),
+              marginBottom: verticalScale(12),
+              backgroundColor: colors.surfaceVariant
+            }}
+          >
+            <SkeletonPlaceholder
+              backgroundColor={colors.skeletonBaseColor || '#E1E9EE'}
+              highlightColor={colors.skeletonHighlightColor || '#F2F8FC'}
+              borderRadius={scale(8)}
+            >
+              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center" justifyContent="space-between">
+                <SkeletonPlaceholder.Item flex={1} paddingRight={scale(12)}>
+                  <SkeletonPlaceholder.Item
+                    width="60%"
+                    height={scale(14)}
+                    borderRadius={scale(4)}
+                    marginBottom={scale(6)}
+                  />
+                  <SkeletonPlaceholder.Item
+                    width="80%"
+                    height={scale(10)}
+                    borderRadius={scale(4)}
+                    marginBottom={scale(4)}
+                  />
+                  <SkeletonPlaceholder.Item width="50%" height={scale(10)} borderRadius={scale(4)} />
+                </SkeletonPlaceholder.Item>
+
+                <SkeletonPlaceholder.Item width={scale(80)} height={verticalScale(30)} borderRadius={scale(6)} />
+              </SkeletonPlaceholder.Item>
+            </SkeletonPlaceholder>
+          </View>
+        ))}
+      </View>
+    );
+  };
+  const sortedSessions = React.useMemo(() => {
+    if (!sessions?.length) return [];
+    return [...sessions].sort((a, b) => {
+      if (a.id === activeSessionId) return -1;
+      if (b.id === activeSessionId) return 1;
+      return 0;
+    });
+  }, [sessions, activeSessionId]);
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }, style]}>
+      {renderHeader ? (
+        renderHeader()
+      ) : (
+        <AppHeader
+          title={title}
+          onBackPress={onBackPress}
+          titleAlign={headerTitleAlign}
+          style={headerStyle}
+          titleStyle={headerTitleStyle}
+        />
+      )}
+
+      {isLoading ? (
+        renderSkeleton()
+      ) : (
+        <FlatList
+          data={sortedSessions}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+          contentContainerStyle={styles.listContent}
+          ListEmptyComponent={
+            <View style={styles.emptyWrapper}>
+              <Text
+                numberOfLines={2}
+                ellipsizeMode="tail"
+                style={[styles.emptyText, { color: colors.onSurfaceVariant }]}
+              >
+                {error || noSessions}
+              </Text>
+            </View>
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  listContent: {
+    paddingHorizontal: scale(16),
+    paddingVertical: verticalScale(12)
+  },
+  deviceRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: StyleSheet.hairlineWidth,
+    padding: scale(12),
+    borderRadius: scale(10),
+    marginBottom: verticalScale(12),
+    elevation: 2,
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 1 },
+    shadowRadius: 4
+  },
+  deviceInfo: {
+    flex: 1,
+    paddingRight: scale(12)
+  },
+  deviceRowHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: scale(8),
+    rowGap: verticalScale(2),
+    flexWrap: 'wrap',
+    marginBottom: scale(4)
+  },
+  deviceName: {
+    fontSize: RFValue(12),
+    fontWeight: '600',
+    flexShrink: 1,
+    maxWidth: '80%'
+  },
+  deviceMeta: {
+    fontSize: RFValue(9),
+    marginTop: scale(2),
+    flexShrink: 1
+  },
+  logoutButton: {
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(6),
+    borderRadius: scale(6),
+    minWidth: scale(80),
+    borderWidth: scale(1.5),
+    alignItems: 'center'
+  },
+  logoutText: {
+    fontSize: RFValue(10),
+    fontWeight: '600'
+  },
+  badge: {
+    paddingHorizontal: scale(8),
+    paddingVertical: verticalScale(2),
+    borderRadius: scale(6)
+  },
+  badgeText: {
+    fontSize: RFValue(9),
+    fontWeight: '500',
+    maxWidth: scale(100),
+    flexShrink: 1
+  },
+  emptyWrapper: {
+    paddingVertical: verticalScale(40),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  emptyText: {
+    fontSize: RFValue(11),
+    textAlign: 'center'
+  },
+  skeletonLine: {
+    borderRadius: scale(4),
+    backgroundColor: '#ccc'
+  }
+});
+
+export namespace DeviceSessions {
+  export type Props = IDeviceSessionsProps;
+  export type Data = Props['sessions'];
+  export type Item = Props['sessions'][number];
+}

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

@@ -0,0 +1,173 @@
+/**
+ * @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/hook/useTheme';
+
+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';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+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={{
+            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, { paddingBottom: scale(50) }]}
+          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
+  },
+
+  noData: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  noDataText: {
+    fontSize: RFValue(12),
+    opacity: 0.5
+  }
+});
+
+export namespace WatchHistory {
+  export type Props = WatchHistoryProps;
+  export type Data = Props['data'];
+  export type Item = Props['data'][number];
+}