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

feat: add refresh icon to voice msg

Browse Source
This commit is contained in:
Tristan Yang
2023-04-08 08:51:38 +08:00
parent bed2229bb2
commit cf28d56653
2 changed files with 59 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/refresh.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#101828" xmlns="http://www.w3.org/2000/svg">
<path d="M23 3.99995V9.99995M23 9.99995H17M23 9.99995L18.36 5.63995C17.2853 4.56467 15.9556 3.77916 14.4952 3.35673C13.0348 2.93429 11.4911 2.8887 10.0083 3.22421C8.52547 3.55972 7.1518 4.26539 6.01547 5.27537C4.87913 6.28536 4.01717 7.56674 3.51 8.99995M1 20V14M1 14H7M1 14L5.64 18.36C6.71475 19.4352 8.04437 20.2207 9.50481 20.6432C10.9652 21.0656 12.5089 21.1112 13.9917 20.7757C15.4745 20.4402 16.8482 19.7345 17.9845 18.7245C19.1209 17.7145 19.9828 16.4332 20.49 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 659 B

src/common/component/VoiceMessage.tsx
+20 -7
View File
@@ -3,6 +3,7 @@ import dayjs from 'dayjs';
import clsx from 'clsx';
import WaveSurfer from 'wavesurfer.js';
import IconPause from '../../assets/icons/pause.svg';
import IconRefresh from '../../assets/icons/refresh.svg';
import IconPlay from '../../assets/icons/play.circle.svg';
import BASE_URL from '../../app/config';
@@ -21,14 +22,13 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
// const [audio, setAudio] = useState<HTMLAudioElement>(new Audio(`${BASE_URL}/resource/file?file_path=${encodeURIComponent(
// file_path
// )}`));
useEffect(() => {
const initWave = (file_path: string) => {
let wave: WaveSurfer | null = null;
if (containerRef.current && file_path) {
const audioSrc = `${BASE_URL}/resource/file?file_path=${encodeURIComponent(
file_path
)}`;
wave = WaveSurfer.create({
container: containerRef.current,
container: containerRef.current ?? "",
// maxCanvasWidth: 200,
height: 32,
waveColor: '#0BA5EC',
@@ -43,6 +43,9 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
wave.on('error', function (err) {
console.log("voice message error", err);
setStatus("error");
if (waveRef.current) {
waveRef.current.destroy();
}
});
wave.on('play', function () {
setPlaying(true);
@@ -62,6 +65,11 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
}
});
waveRef.current = wave;
};
useEffect(() => {
if (containerRef.current && file_path) {
initWave(file_path);
}
return () => {
if (waveRef.current) {
@@ -78,16 +86,21 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
}
}
};
const handleReload = () => {
initWave(file_path);
};
const notReady = status !== "ready";
return (
<div className={clsx("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")}>
<button className='disabled:opacity-60' onClick={handleClick} disabled={status !== "ready"}>
<div className={clsx("relative 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")}>
<button className='disabled:opacity-60' onClick={handleClick} disabled={notReady}>
{playing ? <IconPause className="stroke-primary-500" /> : <IconPlay className="stroke-primary-500" />}
</button>
<div ref={containerRef} className='flex-1 h-8' >
<div ref={containerRef} className={clsx('flex-1 h-8', notReady && "flex-center")} >
{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>
<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>
);
};