forked from cory/tildefriends
Remove the old SSB client interface.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4042 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
@@ -1,181 +0,0 @@
|
||||
import * as tfrpc from '/static/tfrpc.js';
|
||||
import * as tfshared from './tf-shared.js';
|
||||
import * as tf from './tf.js';
|
||||
import * as emojis from './emojis.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(emoji) {
|
||||
let reaction = emoji.emoji;
|
||||
var message = this.message.id;
|
||||
if (confirm('Are you sure you want to react with ' + reaction + ' to ' + message + '?')) {
|
||||
tfrpc.rpc.appendMessage({
|
||||
type: 'vote',
|
||||
vote: {
|
||||
link: message,
|
||||
value: 1,
|
||||
expression: reaction,
|
||||
},
|
||||
}).catch(function(error) {
|
||||
alert(error?.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
show_emoji_picker: function(event) {
|
||||
let self = this;
|
||||
emojis.picker(x => self.vote(x), event.srcElement);
|
||||
},
|
||||
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 ? '==>' : '=/=>'}} <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-button class="md-icon-button" @click="show_emoji_picker">
|
||||
<md-icon>thumb_up</md-icon>
|
||||
</md-button>
|
||||
</md-menu>
|
||||
</md-card-actions>
|
||||
</md-app-content>
|
||||
</md-app>`,
|
||||
});
|
||||
Reference in New Issue
Block a user