@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.3

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

@@ -4,7 +4,15 @@
  */
 
 import React from 'react';
-import { View, StyleSheet, FlatList, TouchableOpacity, type StyleProp, type ViewStyle, Alert } from 'react-native';
+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';
@@ -52,7 +60,13 @@ type IDeviceSessionsProps = {
   style?: StyleProp<ViewStyle>;
   title?: string;
   renderLogoutButton?: ({ session }: { session: ISessions }) => React.ReactNode;
-  renderContent?: ({ session, isActive }: { session: ISessions; isActive: boolean }) => React.ReactNode | null;
+  renderContent?: ({
+    session,
+    isActive,
+  }: {
+    session: ISessions;
+    isActive: boolean;
+  }) => React.ReactNode | null;
   textLabels?: TextLabels;
   headerStyle?: StyleProp<ViewStyle>;
   headerTitleAlign?: 'left' | 'center';
@@ -80,12 +94,14 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
   renderHeader,
   theme,
   isLoading,
-  isLoadingLogout
+  isLoadingLogout,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const colors = appliedTheme.colors;
 
-  const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(null);
+  const [logoutSessionId, setLogoutSessionId] = React.useState<string | null>(
+    null
+  );
 
   const {
     thisDevice = 'This Device',
@@ -94,17 +110,21 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
     noSessions = 'No active sessions found.',
     loadingLogoutText = 'Logging out...',
     cannotLogoutThisDeviceTitle = '⚠️ Cannot Logout',
-    cannotLogoutThisDeviceMessage = 'You cannot log out of this device.'
+    cannotLogoutThisDeviceMessage = 'You cannot log out of this device.',
   } = textLabels || {};
 
-  const renderItem = ({ item }: { item: ISessions }): React.ReactElement | null => {
+  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
+          isActive,
         }) as React.ReactElement) ?? null
       );
     }
@@ -113,9 +133,14 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
     const hasLocation = location?.city || location?.state || location?.country;
     const handleLogoutPress = () => {
       if (isActive) {
-        Alert.alert(cannotLogoutThisDeviceTitle, cannotLogoutThisDeviceMessage, [{ text: 'Cancel', style: 'cancel' }], {
-          cancelable: true
-        });
+        Alert.alert(
+          cannotLogoutThisDeviceTitle,
+          cannotLogoutThisDeviceMessage,
+          [{ text: 'Cancel', style: 'cancel' }],
+          {
+            cancelable: true,
+          }
+        );
         return;
       }
       setLogoutSessionId(item.id);
@@ -128,21 +153,30 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
           {
             backgroundColor: colors.surfaceVariant,
             borderColor: colors.outlineVariant ?? colors.outline,
-            shadowColor: colors.shadow ?? '#000'
-          }
+            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 }]}>
+                <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 }]}>
+                <View
+                  style={[styles.badge, { backgroundColor: colors.button }]}
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={[styles.badgeText, { color: colors.black }]}
+                  >
                     {thisDevice}
                   </Text>
                 </View>
@@ -158,7 +192,10 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
             >
               {browser}
               {browser && hasLocation ? ' · ' : ''}
-              {hasLocation && [location?.city, location?.state, location?.country].filter(Boolean).join(', ')}
+              {hasLocation &&
+                [location?.city, location?.state, location?.country]
+                  .filter(Boolean)
+                  .join(', ')}
             </Text>
           )}
 
@@ -175,7 +212,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
 
         {renderLogoutButton ? (
           renderLogoutButton({
-            session: item
+            session: item,
           })
         ) : (
           <TouchableOpacity
@@ -184,7 +221,11 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
             activeOpacity={0.7}
             onPress={handleLogoutPress}
           >
-            <Text numberOfLines={1} ellipsizeMode="tail" style={[styles.logoutText, { color: colors.primary }]}>
+            <Text
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              style={[styles.logoutText, { color: colors.primary }]}
+            >
               {isLoggingOut ? loadingLogoutText : logOut}
             </Text>
           </TouchableOpacity>
@@ -205,7 +246,7 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
               borderRadius: scale(10),
               padding: scale(12),
               marginBottom: verticalScale(12),
-              backgroundColor: colors.surfaceVariant
+              backgroundColor: colors.surfaceVariant,
             }}
           >
             <SkeletonPlaceholder
@@ -213,7 +254,11 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
               highlightColor={colors.skeletonHighlightColor || '#F2F8FC'}
               borderRadius={scale(8)}
             >
