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

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>
   );
 }