Start new chat config sections

web/pages/chat/messages.tsx

@@ -5,10 +5,10 @@ import classNames from 'classnames';
 import { ColumnsType } from 'antd/es/table';
 import format from 'date-fns/format';
 
-import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from '../utils/apis';
-import { MessageType } from '../types/chat';
-import { isEmptyObject } from '../utils/format';
-import MessageVisiblityToggle from '../components/message-visiblity-toggle';
+import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis';
+import { MessageType } from '../../types/chat';
+import { isEmptyObject } from '../../utils/format';
+import MessageVisiblityToggle from '../../components/message-visiblity-toggle';
 
 const { Title } = Typography;
 

web/pages/chat/users.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Table, Typography } from 'antd';
+import { formatDistanceToNow } from 'date-fns';
+import { SortOrder } from 'antd/lib/table/interface';
+
+import { ServerStatusContext } from '../../utils/server-status-context';
+
+import { CONNECTED_CLIENTS, VIEWERS_OVER_TIME, fetchData } from '../../utils/apis';
+
+const FETCH_INTERVAL = 60 * 1000; // 1 min
+
+export default function ChatUsers() {
+  const context = useContext(ServerStatusContext);
+  const { online } = context || {};
+
+  const [viewerInfo, setViewerInfo] = useState([]);
+  const [clients, setClients] = useState([]);
+
+  const getInfo = async () => {
+    try {
+      const result = await fetchData(VIEWERS_OVER_TIME);
+      setViewerInfo(result);
+    } catch (error) {
+      console.log('==== error', error);
+    }
+
+    try {
+      const result = await fetchData(CONNECTED_CLIENTS);
+      setClients(result);
+    } catch (error) {
+      console.log('==== error', error);
+    }
+  };
+
+  useEffect(() => {
+    let getStatusIntervalId = null;
+
+    getInfo();
+    if (online) {
+      getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
+      // returned function will be called on component unmount
+      return () => {
+        clearInterval(getStatusIntervalId);
+      };
+    }
+
+    return () => [];
+  }, [online]);
+
+  // todo - check to see if broadcast active has changed. if so, start polling.
+
+  if (!viewerInfo.length) {
+    return 'no info';
+  }
+
+  const columns = [
+    {
+      title: 'User name',
+      dataIndex: 'username',
+      key: 'username',
+      render: username => username || '-',
+      sorter: (a, b) => a.username - b.username,
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: 'Messages sent',
+      dataIndex: 'messageCount',
+      key: 'messageCount',
+      sorter: (a, b) => a.messageCount - b.messageCount,
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: 'Connected Time',
+      dataIndex: 'connectedAt',
+      key: 'connectedAt',
+      render: time => formatDistanceToNow(new Date(time)),
+      sorter: (a, b) => new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(),
+      sortDirections: ['descend', 'ascend'] as SortOrder[],
+    },
+    {
+      title: 'User Agent',
+      dataIndex: 'userAgent',
+      key: 'userAgent',
+    },
+    {
+      title: 'Location',
+      dataIndex: 'geo',
+      key: 'geo',
+      render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
+    },
+  ];
+
+  return (
+    <>
+      <div>
+        <Typography.Title>Connected</Typography.Title>
+        <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />
+        <p>
+          <Typography.Text type="secondary">
+            Visit the{' '}
+            <a
+              href="https://owncast.online/docs/viewers/?source=admin"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              documentation
+            </a>{' '}
+            to configure additional details about your viewers.
+          </Typography.Text>{' '}
+        </p>
+      </div>
+    </>
+  );
+}

web/pages/config-chat.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { Typography } from 'antd';
+import {
+  FIELD_PROPS_DISABLE_CHAT,
+  TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST,
+} from '../utils/config-constants';
+import { ServerStatusContext } from '../utils/server-status-context';
+import ToggleSwitch from '../components/config/form-toggleswitch';
+import { UpdateArgs } from '../types/config-section';
+import { TEXTFIELD_TYPE_TEXTAREA } from '../components/config/form-textfield';
+import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
+
+export default function ConfigChat() {
+  const { Title } = Typography;
+  const [formDataValues, setFormDataValues] = useState(null);
+  const serverStatusData = useContext(ServerStatusContext);
+
+  const { serverConfig } = serverStatusData || {};
+  const { chatDisabled } = serverConfig;
+  const { usernameBlocklist } = serverConfig;
+
+  function handleChatDisableChange(disabled: boolean) {
+    handleFieldChange({ fieldName: 'chatDisabled', value: disabled });
+  }
+
+  function handleChatUsernameBlockListChange(args: UpdateArgs) {
+    handleFieldChange({ fieldName: 'usernameBlocklist', value: args.value });
+  }
+
+  useEffect(() => {
+    setFormDataValues({
+      chatDisabled,
+      usernameBlocklist,
+    });
+  }, [serverConfig]);
+
+  if (!formDataValues) {
+    return null;
+  }
+
+  const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
+    setFormDataValues({
+      ...formDataValues,
+      [fieldName]: value,
+    });
+  };
+  
+  return (
+    <div className="config-server-details-form">
+      <Title>Chat Settings</Title>
+      <div className="form-module config-server-details-container">
+        <ToggleSwitch
+          fieldName="chatDisabled"
+          {...FIELD_PROPS_DISABLE_CHAT}
+          checked={formDataValues.chatDisabled}
+          onChange={handleChatDisableChange}
+        />
+        <TextFieldWithSubmit
+          fieldName="usernameBlocklist"
+          {...TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST}
+          type={TEXTFIELD_TYPE_TEXTAREA}
+          value={formDataValues.usernameBlocklist}
+          initialValue={usernameBlocklist}
+          onChange={handleChatUsernameBlockListChange}
+        />
+      </div>
+    </div>
+  );
+}