feat: Add media thumbnail support

Author: abhay-keyvalue

README.md

@@ -216,6 +216,8 @@ Here are the custom style options for the notification inbox:
       disableAutoMarkAsRead?: boolean;
       deleteIcon?: JSX.Element;
       hideDelete?: boolean;
+      hideMediaThumbnail?: boolean;
+      onMediaThumbnailClick?: (notification: NotificationDataType) => void;
     };
 ```
 

src/assets/failedImageDark.png

@@ -47,7 +47,9 @@ const Card = (props: NotificationCardProps): ReactElement => {
     disableAutoMarkAsRead,
     hideDelete = false,
     onAvatarClick,
-    deleteIcon = null
+    deleteIcon = null,
+    hideMediaThumbnail = false,
+    onMediaThumbnailClick
   } = cardProps;
   const { markAsReadById } = useSiren();
 
@@ -57,18 +59,26 @@ const Card = (props: NotificationCardProps): ReactElement => {
     return darkMode ? require('../assets/emptyDark.png') : require('../assets/emptyLight.png');
   };
 
+  const failedState = () => {
+    return darkMode
+      ? require('../assets/failedImageDark.png')
+      : require('../assets/failedImageLight.png');
+  };
+
+  const avatarUrl = notification?.message?.avatar?.imageUrl || '';
+  const thumbnailUrl = notification?.message?.thumbnailUrl || '';
+
   const [imageSource, setImageSource] = useState(
-    notification?.message?.avatar?.imageUrl?.length > 0
-      ? { uri: notification.message?.avatar?.imageUrl }
-      : emptyState()
+    avatarUrl?.length > 0 ? { uri: avatarUrl } : emptyState()
+  );
+
+  const [mediaSource, setMediaSource] = useState(
+    thumbnailUrl?.length > 0 ? { uri: thumbnailUrl } : emptyState()
   );
 
   useEffect(() => {
-    setImageSource(
-      notification?.message?.avatar?.imageUrl?.length > 0
-        ? { uri: notification.message?.avatar?.imageUrl }
-        : emptyState()
-    );
+    setImageSource(avatarUrl?.length > 0 ? { uri: avatarUrl } : emptyState());
+    setMediaSource(thumbnailUrl?.length > 0 ? { uri: thumbnailUrl } : failedState());
   }, [notification, darkMode]);
 
   const cardClick = (): void => {
@@ -80,10 +90,18 @@ const Card = (props: NotificationCardProps): ReactElement => {
     setImageSource(emptyState());
   };
 
+  const onErrorMedia = (): void => {
+    setMediaSource(failedState());
+  };
+
   const avatarClick = () => {
     if (onAvatarClick) onAvatarClick(notification);
   };
 
+  const mediaClick = () => {
+    if (onMediaThumbnailClick) onMediaThumbnailClick(notification);
+  };
+
   const renderAvatar = useMemo((): JSX.Element => {
     return (
       <View style={style.cardIconContainer}>
@@ -104,6 +122,18 @@ const Card = (props: NotificationCardProps): ReactElement => {
     );
   }, [styles, darkMode, imageSource, onAvatarClick]);
 
+  const renderMediaThumbnail = useMemo((): JSX.Element => {
+    return (
+      <TouchableOpacity
+        style={[style.mediaContainer, styles.mediaContainer]}
+        disabled={Boolean(!onMediaThumbnailClick)}
+        onPress={mediaClick}
+      >
+        <Image source={mediaSource} resizeMode='cover' style={style.icon} onError={onErrorMedia} />
+      </TouchableOpacity>
+    );
+  }, [darkMode, mediaSource, onMediaThumbnailClick]);
+
   const onDeleteItem = async (): Promise<void> => {
     const isSuccess = await onDelete(notification.id, false);
 
@@ -151,9 +181,14 @@ const Card = (props: NotificationCardProps): ReactElement => {
               {notification.message?.subHeader}
             </Text>
           )}
-          <Text numberOfLines={2} style={[style.cardDescription, styles.cardDescription]}>
-            {notification.message?.body}
-          </Text>
+          {Boolean(notification.message?.body) && (
+            <Text numberOfLines={2} style={[style.cardDescription, styles.cardDescription]}>
+              {notification.message?.body}
+            </Text>
+          )}
+          {!hideMediaThumbnail &&
+            Boolean(notification.message?.thumbnailUrl) &&
+            renderMediaThumbnail}
           <View style={style.dateContainer}>
             <TimerIcon styles={styles} />
             <Text style={[style.dateStyle, styles.dateStyle]}>
@@ -228,6 +263,14 @@ const style = StyleSheet.create({
   },
   transparent: {
     backgroundColor: 'transparent'
+  },
+  mediaContainer: {
+    width: '100%',
+    height: 130,
+    borderRadius: 6,
+    marginBottom: 10,
+    overflow: 'hidden',
+    backgroundColor: '#D3D3D3'
   }
 });
 

src/assets/failedImageLight.png

@@ -77,7 +77,8 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     cardProps = {
       hideAvatar: false,
       disableAutoMarkAsRead: false,
-      hideDelete: false
+      hideDelete: false,
+      hideMediaThumbnail: false,
     },
     listEmptyComponent = null,
     headerProps = {},

src/components/card.tsx

@@ -85,6 +85,8 @@ type CardProps = {
   disableAutoMarkAsRead?: boolean;
   deleteIcon?: JSX.Element;
   hideDelete?: boolean;
+  hideMediaThumbnail?: boolean;
+  onMediaThumbnailClick?: (notification: NotificationDataType) => void;
 };
 
 /**
@@ -245,4 +247,5 @@ export type StyleProps = {
   skeltonLoaderColor: ViewStyle;
   highlighted: ViewStyle;
   backIcon: ViewStyle;
+  mediaContainer: ViewStyle;
 };

src/components/sirenInbox.tsx

@@ -277,5 +277,8 @@ export const applyTheme = (
       theme.windowHeader?.titleColor ||
       theme.colors?.textColor ||
       DefaultTheme[mode].windowHeader.titleColor
-  }
+  },
+  mediaContainer: {
+    backgroundColor: DefaultTheme[mode].notificationCard.mediaContainerBackground
+  },
 });

src/types.ts

@@ -9,7 +9,8 @@ export const COLORS = {
     deleteIcon: '#34405499',
     timerIcon: '#667185',
     clearAllIcon: '#667185',
-    infiniteLoader: '#F56630'
+    infiniteLoader: '#F56630',
+    imageBackground: '#F0F2F5'
   },
   dark: {
     primaryColor: '#FA9874',
@@ -21,7 +22,8 @@ export const COLORS = {
     deleteIcon: '#D0D5DD',
     timerIcon: '#98A2B3',
     clearAllIcon: '#D0D5DD',
-    infiniteLoader: '#F56630'
+    infiniteLoader: '#F56630',
+    imageBackground: '#4C4C4C'
   }
 };
 

src/utils/commonUtils.ts

@@ -30,6 +30,7 @@ const defaultTheme = {
       subTitleColor: COLORS[ThemeMode.LIGHT].textColor,
       descriptionColor: COLORS[ThemeMode.LIGHT].textColor,
       dateColor: COLORS[ThemeMode.LIGHT].textColor,
+      mediaContainerBackground: COLORS[ThemeMode.LIGHT].imageBackground,
     }
   },
   dark: {
@@ -60,7 +61,8 @@ const defaultTheme = {
       titleColor: COLORS[ThemeMode.DARK].textColor,
       subTitleColor: COLORS[ThemeMode.DARK].textColor,
       descriptionColor: COLORS[ThemeMode.DARK].textColor,
-      dateColor: COLORS[ThemeMode.DARK].dateColor
+      dateColor: COLORS[ThemeMode.DARK].dateColor,
+      mediaContainerBackground: COLORS[ThemeMode.DARK].imageBackground,
     }
   }
 };