Tristan Yang
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import { useState } from "react";
|
|
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;
|
|
name: string;
|
|
size: number;
|
|
download: string;
|
|
};
|
|
|
|
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={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={clsx("font-bold truncate", error ? "w-56 text-red-500" : " w-[240px]")}
|
|
>
|
|
{name}
|
|
</span>
|
|
<span>{_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>
|
|
)}
|
|
</div>
|
|
{!error && (
|
|
<audio
|
|
onError={handleError}
|
|
src={url}
|
|
onCanPlay={handleCanPlay}
|
|
controls
|
|
className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AudioMessage;
|