Admin social features (#408)

* ActivityPub admin pages for configuration * Fix dev build * Add support for requiring follow approval. Closes https://github.com/owncast/owncast/issues/1208 * Point at admin version of followers endpoint * Add setting for toggling displaying fediverse engagement in admin. https://github.com/owncast/owncast/issues/1404 * Add instance URL textfield to federation config and disable federation if it is empty * If instance URL is not https disable federation * Tweak federation toggle text. Make go live message optional * Add federation info modal. Closes https://github.com/owncast/owncast/issues/1544 * Add support for blocked federated domains. For https://github.com/owncast/owncast/issues/1209 * Simplify fediverse post input * Add placeholder Fediverse icon * Tweak federation logo in admin menu. Closes https://github.com/owncast/owncast/issues/1603 * Add global button for composing a fediverse post. Closes https://github.com/owncast/owncast/issues/1610 * Federation -> Social * Add page for listing federated actions. Closes https://github.com/owncast/owncast/issues/1573 * Auto-close social post modal after success * Make user modal action buttons look nicer * Center and reduce width and center count column. Closes https://github.com/owncast/owncast/issues/1580 * Update the followers table to be clearer * Fix exception thrown when passing undefined * Disable federation settings if feature is disabled * Update enable social modal. For https://github.com/owncast/owncast/issues/1594 * Fix type props * Quiet, linter * Move compose button to the left * Add tooltip for compose button * Add NSFW toggle to federation config. Closes https://github.com/owncast/owncast/issues/1628 * Add support for blocking/removing followers. For https://github.com/owncast/owncast/issues/1630 * Allow editing the server url field even when federation is disabled * Continue to update the copy around the social features * Use relative path to action images. Fixes https://github.com/owncast/owncast/issues/1646 * Link IRIs and make action verbse present tense * Update caniuse
2022-01-12 13:52:37 -08:00
parent 53d60f5127
commit 084a01fb02
18 changed files with 1068 additions and 42 deletions
--- a/web/components/client-table.tsx
+++ b/web/components/client-table.tsx
@@ -30,8 +30,10 @@ export default function ClientTable({ data }: ClientTableProps) {
      dataIndex: 'messageCount',
      key: 'messageCount',
      className: 'number-col',
+      width: '12%',
      sorter: (a: any, b: any) => a.messageCount - b.messageCount,
      sortDirections: ['descend', 'ascend'] as SortOrder[],
+      render: (count: number) => <div style={{ textAlign: 'center' }}>{count}</div>,
    },
    {
      title: 'Connected Time',
--- a/web/components/compose-federated-post.tsx
+++ b/web/components/compose-federated-post.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+
+import { Button, Space, Input, Modal } from 'antd';
+import { STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
+import { fetchData, FEDERATION_MESSAGE_SEND } from '../utils/apis';
+
+const { TextArea } = Input;
+
+interface ComposeFederatedPostProps {
+  visible: boolean;
+  handleClose: () => void;
+}
+
+export default function ComposeFederatedPost({ visible, handleClose }: ComposeFederatedPostProps) {
+  const [content, setContent] = useState('');
+  const [postPending, setPostPending] = useState(false);
+  const [postSuccessState, setPostSuccessState] = useState(null);
+
+  function handleEditorChange(e) {
+    setContent(e.target.value);
+  }
+
+  async function sendButtonClicked() {
+    setPostPending(true);
+
+    const data = {
+      value: content,
+    };
+    try {
+      await fetchData(FEDERATION_MESSAGE_SEND, {
+        data,
+        method: 'POST',
+        auth: true,
+      });
+      setPostSuccessState(STATUS_SUCCESS);
+      setTimeout(handleClose, 1000);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      setPostSuccessState(STATUS_ERROR);
+    }
+    setPostPending(false);
+  }
+
+  return (
+    <Modal
+      destroyOnClose
+      width={600}
+      title="Post to Followers"
+      visible={visible}
+      onCancel={handleClose}
+      footer={[
+        <Button onClick={() => handleClose()}>Cancel</Button>,
+        <Button
+          type="primary"
+          onClick={sendButtonClicked}
+          disabled={postPending || postSuccessState}
+          loading={postPending}
+        >
+          {postSuccessState?.toUpperCase() || 'Post'}
+        </Button>,
+      ]}
+    >
+      <Space id="fediverse-post-container" direction="vertical">
+        <TextArea
+          placeholder="Tell the world about your streaming plans..."
+          size="large"
+          showCount
+          maxLength={500}
+          style={{ height: '150px' }}
+          onChange={handleEditorChange}
+        />
+      </Space>
+    </Modal>
+  );
+}
--- a/web/components/config/edit-string-array.tsx
+++ b/web/components/config/edit-string-array.tsx
@@ -55,7 +55,7 @@ export default function EditValueArray(props: EditStringArrayProps) {
      <p className="description">{description}</p>

      <div className="edit-current-strings">
-        {values.map((tag, index) => {
+        {values?.map((tag, index) => {
          const handleClose = () => {
            handleDeleteIndex(index);
          };
--- a/web/components/main-layout.tsx
+++ b/web/components/main-layout.tsx
@@ -4,8 +4,7 @@ import Link from 'next/link';
 import Head from 'next/head';
 import { differenceInSeconds } from 'date-fns';
 import { useRouter } from 'next/router';
-import { Layout, Menu, Popover, Alert, Typography } from 'antd';
-
+import { Layout, Menu, Popover, Alert, Typography, Button, Space, Tooltip } from 'antd';
 import {
  SettingOutlined,
  HomeOutlined,
@@ -16,6 +15,7 @@ import {
  QuestionCircleOutlined,
  MessageOutlined,
  ExperimentOutlined,
+  EditOutlined,
 } from '@ant-design/icons';
 import classNames from 'classnames';
 import { upgradeVersionAvailable } from '../utils/apis';
@@ -27,7 +27,7 @@ import { AlertMessageContext } from '../utils/alert-message-context';

 import TextFieldWithSubmit from './config/form-textfield-with-submit';
 import { TEXTFIELD_PROPS_STREAM_TITLE } from '../utils/config-constants';
-
+import ComposeFederatedPost from './compose-federated-post';
 import { UpdateArgs } from '../types/config-section';

 // eslint-disable-next-line react/function-component-definition
@@ -36,9 +36,11 @@ export default function MainLayout(props) {

  const context = useContext(ServerStatusContext);
  const { serverConfig, online, broadcaster, versionNumber } = context || {};
-  const { instanceDetails, chatDisabled } = serverConfig;
+  const { instanceDetails, chatDisabled, federation } = serverConfig;
+  const { enabled: federationEnabled } = federation;

  const [currentStreamTitle, setCurrentStreamTitle] = useState('');
+  const [postModalDisplayed, setPostModalDisplayed] = useState(false);

  const alertMessage = useContext(AlertMessageContext);

@@ -70,6 +72,10 @@ export default function MainLayout(props) {
    setCurrentStreamTitle(value);
  };

+  const handleCreatePostButtonPressed = () => {
+    setPostModalDisplayed(true);
+  };
+
  const appClass = classNames({
    'app-container': true,
    online,
@@ -94,12 +100,7 @@ export default function MainLayout(props) {
    ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time)))
    : '';
  const currentThumbnail = online ? (
-    <img
-      src="/thumbnail.jpg"
-      className="online-thumbnail"
-      alt="current thumbnail"
-      style={{ width: '10rem' }}
-    />
+    <img src="/thumbnail.jpg" className="online-thumbnail" alt="current thumbnail" width="1rem" />
  ) : null;
  const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
  const statusMessage = online ? `Online ${streamDurationString}` : 'Offline';
@@ -162,6 +163,22 @@ export default function MainLayout(props) {
            </Menu.Item>
          </SubMenu>

+          <Menu.Item
+            style={{ display: federationEnabled ? 'block' : 'none' }}
+            key="federation-followers"
+            title="Fediverse followers"
+            icon={
+              <img
+                alt="fediverse icon"
+                src="/admin/fediverse-white.png"
+                width="15rem"
+                style={{ opacity: 0.6, position: 'relative', top: '-1px' }}
+              />
+            }
+          >
+            <Link href="/federation/followers">Followers</Link>
+          </Menu.Item>
+
          <SubMenu key="configuration" title="Configuration" icon={<SettingOutlined />}>
            <Menu.Item key="config-public-details">
              <Link href="/config-public-details">General</Link>
@@ -171,11 +188,15 @@ export default function MainLayout(props) {
              <Link href="/config-server-details">Server Setup</Link>
            </Menu.Item>
            <Menu.Item key="config-video">
-              <Link href="/config-video">Video Configuration</Link>
+              <Link href="/config-video">Video</Link>
            </Menu.Item>
            <Menu.Item key="config-chat">
              <Link href="/config-chat">Chat</Link>
            </Menu.Item>
+            <Menu.Item key="config-federation">
+              <Link href="/config-federation">Social</Link>
+            </Menu.Item>
+
            <Menu.Item key="config-storage">
              <Link href="/config-storage">S3 Storage</Link>
            </Menu.Item>
@@ -188,6 +209,9 @@ export default function MainLayout(props) {
            <Menu.Item key="logs">
              <Link href="/logs">Logs</Link>
            </Menu.Item>
+            <Menu.Item key="federation-activities" title="Social Actions">
+              <Link href="/federation/actions">Social Actions</Link>
+            </Menu.Item>
            <Menu.Item key="upgrade" style={{ display: upgradeMenuItemStyle }}>
              <Link href="/upgrade">{upgradeMessage}</Link>
            </Menu.Item>
@@ -211,6 +235,18 @@ export default function MainLayout(props) {

      <Layout className="layout-main">
        <Header className="layout-header">
+          <Space direction="horizontal">
+            <Tooltip title="Compose post to your followers">
+              <Button
+                type="primary"
+                shape="circle"
+                icon={<EditOutlined />}
+                size="large"
+                onClick={handleCreatePostButtonPressed}
+                style={{ display: federationEnabled ? 'block' : 'none' }}
+              />
+            </Tooltip>
+          </Space>
          <div className="global-stream-title-container">
            <TextFieldWithSubmit
              fieldName="streamTitle"
@@ -221,8 +257,7 @@ export default function MainLayout(props) {
              onChange={handleStreamTitleChanged}
            />
          </div>
-
-          {statusIndicatorWithThumb}
+          <Space direction="horizontal">{statusIndicatorWithThumb}</Space>
        </Header>

        {headerAlertMessage}
@@ -235,6 +270,11 @@ export default function MainLayout(props) {
          </a>
        </Footer>
      </Layout>
+
+      <ComposeFederatedPost
+        visible={postModalDisplayed}
+        handleClose={() => setPostModalDisplayed(false)}
+      />
    </Layout>
  );
 }
--- a/web/components/moderator-user-button.tsx
+++ b/web/components/moderator-user-button.tsx
@@ -1,5 +1,10 @@
 import { Modal, Button } from 'antd';
-import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
+import {
+  ExclamationCircleFilled,
+  QuestionCircleFilled,
+  StopTwoTone,
+  SafetyCertificateTwoTone,
+} from '@ant-design/icons';
 import { USER_SET_MODERATOR, fetchData } from '../utils/apis';
 import { User } from '../types/chat';

@@ -70,7 +75,13 @@ export default function ModeratorUserButton({ user, onClick }: ModeratorUserButt
    <Button
      onClick={confirmBlockAction}
      size="small"
-      icon={isModerator ? <StopTwoTone twoToneColor="#ff4d4f" /> : null}
+      icon={
+        isModerator ? (
+          <StopTwoTone twoToneColor="#ff4d4f" />
+        ) : (
+          <SafetyCertificateTwoTone twoToneColor="#22bb44" />
+        )
+      }
      className="block-user-button"
    >
      {actionString}
--- a/web/components/user-popover.tsx
+++ b/web/components/user-popover.tsx
@@ -1,7 +1,7 @@
 // This displays a clickable user name (or whatever children element you provide), and displays a simple tooltip of created time. OnClick a modal with more information about the user is displayed.

 import { useState, ReactNode } from 'react';
-import { Divider, Modal, Tooltip, Typography, Row, Col } from 'antd';
+import { Divider, Modal, Tooltip, Typography, Row, Col, Space } from 'antd';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import format from 'date-fns/format';
 import { uniq } from 'lodash';
@@ -117,27 +117,29 @@ export default function UserPopover({ user, connectionInfo, children }: UserPopo
            )}
          </Row>
          <Divider />
-          {disabledAt ? (
-            <>
-              This user was banned on <code>{formatDisplayDate(disabledAt)}</code>.
-              <br />
-              <br />
+          <Space direction="horizontal">
+            {disabledAt ? (
+              <>
+                This user was banned on <code>{formatDisplayDate(disabledAt)}</code>.
+                <br />
+                <br />
+                <BlockUserbutton
+                  label="Unban this user"
+                  user={user}
+                  isEnabled={false}
+                  onClick={handleCloseModal}
+                />
+              </>
+            ) : (
              <BlockUserbutton
-                label="Unban this user"
+                label="Ban this user"
                user={user}
-                isEnabled={false}
+                isEnabled
                onClick={handleCloseModal}
              />
-            </>
-          ) : (
-            <BlockUserbutton
-              label="Ban this user"
-              user={user}
-              isEnabled
-              onClick={handleCloseModal}
-            />
-          )}
-          <ModeratorUserbutton user={user} onClick={handleCloseModal} />
+            )}
+            <ModeratorUserbutton user={user} onClick={handleCloseModal} />
+          </Space>
        </div>
      </Modal>
    </>