feat: support gif toast (#3389)

apps/storybook/src/stories/notification-center.stories.tsx

@@ -12,6 +12,12 @@ export default {
 } satisfies Meta<typeof NotificationCenter>;
 
 let id = 0;
+const image = (
+  <video autoPlay muted loop>
+    <source src="/editingVideo.mp4" type="video/mp4" />
+    <source src="/editingVideo.webm" type="video/webm" />
+  </video>
+);
 export const Basic = () => {
   const push = useSetAtom(pushNotificationAtom);
   const expand = useAtomValue(expandNotificationCenterAtom);
@@ -196,6 +202,27 @@ export const Basic = () => {
           dark error
         </button>
       </div>
+      <div>
+        <button
+          onClick={() => {
+            const key = id++;
+            push({
+              key: `${key}`,
+              title: `${key} title`,
+              message: `gif test`,
+              type: 'info',
+              multimedia: image,
+              timeout: 3000,
+              undo: async () => {
+                console.log('undo');
+              },
+              progressingBar: true,
+            });
+          }}
+        >
+          gif
+        </button>
+      </div>
       <NotificationCenter />
     </>
   );

packages/component/src/components/notification-center/index.css.ts

@@ -2,7 +2,12 @@
 // License on the MIT
 // https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/styles.css
 
-import { keyframes, style, styleVariants } from '@vanilla-extract/css';
+import {
+  globalStyle,
+  keyframes,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
 
 const swipeOut = keyframes({
   '0%': {
@@ -19,12 +24,28 @@ const swipeOut = keyframes({
 
 export const notificationCenterViewportStyle = style({
   position: 'fixed',
-  bottom: '200px',
+  height: '500px',
-  right: '60px',
+  bottom: '20px',
+  right: '20px',
   width: '380px',
-  margin: 0,
   zIndex: 2147483647,
   outline: 'none',
+  display: 'flex',
+  alignItems: 'flex-end',
+});
+export const notificationMultimediaStyle = style({
+  position: 'relative',
+  width: '100%',
+  height: '230px',
+  borderRadius: '8px 8px 0 0',
+  overflow: 'hidden',
+  marginBottom: '16px',
+});
+globalStyle(`${notificationMultimediaStyle} > *`, {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  cursor: 'unset',
 });
 
 export const notificationStyle = style({
@@ -128,18 +149,32 @@ export const notificationStyle = style({
 export const notificationIconStyle = style({
   fontSize: '24px',
   marginLeft: '18px',
-  marginRight: '12px',
+  marginRight: '8px',
   color: 'var(--affine-processing-color)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
 });
+export const hasMediaStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  paddingTop: '0',
+  paddingBottom: '16px',
+  width: '380px',
+  borderRadius: '8px',
+  boxShadow: 'var(--affine-shadow-1)',
+  border: '1px solid var(--affine-border-color)',
+  background: 'var(--affine-white)',
+  transition: 'all 0.3s',
+});
 export const notificationContentStyle = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
-  padding: '16px 0',
+  paddingTop: '16px',
-  width: '100%',
+  paddingBottom: '16px',
+  width: '380px',
   borderRadius: '8px',
   boxShadow: 'var(--affine-shadow-1)',
   border: '1px solid var(--affine-border-color)',
@@ -181,6 +216,26 @@ export const closeButtonStyle = style({
 export const closeButtonWithoutUndoStyle = style({
   marginLeft: '92px',
 });
+export const closeButtonWithMediaStyle = style({
+  position: 'absolute',
+  width: '22px',
+  height: '22px',
+  fontSize: '16px',
+  top: '6px',
+  right: '6px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer',
+  borderRadius: '4px',
+  color: 'var(--affine-pure-black)',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+  },
+});
+export const closeButtonColorStyle = style({
+  color: 'var(--affine-white)',
+});
 export const undoButtonStyle = style({
   fontSize: 'var(--affine-font-sm)',
   background: 'var(--affine-hover-color)',
@@ -189,6 +244,10 @@ export const undoButtonStyle = style({
   color: 'var(--affine-processing-color)',
   cursor: 'pointer',
 });
+export const undoButtonWithMediaStyle = style({
+  marginLeft: 'auto',
+  marginRight: '16px',
+});
 export const messageStyle = style({
   fontSize: 'var(--affine-font-sm)',
   width: '200px',

packages/component/src/components/notification-center/index.jotai.ts

@@ -8,6 +8,7 @@ export type Notification = {
   theme?: 'light' | 'dark';
   timeout?: number;
   progressingBar?: boolean;
+  multimedia?: React.ReactNode | JSX.Element | HTMLElement;
   // actions
   undo?: () => Promise<void>;
 };

packages/component/src/components/notification-center/index.tsx

@@ -288,10 +288,20 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
       }}
     >
       <div
-        className={clsx(styles.notificationContentStyle, {
+        className={clsx({
           [typeStyle]: notification.theme,
+          [styles.hasMediaStyle]: notification.multimedia,
+          [styles.notificationContentStyle]: !notification.multimedia,
         })}
       >
+        {notification.multimedia ? (
+          <div className={styles.notificationMultimediaStyle}>
+            <>{notification.multimedia}</>
+            <IconButton className={styles.closeButtonWithMediaStyle}>
+              <CloseIcon onClick={onClickRemove} />
+            </IconButton>
+          </div>
+        ) : null}
         <Toast.Title
           className={clsx(styles.notificationTitleStyle, {
             [styles.darkColorStyle]: notification.theme === 'dark',
@@ -312,25 +322,28 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
             <div
               className={clsx(styles.undoButtonStyle, {
                 [styles.darkColorStyle]: notification.theme === 'dark',
+                [styles.undoButtonWithMediaStyle]: notification.multimedia,
               })}
               onClick={onClickUndo}
             >
               UNDO
             </div>
           )}
-          <IconButton
+          {notification.multimedia ? null : (
-            className={clsx(styles.closeButtonStyle, {
+            <IconButton
-              [styles.closeButtonWithoutUndoStyle]: !notification.undo,
+              className={clsx(styles.closeButtonStyle, {
-            })}
+                [styles.closeButtonWithoutUndoStyle]: !notification.undo,
-            style={{
+              })}
-              color:
+              style={{
-                notification.theme === 'dark'
+                color:
-                  ? 'var(--affine-white)'
+                  notification.theme === 'dark'
-                  : 'var(--affine-icon-color)',
+                    ? 'var(--affine-white)'
-            }}
+                    : 'var(--affine-icon-color)',
-          >
+              }}
-            <CloseIcon onClick={onClickRemove} />
+            >
-          </IconButton>
+              <CloseIcon onClick={onClickRemove} />
+            </IconButton>
+          )}
         </Toast.Title>
         <Toast.Description
           className={clsx(styles.messageStyle, {

packages/component/src/components/page-list/operation-menu-items/export.tsx

@@ -9,6 +9,7 @@ import {
   ExportToPdfIcon,
   ExportToPngIcon,
 } from '@blocksuite/icons';
+import { uuidv4 } from '@blocksuite/store';
 import { useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 
@@ -36,7 +37,7 @@ export const ExportToPdfMenuItem = ({
         .then(() => {
           onSelect?.({ type: 'pdf' });
           setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
             title: t['com.affine.export.success.title'](),
             message: t['com.affine.export.success.message'](),
             type: 'success',
@@ -45,7 +46,7 @@ export const ExportToPdfMenuItem = ({
         .catch(err => {
           console.error(err);
           setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
             title: t['com.affine.export.error.title'](),
             message: t['com.affine.export.error.message'](),
             type: 'error',
@@ -59,7 +60,7 @@ export const ExportToPdfMenuItem = ({
         .then(() => {
           onSelect?.({ type: 'pdf' });
           setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
             title: t['com.affine.export.success.title'](),
             message: t['com.affine.export.success.message'](),
             type: 'success',
@@ -68,7 +69,7 @@ export const ExportToPdfMenuItem = ({
         .catch(err => {
           console.error(err);
           setPushNotification({
-            key: 'export-to-pdf',
+            key: uuidv4(),
             title: t['com.affine.export.error.title'](),
             message: t['com.affine.export.error.message'](),
             type: 'error',
@@ -104,7 +105,7 @@ export const ExportToHtmlMenuItem = ({
       .then(() => {
         onSelect?.({ type: 'html' });
         setPushNotification({
-          key: 'export-to-html',
+          key: uuidv4(),
           title: t['com.affine.export.success.title'](),
           message: t['com.affine.export.success.message'](),
           type: 'success',
@@ -112,6 +113,12 @@ export const ExportToHtmlMenuItem = ({
       })
       .catch(err => {
         console.error(err);
+        setPushNotification({
+          key: uuidv4(),
+          title: t['com.affine.export.error.title'](),
+          message: t['com.affine.export.error.message'](),
+          type: 'error',
+        });
       });
     onSelect?.({ type: 'html' });
   }, [currentEditor, onSelect, setPushNotification, t]);
@@ -146,7 +153,7 @@ export const ExportToPngMenuItem = ({
       .then(() => {
         onSelect?.({ type: 'png' });
         setPushNotification({
-          key: 'export-to-png',
+          key: uuidv4(),
           title: t['com.affine.export.success.title'](),
           message: t['com.affine.export.success.message'](),
           type: 'success',
@@ -155,7 +162,7 @@ export const ExportToPngMenuItem = ({
       .catch(err => {
         console.error(err);
         setPushNotification({
-          key: 'export-to-png',
+          key: uuidv4(),
           title: t['com.affine.export.error.title'](),
           message: t['com.affine.export.error.message'](),
           type: 'error',
@@ -192,7 +199,7 @@ export const ExportToMarkdownMenuItem = ({
       .then(() => {
         onSelect?.({ type: 'markdown' });
         setPushNotification({
-          key: 'export-to-markdown',
+          key: uuidv4(),
           title: t['com.affine.export.success.title'](),
           message: t['com.affine.export.success.message'](),
           type: 'success',
@@ -201,7 +208,7 @@ export const ExportToMarkdownMenuItem = ({
       .catch(err => {
         console.error(err);
         setPushNotification({
-          key: 'export-to-markdown',
+          key: uuidv4(),
           title: t['com.affine.export.error.title'](),
           message: t['com.affine.export.error.message'](),
           type: 'error',