mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-26 06:46:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'prettifying' into gw/20201226-admin-formfields

Browse source
This commit is contained in:
gingervitis 2021-01-31 01:38:56 -08:00
commit 9812f4c874
24 changed files with 727 additions and 637 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
web/.eslintrc.js
View file

@ -4,25 +4,26 @@ module.exports = {
es2021: true,
},
extends: [
"plugin:react/recommended",
"airbnb",
"prettier",
"prettier/@typescript-eslint",
"prettier/react",
'plugin:react/recommended',
'airbnb',
'prettier',
'prettier/@typescript-eslint',
'prettier/react',
],
parser: "@typescript-eslint/parser",
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: "module",
sourceType: 'module',
},
plugins: ["react", "@typescript-eslint"],
plugins: ['react', 'prettier', '@typescript-eslint'],
rules: {
"react/react-in-jsx-scope": "off",
"react/jsx-filename-extension": [1, { extensions: [".js", ".jsx", ".tsx"] }],
"react/jsx-props-no-spreading": "off",
'prettier/prettier': 'error',
'react/react-in-jsx-scope': 'off',
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.tsx'] }],
'react/jsx-props-no-spreading': 'off',
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'error',
@ -30,22 +31,22 @@ module.exports = {
'no-use-before-define': [0],
'@typescript-eslint/no-use-before-define': [1],
"import/extensions": [
"error",
"ignorePackages",
'import/extensions': [
'error',
'ignorePackages',
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
},
settings: {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
};

7
web/.prettierrc
View file

@ -1,4 +1,9 @@
{
"useTabs": false,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false
"singleQuote": true,
"trailingComma": "all",
"jsxBracketSameLine": false,
"arrowParens": "avoid"
}

4
web/pages/_app.tsx
View file

@ -11,7 +11,6 @@ import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context';
import MainLayout from './components/main-layout';
function App({ Component, pageProps }: AppProps) {
return (
<ServerStatusProvider>
@ -19,8 +18,7 @@ function App({ Component, pageProps }: AppProps) {
<Component {...pageProps} />
</MainLayout>
</ServerStatusProvider>
)
);
}
export default App;

22
web/pages/components/config/constants.tsx
View file

@ -39,14 +39,8 @@ export const API_VIDEO_VARIANTS = '/video/streamoutputvariants';
export const API_WEB_PORT = '/webserverport';
export const API_YP_SWITCH = '/directoryenabled';
export async function postConfigUpdateToAPI(args: ApiPostArgs) {
const {
apiPath,
data,
onSuccess,
onError,
} = args;
const { apiPath, data, onSuccess, onError } = args;
const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, {
data,
method: 'POST',
@ -59,7 +53,6 @@ export async function postConfigUpdateToAPI(args: ApiPostArgs) {
}
}
// Some default props to help build out a TextField
export const TEXTFIELD_PROPS_USERNAME = {
apiPath: API_USERNAME,
@ -95,7 +88,8 @@ export const TEXTFIELD_PROPS_LOGO = {
maxLength: 255,
placeholder: '/img/mylogo.png',
label: 'Logo',
tip: 'Path to your logo from website root. We recommend that you use a square image that is at least 256x256. (upload functionality coming soon)',
tip:
'Path to your logo from website root. We recommend that you use a square image that is at least 256x256. (upload functionality coming soon)',
};
export const TEXTFIELD_PROPS_STREAM_KEY = {
apiPath: API_STREAM_KEY,
@ -163,17 +157,19 @@ export const FIELD_PROPS_NSFW = {
apiPath: API_NSFW_SWITCH,
configPath: 'instanceDetails',
label: 'NSFW?',
tip: "Turn this ON if you plan to steam explicit or adult content. You may want to respectfully set this flag so that unexpecting eyes won't accidentally see it from the Directory.",
tip:
"Turn this ON if you plan to steam explicit or adult content. You may want to respectfully set this flag so that unexpecting eyes won't accidentally see it from the Directory.",
};
export const FIELD_PROPS_YP = {
apiPath: API_YP_SWITCH,
configPath: 'yp',
label: 'Display in the Owncast Directory?',
tip: 'Turn this ON if you want to show up in the Owncast directory at https://directory.owncast.online.',
tip:
'Turn this ON if you want to show up in the Owncast directory at https://directory.owncast.online.',
};
export const DEFAULT_VARIANT_STATE:VideoVariant = {
export const DEFAULT_VARIANT_STATE: VideoVariant = {
framerate: 24,
videoPassthrough: false,
videoBitrate: 800,
@ -182,7 +178,7 @@ export const DEFAULT_VARIANT_STATE:VideoVariant = {
cpuUsageLevel: 3,
};
export const DEFAULT_SOCIAL_HANDLE:SocialHandle = {
export const DEFAULT_SOCIAL_HANDLE: SocialHandle = {
url: '',
platform: '',
};

12
web/pages/components/config/cpu-usage.tsx
View file

@ -1,5 +1,5 @@
import React, { useContext, useState, useEffect } from 'react';
import { Typography, Slider, } from 'antd';
import { Typography, Slider } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context';
const { Title } = Typography;
@ -12,8 +12,7 @@ const SLIDER_MARKS = {
5: 'highest',
};
export default function CPUUsageSelector({defaultValue, onChange}) {
export default function CPUUsageSelector({ defaultValue, onChange }) {
const [selectedOption, setSelectedOption] = useState(null);
const serverStatusData = useContext(ServerStatusContext);
@ -36,10 +35,9 @@ export default function CPUUsageSelector({defaultValue, onChange}) {
return (
<div className="module-container config-video-segements-conatiner">
<Title level={3}>CPU Usage</Title>
<p>
There are trade-offs when considering CPU usage blah blah more wording here.
</p>
<br /><br />
<p>There are trade-offs when considering CPU usage blah blah more wording here.</p>
<br />
<br />
<div className="segment-slider">
<Slider
onChange={handleChange}

18
web/pages/components/config/edit-directory.tsx
View file

@ -19,7 +19,6 @@ export default function EditYPDetails() {
const { nsfw } = instanceDetails;
const { enabled, instanceUrl } = yp;
useEffect(() => {
setFormDataValues({
...yp,
@ -36,9 +35,20 @@ export default function EditYPDetails() {
<div className="config-directory-details-form">
<Title level={3}>Owncast Directory Settings</Title>
<p>Would you like to appear in the <a href="https://directory.owncast.online" target="_blank" rel="noreferrer"><strong>Owncast Directory</strong></a>?</p>
<p>
Would you like to appear in the{' '}
<a href="https://directory.owncast.online" target="_blank" rel="noreferrer">
<strong>Owncast Directory</strong>
</a>
?
</p>
<p style={{ backgroundColor: 'black', fontSize: '.75rem', padding: '5px' }}><em>NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be able to use this.</em></p>
<p style={{ backgroundColor: 'black', fontSize: '.75rem', padding: '5px' }}>
<em>
NOTE: You will need to have a URL specified in the <code>Instance URL</code> field to be
able to use this.
</em>
</p>
<div className="config-yp-container">
<ToggleSwitch
@ -57,5 +67,3 @@ export default function EditYPDetails() {
</div>
);
}

22
web/pages/components/config/edit-instance-details.tsx
View file

@ -1,8 +1,20 @@
import React, { useState, useContext, useEffect } from 'react';
import TextFieldWithSubmit, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './form-textfield-with-submit';
import TextFieldWithSubmit, {
TEXTFIELD_TYPE_TEXTAREA,
TEXTFIELD_TYPE_URL,
} from './form-textfield-with-submit';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { postConfigUpdateToAPI, TEXTFIELD_PROPS_USERNAME, TEXTFIELD_PROPS_INSTANCE_URL, TEXTFIELD_PROPS_SERVER_TITLE, TEXTFIELD_PROPS_STREAM_TITLE, TEXTFIELD_PROPS_SERVER_SUMMARY, TEXTFIELD_PROPS_LOGO, API_YP_SWITCH } from './constants';
import {
postConfigUpdateToAPI,
TEXTFIELD_PROPS_USERNAME,
TEXTFIELD_PROPS_INSTANCE_URL,
TEXTFIELD_PROPS_SERVER_TITLE,
TEXTFIELD_PROPS_STREAM_TITLE,
TEXTFIELD_PROPS_SERVER_SUMMARY,
TEXTFIELD_PROPS_LOGO,
API_YP_SWITCH,
} from './constants';
import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';
@ -35,14 +47,14 @@ export default function EditInstanceDetails() {
});
}
}
}
};
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
setFormDataValues({
...formDataValues,
[fieldName]: value,
});
}
};
return (
<div className={configStyles.publicDetailsContainer}>
@ -97,5 +109,3 @@ export default function EditInstanceDetails() {
</div>
);
}

48
web/pages/components/config/edit-server-details.tsx
View file

@ -6,7 +6,12 @@ import { TEXTFIELD_TYPE_NUMBER, TEXTFIELD_TYPE_PASSWORD } from './form-textfield
import TextFieldWithSubmit from './form-textfield-with-submit';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { TEXTFIELD_PROPS_FFMPEG, TEXTFIELD_PROPS_RTMP_PORT, TEXTFIELD_PROPS_STREAM_KEY, TEXTFIELD_PROPS_WEB_PORT, } from './constants';
import {
TEXTFIELD_PROPS_FFMPEG,
TEXTFIELD_PROPS_RTMP_PORT,
TEXTFIELD_PROPS_STREAM_KEY,
TEXTFIELD_PROPS_WEB_PORT,
} from './constants';
import configStyles from '../../../styles/config-pages.module.scss';
import { UpdateArgs } from '../../../types/config-section';
@ -24,7 +29,10 @@ export default function EditInstanceDetails() {
useEffect(() => {
setFormDataValues({
streamKey, ffmpegPath, rtmpServerPort, webServerPort
streamKey,
ffmpegPath,
rtmpServerPort,
webServerPort,
});
}, [serverConfig]);
@ -37,20 +45,19 @@ export default function EditInstanceDetails() {
...formDataValues,
[fieldName]: value,
});
}
};
function generateStreamKey () {
function generateStreamKey() {
let key = '';
for (let i = 0; i < 3; i+=1) {
for (let i = 0; i < 3; i += 1) {
key += Math.random().toString(36).substring(2);
}
handleFieldChange({ fieldName: 'streamKey', value: key });
}
function copyStreamKey () {
navigator.clipboard.writeText(formDataValues.streamKey)
.then(() => {
function copyStreamKey() {
navigator.clipboard.writeText(formDataValues.streamKey).then(() => {
setCopyVisible(true);
setTimeout(() => setCopyVisible(false), COPY_TOOLTIP_TIMEOUT);
});
@ -68,25 +75,14 @@ export default function EditInstanceDetails() {
onChange={handleFieldChange}
/>
<div>
<span style={{fontSize: '0.75em', color: '#ff7777', marginRight: '0.5em'}}>
Save this key somewhere safe,
you will need it to stream or login to the admin dashboard!
<span style={{ fontSize: '0.75em', color: '#ff7777', marginRight: '0.5em' }}>
Save this key somewhere safe, you will need it to stream or login to the admin
dashboard!
</span>
<Tooltip className="copy-tooltip"
title="Copied!"
trigger=""
visible={copyIsVisible}>
<Button type="primary"
icon={<CopyOutlined />}
size="small"
onClick={copyStreamKey}
/>
<Tooltip className="copy-tooltip" title="Copied!" trigger="" visible={copyIsVisible}>
<Button type="primary" icon={<CopyOutlined />} size="small" onClick={copyStreamKey} />
</Tooltip>
<Button type="primary"
icon={<RedoOutlined />}
size="small"
onClick={generateStreamKey}
/>
<Button type="primary" icon={<RedoOutlined />} size="small" onClick={generateStreamKey} />
</div>
<TextFieldWithSubmit
fieldName="ffmpegPath"
@ -115,5 +111,3 @@ export default function EditInstanceDetails() {
</div>
);
}

99
web/pages/components/config/edit-social-links.tsx
View file

@ -5,7 +5,14 @@ import { DeleteOutlined } from '@ant-design/icons';
import SocialDropdown from './social-icons-dropdown';
import { fetchData, NEXT_PUBLIC_API_HOST, SOCIAL_PLATFORMS_LIST } from '../../../utils/apis';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { API_SOCIAL_HANDLES, postConfigUpdateToAPI, RESET_TIMEOUT, SUCCESS_STATES, DEFAULT_SOCIAL_HANDLE, OTHER_SOCIAL_HANDLE_OPTION } from './constants';
import {
API_SOCIAL_HANDLES,
postConfigUpdateToAPI,
RESET_TIMEOUT,
SUCCESS_STATES,
DEFAULT_SOCIAL_HANDLE,
OTHER_SOCIAL_HANDLE_OPTION,
} from './constants';
import { SocialHandle } from '../../../types/config-section';
import { isValidUrl } from '../../../utils/urls';
@ -44,15 +51,15 @@ export default function EditSocialLinks() {
...result[item],
}));
setAvailableIconsList(list);
} catch (error) {
console.log(error)
console.log(error);
// do nothing
}
};
const selectedOther = modalDataState.platform !== '' && !availableIconsList.find(item => item.key === modalDataState.platform);
const selectedOther =
modalDataState.platform !== '' &&
!availableIconsList.find(item => item.key === modalDataState.platform);
useEffect(() => {
getAvailableIcons();
@ -64,7 +71,6 @@ export default function EditSocialLinks() {
}
}, [instanceDetails]);
const resetStates = () => {
setSubmitStatus(null);
setSubmitStatusMessage('');
@ -76,7 +82,7 @@ export default function EditSocialLinks() {
setEditId(-1);
setDisplayOther(false);
setModalProcessing(false);
setModalDataState({...DEFAULT_SOCIAL_HANDLE});
setModalDataState({ ...DEFAULT_SOCIAL_HANDLE });
};
const handleModalCancel = () => {
@ -107,14 +113,17 @@ export default function EditSocialLinks() {
updateModalState('url', value);
};
// posts all the variants at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
await postConfigUpdateToAPI({
apiPath: API_SOCIAL_HANDLES,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({ fieldName: 'socialHandles', value: postValue, path: 'instanceDetails' });
setFieldInConfigState({
fieldName: 'socialHandles',
value: postValue,
path: 'instanceDetails',
});
// close modal
setModalProcessing(false);
@ -132,15 +141,12 @@ export default function EditSocialLinks() {
});
};
// on Ok, send all of dataState to api
// show loading
// close modal when api is done
const handleModalOk = () => {
setModalProcessing(true);
const postData = currentSocialHandles.length ? [
...currentSocialHandles,
]: [];
const postData = currentSocialHandles.length ? [...currentSocialHandles] : [];
if (editId === -1) {
postData.push(modalDataState);
} else {
@ -150,23 +156,21 @@ export default function EditSocialLinks() {
};
const handleDeleteItem = index => {
const postData = [
...currentSocialHandles,
];
const postData = [...currentSocialHandles];
postData.splice(index, 1);
postUpdateToAPI(postData);
};
const socialHandlesColumns: ColumnsType<SocialHandle> = [
{
title: "#",
dataIndex: "key",
key: "key"
title: '#',
dataIndex: 'key',
key: 'key',
},
{
title: "Platform",
dataIndex: "platform",
key: "platform",
title: 'Platform',
dataIndex: 'platform',
key: 'platform',
render: (platform: string) => {
const platformInfo = availableIconsList.find(item => item.key === platform);
if (!platformInfo) {
@ -185,9 +189,9 @@ export default function EditSocialLinks() {
},
{
title: "Url Link",
dataIndex: "url",
key: "url",
title: 'Url Link',
dataIndex: 'url',
key: 'url',
},
{
title: '',
@ -196,11 +200,15 @@ export default function EditSocialLinks() {
render: (data, record, index) => {
return (
<span className="actions">
<Button type="primary" size="small" onClick={() => {
<Button
type="primary"
size="small"
onClick={() => {
setEditId(index);
setModalDataState({...currentSocialHandles[index]});
setModalDataState({ ...currentSocialHandles[index] });
setDisplayModal(true);
}}>
}}
>
Edit
</Button>
<Button
@ -210,14 +218,13 @@ export default function EditSocialLinks() {
onClick={() => handleDeleteItem(index)}
/>
</span>
)},
);
},
},
];
const {
icon: newStatusIcon = null,
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
const statusMessage = (
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
@ -225,9 +232,8 @@ export default function EditSocialLinks() {
);
const okButtonProps = {
disabled: !isValidUrl(modalDataState.url)
};
disabled: !isValidUrl(modalDataState.url),
};
return (
<div className={configStyles.socialLinksEditor}>
@ -258,21 +264,17 @@ export default function EditSocialLinks() {
selectedOption={selectedOther ? OTHER_SOCIAL_HANDLE_OPTION : modalDataState.platform}
onSelected={handleDropdownSelect}
/>
{
displayOther
? (
{displayOther ? (
<>
<Input
placeholder="Other"
defaultValue={modalDataState.platform}
onChange={handleOtherNameChange}
/>
<br/>
<br />
</>
) : null
}
<br/>
) : null}
<br />
URL
<Input
placeholder="Url to page"
@ -280,17 +282,18 @@ export default function EditSocialLinks() {
value={modalDataState.url}
onChange={handleUrlChange}
/>
{statusMessage}
</Modal>
<br />
<Button type="primary" onClick={() => {
<Button
type="primary"
onClick={() => {
resetModal();
setDisplayModal(true);
}}>
}}
>
Add a new social link
</Button>
</div>
);
}

27
web/pages/components/config/edit-tags.tsx
View file

@ -6,7 +6,14 @@ import { ServerStatusContext } from '../../../utils/server-status-context';
import { FIELD_PROPS_TAGS, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import TextField from './form-textfield';
import { UpdateArgs } from '../../../types/config-section';
import { createInputStatus, StatusState, STATUS_ERROR, STATUS_PROCESSING, STATUS_SUCCESS, STATUS_WARNING } from '../../../utils/input-statuses';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
STATUS_WARNING,
} from '../../../utils/input-statuses';
const { Title } = Typography;
@ -21,19 +28,14 @@ export default function EditInstanceTags() {
const { instanceDetails } = serverConfig;
const { tags = [] } = instanceDetails;
const {
apiPath,
maxLength,
placeholder,
configPath,
} = FIELD_PROPS_TAGS;
const { apiPath, maxLength, placeholder, configPath } = FIELD_PROPS_TAGS;
let resetTimer = null;
useEffect(() => {
return () => {
clearTimeout(resetTimer);
}
};
}, []);
const resetStates = () => {
@ -42,7 +44,7 @@ export default function EditInstanceTags() {
setFieldStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
}
};
// posts all the tags at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
@ -106,7 +108,7 @@ export default function EditInstanceTags() {
const updatedTags = [...tags];
updatedTags.splice(index, 1);
postUpdateToAPI(updatedTags);
}
};
// const {
// icon: newStatusIcon = null,
@ -115,7 +117,6 @@ export default function EditInstanceTags() {
return (
<div className="tag-editor-container">
<Title level={3}>Add Tags</Title>
<p>This is a great way to categorize your Owncast server on the Directory!</p>
@ -125,7 +126,9 @@ export default function EditInstanceTags() {
handleDeleteTag(index);
};
return (
<Tag closable onClose={handleClose} key={`tag-${tag}-${index}`}>{tag}</Tag>
<Tag closable onClose={handleClose} key={`tag-${tag}-${index}`}>
{tag}
</Tag>
);
})}
</div>

16
web/pages/components/config/form-textfield-with-submit.tsx
View file

@ -5,7 +5,13 @@ import { RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import { ServerStatusContext } from '../../../utils/server-status-context';
import TextField, { TextFieldProps } from './form-textfield';
import { createInputStatus, StatusState, STATUS_ERROR, STATUS_PROCESSING, STATUS_SUCCESS } from '../../../utils/input-statuses';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../../../utils/input-statuses';
import { UpdateArgs } from '../../../types/config-section';
export const TEXTFIELD_TYPE_TEXT = 'default';
@ -114,7 +120,7 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
onSubmit();
}
}
}
};
return (
<div className="textfield-with-submit-container">
@ -126,7 +132,11 @@ export default function TextFieldWithSubmit(props: TextFieldWithSubmitProps) {
onChange={handleChange}
/>
{ hasChanged ? <Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>Update</Button> : null }
{hasChanged ? (
<Button type="primary" size="small" className="submit-button" onClick={handleSubmit}>
Update
</Button>
) : null}
</div>
);
}

27
web/pages/components/config/form-textfield.tsx
View file

@ -30,7 +30,6 @@ export interface TextFieldProps {
onChange?: FieldUpdaterFunc;
}
export default function TextField(props: TextFieldProps) {
const {
className,
@ -70,11 +69,14 @@ export default function TextField(props: TextFieldProps) {
if (onPressEnter) {
onPressEnter();
}
}
};
// display the appropriate Ant text field
let Field = Input as typeof Input | typeof InputNumber | typeof Input.TextArea | typeof Input.Password;
let Field = Input as
| typeof Input
| typeof InputNumber
| typeof Input.TextArea
| typeof Input.Password;
let fieldProps = {};
if (type === TEXTFIELD_TYPE_TEXTAREA) {
Field = Input.TextArea;
@ -91,12 +93,11 @@ export default function TextField(props: TextFieldProps) {
fieldProps = {
type: 'number',
min: 1,
max: (10**maxLength) - 1,
max: 10 ** maxLength - 1,
onKeyDown: (e: React.KeyboardEvent) => {
if (e.target.value.length > maxLength - 1 )
e.preventDefault();
if (e.target.value.length > maxLength - 1) e.preventDefault();
return false;
}
},
};
} else if (type === TEXTFIELD_TYPE_URL) {
fieldProps = {
@ -110,8 +111,10 @@ export default function TextField(props: TextFieldProps) {
return (
<div className={`textfield-container type-${type}`}>
{ required ? <span className="required-label">*</span> : null }
<label htmlFor={fieldId} className="textfield-label">{label}</label>
{required ? <span className="required-label">*</span> : null}
<label htmlFor={fieldId} className="textfield-label">
{label}
</label>
<div className="textfield">
<Field
id={fieldId}
@ -128,8 +131,8 @@ export default function TextField(props: TextFieldProps) {
/>
</div>
<InfoTip tip={tip} />
{ status ? statusMessage : null }
{ status ? statusIcon : null }
{status ? statusMessage : null}
{status ? statusIcon : null}
</div>
);
}

24
web/pages/components/config/form-toggleswitch-with-submit.tsx
View file

@ -27,21 +27,13 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
const serverStatusData = useContext(ServerStatusContext);
const { setFieldInConfigState } = serverStatusData || {};
const {
apiPath,
checked,
configPath = '',
disabled = false,
fieldName,
label,
tip,
} = props;
const { apiPath, checked, configPath = '', disabled = false, fieldName, label, tip } = props;
const resetStates = () => {
setSubmitStatus('');
clearTimeout(resetTimer);
resetTimer = null;
}
};
const handleChange = async (isChecked: boolean) => {
setSubmitStatus('validating');
@ -58,12 +50,10 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}
};
const {
icon: newStatusIcon = null,
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
return (
<div className="toggleswitch-container">
@ -78,7 +68,9 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
unCheckedChildren="OFF"
disabled={disabled}
/>
<span className="label">{label} <InfoTip tip={tip} /></span>
<span className="label">
{label} <InfoTip tip={tip} />
</span>
{submitStatus}
</div>
<div className={`status-message ${submitStatus || ''}`}>

26
web/pages/components/config/social-icons-dropdown.tsx
View file

@ -1,10 +1,9 @@
import React from 'react';
import { Select } from "antd";
import { SocialHandleDropdownItem } from "../../../types/config-section";
import { Select } from 'antd';
import { SocialHandleDropdownItem } from '../../../types/config-section';
import { NEXT_PUBLIC_API_HOST } from '../../../utils/apis';
import { OTHER_SOCIAL_HANDLE_OPTION } from './constants';
interface DropdownProps {
iconList: SocialHandleDropdownItem[];
selectedOption: string;
@ -12,7 +11,6 @@ interface DropdownProps {
}
export default function SocialDropdown({ iconList, selectedOption, onSelected }: DropdownProps) {
const handleSelected = value => {
if (onSelected) {
onSelected(value);
@ -21,8 +19,15 @@ export default function SocialDropdown({ iconList, selectedOption, onSelected }:
const inititalSelected = selectedOption === '' ? null : selectedOption;
return (
<div className="social-dropdown-container">
<p className="">If you are looking for a platform name not on this list, please select Other and type in your own name. A logo will not be provided.</p>
<p className="">If you DO have a logo, drop it in to the <code>/webroot/img/platformicons</code> directory and update the <code>/socialHandle.go</code> list. Then restart the server and it will show up in the list.</p>
<p className="">
If you are looking for a platform name not on this list, please select Other and type in
your own name. A logo will not be provided.
</p>
<p className="">
If you DO have a logo, drop it in to the <code>/webroot/img/platformicons</code> directory
and update the <code>/socialHandle.go</code> list. Then restart the server and it will show
up in the list.
</p>
<Select
style={{ width: 240 }}
@ -42,9 +47,12 @@ export default function SocialDropdown({ iconList, selectedOption, onSelected }:
<span className="option-label">{platform}</span>
</Select.Option>
);
})
}
<Select.Option className="social-option" key={`platform-${OTHER_SOCIAL_HANDLE_OPTION}`} value={OTHER_SOCIAL_HANDLE_OPTION}>
})}
<Select.Option
className="social-option"
key={`platform-${OTHER_SOCIAL_HANDLE_OPTION}`}
value={OTHER_SOCIAL_HANDLE_OPTION}
>
Other...
</Select.Option>
</Select>

29
web/pages/components/config/video-latency.tsx
View file

@ -1,7 +1,12 @@
import React, { useContext, useState, useEffect } from 'react';
import { Typography, Slider, } from 'antd';
import { Typography, Slider } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { API_VIDEO_SEGMENTS, SUCCESS_STATES, RESET_TIMEOUT,postConfigUpdateToAPI } from './constants';
import {
API_VIDEO_SEGMENTS,
SUCCESS_STATES,
RESET_TIMEOUT,
postConfigUpdateToAPI,
} from './constants';
const { Title } = Typography;
@ -28,9 +33,7 @@ interface SegmentToolTipProps {
}
function SegmentToolTip({ value }: SegmentToolTipProps) {
return (
<span className="segment-tip">{value}</span>
);
return <span className="segment-tip">{value}</span>;
}
export default function VideoLatency() {
@ -57,7 +60,7 @@ export default function VideoLatency() {
setSubmitStatusMessage('');
resetTimer = null;
clearTimeout(resetTimer);
}
};
// posts all the variants at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
@ -68,7 +71,7 @@ export default function VideoLatency() {
setFieldInConfigState({
fieldName: 'latencyLevel',
value: postValue,
path: 'videoSettings'
path: 'videoSettings',
});
setSubmitStatus('success');
@ -83,10 +86,8 @@ export default function VideoLatency() {
});
};
const {
icon: newStatusIcon = null,
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
const statusMessage = (
<div className={`status-message ${submitStatus || ''}`}>
@ -102,9 +103,11 @@ export default function VideoLatency() {
<div className="module-container config-video-segements-conatiner">
<Title level={3}>Latency Buffer</Title>
<p>
There are trade-offs when cosidering video latency and reliability. Blah blah .. better wording here needed.
There are trade-offs when cosidering video latency and reliability. Blah blah .. better
wording here needed.
</p>
<br /><br />
<br />
<br />
<div className="segment-slider">
<Slider
tooltipVisible

65
web/pages/components/config/video-variant-form.tsx
View file

@ -32,13 +32,13 @@ const VIDEO_VARIANT_DEFAULTS = {
defaultValue: 800,
unit: 'kbps',
incrementBy: 100,
tip: 'nothing to see here'
tip: 'nothing to see here',
},
videoPassthrough: {
tip: 'If No is selected, then you should set your desired Video Bitrate.'
tip: 'If No is selected, then you should set your desired Video Bitrate.',
},
audioPassthrough: {
tip: 'If No is selected, then you should set your desired Audio Bitrate.'
tip: 'If No is selected, then you should set your desired Audio Bitrate.',
},
};
@ -47,8 +47,10 @@ interface VideoVariantFormProps {
onUpdateField: FieldUpdaterFunc;
}
export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, onUpdateField }: VideoVariantFormProps) {
export default function VideoVariantForm({
dataState = DEFAULT_VARIANT_STATE,
onUpdateField,
}: VideoVariantFormProps) {
const handleFramerateChange = (value: number) => {
onUpdateField({ fieldName: 'framerate', value });
};
@ -65,8 +67,8 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
onUpdateField({ fieldName: 'videoPassthrough', value });
};
const handleVideoCpuUsageLevelChange = (value: number) => {
onUpdateField({ fieldName: 'cpuUsageLevel', value })
}
onUpdateField({ fieldName: 'cpuUsageLevel', value });
};
const framerateDefaults = VIDEO_VARIANT_DEFAULTS.framerate;
const framerateMin = framerateDefaults.min;
@ -91,24 +93,27 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
return (
<div className="variant-form">
<div className="section-intro">
Say a thing here about how this all works.
Read more <a href="https://owncast.online/docs/configuration/">here</a>.
<br /><br />
Say a thing here about how this all works. Read more{' '}
<a href="https://owncast.online/docs/configuration/">here</a>.
<br />
<br />
</div>
{/* ENCODER PRESET FIELD */}
<div className="field">
<div className="form-component">
<CPUUsageSelector defaultValue={dataState.cpuUsageLevel} onChange={handleVideoCpuUsageLevelChange} />
{selectedPresetNote ? <span className="selected-value-note">{selectedPresetNote}</span> : null }
<CPUUsageSelector
defaultValue={dataState.cpuUsageLevel}
onChange={handleVideoCpuUsageLevelChange}
/>
{selectedPresetNote ? (
<span className="selected-value-note">{selectedPresetNote}</span>
) : null}
</div>
</div>
{/* VIDEO PASSTHROUGH FIELD */}
<div style={{ display: 'none'}}>
<div style={{ display: 'none' }}>
<div className="field">
<p className="label">
<InfoTip tip={VIDEO_VARIANT_DEFAULTS.videoPassthrough.tip} />
@ -147,19 +152,20 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
[videoBRMax]: `${videoBRMax} ${videoBRUnit}`,
}}
/>
{selectedVideoBRnote ? <span className="selected-value-note">{selectedVideoBRnote}</span> : null }
{selectedVideoBRnote ? (
<span className="selected-value-note">{selectedVideoBRnote}</span>
) : null}
</div>
</div>
<br /><br /><br /><br />
<br />
<br />
<br />
<br />
<Collapse>
<Panel header="Advanced Settings" key="1">
<div className="section-intro">
Touch if you dare.
</div>
<div className="section-intro">Touch if you dare.</div>
{/* FRAME RATE FIELD */}
<div className="field">
@ -182,8 +188,9 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
[framerateMax]: `${framerateMax} ${framerateUnit}`,
}}
/>
{selectedFramerateNote ? <span className="selected-value-note">{selectedFramerateNote}</span> : null }
{selectedFramerateNote ? (
<span className="selected-value-note">{selectedFramerateNote}</span>
) : null}
</div>
</div>
@ -203,7 +210,7 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
checkedChildren="Yes"
unCheckedChildren="No"
/>
{dataState.audioPassthrough ? <span className="note">Same as source</span>: null}
{dataState.audioPassthrough ? <span className="note">Same as source</span> : null}
</div>
</div>
@ -230,13 +237,13 @@ export default function VideoVariantForm({ dataState = DEFAULT_VARIANT_STATE, on
}}
/>
{selectedAudioBRnote ? <span className="selected-value-note">{selectedAudioBRnote}</span> : null }
{selectedAudioBRnote ? (
<span className="selected-value-note">{selectedAudioBRnote}</span>
) : null}
</div>
</div>
</Panel>
</Collapse>
</div>
);
}

91
web/pages/components/config/video-variants-table.tsx
View file

@ -8,7 +8,13 @@ import { DeleteOutlined } from '@ant-design/icons';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { UpdateArgs, VideoVariant } from '../../../types/config-section';
import VideoVariantForm from './video-variant-form';
import { API_VIDEO_VARIANTS, DEFAULT_VARIANT_STATE, SUCCESS_STATES, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import {
API_VIDEO_VARIANTS,
DEFAULT_VARIANT_STATE,
SUCCESS_STATES,
RESET_TIMEOUT,
postConfigUpdateToAPI,
} from './constants';
const { Title } = Typography;
@ -39,13 +45,13 @@ export default function CurrentVariantsTable() {
setSubmitStatusMessage('');
resetTimer = null;
clearTimeout(resetTimer);
}
};
const handleModalCancel = () => {
setDisplayModal(false);
setEditId(-1);
setModalDataState(DEFAULT_VARIANT_STATE);
}
};
// posts all the variants at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
@ -53,7 +59,11 @@ export default function CurrentVariantsTable() {
apiPath: API_VIDEO_VARIANTS,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({ fieldName: 'videoQualityVariants', value: postValue, path: 'videoSettings' });
setFieldInConfigState({
fieldName: 'videoQualityVariants',
value: postValue,
path: 'videoSettings',
});
// close modal
setModalProcessing(false);
@ -77,9 +87,7 @@ export default function CurrentVariantsTable() {
const handleModalOk = () => {
setModalProcessing(true);
const postData = [
...videoQualityVariants,
];
const postData = [...videoQualityVariants];
if (editId === -1) {
postData.push(modalDataState);
} else {
@ -89,11 +97,9 @@ export default function CurrentVariantsTable() {
};
const handleDeleteVariant = index => {
const postData = [
...videoQualityVariants,
];
const postData = [...videoQualityVariants];
postData.splice(index, 1);
postUpdateToAPI(postData)
postUpdateToAPI(postData);
};
const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
@ -101,41 +107,37 @@ export default function CurrentVariantsTable() {
...modalDataState,
[fieldName]: value,
});
}
};
const {
icon: newStatusIcon = null,
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
const cpuUsageLevelLabelMap = {
1: 'lowest',
2: 'low',
3: 'medium',
4: 'high',
5: 'highest'
5: 'highest',
};
const videoQualityColumns: ColumnsType<VideoVariant> = [
{
title: "#",
dataIndex: "key",
key: "key"
title: '#',
dataIndex: 'key',
key: 'key',
},
{
title: "Video bitrate",
dataIndex: "videoBitrate",
key: "videoBitrate",
render: (bitrate: number) =>
!bitrate ? "Same as source" : `${bitrate} kbps`,
title: 'Video bitrate',
dataIndex: 'videoBitrate',
key: 'videoBitrate',
render: (bitrate: number) => (!bitrate ? 'Same as source' : `${bitrate} kbps`),
},
{
title: "CPU Usage",
dataIndex: "cpuUsageLevel",
key: "cpuUsageLevel",
render: (level: string) =>
!level ? "n/a" : cpuUsageLevelLabelMap[level],
title: 'CPU Usage',
dataIndex: 'cpuUsageLevel',
key: 'cpuUsageLevel',
render: (level: string) => (!level ? 'n/a' : cpuUsageLevelLabelMap[level]),
},
{
title: '',
@ -145,11 +147,15 @@ export default function CurrentVariantsTable() {
const index = data.key - 1;
return (
<span className="actions">
<Button type="primary" size="small" onClick={() => {
<Button
type="primary"
size="small"
onClick={() => {
setEditId(index);
setModalDataState(videoQualityVariants[index]);
setDisplayModal(true);
}}>
}}
>
Edit
</Button>
<Button
@ -162,7 +168,8 @@ export default function CurrentVariantsTable() {
}}
/>
</span>
)},
);
},
},
];
@ -172,7 +179,10 @@ export default function CurrentVariantsTable() {
</div>
);
const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index + 1, ...variant }));
const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({
key: index + 1,
...variant,
}));
return (
<>
@ -195,22 +205,21 @@ export default function CurrentVariantsTable() {
onCancel={handleModalCancel}
confirmLoading={modalProcessing}
>
<VideoVariantForm
dataState={{...modalDataState}}
onUpdateField={handleUpdateField}
/>
<VideoVariantForm dataState={{ ...modalDataState }} onUpdateField={handleUpdateField} />
{statusMessage}
</Modal>
<br />
<Button type="primary" onClick={() => {
<Button
type="primary"
onClick={() => {
setEditId(-1);
setModalDataState(DEFAULT_VARIANT_STATE);
setDisplayModal(true);
}}>
}}
>
Add a new variant
</Button>
</>
);
}

36
web/pages/config-page-content.tsx
View file

@ -1,11 +1,16 @@
import React, { useState, useEffect, useContext } from 'react';
import { Typography, Button } from "antd";
import { Typography, Button } from 'antd';
import { FormItemProps } from 'antd/lib/form';
import dynamic from 'next/dynamic';
import MarkdownIt from 'markdown-it';
import { ServerStatusContext } from '../utils/server-status-context';
import { postConfigUpdateToAPI, RESET_TIMEOUT, SUCCESS_STATES, API_CUSTOM_CONTENT} from './components/config/constants';
import {
postConfigUpdateToAPI,
RESET_TIMEOUT,
SUCCESS_STATES,
API_CUSTOM_CONTENT,
} from './components/config/constants';
import 'react-markdown-editor-lite/lib/index.css';
@ -29,7 +34,6 @@ export default function PageContentEditor() {
const { instanceDetails } = serverConfig;
const { extraPageContent: initialContent } = instanceDetails;
let resetTimer = null;
function handleEditorChange({ text }) {
@ -56,7 +60,11 @@ export default function PageContentEditor() {
apiPath: API_CUSTOM_CONTENT,
data: { value: content },
onSuccess: () => {
setFieldInConfigState({ fieldName: 'extraPageContent', value: content, path: 'instanceDetails' });
setFieldInConfigState({
fieldName: 'extraPageContent',
value: content,
path: 'instanceDetails',
});
setSubmitStatus('success');
},
onError: (message: string) => {
@ -71,20 +79,20 @@ export default function PageContentEditor() {
setContent(initialContent);
}, [instanceDetails]);
const {
icon: newStatusIcon = null,
message: newStatusMessage = '',
} = SUCCESS_STATES[submitStatus] || {};
const { icon: newStatusIcon = null, message: newStatusMessage = '' } =
SUCCESS_STATES[submitStatus] || {};
return (
<div className="config-page-content-form">
<Title level={2}>Edit custom content</Title>
<p>Add some content about your site with the Markdown editor below. This content shows up at the bottom half of your Owncast page.</p>
<p>
Add some content about your site with the Markdown editor below. This content shows up at
the bottom half of your Owncast page.
</p>
<MdEditor
style={{ height: "30em" }}
style={{ height: '30em' }}
value={content}
renderHTML={(c: string) => mdParser.render(c)}
onChange={handleEditorChange}
@ -94,7 +102,11 @@ export default function PageContentEditor() {
}}
/>
<div className="page-content-actions">
{ hasChanged ? <Button type="primary" onClick={handleSave}>Save</Button> : null }
{hasChanged ? (
<Button type="primary" onClick={handleSave}>
Save
</Button>
) : null}
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div>

3
web/pages/config-public-details.tsx
View file

@ -16,7 +16,6 @@ export default function PublicFacingDetails() {
<div className={configStyles.textFieldsSection}>
<EditInstanceDetails />
<Link href="/admin/config-page-content">
<a>Edit your extra page content here.</a>
</Link>
@ -25,5 +24,3 @@ export default function PublicFacingDetails() {
</>
);
}

3
web/pages/config-server-details.tsx
View file

@ -11,10 +11,7 @@ export default function ConfigServerDetails() {
<div className="config-server-details-container">
<EditServerDetails />
</div>
</div>
);
}

1
web/pages/config-social-items.tsx
View file

@ -17,4 +17,3 @@ export default function ConfigSocialThings() {
</div>
);
}

9
web/pages/config-video.tsx
View file

@ -10,14 +10,17 @@ export default function ConfigVideoSettings() {
return (
<div className="config-video-variants">
<Title level={2}>Video configuration</Title>
<p>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></p>
<p>
Learn more about configuring Owncast{' '}
<a href="https://owncast.online/docs/configuration">by visiting the documentation.</a>
</p>
<VideoLatency />
<br /><br />
<br />
<br />
<VideoVariantsTable />
</div>
);
}

165
web/pages/help.tsx
View file

@ -1,6 +1,6 @@
import { Button, Card, Col, Divider, Result, Row } from 'antd'
import Meta from 'antd/lib/card/Meta'
import Title from 'antd/lib/typography/Title'
import { Button, Card, Col, Divider, Result, Row } from 'antd';
import Meta from 'antd/lib/card/Meta';
import Title from 'antd/lib/typography/Title';
import {
AlertOutlined,
ApiTwoTone,
@ -14,154 +14,197 @@ import {
QuestionCircleTwoTone,
SettingTwoTone,
SlidersTwoTone,
} from '@ant-design/icons'
import React from 'react'
} from '@ant-design/icons';
import React from 'react';
interface Props { }
interface Props {}
export default function Help(props: Props) {
const questions = [
{
icon: <SettingTwoTone style={{ fontSize: '24px' }} />,
title: "I want to configure my owncast instance",
title: 'I want to configure my owncast instance',
content: (
<div>
<a href="https://owncast.online/docs/configuration/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
<a
href="https://owncast.online/docs/configuration/"
target="_blank"
rel="noopener noreferrer"
>
<LinkOutlined /> Learn more
</a>
</div>
)
),
},
{
icon: <CameraTwoTone style={{ fontSize: '24px' }} />,
title: "I need help configuring my broadcasting software",
title: 'I need help configuring my broadcasting software',
content: (
<div>
<a href="https://owncast.online/docs/broadcasting/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
<a
href="https://owncast.online/docs/broadcasting/"
target="_blank"
rel="noopener noreferrer"
>
<LinkOutlined /> Learn more
</a>
</div>
)
),
},
{
icon: <Html5TwoTone style={{ fontSize: '24px' }} />,
title: "I want to embed my stream into another site",
title: 'I want to embed my stream into another site',
content: (
<div>
<a href="https://owncast.online/docs/embed/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
<a href="https://owncast.online/docs/embed/" target="_blank" rel="noopener noreferrer">
<LinkOutlined /> Learn more
</a>
</div>
)
),
},
{
icon: <EditTwoTone style={{ fontSize: '24px' }} />,
title: "I want to customize my website",
title: 'I want to customize my website',
content: (
<div>
<a href="https://owncast.online/docs/website/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
<a href="https://owncast.online/docs/website/" target="_blank" rel="noopener noreferrer">
<LinkOutlined /> Learn more
</a>
</div>
)
),
},
{
icon: <SlidersTwoTone style={{ fontSize: '24px' }} />,
title: "I want to tweak my encoding quality or performance",
title: 'I want to tweak my encoding quality or performance',
content: (
<div>
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
<a href="https://owncast.online/docs/encoding/" target="_blank" rel="noopener noreferrer">
<LinkOutlined /> Learn more
</a>
</div>
)
),
},
{
icon: <DatabaseTwoTone style={{ fontSize: '24px' }} />,
title: "I want to offload my video to an external storage provider",
title: 'I want to offload my video to an external storage provider',
content: (
<div>
<a href="https://owncast.online/docs/s3/" target="_blank" rel="noopener noreferrer"><LinkOutlined/> Learn more</a>
<a href="https://owncast.online/docs/s3/" target="_blank" rel="noopener noreferrer">
<LinkOutlined /> Learn more
</a>
</div>
)
),
},
]
];
const otherResources = [
{
icon: <BugTwoTone style={{ fontSize: '24px' }} />,
title: "I found a bug",
title: 'I found a bug',
content: (
<div>
If you found a bug, then please
<a href="https://github.com/owncast/owncast/issues/new/choose" target="_blank" rel="noopener noreferrer"> let us know</a>
<a
href="https://github.com/owncast/owncast/issues/new/choose"
target="_blank"
rel="noopener noreferrer"
>
{' '}
let us know
</a>
</div>
)
),
},
{
icon: <QuestionCircleTwoTone style={{ fontSize: '24px' }} />,
title: "I have a general question",
title: 'I have a general question',
content: (
<div>
Most general questions are answered in our
<a href="https://owncast.online/docs/faq/" target="_blank" rel="noopener noreferrer"> FAQ</a> or exist in our <a href="https://github.com/owncast/owncast/discussions">discussions</a>
<a href="https://owncast.online/docs/faq/" target="_blank" rel="noopener noreferrer">
{' '}
FAQ
</a>{' '}
or exist in our <a href="https://github.com/owncast/owncast/discussions">discussions</a>
</div>
)
),
},
{
icon: <ApiTwoTone style={{ fontSize: '24px' }} />,
title: "I want to use the API",
title: 'I want to use the API',
content: (
<div>
You can view the API documentation for either the
<a href="https://owncast.online/api/latest" target="_blank" rel="noopener noreferrer">&nbsp;latest&nbsp;</a>
<a href="https://owncast.online/api/latest" target="_blank" rel="noopener noreferrer">
&nbsp;latest&nbsp;
</a>
or
<a href="https://owncast.online/api/development" target="_blank" rel="noopener noreferrer">&nbsp;development&nbsp;</a>
<a
href="https://owncast.online/api/development"
target="_blank"
rel="noopener noreferrer"
>
&nbsp;development&nbsp;
</a>
release.
</div>
)
}
]
),
},
];
return (
<div>
<Title style={{textAlign: 'center'}}>How can we help you?</Title>
<Title style={{ textAlign: 'center' }}>How can we help you?</Title>
<Row gutter={[16, 16]} justify="space-around" align="middle">
<Col xs={24} lg={12} style={{textAlign: 'center'}}>
<Col xs={24} lg={12} style={{ textAlign: 'center' }}>
<Result status="500" />
<Title level={2}>Troubleshooting</Title>
<Button target="_blank" rel="noopener noreferrer" href="https://owncast.online/docs/troubleshooting/" icon={<LinkOutlined/>} type="primary">Read Troubleshoting</Button>
<Button
target="_blank"
rel="noopener noreferrer"
href="https://owncast.online/docs/troubleshooting/"
icon={<LinkOutlined />}
type="primary"
>
Read Troubleshoting
</Button>
</Col>
<Col xs={24} lg={12} style={{textAlign: 'center'}}>
<Col xs={24} lg={12} style={{ textAlign: 'center' }}>
<Result status="404" />
<Title level={2}>Documentation</Title>
<Button target="_blank" rel="noopener noreferrer" href="https://owncast.online/" icon={<LinkOutlined/>} type="primary">Read the Docs</Button>
<Button
target="_blank"
rel="noopener noreferrer"
href="https://owncast.online/"
icon={<LinkOutlined />}
type="primary"
>
Read the Docs
</Button>
</Col>
</Row>
<Divider />
<Title level={2}>Common tasks</Title>
<Row gutter={[16, 16]}>
{
questions.map(question => (
{questions.map(question => (
<Col xs={24} lg={12}>
<Card key={question.title}>
<Meta
avatar={question.icon}
title={question.title}
description={question.content}
/>
<Meta avatar={question.icon} title={question.title} description={question.content} />
</Card>
</Col>
))
}
))}
</Row>
<Divider />
<Title level={2}>Other</Title>
<Row gutter={[16, 16]}>
{
otherResources.map(question => (
{otherResources.map(question => (
<Col xs={24} lg={12}>
<Card key={question.title}>
<Meta
avatar={question.icon}
title={question.title}
description={question.content}
/>
<Meta avatar={question.icon} title={question.title} description={question.content} />
</Card>
</Col>
))
}
))}
</Row>
</div>
)
);
}

