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>
2021-07-19 19:22:29 -07:00
parent e3dc736cf4
commit b6f68628c0
88 changed files with 10691 additions and 2281 deletions
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -7,7 +7,9 @@ import SocialIconsList from './components/platform-logos-list.js';
 import UsernameForm from './components/chat/username.js';
 import VideoPoster from './components/video-poster.js';
 import Chat from './components/chat/chat.js';
-import Websocket from './utils/websocket.js';
+import Websocket, { CALLBACKS, SOCKET_MESSAGE_TYPES } from './utils/websocket.js';
+import { registerChat } from './chat/register.js';
+
 import ExternalActionModal, {
  ExternalActionButton,
 } from './components/external-action-modal.js';
@@ -17,7 +19,6 @@ import {
  classNames,
  clearLocalStorage,
  debounce,
-  generateUsername,
  getLocalStorage,
  getOrientation,
  hasTouchScreen,
@@ -27,7 +28,10 @@ import {
  setLocalStorage,
 } from './utils/helpers.js';
 import {
+  CHAT_MAX_MESSAGE_LENGTH,
+  EST_SOCKET_PAYLOAD_BUFFER,
  HEIGHT_SHORT_WIDE,
+  KEY_ACCESS_TOKEN,
  KEY_CHAT_DISPLAYED,
  KEY_USERNAME,
  MESSAGE_OFFLINE,
@@ -54,10 +58,13 @@ export default class App extends Component {
    this.windowBlurred = false;

    this.state = {
-      websocket: new Websocket(),
-      displayChat: chatStorage === null ? true : chatStorage,
+      websocket: null,
+      canChat: false, // all of chat functionality (panel + username)
+      displayChatPanel: chatStorage === null ? true : (chatStorage === 'true'), // just the chat panel
      chatInputEnabled: false, // chat input box state
-      username: getLocalStorage(KEY_USERNAME) || generateUsername(),
+      accessToken: null,
+      username: getLocalStorage(KEY_USERNAME),
+      isRegistering: false,
      touchKeyboardActive: false,

      configData: {
@@ -86,7 +93,7 @@ export default class App extends Component {
    this.playerRestartTimer = null;
    this.offlineTimer = null;
    this.statusTimer = null;
-    this.disableChatTimer = null;
+    this.disableChatInputTimer = null;
    this.streamDurationTimer = null;

    // misc dom events
@@ -116,6 +123,14 @@ export default class App extends Component {
    // fetch events
    this.getConfig = this.getConfig.bind(this);
    this.getStreamStatus = this.getStreamStatus.bind(this);
+
+    // user events
+    this.handleWebsocketMessage = this.handleWebsocketMessage.bind(this);
+
+    // chat
+    this.hasConfiguredChat = false;
+    this.setupChatAuth = this.setupChatAuth.bind(this);
+    this.disableChat = this.disableChat.bind(this);
  }

  componentDidMount() {
@@ -144,7 +159,7 @@ export default class App extends Component {
    clearInterval(this.playerRestartTimer);
    clearInterval(this.offlineTimer);
    clearInterval(this.statusTimer);
-    clearTimeout(this.disableChatTimer);
+    clearTimeout(this.disableChatInputTimer);
    clearInterval(this.streamDurationTimer);
    window.removeEventListener('resize', this.handleWindowResize);
    window.removeEventListener('blur', this.handleWindowBlur);
@@ -197,10 +212,20 @@ export default class App extends Component {
  }

  setConfigData(data = {}) {
-    const { name, summary } = data;
+    const { name, summary, chatDisabled } = data;
    window.document.title = name;

+    // If this is the first time setting the config
+    // then setup chat if it's enabled.
+    const chatBlocked = getLocalStorage('owncast_chat_blocked');
+    if (!chatBlocked && !this.hasConfiguredChat && !chatDisabled) {
+      this.setupChatAuth();
+    }
+
+    this.hasConfiguredChat = true;
+
    this.setState({
+      canChat: !chatBlocked,
      configData: {
        ...data,
        summary: summary && addNewlines(summary),
@@ -274,7 +299,7 @@ export default class App extends Component {
      TIMER_DISABLE_CHAT_AFTER_OFFLINE -
      (Date.now() - new Date(this.state.lastDisconnectTime));
    const countdown = remainingChatTime < 0 ? 0 : remainingChatTime;
-    this.disableChatTimer = setTimeout(this.disableChatInput, countdown);
+    this.disableChatInputTimer = setTimeout(this.disableChatInput, countdown);
    this.setState({
      streamOnline: false,
      streamStatusMessage: MESSAGE_OFFLINE,
@@ -294,8 +319,8 @@ export default class App extends Component {
  // play video!
  handleOnlineMode() {
    this.player.startPlayer();
-    clearTimeout(this.disableChatTimer);
-    this.disableChatTimer = null;
+    clearTimeout(this.disableChatInputTimer);
+    this.disableChatInputTimer = null;

    this.streamDurationTimer = setInterval(
      this.setCurrentStreamDuration,
@@ -332,6 +357,8 @@ export default class App extends Component {
    this.setState({
      username: newName,
    });
+
+    this.sendUsernameChange(newName);
  }

  handleFormFocus() {
@@ -351,16 +378,12 @@ export default class App extends Component {
  }

  handleChatPanelToggle() {
-    const { displayChat: curDisplayed } = this.state;
+    const { displayChatPanel: curDisplayed } = this.state;

    const displayChat = !curDisplayed;
-    if (displayChat) {
-      setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
-    } else {
-      clearLocalStorage(KEY_CHAT_DISPLAYED);
-    }
+    setLocalStorage(KEY_CHAT_DISPLAYED, displayChat);
    this.setState({
-      displayChat,
+      displayChatPanel: displayChat,
    });
  }

@@ -371,7 +394,7 @@ export default class App extends Component {
  }

  handleNetworkingError(error) {
-    console.log(`>>> App Error: ${error}`);
+    console.error(`>>> App Error: ${error}`);
  }

  handleWindowResize() {
@@ -492,11 +515,95 @@ export default class App extends Component {
    });
  }

+  handleWebsocketMessage(e) {
+    if (e.type === SOCKET_MESSAGE_TYPES.ERROR_USER_DISABLED) {
+      // User has been actively disabled on the backend. Turn off chat for them.
+      this.handleBlockedChat();
+    } else if (e.type === SOCKET_MESSAGE_TYPES.ERROR_NEEDS_REGISTRATION && !this.isRegistering) {
+      // User needs an access token, so start the user auth flow.
+      this.state.websocket.shutdown();
+      this.setState({websocket: null});
+      this.setupChatAuth(true);
+    } else if (e.type === SOCKET_MESSAGE_TYPES.ERROR_MAX_CONNECTIONS_EXCEEDED) {
+      // Chat server cannot support any more chat clients. Turn off chat for them.
+      this.disableChat();
+    } else if (e.type === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) {
+      // When connected the user will return an event letting us know what our
+      // user details are so we can display them properly.
+      const {user} = e;
+      const {displayName} = user;
+
+      this.setState({username: displayName});
+    }
+  }
+
+  handleBlockedChat() {
+    setLocalStorage('owncast_chat_blocked', true);
+    this.disableChat();
+  }
+
+  disableChat() {
+    this.state.websocket.shutdown();
+    this.setState({ websocket: null, canChat: false });
+  }
+
+  async setupChatAuth(force) {
+    var accessToken = getLocalStorage(KEY_ACCESS_TOKEN);
+    var username = getLocalStorage(KEY_USERNAME);
+
+    if (!accessToken || force) {
+      try {
+        this.isRegistering = true;
+        const registration = await registerChat(this.state.username);
+        accessToken = registration.accessToken;
+        username = registration.displayName;
+
+        setLocalStorage(KEY_ACCESS_TOKEN, accessToken);
+        setLocalStorage(KEY_USERNAME, username);
+
+        this.isRegistering = false;
+      } catch (e) {
+        console.error('registration error:', e);
+      }
+    }
+
+    if (this.state.websocket) {
+      this.state.websocket.shutdown();
+      this.setState({
+        websocket: null
+      });
+    }
+
+    // Without a valid access token he websocket connection will be rejected.
+    const websocket = new Websocket(accessToken);
+    websocket.addListener(
+      CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED,
+      this.handleWebsocketMessage
+    );
+
+    this.setState({
+      username,
+      websocket,
+      accessToken,
+    });
+  }
+
+  sendUsernameChange(newName) {
+		const nameChange = {
+			type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
+			newName,
+		};
+		this.state.websocket.send(nameChange);
+  }
+
+
  render(props, state) {
    const {
      chatInputEnabled,
      configData,
-      displayChat,
+      displayChatPanel,
+      canChat,
+
      isPlaying,
      orientation,
      playerActive,
@@ -512,7 +619,6 @@ export default class App extends Component {
      externalAction,
      lastDisconnectTime,
    } = state;
-
    const {
      version: appVersion,
      logo = TEMP_IMAGE,
@@ -524,6 +630,7 @@ export default class App extends Component {
      chatDisabled,
      externalActions,
      customStyles,
+      maxSocketPayloadSize,
    } = configData;

    const bgUserLogo = { backgroundImage: `url(${logo})` };
@@ -544,13 +651,13 @@ export default class App extends Component {
    const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
    const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;

-    const shouldDisplayChat = displayChat && !chatDisabled;
-    const usernameStyle = chatDisabled ? 'none' : 'flex';
+    const shouldDisplayChat = displayChatPanel && canChat && !chatDisabled;

    const extraAppClasses = classNames({
      'config-loading': configData.loading,
      chat: shouldDisplayChat,
-      'no-chat': !shouldDisplayChat,
+      'chat-hidden': !displayChatPanel && canChat && !chatDisabled, // hide panel
+      'chat-disabled': !canChat || chatDisabled,
      'single-col': singleColMode,
      'bg-gray-800': singleColMode && shouldDisplayChat,
      'short-wide': shortHeight && windowWidth > WIDTH_SINGLE_COL,
@@ -587,6 +694,19 @@ export default class App extends Component {
        onClose=${this.closeExternalActionModal}
      />`;

+    const chat = this.state.websocket
+      ? html`
+          <${Chat}
+            websocket=${websocket}
+            username=${username}
+            chatInputEnabled=${chatInputEnabled && !chatDisabled}
+            instanceTitle=${name}
+            accessToken=${this.state.accessToken}
+            inputMaxBytes=${(maxSocketPayloadSize - EST_SOCKET_PAYLOAD_BUFFER) || CHAT_MAX_MESSAGE_LENGTH}
+          />
+        `
+      : null;
+
    return html`
      <div
        id="app-container"
@@ -620,7 +740,6 @@ export default class App extends Component {
            <div
              id="user-options-container"
              class="flex flex-row justify-end items-center flex-no-wrap"
-              style=${{ display: usernameStyle }}
            >
              <${UsernameForm}
                username=${username}
@@ -633,6 +752,7 @@ export default class App extends Component {
                id="chat-toggle"
                onClick=${this.handleChatPanelToggle}
                class="flex cursor-pointer text-center justify-center items-center min-w-12 h-full bg-gray-800 hover:bg-gray-700"
+                style=${{ display: chatDisabled ? 'none' : 'block' }}
              >
                💬
              </button>
@@ -712,13 +832,7 @@ export default class App extends Component {
          </span>
        </footer>

-        <${Chat}
-          websocket=${websocket}
-          username=${username}
-          chatInputEnabled=${chatInputEnabled && !chatDisabled}
-          instanceTitle=${name}
-        />
-        ${externalActionModal}
+        ${chat} ${externalActionModal}
      </div>
    `;
  }