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
This commit is contained in:
Gabe Kangas
120
web/pages/federation/actions.tsx
Normal file
120
web/pages/federation/actions.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table, Typography } from 'antd';
|
||||
import { ColumnsType } from 'antd/lib/table/interface';
|
||||
import format from 'date-fns/format';
|
||||
import { FEDERATION_ACTIONS, fetchData } from '../../utils/apis';
|
||||
|
||||
import { isEmptyObject } from '../../utils/format';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
|
||||
export interface Action {
|
||||
iri: string;
|
||||
actorIRI: string;
|
||||
type: string;
|
||||
timestamp: Date;
|
||||
}
|
||||
|
||||
export default function FediverseActions() {
|
||||
const [actions, setActions] = useState<Action[]>([]);
|
||||
|
||||
const getActions = async () => {
|
||||
try {
|
||||
const result = await fetchData(FEDERATION_ACTIONS, { auth: true });
|
||||
if (isEmptyObject(result)) {
|
||||
setActions([]);
|
||||
} else {
|
||||
setActions(result);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('==== error', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getActions();
|
||||
}, []);
|
||||
|
||||
const columns: ColumnsType<Action> = [
|
||||
{
|
||||
title: 'Action',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 50,
|
||||
render: (_, record) => {
|
||||
let image;
|
||||
let title;
|
||||
switch (record.type) {
|
||||
case 'FEDIVERSE_ENGAGEMENT_REPOST':
|
||||
image = '/img/repost.svg';
|
||||
title = 'Share';
|
||||
break;
|
||||
case 'FEDIVERSE_ENGAGEMENT_LIKE':
|
||||
image = '/img/like.svg';
|
||||
title = 'Like';
|
||||
break;
|
||||
case 'FEDIVERSE_ENGAGEMENT_FOLLOW':
|
||||
image = '/img/follow.svg';
|
||||
title = 'Follow';
|
||||
break;
|
||||
default:
|
||||
image = '';
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<img src={image} width="70%" alt={title} title={title} />
|
||||
<div style={{ fontSize: '0.7rem' }}>{title}</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'From',
|
||||
dataIndex: 'actorIRI',
|
||||
key: 'from',
|
||||
render: (_, record) => <a href={record.actorIRI}>{record.actorIRI}</a>,
|
||||
},
|
||||
{
|
||||
title: 'When',
|
||||
dataIndex: 'timestamp',
|
||||
key: 'timestamp',
|
||||
render: (_, record) => {
|
||||
const dateObject = new Date(record.timestamp);
|
||||
return format(dateObject, 'P pp');
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
function makeTable(data: Action[], tableColumns: ColumnsType<Action>) {
|
||||
return (
|
||||
<Table
|
||||
dataSource={data}
|
||||
columns={tableColumns}
|
||||
size="small"
|
||||
rowKey={row => row.iri}
|
||||
pagination={{ pageSize: 50 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={3}>Fediverse Actions</Title>
|
||||
<Paragraph>
|
||||
Below is a list of actions that were taken by others in response to your posts as well as
|
||||
people who requested to follow you.
|
||||
</Paragraph>
|
||||
{makeTable(actions, columns)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
318
web/pages/federation/followers.tsx
Normal file
318
web/pages/federation/followers.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import { Table, Avatar, Button, Tabs } from 'antd';
|
||||
import { ColumnsType, SortOrder } from 'antd/lib/table/interface';
|
||||
import format from 'date-fns/format';
|
||||
import { UserAddOutlined, UserDeleteOutlined } from '@ant-design/icons';
|
||||
import { ServerStatusContext } from '../../utils/server-status-context';
|
||||
import {
|
||||
FOLLOWERS,
|
||||
FOLLOWERS_PENDING,
|
||||
SET_FOLLOWER_APPROVAL,
|
||||
FOLLOWERS_BLOCKED,
|
||||
fetchData,
|
||||
} from '../../utils/apis';
|
||||
import { isEmptyObject } from '../../utils/format';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
export interface Follower {
|
||||
link: string;
|
||||
username: string;
|
||||
image: string;
|
||||
name: string;
|
||||
timestamp: Date;
|
||||
approved: Date;
|
||||
}
|
||||
|
||||
export default function FediverseFollowers() {
|
||||
const [followersPending, setFollowersPending] = useState<Follower[]>([]);
|
||||
const [followersBlocked, setFollowersBlocked] = useState<Follower[]>([]);
|
||||
const [followers, setFollowers] = useState<Follower[]>([]);
|
||||
|
||||
const serverStatusData = useContext(ServerStatusContext);
|
||||
const { serverConfig } = serverStatusData || {};
|
||||
const { federation } = serverConfig;
|
||||
const { isPrivate } = federation;
|
||||
|
||||
const getFollowers = async () => {
|
||||
try {
|
||||
// Active followers
|
||||
const followersResult = await fetchData(FOLLOWERS, { auth: true });
|
||||
if (isEmptyObject(followersResult)) {
|
||||
setFollowers([]);
|
||||
} else {
|
||||
setFollowers(followersResult);
|
||||
}
|
||||
|
||||
// Pending follow requests
|
||||
const pendingFollowersResult = await fetchData(FOLLOWERS_PENDING, { auth: true });
|
||||
if (isEmptyObject(pendingFollowersResult)) {
|
||||
setFollowersPending([]);
|
||||
} else {
|
||||
setFollowersPending(pendingFollowersResult);
|
||||
}
|
||||
|
||||
// Blocked/rejected followers
|
||||
const blockedFollowersResult = await fetchData(FOLLOWERS_BLOCKED, { auth: true });
|
||||
if (isEmptyObject(followersBlocked)) {
|
||||
setFollowersBlocked([]);
|
||||
} else {
|
||||
setFollowersBlocked(blockedFollowersResult);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('==== error', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getFollowers();
|
||||
}, []);
|
||||
|
||||
const columns: ColumnsType<Follower> = [
|
||||
{
|
||||
title: '',
|
||||
dataIndex: 'image',
|
||||
key: 'image',
|
||||
width: 90,
|
||||
render: image => <Avatar size={40} src={image || '/img/logo.svg'} />,
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (_, follower) => (
|
||||
<a href={follower.link} target="_blank" rel="noreferrer">
|
||||
{follower.name || follower.username}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'URL',
|
||||
dataIndex: 'link',
|
||||
key: 'link',
|
||||
render: (_, follower) => (
|
||||
<a href={follower.link} target="_blank" rel="noreferrer">
|
||||
{follower.link}
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function makeTable(data: Follower[], tableColumns: ColumnsType<Follower>) {
|
||||
return (
|
||||
<Table
|
||||
dataSource={data}
|
||||
columns={tableColumns}
|
||||
size="small"
|
||||
rowKey={row => row.link}
|
||||
pagination={{ pageSize: 20 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
async function approveFollowRequest(request) {
|
||||
try {
|
||||
await fetchData(SET_FOLLOWER_APPROVAL, {
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
data: {
|
||||
actorIRI: request.link,
|
||||
approved: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Refetch and update the current data.
|
||||
getFollowers();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
async function rejectFollowRequest(request) {
|
||||
try {
|
||||
await fetchData(SET_FOLLOWER_APPROVAL, {
|
||||
auth: true,
|
||||
method: 'POST',
|
||||
data: {
|
||||
actorIRI: request.link,
|
||||
approved: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Refetch and update the current data.
|
||||
getFollowers();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
const pendingColumns: ColumnsType<Follower> = [...columns];
|
||||
pendingColumns.unshift(
|
||||
{
|
||||
title: 'Approve',
|
||||
dataIndex: null,
|
||||
key: null,
|
||||
render: request => (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<UserAddOutlined />}
|
||||
onClick={() => {
|
||||
approveFollowRequest(request);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: 'Reject',
|
||||
dataIndex: null,
|
||||
key: null,
|
||||
render: request => (
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
icon={<UserDeleteOutlined />}
|
||||
onClick={() => {
|
||||
rejectFollowRequest(request);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
width: 50,
|
||||
},
|
||||
);
|
||||
|
||||
pendingColumns.push({
|
||||
title: 'Requested',
|
||||
dataIndex: 'timestamp',
|
||||
key: 'requested',
|
||||
width: 200,
|
||||
render: timestamp => {
|
||||
const dateObject = new Date(timestamp);
|
||||
return <>{format(dateObject, 'P')}</>;
|
||||
},
|
||||
sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
|
||||
sortDirections: ['descend', 'ascend'] as SortOrder[],
|
||||
defaultSortOrder: 'descend' as SortOrder,
|
||||
});
|
||||
|
||||
const blockedColumns: ColumnsType<Follower> = [...columns];
|
||||
blockedColumns.unshift({
|
||||
title: 'Approve',
|
||||
dataIndex: null,
|
||||
key: null,
|
||||
render: request => (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<UserAddOutlined />}
|
||||
size="large"
|
||||
onClick={() => {
|
||||
approveFollowRequest(request);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
width: 50,
|
||||
});
|
||||
|
||||
blockedColumns.push(
|
||||
{
|
||||
title: 'Requested',
|
||||
dataIndex: 'timestamp',
|
||||
key: 'requested',
|
||||
width: 200,
|
||||
render: timestamp => {
|
||||
const dateObject = new Date(timestamp);
|
||||
return <>{format(dateObject, 'P')}</>;
|
||||
},
|
||||
sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
|
||||
sortDirections: ['descend', 'ascend'] as SortOrder[],
|
||||
defaultSortOrder: 'descend' as SortOrder,
|
||||
},
|
||||
{
|
||||
title: 'Rejected/Blocked',
|
||||
dataIndex: 'timestamp',
|
||||
key: 'disabled_at',
|
||||
width: 200,
|
||||
render: timestamp => {
|
||||
const dateObject = new Date(timestamp);
|
||||
return <>{format(dateObject, 'P')}</>;
|
||||
},
|
||||
sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
|
||||
sortDirections: ['descend', 'ascend'] as SortOrder[],
|
||||
defaultSortOrder: 'descend' as SortOrder,
|
||||
},
|
||||
);
|
||||
|
||||
const followersColumns: ColumnsType<Follower> = [...columns];
|
||||
|
||||
followersColumns.push(
|
||||
{
|
||||
title: 'Added',
|
||||
dataIndex: 'timestamp',
|
||||
key: 'timestamp',
|
||||
width: 200,
|
||||
render: timestamp => {
|
||||
const dateObject = new Date(timestamp);
|
||||
return <>{format(dateObject, 'P')}</>;
|
||||
},
|
||||
sorter: (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
|
||||
sortDirections: ['descend', 'ascend'] as SortOrder[],
|
||||
defaultSortOrder: 'descend' as SortOrder,
|
||||
},
|
||||
{
|
||||
title: 'Remove',
|
||||
dataIndex: null,
|
||||
key: null,
|
||||
render: request => (
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
icon={<UserDeleteOutlined />}
|
||||
onClick={() => {
|
||||
rejectFollowRequest(request);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
width: 50,
|
||||
},
|
||||
);
|
||||
|
||||
const pendingRequestsTab = isPrivate && (
|
||||
<TabPane
|
||||
tab={<span>Requests {followersPending.length > 0 && `(${followersPending.length})`}</span>}
|
||||
key="2"
|
||||
>
|
||||
<p>
|
||||
The following people are requesting to follow your Owncast server on the{' '}
|
||||
<a href="https://en.wikipedia.org/wiki/Fediverse" target="_blank" rel="noopener noreferrer">
|
||||
Fediverse
|
||||
</a>{' '}
|
||||
and be alerted to when you go live. Each must be approved.
|
||||
</p>
|
||||
{makeTable(followersPending, pendingColumns)}
|
||||
</TabPane>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="followers-section">
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane
|
||||
tab={<span>Followers {followers.length > 0 && `(${followers.length})`}</span>}
|
||||
key="1"
|
||||
>
|
||||
<p>The following accounts get notified when you go live or send a post.</p>
|
||||
{makeTable(followers, followersColumns)}{' '}
|
||||
</TabPane>
|
||||
{pendingRequestsTab}
|
||||
<TabPane
|
||||
tab={<span>Blocked {followersBlocked.length > 0 && `(${followersBlocked.length})`}</span>}
|
||||
key="3"
|
||||
>
|
||||
<p>
|
||||
The following people were either rejected or blocked by you. You can approve them as a
|
||||
follower.
|
||||
</p>
|
||||
<p>{makeTable(followersBlocked, blockedColumns)}</p>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user