-              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center" justifyContent="space-between">
+              <SkeletonPlaceholder.Item
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="space-between"
+              >
                 <SkeletonPlaceholder.Item flex={1} paddingRight={scale(12)}>
                   <SkeletonPlaceholder.Item
                     width="60%"
@@ -227,10 +272,18 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
                     borderRadius={scale(4)}
                     marginBottom={scale(4)}
                   />
-                  <SkeletonPlaceholder.Item width="50%" height={scale(10)} borderRadius={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
+                  width={scale(80)}
+                  height={verticalScale(30)}
+                  borderRadius={scale(6)}
+                />
               </SkeletonPlaceholder.Item>
             </SkeletonPlaceholder>
           </View>
@@ -247,7 +300,9 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
     });
   }, [sessions, activeSessionId]);
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }, style]}>
+    <View
+      style={[styles.container, { backgroundColor: colors.background }, style]}
+    >
       {renderHeader ? (
         renderHeader()
       ) : (
@@ -287,11 +342,11 @@ export const DeviceSessions: React.FC<IDeviceSessionsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
   },
   listContent: {
     paddingHorizontal: scale(16),
-    paddingVertical: verticalScale(12)
+    paddingVertical: verticalScale(12),
   },
   deviceRow: {
     flexDirection: 'row',
@@ -304,11 +359,11 @@ const styles = StyleSheet.create({
     elevation: 2,
     shadowOpacity: 0.1,
     shadowOffset: { width: 0, height: 1 },
-    shadowRadius: 4
+    shadowRadius: 4,
   },
   deviceInfo: {
     flex: 1,
-    paddingRight: scale(12)
+    paddingRight: scale(12),
   },
   deviceRowHeader: {
     flexDirection: 'row',
@@ -316,18 +371,18 @@ const styles = StyleSheet.create({
     columnGap: scale(8),
     rowGap: verticalScale(2),
     flexWrap: 'wrap',
-    marginBottom: scale(4)
+    marginBottom: scale(4),
   },
   deviceName: {
     fontSize: RFValue(12),
     fontWeight: '600',
     flexShrink: 1,
-    maxWidth: '80%'
+    maxWidth: '80%',
   },
   deviceMeta: {
     fontSize: RFValue(9),
     marginTop: scale(2),
-    flexShrink: 1
+    flexShrink: 1,
   },
   logoutButton: {
     paddingHorizontal: scale(12),
@@ -335,36 +390,36 @@ const styles = StyleSheet.create({
     borderRadius: scale(6),
     minWidth: scale(80),
     borderWidth: scale(1.5),
-    alignItems: 'center'
+    alignItems: 'center',
   },
   logoutText: {
     fontSize: RFValue(10),
-    fontWeight: '600'
+    fontWeight: '600',
   },
   badge: {
     paddingHorizontal: scale(8),
     paddingVertical: verticalScale(2),
-    borderRadius: scale(6)
+    borderRadius: scale(6),
   },
   badgeText: {
     fontSize: RFValue(9),
     fontWeight: '500',
     maxWidth: scale(100),
-    flexShrink: 1
+    flexShrink: 1,
   },
   emptyWrapper: {
     paddingVertical: verticalScale(40),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   emptyText: {
     fontSize: RFValue(11),
-    textAlign: 'center'
+    textAlign: 'center',
   },
   skeletonLine: {
     borderRadius: scale(4),
-    backgroundColor: '#ccc'
-  }
+    backgroundColor: '#ccc',
+  },
 });
 
 export namespace DeviceSessions {

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

@@ -4,7 +4,14 @@
  */
 
 import React from 'react';
-import { StyleSheet, View, TouchableOpacity, type StyleProp, type ViewStyle, type ListRenderItem } from 'react-native';
+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';
@@ -88,13 +95,13 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
   onPressItem,
 
   onEndReached,
-  onEndReachedThreshold
+  onEndReachedThreshold,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   const listData = isLoading
     ? Array.from({ length: skeletonCount }, (_, i) => ({
-        _id: `skeleton-${i}`
+        _id: `skeleton-${i}`,
       }))
     : data;
 
@@ -103,8 +110,16 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
     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
+        key={item._id || index}
+        onPress={() => onPressItem?.(item)}
+        activeOpacity={0.8}
+      >
+        <CardPoster
+          theme={appliedTheme}
+          isLoading={isLoading}
+          posterUri={item?.content?.poster}
+        />
       </TouchableOpacity>
     );
   };
@@ -120,10 +135,17 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           titleAlign="left"
           theme={appliedTheme}
           titleStyle={{
-            color: appliedTheme.colors.onBackground
+            color: appliedTheme.colors.onBackground,
           }}
           onRightPress={onSearchPress}
-          rightIcon={showSearchIcon ? <Search size={scale(23)} color={appliedTheme.colors.onBackground} /> : undefined}
+          rightIcon={
+            showSearchIcon ? (
+              <Search
+                size={scale(23)}
+                color={appliedTheme.colors.onBackground}
+              />
+            ) : undefined
+          }
         />
       )}
 
@@ -134,7 +156,10 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
           data={listData}
           keyExtractor={(item, index) => item._id || `item-${index}`}
           style={listStyle}
-          contentContainerStyle={[contentContainerStyle, { paddingBottom: scale(50) }]}
+          contentContainerStyle={[
+            contentContainerStyle,
+            { paddingBottom: scale(50) },
+          ]}
           renderItem={renderGridItem}
           onEndReached={onEndReached}
           onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -152,18 +177,18 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
   },
 
   noData: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   noDataText: {
     fontSize: RFValue(12),
-    opacity: 0.5
-  }
+    opacity: 0.5,
+  },
 });
 
 export namespace WatchHistory {

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

@@ -12,7 +12,7 @@ import {
   type TextStyle,
   type StyleProp,
   type ViewStyle,
-  type ListRenderItem
+  type ListRenderItem,
 } from 'react-native';
 import { FlatGrid } from 'react-native-super-grid';
 import { scale } from 'react-native-size-matters';
@@ -51,7 +51,10 @@ export type WatchLaterProps = {
   contentContainerStyle?: StyleProp<ViewStyle>;
   theme?: AppTheme;
   viewMode?: 'poster' | 'detailed';
-  renderItem?: (item: IWatchLaterItem, index: number) => React.ReactElement | null;
+  renderItem?: (
+    item: IWatchLaterItem,
+    index: number
+  ) => React.ReactElement | null;
   skeletonCount?: number;
   skeletonComponent?: React.ReactElement;
   noDataComponent?: React.ReactNode;
@@ -61,7 +64,10 @@ export type WatchLaterProps = {
   onEndReachedThreshold?: number;
 };
 
-const DefaultSkeleton: React.FC<{ theme: ITheme; viewMode: 'poster' | 'detailed' }> = ({ theme, viewMode }) => {
+const DefaultSkeleton: React.FC<{
+  theme: ITheme;
+  viewMode: 'poster' | 'detailed';
+}> = ({ theme, viewMode }) => {
   if (viewMode === 'detailed') {
     return (
       <SkeletonPlaceholder
@@ -72,10 +78,34 @@ const DefaultSkeleton: React.FC<{ theme: ITheme; viewMode: 'poster' | 'detailed'
         <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: '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>
@@ -89,7 +119,9 @@ const DefaultSkeleton: React.FC<{ theme: ITheme; viewMode: 'poster' | 'detailed'
       highlightColor={theme.colors.skeletonHighlightColor}
       backgroundColor={theme.colors.skeletonBaseColor}
     >
-      <View style={{ height: scale(140), borderRadius: scale(6), margin: scale(1) }} />
+      <View
+        style={{ height: scale(140), borderRadius: scale(6), margin: scale(1) }}
+      />
     </SkeletonPlaceholder>
   );
 };
@@ -116,7 +148,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
   onPressItem,
   onEndReached,
   onEndReachedThreshold,
-  viewMode = 'poster'
+  viewMode = 'poster',
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
@@ -127,14 +159,18 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
           name: '',
           description: '',
           poster: '',
-          thumbnail: ''
-        }
+          thumbnail: '',
+        },
       })) as any)
     : data;
 
   const renderGridItem: ListRenderItem<IWatchLaterItem> = ({ item, index }) => {
     if (isLoading) {
-      return skeletonComponent ?? <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />;
+      return (
+        skeletonComponent ?? (
+          <DefaultSkeleton theme={appliedTheme} viewMode={viewMode} />
+        )
+      );
     }
 
     if (renderItem) return renderItem(item, index);
@@ -159,7 +195,13 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             <Text numberOfLines={1} style={styles.detailedTitle}>
               {item?.content?.name}
             </Text>
-            <Text numberOfLines={5} style={[styles.detailedDesc, { color: appliedTheme.colors.textSecondary }]}>
+            <Text
+              numberOfLines={5}
+              style={[
+                styles.detailedDesc,
+                { color: appliedTheme.colors.textSecondary },
+              ]}
+            >
               {item?.content?.description}
             </Text>
           </View>
@@ -168,8 +210,16 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
     }
 
     return (
-      <TouchableOpacity key={item._id || index} onPress={() => onPressItem?.(item)} activeOpacity={0.8}>
-        <CardPoster theme={appliedTheme} isLoading={isLoading} posterUri={item?.content?.poster} />
+      <TouchableOpacity
+        key={item._id || index}
+        onPress={() => onPressItem?.(item)}
+        activeOpacity={0.8}
+      >
+        <CardPoster
+          theme={appliedTheme}
+          isLoading={isLoading}
+          posterUri={item?.content?.poster}
+        />
       </TouchableOpacity>
     );
   };
