Add support for disabling chat. Closes #472 (#799)

2024-11-22 04:40:37 +03:00 · 2021-03-14 11:46:27 -07:00 · 2021-03-14 11:46:27 -07:00 · bf33d08384
commit bf33d08384
parent 40264bec8c
8 changed files with 183 additions and 97 deletions
--- a/controllers/admin/config.go
+++ b/controllers/admin/config.go
@ -435,6 +435,23 @@ func SetSocialHandles(w http.ResponseWriter, r *http.Request) {
 	controllers.WriteSimpleResponse(w, true, "social handles updated")
 }

+// SetChatDisabled will disable chat functionality.
+func SetChatDisabled(w http.ResponseWriter, r *http.Request) {
+	if !requirePOST(w, r) {
+		return
+	}
+
+	configValue, success := getValueFromRequest(w, r)
+	if !success {
+		controllers.WriteSimpleResponse(w, false, "unable to update chat disabled")
+		return
+	}
+
+	data.SetChatDisabled(configValue.Value.(bool))
+
+	controllers.WriteSimpleResponse(w, true, "chat disabled status updated")
+}
+
 func requirePOST(w http.ResponseWriter, r *http.Request) bool {
 	if r.Method != controllers.POST {
 		controllers.WriteSimpleResponse(w, false, r.Method+" not supported")
--- a/controllers/admin/serverConfig.go
+++ b/controllers/admin/serverConfig.go
@ -43,6 +43,7 @@ func GetServerConfig(w http.ResponseWriter, r *http.Request) {
 		StreamKey:      data.GetStreamKey(),
 		WebServerPort:  config.WebServerPort,
 		RTMPServerPort: data.GetRTMPPortNumber(),
+		ChatDisabled:   data.GetChatDisabled(),
 		VideoSettings: videoSettings{
 			VideoQualityVariants: videoQualityVariants,
 			LatencyLevel:         data.GetStreamLatencyLevel().Level,
@ -71,6 +72,7 @@ type serverConfigAdminResponse struct {
 	VideoSettings   videoSettings     `json:"videoSettings"`
 	LatencyLevel    int               `json:"latencyLevel"`
 	YP              yp                `json:"yp"`
+	ChatDisabled    bool              `json:"chatDisabled"`
 }

 type videoSettings struct {
--- a/controllers/config.go
+++ b/controllers/config.go
@ -21,6 +21,7 @@ type webConfigResponse struct {
 	ExtraPageContent string                `json:"extraPageContent"`
 	StreamTitle      string                `json:"streamTitle,omitempty"` // What's going on with the current stream
 	SocialHandles    []models.SocialHandle `json:"socialHandles"`
+	ChatDisabled     bool                  `json:"chatDisabled"`
 }

 // GetWebConfig gets the status of the server.
@ -48,6 +49,7 @@ func GetWebConfig(w http.ResponseWriter, r *http.Request) {
 		ExtraPageContent: pageContent,
 		StreamTitle:      data.GetStreamTitle(),
 		SocialHandles:    socialHandles,
+		ChatDisabled:     data.GetChatDisabled(),
 	}

 	if err := json.NewEncoder(w).Encode(configuration); err != nil {
--- a/core/chat/server.go
+++ b/core/chat/server.go
@ -135,6 +135,10 @@ func (s *server) Listen() {
 		case c := <-s.delCh:
 			s.removeClient(c)
 		case msg := <-s.sendAllCh:
+			if data.GetChatDisabled() {
+				break
+			}
+
 			if !msg.Empty() {
 				// set defaults before sending msg to anywhere
 				msg.SetDefaults()
--- a/core/data/config.go
+++ b/core/data/config.go
@ -33,6 +33,7 @@ const s3StorageEnabledKey = "s3_storage_enabled"
 const s3StorageConfigKey = "s3_storage_config"
 const videoLatencyLevel = "video_latency_level"
 const videoStreamOutputVariantsKey = "video_stream_output_variants"
+const chatDisabledKey = "chat_disabled"

 // GetExtraPageBodyContent will return the user-supplied body content.
 func GetExtraPageBodyContent() string {
@ -408,6 +409,21 @@ func SetStreamOutputVariants(variants []models.StreamOutputVariant) error {
 	return _datastore.Save(configEntry)
 }

+// SetChatDisabled will disable chat if set to true.
+func SetChatDisabled(disabled bool) error {
+	return _datastore.SetBool(chatDisabledKey, disabled)
+}
+
+// GetChatDisabled will return if chat is disabled.
+func GetChatDisabled() bool {
+	disabled, err := _datastore.GetBool(chatDisabledKey)
+	if err == nil {
+		return disabled
+	}
+
+	return false
+}
+
 // VerifySettings will perform a sanity check for specific settings values.
 func VerifySettings() error {
 	if GetStreamKey() == "" {
--- a/router/router.go
+++ b/router/router.go
@ -109,6 +109,9 @@ func Start() error {
 	// Server summary
 	http.HandleFunc("/api/admin/config/serversummary", middleware.RequireAdminAuth(admin.SetServerSummary))

+	// Disable chat
+	http.HandleFunc("/api/admin/config/chat/disable", middleware.RequireAdminAuth(admin.SetChatDisabled))
+
 	// Return all webhooks
 	http.HandleFunc("/api/admin/webhooks", middleware.RequireAdminAuth(admin.GetWebhooks))

--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@ -8,7 +8,11 @@ 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 { parseSecondsToDurationString, hasTouchScreen, getOrientation } from './utils/helpers.js';
+import {
+  parseSecondsToDurationString,
+  hasTouchScreen,
+  getOrientation,
+} from './utils/helpers.js';

 import {
  addNewlines,
@ -50,6 +54,7 @@ export default class App extends Component {
      websocket: new Websocket(),
      displayChat: chatStorage === null ? true : chatStorage,
      chatInputEnabled: false, // chat input box state
+      chatDisabled: false,
      username: getLocalStorage(KEY_USERNAME) || generateUsername(),
      touchKeyboardActive: false,

@ -195,12 +200,7 @@ export default class App extends Component {
    if (!status) {
      return;
    }
-    const {
-      viewerCount,
-      online,
-      lastConnectTime,
-      streamTitle,
-    } = status;
+    const { viewerCount, online, lastConnectTime, streamTitle } = status;

    this.lastDisconnectTime = status.lastDisconnectTime;

@ -265,7 +265,9 @@ export default class App extends Component {
    }

    if (this.windowBlurred) {
-      document.title = ` 🔴 ${this.state.configData && this.state.configData.name}`;
+      document.title = ` 🔴 ${
+        this.state.configData && this.state.configData.name
+      }`;
    }
  }

@ -289,7 +291,9 @@ export default class App extends Component {
    });

    if (this.windowBlurred) {
-      document.title = ` 🟢 ${this.state.configData && this.state.configData.name}`;
+      document.title = ` 🟢 ${
+        this.state.configData && this.state.configData.name
+      }`;
    }
  }

@ -302,7 +306,6 @@ export default class App extends Component {
    this.setState({
      streamStatusMessage: `${MESSAGE_ONLINE} ${streamDurationString}`,
    });
-
  }

  handleUsernameChange(newName) {
@ -370,7 +373,7 @@ export default class App extends Component {

  handleSpaceBarPressed(e) {
    e.preventDefault();
-    if(this.state.isPlaying) {
+    if (this.state.isPlaying) {
      this.setState({
        isPlaying: false,
      });
@ -384,7 +387,11 @@ export default class App extends Component {
  }

  handleKeyPressed(e) {
-    if (e.code === 'Space' && e.target === document.body && this.state.streamOnline) {
+    if (
+      e.code === 'Space' &&
+      e.target === document.body &&
+      this.state.streamOnline
+    ) {
      this.handleSpaceBarPressed(e);
    }
  }
@ -408,7 +415,6 @@ export default class App extends Component {
      windowWidth,
    } = state;

-
    const {
      version: appVersion,
      logo = TEMP_IMAGE,
@ -417,45 +423,52 @@ export default class App extends Component {
      tags = [],
      name,
      extraPageContent,
+      chatDisabled,
    } = configData;

    const bgUserLogo = { backgroundImage: `url(${logo})` };

-    const tagList = (tags !== null && tags.length > 0)
-      ? tags.map(
-          (tag, index) => html`
-            <li
-              key="tag${index}"
-              class="tag rounded-sm text-gray-100 bg-gray-700 text-xs uppercase mr-3 mb-2 p-2 whitespace-no-wrap"
-            >
-              ${tag}
-            </li>
-          `
-        )
-      : null;
+    const tagList =
+      tags !== null && tags.length > 0
+        ? tags.map(
+            (tag, index) => html`
+              <li
+                key="tag${index}"
+                class="tag rounded-sm text-gray-100 bg-gray-700 text-xs uppercase mr-3 mb-2 p-2 whitespace-no-wrap"
+              >
+                ${tag}
+              </li>
+            `
+          )
+        : null;

-    const viewerCountMessage = streamOnline && viewerCount > 0 ? (
-      html`${viewerCount} ${pluralize('viewer', viewerCount)}`
-    ) : null;
+    const viewerCountMessage =
+      streamOnline && viewerCount > 0
+        ? html`${viewerCount} ${pluralize('viewer', viewerCount)}`
+        : null;

    const mainClass = playerActive ? 'online' : '';
-    const isPortrait = this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
+    const isPortrait =
+      this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
    const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
    const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;

+    const shouldDisplayChat = displayChat && !chatDisabled;
+    const usernameStyle = chatDisabled ? 'none' : 'flex';
+
    const extraAppClasses = classNames({
-      chat: displayChat,
-      'no-chat': !displayChat,
+      chat: shouldDisplayChat,
+      'no-chat': !shouldDisplayChat,
      'single-col': singleColMode,
-      'bg-gray-800': singleColMode && displayChat,
+      'bg-gray-800': singleColMode && shouldDisplayChat,
      'short-wide': shortHeight && windowWidth > WIDTH_SINGLE_COL,
      'touch-screen': this.hasTouchScreen,
      'touch-keyboard-active': touchKeyboardActive,
    });

-    const poster = isPlaying ? null : html`
-      <${VideoPoster} offlineImage=${logo} active=${streamOnline} />
-    `;
+    const poster = isPlaying
+      ? null
+      : html` <${VideoPoster} offlineImage=${logo} active=${streamOnline} /> `;

    return html`
      <div
@ -473,15 +486,20 @@ export default class App extends Component {
                id="logo-container"
                class="inline-block	rounded-full bg-white w-8 min-w-8 min-h-8 h-8 mr-2 bg-no-repeat bg-center"
              >
-                <img class="logo visually-hidden" src=${OWNCAST_LOGO_LOCAL} alt="owncast logo" />
+                <img
+                  class="logo visually-hidden"
+                  src=${OWNCAST_LOGO_LOCAL}
+                  alt="owncast logo"
+                />
              </span>
              <span class="instance-title overflow-hidden truncate"
-                >${(streamOnline && streamTitle) ? streamTitle : name}</span
+                >${streamOnline && streamTitle ? streamTitle : name}</span
              >
            </h1>
            <div
              id="user-options-container"
              class="flex flex-row justify-end items-center flex-no-wrap"
+              style=${{ display: usernameStyle }}
            >
              <${UsernameForm}
                username=${username}
@ -538,9 +556,7 @@ export default class App extends Component {
              class="user-content-header border-b border-gray-500 border-solid"
            >
              <h2 class="font-semibold text-5xl">
-                <span class="streamer-name text-indigo-600"
-                  >${name}</span
-                >
+                <span class="streamer-name text-indigo-600">${name}</span>
              </h2>
              <h3 class="font-semibold text-3xl">
                ${streamOnline && streamTitle}
@ -573,11 +589,10 @@ export default class App extends Component {
        <${Chat}
          websocket=${websocket}
          username=${username}
-          chatInputEnabled=${chatInputEnabled}
+          chatInputEnabled=${chatInputEnabled && !chatDisabled}
          instanceTitle=${name}
        />
      </div>
    `;
  }
 }
-
--- a/webroot/js/components/chat/chat-input.js
+++ b/webroot/js/components/chat/chat-input.js
@ -5,8 +5,17 @@ const html = htm.bind(h);
 import { EmojiButton } from '/js/web_modules/@joeattardi/emoji-button.js';

 import ContentEditable, { replaceCaret } from './content-editable.js';
-import { generatePlaceholderText, getCaretPosition, convertToText, convertOnPaste } from '../../utils/chat.js';
-import { getLocalStorage, setLocalStorage, classNames } from '../../utils/helpers.js';
+import {
+  generatePlaceholderText,
+  getCaretPosition,
+  convertToText,
+  convertOnPaste,
+} from '../../utils/chat.js';
+import {
+  getLocalStorage,
+  setLocalStorage,
+  classNames,
+} from '../../utils/helpers.js';
 import {
  URL_CUSTOM_EMOJIS,
  KEY_CHAT_FIRST_MESSAGE_SENT,
@ -46,7 +55,9 @@ export default class ChatInput extends Component {
    this.handleSubmitChatButton = this.handleSubmitChatButton.bind(this);
    this.handlePaste = this.handlePaste.bind(this);

-    this.handleContentEditableChange = this.handleContentEditableChange.bind(this);
+    this.handleContentEditableChange = this.handleContentEditableChange.bind(
+      this
+    );
  }

  componentDidMount() {
@ -55,13 +66,13 @@ export default class ChatInput extends Component {

  getCustomEmojis() {
    fetch(URL_CUSTOM_EMOJIS)
-      .then(response => {
+      .then((response) => {
        if (!response.ok) {
          throw new Error(`Network response was not ok ${response.ok}`);
        }
        return response.json();
      })
-      .then(json => {
+      .then((json) => {
        this.emojiPicker = new EmojiButton({
          zIndex: 100,
          theme: 'owncast', // see chat.css
@ -75,7 +86,7 @@ export default class ChatInput extends Component {
          position: 'right-start',
          strategy: 'absolute',
        });
-        this.emojiPicker.on('emoji', emoji => {
+        this.emojiPicker.on('emoji', (emoji) => {
          this.handleEmojiSelected(emoji);
        });
        this.emojiPicker.on('hidden', () => {
@ -83,7 +94,7 @@ export default class ChatInput extends Component {
          replaceCaret(this.formMessageInput.current);
        });
      })
-      .catch(error => {
+      .catch((error) => {
        // this.handleNetworkingError(`Emoji Fetch: ${error}`);
      });
  }
@ -98,9 +109,9 @@ export default class ChatInput extends Component {
    const { inputHTML } = this.state;
    let content = '';
    if (emoji.url) {
-      const url = location.protocol + "//" + location.host + "/" + 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 = '<img class="emoji" alt="' + name + '" src="' + url + '"/>';
    } else {
      content = emoji.emoji;
    }
@ -109,11 +120,11 @@ export default class ChatInput extends Component {
      inputHTML: inputHTML + content,
    });
    // a hacky way add focus back into input field
-    setTimeout( () => {
+    setTimeout(() => {
      const input = this.formMessageInput.current;
      input.focus();
      replaceCaret(input);
-     }, 100);
+    }, 100);
  }

  // autocomplete user names
@ -138,7 +149,10 @@ export default class ChatInput extends Component {
      return username.toLowerCase().startsWith(partial.toLowerCase());
    });

-    if (this.completionIndex === undefined || ++this.completionIndex >= possibilities.length) {
+    if (
+      this.completionIndex === undefined ||
+      ++this.completionIndex >= possibilities.length
+    ) {
      this.completionIndex = 0;
    }

@ -146,8 +160,12 @@ export default class ChatInput extends Component {
      this.suggestion = possibilities[this.completionIndex];

      this.setState({
-        inputHTML: inputHTML.substring(0, at + 1) + this.suggestion + ' ' + inputHTML.substring(position),
-      })
+        inputHTML:
+          inputHTML.substring(0, at + 1) +
+          this.suggestion +
+          ' ' +
+          inputHTML.substring(position),
+      });
    }

    return true;
@ -204,7 +222,7 @@ export default class ChatInput extends Component {
    const { key } = event;

    if (key === 'Control' || key === 'Shift') {
-     this.prepNewLine = false;
+      this.prepNewLine = false;
    }
    if (CHAT_KEY_MODIFIERS.includes(key)) {
      this.modifierKeyPressed = false;
@ -264,52 +282,61 @@ export default class ChatInput extends Component {

  render(props, state) {
    const { hasSentFirstChatMessage, inputCharsLeft, inputHTML } = state;
-    const { inputEnabled } = props;
+    const { inputEnabled, chatDisabled } = props;
    const emojiButtonStyle = {
      display: this.emojiPicker && inputCharsLeft > 0 ? 'block' : 'none',
    };
    const extraClasses = classNames({
      'display-count': inputCharsLeft <= CHAT_CHAR_COUNT_BUFFER,
    });
-    const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
-    return (
-      html`
-        <div id="message-input-container" class="relative shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4 z-20 ${extraClasses}">
+    const placeholderText = generatePlaceholderText(
+      inputEnabled,
+      hasSentFirstChatMessage
+    );
+    return html`
+      <div
+        id="message-input-container"
+        class="relative shadow-md bg-gray-900 border-t border-gray-700 border-solid p-4 z-20 ${extraClasses}"
+      >
+        <div
+          id="message-input-wrap"
+          class="flex flex-row justify-end appearance-none w-full bg-gray-200 border border-black-500 rounded py-2 px-2 pr-12 my-2 overflow-auto"
+        >
+          <${ContentEditable}
+            id="message-input"
+            class="appearance-none block w-full bg-transparent text-sm text-gray-700 h-full focus:outline-none"
+            placeholderText=${placeholderText}
+            innerRef=${this.formMessageInput}
+            html=${inputHTML}
+            disabled=${!inputEnabled}
+            onChange=${this.handleContentEditableChange}
+            onKeyDown=${this.handleMessageInputKeydown}
+            onKeyUp=${this.handleMessageInputKeyup}
+            onBlur=${this.handleMessageInputBlur}
+            onPaste=${this.handlePaste}
+          />
+        </div>
+        <div
+          id="message-form-actions"
+          class="absolute flex flex-col w-10 justify-end items-center"
+        >
+          <button
+            ref=${this.emojiPickerButton}
+            id="emoji-button"
+            class="text-3xl leading-3 cursor-pointer text-purple-600"
+            type="button"
+            style=${emojiButtonStyle}
+            onclick=${this.handleEmojiButtonClick}
+            disabled=${!inputEnabled}
+          >
+            <img src="../../../img/smiley.png" />
+          </button>

-          <div
-            id="message-input-wrap"
-            class="flex flex-row justify-end appearance-none w-full bg-gray-200 border border-black-500 rounded py-2 px-2 pr-12 my-2 overflow-auto">
-            <${ContentEditable}
-              id="message-input"
-              class="appearance-none block w-full bg-transparent text-sm text-gray-700 h-full focus:outline-none"
-
-              placeholderText=${placeholderText}
-              innerRef=${this.formMessageInput}
-              html=${inputHTML}
-              disabled=${!inputEnabled}
-              onChange=${this.handleContentEditableChange}
-              onKeyDown=${this.handleMessageInputKeydown}
-              onKeyUp=${this.handleMessageInputKeyup}
-              onBlur=${this.handleMessageInputBlur}
-
-              onPaste=${this.handlePaste}
-            />
-          </div>
-          <div id="message-form-actions" class="absolute flex flex-col w-10 justify-end items-center">
-              <button
-                ref=${this.emojiPickerButton}
-                id="emoji-button"
-                class="text-3xl leading-3 cursor-pointer text-purple-600"
-                type="button"
-                style=${emojiButtonStyle}
-                onclick=${this.handleEmojiButtonClick}
-                disabled=${!inputEnabled}
-              ><img src="../../../img/smiley.png" /></button>
-
-              <span id="message-form-warning" class="text-red-600 text-xs">${inputCharsLeft}/${CHAT_MAX_MESSAGE_LENGTH}</span>
-            </div>
+          <span id="message-form-warning" class="text-red-600 text-xs"
+            >${inputCharsLeft}/${CHAT_MAX_MESSAGE_LENGTH}</span
+          >
+        </div>
      </div>
-    `);
-  }
-
+    `;
  }
+}