LogalDeveloper/owncast
0
Fork 0
Code Activity

Admin css overhaul pt2 (#19)

Browse Source 
* tweaks to offline state in admin viewers page

If stream is offline, hide current viewers statistic and viewers table.
Also, change wording for describing max viewers.

* take out ant dark stylesheet, organize ant color overrides

* remove ant dark css; cleanup ant overrides; format public-detail page

* combine toggleswitch component style with textfield so layout can be shared

* fix toggleswitch status message placement

* - update styles for modals, collapses
- move reset dir into its own component
- assorted style cleanups ans consistencies

* hide entire advanced section for resetyp if no yp

* temp adjustments to video modal

* temp comment out toggle switch use for later'

* address PR comments

* lint

* update type

* allow warnings during lint

Co-authored-by: nebunez <uoj2y7wak869@opayq.net>
This commit is contained in:
gingervitis
2021-02-12 23:55:59 -08:00
committed by GitHub
parent 250acbf6e9
commit a122ee6c42
40 changed files with 1150 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/pages/_app.tsx
View File

@@ -1,19 +1,19 @@
// order matters!
import 'antd/dist/antd.css';
import '../styles/colors.scss';
import '../styles/globals.scss';
import '../styles/ant-overrides.scss';
import '../styles/markdown-editor.scss';
import '../styles/globals.scss';
import '../styles/main-layout.scss';
import '../styles/form-textfields.scss';
import '../styles/form-toggleswitch.scss';
import '../styles/form-misc-elements.scss';
import '../styles/config-socialhandles.scss';
import '../styles/config-storage.scss';
import '../styles/config-tags.scss';
import '../styles/config-video-variants.scss';
import '../styles/config-public-details.scss';
import '../styles/home.scss';
import '../styles/chat.scss';

115
web/pages/config-page-content.tsx
View File

@@ -1,115 +0,0 @@
import React, { useState, useEffect, useContext } from 'react';
import { Typography, Button } from 'antd';
import dynamic from 'next/dynamic';
import MarkdownIt from 'markdown-it';
import { ServerStatusContext } from '../utils/server-status-context';
import {
postConfigUpdateToAPI,
RESET_TIMEOUT,
API_CUSTOM_CONTENT,
} from '../utils/config-constants';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../utils/input-statuses';
import 'react-markdown-editor-lite/lib/index.css';
import FormStatusIndicator from '../components/config/form-status-indicator';
const { Title } = Typography;
const mdParser = new MarkdownIt(/* Markdown-it options */);
const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
ssr: false,
});
export default function PageContentEditor() {
const [content, setContent] = useState('');
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
const [hasChanged, setHasChanged] = useState(false);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { instanceDetails } = serverConfig;
const { extraPageContent: initialContent } = instanceDetails;
let resetTimer = null;
function handleEditorChange({ text }) {
setContent(text);
if (text !== initialContent && !hasChanged) {
setHasChanged(true);
} else if (text === initialContent && hasChanged) {
setHasChanged(false);
}
}
// Clear out any validation states and messaging
const resetStates = () => {
setSubmitStatus(null);
setHasChanged(false);
clearTimeout(resetTimer);
resetTimer = null;
};
// posts all the tags at once as an array obj
async function handleSave() {
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
await postConfigUpdateToAPI({
apiPath: API_CUSTOM_CONTENT,
data: { value: content },
onSuccess: (message: string) => {
setFieldInConfigState({
fieldName: 'extraPageContent',
value: content,
path: 'instanceDetails',
});
setSubmitStatus(createInputStatus(STATUS_SUCCESS, message));
},
onError: (message: string) => {
setSubmitStatus(createInputStatus(STATUS_ERROR, message));
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
}
useEffect(() => {
setContent(initialContent);
}, [instanceDetails]);
return (
<div className="config-page-content-form">
<Title level={2}>Page Content</Title>
<p>
Edit the content of your page by using simple{' '}
<a href="https://www.markdownguide.org/basic-syntax/">Markdown syntax</a>.
</p>
<MdEditor
style={{ height: '30em' }}
value={content}
renderHTML={(c: string) => mdParser.render(c)}
onChange={handleEditorChange}
config={{
htmlClass: 'markdown-editor-preview-pane',
markdownClass: 'markdown-editor-pane',
}}
/>
<div className="page-content-actions">
{hasChanged ? (
<Button type="primary" onClick={handleSave}>
Save
</Button>
) : null}
<FormStatusIndicator status={submitStatus} />
</div>
</div>
);
}

36
web/pages/config-public-details.tsx
View File

@@ -1,26 +1,42 @@
import React from 'react';
import { Typography } from 'antd';
import Link from 'next/link';
import EditInstanceDetails from '../components/config/edit-instance-details';
import EditDirectoryDetails from '../components/config/edit-directory';
import EditInstanceTags from '../components/config/edit-tags';
import EditSocialLinks from '../components/config/edit-social-links';
import EditPageContent from '../components/config/edit-page-content';
const { Title } = Typography;
export default function PublicFacingDetails() {
return (
<>
<Title level={2}>General Settings</Title>
<p>
<div className="config-public-details-page">
<Title level={2} className="page-title">
General Settings
</Title>
<p className="description">
The following are displayed on your site to describe your stream and its content.{' '}
<a href="https://owncast.online/docs/website/">Learn more.</a>
</p>
<div className="edit-public-details-container">
<EditInstanceDetails />
<EditInstanceTags />
<EditDirectoryDetails />
<div className="top-container">
<div className="form-module instance-details-container">
<EditInstanceDetails />
</div>
<div className="form-module social-items-container ">
<div className="form-module tags-module">
<EditInstanceTags />
</div>
<div className="form-module social-handles-container">
<EditSocialLinks />
</div>
</div>
</div>
</>
<div className="form-module page-content-module">
<EditPageContent />
</div>
</div>
);
}

12
web/pages/config-server-details.tsx
View File

@@ -7,12 +7,14 @@ const { Title } = Typography;
export default function ConfigServerDetails() {
return (
<div className="config-server-details-form">
<Title level={2}>Server Settings</Title>
<p>
You should change your stream key from the default and keep it safe. For most people it's
likely the other settings will not need to be changed.
<Title level={2} className="page-title">
Server Settings
</Title>
<p className="description">
You should change your stream key from the default and keep it safe. For most people
it&apos;s likely the other settings will not need to be changed.
</p>
<div className="config-server-details-container">
<div className="form-module config-server-details-container">
<EditServerDetails />
</div>
</div>

8
web/pages/config-storage.tsx
View File

@@ -7,13 +7,15 @@ const { Title } = Typography;
export default function ConfigStorageInfo() {
return (
<>
<Title level={2}>Storage</Title>
<p>
<Title level={2} className="page-title">
Storage
</Title>
<p className="description">
Owncast supports optionally using external storage providers to distribute your video. Learn
more about this by visiting our{' '}
<a href="https://owncast.online/docs/storage/">Storage Documentation</a>.
</p>
<p>
<p className="description">
Configuring this incorrectly will likely cause your video to be unplayable. Double check the
documentation for your storage provider on how to configure the bucket you created for
Owncast.

24
web/pages/config-video.tsx
View File

@@ -9,22 +9,24 @@ const { Title } = Typography;
export default function ConfigVideoSettings() {
return (
<div className="config-video-variants">
<Title level={2}>Video configuration</Title>
<p>
<Title level={2} className="page-title">
Video configuration
</Title>
<p className="description">
Before changing your video configuration{' '}
<a href="https://owncast.online/docs/encoding">visit the video documentation</a> to learn
how it impacts your stream performance.
</p>
<p>
<VideoVariantsTable />
</p>
<br />
<hr />
<br />
<p>
<VideoLatency />
</p>
<div className="row">
<div className="form-module variants-table-module">
<VideoVariantsTable />
</div>
<div className="form-module latency-module">
<VideoLatency />
</div>
</div>
</div>
);
}