@@ -186,10 +236,17 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
           theme={appliedTheme}
           titleStyle={{
             ...(titleStyle ? StyleSheet.flatten(titleStyle) : {}),
-            color: appliedTheme.colors.onBackground
+            color: appliedTheme.colors.onBackground,
           }}
           onRightPress={onSearchPress}
-          rightIcon={showSearchIcon ? <Search size={scale(23)} color={appliedTheme.colors.onBackground} /> : undefined}
+          rightIcon={
+            showSearchIcon ? (
+              <Search
+                size={scale(23)}
+                color={appliedTheme.colors.onBackground}
+              />
+            ) : undefined
+          }
         />
       )}
 
@@ -202,7 +259,10 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             keyExtractor={(item, index) => item._id || `item-${index}`}
             style={listStyle}
             showsVerticalScrollIndicator={false}
-            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            contentContainerStyle={[
+              styles.contentContainerFlatStyle,
+              contentContainerStyle,
+            ]}
             renderItem={renderGridItem}
             onEndReached={onEndReached}
             onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
@@ -213,7 +273,10 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
             keyExtractor={(item, index) => item._id || `item-${index}`}
             renderItem={renderGridItem}
             style={listStyle}
-            contentContainerStyle={[styles.contentContainerFlatStyle, contentContainerStyle]}
+            contentContainerStyle={[
+              styles.contentContainerFlatStyle,
+              contentContainerStyle,
+            ]}
             onEndReached={onEndReached}
             onEndReachedThreshold={onEndReachedThreshold ?? 0.5}
             showsVerticalScrollIndicator={false}
