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 moment from 'moment'; import * as FileType from 'file-type'; import ElementsUtil from './require/elements-util.js'; import { Message, ShouldNeverHappenError } from '../data-types'; import ClientController from '../client-controller'; import Q from '../q-module'; import createImageOverlay from './overlay-image'; import createImageContextMenu from './context-menu-img'; export default function createImageResourceMessageContinued(document: Document, q: Q, server: ClientController, message: Message): HTMLElement { if (!message.resourceId || !message.resourcePreviewId || !message.resourceName) { throw new ShouldNeverHappenError('Message is not a resource message'); } let element = q.create({ class: 'message continued', 'meta-id': message.id, 'meta-member-id': message.member.id, 'meta-server-id': server.id, content: [ { class: 'timestamp', content: moment(message.sent).format('HH:mm') }, { class: 'right', content: [ { class: 'content image', style: `width: ${message.previewWidth}px; height: ${message.previewHeight}px;`, content: { tag: 'img', src: './img/loading.svg', alt: message.resourceName } }, // src will be replaced later { class: 'content text', content: ElementsUtil.parseMessageText(message.text ?? '') } ] } ] }) as HTMLElement; q.$$$(element, '.content.image').addEventListener('click', () => { document.body.appendChild(createImageOverlay(document, q, server, message.resourceId as string, message.resourceName as string)); }); (async () => { try { let buffer = await server.fetchResource(message.resourcePreviewId as string); let src = await ElementsUtil.getImageBufferSrc(buffer); (q.$$$(element, '.content.image img') as HTMLImageElement).src = src; let { mime, ext } = (await FileType.fromBuffer(buffer)) ?? { mime: null, ext: null }; if (mime === null || ext === null) throw new Error('unable to get mime/ext'); q.$$$(element, '.content.image').addEventListener('contextmenu', (e) => { let contextMenu = createImageContextMenu(document, q, server, message.resourceName as string, buffer, mime as string, ext as string, true); document.body.appendChild(contextMenu); let relativeTo = { x: e.pageX, y: e.pageY }; ElementsUtil.alignContextElement(contextMenu, relativeTo, { top: 'centerY', left: 'right' }); }); } catch (e) { LOG.error('error loading preview image', e); (q.$$$(element, '.content.image img') as HTMLImageElement).src = './img/error.png'; } })(); return element; }