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
@@ -10,6 +10,9 @@ import {
|
||||
getCaretPosition,
|
||||
convertToText,
|
||||
convertOnPaste,
|
||||
createEmojiMarkup,
|
||||
trimNbsp,
|
||||
emojify,
|
||||
} from '../../utils/chat.js';
|
||||
import {
|
||||
getLocalStorage,
|
||||
@@ -19,7 +22,6 @@ import {
|
||||
import {
|
||||
URL_CUSTOM_EMOJIS,
|
||||
KEY_CHAT_FIRST_MESSAGE_SENT,
|
||||
CHAT_MAX_MESSAGE_LENGTH,
|
||||
CHAT_CHAR_COUNT_BUFFER,
|
||||
CHAT_OK_KEYCODES,
|
||||
CHAT_KEY_MODIFIERS,
|
||||
@@ -38,10 +40,10 @@ export default class ChatInput extends Component {
|
||||
|
||||
this.state = {
|
||||
inputHTML: '',
|
||||
inputText: '', // for counting
|
||||
inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH,
|
||||
inputCharsLeft: props.inputMaxBytes,
|
||||
hasSentFirstChatMessage: getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT),
|
||||
emojiPicker: null,
|
||||
emojiList: null,
|
||||
};
|
||||
|
||||
this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this);
|
||||
@@ -71,6 +73,7 @@ export default class ChatInput extends Component {
|
||||
return response.json();
|
||||
})
|
||||
.then((json) => {
|
||||
const emojiList = json;
|
||||
const emojiPicker = new EmojiButton({
|
||||
zIndex: 100,
|
||||
theme: 'owncast', // see chat.css
|
||||
@@ -91,7 +94,7 @@ export default class ChatInput extends Component {
|
||||
this.formMessageInput.current.focus();
|
||||
replaceCaret(this.formMessageInput.current);
|
||||
});
|
||||
this.setState({ emojiPicker });
|
||||
this.setState({ emojiList, emojiPicker });
|
||||
})
|
||||
.catch((error) => {
|
||||
// this.handleNetworkingError(`Emoji Fetch: ${error}`);
|
||||
@@ -106,18 +109,23 @@ export default class ChatInput extends Component {
|
||||
}
|
||||
|
||||
handleEmojiSelected(emoji) {
|
||||
const { inputHTML } = this.state;
|
||||
const { inputHTML, inputCharsLeft } = this.state;
|
||||
// if we're already at char limit, don't do anything
|
||||
if (inputCharsLeft < 0) {
|
||||
return;
|
||||
}
|
||||
let content = '';
|
||||
if (emoji.url) {
|
||||
const url = location.protocol + '//' + location.host + '/' + emoji.url;
|
||||
const name = url.split('\\').pop().split('/').pop();
|
||||
content = '<img class="emoji" alt="' + name + '" src="' + url + '"/>';
|
||||
content = createEmojiMarkup(emoji, false);
|
||||
} else {
|
||||
content = emoji.emoji;
|
||||
}
|
||||
|
||||
const newHTML = inputHTML + content;
|
||||
const charsLeft = this.calculateCurrentBytesLeft(newHTML);
|
||||
this.setState({
|
||||
inputHTML: inputHTML + content,
|
||||
inputCharsLeft: charsLeft,
|
||||
});
|
||||
// a hacky way add focus back into input field
|
||||
setTimeout(() => {
|
||||
@@ -159,23 +167,33 @@ export default class ChatInput extends Component {
|
||||
if (possibilities.length > 0) {
|
||||
this.suggestion = possibilities[this.completionIndex];
|
||||
|
||||
const newHTML = inputHTML.substring(0, at + 1) + this.suggestion + ' ' + inputHTML.substring(position);
|
||||
|
||||
this.setState({
|
||||
inputHTML:
|
||||
inputHTML.substring(0, at + 1) +
|
||||
this.suggestion +
|
||||
' ' +
|
||||
inputHTML.substring(position),
|
||||
inputHTML: newHTML,
|
||||
inputCharsLeft: this.calculateCurrentBytesLeft(newHTML),
|
||||
});
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// replace :emoji: with the emoji <img>
|
||||
injectEmoji() {
|
||||
const { inputHTML, emojiList } = this.state;
|
||||
const textValue = convertToText(inputHTML);
|
||||
const processedHTML = emojify(inputHTML, emojiList);
|
||||
|
||||
if (textValue != convertToText(processedHTML)) {
|
||||
this.setState({
|
||||
inputHTML: processedHTML,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
handleMessageInputKeydown(event) {
|
||||
const formField = this.formMessageInput.current;
|
||||
let textValue = formField.textContent; // get this only to count chars
|
||||
const newStates = {};
|
||||
let numCharsLeft = CHAT_MAX_MESSAGE_LENGTH - textValue.length;
|
||||
const key = event && event.key;
|
||||
|
||||
if (key === 'Enter') {
|
||||
@@ -196,37 +214,32 @@ export default class ChatInput extends Component {
|
||||
if (key === 'Tab') {
|
||||
if (this.autoCompleteNames()) {
|
||||
event.preventDefault();
|
||||
|
||||
// value could have been changed, update char count
|
||||
textValue = formField.textContent;
|
||||
numCharsLeft = CHAT_MAX_MESSAGE_LENGTH - textValue.length;
|
||||
}
|
||||
}
|
||||
|
||||
if (numCharsLeft <= 0 && !CHAT_OK_KEYCODES.includes(key)) {
|
||||
newStates.inputText = textValue;
|
||||
this.setState(newStates);
|
||||
// if new input pushes the potential chars over, don't do anything
|
||||
const formField = this.formMessageInput.current;
|
||||
const tempCharsLeft = this.calculateCurrentBytesLeft(formField.innerHTML);
|
||||
if (tempCharsLeft <= 0 && !CHAT_OK_KEYCODES.includes(key)) {
|
||||
if (!this.modifierKeyPressed) {
|
||||
event.preventDefault(); // prevent typing more
|
||||
}
|
||||
return;
|
||||
}
|
||||
newStates.inputText = textValue;
|
||||
this.setState(newStates);
|
||||
}
|
||||
|
||||
handleMessageInputKeyup(event) {
|
||||
const formField = this.formMessageInput.current;
|
||||
const textValue = formField.textContent; // get this only to count chars
|
||||
|
||||
const { key } = event;
|
||||
|
||||
if (key === 'Control' || key === 'Shift') {
|
||||
this.prepNewLine = false;
|
||||
}
|
||||
if (CHAT_KEY_MODIFIERS.includes(key)) {
|
||||
this.modifierKeyPressed = false;
|
||||
}
|
||||
|
||||
if (key === ':' || key === ';') {
|
||||
this.injectEmoji();
|
||||
}
|
||||
this.setState({
|
||||
inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH - textValue.length,
|
||||
});
|
||||
@@ -239,11 +252,11 @@ export default class ChatInput extends Component {
|
||||
|
||||
handlePaste(event) {
|
||||
// don't allow paste if too much text already
|
||||
if (CHAT_MAX_MESSAGE_LENGTH - this.state.inputText.length < 0) {
|
||||
if (this.state.inputCharsLeft < 0) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
convertOnPaste(event);
|
||||
convertOnPaste(event, this.state.emojiList);
|
||||
this.handleMessageInputKeydown(event);
|
||||
}
|
||||
|
||||
@@ -253,16 +266,15 @@ export default class ChatInput extends Component {
|
||||
}
|
||||
|
||||
sendMessage() {
|
||||
const { handleSendMessage } = this.props;
|
||||
const { hasSentFirstChatMessage, inputHTML, inputText } = this.state;
|
||||
if (CHAT_MAX_MESSAGE_LENGTH - inputText.length < 0) {
|
||||
const { handleSendMessage, inputMaxBytes } = this.props;
|
||||
const { hasSentFirstChatMessage, inputHTML, inputCharsLeft } = this.state;
|
||||
if (inputCharsLeft < 0) {
|
||||
return;
|
||||
}
|
||||
const message = convertToText(inputHTML);
|
||||
const newStates = {
|
||||
inputHTML: '',
|
||||
inputText: '',
|
||||
inputCharsLeft: CHAT_MAX_MESSAGE_LENGTH,
|
||||
inputCharsLeft: inputMaxBytes,
|
||||
};
|
||||
|
||||
handleSendMessage(message);
|
||||
@@ -277,13 +289,23 @@ export default class ChatInput extends Component {
|
||||
}
|
||||
|
||||
handleContentEditableChange(event) {
|
||||
this.setState({ inputHTML: event.target.value });
|
||||
const value = event.target.value;
|
||||
this.setState({
|
||||
inputHTML: value,
|
||||
inputCharsLeft: this.calculateCurrentBytesLeft(value),
|
||||
});
|
||||
}
|
||||
|
||||
calculateCurrentBytesLeft(inputContent) {
|
||||
const { inputMaxBytes } = this.props;
|
||||
const curBytes = new Blob([trimNbsp(inputContent)]).size;
|
||||
return inputMaxBytes - curBytes;
|
||||
}
|
||||
|
||||
render(props, state) {
|
||||
const { hasSentFirstChatMessage, inputCharsLeft, inputHTML, emojiPicker } =
|
||||
state;
|
||||
const { inputEnabled } = props;
|
||||
const { inputEnabled, inputMaxBytes } = props;
|
||||
const emojiButtonStyle = {
|
||||
display: emojiPicker && inputCharsLeft > 0 ? 'block' : 'none',
|
||||
};
|
||||
@@ -348,7 +370,7 @@ export default class ChatInput extends Component {
|
||||
</span>
|
||||
|
||||
<span id="message-form-warning" class="text-red-600 text-xs"
|
||||
>${inputCharsLeft}/${CHAT_MAX_MESSAGE_LENGTH}</span
|
||||
>${inputCharsLeft} bytes</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user