Chat refactor + persistent backing chat users (#1163)
* First pass at chat user registration and validation * Disable chat if the user is disabled/blocked or the server hits max connections * Handle dropping sockets if chat is disabled * Fix origin in automated chat test * Work for updated chat moderation * Chat message markdown rendering and fix tests * Put /api/chat behind a chat user access token. Closes #1085 * Reject blocked username changes * More WIP moderation * Defer configuring chat until we know if it is enabled. Closes #1135 * chat user blocking. Closes #1096 * Add tests around user access for #1096 * Add external integration chat message API + update integration auth middleware to pass along integration name. Closes #1092 * Delete old chat messages from db as to not hold on to excessive data. Closes #1152 * Add schema migration for messages. Closes #1155 * Commit updated API documentation * Add chat load test * Shared db mutex and db optimizations * Simplify past display name handling * Use a new test db for each test run * Wire up the external messages actions + add tests for them * Move access tokens to be actual users * Run message pruning at launch + fix comparison * Do not return API users in disabled users response * Fix incorrect highlighting. Closes #1160 * Consolidate user table statements * Set the max process connection limit to 70% of maximum * Fix wrong old display name being returned in name change event * Delete the old chat server files * Wire back up the webhooks * Remove unused * Invalidate user cache on changes * Do not send rendered body as RawBody * Some cleanup * Standardize names for external API users to ExternalAPIUser * Do not log token * Checkout branch when building admin for testing * Bundle in dev admin for testing * Some cleanup * Cleanup js logs * Cleanup and standardize event names * Clean up some logging * Update API spec. Closes #1133 * Commit updated API documentation * Change paths to be better named * Commit updated API documentation * Update admin bundle * Fix duplicate event name * Rename scope var * Update admin bundle * Move connected clients controller into admin package * Fix collecting usernames for autocomplete purposes * No longer generate username when it is empty * Sort clients and users by timestamp * Move file to admin controller package * Swap, so the comments stay correct Co-authored-by: Jannik <jannik@outlook.com> * Use explicit type alias Co-authored-by: Jannik <jannik@outlook.com> * Remove commented code. Co-authored-by: Jannik <jannik@outlook.com> * Cleanup test * Remove some extra logging * Add some clarity * Update dev instance of admin for testing * Consolidate lines Co-authored-by: Jannik <jannik@outlook.com> * Remove commented unused vars Co-authored-by: Jannik <jannik@outlook.com> * Until needed do not return IP address with client list * Fix typo of wrong var * Typo led to a bad test. Fix typo and fix test. * Guard against the socket reconnecting on error if previously set to shutdown * Do not log access tokens * Return success message on enable/disable user * Clean up some inactionable error messages. Sent ban message. Sort banned users. * fix styling for when chat is completely disabled * Unused * guard against nil clients * Update dev admin bundle * Do not unhide messages when unblocking user just to be safe. Send removal action from the controller * Add convinience function for getting active connections for a single user * Lock db on these mutations * Cleanup force disconnect using GetClientsForUser and capture client reference explicitly * No longer re-showing banned user messages for safety. Removing this test. * Remove no longer needed comment * Tweaks to forbidden username handling. - Standardize naming to not use "block" but "forbidden" instead. - Pass array over the wire instead of string. - Add API test - Fix default list incorrectly being appended to custom list. * Logging cleanup * Update dev admin bundle * Add an artificial delay in order to visually see message being hidden when testing * Remove the user cache as it is a premature optimization * When connected to chat let the user know their current user details to sync the username in the UI * On connected send current display name back to client. - Move name change out of chat component. - Add additional event type constants. * Fix broken workflow due to typo * Troubleshoot workflow * Bump htm from 3.0.4 to 3.1.0 in /build/javascript (#1181) * Bump htm from 3.0.4 to 3.1.0 in /build/javascript Bumps [htm](https://github.com/developit/htm) from 3.0.4 to 3.1.0. - [Release notes](https://github.com/developit/htm/releases) - [Commits](https://github.com/developit/htm/compare/3.0.4...3.1.0) --- updated-dependencies: - dependency-name: htm dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * Run npm run build and update libraries Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> * Commit updated Javascript packages * Re-send current user info when a rejected name change takes place * All socket writes should be through the send chan and not directly * Seed the random generator * Add keys and indexes to users table * a util to generate consistent emoji markup * console clean up * mod tidy * Commit updated API documentation * Handle the max payload size of a socket message. - Only close socket if x2 greater than the max size. - Send the user a message if a message is too large. - Surface the max size in bytes in the config. * Update admin bundle * Force all events to be sent in their own socket message and do not concatinate in a single message * Update chat embed to register for access token * Use a different access token for embed chat * Update the chat message bubble background color to be bolder * add base tag to open links in new window, closes #1220 * Support text input of :emoji: in chat (#1190) * Initial implementation of emoji injection * fix bookkeeping with multiple emoji * make the emoji lookup case-insensitive * try another solution for Caretposition * add title to emojis minor refactoring * bind moji injection to InputKeyUp * simplify the code replace all found emojis * inject emoji if the modifer is released earlier * more efficient emoji tag search * use json emoji.emoji as url * use createEmojiMarkup() * move emojify() to chat.js * emojify on paste * cleanup emoji titles in paste * update inputText in InputKeyup * mark emoji titles with 2*zwnj this way paste cleanup will not interfere with text which include zwnj * emoji should not change the inputText * Do not show join messages when chat is offline. Closes #1224 - Show stream starting/ending messages in chat. - When stream starts show everyone the welcome message. * Force scrolling chat to bottom after history is populated regardless of scroll position. Closes https://github.com/owncast/owncast/issues/1222 * use maxSocketPayloadSize to calculate total bytes of message payload (#1221) * utilize maxSocketPayloadSize from config; update chatInput to calculate based on that value instead of text value; remove usage of inputText for counting * add a buffer to account for entire websocket payload for message char counting; trim nbsp;'s from ends of messages when calculating count Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: Jannik <jannik@outlook.com> Co-authored-by: Ginger Wong <omqmail@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Meisam <39205857+MFTabriz@users.noreply.github.com>
This commit is contained in:
Gabe Kangas
@@ -7,41 +7,41 @@ import {
|
||||
|
||||
// Taken from https://stackoverflow.com/questions/3972014/get-contenteditable-caret-index-position
|
||||
export function getCaretPosition(editableDiv) {
|
||||
var caretPos = 0,
|
||||
sel, range;
|
||||
if (window.getSelection) {
|
||||
sel = window.getSelection();
|
||||
if (sel.rangeCount) {
|
||||
range = sel.getRangeAt(0);
|
||||
if (range.commonAncestorContainer.parentNode == editableDiv) {
|
||||
caretPos = range.endOffset;
|
||||
}
|
||||
}
|
||||
} else if (document.selection && document.selection.createRange) {
|
||||
range = document.selection.createRange();
|
||||
if (range.parentElement() == editableDiv) {
|
||||
var tempEl = document.createElement("span");
|
||||
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
|
||||
var tempRange = range.duplicate();
|
||||
tempRange.moveToElementText(tempEl);
|
||||
tempRange.setEndPoint("EndToEnd", range);
|
||||
caretPos = tempRange.text.length;
|
||||
}
|
||||
}
|
||||
return caretPos;
|
||||
var caretPos = 0,
|
||||
sel, range;
|
||||
if (window.getSelection) {
|
||||
sel = window.getSelection();
|
||||
if (sel.rangeCount) {
|
||||
range = sel.getRangeAt(0);
|
||||
if (range.commonAncestorContainer.parentNode == editableDiv) {
|
||||
caretPos = range.endOffset;
|
||||
}
|
||||
}
|
||||
} else if (document.selection && document.selection.createRange) {
|
||||
range = document.selection.createRange();
|
||||
if (range.parentElement() == editableDiv) {
|
||||
var tempEl = document.createElement("span");
|
||||
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
|
||||
var tempRange = range.duplicate();
|
||||
tempRange.moveToElementText(tempEl);
|
||||
tempRange.setEndPoint("EndToEnd", range);
|
||||
caretPos = tempRange.text.length;
|
||||
}
|
||||
}
|
||||
return caretPos;
|
||||
}
|
||||
|
||||
// Might not need this anymore
|
||||
// Pieced together from parts of https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div
|
||||
export function setCaretPosition(editableDiv, position) {
|
||||
var range = document.createRange();
|
||||
var sel = window.getSelection();
|
||||
range.selectNode(editableDiv);
|
||||
range.setStart(editableDiv.childNodes[0], position);
|
||||
range.collapse(true);
|
||||
var range = document.createRange();
|
||||
var sel = window.getSelection();
|
||||
range.selectNode(editableDiv);
|
||||
range.setStart(editableDiv.childNodes[0], position);
|
||||
range.collapse(true);
|
||||
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
}
|
||||
|
||||
|
||||
@@ -55,9 +55,9 @@ export function generatePlaceholderText(isEnabled, hasSentFirstChatMessage) {
|
||||
export function extraUserNamesFromMessageHistory(messages) {
|
||||
const list = [];
|
||||
if (messages) {
|
||||
messages.forEach(function(message) {
|
||||
if (!list.includes(message.author)) {
|
||||
list.push(message.author);
|
||||
messages.forEach(function (message) {
|
||||
if (!list.includes(message.user.displayName)) {
|
||||
list.push(message.user.displayName);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -86,6 +86,9 @@ export function convertToText(str = '') {
|
||||
// Replace `<p>` (from IE).
|
||||
value = value.replace(/<p>/gi, '\n');
|
||||
|
||||
// Cleanup the emoji titles.
|
||||
value = value.replace(/\u200C{2}/gi, '');
|
||||
|
||||
// Trim each line.
|
||||
value = value
|
||||
.split('\n')
|
||||
@@ -109,7 +112,7 @@ export function convertToText(str = '') {
|
||||
You would call this when a user pastes from
|
||||
the clipboard into a `contenteditable` area.
|
||||
*/
|
||||
export function convertOnPaste( event = { preventDefault() {} }) {
|
||||
export function convertOnPaste(event = { preventDefault() { } }, emojiList) {
|
||||
// Prevent paste.
|
||||
event.preventDefault();
|
||||
|
||||
@@ -136,8 +139,47 @@ export function convertOnPaste( event = { preventDefault() {} }) {
|
||||
// Clean up text.
|
||||
value = convertToText(value);
|
||||
|
||||
const HTML = emojify(value, emojiList);
|
||||
|
||||
// Insert text.
|
||||
if (typeof document.execCommand === 'function') {
|
||||
document.execCommand('insertText', false, value);
|
||||
document.execCommand('insertHTML', false, HTML);
|
||||
}
|
||||
}
|
||||
|
||||
export function createEmojiMarkup(data, isCustom) {
|
||||
const emojiUrl = isCustom ? data.emoji : data.url;
|
||||
const emojiName = (isCustom ? data.name : data.url.split('\\').pop().split('/').pop().split('.').shift()).toLowerCase();
|
||||
return '<img class="emoji" alt=":' + emojiName + ':" title=":' + emojiName + ':" src="' + emojiUrl + '"/>';
|
||||
}
|
||||
|
||||
// trim html white space characters from ends of messages for more accurate counting
|
||||
export function trimNbsp(html) {
|
||||
return html.replace(/^(?: |\s)+|(?: |\s)+$/ig,'');
|
||||
}
|
||||
|
||||
export function emojify(HTML, emojiList) {
|
||||
const textValue = convertToText(HTML)
|
||||
|
||||
for (var lastPos = textValue.length; lastPos >= 0; lastPos--) {
|
||||
const endPos = textValue.lastIndexOf(':', lastPos);
|
||||
if (endPos <= 0) {
|
||||
break;
|
||||
}
|
||||
const startPos = textValue.lastIndexOf(':', endPos - 1);
|
||||
if (startPos === -1) {
|
||||
break;
|
||||
}
|
||||
const typedEmoji = textValue.substring(startPos + 1, endPos).trim();
|
||||
const emojiIndex = emojiList.findIndex(function (emojiItem) {
|
||||
return emojiItem.name.toLowerCase() === typedEmoji.toLowerCase();
|
||||
});
|
||||
|
||||
if (emojiIndex != -1) {
|
||||
const emojiImgElement = createEmojiMarkup(emojiList[emojiIndex], true)
|
||||
HTML = HTML.replace(":" + typedEmoji + ":", emojiImgElement)
|
||||
}
|
||||
}
|
||||
return HTML;
|
||||
|
||||
}
|
||||
|
||||
@@ -8,9 +8,8 @@ export const URL_VIEWER_PING = `/api/ping`;
|
||||
|
||||
// TODO: This directory is customizable in the config. So we should expose this via the config API.
|
||||
export const URL_STREAM = `/hls/stream.m3u8`;
|
||||
export const URL_WEBSOCKET = `${
|
||||
location.protocol === 'https:' ? 'wss' : 'ws'
|
||||
}://${location.host}/entry`;
|
||||
export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`;
|
||||
export const URL_CHAT_REGISTRATION = `/api/chat/register`;
|
||||
|
||||
export const TIMER_STATUS_UPDATE = 5000; // ms
|
||||
export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
|
||||
@@ -26,6 +25,8 @@ export const MESSAGE_ONLINE = 'Stream is online.';
|
||||
export const URL_OWNCAST = 'https://owncast.online'; // used in footer
|
||||
export const PLAYER_VOLUME = 'owncast_volume';
|
||||
|
||||
export const KEY_ACCESS_TOKEN = 'owncast_access_token';
|
||||
export const KEY_EMBED_CHAT_ACCESS_TOKEN = 'owncast_embed_chat_access_token';
|
||||
export const KEY_USERNAME = 'owncast_username';
|
||||
export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set';
|
||||
export const KEY_CHAT_DISPLAYED = 'owncast_chat';
|
||||
@@ -35,6 +36,7 @@ export const CHAT_INITIAL_PLACEHOLDER_TEXT =
|
||||
export const CHAT_PLACEHOLDER_TEXT = 'Message';
|
||||
export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
|
||||
export const CHAT_MAX_MESSAGE_LENGTH = 500;
|
||||
export const EST_SOCKET_PAYLOAD_BUFFER = 512;
|
||||
export const CHAT_CHAR_COUNT_BUFFER = 20;
|
||||
export const CHAT_OK_KEYCODES = [
|
||||
'ArrowLeft',
|
||||
|
||||
@@ -92,10 +92,6 @@ export function getOrientation(forTouch = false) {
|
||||
}
|
||||
}
|
||||
|
||||
export function generateUsername() {
|
||||
return `User ${Math.floor(Math.random() * 42) + 1}`;
|
||||
}
|
||||
|
||||
export function padLeft(text, pad, size) {
|
||||
return String(pad.repeat(size) + text).slice(-size);
|
||||
}
|
||||
@@ -122,7 +118,6 @@ export function setVHvar() {
|
||||
var vh = window.innerHeight * 0.01;
|
||||
// Then we set the value in the --vh custom property to the root of the document
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||
console.log('== new vh', vh);
|
||||
}
|
||||
|
||||
export function doesObjectSupportFunction(object, functionName) {
|
||||
|
||||
@@ -1,31 +1,17 @@
|
||||
export function messageBubbleColorForString(str) {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
// eslint-disable-next-line
|
||||
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
export function messageBubbleColorForHue(hue) {
|
||||
// Tweak these to adjust the result of the color
|
||||
const saturation = 25;
|
||||
const lightness = 45;
|
||||
const saturation = 45;
|
||||
const lightness = 50;
|
||||
const alpha = 'var(--message-background-alpha)';
|
||||
const hue = parseInt(Math.abs(hash), 16) % 360;
|
||||
|
||||
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
|
||||
}
|
||||
|
||||
export function textColorForString(str) {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
// eslint-disable-next-line
|
||||
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
|
||||
export function textColorForHue(hue) {
|
||||
// Tweak these to adjust the result of the color
|
||||
const saturation = 80;
|
||||
const lightness = 80;
|
||||
const alpha = 0.8;
|
||||
const hue = parseInt(Math.abs(hash), 16) % 360;
|
||||
|
||||
return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
|
||||
}
|
||||
|
||||
@@ -11,23 +11,25 @@ export const SOCKET_MESSAGE_TYPES = {
|
||||
PONG: 'PONG',
|
||||
SYSTEM: 'SYSTEM',
|
||||
USER_JOINED: 'USER_JOINED',
|
||||
CHAT_ACTION: 'CHAT_ACTION'
|
||||
CHAT_ACTION: 'CHAT_ACTION',
|
||||
CONNECTED_USER_INFO: 'CONNECTED_USER_INFO',
|
||||
ERROR_USER_DISABLED: 'ERROR_USER_DISABLED',
|
||||
ERROR_NEEDS_REGISTRATION: 'ERROR_NEEDS_REGISTRATION',
|
||||
ERROR_MAX_CONNECTIONS_EXCEEDED: 'ERROR_MAX_CONNECTIONS_EXCEEDED',
|
||||
};
|
||||
|
||||
const IGNORE_CLIENT_FLAG = 'IGNORE_CLIENT';
|
||||
|
||||
export const CALLBACKS = {
|
||||
RAW_WEBSOCKET_MESSAGE_RECEIVED: 'rawWebsocketMessageReceived',
|
||||
WEBSOCKET_CONNECTED: 'websocketConnected',
|
||||
WEBSOCKET_DISCONNECTED: 'websocketDisconnected',
|
||||
}
|
||||
|
||||
const TIMER_WEBSOCKET_RECONNECT = 5000; // ms
|
||||
|
||||
export default class Websocket {
|
||||
constructor(ignoreClient) {
|
||||
constructor(accessToken) {
|
||||
this.websocket = null;
|
||||
this.websocketReconnectTimer = null;
|
||||
this.accessToken = accessToken;
|
||||
|
||||
this.websocketConnectedListeners = [];
|
||||
this.websocketDisconnectListeners = [];
|
||||
@@ -36,15 +38,18 @@ export default class Websocket {
|
||||
this.send = this.send.bind(this);
|
||||
this.createAndConnect = this.createAndConnect.bind(this);
|
||||
this.scheduleReconnect = this.scheduleReconnect.bind(this);
|
||||
this.shutdown = this.shutdown.bind(this);
|
||||
|
||||
this.ignoreClient = ignoreClient;
|
||||
this.isShutdown = false;
|
||||
|
||||
this.createAndConnect();
|
||||
}
|
||||
|
||||
createAndConnect() {
|
||||
const extraFlags = this.ignoreClient ? [IGNORE_CLIENT_FLAG] : [];
|
||||
const ws = new WebSocket(URL_WEBSOCKET, extraFlags);
|
||||
const url = new URL(URL_WEBSOCKET);
|
||||
url.searchParams.append('accessToken', this.accessToken);
|
||||
|
||||
const ws = new WebSocket(url.toString());
|
||||
ws.onopen = this.onOpen.bind(this);
|
||||
ws.onclose = this.onClose.bind(this);
|
||||
ws.onerror = this.onError.bind(this);
|
||||
@@ -79,6 +84,11 @@ export default class Websocket {
|
||||
this.websocket.send(messageJSON);
|
||||
}
|
||||
|
||||
shutdown() {
|
||||
this.isShutdown = true;
|
||||
this.websocket.close();
|
||||
}
|
||||
|
||||
// Private methods
|
||||
|
||||
// Fire the callbacks of the listeners.
|
||||
@@ -116,14 +126,18 @@ export default class Websocket {
|
||||
this.websocket = null;
|
||||
this.notifyWebsocketDisconnectedListeners();
|
||||
this.handleNetworkingError('Websocket closed.');
|
||||
this.scheduleReconnect();
|
||||
if (!this.isShutdown) {
|
||||
this.scheduleReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
// On ws error just close the socket and let it re-connect again for now.
|
||||
onError(e) {
|
||||
this.handleNetworkingError(`Socket error: ${JSON.parse(e)}`);
|
||||
this.websocket.close();
|
||||
this.scheduleReconnect();
|
||||
if (!this.isShutdown) {
|
||||
this.scheduleReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
scheduleReconnect() {
|
||||
@@ -142,9 +156,15 @@ export default class Websocket {
|
||||
try {
|
||||
var model = JSON.parse(e.data);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
// console.log(e, e.data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!model.type) {
|
||||
console.error("No type provided", model);
|
||||
return;
|
||||
}
|
||||
|
||||
// Send PONGs
|
||||
if (model.type === SOCKET_MESSAGE_TYPES.PING) {
|
||||
this.sendPong();
|
||||
|
||||
Reference in New Issue
Block a user