jared
fd9e4a9802
The desktop (Tauri) app has no native download UI, so FileSaver.saveAs saved files silently — no visual or audio confirmation. Users re-clicked because nothing said it worked (one report: 5 copies of the same file). Add a small useSaveFile() hook that saves AND raises a 'Downloaded <filename>' toast, and route every download call site through it (file attachments, image viewer, PDF viewer, plus the recovery-key / key-backup exports). The file-message download button also shows a green check on success. Toast system extended with an optional iconSrc so system toasts render an icon instead of an avatar/initials, and an empty roomName is no longer rendered. Tests: createDownloadToast covered; 701/701 pass; typecheck + build clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import classNames from 'classnames';
|
|
import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
|
|
import { useSaveFile } from '../../hooks/useSaveFile';
|
|
import * as css from './ImageViewer.css';
|
|
import { useZoom } from '../../hooks/useZoom';
|
|
import { usePan } from '../../hooks/usePan';
|
|
import { downloadMedia } from '../../utils/matrix';
|
|
|
|
export type ImageViewerProps = {
|
|
alt: string;
|
|
src: string;
|
|
requestClose: () => void;
|
|
};
|
|
|
|
export const ImageViewer = as<'div', ImageViewerProps>(
|
|
({ className, alt, src, requestClose, ...props }, ref) => {
|
|
const { t } = useTranslation();
|
|
const saveFile = useSaveFile();
|
|
const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
|
|
const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
|
|
|
|
const handleDownload = async () => {
|
|
const fileContent = await downloadMedia(src);
|
|
saveFile(fileContent, alt);
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
className={classNames(css.ImageViewer, className)}
|
|
direction="Column"
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<Header className={css.ImageViewerHeader} size="400">
|
|
<Box grow="Yes" alignItems="Center" gap="200">
|
|
<IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
|
|
<Icon size="50" src={Icons.ArrowLeft} />
|
|
</IconButton>
|
|
<Text size="T300" truncate>
|
|
{alt}
|
|
</Text>
|
|
</Box>
|
|
<Box shrink="No" alignItems="Center" gap="200">
|
|
<IconButton
|
|
variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
|
|
outlined={zoom < 1}
|
|
size="300"
|
|
radii="Pill"
|
|
onClick={zoomOut}
|
|
aria-label="Zoom Out"
|
|
>
|
|
<Icon size="50" src={Icons.Minus} />
|
|
</IconButton>
|
|
<Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
|
|
<Text size="B300">{Math.round(zoom * 100)}%</Text>
|
|
</Chip>
|
|
<IconButton
|
|
variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
|
|
outlined={zoom > 1}
|
|
size="300"
|
|
radii="Pill"
|
|
onClick={zoomIn}
|
|
aria-label="Zoom In"
|
|
>
|
|
<Icon size="50" src={Icons.Plus} />
|
|
</IconButton>
|
|
<Chip
|
|
variant="Primary"
|
|
onClick={handleDownload}
|
|
radii="300"
|
|
before={<Icon size="50" src={Icons.Download} />}
|
|
>
|
|
<Text size="B300">{t('Organisms.ImageViewer.download')}</Text>
|
|
</Chip>
|
|
</Box>
|
|
</Header>
|
|
<Box
|
|
grow="Yes"
|
|
className={css.ImageViewerContent}
|
|
justifyContent="Center"
|
|
alignItems="Center"
|
|
>
|
|
<img
|
|
className={css.ImageViewerImg}
|
|
style={{
|
|
cursor,
|
|
transform: `scale(${zoom}) translate(${pan.translateX}px, ${pan.translateY}px)`,
|
|
}}
|
|
src={src}
|
|
alt={alt}
|
|
onMouseDown={onMouseDown}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
},
|
|
);
|