Some chat related updates
WolverinDEV
parent
a6263307b0
commit
7f1bc4db5f
|
|
@ -1,4 +1,11 @@
|
|||
# Changelog:
|
||||
* **30.01.20**
|
||||
- Improved chat message parsing
|
||||
- Fixed copy & paste error
|
||||
- Better handling for spaces & tab indention
|
||||
- Fixed internal audio codec error
|
||||
- Fixed modal spam on microphone start fail
|
||||
|
||||
* **21.12.19**
|
||||
- Improved background performance when the microphone has been muted
|
||||
- Added support for `[ul]` and `[ol]` tags within the chat
|
||||
|
|
@ -19,6 +26,7 @@
|
|||
- Improved "About" modal overflow behaviour
|
||||
- Allow the client to use the scroll bar without closing the modal within modals
|
||||
- Improved bookmarks modal for smaller devices
|
||||
- Fixed invalid white space representation
|
||||
|
||||
* **10.12.19**
|
||||
- Show the server online count along the server chat
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
//$color_client_normal: #bebebe;
|
||||
$color_client_normal: #cccccc;
|
||||
$client_info_avatar_size: 10em;
|
||||
$bot_thumbnail_width: 16em;
|
||||
$bot_thumbnail_height: 9em;
|
||||
|
||||
.container-chat-frame {
|
||||
flex-grow: 1;
|
||||
|
|
@ -153,6 +155,10 @@ $client_info_avatar_size: 10em;
|
|||
&.chat-counter {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.bot-add-song {
|
||||
color: #3f7538;
|
||||
}
|
||||
}
|
||||
|
||||
.small-value {
|
||||
|
|
@ -1380,5 +1386,95 @@ $client_info_avatar_size: 10em;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-music-info {
|
||||
position: relative;
|
||||
|
||||
height: 100%;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
|
||||
.player {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
|
||||
.container-thumbnail {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
margin: calc(#{$bot_thumbnail_height} / -2) .75em .5em .5em;
|
||||
|
||||
align-self: center;
|
||||
|
||||
border-radius: .5em;
|
||||
overflow: hidden;
|
||||
|
||||
.thumbnail {
|
||||
overflow: hidden;
|
||||
|
||||
width: $bot_thumbnail_width;
|
||||
height: $bot_thumbnail_height;
|
||||
|
||||
@include transition(opacity $button_hover_animation_time ease-in-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-close {
|
||||
font-size: 4em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
opacity: 0.3;
|
||||
|
||||
width: .5em;
|
||||
height: .5em;
|
||||
|
||||
margin-right: .1em;
|
||||
margin-top: .1em;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@include transition(opacity $button_hover_animation_time ease-in-out);
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
left: .25em;
|
||||
content: ' ';
|
||||
height: .5em;
|
||||
width: .05em;
|
||||
background-color: #5a5a5a;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -254,6 +254,12 @@
|
|||
<div class="block left mode-based mode-private_chat">
|
||||
<div class="button button-switch-chat-channel">{{tr "Switch to channel chat" /}}</div>
|
||||
</div>
|
||||
|
||||
<div class="block left mode-based mode-music_bot">
|
||||
<div class="title"> </div>
|
||||
<div class="value button bot-manage">{{tr "Manage Bot" /}}</div>
|
||||
</div>
|
||||
|
||||
<div class="block left mode-based mode-client_info">
|
||||
<div class="spacer-client-info"></div>
|
||||
</div>
|
||||
|
|
@ -271,6 +277,11 @@
|
|||
<div class="title"> </div>
|
||||
<div class="value button open-conversation">error: open conversation</div>
|
||||
</div>
|
||||
|
||||
<div class="block right mode-based mode-music_bot">
|
||||
<div class="title"> </div>
|
||||
<div class="value button bot-add-song">{{tr "Add song" /}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
@ -494,6 +505,23 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script class="jsrender-template" id="tmpl_frame_chat_music_info" type="text/html">
|
||||
<div class="container-music-info">
|
||||
<div class="player">
|
||||
<div class="container-thumbnail">
|
||||
<div class="thumbnail">
|
||||
<img src="img/music/no-thumbnail.png" style="height: 100%; width: 100%">
|
||||
</div>
|
||||
</div>
|
||||
<a class="client-name"></a>
|
||||
<div class="container-description">
|
||||
<a class="client-description">error: description</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-close"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script class="jsrender-template" id="tmpl_select_info" type="text/html">
|
||||
<div class="select_info" style="width: 100%; max-width: 100%">
|
||||
<button type="button" class="close button-modal-close" aria-label="Close">
|
||||
|
|
|
|||
|
|
@ -621,6 +621,7 @@ class ConnectionHandler {
|
|||
control_bar.update_connection_state();
|
||||
}
|
||||
|
||||
private _last_record_error_popup: number;
|
||||
update_voice_status(targetChannel?: ChannelEntry) {
|
||||
if(!this._local_client) return; /* we've been destroyed */
|
||||
|
||||
|
|
@ -706,13 +707,14 @@ class ConnectionHandler {
|
|||
if(active && this.serverConnection.connected()) {
|
||||
if(vconnection.voice_recorder().input.current_state() === audio.recorder.InputState.PAUSED) {
|
||||
vconnection.voice_recorder().input.start().then(result => {
|
||||
if(result != audio.recorder.InputStartResult.EOK) {
|
||||
log.warn(LogCategory.VOICE, tr("Failed to start microphone input (%s)."), result);
|
||||
createErrorModal(tr("Failed to start recording"), MessageHelper.formatMessage(tr("Microphone start failed.{:br:}Error: {}"), result)).open();
|
||||
}
|
||||
if(result != audio.recorder.InputStartResult.EOK)
|
||||
throw result;
|
||||
}).catch(error => {
|
||||
log.warn(LogCategory.VOICE, tr("Failed to start microphone input (%s)."), error);
|
||||
if(Date.now() - (this._last_record_error_popup || 0) > 10 * 1000) {
|
||||
this._last_record_error_popup = Date.now();
|
||||
createErrorModal(tr("Failed to start recording"), MessageHelper.formatMessage(tr("Microphone start failed.{:br:}Error: {}"), error)).open();
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ namespace MessageHelper {
|
|||
"i-code", "icode",
|
||||
"sub", "sup",
|
||||
"size",
|
||||
"hr",
|
||||
"hr", "br",
|
||||
|
||||
"ul", "ol", "list",
|
||||
"li",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,248 @@
|
|||
namespace chat {
|
||||
declare function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
|
||||
export class ChatBox {
|
||||
private _html_tag: JQuery;
|
||||
private _html_input: JQuery<HTMLDivElement>;
|
||||
private _enabled: boolean;
|
||||
private __callback_text_changed;
|
||||
private __callback_key_down;
|
||||
private __callback_key_up;
|
||||
private __callback_paste;
|
||||
|
||||
private _typing_timeout: number; /* ID when the next callback_typing will be called */
|
||||
private _typing_last_event: number; /* timestamp of the last typing event */
|
||||
|
||||
private _message_history: string[] = [];
|
||||
private _message_history_length = 100;
|
||||
private _message_history_index = 0;
|
||||
|
||||
typing_interval: number = 2000; /* update frequency */
|
||||
callback_typing: () => any;
|
||||
callback_text: (text: string) => any;
|
||||
|
||||
constructor() {
|
||||
this._enabled = true;
|
||||
this.__callback_key_up = this._callback_key_up.bind(this);
|
||||
this.__callback_key_down = this._callback_key_down.bind(this);
|
||||
this.__callback_text_changed = this._callback_text_changed.bind(this);
|
||||
this.__callback_paste = event => this._callback_paste(event);
|
||||
|
||||
this._build_html_tag();
|
||||
this._initialize_listener();
|
||||
}
|
||||
|
||||
html_tag() : JQuery {
|
||||
return this._html_tag;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this._html_tag && this._html_tag.remove();
|
||||
this._html_tag = undefined;
|
||||
this._html_input = undefined;
|
||||
|
||||
clearTimeout(this._typing_timeout);
|
||||
|
||||
this.__callback_text_changed = undefined;
|
||||
this.__callback_key_down = undefined;
|
||||
this.__callback_paste = undefined;
|
||||
|
||||
this.callback_text = undefined;
|
||||
this.callback_typing = undefined;
|
||||
}
|
||||
|
||||
private _initialize_listener() {
|
||||
this._html_input.on("cut paste drop keydown keyup", (event) => this.__callback_text_changed(event));
|
||||
this._html_input.on("change", this.__callback_text_changed);
|
||||
this._html_input.on("keydown", this.__callback_key_down);
|
||||
this._html_input.on("keyup", this.__callback_key_up);
|
||||
this._html_input.on("paste", this.__callback_paste);
|
||||
}
|
||||
|
||||
private _build_html_tag() {
|
||||
this._html_tag = $("#tmpl_frame_chat_chatbox").renderTag({
|
||||
emojy_support: settings.static_global(Settings.KEY_CHAT_COLORED_EMOJIES)
|
||||
});
|
||||
this._html_input = this._html_tag.find(".textarea") as any;
|
||||
|
||||
const tag: JQuery & { lsxEmojiPicker(args: any); } = this._html_tag.find('.button-emoji') as any;
|
||||
tag.lsxEmojiPicker({
|
||||
width: 300,
|
||||
height: 400,
|
||||
twemoji: typeof(window.twemoji) !== "undefined",
|
||||
onSelect: emoji => this._html_input.html(this._html_input.html() + emoji.value),
|
||||
closeOnSelect: false
|
||||
});
|
||||
}
|
||||
|
||||
private _callback_text_changed(event: Event) {
|
||||
if(event && event.defaultPrevented)
|
||||
return;
|
||||
|
||||
/* Auto resize */
|
||||
const text = this._html_input[0];
|
||||
text.style.height = "1em";
|
||||
text.style.height = text.scrollHeight + 'px';
|
||||
|
||||
if(!event || (event.type !== "keydown" && event.type !== "keyup" && event.type !== "change"))
|
||||
return;
|
||||
|
||||
this._typing_last_event = Date.now();
|
||||
if(this._typing_timeout)
|
||||
return;
|
||||
|
||||
const _trigger_typing = (last_time: number) => {
|
||||
if(this._typing_last_event <= last_time) {
|
||||
this._typing_timeout = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if(this.callback_typing)
|
||||
this.callback_typing();
|
||||
} finally {
|
||||
this._typing_timeout = setTimeout(_trigger_typing, this.typing_interval, this._typing_last_event);
|
||||
}
|
||||
};
|
||||
_trigger_typing(0); /* We def want that*/
|
||||
}
|
||||
|
||||
private _text(element: HTMLElement) {
|
||||
if(typeof(element) !== "object")
|
||||
return element;
|
||||
|
||||
if(element instanceof HTMLImageElement)
|
||||
return element.alt || element.title;
|
||||
if(element instanceof HTMLBRElement) {
|
||||
return '\n';
|
||||
}
|
||||
|
||||
if(element.childNodes.length > 0)
|
||||
return [...element.childNodes].map(e => this._text(e as HTMLElement)).join("");
|
||||
|
||||
if(element.nodeType == Node.TEXT_NODE)
|
||||
return element.textContent;
|
||||
return typeof(element.innerText) === "string" ? element.innerText : "";
|
||||
}
|
||||
|
||||
private htmlEscape(message: string) : string {
|
||||
const div = document.createElement('div');
|
||||
div.innerText = message;
|
||||
message = div.innerHTML;
|
||||
return message.replace(/ /g, ' ');
|
||||
}
|
||||
private _callback_paste(event: ClipboardEvent) {
|
||||
|
||||
const _event = (<any>event).originalEvent as ClipboardEvent || event;
|
||||
const clipboard = _event.clipboardData || (<any>window).clipboardData;
|
||||
if(!clipboard) return;
|
||||
|
||||
|
||||
const raw_text = clipboard.getData('text/plain');
|
||||
const selection = window.getSelection();
|
||||
if (!selection.rangeCount)
|
||||
return false;
|
||||
|
||||
let html_xml = clipboard.getData('text/html');
|
||||
if(!html_xml)
|
||||
html_xml = $.spawn("div").text(raw_text).html();
|
||||
|
||||
const parser = new DOMParser();
|
||||
const nodes = parser.parseFromString(html_xml, "text/html");
|
||||
|
||||
const data = this._text(nodes.body);
|
||||
event.preventDefault();
|
||||
|
||||
selection.deleteFromDocument();
|
||||
document.execCommand('insertHTML', false, this.htmlEscape(data));
|
||||
}
|
||||
|
||||
private test_message(message: string) : boolean {
|
||||
message = message
|
||||
.replace(/ /gi, "")
|
||||
.replace(/<br>/gi, "")
|
||||
.replace(/\n/gi, "")
|
||||
.replace(/<br\/>/gi, "");
|
||||
return message.length > 0;
|
||||
}
|
||||
|
||||
private _callback_key_down(event: KeyboardEvent) {
|
||||
if(event.key.toLowerCase() === "enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
|
||||
/* deactivate chatbox when no callback? */
|
||||
let text = this._html_input[0].innerText as string;
|
||||
if(!this.test_message(text))
|
||||
return;
|
||||
|
||||
this._message_history.push(text);
|
||||
this._message_history_index = this._message_history.length;
|
||||
if(this._message_history.length > this._message_history_length)
|
||||
this._message_history = this._message_history.slice(this._message_history.length - this._message_history_length);
|
||||
|
||||
if(this.callback_text) {
|
||||
this.callback_text(helpers.preprocess_chat_message(text));
|
||||
}
|
||||
|
||||
if(this._typing_timeout)
|
||||
clearTimeout(this._typing_timeout);
|
||||
this._typing_timeout = 1; /* enforce no typing update while sending */
|
||||
this._html_input.text("");
|
||||
setTimeout(() => {
|
||||
this.__callback_text_changed();
|
||||
this._typing_timeout = 0; /* enable text change listener again */
|
||||
});
|
||||
} else if(event.key.toLowerCase() === "arrowdown") {
|
||||
//TODO: Test for at the last line within the box
|
||||
if(this._message_history_index < 0) return;
|
||||
if(this._message_history_index >= this._message_history.length) return; /* OOB, even with the empty message */
|
||||
|
||||
this._message_history_index++;
|
||||
this._html_input[0].innerText = this._message_history[this._message_history_index] || ""; /* OOB just returns "undefined" */
|
||||
} else if(event.key.toLowerCase() === "arrowup") {
|
||||
//TODO: Test for at the first line within the box
|
||||
if(this._message_history_index <= 0) return; /* we cant go "down" */
|
||||
this._message_history_index--;
|
||||
this._html_input[0].innerText = this._message_history[this._message_history_index];
|
||||
} else {
|
||||
if(this._message_history_index >= 0) {
|
||||
if(this._message_history_index >= this._message_history.length) {
|
||||
if("" !== this._html_input[0].innerText)
|
||||
this._message_history_index = -1;
|
||||
} else if(this._message_history[this._message_history_index] !== this._html_input[0].innerText)
|
||||
this._message_history_index = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _callback_key_up(event: KeyboardEvent) {
|
||||
if("" === this._html_input[0].innerText)
|
||||
this._message_history_index = this._message_history.length;
|
||||
}
|
||||
|
||||
private _context_task: number;
|
||||
set_enabled(flag: boolean) {
|
||||
if(this._enabled === flag)
|
||||
return;
|
||||
|
||||
if(!this._context_task) {
|
||||
this._enabled = flag;
|
||||
/* Allow the browser to asynchronously recalculate everything */
|
||||
this._context_task = setTimeout(() => {
|
||||
this._context_task = undefined;
|
||||
this._html_input.each((_, e) => { e.contentEditable = this._enabled ? "true" : "false"; });
|
||||
});
|
||||
this._html_tag.find('.button-emoji').toggleClass("disabled", !flag);
|
||||
}
|
||||
}
|
||||
|
||||
is_enabled() {
|
||||
return this._enabled;
|
||||
}
|
||||
|
||||
focus_input() {
|
||||
this._html_input.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,423 @@
|
|||
namespace chat {
|
||||
export namespace helpers {
|
||||
//https://regex101.com/r/YQbfcX/2
|
||||
//static readonly URL_REGEX = /^(?<hostname>([a-zA-Z0-9-]+\.)+[a-zA-Z0-9-]{2,63})(?:\/(?<path>(?:[^\s?]+)?)(?:\?(?<query>\S+))?)?$/gm;
|
||||
const URL_REGEX = /^(([a-zA-Z0-9-]+\.)+[a-zA-Z0-9-]{2,63})(?:\/((?:[^\s?]+)?)(?:\?(\S+))?)?$/gm;
|
||||
function process_urls(message: string) : string {
|
||||
const words = message.split(/[ \n]/);
|
||||
for(let index = 0; index < words.length; index++) {
|
||||
const flag_escaped = words[index].startsWith('!');
|
||||
const unescaped = flag_escaped ? words[index].substr(1) : words[index];
|
||||
|
||||
_try:
|
||||
try {
|
||||
const url = new URL(unescaped);
|
||||
log.debug(LogCategory.GENERAL, tr("Chat message contains URL: %o"), url);
|
||||
if(url.protocol !== 'http:' && url.protocol !== 'https:')
|
||||
break _try;
|
||||
if(flag_escaped) {
|
||||
message = undefined;
|
||||
words[index] = unescaped;
|
||||
} else {
|
||||
message = undefined;
|
||||
words[index] = "[url=" + url.toString() + "]" + url.toString() + "[/url]";
|
||||
}
|
||||
} catch(e) { /* word isn't an url */ }
|
||||
|
||||
if(unescaped.match(URL_REGEX)) {
|
||||
if(flag_escaped) {
|
||||
message = undefined;
|
||||
words[index] = unescaped;
|
||||
} else {
|
||||
message = undefined;
|
||||
words[index] = "[url=" + unescaped + "]" + unescaped + "[/url]";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return message || words.join(" ");
|
||||
}
|
||||
|
||||
namespace md2bbc {
|
||||
export type RemarkToken = {
|
||||
type: string;
|
||||
tight: boolean;
|
||||
lines: number[];
|
||||
level: number;
|
||||
|
||||
/* img */
|
||||
alt?: string;
|
||||
src?: string;
|
||||
|
||||
/* link */
|
||||
href?: string;
|
||||
|
||||
/* table */
|
||||
align?: string;
|
||||
|
||||
/* code */
|
||||
params?: string;
|
||||
|
||||
content?: string;
|
||||
hLevel?: number;
|
||||
children?: RemarkToken[];
|
||||
}
|
||||
|
||||
export class Renderer {
|
||||
private static renderers = {
|
||||
"text": (renderer: Renderer, token: RemarkToken) => renderer.options().process_url ? process_urls(renderer.maybe_escape_bb(token.content)) : renderer.maybe_escape_bb(token.content),
|
||||
"softbreak": () => "\n",
|
||||
"hardbreak": () => "\n",
|
||||
|
||||
"paragraph_open": (renderer: Renderer, token: RemarkToken) => {
|
||||
const last_line = !renderer.last_paragraph || !renderer.last_paragraph.lines ? 0 : renderer.last_paragraph.lines[1];
|
||||
const lines = token.lines[0] - last_line;
|
||||
return [...new Array(lines)].map(e => "[br]").join("");
|
||||
},
|
||||
"paragraph_close": () => "",
|
||||
|
||||
"strong_open": (renderer: Renderer, token: RemarkToken) => "[b]",
|
||||
"strong_close": (renderer: Renderer, token: RemarkToken) => "[/b]",
|
||||
|
||||
"em_open": (renderer: Renderer, token: RemarkToken) => "[i]",
|
||||
"em_close": (renderer: Renderer, token: RemarkToken) => "[/i]",
|
||||
|
||||
"del_open": () => "[s]",
|
||||
"del_close": () => "[/s]",
|
||||
|
||||
"sup": (renderer: Renderer, token: RemarkToken) => "[sup]" + renderer.maybe_escape_bb(token.content) + "[/sup]",
|
||||
"sub": (renderer: Renderer, token: RemarkToken) => "[sub]" + renderer.maybe_escape_bb(token.content) + "[/sub]",
|
||||
|
||||
"bullet_list_open": () => "[ul]",
|
||||
"bullet_list_close": () => "[/ul]",
|
||||
|
||||
"ordered_list_open": () => "[ol]",
|
||||
"ordered_list_close": () => "[/ol]",
|
||||
|
||||
"list_item_open": () => "[li]",
|
||||
"list_item_close": () => "[/li]",
|
||||
|
||||
"table_open": () => "[table]",
|
||||
"table_close": () => "[/table]",
|
||||
|
||||
"thead_open": () => "",
|
||||
"thead_close": () => "",
|
||||
|
||||
"tbody_open": () => "",
|
||||
"tbody_close": () => "",
|
||||
|
||||
"tr_open": () => "[tr]",
|
||||
"tr_close": () => "[/tr]",
|
||||
|
||||
"th_open": (renderer: Renderer, token: RemarkToken) => "[th" + (token.align ? ("=" + token.align) : "") + "]",
|
||||
"th_close": () => "[/th]",
|
||||
|
||||
"td_open": () => "[td]",
|
||||
"td_close": () => "[/td]",
|
||||
|
||||
"link_open": (renderer: Renderer, token: RemarkToken) => "[url" + (token.href ? ("=" + token.href) : "") + "]",
|
||||
"link_close": () => "[/url]",
|
||||
|
||||
"image": (renderer: Renderer, token: RemarkToken) => "[img=" + (token.src) + "]" + (token.alt || token.src) + "[/img]",
|
||||
|
||||
//footnote_ref
|
||||
|
||||
//"content": "==Marked text==",
|
||||
//mark_open
|
||||
//mark_close
|
||||
|
||||
//++Inserted text++
|
||||
"ins_open": () => "[u]",
|
||||
"ins_close": () => "[/u]",
|
||||
|
||||
/*
|
||||
```
|
||||
test
|
||||
[/code]
|
||||
test
|
||||
```
|
||||
*/
|
||||
|
||||
"code": (renderer: Renderer, token: RemarkToken) => "[i-code]" + xbbcode.escape(token.content) + "[/i-code]",
|
||||
"fence": (renderer: Renderer, token: RemarkToken) => "[code" + (token.params ? ("=" + token.params) : "") + "]" + xbbcode.escape(token.content) + "[/code]",
|
||||
|
||||
"heading_open": (renderer: Renderer, token: RemarkToken) => "[size=" + (9 - Math.min(4, token.hLevel)) + "]",
|
||||
"heading_close": (renderer: Renderer, token: RemarkToken) => "[/size][hr]",
|
||||
|
||||
"hr": () => "[hr]",
|
||||
|
||||
//> Experience real-time editing with Remarkable!
|
||||
//blockquote_open,
|
||||
//blockquote_close
|
||||
};
|
||||
|
||||
private _options;
|
||||
last_paragraph: RemarkToken;
|
||||
|
||||
render(tokens: RemarkToken[], options: any, env: any) {
|
||||
this.last_paragraph = undefined;
|
||||
this._options = options;
|
||||
let result = '';
|
||||
|
||||
//TODO: Escape BB-Codes
|
||||
for(let index = 0; index < tokens.length; index++) {
|
||||
if (tokens[index].type === 'inline') {
|
||||
result += this.render_inline(tokens[index].children, index);
|
||||
} else {
|
||||
result += this.render_token(tokens[index], index);
|
||||
}
|
||||
}
|
||||
|
||||
this._options = undefined;
|
||||
return result;
|
||||
}
|
||||
|
||||
private render_token(token: RemarkToken, index: number) {
|
||||
log.debug(LogCategory.GENERAL, tr("Render Markdown token: %o"), token);
|
||||
const renderer = Renderer.renderers[token.type];
|
||||
if(typeof(renderer) === "undefined") {
|
||||
log.warn(LogCategory.CHAT, tr("Missing markdown to bbcode renderer for token %s: %o"), token.type, token);
|
||||
return token.content || "";
|
||||
}
|
||||
|
||||
const result = renderer(this, token, index);
|
||||
if(token.type === "paragraph_open") this.last_paragraph = token;
|
||||
return result;
|
||||
}
|
||||
|
||||
private render_inline(tokens: RemarkToken[], index: number) {
|
||||
let result = '';
|
||||
|
||||
for(let index = 0; index < tokens.length; index++) {
|
||||
result += this.render_token(tokens[index], index);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
options() : any {
|
||||
return this._options;
|
||||
}
|
||||
|
||||
maybe_escape_bb(text: string) {
|
||||
if(this._options.escape_bb)
|
||||
return xbbcode.escape(text);
|
||||
return text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let _renderer: any;
|
||||
function process_markdown(message: string, options: {
|
||||
process_url?: boolean,
|
||||
escape_bb?: boolean
|
||||
}) : string {
|
||||
if(typeof(window.remarkable) === "undefined")
|
||||
return (options.process_url ? process_urls(message) : message);
|
||||
|
||||
if(!_renderer) {
|
||||
_renderer = new window.remarkable.Remarkable('full');
|
||||
_renderer.set({
|
||||
typographer: true
|
||||
});
|
||||
_renderer.renderer = new md2bbc.Renderer();
|
||||
_renderer.inline.ruler.disable([ 'newline', 'autolink' ]);
|
||||
}
|
||||
_renderer.set({
|
||||
process_url: !!options.process_url,
|
||||
escape_bb: !!options.escape_bb
|
||||
});
|
||||
let result: string = _renderer.render(message);
|
||||
if(result.endsWith("\n"))
|
||||
result = result.substr(0, result.length - 1);
|
||||
return result;
|
||||
}
|
||||
|
||||
export function preprocess_chat_message(message: string) : string {
|
||||
const process_url = settings.static_global(Settings.KEY_CHAT_TAG_URLS);
|
||||
const parse_markdown = settings.static_global(Settings.KEY_CHAT_ENABLE_MARKDOWN);
|
||||
const escape_bb = !settings.static_global(Settings.KEY_CHAT_ENABLE_BBCODE);
|
||||
|
||||
if(parse_markdown)
|
||||
return process_markdown(message, {
|
||||
process_url: process_url,
|
||||
escape_bb: escape_bb
|
||||
});
|
||||
|
||||
if(escape_bb)
|
||||
message = xbbcode.escape(message);
|
||||
return process_url ? process_urls(message) : message;
|
||||
}
|
||||
|
||||
export namespace history {
|
||||
let _local_cache: Cache;
|
||||
|
||||
async function get_cache() {
|
||||
if(_local_cache)
|
||||
return _local_cache;
|
||||
|
||||
if(!('caches' in window))
|
||||
throw "missing cache extension!";
|
||||
|
||||
return (_local_cache = await caches.open('chat_history'));
|
||||
}
|
||||
|
||||
export async function load_history(key: string) : Promise<any | undefined> {
|
||||
const cache = await get_cache();
|
||||
const request = new Request("https://_local_cache/cache_request_" + key);
|
||||
const cached_response = await cache.match(request);
|
||||
if(!cached_response)
|
||||
return undefined;
|
||||
|
||||
return await cached_response.json();
|
||||
}
|
||||
|
||||
export async function save_history(key: string, value: any) {
|
||||
const cache = await get_cache();
|
||||
const request = new Request("https://_local_cache/cache_request_" + key);
|
||||
const data = JSON.stringify(value);
|
||||
|
||||
const new_headers = new Headers();
|
||||
new_headers.set("Content-type", "application/json");
|
||||
new_headers.set("Content-length", data.length.toString());
|
||||
|
||||
|
||||
await cache.put(request, new Response(data, {
|
||||
headers: new_headers
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
export namespace date {
|
||||
export function same_day(a: number | Date, b: number | Date) {
|
||||
a = a instanceof Date ? a : new Date(a);
|
||||
b = b instanceof Date ? b : new Date(b);
|
||||
|
||||
if(a.getDate() !== b.getDate())
|
||||
return false;
|
||||
if(a.getMonth() !== b.getMonth())
|
||||
return false;
|
||||
return a.getFullYear() === b.getFullYear();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export namespace format {
|
||||
export namespace date {
|
||||
export enum ColloquialFormat {
|
||||
YESTERDAY,
|
||||
TODAY,
|
||||
GENERAL
|
||||
}
|
||||
|
||||
export function date_format(date: Date, now: Date, ignore_settings?: boolean) : ColloquialFormat {
|
||||
if(!ignore_settings && !settings.static_global(Settings.KEY_CHAT_COLLOQUIAL_TIMESTAMPS))
|
||||
return ColloquialFormat.GENERAL;
|
||||
|
||||
let delta_day = now.getDate() - date.getDate();
|
||||
if(delta_day < 1) /* month change? */
|
||||
delta_day = date.getDate() - now.getDate();
|
||||
if(delta_day == 0)
|
||||
return ColloquialFormat.TODAY;
|
||||
else if(delta_day == 1)
|
||||
return ColloquialFormat.YESTERDAY;
|
||||
return ColloquialFormat.GENERAL;
|
||||
}
|
||||
|
||||
export function format_date_general(date: Date, hours?: boolean) : string {
|
||||
return ('00' + date.getDate()).substr(-2) + "."
|
||||
+ ('00' + date.getMonth()).substr(-2) + "."
|
||||
+ date.getFullYear() +
|
||||
(typeof(hours) === "undefined" || hours ? " at "
|
||||
+ ('00' + date.getHours()).substr(-2) + ":"
|
||||
+ ('00' + date.getMinutes()).substr(-2)
|
||||
: "");
|
||||
}
|
||||
|
||||
export function format_date_colloquial(date: Date, current_timestamp: Date) : { result: string; format: ColloquialFormat } {
|
||||
const format = date_format(date, current_timestamp);
|
||||
if(format == ColloquialFormat.GENERAL) {
|
||||
return {
|
||||
result: format_date_general(date),
|
||||
format: format
|
||||
};
|
||||
} else {
|
||||
let hrs = date.getHours();
|
||||
let time = "AM";
|
||||
if(hrs > 12) {
|
||||
hrs -= 12;
|
||||
time = "PM";
|
||||
}
|
||||
return {
|
||||
result: (format == ColloquialFormat.YESTERDAY ? tr("Yesterday at") : tr("Today at")) + " " + hrs + ":" + date.getMinutes() + " " + time,
|
||||
format: format
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function format_chat_time(date: Date) : {
|
||||
result: string,
|
||||
next_update: number /* in MS */
|
||||
} {
|
||||
const timestamp = date.getTime();
|
||||
const current_timestamp = new Date();
|
||||
|
||||
const result = {
|
||||
result: "",
|
||||
next_update: 0
|
||||
};
|
||||
|
||||
if(settings.static_global(Settings.KEY_CHAT_FIXED_TIMESTAMPS)) {
|
||||
const format = format_date_colloquial(date, current_timestamp);
|
||||
result.result = format.result;
|
||||
result.next_update = 0; /* TODO: Update on day change? */
|
||||
} else {
|
||||
const delta = current_timestamp.getTime() - timestamp;
|
||||
if(delta < 2000) {
|
||||
result.result = "now";
|
||||
result.next_update = 2500 - delta; /* update after two seconds */
|
||||
} else if(delta < 30000) { /* 30 seconds */
|
||||
result.result = Math.floor(delta / 1000) + " " + tr("seconds ago");
|
||||
result.next_update = 1000; /* update every second */
|
||||
} else if(delta < 30 * 60 * 1000) { /* 30 minutes */
|
||||
if(delta < 120 * 1000)
|
||||
result.result = tr("one minute ago");
|
||||
else
|
||||
result.result = Math.floor(delta / (1000 * 60)) + " " + tr("minutes ago");
|
||||
result.next_update = 60000; /* updater after a minute */
|
||||
} else {
|
||||
result.result = format_date_colloquial(date, current_timestamp).result;
|
||||
result.next_update = 0; /* TODO: Update on day change? */
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
export namespace time {
|
||||
export function format_online_time(secs: number) : string {
|
||||
let years = Math.floor(secs / (60 * 60 * 24 * 365));
|
||||
let days = Math.floor(secs / (60 * 60 * 24)) % 365;
|
||||
let hours = Math.floor(secs / (60 * 60)) % 24;
|
||||
let minutes = Math.floor(secs / 60) % 60;
|
||||
let seconds = Math.floor(secs % 60);
|
||||
|
||||
let result = "";
|
||||
if(years > 0)
|
||||
result += years + " " + tr("years") + " ";
|
||||
if(years > 0 || days > 0)
|
||||
result += days + " " + tr("days") + " ";
|
||||
if(years > 0 || days > 0 || hours > 0)
|
||||
result += hours + " " + tr("hours") + " ";
|
||||
if(years > 0 || days > 0 || hours > 0 || minutes > 0)
|
||||
result += minutes + " " + tr("minutes") + " ";
|
||||
if(years > 0 || days > 0 || hours > 0 || minutes > 0 || seconds > 0)
|
||||
result += seconds + " " + tr("seconds") + " ";
|
||||
else
|
||||
result = tr("now") + " ";
|
||||
|
||||
return result.substr(0, result.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,268 @@
|
|||
namespace chat {
|
||||
declare function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
|
||||
export class ClientInfo {
|
||||
readonly handle: Frame;
|
||||
private _html_tag: JQuery;
|
||||
private _current_client: ClientEntry | undefined;
|
||||
private _online_time_updater: number;
|
||||
previous_frame_content: FrameContent;
|
||||
|
||||
constructor(handle: Frame) {
|
||||
this.handle = handle;
|
||||
this._build_html_tag();
|
||||
}
|
||||
|
||||
html_tag() : JQuery {
|
||||
return this._html_tag;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
clearInterval(this._online_time_updater);
|
||||
|
||||
this._html_tag && this._html_tag.remove();
|
||||
this._html_tag = undefined;
|
||||
|
||||
this._current_client = undefined;
|
||||
this.previous_frame_content = undefined;
|
||||
}
|
||||
|
||||
private _build_html_tag() {
|
||||
this._html_tag = $("#tmpl_frame_chat_client_info").renderTag();
|
||||
this._html_tag.find(".button-close").on('click', () => {
|
||||
if(this.previous_frame_content === FrameContent.CLIENT_INFO)
|
||||
this.previous_frame_content = FrameContent.NONE;
|
||||
|
||||
this.handle.set_content(this.previous_frame_content);
|
||||
});
|
||||
this._html_tag.find(".button-more").on('click', () => {
|
||||
if(!this._current_client)
|
||||
return;
|
||||
|
||||
Modals.openClientInfo(this._current_client);
|
||||
});
|
||||
this._html_tag.find('.container-avatar-edit').on('click', () => this.handle.handle.update_avatar());
|
||||
}
|
||||
|
||||
current_client() : ClientEntry {
|
||||
return this._current_client;
|
||||
}
|
||||
|
||||
set_current_client(client: ClientEntry | undefined, enforce?: boolean) {
|
||||
if(client) client.updateClientVariables(); /* just to ensure */
|
||||
if(client === this._current_client && (typeof(enforce) === "undefined" || !enforce))
|
||||
return;
|
||||
|
||||
this._current_client = client;
|
||||
|
||||
/* updating the header */
|
||||
{
|
||||
const client_name = this._html_tag.find(".client-name");
|
||||
client_name.children().remove();
|
||||
htmltags.generate_client_object({
|
||||
add_braces: false,
|
||||
client_name: client ? client.clientNickName() : "undefined",
|
||||
client_unique_id: client ? client.clientUid() : "",
|
||||
client_id: client ? client.clientId() : 0
|
||||
}).appendTo(client_name);
|
||||
|
||||
const client_description = this._html_tag.find(".client-description");
|
||||
client_description.text(client ? client.properties.client_description : "").toggle(!!client.properties.client_description);
|
||||
|
||||
const container_avatar = this._html_tag.find(".container-avatar");
|
||||
container_avatar.find(".avatar").remove();
|
||||
if(client)
|
||||
this.handle.handle.fileManager.avatars.generate_chat_tag({id: client.clientId()}, client.clientUid()).appendTo(container_avatar);
|
||||
else
|
||||
this.handle.handle.fileManager.avatars.generate_chat_tag(undefined, undefined).appendTo(container_avatar);
|
||||
|
||||
container_avatar.toggleClass("editable", client instanceof LocalClientEntry);
|
||||
}
|
||||
/* updating the info fields */
|
||||
{
|
||||
const online_time = this._html_tag.find(".client-online-time");
|
||||
online_time.text(format.time.format_online_time(client ? client.calculateOnlineTime() : 0));
|
||||
if(this._online_time_updater) {
|
||||
clearInterval(this._online_time_updater);
|
||||
this._online_time_updater = 0;
|
||||
}
|
||||
if(client) {
|
||||
this._online_time_updater = setInterval(() => {
|
||||
const client = this._current_client;
|
||||
if(!client) {
|
||||
clearInterval(this._online_time_updater);
|
||||
this._online_time_updater = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
if(client.currentChannel()) /* If he has no channel then he might be disconnected */
|
||||
online_time.text(format.time.format_online_time(client.calculateOnlineTime()));
|
||||
else {
|
||||
online_time.text(online_time.text() + tr(" (left view)"));
|
||||
clearInterval(this._online_time_updater);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const country = this._html_tag.find(".client-country");
|
||||
country.children().detach();
|
||||
const country_code = (client ? client.properties.client_country : undefined) || "xx";
|
||||
$.spawn("div").addClass("country flag-" + country_code.toLowerCase()).appendTo(country);
|
||||
$.spawn("a").text(i18n.country_name(country_code.toUpperCase())).appendTo(country);
|
||||
|
||||
|
||||
const version = this._html_tag.find(".client-version");
|
||||
version.children().detach();
|
||||
if(client) {
|
||||
let platform = client.properties.client_platform;
|
||||
if(platform.indexOf("Win32") != 0 && (client.properties.client_version.indexOf("Win64") != -1 || client.properties.client_version.indexOf("WOW64") != -1))
|
||||
platform = platform.replace("Win32", "Win64");
|
||||
$.spawn("a").attr("title", client.properties.client_version).text(
|
||||
client.properties.client_version.split(" ")[0] + " on " + platform
|
||||
).appendTo(version);
|
||||
}
|
||||
|
||||
const volume = this._html_tag.find(".client-local-volume");
|
||||
volume.text((client && client.get_audio_handle() ? (client.get_audio_handle().get_volume() * 100) : -1).toFixed(0) + "%");
|
||||
}
|
||||
|
||||
/* teaspeak forum */
|
||||
{
|
||||
const container_forum = this._html_tag.find(".container-teaforo");
|
||||
if(client && client.properties.client_teaforo_id) {
|
||||
container_forum.show();
|
||||
|
||||
const container_data = container_forum.find(".client-teaforo-account");
|
||||
container_data.children().remove();
|
||||
|
||||
let text = client.properties.client_teaforo_name;
|
||||
if((client.properties.client_teaforo_flags & 0x01) > 0)
|
||||
text += " (" + tr("Banned") + ")";
|
||||
if((client.properties.client_teaforo_flags & 0x02) > 0)
|
||||
text += " (" + tr("Stuff") + ")";
|
||||
if((client.properties.client_teaforo_flags & 0x04) > 0)
|
||||
text += " (" + tr("Premium") + ")";
|
||||
|
||||
$.spawn("a")
|
||||
.attr("href", "https://forum.teaspeak.de/index.php?members/" + client.properties.client_teaforo_id)
|
||||
.attr("target", "_blank")
|
||||
.text(text)
|
||||
.appendTo(container_data);
|
||||
} else {
|
||||
container_forum.hide();
|
||||
}
|
||||
}
|
||||
|
||||
/* update the client status */
|
||||
{
|
||||
//TODO Implement client status!
|
||||
const container_status = this._html_tag.find(".container-client-status");
|
||||
const container_status_entries = container_status.find(".client-status");
|
||||
container_status_entries.children().detach();
|
||||
if(client) {
|
||||
if(client.properties.client_away) {
|
||||
container_status_entries.append(
|
||||
$.spawn("div").addClass("status-entry").append(
|
||||
$.spawn("div").addClass("icon_em client-away"),
|
||||
$.spawn("a").text(tr("Away")),
|
||||
client.properties.client_away_message ?
|
||||
$.spawn("a").addClass("away-message").text("(" + client.properties.client_away_message + ")") :
|
||||
undefined
|
||||
)
|
||||
)
|
||||
}
|
||||
if(client.is_muted()) {
|
||||
container_status_entries.append(
|
||||
$.spawn("div").addClass("status-entry").append(
|
||||
$.spawn("div").addClass("icon_em client-input_muted_local"),
|
||||
$.spawn("a").text(tr("Client local muted"))
|
||||
)
|
||||
)
|
||||
}
|
||||
if(!client.properties.client_output_hardware) {
|
||||
container_status_entries.append(
|
||||
$.spawn("div").addClass("status-entry").append(
|
||||
$.spawn("div").addClass("icon_em client-hardware_output_muted"),
|
||||
$.spawn("a").text(tr("Speakers/Headphones disabled"))
|
||||
)
|
||||
)
|
||||
}
|
||||
if(!client.properties.client_input_hardware) {
|
||||
container_status_entries.append(
|
||||
$.spawn("div").addClass("status-entry").append(
|
||||
$.spawn("div").addClass("icon_em client-hardware_input_muted"),
|
||||
$.spawn("a").text(tr("Microphone disabled"))
|
||||
)
|
||||
)
|
||||
}
|
||||
if(client.properties.client_output_muted) {
|
||||
container_status_entries.append(
|
||||
$.spawn("div").addClass("status-entry").append(
|
||||
$.spawn("div").addClass("icon_em client-output_muted"),
|
||||
$.spawn("a").text(tr("Speakers/Headphones Muted"))
|
||||
)
|
||||
)
|
||||
}
|
||||
if(client.properties.client_input_muted) {
|
||||
container_status_entries.append(
|
||||
$.spawn("div").addClass("status-entry").append(
|
||||
$.spawn("div").addClass("icon_em client-input_muted"),
|
||||
$.spawn("a").text(tr("Microphone Muted"))
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
container_status.toggle(container_status_entries.children().length > 0);
|
||||
}
|
||||
/* update client server groups */
|
||||
{
|
||||
const container_groups = this._html_tag.find(".client-group-server");
|
||||
container_groups.children().detach();
|
||||
if(client) {
|
||||
const invalid_groups = [];
|
||||
const groups = client.assignedServerGroupIds().map(group_id => {
|
||||
const result = this.handle.handle.groups.serverGroup(group_id);
|
||||
if(!result)
|
||||
invalid_groups.push(group_id);
|
||||
return result;
|
||||
}).filter(e => !!e).sort(GroupManager.sorter());
|
||||
for(const invalid_id of invalid_groups) {
|
||||
container_groups.append($.spawn("a").text("{" + tr("server group ") + invalid_groups + "}").attr("title", tr("Missing server group id!") + " (" + invalid_groups + ")"));
|
||||
}
|
||||
for(let group of groups) {
|
||||
container_groups.append(
|
||||
$.spawn("div").addClass("group-container")
|
||||
.append(
|
||||
this.handle.handle.fileManager.icons.generateTag(group.properties.iconid)
|
||||
).append(
|
||||
$.spawn("a").text(group.name).attr("title", tr("Group id: ") + group.id)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* update client channel group */
|
||||
{
|
||||
const container_group = this._html_tag.find(".client-group-channel");
|
||||
container_group.children().detach();
|
||||
if(client) {
|
||||
const group_id = client.assignedChannelGroup();
|
||||
let group = this.handle.handle.groups.channelGroup(group_id);
|
||||
if(group) {
|
||||
container_group.append(
|
||||
$.spawn("div").addClass("group-container")
|
||||
.append(
|
||||
this.handle.handle.fileManager.icons.generateTag(group.properties.iconid)
|
||||
).append(
|
||||
$.spawn("a").text(group.name).attr("title", tr("Group id: ") + group_id)
|
||||
)
|
||||
);
|
||||
} else {
|
||||
container_group.append($.spawn("a").text(tr("Invalid channel group!")).attr("title", tr("Missing channel group id!") + " (" + group_id + ")"));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,615 @@
|
|||
namespace chat {
|
||||
declare function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
|
||||
export namespace channel {
|
||||
export type ViewEntry = {
|
||||
html_element: JQuery;
|
||||
update_timer?: number;
|
||||
}
|
||||
export type MessageData = {
|
||||
timestamp: number;
|
||||
|
||||
message: string;
|
||||
|
||||
sender_name: string;
|
||||
sender_unique_id: string;
|
||||
sender_database_id: number;
|
||||
}
|
||||
export type Message = MessageData & ViewEntry;
|
||||
|
||||
export class Conversation {
|
||||
readonly handle: ConversationManager;
|
||||
readonly channel_id: number;
|
||||
|
||||
private _flag_private: boolean;
|
||||
|
||||
private _html_tag: JQuery;
|
||||
private _container_messages: JQuery;
|
||||
private _container_new_message: JQuery;
|
||||
|
||||
private _container_no_permissions: JQuery;
|
||||
private _container_no_permissions_shown: boolean = false;
|
||||
|
||||
private _container_is_private: JQuery;
|
||||
private _container_is_private_shown: boolean = false;
|
||||
|
||||
private _container_no_support: JQuery;
|
||||
private _container_no_support_shown: boolean = false;
|
||||
|
||||
private _view_max_messages = 40; /* reset to 40 again as soon we tab out :) */
|
||||
private _view_older_messages: ViewEntry;
|
||||
private _has_older_messages: boolean; /* undefined := not known | else flag */
|
||||
|
||||
private _view_entries: ViewEntry[] = [];
|
||||
|
||||
private _last_messages: MessageData[] = [];
|
||||
private _last_messages_timestamp: number = 0;
|
||||
private _first_unread_message: Message;
|
||||
private _first_unread_message_pointer: ViewEntry;
|
||||
|
||||
private _scroll_position: number | undefined; /* undefined to follow bottom | position for special stuff */
|
||||
|
||||
constructor(handle: ConversationManager, channel_id: number) {
|
||||
this.handle = handle;
|
||||
this.channel_id = channel_id;
|
||||
|
||||
this._build_html_tag();
|
||||
}
|
||||
|
||||
html_tag() : JQuery { return this._html_tag; }
|
||||
destroy() {
|
||||
this._first_unread_message_pointer.html_element.detach();
|
||||
this._first_unread_message_pointer = undefined;
|
||||
|
||||
this._view_older_messages.html_element.detach();
|
||||
this._view_older_messages = undefined;
|
||||
|
||||
for(const view_entry of this._view_entries) {
|
||||
view_entry.html_element.detach();
|
||||
clearTimeout(view_entry.update_timer);
|
||||
}
|
||||
this._view_entries = [];
|
||||
}
|
||||
|
||||
private _build_html_tag() {
|
||||
this._html_tag = $("#tmpl_frame_chat_channel_messages").renderTag();
|
||||
|
||||
this._container_new_message = this._html_tag.find(".new-message");
|
||||
this._container_no_permissions = this._html_tag.find(".no-permissions").hide();
|
||||
this._container_is_private = this._html_tag.find(".private-conversation").hide();
|
||||
this._container_no_support = this._html_tag.find(".not-supported").hide();
|
||||
|
||||
this._container_messages = this._html_tag.find(".container-messages");
|
||||
this._container_messages.on('scroll', event => {
|
||||
const exact_position = this._container_messages[0].scrollTop + this._container_messages[0].clientHeight;
|
||||
const current_view = exact_position + this._container_messages[0].clientHeight * .125;
|
||||
if(current_view > this._container_messages[0].scrollHeight) {
|
||||
this._scroll_position = undefined;
|
||||
} else {
|
||||
this._scroll_position = this._container_messages[0].scrollTop;
|
||||
}
|
||||
|
||||
const will_visible = !!this._first_unread_message && this._first_unread_message_pointer.html_element[0].offsetTop > exact_position;
|
||||
const is_visible = this._container_new_message[0].classList.contains("shown");
|
||||
if(!is_visible && will_visible)
|
||||
this._container_new_message[0].classList.add("shown");
|
||||
|
||||
if(is_visible && !will_visible)
|
||||
this._container_new_message[0].classList.remove("shown");
|
||||
|
||||
//This causes a Layout recalc (Forced reflow)
|
||||
//this._container_new_message.toggleClass("shown",!!this._first_unread_message && this._first_unread_message_pointer.html_element[0].offsetTop > exact_position);
|
||||
});
|
||||
|
||||
this._view_older_messages = this._generate_view_spacer(tr("Load older messages"), "old");
|
||||
this._first_unread_message_pointer = this._generate_view_spacer(tr("Unread messages"), "new");
|
||||
this._view_older_messages.html_element.appendTo(this._container_messages).on('click', event => {
|
||||
this.fetch_older_messages();
|
||||
});
|
||||
|
||||
this._container_new_message.on('click', event => {
|
||||
if(!this._first_unread_message)
|
||||
return;
|
||||
this._scroll_position = this._first_unread_message_pointer.html_element[0].offsetTop;
|
||||
this.fix_scroll(true);
|
||||
});
|
||||
this._container_messages.on('click', event => {
|
||||
if(this._container_new_message.hasClass('shown'))
|
||||
return; /* we have clicked, but no chance to see the unread message pointer */
|
||||
this._mark_read();
|
||||
});
|
||||
this.set_flag_private(false);
|
||||
}
|
||||
|
||||
is_unread() { return !!this._first_unread_message; }
|
||||
|
||||
mark_read() { this._mark_read(); }
|
||||
private _mark_read() {
|
||||
if(this._first_unread_message) {
|
||||
this._first_unread_message = undefined;
|
||||
|
||||
const ctree = this.handle.handle.handle.channelTree;
|
||||
if(ctree && ctree.tag_tree())
|
||||
ctree.tag_tree().find(".marker-text-unread[conversation='" + this.channel_id + "']").addClass("hidden");
|
||||
}
|
||||
this._first_unread_message_pointer.html_element.detach();
|
||||
}
|
||||
|
||||
private _generate_view_message(data: MessageData) : Message {
|
||||
const response = data as Message;
|
||||
if(response.html_element)
|
||||
return response;
|
||||
|
||||
const timestamp = new Date(data.timestamp);
|
||||
let time = format.date.format_chat_time(timestamp);
|
||||
response.html_element = $("#tmpl_frame_chat_channel_message").renderTag({
|
||||
timestamp: time.result,
|
||||
client_name: htmltags.generate_client_object({
|
||||
add_braces: false,
|
||||
client_name: data.sender_name,
|
||||
client_unique_id: data.sender_unique_id,
|
||||
client_id: 0
|
||||
}),
|
||||
message: MessageHelper.bbcode_chat(data.message),
|
||||
avatar: this.handle.handle.handle.fileManager.avatars.generate_chat_tag({database_id: data.sender_database_id}, data.sender_unique_id)
|
||||
});
|
||||
|
||||
response.html_element.find(".button-delete").on('click', () => this.delete_message(data));
|
||||
|
||||
if(time.next_update > 0) {
|
||||
const _updater = () => {
|
||||
time = format.date.format_chat_time(timestamp);
|
||||
response.html_element.find(".info .timestamp").text(time.result);
|
||||
if(time.next_update > 0)
|
||||
response.update_timer = setTimeout(_updater, time.next_update);
|
||||
else
|
||||
response.update_timer = 0;
|
||||
};
|
||||
response.update_timer = setTimeout(_updater, time.next_update);
|
||||
} else {
|
||||
response.update_timer = 0;
|
||||
}
|
||||
|
||||
return response;
|
||||
}
|
||||
|
||||
private _generate_view_spacer(message: string, type: "date" | "new" | "old" | "error") : ViewEntry {
|
||||
const tag = $("#tmpl_frame_chat_private_spacer").renderTag({
|
||||
message: message
|
||||
}).addClass("type-" + type);
|
||||
return {
|
||||
html_element: tag,
|
||||
update_timer: 0
|
||||
}
|
||||
}
|
||||
|
||||
last_messages_timestamp() : number {
|
||||
return this._last_messages_timestamp;
|
||||
}
|
||||
|
||||
fetch_last_messages() {
|
||||
const fetch_count = this._view_max_messages - this._last_messages.length;
|
||||
const fetch_timestamp_end = this._last_messages_timestamp + 1; /* we want newer messages then the last message we have */
|
||||
|
||||
//conversationhistory cid=1 [cpw=xxx] [timestamp_begin] [timestamp_end (0 := no end)] [message_count (default 25| max 100)] [-merge]
|
||||
this.handle.handle.handle.serverConnection.send_command("conversationhistory", {
|
||||
cid: this.channel_id,
|
||||
timestamp_end: fetch_timestamp_end,
|
||||
message_count: fetch_count
|
||||
}, {flagset: ["merge"], process_result: false }).catch(error => {
|
||||
this._view_older_messages.html_element.toggleClass('shown', false);
|
||||
if(error instanceof CommandResult) {
|
||||
if(error.id == ErrorID.CONVERSATION_MORE_DATA) {
|
||||
if(typeof(this._has_older_messages) === "undefined")
|
||||
this._has_older_messages = true;
|
||||
this._view_older_messages.html_element.toggleClass('shown', true);
|
||||
return;
|
||||
} else if(error.id == ErrorID.PERMISSION_ERROR) {
|
||||
this._container_no_permissions.show();
|
||||
this._container_no_permissions_shown = true;
|
||||
} else if(error.id == ErrorID.CONVERSATION_IS_PRIVATE) {
|
||||
this.set_flag_private(true);
|
||||
}
|
||||
/*
|
||||
else if(error.id == ErrorID.NOT_IMPLEMENTED || error.id == ErrorID.COMMAND_NOT_FOUND) {
|
||||
this._container_no_support.show();
|
||||
this._container_no_support_shown = true;
|
||||
}
|
||||
*/
|
||||
}
|
||||
//TODO log and handle!
|
||||
log.error(LogCategory.CHAT, tr("Failed to fetch conversation history. %o"), error);
|
||||
}).then(() => {
|
||||
this.fix_scroll(true);
|
||||
this.handle.update_chat_box();
|
||||
});
|
||||
}
|
||||
|
||||
fetch_older_messages() {
|
||||
this._view_older_messages.html_element.toggleClass('shown', false);
|
||||
|
||||
const entry = this._view_entries.slice().reverse().find(e => 'timestamp' in e) as any as {timestamp: number};
|
||||
//conversationhistory cid=1 [cpw=xxx] [timestamp_begin] [timestamp_end (0 := no end)] [message_count (default 25| max 100)] [-merge]
|
||||
this.handle.handle.handle.serverConnection.send_command("conversationhistory", {
|
||||
cid: this.channel_id,
|
||||
timestamp_begin: entry.timestamp - 1,
|
||||
message_count: this._view_max_messages
|
||||
}, {flagset: ["merge"]}).catch(error => {
|
||||
this._view_older_messages.html_element.toggleClass('shown', false);
|
||||
if(error instanceof CommandResult) {
|
||||
if(error.id == ErrorID.CONVERSATION_MORE_DATA) {
|
||||
this._view_older_messages.html_element.toggleClass('shown', true);
|
||||
this.handle.update_chat_box();
|
||||
return;
|
||||
}
|
||||
}
|
||||
//TODO log and handle!
|
||||
log.error(LogCategory.CHAT, tr("Failed to fetch conversation history. %o"), error);
|
||||
}).then(() => {
|
||||
this.fix_scroll(true);
|
||||
});
|
||||
}
|
||||
|
||||
register_new_message(message: MessageData, update_view?: boolean) {
|
||||
/* lets insert the message at the right index */
|
||||
let _new_message = false;
|
||||
{
|
||||
let spliced = false;
|
||||
for(let index = 0; index < this._last_messages.length; index++) {
|
||||
if(this._last_messages[index].timestamp < message.timestamp) {
|
||||
this._last_messages.splice(index, 0, message);
|
||||
spliced = true;
|
||||
_new_message = index == 0; /* only set flag if this has been inserted at the front */
|
||||
break;
|
||||
} else if(this._last_messages[index].timestamp == message.timestamp && this._last_messages[index].sender_database_id == message.sender_database_id) {
|
||||
return; /* we already have that message */
|
||||
}
|
||||
}
|
||||
if(!spliced && this._last_messages.length < this._view_max_messages) {
|
||||
this._last_messages.push(message);
|
||||
}
|
||||
this._last_messages_timestamp = this._last_messages[0].timestamp;
|
||||
|
||||
while(this._last_messages.length > this._view_max_messages) {
|
||||
if(this._last_messages[this._last_messages.length - 1] == this._first_unread_message)
|
||||
break;
|
||||
this._last_messages.pop();
|
||||
}
|
||||
}
|
||||
|
||||
/* message is within view */
|
||||
{
|
||||
const entry = this._generate_view_message(message);
|
||||
|
||||
let previous: ViewEntry;
|
||||
for(let index = 0; index < this._view_entries.length; index++) {
|
||||
const current_entry = this._view_entries[index];
|
||||
if(!('timestamp' in current_entry))
|
||||
continue;
|
||||
|
||||
if((current_entry as Message).timestamp < message.timestamp) {
|
||||
this._view_entries.splice(index, 0, entry);
|
||||
previous = current_entry;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(!previous)
|
||||
this._view_entries.push(entry);
|
||||
|
||||
if(previous)
|
||||
entry.html_element.insertAfter(previous.html_element);
|
||||
else
|
||||
entry.html_element.insertAfter(this._view_older_messages.html_element); /* last element is already the current element */
|
||||
|
||||
if(_new_message && (typeof(this._scroll_position) === "number" || this.handle.current_channel() !== this.channel_id || this.handle.handle.content_type() !== FrameContent.CHANNEL_CHAT)) {
|
||||
if(typeof(this._first_unread_message) === "undefined")
|
||||
this._first_unread_message = entry;
|
||||
|
||||
this._first_unread_message_pointer.html_element.insertBefore(entry.html_element);
|
||||
this._container_messages.trigger('scroll'); /* updates the new message stuff */
|
||||
}
|
||||
if(typeof(update_view) !== "boolean" || update_view)
|
||||
this.fix_scroll(true);
|
||||
}
|
||||
|
||||
/* update chat state */
|
||||
this._container_no_permissions.hide();
|
||||
this._container_no_permissions_shown = false;
|
||||
if(update_view) this.handle.update_chat_box();
|
||||
}
|
||||
|
||||
/* using a timeout here to not cause a force style recalculation */
|
||||
private _scroll_fix_timer: number;
|
||||
private _scroll_animate: boolean;
|
||||
|
||||
fix_scroll(animate: boolean) {
|
||||
if(this._scroll_fix_timer) {
|
||||
this._scroll_animate = this._scroll_animate && animate;
|
||||
return;
|
||||
}
|
||||
|
||||
this._scroll_fix_timer = setTimeout(() => {
|
||||
this._scroll_fix_timer = undefined;
|
||||
|
||||
let offset;
|
||||
if(this._first_unread_message) {
|
||||
offset = this._first_unread_message.html_element[0].offsetTop;
|
||||
} else if(typeof(this._scroll_position) !== "undefined") {
|
||||
offset = this._scroll_position;
|
||||
} else {
|
||||
offset = this._container_messages[0].scrollHeight;
|
||||
}
|
||||
|
||||
if(this._scroll_animate) {
|
||||
this._container_messages.stop(true).animate({
|
||||
scrollTop: offset
|
||||
}, 'slow');
|
||||
} else {
|
||||
this._container_messages.stop(true).scrollTop(offset);
|
||||
}
|
||||
}, 5);
|
||||
}
|
||||
|
||||
fix_view_size() {
|
||||
this._view_older_messages.html_element.toggleClass('shown', !!this._has_older_messages);
|
||||
|
||||
let count = 0;
|
||||
for(let index = 0; index < this._view_entries.length; index++) {
|
||||
if('timestamp' in this._view_entries[index])
|
||||
count++;
|
||||
|
||||
if(count > this._view_max_messages) {
|
||||
this._view_entries.splice(index, this._view_entries.length - index).forEach(e => {
|
||||
clearTimeout(e.update_timer);
|
||||
e.html_element.remove();
|
||||
});
|
||||
this._has_older_messages = true;
|
||||
this._view_older_messages.html_element.toggleClass('shown', true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
chat_available() : boolean {
|
||||
return !this._container_no_permissions_shown && !this._container_is_private_shown && !this._container_no_support_shown;
|
||||
}
|
||||
|
||||
text_send_failed(error: CommandResult | any) {
|
||||
log.warn(LogCategory.CHAT, "Failed to send text message! (%o)", error);
|
||||
//TODO: Log if message send failed?
|
||||
if(error instanceof CommandResult) {
|
||||
if(error.id == ErrorID.PERMISSION_ERROR) {
|
||||
//TODO: Split up between channel_text_message_send permission and no view permission
|
||||
if(error.json["failed_permid"] == 0) {
|
||||
this._container_no_permissions_shown = true;
|
||||
this._container_no_permissions.show();
|
||||
this.handle.update_chat_box();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
set_flag_private(flag: boolean) {
|
||||
if(this._flag_private === flag)
|
||||
return;
|
||||
|
||||
this._flag_private = flag;
|
||||
this.update_private_state();
|
||||
if(!flag)
|
||||
this.fetch_last_messages();
|
||||
}
|
||||
|
||||
update_private_state() {
|
||||
if(!this._flag_private) {
|
||||
this._container_is_private.hide();
|
||||
this._container_is_private_shown = false;
|
||||
} else {
|
||||
const client = this.handle.handle.handle.getClient();
|
||||
if(client && client.currentChannel() && client.currentChannel().channelId === this.channel_id) {
|
||||
this._container_is_private_shown = false;
|
||||
this._container_is_private.hide();
|
||||
} else {
|
||||
this._container_is_private.show();
|
||||
this._container_is_private_shown = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
delete_message(message: MessageData) {
|
||||
//TODO A lot of checks!
|
||||
//conversationmessagedelete cid=2 timestamp_begin= timestamp_end= cldbid= limit=1
|
||||
this.handle.handle.handle.serverConnection.send_command('conversationmessagedelete', {
|
||||
cid: this.channel_id,
|
||||
cldbid: message.sender_database_id,
|
||||
|
||||
timestamp_begin: message.timestamp - 1,
|
||||
timestamp_end: message.timestamp + 1,
|
||||
|
||||
limit: 1
|
||||
}).then(() => {
|
||||
return; /* in general it gets deleted via notify */
|
||||
}).catch(error => {
|
||||
log.error(LogCategory.CHAT, tr("Failed to delete conversation message for conversation %o: %o"), this.channel_id, error);
|
||||
if(error instanceof CommandResult)
|
||||
error = error.extra_message || error.message;
|
||||
createErrorModal(tr("Failed to delete message"), MessageHelper.formatMessage(tr("Failed to delete conversation message{:br:}Error: {}"), error)).open();
|
||||
});
|
||||
log.debug(LogCategory.CLIENT, tr("Deleting text message %o"), message);
|
||||
}
|
||||
|
||||
delete_messages(begin: number, end: number, sender: number, limit: number) {
|
||||
let count = 0;
|
||||
for(const message of this._view_entries.slice()) {
|
||||
if(!('sender_database_id' in message))
|
||||
continue;
|
||||
|
||||
const cmsg = message as Message;
|
||||
if(end != 0 && cmsg.timestamp > end)
|
||||
continue;
|
||||
if(begin != 0 && cmsg.timestamp < begin)
|
||||
break;
|
||||
|
||||
if(cmsg.sender_database_id !== sender)
|
||||
continue;
|
||||
|
||||
this._delete_message(message);
|
||||
if(--count >= limit)
|
||||
return;
|
||||
}
|
||||
|
||||
//TODO remove in cache? (_last_messages)
|
||||
}
|
||||
|
||||
private _delete_message(message: Message) {
|
||||
if('html_element' in message) {
|
||||
const cmessage = message as Message;
|
||||
cmessage.html_element.remove();
|
||||
clearTimeout(cmessage.update_timer);
|
||||
this._view_entries.remove(message as any);
|
||||
}
|
||||
|
||||
this._last_messages.remove(message);
|
||||
}
|
||||
}
|
||||
|
||||
export class ConversationManager {
|
||||
readonly handle: Frame;
|
||||
|
||||
private _html_tag: JQuery;
|
||||
private _chat_box: ChatBox;
|
||||
|
||||
private _container_conversation: JQuery;
|
||||
|
||||
private _conversations: Conversation[] = [];
|
||||
private _current_conversation: Conversation | undefined;
|
||||
|
||||
private _needed_listener = () => this.update_chat_box();
|
||||
|
||||
constructor(handle: Frame) {
|
||||
this.handle = handle;
|
||||
|
||||
this._chat_box = new ChatBox();
|
||||
this._build_html_tag();
|
||||
|
||||
this._chat_box.callback_text = text => {
|
||||
if(!this._current_conversation)
|
||||
return;
|
||||
|
||||
const conv = this._current_conversation;
|
||||
this.handle.handle.serverConnection.send_command("sendtextmessage", {targetmode: conv.channel_id == 0 ? 3 : 2, cid: conv.channel_id, msg: text}, {process_result: false}).catch(error => {
|
||||
conv.text_send_failed(error);
|
||||
});
|
||||
};
|
||||
this.update_chat_box();
|
||||
}
|
||||
|
||||
initialize_needed_listener() {
|
||||
this.handle.handle.permissions.register_needed_permission(PermissionType.B_CLIENT_CHANNEL_TEXTMESSAGE_SEND, this._needed_listener);
|
||||
this.handle.handle.permissions.register_needed_permission(PermissionType.B_CLIENT_SERVER_TEXTMESSAGE_SEND, this._needed_listener);
|
||||
}
|
||||
|
||||
html_tag() : JQuery { return this._html_tag; }
|
||||
destroy() {
|
||||
if(this.handle.handle.permissions)
|
||||
this.handle.handle.permissions.unregister_needed_permission(PermissionType.B_CLIENT_CHANNEL_TEXTMESSAGE_SEND, this._needed_listener);
|
||||
this.handle.handle.permissions.unregister_needed_permission(PermissionType.B_CLIENT_SERVER_TEXTMESSAGE_SEND, this._needed_listener);
|
||||
this._needed_listener = undefined;
|
||||
|
||||
this._chat_box && this._chat_box.destroy();
|
||||
this._chat_box = undefined;
|
||||
|
||||
this._html_tag && this._html_tag.remove();
|
||||
this._html_tag = undefined;
|
||||
this._container_conversation = undefined;
|
||||
|
||||
for(const conversation of this._conversations)
|
||||
conversation.destroy();
|
||||
this._conversations = [];
|
||||
this._current_conversation = undefined;
|
||||
}
|
||||
|
||||
update_chat_box() {
|
||||
let flag = true;
|
||||
flag = flag && !!this._current_conversation; /* test if we have a conversation */
|
||||
flag = flag && !!this.handle.handle.permissions; /* test if we got permissions to test with */
|
||||
flag = flag && this.handle.handle.permissions.neededPermission(this._current_conversation.channel_id == 0 ? PermissionType.B_CLIENT_SERVER_TEXTMESSAGE_SEND : PermissionType.B_CLIENT_CHANNEL_TEXTMESSAGE_SEND).granted(1);
|
||||
flag = flag && this._current_conversation.chat_available();
|
||||
this._chat_box.set_enabled(flag);
|
||||
}
|
||||
|
||||
private _build_html_tag() {
|
||||
this._html_tag = $("#tmpl_frame_chat_channel").renderTag({
|
||||
chatbox: this._chat_box.html_tag()
|
||||
});
|
||||
this._container_conversation = this._html_tag.find(".container-chat");
|
||||
this._chat_box.html_tag().on('focus', event => {
|
||||
if(this._current_conversation)
|
||||
this._current_conversation.mark_read();
|
||||
});
|
||||
this.update_input_format_helper();
|
||||
}
|
||||
|
||||
set_current_channel(channel_id: number, update_info_frame?: boolean) {
|
||||
if(this._current_conversation && this._current_conversation.channel_id === channel_id)
|
||||
return;
|
||||
|
||||
let conversation = this.conversation(channel_id);
|
||||
this._current_conversation = conversation;
|
||||
|
||||
if(this._current_conversation) {
|
||||
this._container_conversation.children().detach();
|
||||
this._container_conversation.append(conversation.html_tag());
|
||||
this._current_conversation.fix_view_size();
|
||||
this._current_conversation.fix_scroll(false);
|
||||
this.update_chat_box();
|
||||
}
|
||||
if(typeof(update_info_frame) === "undefined" || update_info_frame)
|
||||
this.handle.info_frame().update_channel_text();
|
||||
}
|
||||
|
||||
current_channel() : number { return this._current_conversation ? this._current_conversation.channel_id : 0; }
|
||||
|
||||
/* Used by notifychanneldeleted */
|
||||
delete_conversation(channel_id: number) {
|
||||
const entry = this._conversations.find(e => e.channel_id === channel_id);
|
||||
if(!entry)
|
||||
return;
|
||||
|
||||
this._conversations.remove(entry);
|
||||
entry.html_tag().detach();
|
||||
entry.destroy();
|
||||
}
|
||||
|
||||
reset() {
|
||||
while(this._conversations.length > 0)
|
||||
this.delete_conversation(this._conversations[0].channel_id);
|
||||
}
|
||||
|
||||
conversation(channel_id: number, create?: boolean) : Conversation {
|
||||
let conversation = this._conversations.find(e => e.channel_id === channel_id);
|
||||
|
||||
if(!conversation && channel_id >= 0 && (typeof (create) === "undefined" || create)) {
|
||||
conversation = new Conversation(this, channel_id);
|
||||
this._conversations.push(conversation);
|
||||
conversation.fetch_last_messages();
|
||||
}
|
||||
return conversation;
|
||||
}
|
||||
|
||||
on_show() {
|
||||
if(this._current_conversation)
|
||||
this._current_conversation.fix_scroll(false);
|
||||
}
|
||||
|
||||
update_input_format_helper() {
|
||||
const tag = this._html_tag.find(".container-format-helper");
|
||||
if(settings.static_global(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
|
||||
tag.removeClass("hidden").text(tr("*italic*, **bold**, ~~strikethrough~~, `code`, and more..."));
|
||||
} else {
|
||||
tag.addClass("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
namespace chat {
|
||||
declare function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
|
||||
export class MusicInfo {
|
||||
readonly handle: Frame;
|
||||
private _html_tag: JQuery;
|
||||
private _current_bot: MusicClientEntry | undefined;
|
||||
previous_frame_content: FrameContent;
|
||||
|
||||
constructor(handle: Frame) {
|
||||
this.handle = handle;
|
||||
this._build_html_tag();
|
||||
}
|
||||
|
||||
html_tag() : JQuery {
|
||||
return this._html_tag;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this._html_tag && this._html_tag.remove();
|
||||
this._html_tag = undefined;
|
||||
|
||||
this._current_bot = undefined;
|
||||
this.previous_frame_content = undefined;
|
||||
}
|
||||
|
||||
private _build_html_tag() {
|
||||
this._html_tag = $("#tmpl_frame_chat_music_info").renderTag();
|
||||
this._html_tag.find(".button-close").on('click', () => {
|
||||
if(this.previous_frame_content === FrameContent.CLIENT_INFO)
|
||||
this.previous_frame_content = FrameContent.NONE;
|
||||
|
||||
this.handle.set_content(this.previous_frame_content);
|
||||
});
|
||||
}
|
||||
|
||||
set_current_bot(client: MusicClientEntry | undefined, enforce?: boolean) {
|
||||
if(client) client.updateClientVariables(); /* just to ensure */
|
||||
if(client === this._current_bot && (typeof(enforce) === "undefined" || !enforce))
|
||||
return;
|
||||
|
||||
this._current_bot = client;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,896 @@
|
|||
/* the bar on the right with the chats (Channel & Client) */
|
||||
namespace chat {
|
||||
declare function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;
|
||||
|
||||
export type PrivateConversationViewEntry = {
|
||||
html_tag: JQuery;
|
||||
}
|
||||
|
||||
export type PrivateConversationMessageData = {
|
||||
message_id: string;
|
||||
message: string;
|
||||
sender: "self" | "partner";
|
||||
|
||||
sender_name: string;
|
||||
sender_unique_id: string;
|
||||
sender_client_id: number;
|
||||
|
||||
timestamp: number;
|
||||
};
|
||||
|
||||
export type PrivateConversationViewMessage = PrivateConversationMessageData & PrivateConversationViewEntry & {
|
||||
time_update_id: number;
|
||||
};
|
||||
export type PrivateConversationViewSpacer = PrivateConversationViewEntry;
|
||||
|
||||
export enum PrivateConversationState {
|
||||
OPEN,
|
||||
CLOSED,
|
||||
DISCONNECTED,
|
||||
DISCONNECTED_SELF,
|
||||
}
|
||||
|
||||
export type DisplayedMessage = {
|
||||
timestamp: number;
|
||||
|
||||
message: PrivateConversationViewMessage | PrivateConversationViewEntry;
|
||||
message_type: "spacer" | "message";
|
||||
|
||||
/* structure as following
|
||||
1. time pointer
|
||||
2. unread
|
||||
3. message
|
||||
*/
|
||||
tag_message: JQuery;
|
||||
tag_unread: PrivateConversationViewSpacer | undefined;
|
||||
tag_timepointer: PrivateConversationViewSpacer | undefined;
|
||||
}
|
||||
|
||||
export class PrivateConveration {
|
||||
readonly handle: PrivateConverations;
|
||||
private _html_entry_tag: JQuery;
|
||||
private _message_history: PrivateConversationMessageData[] = [];
|
||||
|
||||
private _callback_message: (text: string) => any;
|
||||
|
||||
private _state: PrivateConversationState;
|
||||
|
||||
private _last_message_updater_id: number;
|
||||
private _last_typing: number = 0;
|
||||
private _typing_timeout: number = 4000;
|
||||
private _typing_timeout_task: number;
|
||||
|
||||
_scroll_position: number | undefined; /* undefined to follow bottom | position for special stuff */
|
||||
_html_message_container: JQuery; /* only set when this chat is selected! */
|
||||
|
||||
client_unique_id: string;
|
||||
client_id: number;
|
||||
client_name: string;
|
||||
|
||||
private _displayed_messages: DisplayedMessage[] = [];
|
||||
private _displayed_messages_length: number = 500;
|
||||
private _spacer_unread_message: DisplayedMessage;
|
||||
|
||||
constructor(handle: PrivateConverations, client_unique_id: string, client_name: string, client_id: number) {
|
||||
this.handle = handle;
|
||||
this.client_name = client_name;
|
||||
this.client_unique_id = client_unique_id;
|
||||
this.client_id = client_id;
|
||||
this._state = PrivateConversationState.OPEN;
|
||||
|
||||
this._build_entry_tag();
|
||||
this.set_unread_flag(false);
|
||||
|
||||
this.load_history();
|
||||
}
|
||||
|
||||
private history_key() { return this.handle.handle.handle.channelTree.server.properties.virtualserver_unique_identifier + "_" + this.client_unique_id; }
|
||||
private load_history() {
|
||||
helpers.history.load_history(this.history_key()).then((data: PrivateConversationMessageData[]) => {
|
||||
if(!data) return;
|
||||
|
||||
const flag_unread = !!this._spacer_unread_message;
|
||||
for(const message of data.slice(data.length > this._displayed_messages_length ? data.length - this._displayed_messages_length : 0)) {
|
||||
this.append_message(message.message, {
|
||||
type: message.sender,
|
||||
name: message.sender_name,
|
||||
unique_id: message.sender_unique_id,
|
||||
client_id: message.sender_client_id
|
||||
}, new Date(message.timestamp), false);
|
||||
}
|
||||
|
||||
if(!flag_unread)
|
||||
this.set_unread_flag(false);
|
||||
|
||||
this.fix_scroll(false);
|
||||
this.save_history();
|
||||
}).catch(error => {
|
||||
log.warn(LogCategory.CHAT, tr("Failed to load private conversation history for user %s on server %s: %o"),
|
||||
this.client_unique_id, this.handle.handle.handle.channelTree.server.properties.virtualserver_unique_identifier, error);
|
||||
})
|
||||
}
|
||||
|
||||
private save_history() {
|
||||
helpers.history.save_history(this.history_key(), this._message_history).catch(error => {
|
||||
log.warn(LogCategory.CHAT, tr("Failed to save private conversation history for user %s on server %s: %o"),
|
||||
this.client_unique_id, this.handle.handle.handle.channelTree.server.properties.virtualserver_unique_identifier, error);
|
||||
});
|
||||
}
|
||||
|
||||
entry_tag() : JQuery {
|
||||
return this._html_entry_tag;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this._html_message_container = undefined; /* we do not own this container */
|
||||
|
||||
this.clear_messages(false);
|
||||
|
||||
this._html_entry_tag && this._html_entry_tag.remove();
|
||||
this._html_entry_tag = undefined;
|
||||
|
||||
this._message_history = undefined;
|
||||
if(this._typing_timeout_task)
|
||||
clearTimeout(this._typing_timeout_task);
|
||||
}
|
||||
|
||||
private _2d_flat<T>(array: T[][]) : T[] {
|
||||
const result = [];
|
||||
for(const a of array)
|
||||
result.push(...a.filter(e => typeof(e) !== "undefined"));
|
||||
return result;
|
||||
}
|
||||
|
||||
messages_tags() : JQuery[] {
|
||||
return this._2d_flat(this._displayed_messages.slice().reverse().map(e => [
|
||||
e.tag_timepointer ? e.tag_timepointer.html_tag : undefined,
|
||||
e.tag_unread ? e.tag_unread.html_tag : undefined,
|
||||
e.tag_message
|
||||
]));
|
||||
}
|
||||
|
||||
append_message(message: string, sender: {
|
||||
type: "self" | "partner";
|
||||
name: string;
|
||||
unique_id: string;
|
||||
client_id: number;
|
||||
}, timestamp?: Date, save_history?: boolean) {
|
||||
const message_date = timestamp || new Date();
|
||||
const message_timestamp = message_date.getTime();
|
||||
|
||||
const packed_message = {
|
||||
message: message,
|
||||
sender: sender.type,
|
||||
sender_name: sender.name,
|
||||
sender_client_id: sender.client_id,
|
||||
sender_unique_id: sender.unique_id,
|
||||
timestamp: message_date.getTime(),
|
||||
message_id: 'undefined'
|
||||
};
|
||||
|
||||
/* first of all register message in message history */
|
||||
{
|
||||
let index = 0;
|
||||
for(;index < this._message_history.length; index++) {
|
||||
if(this._message_history[index].timestamp > message_timestamp)
|
||||
continue;
|
||||
this._message_history.splice(index, 0, packed_message);
|
||||
break;
|
||||
}
|
||||
|
||||
if(index > 100)
|
||||
return; /* message is too old to be displayed */
|
||||
|
||||
if(index >= this._message_history.length)
|
||||
this._message_history.push(packed_message);
|
||||
|
||||
while(this._message_history.length > 100)
|
||||
this._message_history.pop();
|
||||
}
|
||||
|
||||
if(sender.type === "partner") {
|
||||
clearTimeout(this._typing_timeout_task);
|
||||
this._typing_timeout_task = 0;
|
||||
|
||||
if(this.typing_active()) {
|
||||
this._last_typing = 0;
|
||||
this.typing_expired();
|
||||
} else {
|
||||
this._update_message_timestamp();
|
||||
}
|
||||
} else {
|
||||
this._update_message_timestamp();
|
||||
}
|
||||
|
||||
if(typeof(save_history) !== "boolean" || save_history)
|
||||
this.save_history();
|
||||
|
||||
/* insert in view */
|
||||
{
|
||||
const basic_view_entry = this._build_message(packed_message);
|
||||
|
||||
this._register_displayed_message({
|
||||
timestamp: basic_view_entry.timestamp,
|
||||
message: basic_view_entry,
|
||||
message_type: "message",
|
||||
tag_message: basic_view_entry.html_tag,
|
||||
tag_timepointer: undefined,
|
||||
tag_unread: undefined
|
||||
}, true);
|
||||
}
|
||||
}
|
||||
|
||||
private _displayed_message_first_tag(message: DisplayedMessage) {
|
||||
const tp = message.tag_timepointer ? message.tag_timepointer.html_tag : undefined;
|
||||
const tu = message.tag_unread ? message.tag_unread.html_tag : undefined;
|
||||
return tp || tu || message.tag_message;
|
||||
}
|
||||
|
||||
private _destroy_displayed_message(message: DisplayedMessage, update_pointers: boolean) {
|
||||
if(update_pointers) {
|
||||
const index = this._displayed_messages.indexOf(message);
|
||||
if(index != -1 && index > 0) {
|
||||
const next = this._displayed_messages[index - 1];
|
||||
if(!next.tag_timepointer && message.tag_timepointer) {
|
||||
next.tag_timepointer = message.tag_timepointer;
|
||||
message.tag_timepointer = undefined;
|
||||
}
|
||||
if(!next.tag_unread && message.tag_unread) {
|
||||
this._spacer_unread_message = next;
|
||||
next.tag_unread = message.tag_unread;
|
||||
message.tag_unread = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
if(message == this._spacer_unread_message)
|
||||
this._spacer_unread_message = undefined;
|
||||
}
|
||||
|
||||
this._displayed_messages.remove(message);
|
||||
if(message.tag_timepointer)
|
||||
this._destroy_view_entry(message.tag_timepointer);
|
||||
|
||||
if(message.tag_unread)
|
||||
this._destroy_view_entry(message.tag_unread);
|
||||
|
||||
this._destroy_view_entry(message.message);
|
||||
}
|
||||
|
||||
clear_messages(save?: boolean) {
|
||||
this._message_history = [];
|
||||
while(this._displayed_messages.length > 0) {
|
||||
this._destroy_displayed_message(this._displayed_messages[0], false);
|
||||
}
|
||||
|
||||
this._spacer_unread_message = undefined;
|
||||
|
||||
this._update_message_timestamp();
|
||||
if(save)
|
||||
this.save_history();
|
||||
}
|
||||
|
||||
fix_scroll(animate: boolean) {
|
||||
if(!this._html_message_container)
|
||||
return;
|
||||
|
||||
let offset;
|
||||
if(this._spacer_unread_message) {
|
||||
offset = this._displayed_message_first_tag(this._spacer_unread_message)[0].offsetTop;
|
||||
} else if(typeof(this._scroll_position) !== "undefined") {
|
||||
offset = this._scroll_position;
|
||||
} else {
|
||||
offset = this._html_message_container[0].scrollHeight;
|
||||
}
|
||||
if(animate) {
|
||||
this._html_message_container.stop(true).animate({
|
||||
scrollTop: offset
|
||||
}, 'slow');
|
||||
} else {
|
||||
this._html_message_container.stop(true).scrollTop(offset);
|
||||
}
|
||||
}
|
||||
|
||||
private _update_message_timestamp() {
|
||||
if(this._last_message_updater_id)
|
||||
clearTimeout(this._last_message_updater_id);
|
||||
|
||||
if(!this._html_entry_tag)
|
||||
return; /* we got deleted, not need for updates */
|
||||
|
||||
if(this.typing_active()) {
|
||||
this._html_entry_tag.find(".last-message").text(tr("currently typing..."));
|
||||
return;
|
||||
}
|
||||
|
||||
const last_message = this._message_history[0];
|
||||
if(!last_message) {
|
||||
this._html_entry_tag.find(".last-message").text(tr("no history"));
|
||||
return;
|
||||
}
|
||||
|
||||
const timestamp = new Date(last_message.timestamp);
|
||||
let time = format.date.format_chat_time(timestamp);
|
||||
this._html_entry_tag.find(".last-message").text(time.result);
|
||||
|
||||
if(time.next_update > 0) {
|
||||
this._last_message_updater_id = setTimeout(() => this._update_message_timestamp(), time.next_update);
|
||||
} else {
|
||||
this._last_message_updater_id = 0;
|
||||
}
|
||||
}
|
||||
|
||||
private _destroy_message(message: PrivateConversationViewMessage) {
|
||||
if(message.time_update_id)
|
||||
clearTimeout(message.time_update_id);
|
||||
}
|
||||
|
||||
private _build_message(message: PrivateConversationMessageData) : PrivateConversationViewMessage {
|
||||
const result = message as PrivateConversationViewMessage;
|
||||
if(result.html_tag)
|
||||
return result;
|
||||
|
||||
const timestamp = new Date(message.timestamp);
|
||||
let time = format.date.format_chat_time(timestamp);
|
||||
result.html_tag = $("#tmpl_frame_chat_private_message").renderTag({
|
||||
timestamp: time.result,
|
||||
message_id: message.message_id,
|
||||
client_name: htmltags.generate_client_object({
|
||||
add_braces: false,
|
||||
client_name: message.sender_name,
|
||||
client_unique_id: message.sender_unique_id,
|
||||
client_id: message.sender_client_id
|
||||
}),
|
||||
message: MessageHelper.bbcode_chat(message.message),
|
||||
avatar: this.handle.handle.handle.fileManager.avatars.generate_chat_tag({id: message.sender_client_id}, message.sender_unique_id)
|
||||
});
|
||||
if(time.next_update > 0) {
|
||||
const _updater = () => {
|
||||
time = format.date.format_chat_time(timestamp);
|
||||
result.html_tag.find(".info .timestamp").text(time.result);
|
||||
if(time.next_update > 0)
|
||||
result.time_update_id = setTimeout(_updater, time.next_update);
|
||||
else
|
||||
result.time_update_id = 0;
|
||||
};
|
||||
result.time_update_id = setTimeout(_updater, time.next_update);
|
||||
} else {
|
||||
result.time_update_id = 0;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private _build_spacer(message: string, type: "date" | "new" | "disconnect" | "disconnect_self" | "reconnect" | "closed" | "error") : PrivateConversationViewSpacer {
|
||||
const tag = $("#tmpl_frame_chat_private_spacer").renderTag({
|
||||
message: message
|
||||
}).addClass("type-" + type);
|
||||
return {
|
||||
html_tag: tag
|
||||
}
|
||||
}
|
||||
|
||||
private _register_displayed_message(message: DisplayedMessage, update_new: boolean) {
|
||||
const message_date = new Date(message.timestamp);
|
||||
|
||||
/* before := older message; after := newer message */
|
||||
let entry_before: DisplayedMessage, entry_after: DisplayedMessage;
|
||||
let index = 0;
|
||||
for(;index < this._displayed_messages.length; index++) {
|
||||
if(this._displayed_messages[index].timestamp > message.timestamp)
|
||||
continue;
|
||||
|
||||
entry_after = index > 0 ? this._displayed_messages[index - 1] : undefined;
|
||||
entry_before = this._displayed_messages[index];
|
||||
this._displayed_messages.splice(index, 0, message);
|
||||
break;
|
||||
}
|
||||
if(index >= this._displayed_messages_length) {
|
||||
return; /* message is out of view region */
|
||||
}
|
||||
|
||||
if(index >= this._displayed_messages.length) {
|
||||
entry_before = undefined;
|
||||
entry_after = this._displayed_messages.last();
|
||||
this._displayed_messages.push(message);
|
||||
}
|
||||
|
||||
while(this._displayed_messages.length > this._displayed_messages_length)
|
||||
this._destroy_displayed_message(this._displayed_messages.last(), true);
|
||||
|
||||
const flag_new_message = update_new && index == 0 && (message.message_type === "spacer" || (<PrivateConversationViewMessage>message.message).sender === "partner");
|
||||
|
||||
/* Timeline for before - now */
|
||||
{
|
||||
let append_pointer = false;
|
||||
|
||||
if(entry_before) {
|
||||
if(!helpers.date.same_day(message.timestamp, entry_before.timestamp)) {
|
||||
append_pointer = true;
|
||||
}
|
||||
} else {
|
||||
append_pointer = true;
|
||||
}
|
||||
if(append_pointer) {
|
||||
const diff = format.date.date_format(message_date, new Date());
|
||||
if(diff == format.date.ColloquialFormat.YESTERDAY)
|
||||
message.tag_timepointer = this._build_spacer(tr("Yesterday"), "date");
|
||||
else if(diff == format.date.ColloquialFormat.TODAY)
|
||||
message.tag_timepointer = this._build_spacer(tr("Today"), "date");
|
||||
else if(diff == format.date.ColloquialFormat.GENERAL)
|
||||
message.tag_timepointer = this._build_spacer(format.date.format_date_general(message_date, false), "date");
|
||||
}
|
||||
}
|
||||
|
||||
/* Timeline not and after */
|
||||
{
|
||||
if(entry_after) {
|
||||
if(helpers.date.same_day(message_date, entry_after.timestamp)) {
|
||||
if(entry_after.tag_timepointer) {
|
||||
this._destroy_view_entry(entry_after.tag_timepointer);
|
||||
entry_after.tag_timepointer = undefined;
|
||||
}
|
||||
} else if(!entry_after.tag_timepointer) {
|
||||
const diff = format.date.date_format(new Date(entry_after.timestamp), new Date());
|
||||
if(diff == format.date.ColloquialFormat.YESTERDAY)
|
||||
entry_after.tag_timepointer = this._build_spacer(tr("Yesterday"), "date");
|
||||
else if(diff == format.date.ColloquialFormat.TODAY)
|
||||
entry_after.tag_timepointer = this._build_spacer(tr("Today"), "date");
|
||||
else if(diff == format.date.ColloquialFormat.GENERAL)
|
||||
entry_after.tag_timepointer = this._build_spacer(format.date.format_date_general(message_date, false), "date");
|
||||
|
||||
entry_after.tag_timepointer.html_tag.insertBefore(entry_after.tag_message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* new message flag */
|
||||
if(flag_new_message) {
|
||||
if(!this._spacer_unread_message) {
|
||||
this._spacer_unread_message = message;
|
||||
message.tag_unread = this._build_spacer(tr("Unread messages"), "new");
|
||||
|
||||
this.set_unread_flag(true);
|
||||
}
|
||||
}
|
||||
|
||||
if(this._html_message_container) {
|
||||
if(entry_before) {
|
||||
message.tag_message.insertAfter(entry_before.tag_message);
|
||||
} else if(entry_after) {
|
||||
message.tag_message.insertBefore(this._displayed_message_first_tag(entry_after));
|
||||
} else {
|
||||
this._html_message_container.append(message.tag_message);
|
||||
}
|
||||
|
||||
/* first time pointer */
|
||||
if(message.tag_timepointer)
|
||||
message.tag_timepointer.html_tag.insertBefore(message.tag_message);
|
||||
|
||||
/* the unread */
|
||||
if(message.tag_unread)
|
||||
message.tag_unread.html_tag.insertBefore(message.tag_message);
|
||||
}
|
||||
|
||||
this.fix_scroll(true);
|
||||
}
|
||||
|
||||
private _destroy_view_entry(entry: PrivateConversationViewEntry) {
|
||||
if(!entry.html_tag)
|
||||
return;
|
||||
entry.html_tag.remove();
|
||||
if('sender' in entry)
|
||||
this._destroy_message(entry);
|
||||
}
|
||||
|
||||
private _build_entry_tag() {
|
||||
this._html_entry_tag = $("#tmpl_frame_chat_private_entry").renderTag({
|
||||
client_name: this.client_name,
|
||||
last_time: tr("error no timestamp"),
|
||||
avatar: this.handle.handle.handle.fileManager.avatars.generate_chat_tag({id: this.client_id}, this.client_unique_id)
|
||||
});
|
||||
this._html_entry_tag.on('click', event => {
|
||||
if(event.isDefaultPrevented())
|
||||
return;
|
||||
|
||||
this.handle.set_selected_conversation(this);
|
||||
});
|
||||
this._html_entry_tag.find('.button-close').on('click', event => {
|
||||
event.preventDefault();
|
||||
this.close_conversation();
|
||||
});
|
||||
this._update_message_timestamp();
|
||||
}
|
||||
|
||||
update_avatar() {
|
||||
const container = this._html_entry_tag.find(".container-avatar");
|
||||
container.find(".avatar").remove();
|
||||
container.append(this.handle.handle.handle.fileManager.avatars.generate_chat_tag({id: this.client_id}, this.client_unique_id));
|
||||
}
|
||||
|
||||
close_conversation() {
|
||||
this.handle.delete_conversation(this, true);
|
||||
}
|
||||
|
||||
set_client_name(name: string) {
|
||||
if(this.client_name === name)
|
||||
return;
|
||||
this.client_name = name;
|
||||
this._html_entry_tag.find(".client-name").text(name);
|
||||
}
|
||||
|
||||
set_unread_flag(flag: boolean, update_chat_counter?: boolean) {
|
||||
/* unread message pointer */
|
||||
if(flag != (typeof(this._spacer_unread_message) !== "undefined")) {
|
||||
if(flag) {
|
||||
if(this._displayed_messages.length > 0) /* without messages we cant be unread */
|
||||
return;
|
||||
|
||||
if(!this._spacer_unread_message) {
|
||||
this._spacer_unread_message = this._displayed_messages[0];
|
||||
this._spacer_unread_message.tag_unread = this._build_spacer(tr("Unread messages"), "new");
|
||||
this._spacer_unread_message.tag_unread.html_tag.insertBefore(this._spacer_unread_message.tag_message);
|
||||
}
|
||||
} else {
|
||||
const ctree = this.handle.handle.handle.channelTree;
|
||||
if(ctree && ctree.tag_tree() && this.client_id)
|
||||
ctree.tag_tree().find(".marker-text-unread[private-conversation='" + this.client_id + "']").addClass("hidden");
|
||||
|
||||
if(this._spacer_unread_message) {
|
||||
this._destroy_view_entry(this._spacer_unread_message.tag_unread);
|
||||
this._spacer_unread_message.tag_unread = undefined;
|
||||
this._spacer_unread_message = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* general notify */
|
||||
this._html_entry_tag.toggleClass("unread", flag);
|
||||
if(typeof(update_chat_counter) !== "boolean" || update_chat_counter)
|
||||
this.handle.handle.info_frame().update_chat_counter();
|
||||
}
|
||||
|
||||
is_unread() : boolean { return !!this._spacer_unread_message; }
|
||||
|
||||
private _append_state_change(state: "disconnect" | "disconnect_self" | "reconnect" | "closed") {
|
||||
let message;
|
||||
if(state == "closed")
|
||||
message = tr("Your chat partner has closed the conversation");
|
||||
else if(state == "reconnect")
|
||||
message = this._state === PrivateConversationState.DISCONNECTED_SELF ?tr("You've reconnected to the server") : tr("Your chat partner has reconnected");
|
||||
else if(state === "disconnect")
|
||||
message = tr("Your chat partner has disconnected");
|
||||
else
|
||||
message = tr("You've disconnected from the server");
|
||||
|
||||
const spacer = this._build_spacer(message, state);
|
||||
this._register_displayed_message({
|
||||
timestamp: Date.now(),
|
||||
message: spacer,
|
||||
message_type: "spacer",
|
||||
tag_message: spacer.html_tag,
|
||||
tag_timepointer: undefined,
|
||||
tag_unread: undefined
|
||||
}, state === "disconnect");
|
||||
}
|
||||
|
||||
state() : PrivateConversationState {
|
||||
return this._state;
|
||||
}
|
||||
|
||||
set_state(state: PrivateConversationState) {
|
||||
if(this._state == state)
|
||||
return;
|
||||
|
||||
if(state == PrivateConversationState.DISCONNECTED) {
|
||||
this._append_state_change("disconnect");
|
||||
this.client_id = 0;
|
||||
} else if(state == PrivateConversationState.OPEN && this._state != PrivateConversationState.CLOSED)
|
||||
this._append_state_change("reconnect");
|
||||
else if(state == PrivateConversationState.CLOSED)
|
||||
this._append_state_change("closed");
|
||||
else if(state == PrivateConversationState.DISCONNECTED_SELF)
|
||||
this._append_state_change("disconnect_self");
|
||||
|
||||
this._state = state;
|
||||
}
|
||||
|
||||
set_text_callback(callback: (text: string) => any, update_enabled_state?: boolean) {
|
||||
this._callback_message = callback;
|
||||
if(typeof (update_enabled_state) !== "boolean" || update_enabled_state)
|
||||
this.handle.update_chatbox_state();
|
||||
}
|
||||
|
||||
chat_enabled() {
|
||||
return typeof(this._callback_message) !== "undefined" && (this._state == PrivateConversationState.OPEN || this._state == PrivateConversationState.CLOSED);
|
||||
}
|
||||
|
||||
append_error(message: string, date?: number) {
|
||||
const spacer = this._build_spacer(message, "error");
|
||||
this._register_displayed_message({
|
||||
timestamp: date || Date.now(),
|
||||
message: spacer,
|
||||
message_type: "spacer",
|
||||
tag_message: spacer.html_tag,
|
||||
tag_timepointer: undefined,
|
||||
tag_unread: undefined
|
||||
}, true);
|
||||
}
|
||||
|
||||
call_message(message: string) {
|
||||
if(this._callback_message)
|
||||
this._callback_message(message);
|
||||
else {
|
||||
log.warn(LogCategory.CHAT, tr("Dropping conversation message for client %o because of no message callback."), {
|
||||
client_name: this.client_name,
|
||||
client_id: this.client_id,
|
||||
client_unique_id: this.client_unique_id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private typing_expired() {
|
||||
this._update_message_timestamp();
|
||||
if(this.handle.current_conversation() === this)
|
||||
this.handle.update_typing_state();
|
||||
}
|
||||
|
||||
trigger_typing() {
|
||||
let _new = Date.now() - this._last_typing > this._typing_timeout;
|
||||
this._last_typing = Date.now();
|
||||
|
||||
if(this._typing_timeout_task)
|
||||
clearTimeout(this._typing_timeout_task);
|
||||
|
||||
if(_new)
|
||||
this._update_message_timestamp();
|
||||
if(this.handle.current_conversation() === this)
|
||||
this.handle.update_typing_state();
|
||||
|
||||
this._typing_timeout_task = setTimeout(() => this.typing_expired(), this._typing_timeout);
|
||||
}
|
||||
|
||||
typing_active() {
|
||||
return Date.now() - this._last_typing < this._typing_timeout;
|
||||
}
|
||||
}
|
||||
|
||||
export class PrivateConverations {
|
||||
readonly handle: Frame;
|
||||
private _chat_box: ChatBox;
|
||||
private _html_tag: JQuery;
|
||||
|
||||
private _container_conversation: JQuery;
|
||||
private _container_conversation_messages: JQuery;
|
||||
private _container_conversation_list: JQuery;
|
||||
private _container_typing: JQuery;
|
||||
|
||||
private _html_no_chats: JQuery;
|
||||
private _conversations: PrivateConveration[] = [];
|
||||
|
||||
private _current_conversation: PrivateConveration = undefined;
|
||||
private _select_read_timer: number;
|
||||
|
||||
constructor(handle: Frame) {
|
||||
this.handle = handle;
|
||||
this._chat_box = new ChatBox();
|
||||
this._build_html_tag();
|
||||
|
||||
this.update_chatbox_state();
|
||||
this.update_typing_state();
|
||||
this._chat_box.callback_text = message => {
|
||||
if(!this._current_conversation) {
|
||||
log.warn(LogCategory.CHAT, tr("Dropping conversation message because of no active conversation."));
|
||||
return;
|
||||
}
|
||||
this._current_conversation.call_message(message);
|
||||
};
|
||||
|
||||
this._chat_box.callback_typing = () => {
|
||||
if(!this._current_conversation) {
|
||||
log.warn(LogCategory.CHAT, tr("Dropping conversation typing action because of no active conversation."));
|
||||
return;
|
||||
}
|
||||
|
||||
const connection = this.handle.handle.serverConnection;
|
||||
if(!connection || !connection.connected())
|
||||
return;
|
||||
|
||||
connection.send_command("clientchatcomposing", {
|
||||
clid: this._current_conversation.client_id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
clear_client_ids() {
|
||||
this._conversations.forEach(e => {
|
||||
e.client_id = 0;
|
||||
e.set_state(PrivateConversationState.DISCONNECTED_SELF);
|
||||
});
|
||||
}
|
||||
|
||||
html_tag() : JQuery { return this._html_tag; }
|
||||
destroy() {
|
||||
this._chat_box && this._chat_box.destroy();
|
||||
this._chat_box = undefined;
|
||||
|
||||
for(const conversation of this._conversations)
|
||||
conversation.destroy();
|
||||
this._conversations = [];
|
||||
this._current_conversation = undefined;
|
||||
|
||||
clearTimeout(this._select_read_timer);
|
||||
|
||||
this._html_tag && this._html_tag.remove();
|
||||
this._html_tag = undefined;
|
||||
|
||||
}
|
||||
|
||||
current_conversation() : PrivateConveration | undefined { return this._current_conversation; }
|
||||
|
||||
conversations() : PrivateConveration[] { return this._conversations; }
|
||||
create_conversation(client_uid: string, client_name: string, client_id: number) : PrivateConveration {
|
||||
const conv = new PrivateConveration(this, client_uid, client_name, client_id);
|
||||
this._conversations.push(conv);
|
||||
this._html_no_chats.hide();
|
||||
|
||||
this._container_conversation_list.append(conv.entry_tag());
|
||||
this.handle.info_frame().update_chat_counter();
|
||||
return conv;
|
||||
}
|
||||
delete_conversation(conv: PrivateConveration, update_chat_couner?: boolean) {
|
||||
if(!this._conversations.remove(conv))
|
||||
return;
|
||||
//TODO: May animate?
|
||||
conv.destroy();
|
||||
conv.clear_messages(false);
|
||||
this._html_no_chats.toggle(this._conversations.length == 0);
|
||||
if(conv === this._current_conversation)
|
||||
this.set_selected_conversation(undefined);
|
||||
if(update_chat_couner || typeof(update_chat_couner) !== "boolean")
|
||||
this.handle.info_frame().update_chat_counter();
|
||||
}
|
||||
find_conversation(partner: { name: string; unique_id: string; client_id: number }, mode: { create: boolean, attach: boolean }) : PrivateConveration | undefined {
|
||||
for(const conversation of this.conversations())
|
||||
if(conversation.client_id == partner.client_id && (!partner.unique_id || conversation.client_unique_id == partner.unique_id)) {
|
||||
if(conversation.state() != PrivateConversationState.OPEN)
|
||||
conversation.set_state(PrivateConversationState.OPEN);
|
||||
return conversation;
|
||||
}
|
||||
|
||||
let conv: PrivateConveration;
|
||||
if(mode.attach) {
|
||||
for(const conversation of this.conversations())
|
||||
if(conversation.client_unique_id == partner.unique_id && conversation.state() != PrivateConversationState.OPEN) {
|
||||
conversation.set_state(PrivateConversationState.OPEN);
|
||||
conversation.client_id = partner.client_id;
|
||||
conversation.set_client_name(partner.name);
|
||||
|
||||
conv = conversation;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(mode.create && !conv) {
|
||||
conv = this.create_conversation(partner.unique_id, partner.name, partner.client_id);
|
||||
conv.client_id = partner.client_id;
|
||||
conv.set_client_name(partner.name);
|
||||
}
|
||||
|
||||
if(conv) {
|
||||
conv.set_text_callback(message => {
|
||||
log.debug(LogCategory.CLIENT, tr("Sending text message %s to %o"), message, partner);
|
||||
this.handle.handle.serverConnection.send_command("sendtextmessage", {"targetmode": 1, "target": partner.client_id, "msg": message}).catch(error => {
|
||||
if(error instanceof CommandResult) {
|
||||
if(error.id == ErrorID.CLIENT_INVALID_ID) {
|
||||
conv.set_state(PrivateConversationState.DISCONNECTED);
|
||||
conv.set_text_callback(undefined);
|
||||
} else if(error.id == ErrorID.PERMISSION_ERROR) {
|
||||
/* may notify for no permissions? */
|
||||
} else {
|
||||
conv.append_error(tr("Failed to send message: ") + (error.extra_message || error.message));
|
||||
}
|
||||
} else {
|
||||
conv.append_error(tr("Failed to send message. Lookup the console for more details"));
|
||||
log.error(LogCategory.CHAT, tr("Failed to send conversation message: %o", error));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
return conv;
|
||||
}
|
||||
|
||||
clear_conversations() {
|
||||
while(this._conversations.length > 0)
|
||||
this.delete_conversation(this._conversations[0], false);
|
||||
this.handle.info_frame().update_chat_counter();
|
||||
}
|
||||
|
||||
set_selected_conversation(conv: PrivateConveration | undefined) {
|
||||
if(conv === this._current_conversation)
|
||||
return;
|
||||
|
||||
if(this._select_read_timer)
|
||||
clearTimeout(this._select_read_timer);
|
||||
|
||||
if(this._current_conversation)
|
||||
this._current_conversation._html_message_container = undefined;
|
||||
|
||||
this._container_conversation_list.find(".selected").removeClass("selected");
|
||||
this._container_conversation_messages.children().detach();
|
||||
this._current_conversation = conv;
|
||||
if(!this._current_conversation) {
|
||||
this.update_chatbox_state();
|
||||
return;
|
||||
}
|
||||
|
||||
this._current_conversation._html_message_container = this._container_conversation_messages;
|
||||
const messages = this._current_conversation.messages_tags();
|
||||
/* TODO: Check if the messages are empty and display "No messages" */
|
||||
this._container_conversation_messages.append(...messages);
|
||||
|
||||
if(this._current_conversation.is_unread() && false) {
|
||||
this._select_read_timer = setTimeout(() => {
|
||||
this._current_conversation.set_unread_flag(false, true);
|
||||
}, 20 * 1000); /* Lets guess you've read the new messages within 5 seconds */
|
||||
}
|
||||
this._current_conversation.fix_scroll(false);
|
||||
this._current_conversation.entry_tag().addClass("selected");
|
||||
this.update_chatbox_state();
|
||||
}
|
||||
|
||||
update_chatbox_state() {
|
||||
this._chat_box.set_enabled(!!this._current_conversation && this._current_conversation.chat_enabled());
|
||||
}
|
||||
|
||||
update_typing_state() {
|
||||
this._container_typing.toggleClass("hidden", !this._current_conversation || !this._current_conversation.typing_active());
|
||||
}
|
||||
|
||||
private _build_html_tag() {
|
||||
this._html_tag = $("#tmpl_frame_chat_private").renderTag({
|
||||
chatbox: this._chat_box.html_tag()
|
||||
}).dividerfy();
|
||||
this._container_conversation = this._html_tag.find(".conversation");
|
||||
this._container_conversation.on('click', event => { /* lets think if a user clicks within that field that he has read the messages */
|
||||
if(this._current_conversation)
|
||||
this._current_conversation.set_unread_flag(false, true); /* only updates everything if the state changes */
|
||||
});
|
||||
|
||||
this._container_conversation_messages = this._container_conversation.find(".messages");
|
||||
this._container_conversation_messages.on('scroll', event => {
|
||||
if(!this._current_conversation)
|
||||
return;
|
||||
|
||||
const current_view = this._container_conversation_messages[0].scrollTop + this._container_conversation_messages[0].clientHeight + this._container_conversation_messages[0].clientHeight * .125;
|
||||
if(current_view > this._container_conversation_messages[0].scrollHeight)
|
||||
this._current_conversation._scroll_position = undefined;
|
||||
else
|
||||
this._current_conversation._scroll_position = this._container_conversation_messages[0].scrollTop;
|
||||
});
|
||||
|
||||
this._container_conversation_list = this._html_tag.find(".conversation-list");
|
||||
this._html_no_chats = this._container_conversation_list.find(".no-chats");
|
||||
this._container_typing = this._html_tag.find(".container-typing");
|
||||
this.update_input_format_helper();
|
||||
}
|
||||
|
||||
try_input_focus() {
|
||||
this._chat_box.focus_input();
|
||||
}
|
||||
|
||||
on_show() {
|
||||
if(this._current_conversation)
|
||||
this._current_conversation.fix_scroll(false);
|
||||
}
|
||||
|
||||
update_input_format_helper() {
|
||||
const tag = this._html_tag.find(".container-format-helper");
|
||||
if(settings.static_global(Settings.KEY_CHAT_ENABLE_MARKDOWN)) {
|
||||
tag.removeClass("hidden").text(tr("*italic*, **bold**, ~~strikethrough~~, `code`, and more..."));
|
||||
} else {
|
||||
tag.addClass("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -514,6 +514,9 @@ class ChannelTree {
|
|||
|
||||
if(!$.isArray(this.currently_selected)) {
|
||||
if(this.currently_selected instanceof ClientEntry && settings.static_global(Settings.KEY_SWITCH_INSTANT_CLIENT)) {
|
||||
if(this.currently_selected instanceof MusicClientEntry)
|
||||
this.client.side_bar.show_music_player(this.currently_selected);
|
||||
else
|
||||
this.client.side_bar.show_client_info(this.currently_selected);
|
||||
} else if(this.currently_selected instanceof ChannelEntry && settings.static_global(Settings.KEY_SWITCH_INSTANT_CHAT)) {
|
||||
this.client.side_bar.channel_conversations().set_current_channel(this.currently_selected.channelId);
|
||||
|
|
|
|||
|
|
@ -211,6 +211,14 @@ const loader_javascript = {
|
|||
"js/ui/client_move.js",
|
||||
"js/ui/htmltags.js",
|
||||
|
||||
|
||||
"js/ui/frames/side/chat_helper.js",
|
||||
"js/ui/frames/side/chat_box.js",
|
||||
"js/ui/frames/side/client_info.js",
|
||||
"js/ui/frames/side/music_info.js",
|
||||
"js/ui/frames/side/conversations.js",
|
||||
"js/ui/frames/side/private_conversations.js",
|
||||
|
||||
"js/ui/frames/ControlBar.js",
|
||||
"js/ui/frames/chat.js",
|
||||
"js/ui/frames/chat_frame.js",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
/* TODO: Implement this so we could use the command protocol as well instead of json.
|
||||
Why? Because the server has to do less work and we would be still happy :)
|
||||
*/
|
||||
namespace connection {
|
||||
export function build_command(data: any[], flags: string[]) {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -133,7 +133,7 @@ namespace audio {
|
|||
static codec_pool: codec.CodecPool[];
|
||||
|
||||
static codecSupported(type: number) : boolean {
|
||||
return this.codec_pool.length > type && this.codec_pool[type].supported();
|
||||
return this.codec_pool && this.codec_pool.length > type && this.codec_pool[type].supported();
|
||||
}
|
||||
|
||||
private voice_packet_id: number = 0;
|
||||
|
|
|
|||
|
|
@ -106,11 +106,11 @@ class OpusWorker implements CodecWorker {
|
|||
}
|
||||
|
||||
initialise?() : string {
|
||||
this.fn_newHandle = Module.cwrap("codec_opus_createNativeHandle", "number", ["number", "number"]);
|
||||
this.fn_decode = Module.cwrap("codec_opus_decode", "number", ["number", "number", "number", "number"]);
|
||||
this.fn_newHandle = cwrap("codec_opus_createNativeHandle", "number", ["number", "number"]);
|
||||
this.fn_decode = cwrap("codec_opus_decode", "number", ["number", "number", "number", "number"]);
|
||||
/* codec_opus_decode(handle, buffer, length, maxlength) */
|
||||
this.fn_encode = Module.cwrap("codec_opus_encode", "number", ["number", "number", "number", "number"]);
|
||||
this.fn_reset = Module.cwrap("codec_opus_reset", "number", ["number"]);
|
||||
this.fn_encode = cwrap("codec_opus_encode", "number", ["number", "number", "number", "number"]);
|
||||
this.fn_reset = cwrap("codec_opus_reset", "number", ["number"]);
|
||||
|
||||
this.nativeHandle = this.fn_newHandle(this.channelCount, this.type);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue