Merge branch 'master' into master

web/pages/_app.tsx

@@ -4,6 +4,7 @@ import '../styles/globals.scss';
 
 // GW: I can't override ant design styles through components using NextJS's built-in CSS modules. So I'll just import styles here for now and figure out enabling SASS modules later.
 import '../styles/home.scss';
+import '../styles/chat.scss';
 
 import { AppProps } from 'next/app';
 import ServerStatusProvider from '../utils/server-status-context';

web/pages/chat.tsx

@@ -0,0 +1,231 @@
+import React, { useState, useEffect } from "react";
+import { Table, Typography, Tooltip, Button } from "antd";
+import { CheckCircleFilled, ExclamationCircleFilled, StopOutlined } from "@ant-design/icons";
+import classNames from 'classnames';
+import { ColumnsType } from 'antd/es/table';
+import format from 'date-fns/format'
+
+import { CHAT_HISTORY, fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
+import { MessageType } from '../types/chat';
+import { isEmptyObject } from "../utils/format";
+
+const { Title } = Typography;
+
+function createUserNameFilters(messages: MessageType[]) {
+  const filtered = messages.reduce((acc, curItem) => {
+    const curAuthor = curItem.author;
+    if (!acc.some(item => item.text === curAuthor)) {
+      acc.push({ text: curAuthor, value: curAuthor });
+    }
+    return acc;
+  }, []);
+
+  // sort by name
+  return filtered.sort((a, b) => {
+    const nameA = a.text.toUpperCase(); // ignore upper and lowercase
+    const nameB = b.text.toUpperCase(); // ignore upper and lowercase
+    if (nameA < nameB) {
+      return -1;
+    }
+    if (nameA > nameB) {
+      return 1;
+    }
+    // names must be equal
+    return 0;
+  });
+}
+export const OUTCOME_TIMEOUT = 3000;
+
+export default function Chat() {
+  const [messages, setMessages] = useState([]);
+  const [selectedRowKeys, setSelectedRows] = useState([]);
+  const [bulkProcessing, setBulkProcessing] = useState(false);
+  const [bulkOutcome, setBulkOutcome] = useState(null);
+  const [bulkAction, setBulkAction] = useState('');
+  let outcomeTimeout = null;
+
+  const getInfo = async () => {
+    try {
+      const result = await fetchData(CHAT_HISTORY, { auth: true });
+      if (isEmptyObject(result)) {
+        setMessages([]);
+      } else {
+        setMessages(result);
+      }
+    } catch (error) {
+      console.log("==== error", error);
+    }
+  };
+
+  useEffect(() => {
+    getInfo();
+    return () => {
+      clearTimeout(outcomeTimeout);
+    };
+  }, []);
+
+  const nameFilters = createUserNameFilters(messages);
+  
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (selectedKeys: string[]) => {
+      setSelectedRows(selectedKeys);
+    },
+  };
+
+
+  const resetBulkOutcome = () => {
+    outcomeTimeout = setTimeout(() => {
+      setBulkOutcome(null);
+      setBulkAction('');
+    }, OUTCOME_TIMEOUT);
+  };
+  const handleSubmitBulk = async (bulkVisibility) => {
+    setBulkProcessing(true);
+    const result = await fetchData(UPDATE_CHAT_MESSGAE_VIZ, {
+      auth: true,
+      method: 'POST',
+      data: {
+        visible: bulkVisibility,
+        idArray: selectedRowKeys,
+      },
+    });
+
+    if (result.success && result.message === "changed") {
+      setBulkOutcome(<CheckCircleFilled />);
+      resetBulkOutcome();
+
+      // update messages
+      const updatedList = [...messages];
+      selectedRowKeys.map(key => {
+        const messageIndex = updatedList.findIndex(m => m.id === key);
+        const newMessage = {...messages[messageIndex], visible: bulkVisibility };
+        updatedList.splice(messageIndex, 1, newMessage);
+        return null;
+      });
+      setMessages(updatedList);
+      setSelectedRows([]);
+    } else {
+      setBulkOutcome(<ExclamationCircleFilled />);
+      resetBulkOutcome();
+    }
+    setBulkProcessing(false);
+  }
+  const handleSubmitBulkShow = () => {
+    setBulkAction('show');
+    handleSubmitBulk(true);
+  }
+  const handleSubmitBulkHide = () => {
+    setBulkAction('hide');
+    handleSubmitBulk(false);
+  }
+
+  const chatColumns: ColumnsType<MessageType> = [
+    {
+      title: 'Time',
+      dataIndex: 'timestamp',
+      key: 'timestamp',
+      className: 'timestamp-col',
+      defaultSortOrder: 'descend',
+      render: (timestamp) => {
+        const dateObject = new Date(timestamp);
+        return format(dateObject, 'PP pp');
+      },
+      sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+      width: 90,
+    },
+    {
+      title: 'User',
+      dataIndex: 'author',
+      key: 'author',
+      className: 'name-col',
+      filters: nameFilters,
+      onFilter: (value, record) => record.author === value,
+      sorter: (a, b) => a.author.localeCompare(b.author),
+      sortDirections: ['ascend', 'descend'],  
+      ellipsis: true,
+      render: author => (
+        <Tooltip placement="topLeft" title={author}>
+          {author}
+        </Tooltip>
+      ),
+      width: 110,
+    },
+    {
+      title: 'Message',
+      dataIndex: 'body',
+      key: 'body',
+      className: 'message-col',
+      width: 320,
+      render: body => (
+        <div
+          className="message-contents"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: body }}
+        />
+      )
+    },
+    {
+      title: '',
+      dataIndex: 'visible',
+      key: 'visible',
+      className: 'toggle-col',
+      filters: [{ text: 'Visible messages', value: true }, { text: 'Hidden messages', value: false }],
+      onFilter: (value, record) => record.visible === value,
+      render: visible => visible ? null : <StopOutlined title="This message is hidden" />,
+      width: 30,
+    },
+  ];
+
+  const bulkDivClasses = classNames({
+    'bulk-editor': true,
+    active: selectedRowKeys.length,
+  });
+  
+  return (
+    <div className="chat-messages">
+      <Title level={2}>Chat Messages</Title>
+      <p>Manage the messages from viewers that show up on your stream.</p>
+      <div className={bulkDivClasses}>
+        <span className="label">Check multiple messages to change their visibility to: </span>
+
+        <Button
+          type="primary"
+          size="small"
+          shape="round"
+          className="button"
+          loading={bulkAction === 'show' && bulkProcessing}
+          icon={bulkAction === 'show' && bulkOutcome}
+          disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'show')}
+          onClick={handleSubmitBulkShow}
+        >
+          Show
+        </Button>
+        <Button
+          type="primary"
+          size="small"
+          shape="round"
+          className="button"
+          loading={bulkAction === 'hide' && bulkProcessing}
+          icon={bulkAction === 'hide' && bulkOutcome}
+          disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'hide')}
+          onClick={handleSubmitBulkHide}
+        >
+          Hide
+        </Button>
+      </div>
+      <Table
+        size="small"
+        className="messages-table"
+        pagination={{ pageSize: 100 }} 
+        scroll={{ y: 540 }}
+        rowClassName={record => !record.visible ? 'hidden' : ''}
+        dataSource={messages}
+        columns={chatColumns}
+        rowKey={(row) => row.id}
+        rowSelection={rowSelection}
+      />
+  </div>)
+}
+
+

