cordis/client/webapp/elements/overlay-image.ts

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

import * as FileType from 'file-type'

import BaseElements from './require/base-elements';
import ElementsUtil from './require/elements-util';

import ClientController from '../client-controller';
import Q from '../q-module';
import createImageContextMenu from './context-menu-img';

export default function createImageOverlay(document: Document, q: Q, server: ClientController, resourceId: string, resourceName: string): HTMLElement {
	let element = BaseElements.createOverlay(document, { class: 'content popup-image', content: [
		{ tag: 'img', src: './img/loading.svg', alt: resourceName, title: resourceName },
		{ class: 'download', content: [
			{ class: 'info', content: [
				{ class: 'name', content: resourceName },
				{ class: 'size', content: 'Loading Size...' }
			] },
			{ class: 'button', content: 'Loading...' }
		] }
	] });

	(async () => {
		try {
			let resourceBuff = await server.fetchResource(resourceId);
			let src = await ElementsUtil.getImageBufferSrc(resourceBuff);
			(q.$$$(element, '.content img') as HTMLImageElement).src = src;
			q.$$$(element, '.download .size').innerText = ElementsUtil.humanSize(resourceBuff.length);

			let { mime, ext } = (await FileType.fromBuffer(resourceBuff)) ?? { mime: null, ext: null };
			if (mime === null || ext === null) throw new Error('unable to get mime/ext');

			q.$$$(element, '.content img').addEventListener('contextmenu', (e) => {
				let contextMenu = createImageContextMenu(document, q, server, resourceName, resourceBuff, mime as string, ext as string, false);
				document.body.appendChild(contextMenu);
				let relativeTo = { x: e.pageX, y: e.pageY };
				ElementsUtil.alignContextElement(contextMenu, relativeTo, { top: 'centerY', left: 'right' });
			});

			q.$$$(element, '.button').innerText = 'Save';
			q.$$$(element, '.button').addEventListener('click', ElementsUtil.createDownloadListener({
				downloadBuff: resourceBuff,
				resourceName: resourceName,
				downloadStartFunc: () => {
					q.$$$(element, '.button').innerText = 'Downloading...';
				},
				downloadFailFunc: async () => {
					q.$$$(element, '.button').innerText = 'Try Again';
					await ElementsUtil.shakeElement(q.$$$(element, '.button'), 400);
				},
				writeStartFunc: () => {
					q.$$$(element, '.button').innerText = 'Writing...';
				},
				writeFailFunc: async () => {
					q.$$$(element, '.button').innerText = 'Try Again';
					await ElementsUtil.shakeElement(q.$$$(element, '.button'), 400);
				},
				successFunc: (_downloadPath: string) => {
					q.$$$(element, '.button').innerText = 'Reveal in Explorer';
				}
			}));
		} catch (e) {
			LOG.error('error loading overlay image', e);
			(q.$$$(element, '.content img') as HTMLImageElement).src = './img/error.png';
			q.$$$(element, '.download .size').innerText = 'err';
			q.$$$(element, '.button').innerText = 'Error';
		}
	})();
	return element;
}