feat: Add media support in notification card

Author: reshmarevi17

README.md

@@ -66,7 +66,7 @@ itemsPerFetch | Number of notifications fetch per api request (have a max cap of
 windowViewOnly | Toggle to enable fit-to-screen window or modal view |  boolean | false |
 notificationIcon | Option to use custom notification Icon |  JSX Element | null |
 headerProps | Props for customizing the header.<br> title - Title of the notification inbox<br> hideHeader - Toggle to hide or show the header section.<br> hideClearAll - Toggle to hide or show the clear all button.<br> customHeader - Custom header component. | HeaderProps| { title: 'Notifications', <br>hideHeader: false,<br> hideClearAll: false, <br>customHeader: null } |
-cardProps | Props for customizing the notification cards. <br>hideDelete - Toggle to hide or show delete icon<br> hideAvatar - Toggle to hide or show the avatar.<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsReadById functionality on card click.<br> deleteIcon - Custom delete icon <br> onAvatarClick - Custom click handler for avatar | CardProps | { hideDelete: false,<br> hideAvatar: false,<br> disableAutoMarkAsRead: false, <br> deleteIcon: null, <br> onAvatarClick: ()=>null } |
+cardProps | Props for customizing the notification cards. <br>hideDelete - Toggle to hide or show delete icon<br> hideAvatar - Toggle to hide or show the avatar.<br> hideMediaThumbnail - Toggle to hide or show thumbnail image<br> disableAutoMarkAsRead - Toggle to disable or enable the markAsReadById functionality on card click.<br> deleteIcon - Custom delete icon <br> onAvatarClick - Custom click handler for avatar <br> onMediaThumbnailClick - Custom click handler for media thumbnail | CardProps | { hideDelete: false,<br> hideAvatar: false,<br> disableAutoMarkAsRead: false, <br> hideMediaThumbnail: false, <br>deleteIcon: null, <br> onAvatarClick: ()=>null,<br> onMediaThumbnailClick: () => null } |
 customCard | Function for rendering custom notification cards | (notification)=> JSX Element | null |
 onCardClick | Custom click handler for notification cards | (notification)=> void | ()=>null |
 listEmptyComponent | Custom component for empty notification list | JSX Element | null |
@@ -194,9 +194,11 @@ Please note that the badgeStyle, window shadow and border props are only applica
     type CardProps = {
       hideDelete?: boolean,
       hideAvatar?: boolean,
+      hideMediaThumbnail?: boolean,
       disableAutoMarkAsRead?: boolean,
       deleteIcon?: JSX.Element,
       onAvatarClick?: () => void,
+      onMediaThumbnailClick?: () => void,
     };
 ```
 

example/src/App.tsx

@@ -255,7 +255,7 @@ const App: React.FC = () => {
           customHeader: showCustomHeader ? renderCustomHeader() : undefined
         }}
         darkMode={sdkDarkModeEnabled}
-        cardProps={{ hideAvatar: hideAvatar, showMedia: true, onAvatarClick: () => console.log('avatar click') }}
+        cardProps={{ hideAvatar: hideAvatar, onAvatarClick: () => console.log('avatar click') }}
         theme={windowThemes[windowThemeIndex]}
         customFooter={showCustomFooter ? renderCustomFooter() : undefined}
         listEmptyComponent={

package-lock.json

@@ -84,7 +84,7 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "test_notification": "^1.1.1",
+    "@sirenapp/js-sdk": "^1.1.0",
     "pubsub-js": "^1.9.4"
   }
 }

package.json

@@ -4,7 +4,9 @@ import React, { type FC, useState } from "react";
 import CloseIcon from "./CloseIcon";
 import TimerIcon from "./TimerIcon";
 import defaultAvatarDark from "../assets/dark/defaultAvatarDark.png";
+import failedImageDark from "../assets/dark/failedImageDark.svg";
 import defaultAvatarLight from "../assets/light/defaultAvatarLight.png";
+import failedImageLight from "../assets/light/failedImageLight.svg";
 import type { NotificationCardProps } from "../types";
 import { generateElapsedTimeText } from "../utils/commonUtils";
 import "../styles/card.css";
@@ -52,13 +54,17 @@ const Card: FC<NotificationCardProps> = ({
   deleteNotificationById,
 }) => {
   const { createdAt, message, isRead } = notification;
-  const { avatar, header, subHeader, body } = message;
-  const { hideAvatar, hideDelete, disableAutoMarkAsRead, deleteIcon = null, onAvatarClick } =  cardProps ?? {};
+  const { avatar, header, subHeader, body, thumbnailUrl } = message;
+  const { hideAvatar, hideDelete, hideMediaThumbnail, disableAutoMarkAsRead, deleteIcon = null, onAvatarClick, onMediaThumbnailClick } =  cardProps ?? {};
   const {
     markAsReadById
   } = useSiren();
 
   const [deleteAnimationStyle, setDeleteAnimationStyle] = useState('');
+  
+  const defaultAvatar = darkMode ? defaultAvatarDark : defaultAvatarLight;
+  const failedImage = darkMode ? failedImageDark: failedImageLight;
+
 
   const onDelete = async (event: React.MouseEvent): Promise<void> => {
 
@@ -79,8 +85,6 @@ const Card: FC<NotificationCardProps> = ({
     }
   };
 
- 
-  const defaultAvatar = darkMode ? defaultAvatarDark : defaultAvatarLight;
   const cardContainerStyle: CSSProperties = isRead
     ? {
       ...styles.defaultCardContainer,
@@ -102,6 +106,20 @@ const Card: FC<NotificationCardProps> = ({
     event.stopPropagation();
   };
 
+  const handleMediaClick = (event: React.MouseEvent) => {
+    onMediaThumbnailClick && onMediaThumbnailClick(notification);
+    event.stopPropagation();
+  };
+
+  const [imageLoaded, setImageLoaded] = useState(true); // Initially assume image is loaded
+
+  const [imageSource, setImageSource] = useState(thumbnailUrl ? thumbnailUrl : '');
+
+  const onErrorMedia = (): void => {
+    setImageLoaded(false);
+    setImageSource(failedImage);
+  };
+
   return (
     <div
       style={cardContainerStyle}
@@ -143,6 +161,19 @@ const Card: FC<NotificationCardProps> = ({
         >
           {body}
         </div>
+        {!hideMediaThumbnail && thumbnailUrl &&(
+          <div 
+            className="siren-sdk-card-thumbnail-container" 
+            style={{...(onAvatarClick && { cursor: "pointer" }),
+              backgroundColor: darkMode ? '#4C4C4C' : '#F0F2F5'}}
+            onClick={handleMediaClick}>
+            <img
+              className={`siren-sdk-card-thumbnail-image ${thumbnailUrl && imageLoaded ? 'siren-sdk-card-thumbnail-with-image' : ''}`}
+              src={imageSource}
+              onError={onErrorMedia}
+            />
+          </div>
+        )}
         <div className="siren-sdk-card-date-container">
           <TimerIcon
             color={styles.timerIcon.color}
@@ -170,4 +201,4 @@ const Card: FC<NotificationCardProps> = ({
   );
 };
 
-export default Card;
+export default Card;

src/assets/dark/failedImageDark.svg

@@ -6,7 +6,7 @@ import type {
   NotificationDataType,
   NotificationsApiResponse,
   SirenErrorType,
-} from "test_notification/dist/esm/types";
+} from "@sirenapp/js-sdk/dist/esm/types";
 
 import "../styles/sirenPanel.css";
 import NotificationCard from "./Card";

src/assets/light/failedImageLight.svg

@@ -1,13 +1,13 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 
-import PubSub from "pubsub-js";
-import { Siren } from "test_notification";
+import { Siren } from "@sirenapp/js-sdk";
 import type {
   InitConfigType,
   NotificationsApiResponse,
   SirenErrorType,
   UnviewedCountApiResponse,
-} from "test_notification/dist/esm/types";
+} from "@sirenapp/js-sdk/dist/esm/types";
+import PubSub from "pubsub-js";
 
 import type { SirenProviderConfigProps } from "../types";
 import { logger } from "../utils/commonUtils";

src/components/Card.tsx

@@ -25,6 +25,7 @@
 
 .siren-sdk-delete-button {
   cursor: pointer;
+  overflow: hidden;
 }
 
 .siren-sdk-card-text-break {
@@ -35,6 +36,30 @@
   overflow: hidden;
 }
 
+.siren-sdk-card-thumbnail-container{
+  height: 130px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  overflow: hidden;
+}
+
+.siren-sdk-card-thumbnail-error{
+  height: 26px;
+}
+
+.siren-sdk-card-thumbnail-image {
+  border-radius: 6px;
+}
+
+.siren-sdk-card-thumbnail-with-image {
+  height: 100%; 
+  object-fit: cover;
+  width: 100%;
+}
+
 .siren-sdk-card-date-container {
   display: grid;
   grid-template-columns: max-content max-content;