ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unify expired file message UX

Browse Source
This commit is contained in:
Tristan Yang
2023-06-06 08:16:24 +08:00
parent 00c12405ac
commit 1db69e3d25
6 changed files with 120 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FileMessage/AudioMessage.tsx
+15 -21
View File
@@ -4,7 +4,7 @@ import clsx from "clsx";
import IconDownload from "@/assets/icons/download.svg"; import IconDownload from "@/assets/icons/download.svg";
import IconAudio from "@/assets/icons/file.audio.svg"; import IconAudio from "@/assets/icons/file.audio.svg";
import { formatBytes } from "../../utils"; import { formatBytes } from "../../utils";
import { ExpireTip } from "./OtherFileMessage"; import ExpiredMessage from "./ExpiredMessage";
type Props = { type Props = {
url: string; url: string;
@@ -23,40 +23,34 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
setError(true); setError(true);
}; };
const _size = formatBytes(size); const _size = formatBytes(size);
if (error) return <ExpiredMessage type="audio" />;
return ( return (
<div <div
className={clsx( 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" "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 justify-between z-30 overflow-hidden">
<div className="flex gap-2 "> <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"> <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]")}> <span title={name} className={clsx("font-bold truncate w-[240px]")}>
{error ? "File not Found" : name} {name}
</span> </span>
<span className="text-gray-400">{error ? "File expired or deleted" : _size}</span> <span className="text-gray-400">{_size}</span>
</div> </div>
</div> </div>
{error ? ( <a href={download} className="mt-2 hidden md:block">
<ExpireTip /> <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> </div>
{!error && ( <audio
<audio onError={handleError}
onError={handleError} src={url}
src={url} onCanPlay={handleCanPlay}
onCanPlay={handleCanPlay} controls
controls className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")} />
/>
)}
</div> </div>
); );
}; };
src/components/FileMessage/ExpiredMessage.tsx
+66
View File
@@ -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;
src/components/FileMessage/ImageMessage.tsx
+3 -6
View File
@@ -2,6 +2,7 @@ import { FC, useEffect, useState } from "react";
import { LineWobble, Ping } from "@uiball/loaders"; import { LineWobble, Ping } from "@uiball/loaders";
import { getDefaultSize, isMobile } from "@/utils"; import { getDefaultSize, isMobile } from "@/utils";
import ExpiredMessage from "./ExpiredMessage";
type Props = { type Props = {
uploading: boolean; uploading: boolean;
@@ -36,7 +37,7 @@ const ImageMessage: FC<Props> = ({
}; };
img.src = url; img.src = url;
}, [url]); }, [url]);
if (status == "error") return <ExpiredMessage type="image" />;
return ( return (
<div <div
className={`relative overflow-hidden`} className={`relative overflow-hidden`}
@@ -51,11 +52,7 @@ const ImageMessage: FC<Props> = ({
<span className="text-xs text-gray-500">{progress}%</span> <span className="text-xs text-gray-500">{progress}%</span>
</div> </div>
)} )}
{status == "error" ? ( {status == "loading" ? (
<p className="w-full h-full flex-center text-lg text-red-800 bg-red-100">
Image expired or removed
</p>
) : status == "loading" ? (
<p className="w-full h-full flex-center bg-primary-50/80 dark:bg-primary-900/70"> <p className="w-full h-full flex-center bg-primary-50/80 dark:bg-primary-900/70">
<LineWobble /> <LineWobble />
</p> </p>
src/components/FileMessage/OtherFileMessage.tsx
+4 -19
View File
@@ -1,23 +1,13 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import clsx from "clsx"; import clsx from "clsx";
import { User } from "@/types/user"; import { User } from "@/types/user";
import { formatBytes, fromNowTime, getFileIcon } from "@/utils"; import { formatBytes, fromNowTime, getFileIcon } from "@/utils";
import IconClose from "@/assets/icons/close.circle.svg"; import IconClose from "@/assets/icons/close.circle.svg";
import IconDownload from "@/assets/icons/download.svg"; import IconDownload from "@/assets/icons/download.svg";
import IconInfo from "@/assets/icons/info.svg"; import ExpiredMessage from "./ExpiredMessage";
import Progress from "./Progress"; 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 = { type Props = {
content: string; content: string;
sending: boolean; sending: boolean;
@@ -42,7 +32,7 @@ const OtherFileMessage = ({
handleCancel handleCancel
}: Props) => { }: Props) => {
const [error, setError] = useState(false); 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(() => { useEffect(() => {
if (content) { if (content) {
fetch(content) fetch(content)
@@ -58,7 +48,7 @@ const OtherFileMessage = ({
}); });
} }
}, [content]); }, [content]);
if (error) return <ExpiredMessage />;
return ( return (
<div <div
className={clsx( className={clsx(
@@ -76,13 +66,11 @@ const OtherFileMessage = ({
// error ? "text-red-500" : "text-gray-800 dark:text-gray-100" // error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
)} )}
> >
{error ? "File not Found" : name} {name}
</span> </span>
<span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4"> <span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
{sending ? ( {sending ? (
<Progress value={progress} width={"80%"} /> <Progress value={progress} width={"80%"} />
) : error ? (
<strong>File expired or deleted</strong>
) : ( ) : (
<> <>
<strong>{formatBytes(size)}</strong> <strong>{formatBytes(size)}</strong>
@@ -98,8 +86,6 @@ const OtherFileMessage = ({
</div> </div>
{sending ? ( {sending ? (
<IconClose className="cursor-pointer" onClick={handleCancel} /> <IconClose className="cursor-pointer" onClick={handleCancel} />
) : error ? (
<ExpireTip />
) : ( ) : (
<a <a
className="hidden md:block whitespace-nowrap" className="hidden md:block whitespace-nowrap"
@@ -115,4 +101,3 @@ const OtherFileMessage = ({
}; };
export default OtherFileMessage; export default OtherFileMessage;
export { ExpireTip };
src/components/FileMessage/VideoMessage.tsx
+21 -32
View File
@@ -5,9 +5,7 @@ import clsx from "clsx";
import IconDownload from "@/assets/icons/download.svg"; import IconDownload from "@/assets/icons/download.svg";
import IconVideo from "@/assets/icons/file.video.svg"; import IconVideo from "@/assets/icons/file.video.svg";
import { formatBytes } from "../../utils"; import { formatBytes } from "../../utils";
import { ExpireTip } from "./OtherFileMessage"; import ExpiredMessage from "./ExpiredMessage";
// import clsx from 'clsx';
type Props = { type Props = {
url: string; url: string;
@@ -40,24 +38,21 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
setError(true); setError(true);
}; };
const tipClass = "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"; const tipClass = "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
if (error) return <ExpiredMessage type="video" />;
return ( return (
<div <div
className={clsx( className={clsx(
"w-60 md:w-96 relative rounded-md border overflow-hidden group border-gray-300 dark:border-gray-500", "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 ? "bg-stone-100 dark:bg-stone-900" : "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 <div
className={clsx( className={clsx(
"w-full flex justify-between z-30 px-3 py-2 overflow-hidden", "w-full flex justify-between z-30 px-3 py-2 overflow-hidden absolute top-0 left-0"
error ? "" : "absolute top-0 left-0 "
)} )}
> >
<div className="flex gap-2 "> <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"> <div className="flex flex-col gap-1 text-sm dark:text-white text-gray-900">
<span <span
title={name} 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 ? "w-56 text-red-500" : "w-56 md:w-[240px]"
)} )}
> >
{error ? "File not Found" : name} {name}
</span> </span>
<span className="text-gray-400">{error ? "File expired or deleted" : _size}</span> <span className="text-gray-400">{_size}</span>
</div> </div>
</div> </div>
{error ? ( <a href={download} className="hidden md:block mt-2">
<ExpireTip /> <IconDownload className="fill-white" />
) : ( </a>
<a href={download} className="hidden md:block mt-2">
<IconDownload className="fill-white" />
</a>
)}
</div> </div>
{!canPlay && !error ? ( {!canPlay && !error ? (
<div className={tipClass}> <div className={tipClass}>
<Orbit color="#fff" /> <Orbit color="#fff" />
</div> </div>
) : null} ) : null}
{!error && ( <video
<video onPlay={handlePlay}
onPlay={handlePlay} onError={handleError}
onError={handleError} onCanPlay={handleCanPlay}
onCanPlay={handleCanPlay} onPause={handlePause}
onPause={handlePause} controls={canPlay}
controls={canPlay} className="absolute left-0 top-0 w-full h-full object-contain z-10"
className="absolute left-0 top-0 w-full h-full object-cover z-10" >
> <source src={url} type="video/mp4"></source>
<source src={url} type="video/mp4"></source> </video>
</video>
)}
</div> </div>
); );
}; };
src/components/VoiceMessage.tsx
+11 -14
View File
@@ -5,8 +5,9 @@ import WaveSurfer from "wavesurfer.js";
import IconPause from "@/assets/icons/pause.svg"; import IconPause from "@/assets/icons/pause.svg";
import IconPlay from "@/assets/icons/play.circle.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 BASE_URL from "../app/config";
import ExpiredMessage from "./FileMessage/ExpiredMessage";
export type VoiceMessageProps = { export type VoiceMessageProps = {
type: string; type: string;
@@ -103,15 +104,16 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
current.playPause(); current.playPause();
} }
}; };
const handleReload = () => { // const handleReload = () => {
initWave(file_path); // initWave(file_path);
}; // };
const notReady = status !== "ready"; const notReady = status !== "ready";
if (status == "error") return <ExpiredMessage type="audio" />;
return ( return (
<div <div
className={clsx( className={clsx(
"relative whitespace-nowrap select-none flex items-center gap-2 p-2 rounded-lg max-w-sm", "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}> <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" /> <IconPlay className="stroke-primary-500" />
)} )}
</button> </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 == "loading" && <span className="text-xs">Loading voice message...</span>}
{status == "error" && (
<span className="text-xs text-red-800">Load voice message error</span>
)}
</div> </div>
{status !== "error" && ( <time className="text-primary-500 text-xs whitespace-nowrap text-left">{duration}</time>
<time className="text-primary-500 text-xs whitespace-nowrap text-left">{duration}</time> {/* {status === "error" && (
)}
{status === "error" && (
<IconRefresh <IconRefresh
role="button" role="button"
className="absolute -right-6 top-1/2 -translate-y-1/2 w-4 h-4 stroke-primary-600" className="absolute -right-6 top-1/2 -translate-y-1/2 w-4 h-4 stroke-primary-600"
onClick={handleReload} onClick={handleReload}
/> />
)} )} */}
</div> </div>
); );
}; };