LogalDeveloper/owncast
0
Fork 0
Code Activity

Admin social features (#408)

Browse Source 
* 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
2022-01-12 13:52:37 -08:00
committed by GitHub
parent 53d60f5127
commit 084a01fb02
18 changed files with 1068 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
web/pages/config-federation.tsx Normal file
View File

@@ -0,0 +1,323 @@
/* eslint-disable react/no-unescaped-entities */
import { Typography, Modal, Button, Row, Col } from 'antd';
import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
TEXTFIELD_TYPE_TEXT,
TEXTFIELD_TYPE_TEXTAREA,
TEXTFIELD_TYPE_URL,
} from '../components/config/form-textfield';
import TextFieldWithSubmit from '../components/config/form-textfield-with-submit';
import ToggleSwitch from '../components/config/form-toggleswitch';
import EditValueArray from '../components/config/edit-string-array';
import { UpdateArgs } from '../types/config-section';
import {
FIELD_PROPS_ENABLE_FEDERATION,
TEXTFIELD_PROPS_FEDERATION_LIVE_MESSAGE,
TEXTFIELD_PROPS_FEDERATION_DEFAULT_USER,
FIELD_PROPS_FEDERATION_IS_PRIVATE,
FIELD_PROPS_SHOW_FEDERATION_ENGAGEMENT,
TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL,
FIELD_PROPS_FEDERATION_BLOCKED_DOMAINS,
postConfigUpdateToAPI,
RESET_TIMEOUT,
API_FEDERATION_BLOCKED_DOMAINS,
FIELD_PROPS_FEDERATION_NSFW,
} from '../utils/config-constants';
import { ServerStatusContext } from '../utils/server-status-context';
import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../utils/input-statuses';
function FederationInfoModal({ cancelPressed, okPressed }) {
return (
<Modal
width="70%"
title="Enable Social Features"
visible
onCancel={cancelPressed}
footer={
<div>
<Button onClick={cancelPressed}>Do not enable</Button>
<Button type="primary" onClick={okPressed}>
Enable Social Features
</Button>
</div>
}
>
<Typography.Title level={3}>How do Owncast's social features work?</Typography.Title>
<Typography.Paragraph>
Owncast's social features are accomplished by having your server join The{' '}
<a href="https://en.wikipedia.org/wiki/Fediverse" rel="noopener noreferrer" target="_blank">
Fediverse
</a>
, a decentralized, open, collection of independent servers, like yours.
</Typography.Paragraph>
Please{' '}
<a href="https://owncast.online/docs/social" rel="noopener noreferrer" target="_blank">
read more
</a>{' '}
about these features, the details behind them, and how they work.
<Typography.Paragraph />
<Typography.Title level={3}>What do you need to know?</Typography.Title>
<ul>
<li>
These features are brand new. Given the variability of interfacing with the rest of the
world, bugs are possible. Please report anything that you think isn't working quite right.
</li>
<li>You must always host your Owncast server with SSL using a https url.</li>
<li>
You should not change your server name URL or social username once people begin following
you, as you will be seen as a completely different user on the Fediverse, and the old user
will disappear.
</li>
<li>
Turning on <i>Private mode</i> will allow you to manually approve each follower and limit
the visibility of your posts to followers only.
</li>
</ul>
<Typography.Title level={3}>Learn more about The Fediverse</Typography.Title>
<Typography.Paragraph>
If these concepts are new you should discover more about what this functionality has to
offer. Visit{' '}
<a href="https://owncast.online/docs/social" rel="noopener noreferrer" target="_blank">
our documentation
</a>{' '}
to be pointed at some resources that will help get you started on The Fediverse.
</Typography.Paragraph>
</Modal>
);
}
FederationInfoModal.propTypes = {
cancelPressed: PropTypes.func.isRequired,
okPressed: PropTypes.func.isRequired,
};
export default function ConfigFederation() {
const { Title } = Typography;
const [formDataValues, setFormDataValues] = useState(null);
const [isInfoModalOpen, setIsInfoModalOpen] = useState(false);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const [blockedDomainSaveState, setBlockedDomainSaveState] = useState(null);
const { federation, yp, instanceDetails } = serverConfig;
const { enabled, isPrivate, username, goLiveMessage, showEngagement, blockedDomains } =
federation;
const { instanceUrl } = yp;
const { nsfw } = instanceDetails;
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setFormDataValues({
...formDataValues,
[fieldName]: value,
});
};
const handleEnabledSwitchChange = (value: boolean) => {
if (!value) {
setFormDataValues({
...formDataValues,
enabled: false,
});
} else {
setIsInfoModalOpen(true);
}
};
// if instanceUrl is empty, we should also turn OFF the `enabled` field of directory.
const handleSubmitInstanceUrl = () => {
const hasInstanceUrl = formDataValues.instanceUrl !== '';
const isInstanceUrlSecure = formDataValues.instanceUrl.startsWith('https://');
if (!hasInstanceUrl || !isInstanceUrlSecure) {
postConfigUpdateToAPI({
apiPath: FIELD_PROPS_ENABLE_FEDERATION.apiPath,
data: { value: false },
});
setFormDataValues({
...formDataValues,
enabled: false,
});
}
};
function federationInfoModalCancelPressed() {
setIsInfoModalOpen(false);
setFormDataValues({
...formDataValues,
enabled: false,
});
}
function federationInfoModalOkPressed() {
setIsInfoModalOpen(false);
setFormDataValues({
...formDataValues,
enabled: true,
});
}
function resetBlockedDomainsSaveState() {
setBlockedDomainSaveState(null);
}
function saveBlockedDomains() {
try {
postConfigUpdateToAPI({
apiPath: API_FEDERATION_BLOCKED_DOMAINS,
data: { value: formDataValues.blockedDomains },
onSuccess: () => {
setFieldInConfigState({
fieldName: 'forbiddenUsernames',
value: formDataValues.forbiddenUsernames,
});
setBlockedDomainSaveState(STATUS_SUCCESS);
setTimeout(resetBlockedDomainsSaveState, RESET_TIMEOUT);
},
onError: (message: string) => {
setBlockedDomainSaveState(createInputStatus(STATUS_ERROR, message));
setTimeout(resetBlockedDomainsSaveState, RESET_TIMEOUT);
},
});
} catch (e) {
console.error(e);
setBlockedDomainSaveState(STATUS_ERROR);
}
}
function handleDeleteBlockedDomain(index: number) {
formDataValues.blockedDomains.splice(index, 1);
saveBlockedDomains();
}
function handleCreateBlockedDomain(domain: string) {
let newDomain;
try {
const u = new URL(domain);
newDomain = u.host;
} catch (_) {
newDomain = domain;
}
formDataValues.blockedDomains.push(newDomain);
handleFieldChange({
fieldName: 'blockedDomains',
value: formDataValues.blockedDomains,
});
saveBlockedDomains();
}
useEffect(() => {
setFormDataValues({
enabled,
isPrivate,
username,
goLiveMessage,
showEngagement,
blockedDomains,
nsfw,
instanceUrl: yp.instanceUrl,
});
}, [serverConfig, yp]);
if (!formDataValues) {
return null;
}
const hasInstanceUrl = instanceUrl !== '';
const isInstanceUrlSecure = instanceUrl.startsWith('https://');
return (
<div>
<Title>Configure Social Features</Title>
<p>
Owncast provides the ability for people to follow and engage with your instance. It's a
great way to promote alerting, sharing and engagement of your stream.
</p>
<p>
Once enabled you'll alert your followers when you go live as well as gain the ability to
compose custom posts to share any information you like.
</p>
<p>
<a href="https://owncast.online/docs/social" rel="noopener noreferrer" target="_blank">
Read more about the specifics of these social features.
</a>
</p>
<Row>
<Col span={15} className="form-module" style={{ marginRight: '15px' }}>
<ToggleSwitch
fieldName="enabled"
onChange={handleEnabledSwitchChange}
{...FIELD_PROPS_ENABLE_FEDERATION}
checked={formDataValues.enabled}
disabled={!hasInstanceUrl || !isInstanceUrlSecure}
/>
<TextFieldWithSubmit
fieldName="instanceUrl"
{...TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL}
value={formDataValues.instanceUrl}
initialValue={yp.instanceUrl}
type={TEXTFIELD_TYPE_URL}
onChange={handleFieldChange}
onSubmit={handleSubmitInstanceUrl}
/>
<ToggleSwitch
fieldName="isPrivate"
{...FIELD_PROPS_FEDERATION_IS_PRIVATE}
checked={formDataValues.isPrivate}
disabled={!enabled}
/>
<ToggleSwitch
fieldName="nsfw"
useSubmit
{...FIELD_PROPS_FEDERATION_NSFW}
checked={formDataValues.nsfw}
disabled={!hasInstanceUrl}
/>
<TextFieldWithSubmit
required
fieldName="username"
type={TEXTFIELD_TYPE_TEXT}
{...TEXTFIELD_PROPS_FEDERATION_DEFAULT_USER}
value={formDataValues.username}
initialValue={username}
onChange={handleFieldChange}
disabled={!enabled}
/>
<TextFieldWithSubmit
fieldName="goLiveMessage"
{...TEXTFIELD_PROPS_FEDERATION_LIVE_MESSAGE}
type={TEXTFIELD_TYPE_TEXTAREA}
value={formDataValues.goLiveMessage}
initialValue={goLiveMessage}
onChange={handleFieldChange}
disabled={!enabled}
/>
<ToggleSwitch
fieldName="showEngagement"
{...FIELD_PROPS_SHOW_FEDERATION_ENGAGEMENT}
checked={formDataValues.showEngagement}
disabled={!enabled}
/>
</Col>
<Col span={8} className="form-module">
<EditValueArray
title={FIELD_PROPS_FEDERATION_BLOCKED_DOMAINS.label}
placeholder={FIELD_PROPS_FEDERATION_BLOCKED_DOMAINS.placeholder}
description={FIELD_PROPS_FEDERATION_BLOCKED_DOMAINS.tip}
values={formDataValues.blockedDomains}
handleDeleteIndex={handleDeleteBlockedDomain}
handleCreateString={handleCreateBlockedDomain}
submitStatus={createInputStatus(blockedDomainSaveState)}
/>
</Col>
</Row>
{isInfoModalOpen && (
<FederationInfoModal
cancelPressed={federationInfoModalCancelPressed}
okPressed={federationInfoModalOkPressed}
/>
)}
</div>
);
}