tildefriends/apps/cory/ssb/tf-message.js

import * as tfshared from './tf-shared.js';
import * as tf from './tf.js';

Vue.component('tf-message', {
	props: ['message', 'messages', 'votes'],
	data: function() { return { showRaw: false } },
	computed: {
		content_json: function() {
			try {
				return JSON.parse(this.message.content);
			} catch {
				return undefined;
			}
		},
		content_raw: function() {
			try {
				return JSON.stringify(JSON.parse(this.message.content), null, 2);
			} catch {
				return this.message.content;
			}
		},
		timestamp_relative: function() {
			var units = [
				{value: 1, name: 'milliseconds'},
				{value: 1000, name: 'seconds'},
				{value: 1000 * 60, name: 'minutes'},
				{value: 1000 * 60 * 60, name: 'hours'},
				{value: 1000 * 60 * 60 * 24, name: 'days'},
				{value: 1000 * 60 * 60 * 24 * 7, name: 'weeks'},
				{value: 1000 * 60 * 60 * 24 * 30, name: 'months'},
				{value: 1000 * 60 * 60 * 24 * 365, name: 'years'},
			];
			var v = new Date().valueOf() - this.message.timestamp;
			var result = null;
			for (let unit of units) {
				if (v >= unit.value) {
					result = Math.round(v / unit.value) + ' ' + unit.name + ' ago';
				}
			}
			return result;
		},
	},
	methods: {
		markdown: tfshared.markdown,
		set_reply: function() {
			tf.g_data.reply_root = this.content_json.root || this.message.id;
			tf.g_data.reply_branch = this.message.id;
		},
		vote: function(event) {
			var reaction = event.srcElement.innerText;
			var message = this.message.id;
			if (confirm('Are you sure you want to react with ' + reaction + ' to ' + message + '?')) {
				window.parent.postMessage(
					{
						appendMessage: {
							type: 'vote',
							vote: {
								link: message,
								value: 1,
								expression: reaction,
							},
						},
					},
					'*');
			}
		},
		show_message: function() {
			window.parent.postMessage({
				action: 'setHash',
				hash: this.message.id,
			}, '*');
		},
		expand_image: function(event) {
			var div = document.createElement('div');
			div.style.left = 0;
			div.style.top = 0;
			div.style.width = '100%';
			div.style.height = '100%';
			div.style.position = 'fixed';
			div.style.background = '#000';
			div.style.zIndex = 100;
			div.style.display = 'grid';
			var img = document.createElement('img');
			img.src = event.srcElement.src;
			img.style.maxWidth = '100%';
			img.style.maxHeight = '100%';
			img.style.display = 'block';
			img.style.margin = 'auto';
			img.style.objectFit = 'contain';
			img.style.width = '100%';
			div.appendChild(img);
			function image_close(event) {
				document.body.removeChild(div);
				window.removeEventListener('keydown', image_close);
			}
			div.onclick = image_close;
			window.addEventListener('keydown', image_close);
			document.body.appendChild(div);
		},
	},
	template: `<md-app class="md-elevation-8" style="margin: 1em" v-if="!content_json || ['pub', 'vote'].indexOf(content_json.type) == -1">
<md-app-toolbar>
	<h3>
		<md-button class="md-icon-button md-dense" @click="show_message">
			<md-icon>percent</md-icon>
		</md-button>
		<tf-user :id="message.author" v-if="message.author"></tf-user>
	</h3>
	<template v-if="message.author">
		<div style="font-size: x-small">
			{{timestamp_relative}}
			<md-tooltip style="height: auto">
				<div>{{new Date(message.timestamp)}}</div>
				<div>{{message.id}}</div>
			</md-tooltip>
		</div>
		<div class="md-toolbar-section-end">
			<md-menu>
				<md-switch v-model="showRaw"></md-switch>
				<md-tooltip>Show Raw Message</md-tooltip>
			</md-menu>
		</div>
	</template>
	<template v-else>
		<h3>Missing</h3>
	</template>
</md-app-toolbar>
<md-app-content>
	<template v-if="message.author">
		<div v-if="showRaw">
			<h1>{{message.id}}</h1>
			<pre style="word-wrap: break-all; white-space: pre-wrap">{{content_raw}}</pre>
		</div>
		<div v-else>
			<div v-if="content_json && content_json.type == 'post'">
				<div v-html="this.markdown(content_json.text)"></div>
				<span v-for="mention in content_json.mentions" v-if="mention.link && typeof(mention.link) == 'string' && mention.link.startsWith('&')">
					<a v-if="mention.type == 'application/tildefriends'" :href="'/' + mention.link + '/'" target="_top">{{mention.name}}</a>
					<div v-else-if="mention.name && mention.name.startsWith('audio:')">
						<audio controls style="height: 32px">
							<source :src="'/' + mention.link + '/view'"></source>
						</audio>
					</div>
					<img v-else class="md-elevation-4" style="margin: 4px; max-width: 320px; max-height: 240px" :src="'/' + mention.link + '/view'" v-on:click="expand_image"></img>
				</span>
			</div>
			<div v-else-if="content_json && content_json.type == 'tildefriends-app'">
				<div v-html="this.markdown(content_json.text)"></div>
				<md-button target="_top" :href="'/' + message.id + '/'">{{content_json.name || 'tildefriends-app'}}</md-button>
			</div>
			<div v-else-if="content_json && content_json.type == 'contact'"><tf-user :id="message.author"></tf-user> {{content_json.following ? '==&gt;' : '=/=&gt;'}} <tf-user :id="content_json.contact"></tf-user></div>
			<div v-else>{{message.content}}</div>
		</div>
	</template>
	<template v-else>
		{{message.id}}
	</template>
	<tf-message v-for="sub_message in (message.children || [])" v-bind:message="sub_message" v-bind:messages="messages" v-bind:votes="votes" v-bind:key="sub_message.id"></tf-message>
	<md-chip md-clickable v-for="v in Object.keys(votes[message.id] || {})" v-bind:key="v" @click="vote">
		{{v + (votes[message.id][v].length > 1 ? ' (' + votes[message.id][v].length + ')' : '')}}
		<md-tooltip style="height: auto; background-color: #000; border: 1px solid #fff">
			<tf-user v-for="vote in votes[message.id][v]" :id="vote.author" :key="vote.author"></tf-user>
		</md-tooltip>
	</md-chip>
	<md-card-actions v-if="message.author">
		<md-button class="md-icon-button" @click="set_reply">
			<md-icon>reply</md-icon>
		</md-button>
		<md-menu>
			<md-menu-content>
				<md-menu-item @click="vote">Like</md-menu-item>
			</md-menu-content>
			<md-button class="md-icon-button" md-menu-trigger>
				<md-icon>thumb_up</md-icon>
			</md-button>
		</md-menu>
	</md-card-actions>
</md-app-content>
</md-app>`,
});