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">
-          <IconDownload className="fill-gray-500 dark:fill-gray-400" />
-        </a>
+        {error ? (
+          <ExpireTip />
+        ) : (
+          <a href={download} className="mt-2 hidden md:block">
+            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
+          </a>
+        )}
       </div>
-      <audio
-        src={url}
-        onCanPlay={handleCanPlay}
-        controls
-        className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
-      />
+      {!error && (
+        <audio
+          onError={handleError}
+          src={url}
+          onCanPlay={handleCanPlay}
+          controls
+          className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
+        />
+      )}
     </div>
   );
 };