@@ -232,19 +295,19 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
   },
   noData: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   noDataText: {
     fontSize: RFValue(13),
-    opacity: 0.5
+    opacity: 0.5,
   },
   contentContainerFlatStyle: {
-    paddingBottom: scale(50)
+    paddingBottom: scale(50),
   },
   thumbnailWrapper: {
     width: scale(150),
@@ -252,38 +315,38 @@ const styles = StyleSheet.create({
     borderRadius: scale(6),
     overflow: 'hidden',
     backgroundColor: '#222',
-    alignSelf: 'stretch'
+    alignSelf: 'stretch',
   },
   thumbnailImage: {
     width: '100%',
     height: '100%',
-    borderRadius: 0
+    borderRadius: 0,
   },
   detailedItem: {
     flexDirection: 'row',
     marginVertical: scale(6),
     paddingHorizontal: scale(10),
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
   },
   detailedPoster: {
     width: scale(80),
     height: scale(120),
-    borderRadius: scale(6)
+    borderRadius: scale(6),
   },
   detailedInfo: {
     flex: 1,
-    marginLeft: scale(5)
+    marginLeft: scale(5),
   },
   detailedTitle: {
     fontSize: RFValue(11),
-    fontWeight: '500'
+    fontWeight: '500',
   },
   detailedDesc: {
     fontSize: RFValue(9),
     textAlign: 'auto',
     fontWeight: '400',
-    marginTop: scale(1)
-  }
+    marginTop: scale(1),
+  },
 });
 
 export namespace WatchLater {

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

@@ -12,7 +12,11 @@ type UserAvatarProps = {
   theme?: AppTheme;
 };
 
-const UserAvatar: React.FC<UserAvatarProps> = ({ avatarUri, size = scale(80), theme }) => {
+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;
@@ -32,12 +36,12 @@ export default UserAvatar;
 const styles = (size: number) =>
   StyleSheet.create({
     wrapper: {
-      position: 'relative'
+      position: 'relative',
     },
     avatar: {
       width: size,
       height: size,
       borderRadius: size / 2,
-      borderWidth: scale(1.5)
-    }
+      borderWidth: scale(1.5),
+    },
   });