cordis/client/webapp/elements/message-image-resource-continued.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 moment from 'moment';
import * as FileType from 'file-type';

import Elements from '../elements';

import ElementsUtil from './require/elements-util.js';

import { $, $$, $$$, $$$$ } from './require/q-module';
import { Message, ShouldNeverHappenError } from '../data-types';
import IState from './require/elements-state';
import ClientController from '../client-controller';

export default function createImageResourceMessageContinued(state: IState, server: ClientController, message: Message): HTMLElement {
    const { document } = state;
    $.setDocument(document);

    if (!message.resourceId || !message.resourcePreviewId || !message.resourceName) {
        throw new ShouldNeverHappenError('Message is not a resource message');
    }

    // Scale down the image to the proper width/height
    // max width is 400px, max height is 300px
    if (message.resourceWidth && message.resourceHeight) {
        if (message.resourceWidth > 400) {
            let scale = 400 / message.resourceWidth;
            message.resourceWidth *= scale;
            message.resourceHeight *= scale;
        }
        if (message.resourceHeight > 300) {
            let scale = 300 / message.resourceHeight;
            message.resourceWidth *= scale;
            message.resourceHeight *= scale;
        }
        message.resourceWidth = Math.floor(message.resourceWidth);
        message.resourceHeight = Math.floor(message.resourceHeight);
    }
    
    let element = $.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.resourceWidth}px; height: ${message.resourceHeight}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;
    $$$(element, '.content.image').addEventListener('click', () => {
        document.body.appendChild(Elements.createImageOverlay(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);
            ($$$(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');

            $$$(element, '.content.image').addEventListener('contextmenu', (e) => {
                let contextMenu = Elements.createImageContextMenu(message.resourceName as string, server, 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);
            ($$$(element, '.content.image img') as HTMLImageElement).src = './img/error.png';
        }
    })();
    return element;
}