cordis/client/webapp/elements/msg-res.ts

import * as moment from 'moment';
import { Message, Member } from '../data-types';
import CombinedGuild from '../guild-combined';
import Q from '../q-module';

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

class ShouldNeverHappenError extends Error {
	constructor(...args: any[]) {
		super(...args);
		this.name = 'ShouldNeverHappenError';
	}
}

export default function createResourceMessage(q: Q, guild: CombinedGuild, message: Message): HTMLElement {
	if (!message.resourceId || !message.resourceName) {
		throw new ShouldNeverHappenError('Message is not a resource message');
	}

	let memberInfo: {
		roleColor: string | null,
		displayName: string,
		avatarResourceId: string | null
	};
	if (message.member instanceof Member) {
		memberInfo = {
			roleColor: message.member.roleColor,
			displayName: message.member.displayName,
			avatarResourceId: message.member.avatarResourceId
		};
	} else {
		memberInfo = {
			roleColor: null,
			displayName: 'Unknown Member',
			avatarResourceId: null
		};
	}

	let nameStyle = memberInfo.roleColor ? 'color: ' + memberInfo.roleColor : '';
	let element = q.create({ class: 'message', 'meta-id': message.id, 'meta-member-id': message.member.id, 'meta-guild-id': guild.id, content: [
		{ class: 'member-avatar', content: { tag: 'img', src: './img/loading.svg', alt: memberInfo.displayName } },
		{ class: 'right', content: [
			{ class: 'header', content: [
				{ class: 'member-name', style: nameStyle, content: memberInfo.displayName },
				{ class: 'timestamp', content: moment(message.sent).calendar(ElementsUtil.calendarFormats) }
			] },
			{ class: 'content resource', content: [
				{ tag: 'img', class: 'icon', src: './img/file-icon.png' }, // TODO: SVG based on content-type
				{ class: 'text', content: [
					{ class: 'filename', content: message.resourceName },
					{ class: 'download-status', content: 'Click to Download' },
				] }
			] },
			{ class: 'content text', content: ElementsUtil.parseMessageText(message.text ?? '') }
		] }
	] }) as HTMLElement;
	q.$$$(element, '.resource').addEventListener('click', ElementsUtil.createDownloadListener({
		guild: guild, resourceId: message.resourceId, resourceName: message.resourceName,
		downloadStartFunc: () => {
			q.$$$(element, '.resource .download-status').innerText = 'Downloading...';
		},
		downloadFailFunc: async () => {
			q.$$$(element, '.resource .download-status').innerText = 'Error Downloading. Click to Try Again';
			await ElementsUtil.shakeElement(q.$$$(element, '.resource .download-status'), 400);
		},
		writeStartFunc: () => {
			q.$$$(element, '.resource .download-status').innerText = 'Writing...';
		},
		writeFailFunc: async () => {
			q.$$$(element, '.resource .download-status').innerText = 'Error Writing. Click to Try Again';
			await ElementsUtil.shakeElement(q.$$$(element, '.resource .download-status'), 400);
		},
		successFunc: (_downloadPath: string) => {
			q.$$$(element, '.resource .download-status').innerText = 'Click to Open in Explorer';
		}
	}));
	(async () => {
		(q.$$$(element, '.member-avatar img') as HTMLImageElement).src =
			await ElementsUtil.getImageBufferFromResourceFailSoftly(guild, memberInfo.avatarResourceId);
	})();
	return element;
}