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 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>
);
};
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 { 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>
src/components/FileMessage/OtherFileMessage.tsx
+4 -19
View File
@@ -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 };
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 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>
);
};
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 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>
);
};