kittyfangs
/
fchat-rising
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

0.2.19 - Lots of polish for stable release.

This commit is contained in:
MayaWolf 2018-04-08 02:22:32 +02:00
parent 4a7d97f17a
commit 79d1ee4f48
63 changed files with 1159 additions and 673 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2017 F-List Copyright (c) 2018 F-List
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

6
bbcode/Editor.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="bbcode-editor"> <div class="bbcode-editor">
<slot></slot> <slot></slot>
<a tabindex="0" class="btn btn-secondary bbcode-btn btn-sm" role="button" @click="showToolbar = true" @blur="showToolbar = false" <a tabindex="0" class="btn btn-light bbcode-btn btn-sm" role="button" @click="showToolbar = true" @blur="showToolbar = false"
style="border-bottom-left-radius:0;border-bottom-right-radius:0"> style="border-bottom-left-radius:0;border-bottom-right-radius:0">
<i class="fa fa-code"></i> <i class="fa fa-code"></i>
</a> </a>
<div class="bbcode-toolbar btn-toolbar" role="toolbar" :style="showToolbar ? 'display:flex' : ''" @mousedown.stop.prevent> <div class="bbcode-toolbar btn-toolbar" role="toolbar" :style="showToolbar ? 'display:flex' : ''" @mousedown.stop.prevent>
<div class="btn-group" style="flex-wrap:wrap"> <div class="btn-group" style="flex-wrap:wrap">
<div class="btn btn-secondary btn-sm" v-for="button in buttons" :title="button.title" @click.prevent.stop="apply(button)"> <div class="btn btn-light btn-sm" v-for="button in buttons" :title="button.title" @click.prevent.stop="apply(button)">
<i :class="(button.class ? button.class : 'fa ') + button.icon"></i> <i :class="(button.class ? button.class : 'fa ') + button.icon"></i>
</div> </div>
<div @click="previewBBCode" class="btn btn-secondary btn-sm" :class="preview ? 'active' : ''" <div @click="previewBBCode" class="btn btn-light btn-sm" :class="preview ? 'active' : ''"
:title="preview ? 'Close Preview' : 'Preview'"> :title="preview ? 'Close Preview' : 'Preview'">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
</div> </div>

4
bbcode/core.ts
View File