75
web/pages/viewer-info.tsx
View file

@ -1,29 +1,20 @@
import React, { useState, useEffect, useContext } from 'react';
import { Table, Row } from "antd";
import { formatDistanceToNow } from "date-fns";
import { UserOutlined} from "@ant-design/icons";
import { SortOrder } from "antd/lib/table/interface";
import Chart from "./components/chart";
import StatisticItem from "./components/statistic";
import { Table, Row } from 'antd';
import { formatDistanceToNow } from 'date-fns';
import { UserOutlined } from '@ant-design/icons';
import { SortOrder } from 'antd/lib/table/interface';
import Chart from './components/chart';
import StatisticItem from './components/statistic';
import { ServerStatusContext } from '../utils/server-status-context';
import {
CONNECTED_CLIENTS,
VIEWERS_OVER_TIME,
fetchData,
} from "../utils/apis";
import { CONNECTED_CLIENTS, VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
const FETCH_INTERVAL = 60 * 1000; // 1 min
export default function ViewersOverTime() {
const context = useContext(ServerStatusContext);
const {
online,
viewerCount,
overallPeakViewerCount,
sessionPeakViewerCount,
} = context || {};
const { online, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } = context || {};
const [viewerInfo, setViewerInfo] = useState([]);
const [clients, setClients] = useState([]);
@ -33,14 +24,14 @@ export default function ViewersOverTime() {
const result = await fetchData(VIEWERS_OVER_TIME);
setViewerInfo(result);
} catch (error) {
console.log("==== error", error);
console.log('==== error', error);
}
try {
const result = await fetchData(CONNECTED_CLIENTS);
setClients(result);
} catch (error) {
console.log("==== error", error);
console.log('==== error', error);
}
};
@ -62,43 +53,43 @@ export default function ViewersOverTime() {
// todo - check to see if broadcast active has changed. if so, start polling.
if (!viewerInfo.length) {
return "no info";
return 'no info';
}
const columns = [
{
title: "User name",
dataIndex: "username",
key: "username",
render: (username) => username || "-",
title: 'User name',
dataIndex: 'username',
key: 'username',
render: username => username || '-',
sorter: (a, b) => a.username - b.username,
sortDirections: ["descend", "ascend"] as SortOrder[],
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: "Messages sent",
dataIndex: "messageCount",
key: "messageCount",
title: 'Messages sent',
dataIndex: 'messageCount',
key: 'messageCount',
sorter: (a, b) => a.messageCount - b.messageCount,
sortDirections: ["descend", "ascend"] as SortOrder[],
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: "Connected Time",
dataIndex: "connectedAt",
key: "connectedAt",
render: (time) => formatDistanceToNow(new Date(time)),
title: 'Connected Time',
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[],
sortDirections: ['descend', 'ascend'] as SortOrder[],
},
{
title: "User Agent",
dataIndex: "userAgent",
key: "userAgent",
title: 'User Agent',
dataIndex: 'userAgent',
key: 'userAgent',
},
{
title: "Location",
dataIndex: "geo",
key: "geo",
render: (geo) => geo ? `${geo.regionName}, ${geo.countryCode}` : '-',
title: 'Location',
dataIndex: 'geo',
key: 'geo',
render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'),
},
];
@ -122,7 +113,7 @@ export default function ViewersOverTime() {
/>
</Row>
<Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
<Table dataSource={clients} columns={columns} rowKey={(row) => row.clientID} />
<Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />
</div>
);
}