web/pages/components/chart.tsx

@@ -1,7 +1,7 @@
 import { LineChart } from 'react-chartkick'
-import styles from '../../styles/styles.module.scss';
 import 'chart.js';
-import format from 'date-fns/format'
+import format from 'date-fns/format';
+import styles from '../../styles/styles.module.scss';
 
 interface TimedValue {
   time: Date;

web/pages/components/main-layout.tsx

@@ -13,7 +13,8 @@ import {
   ToolOutlined,
   PlayCircleFilled,
   MinusSquareFilled,
-  QuestionCircleOutlined
+  QuestionCircleOutlined,
+  MessageOutlined
 } from '@ant-design/icons';
 import classNames from 'classnames';
 import { upgradeVersionAvailable } from "../../utils/apis";
@@ -108,6 +109,14 @@ export default function MainLayout(props) {
             <Link href="/viewer-info">Viewers</Link>
           </Menu.Item>
 
+          <Menu.Item
+            key="chat"
+            icon={<MessageOutlined />}
+            title="Chat utilities"
+          >
+            <Link href="/chat">Chat</Link>
+          </Menu.Item>
+          
           <SubMenu
             key="configuration"
             title="Configuration"

web/pages/viewer-info.tsx

@@ -86,6 +86,8 @@ export default function ViewersOverTime() {
       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",