Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a1c6015772 | ||
| d7d7d183c5 | |||
|
|
a5ddd10ff4 | ||
|
|
2921d3a547 | ||
|
|
2be4c66b4a | ||
|
|
f180f4ab7c |
2
cinny
2
cinny
Submodule cinny updated: 13523fea2b...898d217451
@@ -1,107 +0,0 @@
|
|||||||
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
||||||
import React from 'react';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { Box, Chip, Header, IconButton, Text, as } from 'folds';
|
|
||||||
import { Icon, Icons } from '../icons';
|
|
||||||
import * as css from './ImageViewer.css';
|
|
||||||
import { useZoom } from '../../hooks/useZoom';
|
|
||||||
import { usePan } from '../../hooks/usePan';
|
|
||||||
import { downloadAndSaveMedia } from '../../utils/saveMedia';
|
|
||||||
import { getCurrentAccessToken } from '../../utils/auth';
|
|
||||||
|
|
||||||
export type ImageViewerProps = {
|
|
||||||
alt: string;
|
|
||||||
src: string;
|
|
||||||
requestClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ImageViewer = as<'div', ImageViewerProps>(
|
|
||||||
({ className, alt, src, requestClose, ...props }, ref) => {
|
|
||||||
const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
|
|
||||||
const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
|
|
||||||
|
|
||||||
const handleDownload = async () => {
|
|
||||||
try {
|
|
||||||
await downloadAndSaveMedia(src, alt, getCurrentAccessToken());
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('[ImageViewer] Failed to download media:', error);
|
|
||||||
try {
|
|
||||||
window.open(src, '_blank');
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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}>
|
|
||||||
<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">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}
|
|
||||||
draggable={false}
|
|
||||||
onMouseDown={onMouseDown}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "paarrot",
|
"name": "paarrot",
|
||||||
"version": "4.11.148",
|
"version": "4.11.151",
|
||||||
"description": "Paarrot - A Matrix client based on Cinny",
|
"description": "Paarrot - A Matrix client based on Cinny",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18.0.0"
|
"node": ">=18.0.0"
|
||||||
|
|||||||
Reference in New Issue
Block a user