feat: file expired tip

src/components/FileMessage/AudioMessage.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import IconDownload from "@/assets/icons/download.svg";
 import IconAudio from "@/assets/icons/file.audio.svg";
 import { formatBytes } from "../../utils";
+import { ExpireTip } from "./OtherFileMessage";
 
 type Props = {
   url: string;
@@ -14,32 +15,51 @@ type Props = {
 
 const AudioMessage = ({ url, name, size, download }: Props) => {
   const [canPlay, setCanPlay] = useState(false);
+  const [error, setError] = useState(false);
   const handleCanPlay = () => {
     setCanPlay(true);
   };
+  const handleError = () => {
+    setError(true);
+  };
   const _size = formatBytes(size);
   return (
-    <div className="md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-solid border-gray-300 dark:border-gray-500 overflow-hidden bg-stone-100 dark:bg-stone-900">
+    <div
+      className={clsx(
+        "md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border overflow-hidden bg-stone-100 dark:bg-stone-900",
+        error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
+      )}
+    >
       <div className="flex justify-between z-30 overflow-hidden">
         <div className="flex gap-2 ">
           <IconAudio className="w-9 h-auto" />
           <div className="flex flex-col gap-1 text-sm text-gray-700 dark:text-gray-300">
-            <span title={name} className="font-bold w-[240px] truncate">
+            <span
+              title={name}
+              className={clsx("font-bold truncate", error ? "w-56 text-red-500" : " w-[240px]")}
+            >
               {name}
             </span>
             <span>{_size}</span>
           </div>
         </div>
-        <a href={download} className="mt-2 hidden md:block">
+        {error ? (
-          <IconDownload className="fill-gray-500 dark:fill-gray-400" />
+          <ExpireTip />
-        </a>
+        ) : (
+          <a href={download} className="mt-2 hidden md:block">
+            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
+          </a>
+        )}
       </div>
-      <audio
+      {!error && (
-        src={url}
+        <audio
-        onCanPlay={handleCanPlay}
+          onError={handleError}
-        controls
+          src={url}
-        className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
+          onCanPlay={handleCanPlay}
-      />
+          controls
+          className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
+        />
+      )}
     </div>
   );
 };

src/components/FileMessage/OtherFileMessage.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+
+import { User } from "@/types/user";
+import { formatBytes, fromNowTime, getFileIcon } from "@/utils";
+import IconClose from "@/assets/icons/close.circle.svg";
+import IconDownload from "@/assets/icons/download.svg";
+import IconInfo from "@/assets/icons/info.svg";
+import Progress from "./Progress";
+
+const ExpireTip = () => {
+  const { t } = useTranslation("chat");
+  return (
+    <span className="text-red-500 text-xs whitespace-nowrap flex items-center gap-1">
+      <IconInfo className="stroke-red-500 w-4 h-4" /> {t("file_expired")}
+    </span>
+  );
+};
+
+type Props = {
+  content: string;
+  sending: boolean;
+  content_type: string;
+  name: string;
+  progress: number;
+  size: number;
+  created_at: number;
+  from_user: User;
+  handleCancel: () => void;
+};
+
+const OtherFileMessage = ({
+  content,
+  sending,
+  content_type,
+  name,
+  progress,
+  size,
+  created_at,
+  from_user,
+  handleCancel
+}: Props) => {
+  const [error, setError] = useState(false);
+  const icon = getFileIcon(content_type, name, "w-9 h-auto");
+  useEffect(() => {
+    if (content) {
+      fetch(content)
+        .then((resp) => {
+          console.log("fetch", resp.status);
+          if (resp.status >= 400) {
+            setError(true);
+          }
+        })
+        .catch((error) => {
+          console.log("fetch error", error);
+          setError(true);
+        });
+    }
+  }, [content]);
+
+  return (
+    <div
+      className={clsx(
+        `bg-slate-50 dark:bg-slate-900 border border-solid box-border md:w-[370px] rounded-md`,
+        sending && "opacity-90",
+        error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
+      )}
+    >
+      <div className="px-2 py-3 flex items-center justify-between gap-2">
+        {icon}
+        <div className="flex flex-col gap-1 w-full overflow-hidden">
+          <span
+            className={clsx(
+              "font-semibold text-sm truncate",
+              error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
+            )}
+          >
+            {name}
+          </span>
+          <span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
+            {sending ? (
+              <Progress value={progress} width={"80%"} />
+            ) : (
+              <>
+                <strong>{formatBytes(size)}</strong>
+                <strong>{fromNowTime(created_at)}</strong>
+                {from_user && (
+                  <strong>
+                    by <strong className="font-bold">{from_user.name}</strong>
+                  </strong>
+                )}
+              </>
+            )}
+          </span>
+        </div>
+        {sending ? (
+          <IconClose className="cursor-pointer" onClick={handleCancel} />
+        ) : error ? (
+          <ExpireTip />
+        ) : (
+          <a
+            className="hidden md:block whitespace-nowrap"
+            download={name}
+            href={`${content}&download=true`}
+          >
+            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OtherFileMessage;
+export { ExpireTip };

src/components/FileMessage/VideoMessage.tsx

@@ -1,9 +1,11 @@
 import { SyntheticEvent, useState } from "react";
 import { Orbit } from "@uiball/loaders";
+import clsx from "clsx";
 
 import IconDownload from "@/assets/icons/download.svg";
 import IconVideo from "@/assets/icons/file.video.svg";
 import { formatBytes } from "../../utils";
+import { ExpireTip } from "./OtherFileMessage";
 
 // import clsx from 'clsx';
 
@@ -39,39 +41,63 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
   };
   const tipClass = "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
   return (
-    <div className="w-60 h-32 md:w-96 md:h-52 relative rounded-md border border-solid border-gray-300 dark:border-gray-700 overflow-hidden group">
+    <div
-      <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
+      className={clsx(
-      <div className="absolute top-0 left-0 w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20">
+        "w-60 md:w-96 relative rounded-md border overflow-hidden group",
+        error
+          ? "bg-stone-100 dark:bg-stone-900 border-red-100 dark:border-red-900/50"
+          : "border-gray-300 dark:border-gray-500 h-32 md:h-52"
+      )}
+    >
+      {!error && (
+        <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
+      )}
+      <div
+        className={clsx(
+          "w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20",
+          error ? "" : "absolute top-0 left-0 "
+        )}
+      >
         <div className="flex gap-2 ">
           <IconVideo className="hidden md:block w-9 h-auto" />
           <div className="flex flex-col gap-1 text-sm text-white">
-            <span title={name} className="font-bold w-56 md:w-[240px] truncate">
+            <span
+              title={name}
+              className={clsx(
+                "font-bold truncate",
+                error ? "w-56 text-red-500" : "w-56 md:w-[240px]"
+              )}
+            >
               {name}
             </span>
             <span>{_size}</span>
           </div>
         </div>
-        <a href={download} className="hidden md:block mt-2">
+        {error ? (
-          <IconDownload className="fill-white" />
+          <ExpireTip />
-        </a>
+        ) : (
+          <a href={download} className="hidden md:block mt-2">
+            <IconDownload className="fill-white" />
+          </a>
+        )}
       </div>
-      {!canPlay ? (
+      {!canPlay && !error ? (
         <div className={tipClass}>
           <Orbit color="#fff" />
         </div>
-      ) : error ? (
-        <span className={`${tipClass} text-red-500`}>Error</span>
       ) : null}
-      <video
+      {!error && (
-        onPlay={handlePlay}
+        <video
-        onError={handleError}
+          onPlay={handlePlay}
-        onCanPlay={handleCanPlay}
+          onError={handleError}
-        onPause={handlePause}
+          onCanPlay={handleCanPlay}
-        controls={canPlay}
+          onPause={handlePause}
-        className="absolute left-0 top-0 w-full h-full object-cover z-10"
+          controls={canPlay}
-      >
+          className="absolute left-0 top-0 w-full h-full object-cover z-10"
-        <source src={url} type="video/mp4"></source>
+        >
-      </video>
+          <source src={url} type="video/mp4"></source>
+        </video>
+      )}
     </div>
   );
 };

src/components/FileMessage/index.tsx

@@ -1,17 +1,14 @@
 import { FC, useEffect, useState } from "react";
-import clsx from "clsx";
 
 import { useAppSelector } from "@/app/store";
 import { ChatContext } from "@/types/common";
 import useRemoveLocalMessage from "@/hooks/useRemoveLocalMessage";
 import useSendMessage from "@/hooks/useSendMessage";
 import useUploadFile from "@/hooks/useUploadFile";
-import { formatBytes, fromNowTime, getFileIcon, getImageSize, isImage } from "@/utils";
+import { getImageSize, isImage } from "@/utils";
-import IconClose from "@/assets/icons/close.circle.svg";
-import IconDownload from "@/assets/icons/download.svg";
 import AudioMessage from "./AudioMessage";
 import ImageMessage from "./ImageMessage";
-import Progress from "./Progress";
+import OtherFileMessage from "./OtherFileMessage";
 import VideoMessage from "./VideoMessage";
 
 const isLocalFile = (content: string) => {
@@ -133,7 +130,6 @@ const FileMessage: FC<Props> = ({
   }, [sendMessageSuccess, content]);
 
   if (!properties) return null;
-  const icon = getFileIcon(content_type, name, "w-9 h-auto");
 
   if (!content || !name) return null;
 
@@ -151,6 +147,7 @@ const FileMessage: FC<Props> = ({
         thumbnail={thumbnail}
       />
     );
+
   // video
   if (content_type.startsWith("video") && !sending)
     return <VideoMessage size={size} url={content} name={name} download={download} />;
@@ -158,47 +155,17 @@ const FileMessage: FC<Props> = ({
   if (content_type.startsWith("audio") && !sending)
     return <AudioMessage size={size} url={content} name={name} download={download} />;
   return (
-    <div
+    <OtherFileMessage
-      className={clsx(
+      created_at={created_at}
-        `bg-slate-50 dark:bg-slate-900 border border-solid border-gray-300 dark:border-gray-500 box-border md:w-[370px] rounded-md`,
+      from_user={fromUser}
-        sending && "opacity-90"
+      name={name}
-      )}
+      size={size}
-    >
+      progress={progress}
-      <div className="px-2 py-3 flex items-center justify-between gap-2">
+      sending={sending}
-        {icon}
+      content={content}
-        <div className="flex flex-col gap-1 w-full overflow-hidden">
+      content_type={content_type}
-          <span className="font-semibold text-sm text-gray-800 dark:text-gray-100 truncate">
+      handleCancel={handleCancel}
-            {name}
+    />
-          </span>
-          <span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
-            {sending ? (
-              <Progress value={progress} width={"80%"} />
-            ) : (
-              <>
-                <strong>{formatBytes(size)}</strong>
-                <strong>{fromNowTime(created_at)}</strong>
-                {fromUser && (
-                  <strong>
-                    by <strong className="font-bold">{fromUser.name}</strong>
-                  </strong>
-                )}
-              </>
-            )}
-          </span>
-        </div>
-        {sending ? (
-          <IconClose className="cursor-pointer" onClick={handleCancel} />
-        ) : (
-          <a
-            className="hidden md:block whitespace-nowrap"
-            download={name}
-            href={`${content}&download=true`}
-          >
-            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
-          </a>
-        )}
-      </div>
-    </div>
   );
 };