@ -26,8 +26,8 @@ export class CoreBBCodeParser extends BBCodeParser {
this.addTag(new BBCodeSimpleTag('u', 'u')); this.addTag(new BBCodeSimpleTag('u', 'u'));
this.addTag(new BBCodeSimpleTag('s', 'del')); this.addTag(new BBCodeSimpleTag('s', 'del'));
this.addTag(new BBCodeSimpleTag('noparse', 'span', [], [])); this.addTag(new BBCodeSimpleTag('noparse', 'span', [], []));
this.addTag(new BBCodeSimpleTag('sub', 'sub', [], ['b', 'i', 'u', 's'])); this.addTag(new BBCodeSimpleTag('sub', 'sub', [], ['b', 'i', 'u', 's', 'color']));
this.addTag(new BBCodeSimpleTag('sup', 'sup', [], ['b', 'i', 'u', 's'])); this.addTag(new BBCodeSimpleTag('sup', 'sup', [], ['b', 'i', 'u', 's', 'color']));
this.addTag(new BBCodeCustomTag('color', (parser, parent, param) => { this.addTag(new BBCodeCustomTag('color', (parser, parent, param) => {
const cregex = /^(red|blue|white|yellow|pink|gray|green|orange|purple|black|brown|cyan)$/; const cregex = /^(red|blue|white|yellow|pink|gray|green|orange|purple|black|brown|cyan)$/;
if(!cregex.test(param)) { if(!cregex.test(param)) {

4
bbcode/standard.ts
View File

@ -181,8 +181,8 @@ export class StandardBBCodeParser extends CoreBBCodeParser {
el.href = '#'; el.href = '#';
el.dataset.inlineId = param; el.dataset.inlineId = param;
el.onclick = () => { el.onclick = () => {
Array.from(document.getElementsByClassName('unloadedInline')).forEach((e) => { (<HTMLElement[]>Array.prototype.slice.call(document.getElementsByClassName('unloadedInline'))).forEach((e) => {
const showInline = parser.inlines![(<HTMLElement>e).dataset.inlineId!]; const showInline = parser.inlines![e.dataset.inlineId!];
if(typeof showInline !== 'object') return; if(typeof showInline !== 'object') return;
e.parentElement!.replaceChild(parser.createInline(showInline), e); e.parentElement!.replaceChild(parser.createInline(showInline), e);
}); });

14
chat/ChannelList.vue
View File

@ -3,9 +3,12 @@
<div style="display:flex;flex-direction:column"> <div style="display:flex;flex-direction:column">
<tabs style="flex-shrink:0" :tabs="[l('channelList.public'), l('channelList.private')]" v-model="tab"></tabs> <tabs style="flex-shrink:0" :tabs="[l('channelList.public'), l('channelList.private')]" v-model="tab"></tabs>
<div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: column">
<div style="display:flex; padding: 10px 0; flex-shrink: 0;"> <div class="input-group" style="padding:10px 0;flex-shrink:0">
<div class="input-group-prepend">
<div class="input-group-text"><span class="fas fa-search"></span></div>
</div>
<input class="form-control" style="flex:1; margin-right:10px;" v-model="filter" :placeholder="l('filter')"/> <input class="form-control" style="flex:1; margin-right:10px;" v-model="filter" :placeholder="l('filter')"/>
<a href="#" @click.prevent="sortCount = !sortCount"> <a href="#" @click.prevent="sortCount = !sortCount" style="align-self:center">
<span class="fa fa-2x" :class="{'fa-sort-amount-down': sortCount, 'fa-sort-alpha-down': !sortCount}"></span> <span class="fa fa-2x" :class="{'fa-sort-amount-down': sortCount, 'fa-sort-alpha-down': !sortCount}"></span>
</a> </a>
</div> </div>
@ -25,8 +28,11 @@
</label> </label>
</div> </div>
</div> </div>
<div style="display:flex; padding: 10px 0; flex-shrink: 0;"> <div class="input-group" style="padding:10px 0;flex-shrink:0">
<input class="form-control" style="flex:1; margin-right:10px;" v-model="createName" <div class="input-group-prepend">
<div class="input-group-text"><span class="fas fa-plus"></span></div>
</div>
<input class="form-control" style="flex:1;margin-right:10px" v-model="createName"
:placeholder="l('channelList.createName')"/> :placeholder="l('channelList.createName')"/>
<button class="btn btn-primary" @click="create">{{l('channelList.create')}}</button> <button class="btn btn-primary" @click="create">{{l('channelList.create')}}</button>
</div> </div>

35
chat/Chat.vue
View File

@ -2,7 +2,12 @@
<div style="display:flex; flex-direction: column; height:100%; justify-content: center"> <div style="display:flex; flex-direction: column; height:100%; justify-content: center">
<div class="card bg-light" style="width:400px;max-width:100%;margin:0 auto" v-if="!connected"> <div class="card bg-light" style="width:400px;max-width:100%;margin:0 auto" v-if="!connected">
<div class="alert alert-danger" v-show="error">{{error}}</div> <div class="alert alert-danger" v-show="error">{{error}}</div>
<h3 class="card-header" style="margin-top:0">{{l('title')}}</h3> <h3 class="card-header" style="margin-top:0;display:flex">
{{l('title')}}
<a href="#" @click.prevent="$refs['logsDialog'].show()" class="btn" style="flex:1;text-align:right">
<span class="fa fa-file-alt"></span> <span class="btn-text">{{l('logs.title')}}</span>
</a>
</h3>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">{{l('login.selectCharacter')}}</h4> <h4 class="card-title">{{l('login.selectCharacter')}}</h4>
<select v-model="selectedCharacter" class="form-control custom-select"> <select v-model="selectedCharacter" class="form-control custom-select">
@ -21,6 +26,8 @@
<div class="alert alert-danger" v-show="error">{{error}}</div> <div class="alert alert-danger" v-show="error">{{error}}</div>
{{l('chat.disconnected')}} {{l('chat.disconnected')}}
</modal> </modal>
<logs ref="logsDialog"></logs>
<div v-if="version && !connected" style="position:absolute;bottom:0;right:0">{{version}}</div>
</div> </div>
</template> </template>
@ -37,6 +44,7 @@
import Conversations from './conversations'; import Conversations from './conversations';
import core from './core'; import core from './core';
import l from './localize'; import l from './localize';
import Logs from './Logs.vue';
type BBCodeNode = Node & {bbcodeTag?: string, bbcodeParam?: string, bbcodeHide?: boolean}; type BBCodeNode = Node & {bbcodeTag?: string, bbcodeParam?: string, bbcodeHide?: boolean};
@ -71,7 +79,7 @@
} }
@Component({ @Component({
components: {chat: ChatView, modal: Modal} components: {chat: ChatView, modal: Modal, logs: Logs}
}) })
export default class Chat extends Vue { export default class Chat extends Vue {
@Prop({required: true}) @Prop({required: true})
@ -79,6 +87,8 @@
@Prop({required: true}) @Prop({required: true})
readonly defaultCharacter!: string | undefined; readonly defaultCharacter!: string | undefined;
selectedCharacter = this.defaultCharacter || this.ownCharacters[0]; //tslint:disable-line:strict-boolean-expressions selectedCharacter = this.defaultCharacter || this.ownCharacters[0]; //tslint:disable-line:strict-boolean-expressions
@Prop()
readonly version?: string;
error = ''; error = '';
connecting = false; connecting = false;
connected = false; connected = false;
@ -86,11 +96,7 @@
copyPlain = false; copyPlain = false;
mounted(): void { mounted(): void {
window.addEventListener('beforeunload', (e) => { document.title = l('title', core.connection.character);
if(!this.connected) return;
e.returnValue = l('chat.confirmLeave');
return l('chat.confirmLeave');
});
document.addEventListener('copy', ((e: ClipboardEvent) => { document.addEventListener('copy', ((e: ClipboardEvent) => {
if(this.copyPlain) { if(this.copyPlain) {
this.copyPlain = false; this.copyPlain = false;
@ -111,6 +117,7 @@
if(getKey(e) === Keys.KeyC && e.shiftKey && (e.ctrlKey || e.metaKey) && !e.altKey) { if(getKey(e) === Keys.KeyC && e.shiftKey && (e.ctrlKey || e.metaKey) && !e.altKey) {
this.copyPlain = true; this.copyPlain = true;
document.execCommand('copy'); document.execCommand('copy');
e.preventDefault();
} }
}); });
core.register('characters', Characters(core.connection)); core.register('characters', Characters(core.connection));
@ -121,6 +128,7 @@
if(this.connected) core.notifications.playSound('logout'); if(this.connected) core.notifications.playSound('logout');
this.connected = false; this.connected = false;
this.connecting = false; this.connecting = false;
document.title = l('title');
}); });
core.connection.onEvent('connecting', async() => { core.connection.onEvent('connecting', async() => {
this.connecting = true; this.connecting = true;
@ -132,11 +140,14 @@
this.connecting = false; this.connecting = false;
this.connected = true; this.connected = true;
core.notifications.playSound('login'); core.notifications.playSound('login');
document.title = l('title.connected', core.connection.character);
});
core.watch(() => core.conversations.hasNew, (hasNew) => {
document.title = (hasNew ? '💬 ' : '') + l(core.connection.isOpen ? 'title.connected' : 'title', core.connection.character);
}); });
core.connection.onError((e) => { core.connection.onError((e) => {
this.error = errorToString(e); this.error = errorToString(e);
this.connecting = false; this.connecting = false;
this.connected = false;
}); });
} }
@ -147,9 +158,11 @@
connect(): void { connect(): void {
this.connecting = true; this.connecting = true;
core.connection.connect(this.selectedCharacter).catch((e) => { core.connection.connect(this.selectedCharacter).catch((e: Error) => {
if((<Error & {request?: object}>e).request !== undefined) this.error = l('login.connectError'); //catch axios network errors if((<Error & {request?: object}>e).request !== undefined) {//catch axios network errors
else throw e; this.error = l('login.connectError', e.message);
this.connecting = false;
} else throw e;
}); });
} }
} }

43
chat/ChatView.vue
View File

@ -5,20 +5,20 @@
<sidebar id="sidebar" :label="l('chat.menu')" icon="fa-bars"> <sidebar id="sidebar" :label="l('chat.menu')" icon="fa-bars">
<img :src="characterImage(ownCharacter.name)" v-if="showAvatars" style="float:left;margin-right:5px;width:60px"/> <img :src="characterImage(ownCharacter.name)" v-if="showAvatars" style="float:left;margin-right:5px;width:60px"/>
<a href="#" target="_blank" :href="ownCharacterLink" class="btn" style="margin-right:5px">{{ownCharacter.name}}</a> <a href="#" target="_blank" :href="ownCharacterLink" class="btn" style="margin-right:5px">{{ownCharacter.name}}</a>
<a href="#" @click.prevent="logOut" class="btn"><i class="fa fa-sign-out-alt"></i>{{l('chat.logout')}}</a><br/> <a href="#" @click.prevent="logOut" class="btn"><i class="fas fa-sign-out-alt"></i>{{l('chat.logout')}}</a><br/>
<div> <div>
{{l('chat.status')}} {{l('chat.status')}}
<a href="#" @click.prevent="$refs['statusDialog'].show()" class="btn"> <a href="#" @click.prevent="$refs['statusDialog'].show()" class="btn">
<span class="fa fa-fw" :class="getStatusIcon(ownCharacter.status)"></span>{{l('status.' + ownCharacter.status)}} <span class="fas fa-fw" :class="getStatusIcon(ownCharacter.status)"></span>{{l('status.' + ownCharacter.status)}}
</a> </a>
</div> </div>
<div style="clear:both"> <div style="clear:both">
<a href="#" @click.prevent="$refs['searchDialog'].show()" class="btn"><span class="fa fa-search"></span> <a href="#" @click.prevent="$refs['searchDialog'].show()" class="btn"><span class="fas fa-search"></span>
{{l('characterSearch.open')}}</a> {{l('characterSearch.open')}}</a>
</div> </div>
<div><a href="#" @click.prevent="$refs['settingsDialog'].show()" class="btn"><span class="fa fa-cog"></span> <div><a href="#" @click.prevent="$refs['settingsDialog'].show()" class="btn"><span class="fas fa-cog"></span>
{{l('settings.open')}}</a></div> {{l('settings.open')}}</a></div>
<div><a href="#" @click.prevent="$refs['recentDialog'].show()" class="btn"><span class="fa fa-history"></span> <div><a href="#" @click.prevent="$refs['recentDialog'].show()" class="btn"><span class="fas fa-history"></span>
{{l('chat.recentConversations')}}</a></div> {{l('chat.recentConversations')}}</a></div>
<div class="list-group conversation-nav"> <div class="list-group conversation-nav">
<a :class="getClasses(conversations.consoleTab)" href="#" @click.prevent="conversations.consoleTab.show()" <a :class="getClasses(conversations.consoleTab)" href="#" @click.prevent="conversations.consoleTab.show()"
@ -34,25 +34,25 @@
<img :src="characterImage(conversation.character.name)" v-if="showAvatars"/> <img :src="characterImage(conversation.character.name)" v-if="showAvatars"/>
<div class="name"> <div class="name">
<span>{{conversation.character.name}}</span> <span>{{conversation.character.name}}</span>
<div style="text-align:right;line-height:0"> <div style="line-height:0;display:flex">
<span class="fas" <span class="fas fa-reply" v-show="needsReply(conversation)"></span><span class="fas"
:class="{'fa-comment-dots': conversation.typingStatus == 'typing', 'fa-comment': conversation.typingStatus == 'paused'}" :class="{'fa-comment-dots': conversation.typingStatus == 'typing', 'fa-comment': conversation.typingStatus == 'paused'}"
></span><span class="fa fa-reply" v-show="needsReply(conversation)"></span> ></span><span style="flex:1"></span>
<span class="pin fa fa-thumbtack" :class="{'active': conversation.isPinned}" @mousedown.prevent <span class="pin fas fa-thumbtack" :class="{'active': conversation.isPinned}" @mousedown.prevent
@click.stop="conversation.isPinned = !conversation.isPinned" :aria-label="l('chat.pinTab')"></span> @click.stop="conversation.isPinned = !conversation.isPinned" :aria-label="l('chat.pinTab')"></span>
<span class="fa fa-times leave" @click.stop="conversation.close()" :aria-label="l('chat.closeTab')"></span> <span class="fas fa-times leave" @click.stop="conversation.close()" :aria-label="l('chat.closeTab')"></span>
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<a href="#" @click.prevent="$refs['channelsDialog'].show()" class="btn"><span class="fa fa-list"></span> <a href="#" @click.prevent="$refs['channelsDialog'].show()" class="btn"><span class="fas fa-list"></span>
{{l('chat.channels')}}</a> {{l('chat.channels')}}</a>
<div class="list-group conversation-nav" ref="channelConversations"> <div class="list-group conversation-nav" ref="channelConversations">
<a v-for="conversation in conversations.channelConversations" href="#" @click.prevent="conversation.show()" <a v-for="conversation in conversations.channelConversations" href="#" @click.prevent="conversation.show()"
:class="getClasses(conversation)" class="list-group-item list-group-item-action item-channel" :class="getClasses(conversation)" class="list-group-item list-group-item-action item-channel"
:key="conversation.key"><span class="name">{{conversation.name}}</span><span><span class="pin fa fa-thumbtack" :key="conversation.key"><span class="name">{{conversation.name}}</span><span><span class="pin fas fa-thumbtack"
:class="{'active': conversation.isPinned}" @click.stop="conversation.isPinned = !conversation.isPinned" :class="{'active': conversation.isPinned}" @click.stop="conversation.isPinned = !conversation.isPinned"
:aria-label="l('chat.pinTab')" @mousedown.prevent></span><span class="fa fa-times leave" :aria-label="l('chat.pinTab')" @mousedown.prevent></span><span class="fas fa-times leave"
@click.stop="conversation.close()" :aria-label="l('chat.closeTab')"></span></span> @click.stop="conversation.close()" :aria-label="l('chat.closeTab')"></span></span>
</a> </a>
</div> </div>
@ -61,7 +61,7 @@
<div id="quick-switcher" class="list-group"> <div id="quick-switcher" class="list-group">
<a :class="getClasses(conversations.consoleTab)" href="#" @click.prevent="conversations.consoleTab.show()" <a :class="getClasses(conversations.consoleTab)" href="#" @click.prevent="conversations.consoleTab.show()"
class="list-group-item list-group-item-action"> class="list-group-item list-group-item-action">
<span class="fa fa-home conversation-icon"></span> <span class="fas fa-home conversation-icon"></span>
{{conversations.consoleTab.name}} {{conversations.consoleTab.name}}
</a> </a>
<a v-for="conversation in conversations.privateConversations" href="#" @click.prevent="conversation.show()" <a v-for="conversation in conversations.privateConversations" href="#" @click.prevent="conversation.show()"
@ -72,7 +72,7 @@
</a> </a>
<a v-for="conversation in conversations.channelConversations" href="#" @click.prevent="conversation.show()" <a v-for="conversation in conversations.channelConversations" href="#" @click.prevent="conversation.show()"
:class="getClasses(conversation)" class="list-group-item list-group-item-action" :key="conversation.key"> :class="getClasses(conversation)" class="list-group-item list-group-item-action" :key="conversation.key">
<span class="fa fa-hashtag conversation-icon"></span> <span class="fas fa-hashtag conversation-icon"></span>
<div class="name">{{conversation.name}}</div> <div class="name">{{conversation.name}}</div>
</a> </a>
</div> </div>
@ -250,11 +250,9 @@
for(const selector of selectorList) for(const selector of selectorList)
sheet.insertRule(`${selector} { font-size: ${fontSize}px; }`, sheet.cssRules.length); sheet.insertRule(`${selector} { font-size: ${fontSize}px; }`, sheet.cssRules.length);
const lineHeightBase = 1.428571429; const lineHeight = 1.428571429;
const lineHeight = Math.floor(fontSize * 1.428571429); sheet.insertRule(`.form-control { line-height: ${lineHeight} }`, sheet.cssRules.length);
const formHeight = (lineHeight + (6 * 2) + 2); sheet.insertRule(`select.form-control { line-height: ${lineHeight} }`, sheet.cssRules.length);
sheet.insertRule(`.form-control { line-height: ${lineHeightBase}; height: ${formHeight}px; }`, sheet.cssRules.length);
sheet.insertRule(`select.form-control { line-height: ${lineHeightBase}; height: ${formHeight}px; }`, sheet.cssRules.length);
} }
logOut(): void { logOut(): void {
@ -307,12 +305,9 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.fa { .fas {
font-size: 16px; font-size: 16px;
padding: 0 3px; padding: 0 3px;
&:first-child {
padding-left: 0;
}
&:last-child { &:last-child {
padding-right: 0; padding-right: 0;
} }

2
chat/ConversationSettings.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<modal :action="l('conversationSettings.action', conversation.name)" @submit="submit" ref="dialog" @close="init()"> <modal :action="l('conversationSettings.action', conversation.name)" @submit="submit" ref="dialog" @close="init()" dialogClass="w-100">
<div class="form-group"> <div class="form-group">
<label class="control-label" :for="'notify' + conversation.key">{{l('conversationSettings.notify')}}</label> <label class="control-label" :for="'notify' + conversation.key">{{l('conversationSettings.notify')}}</label>
<select class="form-control" :id="'notify' + conversation.key" v-model="notify"> <select class="form-control" :id="'notify' + conversation.key" v-model="notify">

20
chat/ConversationView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="height:100%; display:flex; flex-direction:column; flex:1; margin:0 5px; position:relative;" id="conversation"> <div style="height:100%;display:flex;flex-direction:column;flex:1;margin:0 5px;position:relative" id="conversation">
<div style="display:flex" v-if="conversation.character" class="header"> <div style="display:flex" v-if="conversation.character" class="header">
<img :src="characterImage" style="height:60px;width:60px;margin-right:10px" v-if="settings.showAvatars"/> <img :src="characterImage" style="height:60px;width:60px;margin-right:10px" v-if="settings.showAvatars"/>
<div style="flex:1;position:relative;display:flex;flex-direction:column"> <div style="flex:1;position:relative;display:flex;flex-direction:column">
@ -58,7 +58,10 @@
<span class="fa fa-file-alt"></span> <span class="btn-text">{{l('logs.title')}}</span> <span class="fa fa-file-alt"></span> <span class="btn-text">{{l('logs.title')}}</span>
</a> </a>
</div> </div>
<div class="search" v-show="showSearch" style="position:relative"> <div class="search input-group" v-show="showSearch">
<div class="input-group-prepend">
<div class="input-group-text"><span class="fas fa-search"></span></div>
</div>
<input v-model="searchInput" @keydown.esc="showSearch = false; searchInput = ''" @keypress="lastSearchInput = Date.now()" <input v-model="searchInput" @keydown.esc="showSearch = false; searchInput = ''" @keypress="lastSearchInput = Date.now()"
:placeholder="l('chat.search')" ref="searchField" class="form-control"/> :placeholder="l('chat.search')" ref="searchField" class="form-control"/>
<a class="btn btn-sm btn-light" style="position:absolute;right:5px;top:50%;transform:translateY(-50%);line-height:0" <a class="btn btn-sm btn-light" style="position:absolute;right:5px;top:50%;transform:translateY(-50%);line-height:0"
@ -72,7 +75,7 @@
</message-view> </message-view>
<span v-if="message.sfc && message.sfc.action == 'report'" :key="message.id"> <span v-if="message.sfc && message.sfc.action == 'report'" :key="message.id">
<a :href="'https://www.f-list.net/fchat/getLog.php?log=' + message.sfc.logid" <a :href="'https://www.f-list.net/fchat/getLog.php?log=' + message.sfc.logid"
v-if="message.sfc.logid">{{l('events.report.viewLog')}}</a> v-if="message.sfc.logid" target="_blank">{{l('events.report.viewLog')}}</a>
<span v-else>{{l('events.report.noLog')}}</span> <span v-else>{{l('events.report.noLog')}}</span>
<span v-show="!message.sfc.confirmed"> <span v-show="!message.sfc.confirmed">
| <a href="#" @click.prevent="acceptReport(message.sfc)">{{l('events.report.confirm')}}</a> | <a href="#" @click.prevent="acceptReport(message.sfc)">{{l('events.report.confirm')}}</a>
@ -111,7 +114,7 @@
class="nav-link" @click.prevent="setSendingAds(true)">{{adsMode}}</a> class="nav-link" @click.prevent="setSendingAds(true)">{{adsMode}}</a>
</li> </li>
</ul> </ul>
<div class="btn btn-sm btn-primary" v-show="!settings.enterSend" @click="conversation.send()">{{l('chat.send')}}</div> <div class="btn btn-sm btn-primary" v-show="!settings.enterSend" @click="sendButton">{{l('chat.send')}}</div>
</div> </div>
</bbcode-editor> </bbcode-editor>
</div> </div>
@ -205,8 +208,13 @@
} }
get messages(): ReadonlyArray<Conversation.Message> { get messages(): ReadonlyArray<Conversation.Message> {
return this.search !== '' ? this.conversation.messages.filter((x) => x.text.indexOf(this.search) !== -1) if(this.search === '') return this.conversation.messages;
: this.conversation.messages; const filter = new RegExp(this.search.replace(/[^\w]/gi, '\\$&'), 'i');
return this.conversation.messages.filter((x) => filter.test(x.text));
}
sendButton(): void {
setImmediate(async() => this.conversation.send());
} }
@Watch('conversation') @Watch('conversation')

93
chat/Logs.vue
View File

@ -1,19 +1,28 @@
<template> <template>
<modal :buttons="false" ref="dialog" id="logs-dialog" :action="l('logs.title')" <modal :buttons="false" ref="dialog" id="logs-dialog" :action="l('logs.title')"
dialogClass="modal-lg w-100 modal-dialog-centered" @open="onOpen"> dialogClass="modal-lg w-100 modal-dialog-centered" @open="onOpen" @close="onClose">
<div class="form-group row" style="flex-shrink:0"> <div class="form-group row" style="flex-shrink:0">
<label class="col-2 col-form-label">{{l('logs.conversation')}}</label> <label for="character" class="col-sm-2 col-form-label">{{l('logs.character')}}</label>
<div class="col-10"> <div class="col-sm-10">
<select class="form-control" v-model="selectedCharacter" id="character" @change="loadCharacter">
<option value="">{{l('logs.selectCharacter')}}</option>
<option v-for="character in characters">{{character}}</option>
</select>
</div>
</div>
<div class="form-group row" style="flex-shrink:0">
<label class="col-sm-2 col-form-label">{{l('logs.conversation')}}</label>
<div class="col-sm-10">
<filterable-select v-model="selectedConversation" :options="conversations" :filterFunc="filterConversation" <filterable-select v-model="selectedConversation" :options="conversations" :filterFunc="filterConversation"
:placeholder="l('filter')" @input="loadMessages"> :placeholder="l('filter')">
<template slot-scope="s"> <template slot-scope="s">
{{s.option && ((s.option.key[0] == '#' ? '#' : '') + s.option.name) || l('logs.selectConversation')}}</template> {{s.option && ((s.option.key[0] == '#' ? '#' : '') + s.option.name) || l('logs.selectConversation')}}</template>
</filterable-select> </filterable-select>
</div> </div>
</div> </div>
<div class="form-group row" style="flex-shrink:0"> <div class="form-group row" style="flex-shrink:0">
<label for="date" class="col-2 col-form-label">{{l('logs.date')}}</label> <label for="date" class="col-sm-2 col-form-label">{{l('logs.date')}}</label>
<div class="col-8"> <div class="col-sm-8 col-10">
<select class="form-control" v-model="selectedDate" id="date" @change="loadMessages"> <select class="form-control" v-model="selectedDate" id="date" @change="loadMessages">
<option :value="null">{{l('logs.selectDate')}}</option> <option :value="null">{{l('logs.selectDate')}}</option>
<option v-for="date in dates" :value="date.getTime()">{{formatDate(date)}}</option> <option v-for="date in dates" :value="date.getTime()">{{formatDate(date)}}</option>
@ -24,10 +33,15 @@
class="fa fa-download"></span></button> class="fa fa-download"></span></button>
</div> </div>
</div> </div>
<div class="messages-both" style="overflow: auto"> <div class="messages-both" style="overflow: auto" ref="messages">
<message-view v-for="message in filteredMessages" :message="message" :key="message.id"></message-view> <message-view v-for="message in filteredMessages" :message="message" :key="message.id"></message-view>
</div> </div>
<input class="form-control" v-model="filter" :placeholder="l('filter')" v-show="messages" type="text"/> <div class="input-group" style="flex-shrink:0">
<div class="input-group-prepend">
<div class="input-group-text"><span class="fas fa-search"></span></div>
</div>
<input class="form-control" v-model="filter" :placeholder="l('filter')" v-show="messages" type="text"/>
</div>
</modal> </modal>
</template> </template>
@ -38,9 +52,10 @@
import CustomDialog from '../components/custom_dialog'; import CustomDialog from '../components/custom_dialog';
import FilterableSelect from '../components/FilterableSelect.vue'; import FilterableSelect from '../components/FilterableSelect.vue';
import Modal from '../components/Modal.vue'; import Modal from '../components/Modal.vue';
import {messageToString} from './common'; import {Keys} from '../keys';
import {getKey, messageToString} from './common';
import core from './core'; import core from './core';
import {Conversation} from './interfaces'; import {Conversation, Logs as LogInterface} from './interfaces';
import l from './localize'; import l from './localize';
import MessageView from './message_view'; import MessageView from './message_view';
@ -57,16 +72,19 @@
}) })
export default class Logs extends CustomDialog { export default class Logs extends CustomDialog {
//tslint:disable:no-null-keyword //tslint:disable:no-null-keyword
@Prop({required: true}) @Prop()
readonly conversation!: Conversation; readonly conversation?: Conversation;
selectedConversation: {key: string, name: string} | null = null; selectedConversation: LogInterface.Conversation | null = null;
dates: ReadonlyArray<Date> = []; dates: ReadonlyArray<Date> = [];
selectedDate: string | null = null; selectedDate: string | null = null;
conversations = core.logs.conversations.slice(); conversations: LogInterface.Conversation[] = [];
l = l; l = l;
filter = ''; filter = '';
messages: ReadonlyArray<Conversation.Message> = []; messages: ReadonlyArray<Conversation.Message> = [];
formatDate = formatDate; formatDate = formatDate;
keyDownListener?: (e: KeyboardEvent) => void;
characters: ReadonlyArray<string> = [];
selectedCharacter = core.connection.character;
get filteredMessages(): ReadonlyArray<Conversation.Message> { get filteredMessages(): ReadonlyArray<Conversation.Message> {
if(this.filter.length === 0) return this.messages; if(this.filter.length === 0) return this.messages;
@ -76,23 +94,35 @@
} }
async mounted(): Promise<void> { async mounted(): Promise<void> {
this.characters = await core.logs.getAvailableCharacters();
await this.loadCharacter();
return this.conversationChanged(); return this.conversationChanged();
} }
async loadCharacter(): Promise<void> {
if(this.selectedCharacter === '') return;
this.conversations = (await core.logs.getConversations(this.selectedCharacter)).slice();
this.conversations.sort((x, y) => (x.name < y.name ? -1 : (x.name > y.name ? 1 : 0)));
this.selectedConversation = null;
}
filterConversation(filter: RegExp, conversation: {key: string, name: string}): boolean { filterConversation(filter: RegExp, conversation: {key: string, name: string}): boolean {
return filter.test(conversation.name); return filter.test(conversation.name);
} }
@Watch('conversation') @Watch('conversation')
async conversationChanged(): Promise<void> { async conversationChanged(): Promise<void> {
if(this.conversation === undefined) return;
//tslint:disable-next-line:strict-boolean-expressions //tslint:disable-next-line:strict-boolean-expressions
this.selectedConversation = this.conversations.filter((x) => x.key === this.conversation.key)[0] || null; this.selectedConversation = this.conversations.filter((x) => x.key === this.conversation!.key)[0] || null;
} }
@Watch('selectedConversation') @Watch('selectedConversation')
async conversationSelected(): Promise<void> { async conversationSelected(): Promise<void> {
this.dates = this.selectedConversation === null ? [] : this.dates = this.selectedConversation === null ? [] :
(await core.logs.getLogDates(this.selectedConversation.key)).slice().reverse(); (await core.logs.getLogDates(this.selectedCharacter, this.selectedConversation.key)).slice().reverse();
this.selectedDate = null;
await this.loadMessages();
} }
download(file: string, logs: ReadonlyArray<Conversation.Message>): void { download(file: string, logs: ReadonlyArray<Conversation.Message>): void {
@ -114,16 +144,37 @@
} }
async onOpen(): Promise<void> { async onOpen(): Promise<void> {
this.conversations = core.logs.conversations.slice(); if(this.selectedCharacter !== '') {
this.conversations.sort((x, y) => (x.name < y.name ? -1 : (x.name > y.name ? 1 : 0))); this.conversations = (await core.logs.getConversations(this.selectedCharacter)).slice();
this.$forceUpdate(); this.conversations.sort((x, y) => (x.name < y.name ? -1 : (x.name > y.name ? 1 : 0)));
await this.loadMessages(); await this.loadMessages();
}
this.keyDownListener = (e) => {
if(getKey(e) === Keys.KeyA && (e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey) {
e.preventDefault();
const selection = document.getSelection();
selection.removeAllRanges();
if(this.messages.length > 0) {
const range = document.createRange();
const messages = this.$refs['messages'] as Node;
range.setStartBefore(messages.firstChild!);
range.setEndAfter(messages.lastChild!);
selection.addRange(range);
}
}
};
window.addEventListener('keydown', this.keyDownListener);
}
onClose(): void {
window.removeEventListener('keydown', this.keyDownListener!);
} }
async loadMessages(): Promise<ReadonlyArray<Conversation.Message>> { async loadMessages(): Promise<ReadonlyArray<Conversation.Message>> {
if(this.selectedDate === null || this.selectedConversation === null) if(this.selectedDate === null || this.selectedConversation === null)
return this.messages = []; return this.messages = [];
return this.messages = await core.logs.getLogs(this.selectedConversation.key, new Date(this.selectedDate)); return this.messages = await core.logs.getLogs(this.selectedCharacter, this.selectedConversation.key,
new Date(this.selectedDate));
} }
} }
</script> </script>

7
chat/ReportDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<modal :action="l('chat.report')" @submit.prevent="submit"> <modal :action="l('chat.report')" @submit.prevent="submit" :disabled="submitting">
<div class="alert alert-danger" v-show="error">{{error}}</div> <div class="alert alert-danger" v-show="error">{{error}}</div>
<h4>{{reporting}}</h4> <h4>{{reporting}}</h4>
<span v-show="!character">{{l('chat.report.channel.description')}}</span> <span v-show="!character">{{l('chat.report.channel.description')}}</span>
@ -31,6 +31,7 @@
text = ''; text = '';
l = l; l = l;
error = ''; error = '';
submitting = false;
mounted(): void { mounted(): void {
(<Element>this.$refs['caption']).appendChild(new BBCodeParser().parseEverything(l('chat.report.description'))); (<Element>this.$refs['caption']).appendChild(new BBCodeParser().parseEverything(l('chat.report.description')));
@ -74,6 +75,7 @@
}; };
if(this.character !== null) data.reportUser = this.character.name; if(this.character !== null) data.reportUser = this.character.name;
try { try {
this.submitting = true;
const report = <{log_id?: number}>(await core.connection.queryApi('report-submit.php', data)); const report = <{log_id?: number}>(await core.connection.queryApi('report-submit.php', data));
//tslint:disable-next-line:strict-boolean-expressions //tslint:disable-next-line:strict-boolean-expressions
if(!report.log_id) return; if(!report.log_id) return;
@ -81,7 +83,8 @@
this.hide(); this.hide();
} catch(e) { } catch(e) {
this.error = errorToString(e); this.error = errorToString(e);
return; } finally {
this.submitting = false;
} }
} }
} }

17
chat/SettingsView.vue
View File

@ -24,6 +24,12 @@
{{l('settings.showAvatars')}} {{l('settings.showAvatars')}}
</label> </label>
</div> </div>
<div class="form-group">
<label class="control-label" for="colorBookmarks">
<input type="checkbox" id="colorBookmarks" v-model="colorBookmarks"/>
{{l('settings.colorBookmarks')}}
</label>
</div>
<div class="form-group"> <div class="form-group">
<label class="control-label" for="animatedEicons"> <label class="control-label" for="animatedEicons">
<input type="checkbox" id="animatedEicons" v-model="animatedEicons"/> <input type="checkbox" id="animatedEicons" v-model="animatedEicons"/>
@ -124,9 +130,9 @@
import {Settings as SettingsInterface} from './interfaces'; import {Settings as SettingsInterface} from './interfaces';
import l from './localize'; import l from './localize';
@Component( @Component({
{components: {modal: Modal, tabs: Tabs}} components: {modal: Modal, tabs: Tabs}
) })
export default class SettingsView extends CustomDialog { export default class SettingsView extends CustomDialog {
l = l; l = l;
availableImports: ReadonlyArray<string> = []; availableImports: ReadonlyArray<string> = [];
@ -150,6 +156,7 @@
fontSize!: number; fontSize!: number;
showNeedsReply!: boolean; showNeedsReply!: boolean;
enterSend!: boolean; enterSend!: boolean;
colorBookmarks!: boolean;
constructor() { constructor() {
super(); super();
@ -180,6 +187,7 @@
this.fontSize = settings.fontSize; this.fontSize = settings.fontSize;
this.showNeedsReply = settings.showNeedsReply; this.showNeedsReply = settings.showNeedsReply;
this.enterSend = settings.enterSend; this.enterSend = settings.enterSend;
this.colorBookmarks = settings.colorBookmarks;
}; };
async doImport(): Promise<void> { async doImport(): Promise<void> {
@ -223,7 +231,8 @@
logAds: this.logAds, logAds: this.logAds,
fontSize: isNaN(this.fontSize) ? 14 : this.fontSize < 10 ? 10 : this.fontSize > 24 ? 24 : this.fontSize, fontSize: isNaN(this.fontSize) ? 14 : this.fontSize < 10 ? 10 : this.fontSize > 24 ? 24 : this.fontSize,
showNeedsReply: this.showNeedsReply, showNeedsReply: this.showNeedsReply,
enterSend: this.enterSend enterSend: this.enterSend,
colorBookmarks: this.colorBookmarks
}; };
if(this.notifications) await core.notifications.requestPermission(); if(this.notifications) await core.notifications.requestPermission();
} }

2
chat/Sidebar.vue
View File

@ -10,7 +10,7 @@
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
<div class="modal-backdrop in" @click="expanded = false"></div> <div class="modal-backdrop show" @click="expanded = false"></div>
</div> </div>
</template> </template>

23
chat/UserList.vue
View File

@ -11,10 +11,18 @@
<user :character="character" :showStatus="true"></user> <user :character="character" :showStatus="true"></user>
</div> </div>
</div> </div>
<div v-if="channel" class="users" style="padding:5px" v-show="tab == 1"> <div v-if="channel" style="padding-left:5px;flex:1;display:flex;flex-direction:column" v-show="tab == 1">
<h4>{{l('users.memberCount', channel.sortedMembers.length)}}</h4> <div class="users" style="flex:1;padding-left:5px">
<div v-for="member in channel.sortedMembers" :key="member.character.name"> <h4>{{l('users.memberCount', channel.sortedMembers.length)}}</h4>
<user :character="member.character" :channel="channel" :showStatus="true"></user> <div v-for="member in filteredMembers" :key="member.character.name">
<user :character="member.character" :channel="channel" :showStatus="true"></user>
</div>
</div>
<div class="input-group" style="margin-top:5px;flex-shrink:0">
<div class="input-group-prepend">
<div class="input-group-text"><span class="fas fa-search"></span></div>
</div>
<input class="form-control" v-model="filter" :placeholder="l('filter')" type="text"/>
</div> </div>
</div> </div>
</sidebar> </sidebar>
@ -36,6 +44,7 @@
export default class UserList extends Vue { export default class UserList extends Vue {
tab = '0'; tab = '0';
expanded = window.innerWidth >= 992; expanded = window.innerWidth >= 992;
filter = '';
l = l; l = l;
sorter = (x: Character, y: Character) => (x.name < y.name ? -1 : (x.name > y.name ? 1 : 0)); sorter = (x: Character, y: Character) => (x.name < y.name ? -1 : (x.name > y.name ? 1 : 0));
@ -50,6 +59,12 @@
get channel(): Channel { get channel(): Channel {
return (<Conversation.ChannelConversation>core.conversations.selectedConversation).channel; return (<Conversation.ChannelConversation>core.conversations.selectedConversation).channel;
} }
get filteredMembers(): ReadonlyArray<Channel.Member> {
if(this.filter.length === 0) return this.channel.sortedMembers;
const filter = new RegExp(this.filter.replace(/[^\w]/gi, '\\$&'), 'i');
return this.channel.sortedMembers.filter((member) => filter.test(member.character.name));
}
} }
</script> </script>

12
chat/UserMenu.vue
View File

@ -2,12 +2,13 @@
<div> <div>
<div id="userMenu" class="list-group" v-show="showContextMenu" :style="position" v-if="character" <div id="userMenu" class="list-group" v-show="showContextMenu" :style="position" v-if="character"
style="position:fixed;padding:10px 10px 5px;display:block;width:220px;z-index:1100" ref="menu"> style="position:fixed;padding:10px 10px 5px;display:block;width:220px;z-index:1100" ref="menu">
<div style="min-height: 65px;padding:5px" class="list-group-item" @click.stop> <div style="min-height: 65px;padding:5px;overflow:auto" class="list-group-item" @click.stop>
<img :src="characterImage" style="width:60px;height:60px;margin-right:5px;float:left" v-if="showAvatars"/> <img :src="characterImage" style="width:60px;height:60px;margin-right:5px;float:left" v-if="showAvatars"/>
<h5 style="margin:0;line-height:1">{{character.name}}</h5> <h5 style="margin:0;line-height:1">{{character.name}}</h5>
{{l('status.' + character.status)}} {{l('status.' + character.status)}}
</div> </div>
<bbcode id="userMenuStatus" :text="character.statusText" v-show="character.statusText" class="list-group-item"></bbcode> <bbcode id="userMenuStatus" :text="character.statusText" v-show="character.statusText" class="list-group-item"
style="max-height:200px;overflow:auto;clear:both"></bbcode>
<a tabindex="-1" :href="profileLink" target="_blank" v-if="showProfileFirst" class="list-group-item list-group-item-action"> <a tabindex="-1" :href="profileLink" target="_blank" v-if="showProfileFirst" class="list-group-item list-group-item-action">
<span class="fa fa-fw fa-user"></span>{{l('user.profile')}}</a> <span class="fa fa-fw fa-user"></span>{{l('user.profile')}}</a>
<a tabindex="-1" href="#" @click.prevent="openConversation(true)" class="list-group-item list-group-item-action"> <a tabindex="-1" href="#" @click.prevent="openConversation(true)" class="list-group-item list-group-item-action">
@ -149,7 +150,7 @@
} }
handleEvent(e: MouseEvent | TouchEvent): void { handleEvent(e: MouseEvent | TouchEvent): void {
const touch = e instanceof TouchEvent ? e.changedTouches[0] : e; const touch = e.type === 'touchstart' ? (<TouchEvent>e).changedTouches[0] : <MouseEvent>e;
let node = <HTMLElement & {character?: Character, channel?: Channel, touched?: boolean}>touch.target; let node = <HTMLElement & {character?: Character, channel?: Channel, touched?: boolean}>touch.target;
while(node !== document.body) { while(node !== document.body) {
if(e.type !== 'click' && node === this.$refs['menu'] || node.id === 'userMenuStatus') return; if(e.type !== 'click' && node === this.$refs['menu'] || node.id === 'userMenuStatus') return;
@ -214,9 +215,4 @@
border-top: 0; border-top: 0;
z-index: -1; z-index: -1;
} }
.user-view {
cursor: pointer;
font-weight: 500;
}
</style> </style>

2
chat/bbcode.ts
View File

@ -74,7 +74,7 @@ export default class BBCodeParser extends CoreBBCodeParser {
const uregex = /^[a-zA-Z0-9_\-\s]+$/; const uregex = /^[a-zA-Z0-9_\-\s]+$/;
if(!uregex.test(content)) if(!uregex.test(content))
return; return;
const extension = core.state.settings.animatedEicons ? 'gif' : 'png'; const extension = core.connection.isOpen && !core.state.settings.animatedEicons ? 'png' : 'gif';
const img = parser.createElement('img'); const img = parser.createElement('img');
img.src = `https://static.f-list.net/images/eicon/${content.toLowerCase()}.${extension}`; img.src = `https://static.f-list.net/images/eicon/${content.toLowerCase()}.${extension}`;
img.title = img.alt = content; img.title = img.alt = content;

1
chat/common.ts
View File

@ -43,6 +43,7 @@ export class Settings implements ISettings {
fontSize = 14; fontSize = 14;
showNeedsReply = false; showNeedsReply = false;
enterSend = true; enterSend = true;
colorBookmarks = false;
} }
export class ConversationSettings implements Conversation.Settings { export class ConversationSettings implements Conversation.Settings {

28
chat/conversations.ts
View File

@ -31,8 +31,9 @@ abstract class Conversation implements Interfaces.Conversation {
abstract readonly maxMessageLength: number | undefined; abstract readonly maxMessageLength: number | undefined;
_settings: Interfaces.Settings | undefined; _settings: Interfaces.Settings | undefined;
protected abstract context: CommandContext; protected abstract context: CommandContext;
protected maxMessages = 100; protected maxMessages = 50;
protected allMessages: Interfaces.Message[] = []; protected allMessages: Interfaces.Message[] = [];
readonly reportMessages: Interfaces.Message[] = [];
private lastSent = ''; private lastSent = '';
constructor(readonly key: string, public _isPinned: boolean) { constructor(readonly key: string, public _isPinned: boolean) {
@ -58,10 +59,6 @@ abstract class Conversation implements Interfaces.Conversation {
state.savePinned(); //tslint:disable-line:no-floating-promises state.savePinned(); //tslint:disable-line:no-floating-promises
} }
get reportMessages(): ReadonlyArray<Interfaces.Message> {
return this.allMessages;
}
async send(): Promise<void> { async send(): Promise<void> {
if(this.enteredText.length === 0) return; if(this.enteredText.length === 0) return;
if(isCommand(this.enteredText)) { if(isCommand(this.enteredText)) {
@ -86,7 +83,7 @@ abstract class Conversation implements Interfaces.Conversation {
loadMore(): void { loadMore(): void {
if(this.messages.length >= this.allMessages.length) return; if(this.messages.length >= this.allMessages.length) return;
this.maxMessages += 100; this.maxMessages += 50;
this.messages = this.allMessages.slice(-this.maxMessages); this.messages = this.allMessages.slice(-this.maxMessages);
} }
@ -97,13 +94,19 @@ abstract class Conversation implements Interfaces.Conversation {
onHide(): void { onHide(): void {
this.errorText = ''; this.errorText = '';
this.lastRead = this.messages[this.messages.length - 1]; this.lastRead = this.messages[this.messages.length - 1];
this.maxMessages = 100; this.maxMessages = 50;
this.messages = this.allMessages.slice(-this.maxMessages); this.messages = this.allMessages.slice(-this.maxMessages);
} }
clear(): void {
this.allMessages = [];
this.messages = [];
}
abstract close(): void; abstract close(): void;
protected safeAddMessage(message: Interfaces.Message): void { protected safeAddMessage(message: Interfaces.Message): void {
safeAddMessage(this.reportMessages, message, 500);
safeAddMessage(this.allMessages, message, 500); safeAddMessage(this.allMessages, message, 500);
safeAddMessage(this.messages, message, this.maxMessages); safeAddMessage(this.messages, message, this.maxMessages);
} }
@ -121,13 +124,13 @@ class PrivateConversation extends Conversation implements Interfaces.PrivateConv
private timer: number | undefined; private timer: number | undefined;
private logPromise = core.logs.getBacklog(this).then((messages) => { private logPromise = core.logs.getBacklog(this).then((messages) => {
this.allMessages.unshift(...messages); this.allMessages.unshift(...messages);
this.reportMessages.unshift(...messages);
this.messages = this.allMessages.slice(); this.messages = this.allMessages.slice();
}); });
constructor(readonly character: Character) { constructor(readonly character: Character) {
super(character.name.toLowerCase(), state.pinned.private.indexOf(character.name) !== -1); super(character.name.toLowerCase(), state.pinned.private.indexOf(character.name) !== -1);
this.lastRead = this.messages[this.messages.length - 1]; this.lastRead = this.messages[this.messages.length - 1];
this.allMessages = [];
} }
get enteredText(): string { get enteredText(): string {
@ -206,6 +209,7 @@ class ChannelConversation extends Conversation implements Interfaces.ChannelConv
this.both.unshift(...messages); this.both.unshift(...messages);
this.chat.unshift(...this.both.filter((x) => x.type !== MessageType.Ad)); this.chat.unshift(...this.both.filter((x) => x.type !== MessageType.Ad));
this.ads.unshift(...this.both.filter((x) => x.type === MessageType.Ad)); this.ads.unshift(...this.both.filter((x) => x.type === MessageType.Ad));
this.reportMessages.unshift(...messages);
this.lastRead = this.messages[this.messages.length - 1]; this.lastRead = this.messages[this.messages.length - 1];
this.messages = this.allMessages.slice(-this.maxMessages); this.messages = this.allMessages.slice(-this.maxMessages);
}); });
@ -233,7 +237,7 @@ class ChannelConversation extends Conversation implements Interfaces.ChannelConv
set mode(mode: Channel.Mode) { set mode(mode: Channel.Mode) {
this._mode = mode; this._mode = mode;
this.maxMessages = 100; this.maxMessages = 50;
this.allMessages = this[mode]; this.allMessages = this[mode];
this.messages = this.allMessages.slice(-this.maxMessages); this.messages = this.allMessages.slice(-this.maxMessages);
if(mode === this.channel.mode && this.channel.id in state.modes) delete state.modes[this.channel.id]; if(mode === this.channel.mode && this.channel.id in state.modes) delete state.modes[this.channel.id];
@ -251,10 +255,6 @@ class ChannelConversation extends Conversation implements Interfaces.ChannelConv
else this.chatEnteredText = value; else this.chatEnteredText = value;
} }
get reportMessages(): ReadonlyArray<Interfaces.Message> {
return this.both;
}
addModeMessage(mode: Channel.Mode, message: Interfaces.Message): void { addModeMessage(mode: Channel.Mode, message: Interfaces.Message): void {
if(this._mode === mode) this.safeAddMessage(message); if(this._mode === mode) this.safeAddMessage(message);
else safeAddMessage(this[mode], message, 500); else safeAddMessage(this[mode], message, 500);
@ -525,7 +525,7 @@ export default function(this: void): Interfaces.State {
const message = createMessage(MessageType.Message, char, decodeHTML(data.message), time); const message = createMessage(MessageType.Message, char, decodeHTML(data.message), time);
await conversation.addMessage(message); await conversation.addMessage(message);
const words = conversation.settings.highlightWords.slice(); const words = conversation.settings.highlightWords.map((w) => w.replace(/[^\w]/gi, '\\$&'));
if(conversation.settings.defaultHighlights) words.push(...core.state.settings.highlightWords); if(conversation.settings.defaultHighlights) words.push(...core.state.settings.highlightWords);
if(conversation.settings.highlight === Interfaces.Setting.Default && core.state.settings.highlight || if(conversation.settings.highlight === Interfaces.Setting.Default && core.state.settings.highlight ||
conversation.settings.highlight === Interfaces.Setting.True) words.push(core.connection.character); conversation.settings.highlight === Interfaces.Setting.True) words.push(core.connection.character);

2
chat/core.ts
View File

@ -55,7 +55,7 @@ const data = {
logs: <Logs | undefined>undefined, logs: <Logs | undefined>undefined,
settingsStore: <Settings.Store | undefined>undefined, settingsStore: <Settings.Store | undefined>undefined,
state: vue.state, state: vue.state,
bbCodeParser: <BBCodeParser | undefined>undefined, bbCodeParser: new BBCodeParser(),
conversations: <Conversation.State | undefined>undefined, conversations: <Conversation.State | undefined>undefined,
channels: <Channel.State | undefined>undefined, channels: <Channel.State | undefined>undefined,
characters: <Character.State | undefined>undefined, characters: <Character.State | undefined>undefined,

13
chat/interfaces.ts
View File

@ -113,6 +113,7 @@ export namespace Conversation {
readonly unread: UnreadState readonly unread: UnreadState
settings: Settings settings: Settings
send(): Promise<void> send(): Promise<void>
clear(): void
loadLastSent(): void loadLastSent(): void
show(): void show(): void
loadMore(): void loadMore(): void
@ -121,12 +122,17 @@ export namespace Conversation {
export type Conversation = Conversation.Conversation; export type Conversation = Conversation.Conversation;
export namespace Logs {
export type Conversation = {readonly key: string, readonly name: string};
}
export interface Logs { export interface Logs {
logMessage(conversation: Conversation, message: Conversation.Message): Promise<void> | void logMessage(conversation: Conversation, message: Conversation.Message): Promise<void> | void
getBacklog(conversation: Conversation): Promise<ReadonlyArray<Conversation.Message>> getBacklog(conversation: Conversation): Promise<ReadonlyArray<Conversation.Message>>
readonly conversations: ReadonlyArray<{readonly key: string, readonly name: string}> getConversations(character: string): Promise<ReadonlyArray<Logs.Conversation>>
getLogs(key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>> getLogs(character: string, key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>>
getLogDates(key: string): Promise<ReadonlyArray<Date>> getLogDates(character: string, key: string): Promise<ReadonlyArray<Date>>
getAvailableCharacters(): Promise<ReadonlyArray<string>>
} }
export namespace Settings { export namespace Settings {
@ -164,6 +170,7 @@ export namespace Settings {
readonly fontSize: number; readonly fontSize: number;
readonly showNeedsReply: boolean; readonly showNeedsReply: boolean;
readonly enterSend: boolean; readonly enterSend: boolean;
readonly colorBookmarks: boolean;
} }
} }

19
chat/localize.ts
View File

@ -31,6 +31,7 @@ const strings: {[key: string]: string | undefined} = {
'spellchecker.noCorrections': 'No corrections available', 'spellchecker.noCorrections': 'No corrections available',
'window.newTab': 'New tab', 'window.newTab': 'New tab',
'title': 'F-Chat', 'title': 'F-Chat',
'title.connected': 'F-Chat ({0})',
'version': 'Version {0}', 'version': 'Version {0}',
'filter': 'Type to filter...', 'filter': 'Type to filter...',
'confirmYes': 'Yes', 'confirmYes': 'Yes',
@ -46,7 +47,7 @@ const strings: {[key: string]: string | undefined} = {
'login.selectCharacter': 'Select a character', 'login.selectCharacter': 'Select a character',
'login.connect': 'Connect', 'login.connect': 'Connect',
'login.connecting': 'Connecting...', 'login.connecting': 'Connecting...',
'login.connectError': 'Connection error: Could not connect to server', 'login.connectError': 'Connection error: {0}',
'login.alreadyLoggedIn': 'You are already logged in on this character in another tab or window.', 'login.alreadyLoggedIn': 'You are already logged in on this character in another tab or window.',
'channelList.public': 'Official channels', 'channelList.public': 'Official channels',
'channelList.private': 'Open rooms', 'channelList.private': 'Open rooms',
@ -78,8 +79,10 @@ const strings: {[key: string]: string | undefined} = {
'chat.search': 'Search in messages...', 'chat.search': 'Search in messages...',
'chat.send': 'Send', 'chat.send': 'Send',
'logs.title': 'Logs', 'logs.title': 'Logs',
'logs.character': 'Character',
'logs.conversation': 'Conversation', 'logs.conversation': 'Conversation',
'logs.date': 'Date', 'logs.date': 'Date',
'logs.selectCharacter': 'Select a character...',
'logs.selectConversation': 'Select a conversation...', 'logs.selectConversation': 'Select a conversation...',
'logs.selectDate': 'Select a date...', 'logs.selectDate': 'Select a date...',
'user.profile': 'Profile', 'user.profile': 'Profile',
@ -135,7 +138,7 @@ Logs and recent conversations will not be touched.
You may need to log out and back in for some settings to take effect. You may need to log out and back in for some settings to take effect.
Are you sure?`, Are you sure?`,
'settings.playSound': 'Play notification sounds', 'settings.playSound': 'Play notification sounds',
'settings.notifications': 'Display notifications', 'settings.notifications': 'Show desktop/push notifications',
'settings.clickOpensMessage': 'Clicking users opens messages (instead of their profile)', 'settings.clickOpensMessage': 'Clicking users opens messages (instead of their profile)',
'settings.enterSend': 'Enter sends messages (shows send button if disabled)', 'settings.enterSend': 'Enter sends messages (shows send button if disabled)',
'settings.disallowedTags': 'Disallowed BBCode tags (comma-separated)', 'settings.disallowedTags': 'Disallowed BBCode tags (comma-separated)',
@ -154,12 +157,18 @@ Are you sure?`,
'settings.theme': 'Theme', 'settings.theme': 'Theme',
'settings.profileViewer': 'Use profile viewer', 'settings.profileViewer': 'Use profile viewer',
'settings.logDir': 'Change log location', 'settings.logDir': 'Change log location',
'settings.logDir.confirm': 'Do you want to set your log location to {0}?\n\nNo files will be moved. If you click Yes here, F-Chat will shut down. If you would like to keep your log files, please move them manually.\n\nCurrent log location: {1}', 'settings.logDir.confirm': `Do you want to set your log location to {0}?
No files will be moved. If you click Yes here, F-Chat will shut down. If you would like to keep your log files, please move them manually before restarting F-Chat.
Current log location: {1}`,
'settings.logDir.inAppDir': 'Please set your log directory to a location outside of the F-Chat installation directory, as it would otherwise be overwritten during an update.',
'settings.logMessages': 'Log messages', 'settings.logMessages': 'Log messages',
'settings.logAds': 'Log ads', 'settings.logAds': 'Log ads',
'settings.fontSize': 'Font size (experimental)', 'settings.fontSize': 'Font size (experimental)',
'settings.showNeedsReply': 'Show indicator on PM tabs with unanswered messages', 'settings.showNeedsReply': 'Show indicator on PM tabs with unanswered messages',
'settings.defaultHighlights': 'Use global highlight words', 'settings.defaultHighlights': 'Use global highlight words',
'settings.colorBookmarks': 'Show bookmarks in a different colour',
'settings.beta': 'Opt-in to test unstable prerelease updates', 'settings.beta': 'Opt-in to test unstable prerelease updates',
'fixLogs.action': 'Fix corrupted logs', 'fixLogs.action': 'Fix corrupted logs',
'fixLogs.text': `There are a few reason log files can become corrupted - log files from old versions with bugs that have since been fixed or incomplete file operations caused by computer crashes are the most common. 'fixLogs.text': `There are a few reason log files can become corrupted - log files from old versions with bugs that have since been fixed or incomplete file operations caused by computer crashes are the most common.
@ -248,7 +257,7 @@ Once this process has started, do not interrupt it or your logs will get corrupt
'commands.help.syntax': 'Syntax: {0}', 'commands.help.syntax': 'Syntax: {0}',
'commands.help.contextChannel': 'This command can be executed in a channel tab.', 'commands.help.contextChannel': 'This command can be executed in a channel tab.',
'commands.help.contextPrivate': 'This command can be executed in a private conversation tab.', 'commands.help.contextPrivate': 'This command can be executed in a private conversation tab.',
'commands.help.contextChonsole': 'This command can be executed in the console tab.', 'commands.help.contextConsole': 'This command can be executed in the console tab.',
'commands.help.permissionRoomOp': 'This command requires you to be an operator in the selected channel.', 'commands.help.permissionRoomOp': 'This command requires you to be an operator in the selected channel.',
'commands.help.permissionRoomOwner': 'This command requires you to be the owner of the selected channel.', 'commands.help.permissionRoomOwner': 'This command requires you to be the owner of the selected channel.',
'commands.help.permissionChannelMod': 'This command requires you to be an official channel moderator.', 'commands.help.permissionChannelMod': 'This command requires you to be an official channel moderator.',
@ -268,6 +277,8 @@ Once this process has started, do not interrupt it or your logs will get corrupt
'commands.join.param0.help': 'The name/ID of the channel to join. For official channels, this is the name, for private rooms this is the ID.', 'commands.join.param0.help': 'The name/ID of the channel to join. For official channels, this is the name, for private rooms this is the ID.',
'commands.close': 'Close tab', 'commands.close': 'Close tab',
'commands.close.help': 'Closes the currently viewed PM or channel tab.', 'commands.close.help': 'Closes the currently viewed PM or channel tab.',
'commands.clear': 'Clear tab',
'commands.clear.help': 'Clears the currently viewed tab, emptying its message list. No logs will be deleted.',
'commands.uptime': 'Uptime', 'commands.uptime': 'Uptime',
'commands.uptime.help': 'Requests statistics about server uptime.', 'commands.uptime.help': 'Requests statistics about server uptime.',
'commands.status': 'Set status', 'commands.status': 'Set status',

4
chat/message_view.ts
View File

@ -26,9 +26,9 @@ const MessageView: Component = {
const message = context.props.message; const message = context.props.message;
const children: VNodeChildrenArrayContents = const children: VNodeChildrenArrayContents =
[createElement('span', {staticClass: 'message-time'}, `[${formatTime(message.time)}] `)]; [createElement('span', {staticClass: 'message-time'}, `[${formatTime(message.time)}] `)];
const separators = core.connection.isOpen ? core.state.settings.messageSeparators : false;
/*tslint:disable-next-line:prefer-template*///unreasonable here /*tslint:disable-next-line:prefer-template*///unreasonable here
let classes = `message message-${Conversation.Message.Type[message.type].toLowerCase()}` + let classes = `message message-${Conversation.Message.Type[message.type].toLowerCase()}` + (separators ? ' message-block' : '') +
(core.state.settings.messageSeparators ? ' message-block' : '') +
(message.type !== Conversation.Message.Type.Event && message.sender.name === core.connection.character ? ' message-own' : '') + (message.type !== Conversation.Message.Type.Event && message.sender.name === core.connection.character ? ' message-own' : '') +
((context.props.classes !== undefined) ? ` ${context.props.classes}` : ''); ((context.props.classes !== undefined) ? ` ${context.props.classes}` : '');
if(message.type !== Conversation.Message.Type.Event) { if(message.type !== Conversation.Message.Type.Event) {

52
chat/slash_commands.ts
View File

@ -72,11 +72,9 @@ export function parse(this: void | never, input: string, context: CommandContext
} }
index = endIndex === -1 ? args.length : endIndex + 1; index = endIndex === -1 ? args.length : endIndex + 1;
} }
if(command.context !== undefined) return function(this: Conversation): void {
return function(this: Conversation): void { command.exec(this, ...values);
command.exec(this, ...values); };
};
else return () => command.exec(...values);
} }
export const enum CommandContext { export const enum CommandContext {
@ -104,7 +102,7 @@ export interface Command {
readonly delimiter?: string, //default ' ' (',' for type: Character) readonly delimiter?: string, //default ' ' (',' for type: Character)
validator?(data: string | number): boolean //default undefined validator?(data: string | number): boolean //default undefined
}[] }[]
exec(context?: Conversation | string | number, ...params: (string | number | undefined)[]): void exec(context: Conversation, ...params: (string | number | undefined)[]): void
} }
const commands: {readonly [key: string]: Command | undefined} = { const commands: {readonly [key: string]: Command | undefined} = {
@ -114,7 +112,7 @@ const commands: {readonly [key: string]: Command | undefined} = {
params: [{type: ParamType.String}] params: [{type: ParamType.String}]
}, },
reward: { reward: {
exec: (character: string) => core.connection.send('RWD', {character}), exec: (_, character: string) => core.connection.send('RWD', {character}),
permission: Permission.Admin, permission: Permission.Admin,
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
@ -123,7 +121,7 @@ const commands: {readonly [key: string]: Command | undefined} = {
exec: () => core.connection.send('PCR') exec: () => core.connection.send('PCR')
}, },
join: { join: {
exec: (channel: string) => core.connection.send('JCH', {channel}), exec: (_, channel: string) => core.connection.send('JCH', {channel}),
params: [{type: ParamType.String}] params: [{type: ParamType.String}]
}, },
close: { close: {
@ -131,15 +129,17 @@ const commands: {readonly [key: string]: Command | undefined} = {
context: CommandContext.Private | CommandContext.Channel context: CommandContext.Private | CommandContext.Channel
}, },
priv: { priv: {
exec: (character: string) => core.conversations.getPrivate(core.characters.get(character)).show(), exec: (_, character: string) => core.conversations.getPrivate(core.characters.get(character)).show(),
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
uptime: { uptime: {
exec: () => core.connection.send('UPT') exec: () => core.connection.send('UPT')
}, },
clear: {
exec: (conv: Conversation) => conv.clear()
},
status: { status: {
//tslint:disable-next-line:no-inferrable-types exec: (_, status: Character.Status, statusmsg: string = '') => core.connection.send('STA', {status, statusmsg}),
exec: (status: Character.Status, statusmsg: string = '') => core.connection.send('STA', {status, statusmsg}),
params: [{type: ParamType.Enum, options: userStatuses}, {type: ParamType.String, optional: true}] params: [{type: ParamType.Enum, options: userStatuses}, {type: ParamType.String, optional: true}]
}, },
ad: { ad: {
@ -203,22 +203,22 @@ const commands: {readonly [key: string]: Command | undefined} = {
params: [{type: ParamType.Character, delimiter: ','}, {type: ParamType.Number, validator: (x) => x >= 1}] params: [{type: ParamType.Character, delimiter: ','}, {type: ParamType.Number, validator: (x) => x >= 1}]
}, },
gkick: { gkick: {
exec: (character: string) => core.connection.send('KIK', {character}), exec: (_, character: string) => core.connection.send('KIK', {character}),
permission: Permission.ChatOp, permission: Permission.ChatOp,
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
gban: { gban: {
exec: (character: string) => core.connection.send('ACB', {character}), exec: (_, character: string) => core.connection.send('ACB', {character}),
permission: Permission.ChatOp, permission: Permission.ChatOp,
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
gunban: { gunban: {
exec: (character: string) => core.connection.send('UNB', {character}), exec: (_, character: string) => core.connection.send('UNB', {character}),
permission: Permission.ChatOp, permission: Permission.ChatOp,
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
gtimeout: { gtimeout: {
exec: (character: string, time: number, reason: string) => exec: (_, character: string, time: number, reason: string) =>
core.connection.send('TMO', {character, time, reason}), core.connection.send('TMO', {character, time, reason}),
permission: Permission.ChatOp, permission: Permission.ChatOp,
params: [{type: ParamType.Character, delimiter: ','}, {type: ParamType.Number, validator: (x) => x >= 1}, {type: ParamType.String}] params: [{type: ParamType.Character, delimiter: ','}, {type: ParamType.Number, validator: (x) => x >= 1}, {type: ParamType.String}]
@ -231,27 +231,27 @@ const commands: {readonly [key: string]: Command | undefined} = {
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
ignore: { ignore: {
exec: (character: string) => core.connection.send('IGN', {action: 'add', character}), exec: (_, character: string) => core.connection.send('IGN', {action: 'add', character}),
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
unignore: { unignore: {
exec: (character: string) => core.connection.send('IGN', {action: 'delete', character}), exec: (_, character: string) => core.connection.send('IGN', {action: 'delete', character}),
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
ignorelist: { ignorelist: {
exec: () => core.conversations.selectedConversation.infoText = l('chat.ignoreList', core.characters.ignoreList.join(', ')) exec: (conv: Conversation) => conv.infoText = l('chat.ignoreList', core.characters.ignoreList.join(', '))
}, },
makeroom: { makeroom: {
exec: (channel: string) => core.connection.send('CCR', {channel}), exec: (_, channel: string) => core.connection.send('CCR', {channel}),
params: [{type: ParamType.String}] params: [{type: ParamType.String}]
}, },
gop: { gop: {
exec: (character: string) => core.connection.send('AOP', {character}), exec: (_, character: string) => core.connection.send('AOP', {character}),
permission: Permission.Admin, permission: Permission.Admin,
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
gdeop: { gdeop: {
exec: (character: string) => core.connection.send('DOP', {character}), exec: (_, character: string) => core.connection.send('DOP', {character}),
permission: Permission.Admin, permission: Permission.Admin,
params: [{type: ParamType.Character}] params: [{type: ParamType.Character}]
}, },
@ -331,27 +331,27 @@ const commands: {readonly [key: string]: Command | undefined} = {
context: CommandContext.Channel context: CommandContext.Channel
}, },
createchannel: { createchannel: {
exec: (channel: string) => core.connection.send('CRC', {channel}), exec: (_, channel: string) => core.connection.send('CRC', {channel}),
permission: Permission.ChatOp, permission: Permission.ChatOp,
params: [{type: ParamType.String}] params: [{type: ParamType.String}]
}, },
broadcast: { broadcast: {
exec: (message: string) => core.connection.send('BRO', {message}), exec: (_, message: string) => core.connection.send('BRO', {message}),
permission: Permission.Admin, permission: Permission.Admin,
params: [{type: ParamType.String}] params: [{type: ParamType.String}]
}, },
reloadconfig: { reloadconfig: {
exec: (save?: 'save') => core.connection.send('RLD', save !== undefined ? {save} : undefined), exec: (_, save?: 'save') => core.connection.send('RLD', save !== undefined ? {save} : undefined),
permission: Permission.Admin, permission: Permission.Admin,
params: [{type: ParamType.Enum, options: ['save'], optional: true}] params: [{type: ParamType.Enum, options: ['save'], optional: true}]
}, },
xyzzy: { xyzzy: {
exec: (command: string, arg: string) => core.connection.send('ZZZ', {command, arg}), exec: (_, command: string, arg: string) => core.connection.send('ZZZ', {command, arg}),
permission: Permission.Admin, permission: Permission.Admin,
params: [{type: ParamType.String, delimiter: ' '}, {type: ParamType.String}] params: [{type: ParamType.String, delimiter: ' '}, {type: ParamType.String}]
}, },
elf: { elf: {
exec: () => core.conversations.selectedConversation.infoText = exec: (conv: Conversation) => conv.infoText =
'Now no one can say there\'s "not enough Elf." It\'s a well-kept secret, but elves love headpets. You should try it sometime.', 'Now no one can say there\'s "not enough Elf." It\'s a well-kept secret, but elves love headpets. You should try it sometime.',
documented: false documented: false
} }

5
chat/user_view.ts
View File

@ -5,6 +5,7 @@
import Vue, {CreateElement, RenderContext, VNode} from 'vue'; import Vue, {CreateElement, RenderContext, VNode} from 'vue';
import {Channel, Character} from '../fchat'; import {Channel, Character} from '../fchat';
import core from './core';
export function getStatusIcon(status: Character.Status): string { export function getStatusIcon(status: Character.Status): string {
switch(status) { switch(status) {
@ -44,8 +45,10 @@ const UserView = Vue.extend({
if(rankIcon !== '') children.unshift(createElement('span', {staticClass: rankIcon})); if(rankIcon !== '') children.unshift(createElement('span', {staticClass: rankIcon}));
if(props.showStatus !== undefined || character.status === 'crown') if(props.showStatus !== undefined || character.status === 'crown')
children.unshift(createElement('span', {staticClass: `fa-fw ${getStatusIcon(character.status)}`})); children.unshift(createElement('span', {staticClass: `fa-fw ${getStatusIcon(character.status)}`}));
const gender = character.gender !== undefined ? character.gender.toLowerCase() : 'none';
const isBookmark = core.connection.isOpen && core.state.settings.colorBookmarks && (character.isFriend || character.isBookmarked);
return createElement('span', { return createElement('span', {
attrs: {class: `user-view gender-${character.gender !== undefined ? character.gender.toLowerCase() : 'none'}`}, attrs: {class: `user-view gender-${gender}${isBookmark ? ' user-bookmark' : ''}`},
domProps: {character, channel: props.channel, bbcodeTag: 'user'} domProps: {character, channel: props.channel, bbcodeTag: 'user'}
}, children); }, children);
} }

2
components/Modal.vue
View File

@ -21,7 +21,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal-backdrop in"></div> <div class="modal-backdrop show"></div>
</span> </span>
</template> </template>

23
electron/Index.vue
View File

@ -18,7 +18,12 @@
</div> </div>
<div class="form-group" v-show="showAdvanced"> <div class="form-group" v-show="showAdvanced">
<label class="control-label" for="host">{{l('login.host')}}</label> <label class="control-label" for="host">{{l('login.host')}}</label>
<input class="form-control" id="host" v-model="settings.host" @keypress.enter="login" :disabled="loggingIn"/> <div class="input-group">
<input class="form-control" id="host" v-model="settings.host" @keypress.enter="login" :disabled="loggingIn"/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" @click="resetHost"><span class="fas fa-undo-alt"></span></button>
</div>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="advanced"><input type="checkbox" id="advanced" v-model="showAdvanced"/> {{l('login.advanced')}}</label> <label for="advanced"><input type="checkbox" id="advanced" v-model="showAdvanced"/> {{l('login.advanced')}}</label>
@ -71,15 +76,16 @@
import Vue from 'vue'; import Vue from 'vue';
import Component from 'vue-class-component'; import Component from 'vue-class-component';
import Chat from '../chat/Chat.vue'; import Chat from '../chat/Chat.vue';
import {Settings} from '../chat/common'; import {getKey, Settings} from '../chat/common';
import core, {init as initCore} from '../chat/core'; import core, {init as initCore} from '../chat/core';
import l from '../chat/localize'; import l from '../chat/localize';
import {init as profileApiInit} from '../chat/profile_api'; import {init as profileApiInit} from '../chat/profile_api';
import Socket from '../chat/WebSocket'; import Socket from '../chat/WebSocket';
import Modal from '../components/Modal.vue'; import Modal from '../components/Modal.vue';
import Connection from '../fchat/connection'; import Connection from '../fchat/connection';
import {Keys} from '../keys';
import CharacterPage from '../site/character_page/character_page.vue'; import CharacterPage from '../site/character_page/character_page.vue';
import {GeneralSettings, nativeRequire} from './common'; import {defaultHost, GeneralSettings, nativeRequire} from './common';
import {fixLogs, Logs, SettingsStore} from './filesystem'; import {fixLogs, Logs, SettingsStore} from './filesystem';
import * as SlimcatImporter from './importer'; import * as SlimcatImporter from './importer';
import Notifications from './notifications'; import Notifications from './notifications';
@ -138,9 +144,9 @@
this.fixCharacter = this.fixCharacters[0]; this.fixCharacter = this.fixCharacters[0];
(<Modal>this.$refs['fixLogsModal']).show(); (<Modal>this.$refs['fixLogsModal']).show();
}); });
window.addEventListener('keydown', (e) => {
window.addEventListener('beforeunload', () => { if(getKey(e) === Keys.Tab && e.ctrlKey && !e.altKey && !e.shiftKey)
if(this.character !== undefined) electron.ipcRenderer.send('disconnect', this.character); parent.send('switch-tab', this.character);
}); });
} }
@ -185,6 +191,7 @@
Raven.setUserContext({username: core.connection.character}); Raven.setUserContext({username: core.connection.character});
}); });
connection.onEvent('closed', () => { connection.onEvent('closed', () => {
if(this.character === undefined) return;
this.character = undefined; this.character = undefined;
electron.ipcRenderer.send('disconnect', connection.character); electron.ipcRenderer.send('disconnect', connection.character);
parent.send('disconnect', webContents.id); parent.send('disconnect', webContents.id);
@ -216,6 +223,10 @@
} }
} }
resetHost(): void {
this.settings.host = defaultHost;
}
onMouseOver(e: MouseEvent): void { onMouseOver(e: MouseEvent): void {
const preview = (<HTMLDivElement>this.$refs.linkPreview); const preview = (<HTMLDivElement>this.$refs.linkPreview);
if((<HTMLElement>e.target).tagName === 'A') { if((<HTMLElement>e.target).tagName === 'A') {

32
electron/Window.vue
View File

@ -6,7 +6,7 @@
<div class="btn" :class="'btn-' + (hasUpdate ? 'warning' : 'light')" @click="openMenu" id="settings"> <div class="btn" :class="'btn-' + (hasUpdate ? 'warning' : 'light')" @click="openMenu" id="settings">
<i class="fa fa-cog"></i> <i class="fa fa-cog"></i>
</div> </div>
<ul class="nav nav-tabs" style="border-bottom:0" ref="tabs"> <ul class="nav nav-tabs" style="border-bottom:0;margin-bottom:-2px" ref="tabs">
<li v-for="tab in tabs" :key="tab.view.id" class="nav-item" @auxclick="remove(tab)"> <li v-for="tab in tabs" :key="tab.view.id" class="nav-item" @auxclick="remove(tab)">
<a href="#" @click.prevent="show(tab)" class="nav-link" <a href="#" @click.prevent="show(tab)" class="nav-link"
:class="{active: tab === activeTab, hasNew: tab.hasNew && tab !== activeTab}"> :class="{active: tab === activeTab, hasNew: tab.hasNew && tab !== activeTab}">
@ -54,8 +54,9 @@
} }
function destroyTab(tab: Tab): void { function destroyTab(tab: Tab): void {
if(tab.user !== undefined) electron.ipcRenderer.send('disconnect', tab.user);
tab.tray.destroy(); tab.tray.destroy();
tab.view.webContents.loadURL('about:blank'); tab.view.destroy();
electron.ipcRenderer.send('tab-closed'); electron.ipcRenderer.send('tab-closed');
} }
@ -88,10 +89,7 @@
electron.ipcRenderer.on('open-tab', () => this.addTab()); electron.ipcRenderer.on('open-tab', () => this.addTab());
electron.ipcRenderer.on('update-available', (_: Event, available: boolean) => this.hasUpdate = available); electron.ipcRenderer.on('update-available', (_: Event, available: boolean) => this.hasUpdate = available);
electron.ipcRenderer.on('fix-logs', () => this.activeTab!.view.webContents.send('fix-logs')); electron.ipcRenderer.on('fix-logs', () => this.activeTab!.view.webContents.send('fix-logs'));
electron.ipcRenderer.on('quit', () => { electron.ipcRenderer.on('quit', () => this.destroyAllTabs());
this.tabs.forEach(destroyTab);
this.tabs = [];
});
electron.ipcRenderer.on('connect', (_: Event, id: number, name: string) => { electron.ipcRenderer.on('connect', (_: Event, id: number, name: string) => {
const tab = this.tabMap[id]; const tab = this.tabMap[id];
tab.user = name; tab.user = name;
@ -106,6 +104,7 @@
tab.hasNew = false; tab.hasNew = false;
electron.ipcRenderer.send('has-new', this.tabs.reduce((cur, t) => cur || t.hasNew, false)); electron.ipcRenderer.send('has-new', this.tabs.reduce((cur, t) => cur || t.hasNew, false));
} }
electron.ipcRenderer.send('disconnect', tab.user);
tab.user = undefined; tab.user = undefined;
tab.tray.setToolTip(l('title')); tab.tray.setToolTip(l('title'));
tab.tray.setContextMenu(electron.remote.Menu.buildFromTemplate(this.createTrayMenu(tab))); tab.tray.setContextMenu(electron.remote.Menu.buildFromTemplate(this.createTrayMenu(tab)));
@ -123,6 +122,13 @@
this.isMaximized = false; this.isMaximized = false;
this.activeTab!.view.setBounds(getWindowBounds()); this.activeTab!.view.setBounds(getWindowBounds());
}); });
electron.ipcRenderer.on('switch-tab', (_: Event) => {
const index = this.tabs.indexOf(this.activeTab!);
this.show(this.tabs[index + 1 === this.tabs.length ? 0 : index + 1]);
});
electron.ipcRenderer.on('show-tab', (_: Event, id: number) => {
this.show(this.tabMap[id]);
});
document.addEventListener('click', () => this.activeTab!.view.webContents.focus()); document.addEventListener('click', () => this.activeTab!.view.webContents.focus());
window.addEventListener('focus', () => this.activeTab!.view.webContents.focus()); window.addEventListener('focus', () => this.activeTab!.view.webContents.focus());
@ -140,14 +146,13 @@
window.onbeforeunload = () => { window.onbeforeunload = () => {
const isConnected = this.tabs.reduce((cur, tab) => cur || tab.user !== undefined, false); const isConnected = this.tabs.reduce((cur, tab) => cur || tab.user !== undefined, false);
if(process.env.NODE_ENV !== 'production' || !isConnected) { if(process.env.NODE_ENV !== 'production' || !isConnected) {
this.tabs.forEach(destroyTab); this.destroyAllTabs();
return; return;
} }
if(!this.settings.closeToTray) if(!this.settings.closeToTray)
return setImmediate(() => { return setImmediate(() => {
if(confirm(l('chat.confirmLeave'))) { if(confirm(l('chat.confirmLeave'))) {
this.tabs.forEach(destroyTab); this.destroyAllTabs();
this.tabs = [];
browserWindow.close(); browserWindow.close();
} }
}); });
@ -156,6 +161,12 @@
}; };
} }
destroyAllTabs(): void {
browserWindow.setBrowserView(null!);
this.tabs.forEach(destroyTab);
this.tabs = [];
}
get styling(): string { get styling(): string {
try { try {
return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`))}</style>`; return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`))}</style>`;
@ -205,6 +216,7 @@
this.activeTab = tab; this.activeTab = tab;
browserWindow.setBrowserView(tab.view); browserWindow.setBrowserView(tab.view);
tab.view.setBounds(getWindowBounds()); tab.view.setBounds(getWindowBounds());
tab.view.webContents.focus();
} }
remove(tab: Tab, shouldConfirm: boolean = true): void { remove(tab: Tab, shouldConfirm: boolean = true): void {
@ -212,10 +224,10 @@
this.tabs.splice(this.tabs.indexOf(tab), 1); this.tabs.splice(this.tabs.indexOf(tab), 1);
electron.ipcRenderer.send('has-new', this.tabs.reduce((cur, t) => cur || t.hasNew, false)); electron.ipcRenderer.send('has-new', this.tabs.reduce((cur, t) => cur || t.hasNew, false));
delete this.tabMap[tab.view.webContents.id]; delete this.tabMap[tab.view.webContents.id];
destroyTab(tab);
if(this.tabs.length === 0) { if(this.tabs.length === 0) {
if(process.env.NODE_ENV === 'production') browserWindow.close(); if(process.env.NODE_ENV === 'production') browserWindow.close();
} else if(this.activeTab === tab) this.show(this.tabs[0]); } else if(this.activeTab === tab) this.show(this.tabs[0]);
destroyTab(tab);
} }
minimize(): void { minimize(): void {

2
electron/application.json
View File

@ -1,6 +1,6 @@
{ {
"name": "fchat", "name": "fchat",
"version": "0.2.18", "version": "0.2.19",
"author": "The F-List Team", "author": "The F-List Team",
"description": "F-List.net Chat Client", "description": "F-List.net Chat Client",
"main": "main.js", "main": "main.js",

7
electron/chat.ts
View File

@ -2,7 +2,7 @@
* @license * @license
* MIT License * MIT License
* *
* Copyright (c) 2017 F-List * Copyright (c) 2018 F-List
* *
* Permission is hereby granted, free of charge, to any person obtaining a copy * Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal * of this software and associated documentation files (the "Software"), to deal
@ -24,11 +24,12 @@
* *
* This license header applies to this file and all of the non-third-party assets it includes. * This license header applies to this file and all of the non-third-party assets it includes.
* @file The entry point for the Electron renderer of F-Chat 3.0. * @file The entry point for the Electron renderer of F-Chat 3.0.
* @copyright 2017 F-List * @copyright 2018 F-List
* @author Maya Wolf <maya@f-list.net> * @author Maya Wolf <maya@f-list.net>
* @version 3.0 * @version 3.0
* @see {@link https://github.com/f-list/exported|GitHub repo} * @see {@link https://github.com/f-list/exported|GitHub repo}
*/ */
import Axios from 'axios';
import {exec} from 'child_process'; import {exec} from 'child_process';
import * as electron from 'electron'; import * as electron from 'electron';
import * as fs from 'fs'; import * as fs from 'fs';
@ -63,6 +64,8 @@ const sc = nativeRequire<{
}>('spellchecker/build/Release/spellchecker.node'); }>('spellchecker/build/Release/spellchecker.node');
const spellchecker = new sc.Spellchecker(); const spellchecker = new sc.Spellchecker();
Axios.defaults.params = { __fchat: `desktop/${electron.remote.app.getVersion()}` };
if(process.env.NODE_ENV === 'production') { if(process.env.NODE_ENV === 'production') {
Raven.config('https://a9239b17b0a14f72ba85e8729b9d1612@sentry.f-list.net/2', { Raven.config('https://a9239b17b0a14f72ba85e8729b9d1612@sentry.f-list.net/2', {
release: electron.remote.app.getVersion(), release: electron.remote.app.getVersion(),

4
electron/common.ts
View File

@ -2,11 +2,13 @@ import * as electron from 'electron';
import * as fs from 'fs'; import * as fs from 'fs';
import * as path from 'path'; import * as path from 'path';
export const defaultHost = 'wss://chat.f-list.net:9799';
export class GeneralSettings { export class GeneralSettings {
account = ''; account = '';
closeToTray = true; closeToTray = true;
profileViewer = true; profileViewer = true;
host = 'wss://chat.f-list.net:9799'; host = defaultHost;
logDirectory = path.join(electron.app.getPath('userData'), 'data'); logDirectory = path.join(electron.app.getPath('userData'), 'data');
spellcheckLang: string | undefined = 'en_GB'; spellcheckLang: string | undefined = 'en_GB';
theme = 'default'; theme = 'default';

89
electron/filesystem.ts
View File

@ -1,4 +1,3 @@
import {addMinutes} from 'date-fns';
import * as electron from 'electron'; import * as electron from 'electron';
import * as fs from 'fs'; import * as fs from 'fs';
import * as path from 'path'; import * as path from 'path';
@ -44,14 +43,14 @@ interface Index {
[key: string]: IndexItem | undefined [key: string]: IndexItem | undefined
} }
export function getLogDir(this: void, character: string = core.connection.character): string { export function getLogDir(this: void, character: string): string {
const dir = path.join(core.state.generalSettings!.logDirectory, character, 'logs'); const dir = path.join(core.state.generalSettings!.logDirectory, character, 'logs');
mkdir(dir); mkdir(dir);
return dir; return dir;
} }
function getLogFile(this: void, key: string): string { function getLogFile(this: void, character: string, key: string): string {
return path.join(getLogDir(), key); return path.join(getLogDir(character), key);
} }
export function checkIndex(this: void, index: Index, message: Message, key: string, name: string, export function checkIndex(this: void, index: Index, message: Message, key: string, name: string,
@ -151,35 +150,42 @@ export function fixLogs(character: string): void {
} }
} }
function loadIndex(name: string): Index {
const index: Index = {};
const dir = getLogDir(name);
const files = fs.readdirSync(dir);
for(const file of files)
if(file.substr(-4) === '.idx') {
const content = fs.readFileSync(path.join(dir, file));
let offset = content.readUInt8(0, noAssert) + 1;
const item: IndexItem = {
name: content.toString('utf8', 1, offset),
index: {},
offsets: new Array(content.length - offset)
};
for(; offset < content.length; offset += 7) {
const key = content.readUInt16LE(offset);
item.index[key] = item.offsets.length;
item.offsets.push(content.readUIntLE(offset + 2, 5, noAssert));
}
index[file.slice(0, -4).toLowerCase()] = item;
}
return index;
}
export class Logs implements Logging { export class Logs implements Logging {
private index: Index = {}; private index: Index = {};
private loadedIndex?: Index;
private loadedCharacter?: string;
constructor() { constructor() {
core.connection.onEvent('connecting', () => { core.connection.onEvent('connecting', () => {
this.index = {}; this.index = loadIndex(core.connection.character);
const dir = getLogDir();
const files = fs.readdirSync(dir);
for(const file of files)
if(file.substr(-4) === '.idx') {
const content = fs.readFileSync(path.join(dir, file));
let offset = content.readUInt8(0, noAssert) + 1;
const item: IndexItem = {
name: content.toString('utf8', 1, offset),
index: {},
offsets: new Array(content.length - offset)
};
for(; offset < content.length; offset += 7) {
const key = content.readUInt16LE(offset);
item.index[key] = item.offsets.length;
item.offsets.push(content.readUIntLE(offset + 2, 5, noAssert));
}
this.index[file.slice(0, -4).toLowerCase()] = item;
}
}); });
} }
async getBacklog(conversation: Conversation): Promise<ReadonlyArray<Conversation.Message>> { async getBacklog(conversation: Conversation): Promise<ReadonlyArray<Conversation.Message>> {
const file = getLogFile(conversation.key); const file = getLogFile(core.connection.character, conversation.key);
if(!fs.existsSync(file)) return []; if(!fs.existsSync(file)) return [];
let count = 20; let count = 20;
let messages = new Array<Conversation.Message>(count); let messages = new Array<Conversation.Message>(count);
@ -198,25 +204,30 @@ export class Logs implements Logging {
return messages; return messages;
} }
async getLogDates(key: string): Promise<ReadonlyArray<Date>> { private getIndex(name: string): Index {
const entry = this.index[key]; if(this.loadedCharacter === name) return this.loadedIndex!;
this.loadedCharacter = name;
return this.loadedIndex = name === core.connection.character ? this.index : loadIndex(name);
}
async getLogDates(character: string, key: string): Promise<ReadonlyArray<Date>> {
const entry = this.getIndex(character)[key];
if(entry === undefined) return []; if(entry === undefined) return [];
const dates = []; const dates = [];
for(const item in entry.index) { const offset = new Date().getTimezoneOffset() * 60000;
const date = new Date(parseInt(item, 10) * dayMs); for(const item in entry.index)
dates.push(addMinutes(date, date.getTimezoneOffset())); dates.push(new Date(parseInt(item, 10) * dayMs + offset));
}
return dates; return dates;
} }
async getLogs(key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>> { async getLogs(character: string, key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>> {
const index = this.index[key]; const index = this.getIndex(character)[key];
if(index === undefined) return []; if(index === undefined) return [];
const dateOffset = index.index[Math.floor(date.getTime() / dayMs - date.getTimezoneOffset() / 1440)]; const dateOffset = index.index[Math.floor(date.getTime() / dayMs - date.getTimezoneOffset() / 1440)];
if(dateOffset === undefined) return []; if(dateOffset === undefined) return [];
const buffer = Buffer.allocUnsafe(50100); const buffer = Buffer.allocUnsafe(50100);
const messages: Conversation.Message[] = []; const messages: Conversation.Message[] = [];
const file = getLogFile(key); const file = getLogFile(character, key);
const fd = fs.openSync(file, 'r'); const fd = fs.openSync(file, 'r');
let pos = index.offsets[dateOffset]; let pos = index.offsets[dateOffset];
const size = dateOffset + 1 < index.offsets.length ? index.offsets[dateOffset + 1] : (fs.fstatSync(fd)).size; const size = dateOffset + 1 < index.offsets.length ? index.offsets[dateOffset + 1] : (fs.fstatSync(fd)).size;
@ -231,7 +242,7 @@ export class Logs implements Logging {
} }
logMessage(conversation: {key: string, name: string}, message: Message): void { logMessage(conversation: {key: string, name: string}, message: Message): void {
const file = getLogFile(conversation.key); const file = getLogFile(core.connection.character, conversation.key);
const buffer = serializeMessage(message).serialized; const buffer = serializeMessage(message).serialized;
const hasIndex = this.index[conversation.key] !== undefined; const hasIndex = this.index[conversation.key] !== undefined;
const indexBuffer = checkIndex(this.index, message, conversation.key, conversation.name, const indexBuffer = checkIndex(this.index, message, conversation.key, conversation.name,
@ -240,11 +251,17 @@ export class Logs implements Logging {
writeFile(file, buffer, {flag: 'a'}); writeFile(file, buffer, {flag: 'a'});
} }
get conversations(): ReadonlyArray<{key: string, name: string}> { async getConversations(character: string): Promise<ReadonlyArray<{key: string, name: string}>> {
const index = this.getIndex(character);
const conversations: {key: string, name: string}[] = []; const conversations: {key: string, name: string}[] = [];
for(const key in this.index) conversations.push({key, name: this.index[key]!.name}); for(const key in index) conversations.push({key, name: index[key]!.name});
return conversations; return conversations;
} }
async getAvailableCharacters(): Promise<ReadonlyArray<string>> {
const baseDir = core.state.generalSettings!.logDirectory;
return (fs.readdirSync(baseDir)).filter((x) => fs.lstatSync(path.join(baseDir, x)).isDirectory());
}
} }
function getSettingsDir(character: string = core.connection.character): string { function getSettingsDir(character: string = core.connection.character): string {

15
electron/main.ts
View File

@ -2,7 +2,7 @@
* @license * @license
* MIT License * MIT License
* *
* Copyright (c) 2017 F-List * Copyright (c) 2018 F-List
* *
* Permission is hereby granted, free of charge, to any person obtaining a copy * Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal * of this software and associated documentation files (the "Software"), to deal
@ -24,7 +24,7 @@
* *
* This license header applies to this file and all of the non-third-party assets it includes. * This license header applies to this file and all of the non-third-party assets it includes.
* @file The entry point for the Electron main thread of F-Chat 3.0. * @file The entry point for the Electron main thread of F-Chat 3.0.
* @copyright 2017 F-List * @copyright 2018 F-List
* @author Maya Wolf <maya@f-list.net> * @author Maya Wolf <maya@f-list.net>
* @version 3.0 * @version 3.0
* @see {@link https://github.com/f-list/exported|GitHub repo} * @see {@link https://github.com/f-list/exported|GitHub repo}
@ -232,6 +232,8 @@ function onReady(): void {
const dir = <string[] | undefined>electron.dialog.showOpenDialog( const dir = <string[] | undefined>electron.dialog.showOpenDialog(
{defaultPath: new GeneralSettings().logDirectory, properties: ['openDirectory']}); {defaultPath: new GeneralSettings().logDirectory, properties: ['openDirectory']});
if(dir !== undefined) { if(dir !== undefined) {
if(dir[0].startsWith(path.dirname(app.getPath('exe'))))
return electron.dialog.showErrorBox(l('settings.logDir'), l('settings.logDir.inAppDir'));
const button = electron.dialog.showMessageBox(window, { const button = electron.dialog.showMessageBox(window, {
message: l('settings.logDir.confirm', dir[0], settings.logDirectory), message: l('settings.logDir.confirm', dir[0], settings.logDirectory),
buttons: [l('confirmYes'), l('confirmNo')], buttons: [l('confirmYes'), l('confirmNo')],
@ -285,14 +287,17 @@ function onReady(): void {
{ {
accelerator: process.platform === 'darwin' ? 'Cmd+Q' : undefined, accelerator: process.platform === 'darwin' ? 'Cmd+Q' : undefined,
label: l('action.quit'), label: l('action.quit'),
click(_: Electron.MenuItem, w: Electron.BrowserWindow): void { click(_: Electron.MenuItem, window: Electron.BrowserWindow): void {
if(characters.length === 0) return app.quit(); if(characters.length === 0) return app.quit();
const button = electron.dialog.showMessageBox(w, { const button = electron.dialog.showMessageBox(window, {
message: l('chat.confirmLeave'), message: l('chat.confirmLeave'),
buttons: [l('confirmYes'), l('confirmNo')], buttons: [l('confirmYes'), l('confirmNo')],
cancelId: 1 cancelId: 1
}); });
if(button === 0) app.quit(); if(button === 0) {
for(const w of windows) w.webContents.send('quit');
app.quit();
}
} }
} }
] ]

1
electron/notifications.ts
View File

@ -19,6 +19,7 @@ export default class Notifications extends BaseNotifications {
silent: true silent: true
}); });
notification.onclick = () => { notification.onclick = () => {
browserWindow.webContents.send('show-tab', remote.getCurrentWebContents().id);
conversation.show(); conversation.show();
browserWindow.focus(); browserWindow.focus();
notification.close(); notification.close();

28
fchat/connection.ts
View File

@ -19,7 +19,7 @@ export default class Connection implements Interfaces.Connection {
private ticket = ''; private ticket = '';
private cleanClose = false; private cleanClose = false;
private reconnectTimer: NodeJS.Timer | undefined; private reconnectTimer: NodeJS.Timer | undefined;
private ticketProvider: Interfaces.TicketProvider; private readonly ticketProvider: Interfaces.TicketProvider;
private reconnectDelay = 0; private reconnectDelay = 0;
private isReconnect = false; private isReconnect = false;
@ -31,15 +31,13 @@ export default class Connection implements Interfaces.Connection {
async connect(character: string): Promise<void> { async connect(character: string): Promise<void> {
this.cleanClose = false; this.cleanClose = false;
this.isReconnect = this.character === character; if(this.character !== character) this.isReconnect = false;
this.character = character; this.character = character;
try { try {
this.ticket = await this.ticketProvider(); this.ticket = await this.ticketProvider();
} catch(e) { } catch(e) {
for(const handler of this.errorHandlers) handler(<Error>e); (<Error & {request: true}>e).request = true;
await this.invokeHandlers('closed', true); throw e;
this.reconnect();
return;
} }
await this.invokeHandlers('connecting', this.isReconnect); await this.invokeHandlers('connecting', this.isReconnect);
if(this.cleanClose) { if(this.cleanClose) {
@ -71,17 +69,26 @@ export default class Connection implements Interfaces.Connection {
socket.onError((error: Error) => { socket.onError((error: Error) => {
for(const handler of this.errorHandlers) handler(error); for(const handler of this.errorHandlers) handler(error);
}); });
return new Promise<void>((resolve) => { return new Promise<void>((resolve, reject) => {
const handler = () => { const handler = () => {
resolve(); resolve();
this.offEvent('connected', handler); this.offEvent('connected', handler);
}; };
this.onEvent('connected', handler); this.onEvent('connected', handler);
this.onError(reject);
}); });
} }
private reconnect(): void { private reconnect(): void {
this.reconnectTimer = setTimeout(async() => this.connect(this.character), this.reconnectDelay); this.reconnectTimer = setTimeout(async() => {
try {
await this.connect(this.character);
} catch(e) {
for(const handler of this.errorHandlers) handler(<Error>e);
await this.invokeHandlers('closed', true);
this.reconnect();
}
}, this.reconnectDelay);
this.reconnectDelay = this.reconnectDelay >= 30000 ? 60000 : this.reconnectDelay >= 10000 ? 30000 : 10000; this.reconnectDelay = this.reconnectDelay >= 30000 ? 60000 : this.reconnectDelay >= 10000 ? 30000 : 10000;
} }
@ -91,6 +98,10 @@ export default class Connection implements Interfaces.Connection {
if(this.socket !== undefined) this.socket.close(); if(this.socket !== undefined) this.socket.close();
} }
get isOpen(): boolean {
return this.socket !== undefined;
}
async queryApi<T = object>(endpoint: string, data?: {account?: string, ticket?: string}): Promise<T> { async queryApi<T = object>(endpoint: string, data?: {account?: string, ticket?: string}): Promise<T> {
if(data === undefined) data = {}; if(data === undefined) data = {};
data.account = this.account; data.account = this.account;
@ -168,6 +179,7 @@ export default class Connection implements Interfaces.Connection {
if(data.identity === this.character) { if(data.identity === this.character) {
await this.invokeHandlers('connected', this.isReconnect); await this.invokeHandlers('connected', this.isReconnect);
this.reconnectDelay = 0; this.reconnectDelay = 0;
this.isReconnect = true;
} }
} }
} }

1
fchat/interfaces.ts
View File

@ -134,6 +134,7 @@ export namespace Connection {
export interface Connection { export interface Connection {
readonly character: string readonly character: string
readonly vars: Vars readonly vars: Vars
readonly isOpen: boolean
connect(character: string): Promise<void> connect(character: string): Promise<void>
close(): void close(): void
onMessage<K extends keyof ServerCommands>(type: K, handler: CommandHandler<K>): void onMessage<K extends keyof ServerCommands>(type: K, handler: CommandHandler<K>): void

11
mobile/Index.vue
View File

@ -18,7 +18,12 @@
</div> </div>
<div class="form-group" v-show="showAdvanced"> <div class="form-group" v-show="showAdvanced">
<label class="control-label" for="host">{{l('login.host')}}</label> <label class="control-label" for="host">{{l('login.host')}}</label>
<input class="form-control" id="host" v-model="settings.host" @keypress.enter="login" :disabled="loggingIn"/> <div class="input-group">
<input class="form-control" id="host" v-model="settings.host" @keypress.enter="login" :disabled="loggingIn"/>
<div class="input-group-append">
<button class="btn btn-outline-secondary" @click="resetHost"><span class="fas fa-undo-alt"></span></button>
</div>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label" for="theme">{{l('settings.theme')}}</label> <label class="control-label" for="theme">{{l('settings.theme')}}</label>
@ -118,6 +123,10 @@
this.settings = settings; this.settings = settings;
} }
resetHost(): void {
this.settings!.host = new GeneralSettings().host;
}
get styling(): string { get styling(): string {
if(window.NativeView !== undefined) window.NativeView.setTheme(this.settings!.theme); if(window.NativeView !== undefined) window.NativeView.setTheme(this.settings!.theme);
//tslint:disable-next-line:no-require-imports //tslint:disable-next-line:no-require-imports

52
mobile/android/app/src/main/kotlin/net/f_list/fchat/Logs.kt
View File

@ -15,18 +15,17 @@ import java.util.*
class Logs(private val ctx: Context) { class Logs(private val ctx: Context) {
data class IndexItem(val name: String, val index: MutableMap<Int, Long> = HashMap(), val dates: MutableList<Int> = LinkedList()) data class IndexItem(val name: String, val index: MutableMap<Int, Long> = HashMap(), val dates: MutableList<Int> = LinkedList())
private lateinit var index: MutableMap<String, IndexItem> private var index: MutableMap<String, IndexItem>? = null
private var loadedIndex: MutableMap<String, IndexItem>? = null
private lateinit var baseDir: File private lateinit var baseDir: File
private var character: String? = null
private val encoder = Charsets.UTF_8.newEncoder() private val encoder = Charsets.UTF_8.newEncoder()
private val decoder = Charsets.UTF_8.newDecoder() private val decoder = Charsets.UTF_8.newDecoder()
private val buffer = ByteBuffer.allocateDirect(51000).order(ByteOrder.LITTLE_ENDIAN) private val buffer = ByteBuffer.allocateDirect(51000).order(ByteOrder.LITTLE_ENDIAN)
@JavascriptInterface private fun loadIndex(character: String): MutableMap<String, IndexItem> {
fun initN(character: String): String { val files = File(ctx.filesDir, "$character/logs").listFiles({ _, name -> name.endsWith(".idx") })
baseDir = File(ctx.filesDir, "$character/logs") val index = HashMap<String, IndexItem>(files.size)
baseDir.mkdirs()
val files = baseDir.listFiles({ _, name -> name.endsWith(".idx") })
index = HashMap(files.size)
for(file in files) { for(file in files) {
FileInputStream(file).use { stream -> FileInputStream(file).use { stream ->
buffer.clear() buffer.clear()
@ -49,8 +48,19 @@ class Logs(private val ctx: Context) {
index[file.nameWithoutExtension] = indexItem index[file.nameWithoutExtension] = indexItem
} }
} }
return index
}
@JavascriptInterface
fun initN(character: String): String {
baseDir = File(ctx.filesDir, "$character/logs")
baseDir.mkdirs()
this.character = character
index = loadIndex(character)
loadedIndex = index
val json = JSONStringer().`object`() val json = JSONStringer().`object`()
for(item in index) json.key(item.key).`object`().key("name").value(item.value.name).key("dates").value(JSONArray(item.value.dates)).endObject() for(item in index!!)
json.key(item.key).`object`().key("name").value(item.value.name).key("dates").value(JSONArray(item.value.dates)).endObject()
return json.endObject().toString() return json.endObject().toString()
} }
@ -59,13 +69,13 @@ class Logs(private val ctx: Context) {
val day = time / 86400 val day = time / 86400
val file = File(baseDir, key) val file = File(baseDir, key)
buffer.clear() buffer.clear()
if(!index.containsKey(key)) { if(!index!!.containsKey(key)) {
index[key] = IndexItem(conversation, HashMap()) index!![key] = IndexItem(conversation, HashMap())
buffer.position(1) buffer.position(1)
encoder.encode(CharBuffer.wrap(conversation), buffer, true) encoder.encode(CharBuffer.wrap(conversation), buffer, true)
buffer.put(0, (buffer.position() - 1).toByte()) buffer.put(0, (buffer.position() - 1).toByte())
} }
val item = index[key]!! val item = index!![key]!!
if(!item.index.containsKey(day)) { if(!item.index.containsKey(day)) {
buffer.putShort(day.toShort()) buffer.putShort(day.toShort())
val size = file.length() val size = file.length()
@ -130,11 +140,11 @@ class Logs(private val ctx: Context) {
} }
@JavascriptInterface @JavascriptInterface
fun getLogsN(key: String, date: Int): String { fun getLogsN(character: String, key: String, date: Int): String {
val offset = index[key]?.index?.get(date) ?: return "[]" val offset = loadedIndex!![key]?.index?.get(date) ?: return "[]"
val json = JSONStringer() val json = JSONStringer()
json.array() json.array()
FileInputStream(File(baseDir, key)).use { stream -> FileInputStream(File(ctx.filesDir, "$character/logs/$key")).use { stream ->
val channel = stream.channel val channel = stream.channel
channel.position(offset) channel.position(offset)
while(channel.position() < channel.size()) { while(channel.position() < channel.size()) {
@ -150,6 +160,20 @@ class Logs(private val ctx: Context) {
return json.endArray().toString() return json.endArray().toString()
} }
@JavascriptInterface
fun loadIndexN(character: String): String {
loadedIndex = if(character == this.character) this.index else this.loadIndex(character)
val json = JSONStringer().`object`()
for(item in loadedIndex!!)
json.key(item.key).`object`().key("name").value(item.value.name).key("dates").value(JSONArray(item.value.dates)).endObject()
return json.endObject().toString()
}
@JavascriptInterface
fun getCharactersN(): String {
return JSONArray(ctx.filesDir.listFiles().filter { it.isDirectory }.map { it.name }).toString()
}
private fun deserializeMessage(buffer: ByteBuffer, json: JSONStringer, checkDate: Int = -1) { private fun deserializeMessage(buffer: ByteBuffer, json: JSONStringer, checkDate: Int = -1) {
val date = buffer.int val date = buffer.int
if(checkDate != -1 && date / 86400 != checkDate) return if(checkDate != -1 && date / 86400 != checkDate) return

8
mobile/android/app/src/main/kotlin/net/f_list/fchat/MainActivity.kt
View File

@ -82,8 +82,12 @@ class MainActivity : Activity() {
override fun onPageFinished(view: WebView?, url: String?) { override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url) super.onPageFinished(view, url)
webView.evaluateJavascript("(function(n){n.listFiles=function(p){return JSON.parse(n.listFilesN(p))};n.listDirectories=function(p){return JSON.parse(n.listDirectoriesN(p))}})(NativeFile)", null) webView.evaluateJavascript("window.setupPlatform('android')", null)
webView.evaluateJavascript("(function(n){n.init=function(c){return JSON.parse(n.initN(c))};n.getBacklog=function(k){return JSON.parse(n.getBacklogN(k))};n.getLogs=function(k,d){return JSON.parse(n.getLogsN(k,d))}})(NativeLogs)", null) webView.evaluateJavascript("(function(n){n.listFiles=function(p){return JSON.parse(n.listFilesN(p))};" +
"n.listDirectories=function(p){return JSON.parse(n.listDirectoriesN(p))}})(NativeFile)", null)
webView.evaluateJavascript("(function(n){n.init=function(c){return JSON.parse(n.initN(c))};n.getBacklog=function(k){return JSON.parse(n.getBacklogN(k))};" +
"n.getLogs=function(c,k,d){return JSON.parse(n.getLogsN(c,k,d))};n.loadIndex=function(c){return JSON.parse(n.loadIndexN(c))};" +
"n.getCharacters=function(){return JSON.parse(n.getCharactersN())}})(NativeLogs)", null)
} }
} }

4
mobile/android/build.gradle
View File

@ -1,12 +1,12 @@
// Top-level build file where you can add configuration options common to all sub-projects/modules. // Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript { buildscript {
ext.kotlin_version = '1.2.21' ext.kotlin_version = '1.2.30'
repositories { repositories {
jcenter() jcenter()
} }
dependencies { dependencies {
classpath 'com.android.tools.build:gradle:2.3.0' classpath 'com.android.tools.build:gradle:2.3.2'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
// NOTE: Do not place your application dependencies here; they belong // NOTE: Do not place your application dependencies here; they belong

3
mobile/android/gradle/wrapper/gradle-wrapper.properties vendored
View File

@ -1,6 +1,5 @@
#Mon Dec 28 10:00:20 PST 2015
distributionBase=GRADLE_USER_HOME distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip distributionUrl=https\://services.gradle.org/distributions/gradle-4.6-bin.zip

12
mobile/chat.ts
View File

@ -2,7 +2,7 @@
* @license * @license
* MIT License * MIT License
* *
* Copyright (c) 2017 F-List * Copyright (c) 2018 F-List
* *
* Permission is hereby granted, free of charge, to any person obtaining a copy * Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal * of this software and associated documentation files (the "Software"), to deal
@ -24,19 +24,25 @@
* *
* This license header applies to this file and all of the non-third-party assets it includes. * This license header applies to this file and all of the non-third-party assets it includes.
* @file The entry point for the mobile version of F-Chat 3.0. * @file The entry point for the mobile version of F-Chat 3.0.
* @copyright 2017 F-List * @copyright 2018 F-List
* @author Maya Wolf <maya@f-list.net> * @author Maya Wolf <maya@f-list.net>
* @version 3.0 * @version 3.0
* @see {@link https://github.com/f-list/exported|GitHub repo} * @see {@link https://github.com/f-list/exported|GitHub repo}
*/ */
import Axios from 'axios';
import * as Raven from 'raven-js'; import * as Raven from 'raven-js';
import Vue from 'vue'; import Vue from 'vue';
import VueRaven from '../chat/vue-raven'; import VueRaven from '../chat/vue-raven';
import Index from './Index.vue'; import Index from './Index.vue';
const version = (<{version: string}>require('./package.json')).version; //tslint:disable-line:no-require-imports
(<any>window)['setupPlatform'] = (platform: string) => { //tslint:disable-line:no-any
Axios.defaults.params = { __fchat: `mobile-${platform}/${version}` };
};
if(process.env.NODE_ENV === 'production') { if(process.env.NODE_ENV === 'production') {
Raven.config('https://a9239b17b0a14f72ba85e8729b9d1612@sentry.f-list.net/2', { Raven.config('https://a9239b17b0a14f72ba85e8729b9d1612@sentry.f-list.net/2', {
release: `mobile-${require('./package.json').version}`, //tslint:disable-line:no-require-imports no-unsafe-any release: `mobile-${version}`,
dataCallback: (data: {culprit: string, exception: {values: {stacktrace: {frames: {filename: string}[]}}[]}}) => { dataCallback: (data: {culprit: string, exception: {values: {stacktrace: {frames: {filename: string}[]}}[]}}) => {
data.culprit = `~${data.culprit.substr(data.culprit.lastIndexOf('/'))}`; data.culprit = `~${data.culprit.substr(data.culprit.lastIndexOf('/'))}`;
for(const ex of data.exception.values) for(const ex of data.exception.values)

33
mobile/filesystem.ts
View File

@ -14,10 +14,12 @@ declare global {
type NativeMessage = {time: number, type: number, sender: string, text: string}; type NativeMessage = {time: number, type: number, sender: string, text: string};
const NativeLogs: { const NativeLogs: {
init(character: string): Promise<Index> init(character: string): Promise<Index>
getCharacters(): Promise<ReadonlyArray<string>>
loadIndex(character: string): Promise<Index>
logMessage(key: string, conversation: string, time: number, type: Conversation.Message.Type, sender: string, logMessage(key: string, conversation: string, time: number, type: Conversation.Message.Type, sender: string,
message: string): Promise<void>; message: string): Promise<void>;
getBacklog(key: string): Promise<ReadonlyArray<NativeMessage>>; getBacklog(key: string): Promise<ReadonlyArray<NativeMessage>>;
getLogs(key: string, date: number): Promise<ReadonlyArray<NativeMessage>> getLogs(character: string, key: string, date: number): Promise<ReadonlyArray<NativeMessage>>
}; };
} }
@ -36,6 +38,8 @@ type Index = {[key: string]: {name: string, dates: number[]} | undefined};
export class Logs implements Logging { export class Logs implements Logging {
private index: Index = {}; private index: Index = {};
private loadedIndex?: Index;
private loadedCharacter?: string;
constructor() { constructor() {
core.connection.onEvent('connecting', async() => { core.connection.onEvent('connecting', async() => {
@ -58,22 +62,35 @@ export class Logs implements Logging {
.map((x) => new MessageImpl(x.type, core.characters.get(x.sender), x.text, new Date(x.time * 1000))); .map((x) => new MessageImpl(x.type, core.characters.get(x.sender), x.text, new Date(x.time * 1000)));
} }
async getLogs(key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>> { private async getIndex(name: string): Promise<Index> {
return (await NativeLogs.getLogs(key, date.getTime() / dayMs)) if(this.loadedCharacter === name) return this.loadedIndex!;
this.loadedCharacter = name;
return this.loadedIndex = await NativeLogs.loadIndex(name);
}
async getLogs(character: string, key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>> {
await NativeLogs.loadIndex(character);
return (await NativeLogs.getLogs(character, key, Math.floor(date.getTime() / dayMs - date.getTimezoneOffset() / 1440)))
.map((x) => new MessageImpl(x.type, core.characters.get(x.sender), x.text, new Date(x.time * 1000))); .map((x) => new MessageImpl(x.type, core.characters.get(x.sender), x.text, new Date(x.time * 1000)));
} }
async getLogDates(key: string): Promise<ReadonlyArray<Date>> { async getLogDates(character: string, key: string): Promise<ReadonlyArray<Date>> {
const entry = this.index[key]; const entry = (await this.getIndex(character))[key];
if(entry === undefined) return []; if(entry === undefined) return [];
return entry.dates.map((x) => new Date(x * dayMs)); const offset = new Date().getTimezoneOffset() * 60000;
return entry.dates.map((x) => new Date(x * dayMs + offset));
} }
get conversations(): ReadonlyArray<{key: string, name: string}> { async getConversations(character: string): Promise<ReadonlyArray<{key: string, name: string}>> {
const index = await this.getIndex(character);
const conversations: {key: string, name: string}[] = []; const conversations: {key: string, name: string}[] = [];
for(const key in this.index) conversations.push({key, name: this.index[key]!.name}); for(const key in index) conversations.push({key, name: index[key]!.name});
return conversations; return conversations;
} }
async getAvailableCharacters(): Promise<ReadonlyArray<string>> {
return NativeLogs.getCharacters();
}
} }
export async function getGeneralSettings(): Promise<GeneralSettings | undefined> { export async function getGeneralSettings(): Promise<GeneralSettings | undefined> {

52
mobile/ios/F-Chat/Logs.swift
View File

@ -20,7 +20,9 @@ class Logs: NSObject, WKScriptMessageHandler {
let baseDir = FileManager.default.urls(for: .applicationSupportDirectory, in: .userDomainMask).first! let baseDir = FileManager.default.urls(for: .applicationSupportDirectory, in: .userDomainMask).first!
var buffer = UnsafeMutableRawPointer.allocate(bytes: 51000, alignedTo: 1) var buffer = UnsafeMutableRawPointer.allocate(bytes: 51000, alignedTo: 1)
var logDir: URL! var logDir: URL!
var character: String?
var index: [String: IndexItem]! var index: [String: IndexItem]!
var loadedIndex: [String: IndexItem]!
func userContentController(_ controller: WKUserContentController, didReceive message: WKScriptMessage) { func userContentController(_ controller: WKUserContentController, didReceive message: WKScriptMessage) {
let data = message.body as! [String: AnyObject] let data = message.body as! [String: AnyObject]
@ -30,12 +32,16 @@ class Logs: NSObject, WKScriptMessageHandler {
switch(data["_type"] as! String) { switch(data["_type"] as! String) {
case "init": case "init":
result = try initCharacter(data["character"] as! String) result = try initCharacter(data["character"] as! String)
case "loadIndex":
result = try loadIndex(data["character"] as! String)
case "getCharacters":
result = try getCharacters()
case "logMessage": case "logMessage":
try logMessage(data["key"] as! String, data["conversation"] as! NSString, (data["time"] as! NSNumber).uint32Value, (data["type"] as! NSNumber).uint8Value, data["sender"] as! NSString, data["message"] as! NSString) try logMessage(data["key"] as! String, data["conversation"] as! NSString, (data["time"] as! NSNumber).uint32Value, (data["type"] as! NSNumber).uint8Value, data["sender"] as! NSString, data["message"] as! NSString)
case "getBacklog": case "getBacklog":
result = try getBacklog(data["key"] as! String) result = try getBacklog(data["key"] as! String)
case "readString": case "getLogs":
result = try getLogs(data["key"] as! String, (data["date"] as! NSNumber).uint16Value) result = try getLogs(data["character"] as! String, data["key"] as! String, (data["date"] as! NSNumber).uint16Value)
default: default:
message.webView!.evaluateJavaScript("nativeError('\(key)',new Error('Unknown message type'))") message.webView!.evaluateJavaScript("nativeError('\(key)',new Error('Unknown message type'))")
return return
@ -43,15 +49,13 @@ class Logs: NSObject, WKScriptMessageHandler {
let output = result == nil ? "undefined" : result!; let output = result == nil ? "undefined" : result!;
message.webView!.evaluateJavaScript("nativeMessage('\(key)',\(output))") message.webView!.evaluateJavaScript("nativeMessage('\(key)',\(output))")
} catch(let error) { } catch(let error) {
message.webView!.evaluateJavaScript("nativeError('\(key)',new Error('File-\(data["_type"]!): \(error.localizedDescription)'))") message.webView!.evaluateJavaScript("nativeError('\(key)',new Error('Logs-\(data["_type"]!): \(error.localizedDescription)'))")
} }
} }
func initCharacter(_ name: String) throws -> String { func getIndex(_ character: String) throws -> [String: IndexItem] {
logDir = baseDir.appendingPathComponent("\(name)/logs", isDirectory: true) var index = [String: IndexItem]()
index = [String: IndexItem]() let files = try fm.contentsOfDirectory(at: baseDir.appendingPathComponent("\(character)/logs", isDirectory: true), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles])
try fm.createDirectory(at: logDir, withIntermediateDirectories: true, attributes: nil)
let files = try fm.contentsOfDirectory(at: logDir, includingPropertiesForKeys: nil, options: [.skipsHiddenFiles])
for file in files { for file in files {
if(!file.lastPathComponent.hasSuffix(".idx")) { continue } if(!file.lastPathComponent.hasSuffix(".idx")) { continue }
let data = NSData(contentsOf: file)! let data = NSData(contentsOf: file)!
@ -71,15 +75,30 @@ class Logs: NSObject, WKScriptMessageHandler {
} }
index[file.deletingPathExtension().lastPathComponent] = indexItem index[file.deletingPathExtension().lastPathComponent] = indexItem
} }
return index
}
func initCharacter(_ name: String) throws -> String {
logDir = baseDir.appendingPathComponent("\(name)/logs", isDirectory: true)
try fm.createDirectory(at: logDir, withIntermediateDirectories: true, attributes: nil)
index = try getIndex(name)
loadedIndex = index
return String(data: try JSONEncoder().encode(index), encoding: .utf8)! return String(data: try JSONEncoder().encode(index), encoding: .utf8)!
} }
func getCharacters() throws -> String {
let entries = try fm.contentsOfDirectory(at: baseDir, includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]).filter {
try $0.resourceValues(forKeys: [.isDirectoryKey]).isDirectory == true
}.map { $0.lastPathComponent }
return String(data: try JSONSerialization.data(withJSONObject: entries), encoding: .utf8)!;
}
func logMessage(_ key: String, _ conversation: NSString, _ time: UInt32, _ type: UInt8, _ sender: NSString, _ text: NSString) throws { func logMessage(_ key: String, _ conversation: NSString, _ time: UInt32, _ type: UInt8, _ sender: NSString, _ text: NSString) throws {
var time = time var time = time
var type = type var type = type
var day = UInt16(time / 86400) var day = UInt16(time / 86400)
let url = logDir.appendingPathComponent(key, isDirectory: false); let url = logDir.appendingPathComponent(key, isDirectory: false);
var indexItem = index[key] var indexItem = index![key]
if(indexItem == nil) { fm.createFile(atPath: url.path, contents: nil) } if(indexItem == nil) { fm.createFile(atPath: url.path, contents: nil) }
let fd = try FileHandle(forWritingTo: url) let fd = try FileHandle(forWritingTo: url)
fd.seekToEndOfFile() fd.seekToEndOfFile()
@ -90,7 +109,7 @@ class Logs: NSObject, WKScriptMessageHandler {
indexFd.seekToEndOfFile() indexFd.seekToEndOfFile()
if(indexItem == nil) { if(indexItem == nil) {
indexItem = IndexItem(conversation as String) indexItem = IndexItem(conversation as String)
index[key] = indexItem index![key] = indexItem
let cstring = conversation.utf8String let cstring = conversation.utf8String
var length = strlen(cstring) var length = strlen(cstring)
write(indexFd.fileDescriptor, &length, 1) write(indexFd.fileDescriptor, &length, 1)
@ -137,9 +156,9 @@ class Logs: NSObject, WKScriptMessageHandler {
return "[" + strings.reversed().joined(separator: ",") + "]" return "[" + strings.reversed().joined(separator: ",") + "]"
} }
func getLogs(_ key: String, _ date: UInt16) throws -> String { func getLogs(_ character: String, _ key: String, _ date: UInt16) throws -> String {
guard let offset = index[key]?.index[date] else { return "[]" } guard let offset = loadedIndex![key]?.index[date] else { return "[]" }
let url = logDir.appendingPathComponent(key, isDirectory: false) let url = baseDir.appendingPathComponent("\(character)/logs/\(key)", isDirectory: false)
let file = try FileHandle(forReadingFrom: url) let file = try FileHandle(forReadingFrom: url)
let size = file.seekToEndOfFile() let size = file.seekToEndOfFile()
file.seek(toFileOffset: offset) file.seek(toFileOffset: offset)
@ -154,6 +173,11 @@ class Logs: NSObject, WKScriptMessageHandler {
return json + "]" return json + "]"
} }
func loadIndex(_ name: String) throws -> String {
loadedIndex = name == character ? index : try getIndex(name)
return String(data: try JSONEncoder().encode(loadedIndex), encoding: .utf8)!
}
func deserializeMessage(_ checkDate: UInt16 = 0) -> (String, Int) { func deserializeMessage(_ checkDate: UInt16 = 0) -> (String, Int) {
let date = buffer.load(as: UInt32.self) let date = buffer.load(as: UInt32.self)
if(checkDate != 0 && date / 86400 != checkDate) { return ("", 0) } if(checkDate != 0 && date / 86400 != checkDate) { return ("", 0) }
@ -164,4 +188,4 @@ class Logs: NSObject, WKScriptMessageHandler {
let text = String(bytesNoCopy: buffer.advanced(by: 6 + senderLength + 2), length: textLength, encoding: .utf8, freeWhenDone: false)! let text = String(bytesNoCopy: buffer.advanced(by: 6 + senderLength + 2), length: textLength, encoding: .utf8, freeWhenDone: false)!
return ("{\"time\":\(date),\"type\":\(type),\"sender\":\(File.escape(sender)),\"text\":\(File.escape(text))}", senderLength + textLength + 8) return ("{\"time\":\(date),\"type\":\(type),\"sender\":\(File.escape(sender)),\"text\":\(File.escape(text))}", senderLength + textLength + 8)
} }
} }

10
mobile/ios/F-Chat/Notification.swift
View File

@ -21,7 +21,7 @@ class Notification: NSObject, WKScriptMessageHandler, UNUserNotificationCenterDe
} }
switch(data["_type"] as! String) { switch(data["_type"] as! String) {
case "notify": case "notify":
notify(data["notify"] as! Bool, data["title"] as! String, data["text"] as! String, data["icon"] as! String, data["sound"] as! String?, data["data"] as! String, callback) notify(data["notify"] as! Bool, data["title"] as! String, data["text"] as! String, data["icon"] as! String, data["sound"] as? String, data["data"] as! String, callback)
case "requestPermission": case "requestPermission":
requestPermission(callback) requestPermission(callback)
default: default:
@ -39,8 +39,12 @@ class Notification: NSObject, WKScriptMessageHandler, UNUserNotificationCenterDe
func notify(_ notify: Bool, _ title: String, _ text: String, _ icon: String, _ sound: String?, _ data: String, _ cb: (String?) -> Void) { func notify(_ notify: Bool, _ title: String, _ text: String, _ icon: String, _ sound: String?, _ data: String, _ cb: (String?) -> Void) {
if(!notify) { if(!notify) {
let player = try! AVAudioPlayer(contentsOf: Bundle.main.url(forResource: "www/sounds/" + sound!, withExtension: "wav")!) if(sound != nil) {
player.play() let player = try! AVAudioPlayer(contentsOf: Bundle.main.url(forResource: "www/sounds/" + sound!, withExtension: "wav")!)
player.play()
}
cb(nil)
return
} }
let content = UNMutableNotificationContent() let content = UNMutableNotificationContent()
content.title = title content.title = title

18
mobile/ios/F-Chat/ViewController.swift
View File

@ -13,6 +13,7 @@ class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
let js = try! String(contentsOfFile: scriptPath!) let js = try! String(contentsOfFile: scriptPath!)
let userScript = WKUserScript(source: js, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false) let userScript = WKUserScript(source: js, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false)
controller.addUserScript(userScript) controller.addUserScript(userScript)
controller.addUserScript(WKUserScript(source: "window.setupPlatform('ios')", injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false))
controller.add(File(), name: "File") controller.add(File(), name: "File")
controller.add(Notification(), name: "Notification") controller.add(Notification(), name: "Notification")
controller.add(Background(), name: "Background") controller.add(Background(), name: "Background")
@ -22,6 +23,7 @@ class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
config.setValue(true, forKey: "_alwaysRunsAtForegroundPriority") config.setValue(true, forKey: "_alwaysRunsAtForegroundPriority")
webView = WKWebView(frame: .zero, configuration: config) webView = WKWebView(frame: .zero, configuration: config)
webView.uiDelegate = self webView.uiDelegate = self
webView.navigationDelegate = self
view = webView view = webView
NotificationCenter.default.addObserver(self, selector: #selector(ViewController.keyboardWillShow), name: NSNotification.Name.UIKeyboardWillShow, object: nil) NotificationCenter.default.addObserver(self, selector: #selector(ViewController.keyboardWillShow), name: NSNotification.Name.UIKeyboardWillShow, object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(ViewController.keyboardWillHide), name: NSNotification.Name.UIKeyboardWillHide, object: nil) NotificationCenter.default.addObserver(self, selector: #selector(ViewController.keyboardWillHide), name: NSNotification.Name.UIKeyboardWillHide, object: nil)
@ -75,28 +77,28 @@ class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
present(alertController, animated: true, completion: nil) present(alertController, animated: true, completion: nil)
} }
func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? { func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
let url = navigationAction.request.url! let url = navigationAction.request.url!
if(url.isFileURL) {
decisionHandler(.allow)
return
}
decisionHandler(.cancel)
let str = url.absoluteString let str = url.absoluteString
if(url.scheme == "data") { if(url.scheme == "data") {
let start = str.index(of: ",")! let start = str.index(of: ",")!
let file = FileManager.default.temporaryDirectory.appendingPathComponent(str[str.index(str.startIndex, offsetBy: 5)..<start].removingPercentEncoding!) let file = FileManager.default.temporaryDirectory.appendingPathComponent(str[str.index(str.startIndex, offsetBy: 5)..<start].removingPercentEncoding!)
try! str.suffix(from: str.index(after: start)).removingPercentEncoding!.write(to: file, atomically: false, encoding: .utf8) try! str.suffix(from: str.index(after: start)).removingPercentEncoding!.write(to: file, atomically: false, encoding: .utf8)
self.present(UIActivityViewController(activityItems: [file], applicationActivities: nil), animated: true, completion: nil) self.present(UIActivityViewController(activityItems: [file], applicationActivities: nil), animated: true, completion: nil)
return nil return
} }
let match = profileRegex.matches(in: str, range: NSRange(location: 0, length: str.count)) let match = profileRegex.matches(in: str, range: NSRange(location: 0, length: str.count))
if(match.count == 1) { if(match.count == 1) {
let char = str[Range(match[0].range(at: 2), in: str)!].removingPercentEncoding!; let char = str[Range(match[0].range(at: 2), in: str)!].removingPercentEncoding!;
webView.evaluateJavaScript("document.dispatchEvent(new CustomEvent('open-profile',{detail:'\(char)'}))", completionHandler: nil) webView.evaluateJavaScript("document.dispatchEvent(new CustomEvent('open-profile',{detail:'\(char)'}))", completionHandler: nil)
return nil return
} }
UIApplication.shared.open(navigationAction.request.url!) UIApplication.shared.open(navigationAction.request.url!)
return nil
}
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
decisionHandler(.cancel)
} }
} }

10
mobile/ios/F-Chat/native.js
View File

@ -69,7 +69,13 @@ window.NativeLogs = {
getBacklog: function(key) { getBacklog: function(key) {
return sendMessage('Logs', 'getBacklog', {key: key}); return sendMessage('Logs', 'getBacklog', {key: key});
}, },
getLogs: function(key, date) { getLogs: function(character, key, date) {
return sendMessage('Logs', 'getBacklog', {key: key, date: date}); return sendMessage('Logs', 'getLogs', {character: character, key: key, date: date});
}, },
loadIndex: function(character) {
return sendMessage('Logs', 'loadIndex', {character: character});
},
getCharacters: function() {
return sendMessage('Logs', 'getCharacters', {});
}
}; };

36
package.json
View File

@ -5,41 +5,41 @@
"description": "F-List Exported", "description": "F-List Exported",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@fortawesome/fontawesome-free-webfonts": "^1.0.4", "@fortawesome/fontawesome-free-webfonts": "^1.0.5",
"@types/node": "^9.4.6", "@types/node": "^9.6.0",
"@types/sortablejs": "^1.3.31", "@types/sortablejs": "^1.3.31",
"axios": "^0.18.0", "axios": "^0.18.0",
"bootstrap": "^4.0.0", "bootstrap": "^4.0.0",
"css-loader": "^0.28.10", "css-loader": "^0.28.11",
"date-fns": "^1.28.5", "date-fns": "^1.28.5",
"electron": "^1.8.1", "electron": "^1.8.4",
"electron-builder": "^20.2.0", "electron-builder": "^20.8.1",
"electron-log": "^2.2.9", "electron-log": "^2.2.9",
"electron-updater": "^2.8.9", "electron-updater": "^2.21.4",
"extract-text-webpack-plugin": "4.0.0-beta.0", "extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "^1.1.11", "file-loader": "^1.1.11",
"fork-ts-checker-webpack-plugin": "^0.4.0", "fork-ts-checker-webpack-plugin": "^0.4.1",
"lodash": "^4.16.4", "lodash": "^4.16.4",
"node-sass": "^4.7.2", "node-sass": "^4.8.3",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^4.0.0",
"qs": "^6.5.1", "qs": "^6.5.1",
"raven-js": "^3.23.1", "raven-js": "^3.24.0",
"sass-loader": "^6.0.7", "sass-loader": "^6.0.7",
"sortablejs": "^1.6.0", "sortablejs": "^1.6.0",
"ts-loader": "^4.0.1", "ts-loader": "^4.1.0",
"tslib": "^1.7.1", "tslib": "^1.7.1",
"tslint": "^5.7.0", "tslint": "^5.7.0",
"typescript": "^2.4.2", "typescript": "^2.8.1",
"vue": "^2.4.2", "vue": "^2.5.16",
"vue-class-component": "^6.0.0", "vue-class-component": "^6.0.0",
"vue-loader": "^14.1.1", "vue-loader": "^14.2.2",
"vue-property-decorator": "^6.0.0", "vue-property-decorator": "^6.0.0",
"vue-template-compiler": "^2.4.2", "vue-template-compiler": "^2.5.16",
"webpack": "^4.0.1" "webpack": "^4.3.0"
}, },
"dependencies": { "dependencies": {
"@types/lodash": "^4.14.104", "@types/lodash": "^4.14.106",
"keytar": "^4.2.0", "keytar": "^4.2.1",
"spellchecker": "^3.4.3" "spellchecker": "^3.4.3"
} }
} }

5
readme.md
View File

@ -26,6 +26,11 @@ See https://electron.atom.io/docs/tutorial/application-distribution/
- For Android, change into the `android` directory and run `./gradlew assembleDebug`. The generated APK is placed into `app/build/outputs/apk`. - For Android, change into the `android` directory and run `./gradlew assembleDebug`. The generated APK is placed into `app/build/outputs/apk`.
- For iOS, change into the `ios` directory and open `F-Chat.xcodeproj` using XCode. From there, simply run the app using the play button. - For iOS, change into the `ios` directory and open `F-Chat.xcodeproj` using XCode. From there, simply run the app using the play button.
## Building for Web
- Change into the `webchat` directory.
- Run `yarn build`/`yarn watch` to build assets. They are placed into the `dist` directory.
- The compiled main.js file can be included by an HTML file that is expected to provide a global `const chatSettings: {account: string, theme: string, characters: ReadonlyArray<string>, defaultCharacter: string | null};`. It should also normalize the page to 100% height.
## Building a custom theme ## Building a custom theme
See [the wiki](https://wiki.f-list.net/F-Chat_3.0/Themes) for instructions on how to create a custom theme. See [the wiki](https://wiki.f-list.net/F-Chat_3.0/Themes) for instructions on how to create a custom theme.
- Change into the `scss` directory. - Change into the `scss` directory.

3
scss/_bbcode_editor.scss
View File

@ -1,6 +1,9 @@
.bbcode-editor-text-area { .bbcode-editor-text-area {
textarea { textarea {
min-height: 150px; min-height: 150px;
&:focus {
box-shadow: 0 0 0 ($input-btn-focus-width / 2) $input-btn-focus-color;
}
} }
} }

64
scss/_chat.scss
View File

@ -69,10 +69,10 @@
padding: 10px; padding: 10px;
.body { .body {
height: 100%;
display: none; display: none;
width: 200px; width: 200px;
flex-direction: column; flex-direction: column;
max-height: 100%;
overflow: auto; overflow: auto;
} }
@ -155,7 +155,12 @@
} }
.border-bottom { .border-bottom {
border-bottom: solid 1px $card-border-color; border-bottom: solid 2px $gray-300;
}
.user-view {
cursor: pointer;
font-weight: 600;
} }
.message { .message {
@ -189,11 +194,11 @@
} }
.message-event { .message-event {
color: $gray-500; color: $text-muted;
} }
.message-time { .message-time {
color: $gray-700; color: $text-dark;
} }
.message-highlight { .message-highlight {
@ -211,40 +216,33 @@
border-bottom: solid 2px theme-color-level("success", -2) !important; border-bottom: solid 2px theme-color-level("success", -2) !important;
} }
.fa.active { .fas.active {
color: theme-color("success"); color: theme-color("success");
} }
.gender-shemale { $genders: (
color: #CC66FF; "shemale": #CC66FF,
"herm": #9B30FF,
"none": $gray-500,
"female": #FF6699,
"male": #6699FF,
"male-herm": #007FFF,
"transgender": #EE8822,
"cunt-boy": #00CC66,
);
@each $gender, $color in $genders {
.gender-#{$gender} {
color: $color;
}
.message-event .gender-#{$gender} {
color: lighten($color, 5%)
}
} }
.gender-herm { .user-bookmark {
color: #9B30FF; color: #66CC33;
}
.gender-none {
color: $gray-500;
}
.gender-female {
color: #FF6699;
}
.gender-male {
color: #6699FF;
}
.gender-male-herm {
color: #007FFF;
}
.gender-transgender {
color: #EE8822;
}
.gender-cunt-boy {
color: #00CC66;
} }
#character-page-sidebar { #character-page-sidebar {

1
scss/_core.scss
View File

@ -56,4 +56,5 @@
* { * {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
min-height: 0;
} }

3
scss/_flist_derived.scss
View File

@ -13,7 +13,7 @@ $gray-color: #ccc !default;
$orange-color: #f60 !default; $orange-color: #f60 !default;
$collapse-header-bg: $card-bg !default; $collapse-header-bg: $card-bg !default;
$collapse-border: darken($card-border-color, 25%) !default; $collapse-border: darken($card-border-color, 25%) !default;
$text-dark: $text-muted !default;
// Character page quick kink comparison // Character page quick kink comparison
$quick-compare-active-border: $black-color !default; $quick-compare-active-border: $black-color !default;
@ -53,4 +53,5 @@ $text-background-color-disabled: $gray-800 !default;
select { select {
@extend .custom-select; @extend .custom-select;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none;
} }

7
scss/themes/variables/_dark_variables.scss
View File

@ -15,13 +15,14 @@ $black: #fff;
// Theme and brand colors // Theme and brand colors
$primary: #003399; $primary: #003399;
$secondary: $gray-200; $secondary: $gray-300;
$success: darken(#009900, 5%); $success: darken(#009900, 5%);
$info: #003399; $info: #003399;
$warning: #c26c00; $warning: #c26c00;
$danger: darken(#930300, 5%); $danger: darken(#930300, 5%);
$light: $gray-100; $light: $gray-100;
$text-muted: $gray-400; $text-muted: $gray-400;
$text-dark: $gray-500;
$component-active-color: $gray-800; $component-active-color: $gray-800;
// Core page element colors // Core page element colors
@ -32,9 +33,8 @@ $link-hover-color: lighten($link-color, 15%);
$dropdown-bg: $gray-200; $dropdown-bg: $gray-200;
// Modal Dialogs // Modal Dialogs
$modal-backdrop-bg: $white;
$modal-content-bg: $gray-100; $modal-content-bg: $gray-100;
$modal-backdrop-opacity: .7;
$modal-backdrop-bg: rgba($white, $modal-backdrop-opacity);
$modal-header-border-color: $gray-200; $modal-header-border-color: $gray-200;
// Fix YIQ(automatic text contrast) preferring black over white on dark themes. // Fix YIQ(automatic text contrast) preferring black over white on dark themes.
@ -46,6 +46,7 @@ $grid-gutter-width: 20px;
// Form Elements // Form Elements
$input-bg: $gray-100; $input-bg: $gray-100;
$input-color: $black; $input-color: $black;
$input-border-color: $secondary;
$custom-select-bg: $gray-200; $custom-select-bg: $gray-200;
// List groups // List groups

6
scss/themes/variables/_default_variables.scss
View File

@ -15,13 +15,14 @@ $black: #fff;
// Theme and brand colors // Theme and brand colors
$primary: #0447af; $primary: #0447af;
$secondary: $gray-300; $secondary: $gray-400;
$success: darken(#009900, 5%); $success: darken(#009900, 5%);
$info: #0447af; $info: #0447af;
$warning: #f29c00; $warning: #f29c00;
$danger: #930300; $danger: #930300;
$light: $gray-200; $light: $gray-200;
$text-muted: $gray-500; $text-muted: $gray-500;
$text-dark: $gray-600;
$component-active-color: $gray-900; $component-active-color: $gray-900;
// Core page element colors // Core page element colors
@ -31,8 +32,7 @@ $link-hover-color: lighten($link-color, 15%);
$dropdown-bg: $gray-200; $dropdown-bg: $gray-200;
// Modal Dialogs // Modal Dialogs
$modal-backdrop-opacity: .7; $modal-backdrop-bg: $white;
$modal-backdrop-bg: rgba($white, $modal-backdrop-opacity);
$modal-content-bg: $gray-100; $modal-content-bg: $gray-100;
$modal-header-border-color: $gray-300; $modal-header-border-color: $gray-300;

15
scss/themes/variables/_light_variables.scss
View File

@ -1 +1,14 @@
$warning: #e09d3e; $warning: #e09d3e;
$gray-100: #e5e5e5 !default;
$gray-200: #cccccc !default;
$gray-300: #b2b2b2 !default;
$gray-400: #999999 !default;
$gray-500: #7f7f7f !default;
$gray-600: #666666 !default;
$gray-700: #4c4c4c !default;
$gray-800: #333333 !default;
$gray-900: #191919 !default;
$secondary: $gray-400;
$body-bg: #eeeeee;
$text-muted: $gray-500;

2
site/character_page/character_page.vue
View File

@ -48,7 +48,7 @@
</div> </div>
<div v-if="character.settings.guestbook" role="tabpanel" class="tab-pane" :class="{active: tab == 4}" <div v-if="character.settings.guestbook" role="tabpanel" class="tab-pane" :class="{active: tab == 4}"
id="guestbook"> id="guestbook">
<character-guestbook :character="character" ref="tab4"></character-guestbook> <character-guestbook :character="character" :oldApi="oldApi" ref="tab4"></character-guestbook>
</div> </div>
<div v-if="character.is_self || character.settings.show_friends" role="tabpanel" class="tab-pane" <div v-if="character.is_self || character.settings.show_friends" role="tabpanel" class="tab-pane"
:class="{active: tab == 5}" id="friends"> :class="{active: tab == 5}" id="friends">

5
site/character_page/guestbook.vue
View File

@ -10,7 +10,7 @@
<template v-if="!loading"> <template v-if="!loading">
<div class="alert alert-info" v-show="posts.length === 0">No guestbook posts.</div> <div class="alert alert-info" v-show="posts.length === 0">No guestbook posts.</div>
<guestbook-post :post="post" :can-edit="canEdit" v-for="post in posts" :key="post.id" @reload="getPage"></guestbook-post> <guestbook-post :post="post" :can-edit="canEdit" v-for="post in posts" :key="post.id" @reload="getPage"></guestbook-post>
<div v-if="authenticated" class="form-horizontal"> <div v-if="authenticated && !oldApi" class="form-horizontal">
<bbcode-editor v-model="newPost.message" :maxlength="5000" classes="form-control"></bbcode-editor> <bbcode-editor v-model="newPost.message" :maxlength="5000" classes="form-control"></bbcode-editor>
<input type="checkbox" id="guestbookPostPrivate" v-model="newPost.privatePost"/> <input type="checkbox" id="guestbookPostPrivate" v-model="newPost.privatePost"/>
<label class="control-label" for="guestbookPostPrivate">Private(only visible to owner)</label><br/> <label class="control-label" for="guestbookPostPrivate">Private(only visible to owner)</label><br/>
@ -43,7 +43,8 @@
export default class GuestbookView extends Vue { export default class GuestbookView extends Vue {
@Prop({required: true}) @Prop({required: true})
private readonly character!: Character; private readonly character!: Character;
@Prop()
readonly oldApi?: true;
loading = true; loading = true;
error = ''; error = '';
authenticated = Store.authenticated; authenticated = Store.authenticated;

2
site/character_page/images.vue
View File

@ -11,7 +11,7 @@
<div v-if="!loading && !images.length" class="alert alert-info">No images.</div> <div v-if="!loading && !images.length" class="alert alert-info">No images.</div>
<div class="image-preview" v-show="previewImage" @click="previewImage = ''"> <div class="image-preview" v-show="previewImage" @click="previewImage = ''">
<img :src="previewImage" /> <img :src="previewImage" />
<div class="modal-backdrop in"></div> <div class="modal-backdrop show"></div>
</div> </div>
</div> </div>
</template> </template>

2
site/utils.ts
View File

@ -36,7 +36,7 @@ export function groupObjectBy<K extends string, T extends {[k in K]: string}>(ob
const realItem = <T>obj[objkey]; const realItem = <T>obj[objkey];
const newKey = realItem[key]; const newKey = realItem[key];
if(newObject[<string>newKey] === undefined) newObject[newKey] = []; if(newObject[<string>newKey] === undefined) newObject[newKey] = [];
newObject[newKey]!.push(realItem); newObject[<string>newKey]!.push(realItem);
} }
return newObject; return newObject;
} }

35
webchat/chat.ts
View File

@ -2,7 +2,7 @@
* @license * @license
* MIT License * MIT License
* *
* Copyright (c) 2017 F-List * Copyright (c) 2018 F-List
* *
* Permission is hereby granted, free of charge, to any person obtaining a copy * Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal * of this software and associated documentation files (the "Software"), to deal
@ -24,7 +24,7 @@
* *
* This license header applies to this file and all of the non-third-party assets it includes. * This license header applies to this file and all of the non-third-party assets it includes.
* @file The entry point for the web version of F-Chat 3.0. * @file The entry point for the web version of F-Chat 3.0.
* @copyright 2017 F-List * @copyright 2018 F-List
* @author Maya Wolf <maya@f-list.net> * @author Maya Wolf <maya@f-list.net>
* @version 3.0 * @version 3.0
* @see {@link https://github.com/f-list/exported|GitHub repo} * @see {@link https://github.com/f-list/exported|GitHub repo}
@ -34,6 +34,7 @@ import * as Raven from 'raven-js';
import Vue from 'vue'; import Vue from 'vue';
import Chat from '../chat/Chat.vue'; import Chat from '../chat/Chat.vue';
import {init as initCore} from '../chat/core'; import {init as initCore} from '../chat/core';
import l from '../chat/localize';
import Notifications from '../chat/notifications'; import Notifications from '../chat/notifications';
import VueRaven from '../chat/vue-raven'; import VueRaven from '../chat/vue-raven';
import Socket from '../chat/WebSocket'; import Socket from '../chat/WebSocket';
@ -41,17 +42,23 @@ import Connection from '../fchat/connection';
import '../scss/fa.scss'; //tslint:disable-line:no-import-side-effect import '../scss/fa.scss'; //tslint:disable-line:no-import-side-effect
import {Logs, SettingsStore} from './logs'; import {Logs, SettingsStore} from './logs';
declare const chatSettings: {account: string, theme: string, characters: ReadonlyArray<string>, defaultCharacter: string | null}; if(typeof Promise !== 'function' || typeof Notification !== 'function') //tslint:disable-line:strict-type-predicates
alert('Your browser is too old to be supported by F-Chat 3.0. Please update to a newer version.');
const version = (<{version: string}>require('./package.json')).version; //tslint:disable-line:no-require-imports
Axios.defaults.params = { __fchat: `web/${version}` };
if(process.env.NODE_ENV === 'production') { if(process.env.NODE_ENV === 'production') {
Raven.config('https://a9239b17b0a14f72ba85e8729b9d1612@sentry.f-list.net/2', { Raven.config('https://a9239b17b0a14f72ba85e8729b9d1612@sentry.f-list.net/2', {
release: `web-${require('./package.json').version}`, //tslint:disable-line:no-require-imports no-unsafe-any release: `web-${version}`,
dataCallback: (data: {culprit: string, exception: {values: {stacktrace: {frames: {filename: string}[]}}[]}}) => { dataCallback: (data: {culprit: string, exception: {values: {stacktrace: {frames: {filename: string}[]}}[]}}) => {
data.culprit = `~${data.culprit.substr(data.culprit.lastIndexOf('/'))}`; const end = data.culprit.lastIndexOf('?');
data.culprit = `~${data.culprit.substring(data.culprit.lastIndexOf('/'), end === -1 ? undefined : end)}`;
for(const ex of data.exception.values) for(const ex of data.exception.values)
for(const frame of ex.stacktrace.frames) { for(const frame of ex.stacktrace.frames) {
const index = frame.filename.lastIndexOf('/'); const index = frame.filename.lastIndexOf('/');
frame.filename = index !== -1 ? `~${frame.filename.substr(index)}` : frame.filename; const endIndex = frame.filename.lastIndexOf('?');
frame.filename = `~${frame.filename.substring(index !== -1 ? index : 0, endIndex === -1 ? undefined : endIndex)}`;
} }
} }
}).addPlugin(VueRaven, Vue).install(); }).addPlugin(VueRaven, Vue).install();
@ -60,6 +67,8 @@ if(process.env.NODE_ENV === 'production') {
}; };
} }
declare const chatSettings: {account: string, theme: string, characters: ReadonlyArray<string>, defaultCharacter: string | null};
const ticketProvider = async() => { const ticketProvider = async() => {
const data = (await Axios.post<{ticket?: string, error: string}>( const data = (await Axios.post<{ticket?: string, error: string}>(
'/json/getApiTicket.php?no_friends=true&no_bookmarks=true&no_characters=true')).data; '/json/getApiTicket.php?no_friends=true&no_bookmarks=true&no_characters=true')).data;
@ -67,14 +76,18 @@ const ticketProvider = async() => {
throw new Error(data.error); throw new Error(data.error);
}; };
initCore(new Connection('F-Chat 3.0 (Web)', '3.0', Socket, chatSettings.account, ticketProvider), Logs, SettingsStore, Notifications); const connection = new Connection('F-Chat 3.0 (Web)', '3.0', Socket, chatSettings.account, ticketProvider);
initCore(connection, Logs, SettingsStore, Notifications);
window.addEventListener('beforeunload', (e) => {
if(!connection.isOpen) return;
e.returnValue = l('chat.confirmLeave');
return l('chat.confirmLeave');
});
require(`../scss/themes/chat/${chatSettings.theme}.scss`); require(`../scss/themes/chat/${chatSettings.theme}.scss`);
new Chat({ //tslint:disable-line:no-unused-expression new Chat({ //tslint:disable-line:no-unused-expression
el: '#app', el: '#app',
propsData: { propsData: {ownCharacters: chatSettings.characters, defaultCharacter: chatSettings.defaultCharacter, version}
ownCharacters: chatSettings.characters,
defaultCharacter: chatSettings.defaultCharacter
}
}); });

148
webchat/logs.ts
View File

@ -4,7 +4,7 @@ import {Conversation, Logs as Logging, Settings} from '../chat/interfaces';
type StoredConversation = {id: number, key: string, name: string}; type StoredConversation = {id: number, key: string, name: string};
type StoredMessage = { type StoredMessage = {
id: number, conversation: number, type: Conversation.Message.Type, sender: string, text: string, time: Date, day: number id: number, conversation: number, type: Conversation.Message.Type, sender: string, text: string, time: Date, day: number | string
}; };
async function promisifyRequest<T>(req: IDBRequest): Promise<T> { async function promisifyRequest<T>(req: IDBRequest): Promise<T> {
@ -14,19 +14,12 @@ async function promisifyRequest<T>(req: IDBRequest): Promise<T> {
}); });
} }
async function promisifyTransaction(req: IDBTransaction): Promise<Event> { async function iterate<S, T>(request: IDBRequest, map: (stored: S) => T, count: number = -1): Promise<T[]> {
return new Promise<Event>((resolve, reject) => {
req.oncomplete = resolve;
req.onerror = reject;
});
}
async function iterate<S, T>(request: IDBRequest, map: (stored: S) => T): Promise<ReadonlyArray<T>> {
const array: T[] = []; const array: T[] = [];
return new Promise<ReadonlyArray<T>>((resolve, reject) => { return new Promise<T[]>((resolve, reject) => {
request.onsuccess = function(): void { request.onsuccess = function(): void {
const c = <IDBCursorWithValue | undefined>this.result; const c = <IDBCursorWithValue | undefined>this.result;
if(!c) return resolve(array); //tslint:disable-line:strict-boolean-expressions if(!c || count !== -1 && array.length >= count) return resolve(array); //tslint:disable-line:strict-boolean-expressions
array.push(map(<S>c.value)); array.push(map(<S>c.value));
c.continue(); c.continue();
}; };
@ -35,87 +28,136 @@ async function iterate<S, T>(request: IDBRequest, map: (stored: S) => T): Promis
} }
const dayMs = 86400000; const dayMs = 86400000;
const charactersKey = 'fchat.characters';
let hasComposite = true;
let getComposite: (conv: number, day: number) => string | number[] = (conv, day) => [conv, day];
const decode = (str: string) => (str.charCodeAt(0) << 16) + str.charCodeAt(1);
try {
IDBKeyRange.only([]);
} catch {
hasComposite = false;
const encode = (num: number) => String.fromCharCode((num >> 16) % 65536) + String.fromCharCode(num % 65536);
getComposite = (conv, day) => `${encode(conv)}${encode(day)}`;
}
type Index = {[key: string]: StoredConversation | undefined};
async function openDatabase(character: string): Promise<IDBDatabase> {
const request = window.indexedDB.open(`logs-${character}`);
request.onupgradeneeded = () => {
const db = <IDBDatabase>request.result;
const logsStore = db.createObjectStore('logs', {keyPath: 'id', autoIncrement: true});
logsStore.createIndex('conversation', 'conversation');
logsStore.createIndex('conversation-day', hasComposite ? ['conversation', 'day'] : 'day');
db.createObjectStore('conversations', {keyPath: 'id', autoIncrement: true});
};
return promisifyRequest<IDBDatabase>(request);
}
async function getIndex(db: IDBDatabase): Promise<Index> {
const trans = db.transaction(['conversations']);
const index: Index = {};
await iterate(trans.objectStore('conversations').openCursor(), (x: StoredConversation) => index[x.key] = x);
return index;
}
export class Logs implements Logging { export class Logs implements Logging {
index!: {[key: string]: StoredConversation | undefined}; index?: Index;
loadedDb?: IDBDatabase;
loadedCharacter?: string;
loadedIndex?: Index;
db!: IDBDatabase; db!: IDBDatabase;
constructor() { constructor() {
core.connection.onEvent('connecting', async() => { core.connection.onEvent('connecting', async() => {
const request = window.indexedDB.open('logs'); const characters = (await this.getAvailableCharacters());
request.onupgradeneeded = () => { if(characters.indexOf(core.connection.character) === -1)
const db = <IDBDatabase>request.result; window.localStorage.setItem(charactersKey, JSON.stringify(characters.concat(core.connection.character)));
const logsStore = db.createObjectStore('logs', {keyPath: 'id', autoIncrement: true}); this.db = await openDatabase(core.connection.character);
logsStore.createIndex('conversation', 'conversation'); this.index = await getIndex(this.db);
logsStore.createIndex('conversation-day', ['conversation', 'day']);
db.createObjectStore('conversations', {keyPath: 'id', autoIncrement: true});
};
this.db = await promisifyRequest<IDBDatabase>(request);
const trans = this.db.transaction(['conversations']);
this.index = {};
await iterate(trans.objectStore('conversations').openCursor(), (x: StoredConversation) => this.index[x.key] = x);
}); });
} }
async logMessage(conversation: Conversation, message: Conversation.Message): Promise<void> { async logMessage(conversation: Conversation, message: Conversation.Message): Promise<void> {
const trans = this.db.transaction(['logs', 'conversations'], 'readwrite'); let conv = this.index![conversation.key];
let conv = this.index[conversation.key];
if(conv === undefined) { if(conv === undefined) {
const convId = await promisifyRequest<number>(trans.objectStore('conversations').add( const cTrans = this.db.transaction(['conversations'], 'readwrite');
const convId = await promisifyRequest<number>(cTrans.objectStore('conversations').add(
{key: conversation.key, name: conversation.name})); {key: conversation.key, name: conversation.name}));
this.index[conversation.key] = conv = {id: convId, key: conversation.key, name: conversation.name}; this.index![conversation.key] = conv = {id: convId, key: conversation.key, name: conversation.name};
} }
const lTrans = this.db.transaction(['logs'], 'readwrite');
const sender = message.type === Conversation.Message.Type.Event ? undefined : message.sender.name; const sender = message.type === Conversation.Message.Type.Event ? undefined : message.sender.name;
const day = Math.floor(message.time.getTime() / dayMs - message.time.getTimezoneOffset() / 1440); const day = Math.floor(message.time.getTime() / dayMs - message.time.getTimezoneOffset() / 1440);
await promisifyRequest<number>(trans.objectStore('logs').put( const dayValue = hasComposite ? day : getComposite(conv.id, day);
{conversation: conv.id, type: message.type, sender, text: message.text, date: message.time, day})); await promisifyRequest<number>(lTrans.objectStore('logs').put(
await promisifyTransaction(trans); {conversation: conv.id, type: message.type, sender, text: message.text, time: message.time, day: dayValue}));
} }
async getBacklog(conversation: Conversation): Promise<ReadonlyArray<Conversation.Message>> { async getBacklog(conversation: Conversation): Promise<ReadonlyArray<Conversation.Message>> {
const trans = this.db.transaction(['logs', 'conversations']); const trans = this.db.transaction(['logs']);
const conv = this.index[conversation.key]; const conv = this.index![conversation.key];
if(conv === undefined) return []; if(conv === undefined) return [];
return iterate(trans.objectStore('logs').index('conversation').openCursor(conv.id, 'prev'), return (await iterate(trans.objectStore('logs').index('conversation').openCursor(conv.id, 'prev'),
(value: StoredMessage) => value.type === Conversation.Message.Type.Event ? new EventMessage(value.text, value.time) : (value: StoredMessage) => value.type === Conversation.Message.Type.Event ? new EventMessage(value.text, value.time) :
new Message(value.type, core.characters.get(value.sender), value.text, value.time)); new Message(value.type, core.characters.get(value.sender), value.text, value.time), 20)).reverse();
} }
get conversations(): ReadonlyArray<{key: string, name: string}> { private async loadIndex(character: string): Promise<Index> {
return Object.keys(this.index).map((k) => this.index[k]!); if(character === this.loadedCharacter) return this.loadedIndex!;
this.loadedCharacter = character;
if(character === core.connection.character) {
this.loadedDb = this.db;
this.loadedIndex = this.index;
} else {
this.loadedDb = await openDatabase(character);
this.loadedIndex = await getIndex(this.loadedDb);
}
return this.loadedIndex!;
} }
async getLogs(key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>> { async getConversations(character: string): Promise<ReadonlyArray<{key: string, name: string}>> {
const trans = this.db.transaction(['logs']); const index = await this.loadIndex(character);
const id = this.index[key]!.id; return Object.keys(index).map((k) => index[k]!);
}
async getLogs(character: string, key: string, date: Date): Promise<ReadonlyArray<Conversation.Message>> {
const id = (await this.loadIndex(character))[key]!.id;
const trans = this.loadedDb!.transaction(['logs']);
const day = Math.floor(date.getTime() / dayMs - date.getTimezoneOffset() / 1440); const day = Math.floor(date.getTime() / dayMs - date.getTimezoneOffset() / 1440);
return iterate(trans.objectStore('logs').index('conversation-day').openCursor([id, day]), return iterate(trans.objectStore('logs').index('conversation-day').openCursor(getComposite(id, day)),
(value: StoredMessage) => value.type === Conversation.Message.Type.Event ? new EventMessage(value.text, value.time) : (value: StoredMessage) => value.type === Conversation.Message.Type.Event ? new EventMessage(value.text, value.time) :
new Message(value.type, core.characters.get(value.sender), value.text, value.time)); new Message(value.type, core.characters.get(value.sender), value.text, value.time));
} }
async getLogDates(key: string): Promise<ReadonlyArray<Date>> { async getLogDates(character: string, key: string): Promise<ReadonlyArray<Date>> {
const trans = this.db.transaction(['logs']); const id = (await this.loadIndex(character))[key]!.id;
const offset = new Date().getTimezoneOffset() * 1440; const trans = this.loadedDb!.transaction(['logs']);
const id = this.index[key]!.id; const offset = new Date().getTimezoneOffset() * 60000;
const bound = IDBKeyRange.bound([id, 0], [id, 100000]); const bound = IDBKeyRange.bound(getComposite(id, 0), getComposite(id, 1000000));
return iterate(trans.objectStore('logs').index('conversation-day').openCursor(bound, 'nextunique'), return iterate(trans.objectStore('logs').index('conversation-day').openCursor(bound, 'nextunique'), (value: StoredMessage) =>
(value: StoredMessage) => new Date(value.day * dayMs + offset)); new Date((hasComposite ? <number>value.day : decode((<string>value.day).substr(2))) * dayMs + offset));
}
async getAvailableCharacters(): Promise<ReadonlyArray<string>> {
const stored = window.localStorage.getItem(charactersKey);
return stored !== null ? JSON.parse(stored) as string[] : [];
} }
} }
export class SettingsStore implements Settings.Store { export class SettingsStore implements Settings.Store {
async get<K extends keyof Settings.Keys>(key: K): Promise<Settings.Keys[K]> { async get<K extends keyof Settings.Keys>(key: K): Promise<Settings.Keys[K] | undefined> {
const stored = window.localStorage.getItem(`settings.${key}`); const stored = window.localStorage.getItem(`${core.connection.character}.settings.${key}`);
return Promise.resolve(stored !== null ? JSON.parse(stored) : undefined); return stored !== null ? JSON.parse(stored) as Settings.Keys[K] : undefined;
} }
async set<K extends keyof Settings.Keys>(key: K, value: Settings.Keys[K]): Promise<void> { async set<K extends keyof Settings.Keys>(key: K, value: Settings.Keys[K]): Promise<void> {
window.localStorage.setItem(`settings.${key}`, JSON.stringify(value)); window.localStorage.setItem(`${core.connection.character}.settings.${key}`, JSON.stringify(value));
return Promise.resolve(); return Promise.resolve();
} }
async getAvailableCharacters(): Promise<ReadonlyArray<string>> { async getAvailableCharacters(): Promise<ReadonlyArray<string>> {
return Promise.resolve([]); const stored = window.localStorage.getItem(charactersKey);
return stored !== null ? JSON.parse(stored) as string[] : [];
} }
} }

2
webchat/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "net.f_list.fchat", "name": "net.f_list.fchat",
"version": "0.2.15", "version": "0.2.19",
"displayName": "F-Chat", "displayName": "F-Chat",
"author": "The F-List Team", "author": "The F-List Team",
"description": "F-List.net Chat Client", "description": "F-List.net Chat Client",

669
yarn.lock
View File

File diff suppressed because it is too large Load Diff