michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add context menu to popup image

Browse Source
This commit is contained in:
Michael Peters 2021-12-06 23:19:37 -06:00
parent 82546300cc
commit 72b8ad6281
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/client/webapp/elements/overlays/overlay-image.tsx
View File

@ -3,12 +3,15 @@ const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);
import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
import * as FileType from 'file-type';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import CombinedGuild from '../../guild-combined';
import ElementsUtil from '../require/elements-util';
import { Resource } from '../../data-types';
import Button from '../components/button';
import DownloadButton from '../components/button-download';
import createImageContextMenu from '../context-menu-img';
import Q from '../../q-module';
type ButtonText = 'Loading...' | 'Error' | 'Save' | 'Downloading...' | 'Writing...' | 'Reveal in Explorer' | 'Try Again';
@ -24,6 +27,8 @@ const ImageOverlay: FC<ImageOverlayProps> = (props: ImageOverlayProps) => {
const [ resource, setResource ] = useState<Resource | null>(null);
const [ resourceImgSrc, setResourceImgSrc ] = useState<string>('./img/loading.svg');
const [ resourceErr, setResourceErr ] = useState<boolean>(false);
const [ mime, setMime ] = useState<string | null>(null);
const [ ext, setExt ] = useState<string | null>(null);
useEffect(() => {
(async () => {
@ -32,21 +37,34 @@ const ImageOverlay: FC<ImageOverlayProps> = (props: ImageOverlayProps) => {
setResource(resource);
const resourceImgSrc = await ElementsUtil.getImageBufferSrc(resource.data);
setResourceImgSrc(resourceImgSrc);
const { mime, ext } = (await FileType.fromBuffer(resource.data)) ?? { mime: null, ext: null };
if (mime === null || ext === null) throw new Error('unable to get mime/ext');
setMime(mime);
setExt(ext);
} catch (e) {
LOG.error('unable to load image for overlay', e);
setResource(null);
setResourceImgSrc('./img/error.png');
setResourceErr(true);
return;
}
})();
});
const onImageContextMenu = (e: React.MouseEvent) => {
// TODO: This should be in react!
if (!resource) return;
const contextMenu = createImageContextMenu(document, new Q(document), guild, resourceName, resource.data, mime as string, ext as string, false);
document.body.appendChild(contextMenu);
const relativeTo = { x: e.pageX, y: e.pageY };
ElementsUtil.alignContextElement(contextMenu, relativeTo, { top: 'centerY', left: 'right' });
};
const sizeText = useMemo(() => resource ? ElementsUtil.humanSize(resource.data.length) : 'Loading Size...', [ resource ]);
return (
<div className="content popup-image" onClick={(e) => { e.stopPropagation(); /* prevent overlay click */ }}>
<img src={resourceImgSrc} alt={resourceName} title={resourceName}></img>
<img src={resourceImgSrc} alt={resourceName} title={resourceName} onContextMenu={onImageContextMenu}></img>
<div className="download">
<div className="info">
<div className="name">{resourceName}</div>