refactor: unify expired file message UX

2023-06-06 08:16:24 +08:00
parent 00c12405ac
commit 1db69e3d25
6 changed files with 120 additions and 92 deletions
@@ -4,7 +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";
+import ExpiredMessage from "./ExpiredMessage";

 type Props = {
  url: string;
@@ -23,40 +23,34 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
    setError(true);
  };
  const _size = formatBytes(size);
+  if (error) return <ExpiredMessage type="audio" />;
  return (
    <div
      className={clsx(
        "md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-500 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={clsx("w-9 h-auto", error && "grayscale")} />
+          <IconAudio className={clsx("w-9 h-auto")} />
          <div className="flex flex-col gap-1 text-sm text-gray-900 dark:text-gray-100">
            <span title={name} className={clsx("font-bold truncate w-[240px]")}>
-              {error ? "File not Found" : name}
+              {name}
            </span>
-            <span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
+            <span className="text-gray-400">{_size}</span>
          </div>
        </div>
-        {error ? (
-          <ExpireTip />
-        ) : (
-          <a href={download} className="mt-2 hidden md:block">
-            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
-          </a>
-        )}
+        <a href={download} className="mt-2 hidden md:block">
+          <IconDownload className="fill-gray-500 dark:fill-gray-400" />
+        </a>
      </div>
-      {!error && (
-        <audio
-          onError={handleError}
-          src={url}
-          onCanPlay={handleCanPlay}
-          controls
-          className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
-        />
-      )}
+      <audio
+        onError={handleError}
+        src={url}
+        onCanPlay={handleCanPlay}
+        controls
+        className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
+      />
    </div>
  );
 };
@@ -0,0 +1,66 @@
+import React from "react";
+import clsx from "clsx";
+
+import IconAudio from "@/assets/icons/file.audio.svg";
+import IconImage from "@/assets/icons/file.image.svg";
+import IconUnknown from "@/assets/icons/file.unknown.svg";
+import IconVideo from "@/assets/icons/file.video.svg";
+import IconInfo from "@/assets/icons/info.svg";
+
+type Props = {
+  type?: "file" | "audio" | "image" | "video";
+};
+const InfoMap = {
+  file: {
+    title: "File not Found",
+    desc: "File expired or deleted",
+    icon: <IconUnknown className="w-9 shrink-0 h-auto grayscale" />
+  },
+  audio: {
+    title: "Audio not Found",
+    desc: "Audio expired or deleted",
+    icon: <IconAudio className="w-9 shrink-0 h-auto grayscale" />
+  },
+  image: {
+    title: "Image not Found",
+    desc: "Image expired or deleted",
+    icon: <IconImage className="w-9 shrink-0 h-auto grayscale" />
+  },
+  video: {
+    title: "Video not Found",
+    desc: "Video expired or deleted",
+    icon: <IconVideo className="w-9 shrink-0 h-auto grayscale" />
+  }
+};
+const ExpiredMessage = ({ type = "file" }: Props) => {
+  const { title, desc, icon } = InfoMap[type];
+  return (
+    <div
+      className={clsx(
+        `bg-stone-100 dark:bg-stone-900 border box-border md:w-96 rounded-md border-gray-300 dark:border-gray-500`
+      )}
+    >
+      <div className="px-3 py-2 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 text-gray-800 dark:text-gray-100"
+              // error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
+            )}
+          >
+            {title}
+          </span>
+          <span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
+            <strong>{desc}</strong>
+          </span>
+        </div>
+        <span className="text-red-500 text-xs whitespace-nowrap flex items-center gap-1">
+          <IconInfo className="stroke-gray-600 w-6 h-6" />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ExpiredMessage;
@@ -2,6 +2,7 @@ import { FC, useEffect, useState } from "react";
 import { LineWobble, Ping } from "@uiball/loaders";

 import { getDefaultSize, isMobile } from "@/utils";
+import ExpiredMessage from "./ExpiredMessage";

 type Props = {
  uploading: boolean;
@@ -36,7 +37,7 @@ const ImageMessage: FC<Props> = ({
    };
    img.src = url;
  }, [url]);
-
+  if (status == "error") return <ExpiredMessage type="image" />;
  return (
    <div
      className={`relative overflow-hidden`}
@@ -51,11 +52,7 @@ const ImageMessage: FC<Props> = ({
          <span className="text-xs text-gray-500">{progress}%</span>
        </div>
      )}
-      {status == "error" ? (
-        <p className="w-full h-full flex-center text-lg text-red-800 bg-red-100">
-          Image expired or removed
-        </p>
-      ) : status == "loading" ? (
+      {status == "loading" ? (
        <p className="w-full h-full flex-center bg-primary-50/80 dark:bg-primary-900/70">
          <LineWobble />
        </p>
@@ -1,23 +1,13 @@
 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 ExpiredMessage from "./ExpiredMessage";
 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-gray-600 w-6 h-6" />
-    </span>
-  );
-};
-
 type Props = {
  content: string;
  sending: boolean;
@@ -42,7 +32,7 @@ const OtherFileMessage = ({
  handleCancel
 }: Props) => {
  const [error, setError] = useState(false);
-  const icon = getFileIcon(content_type, name, `w-9 shrink-0 h-auto ${error ? "grayscale" : ""}`);
+  const icon = getFileIcon(content_type, name, `w-9 shrink-0 h-auto`);
  useEffect(() => {
    if (content) {
      fetch(content)
@@ -58,7 +48,7 @@ const OtherFileMessage = ({
        });
    }
  }, [content]);
-
+  if (error) return <ExpiredMessage />;
  return (
    <div
      className={clsx(
@@ -76,13 +66,11 @@ const OtherFileMessage = ({
              // error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
            )}
          >
-            {error ? "File not Found" : name}
+            {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%"} />
-            ) : error ? (
-              <strong>File expired or deleted</strong>
            ) : (
              <>
                <strong>{formatBytes(size)}</strong>
@@ -98,8 +86,6 @@ const OtherFileMessage = ({
        </div>
        {sending ? (
          <IconClose className="cursor-pointer" onClick={handleCancel} />
-        ) : error ? (
-          <ExpireTip />
        ) : (
          <a
            className="hidden md:block whitespace-nowrap"
@@ -115,4 +101,3 @@ const OtherFileMessage = ({
 };

 export default OtherFileMessage;
-export { ExpireTip };
@@ -5,9 +5,7 @@ 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';
+import ExpiredMessage from "./ExpiredMessage";

 type Props = {
  url: string;
@@ -40,24 +38,21 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
    setError(true);
  };
  const tipClass = "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+  if (error) return <ExpiredMessage type="video" />;
  return (
    <div
      className={clsx(
-        "w-60 md:w-96 relative rounded-md border overflow-hidden group border-gray-300 dark:border-gray-500",
-        error ? "bg-stone-100 dark:bg-stone-900" : "h-32 md:h-52"
+        "w-60 md:w-96 relative rounded-md border overflow-hidden group 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="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",
-          error ? "" : "absolute top-0 left-0 "
+          "w-full flex justify-between z-30 px-3 py-2 overflow-hidden absolute top-0 left-0"
        )}
      >
        <div className="flex gap-2 ">
-          <IconVideo className={clsx("hidden md:block w-9 h-auto", error && "grayscale")} />
+          <IconVideo className={clsx("hidden md:block w-9 h-auto")} />
          <div className="flex flex-col gap-1 text-sm dark:text-white text-gray-900">
            <span
              title={name}
@@ -66,36 +61,30 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
                // error ? "w-56 text-red-500" : "w-56 md:w-[240px]"
              )}
            >
-              {error ? "File not Found" : name}
+              {name}
            </span>
-            <span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
+            <span className="text-gray-400">{_size}</span>
          </div>
        </div>
-        {error ? (
-          <ExpireTip />
-        ) : (
-          <a href={download} className="hidden md:block mt-2">
-            <IconDownload className="fill-white" />
-          </a>
-        )}
+        <a href={download} className="hidden md:block mt-2">
+          <IconDownload className="fill-white" />
+        </a>
      </div>
      {!canPlay && !error ? (
        <div className={tipClass}>
          <Orbit color="#fff" />
        </div>
      ) : null}
-      {!error && (
-        <video
-          onPlay={handlePlay}
-          onError={handleError}
-          onCanPlay={handleCanPlay}
-          onPause={handlePause}
-          controls={canPlay}
-          className="absolute left-0 top-0 w-full h-full object-cover z-10"
-        >
-          <source src={url} type="video/mp4"></source>
-        </video>
-      )}
+      <video
+        onPlay={handlePlay}
+        onError={handleError}
+        onCanPlay={handleCanPlay}
+        onPause={handlePause}
+        controls={canPlay}
+        className="absolute left-0 top-0 w-full h-full object-contain z-10"
+      >
+        <source src={url} type="video/mp4"></source>
+      </video>
    </div>
  );
 };
@@ -5,8 +5,9 @@ import WaveSurfer from "wavesurfer.js";

 import IconPause from "@/assets/icons/pause.svg";
 import IconPlay from "@/assets/icons/play.circle.svg";
-import IconRefresh from "@/assets/icons/refresh.svg";
+// import IconRefresh from "@/assets/icons/refresh.svg";
 import BASE_URL from "../app/config";
+import ExpiredMessage from "./FileMessage/ExpiredMessage";

 export type VoiceMessageProps = {
  type: string;
@@ -103,15 +104,16 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
      current.playPause();
    }
  };
-  const handleReload = () => {
-    initWave(file_path);
-  };
+  // const handleReload = () => {
+  //   initWave(file_path);
+  // };
  const notReady = status !== "ready";
+  if (status == "error") return <ExpiredMessage type="audio" />;
  return (
    <div
      className={clsx(
        "relative whitespace-nowrap select-none flex items-center gap-2 p-2 rounded-lg max-w-sm",
-        status === "error" ? "bg-red-200" : "bg-primary-100 dark:bg-primary-900"
+        "bg-primary-100 dark:bg-primary-900"
      )}
    >
      <button className="disabled:opacity-60" onClick={handleClick} disabled={notReady}>
@@ -121,22 +123,17 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
          <IconPlay className="stroke-primary-500" />
        )}
      </button>
-      <div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px] flex items-center")}>
+      <div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px]")}>
        {status == "loading" && <span className="text-xs">Loading voice message...</span>}
-        {status == "error" && (
-          <span className="text-xs text-red-800">Load voice message error</span>
-        )}
      </div>
-      {status !== "error" && (
-        <time className="text-primary-500 text-xs whitespace-nowrap text-left">{duration}</time>
-      )}
-      {status === "error" && (
+      <time className="text-primary-500 text-xs whitespace-nowrap text-left">{duration}</time>
+      {/* {status === "error" && (
        <IconRefresh
          role="button"
          className="absolute -right-6 top-1/2 -translate-y-1/2 w-4 h-4 stroke-primary-600"
          onClick={handleReload}
        />
-      )}
+      )} */}
    </div>
  );
 };