LogalDeveloper/owncast
0
Fork 0
Code Activity

misc cleanup

Browse Source
This commit is contained in:
gingervitis
2021-02-14 01:30:42 -08:00
parent 44cef18a00
commit d55e4dfe29
19 changed files with 116 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/config/edit-page-content.tsx
View File

@@ -104,13 +104,13 @@ export default function EditPageContent() {
markdownClass: 'markdown-editor-pane', markdownClass: 'markdown-editor-pane',
}} }}
/> />
<br />
<div className="page-content-actions"> <div className="page-content-actions">
{hasChanged ? ( {hasChanged && (
<Button type="primary" onClick={handleSave}> <Button type="primary" onClick={handleSave}>
Save Save
</Button> </Button>
) : null} )}
<FormStatusIndicator status={submitStatus} /> <FormStatusIndicator status={submitStatus} />
</div> </div>
</div> </div>

2
web/pages/_app.tsx
View File

@@ -17,7 +17,7 @@ import '../styles/config-public-details.scss';
import '../styles/home.scss'; import '../styles/home.scss';
import '../styles/chat.scss'; import '../styles/chat.scss';
import '../styles/config.scss'; import '../styles/pages.scss';
import { AppProps } from 'next/app'; import { AppProps } from 'next/app';
import ServerStatusProvider from '../utils/server-status-context'; import ServerStatusProvider from '../utils/server-status-context';

14
web/pages/access-tokens.tsx
View File

@@ -1,12 +1,13 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd'; import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons';
const { Title, Paragraph, Text } = Typography;
import format from 'date-fns/format'; import format from 'date-fns/format';
import { fetchData, ACCESS_TOKENS, DELETE_ACCESS_TOKEN, CREATE_ACCESS_TOKEN } from '../utils/apis'; import { fetchData, ACCESS_TOKENS, DELETE_ACCESS_TOKEN, CREATE_ACCESS_TOKEN } from '../utils/apis';
const { Title, Paragraph } = Typography;
const availableScopes = { const availableScopes = {
CAN_SEND_SYSTEM_MESSAGES: { CAN_SEND_SYSTEM_MESSAGES: {
name: 'System messages', name: 'System messages',
@@ -87,9 +88,12 @@ function NewTokenModal(props) {
Select the permissions this access token will have. It cannot be edited after it's created. Select the permissions this access token will have. It cannot be edited after it's created.
</p> </p>
<Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} /> <Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} />
<Button type="text" size="small" onClick={selectAll}>
<p>
<Button type="primary" onClick={selectAll}>
Select all Select all
</Button> </Button>
</p>
</Modal> </Modal>
); );
} }
@@ -162,7 +166,7 @@ export default function AccessTokens() {
try { try {
const result = await fetchData(DELETE_ACCESS_TOKEN, { const result = await fetchData(DELETE_ACCESS_TOKEN, {
method: 'POST', method: 'POST',
data: { token: token }, data: { token },
}); });
getAccessTokens(); getAccessTokens();
} catch (error) { } catch (error) {
@@ -174,7 +178,7 @@ export default function AccessTokens() {
try { try {
const newToken = await fetchData(CREATE_ACCESS_TOKEN, { const newToken = await fetchData(CREATE_ACCESS_TOKEN, {
method: 'POST', method: 'POST',
data: { name: name, scopes: scopes }, data: { name, scopes },
}); });
setTokens(tokens.concat(newToken)); setTokens(tokens.concat(newToken));
} catch (error) { } catch (error) {

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

@@ -11,9 +11,7 @@ const { Title } = Typography;
export default function PublicFacingDetails() { export default function PublicFacingDetails() {
return ( return (
<div className="config-public-details-page"> <div className="config-public-details-page">
<Title level={2} className="page-title"> <Title>General Settings</Title>
General Settings
</Title>
<p className="description"> <p className="description">
The following are displayed on your site to describe your stream and its content.{' '} The following are displayed on your site to describe your stream and its content.{' '}
<a href="https://owncast.online/docs/website/">Learn more.</a> <a href="https://owncast.online/docs/website/">Learn more.</a>

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

@@ -7,7 +7,7 @@ const { Title } = Typography;
export default function ConfigServerDetails() { export default function ConfigServerDetails() {
return ( return (
<div className="config-server-details-form"> <div className="config-server-details-form">
<Title level={2} className="page-title"> <Title>
Server Settings Server Settings
</Title> </Title>
<p className="description"> <p className="description">

2
web/pages/config-social-items.tsx
View File

@@ -7,7 +7,7 @@ const { Title } = Typography;
export default function ConfigSocialThings() { export default function ConfigSocialThings() {
return ( return (
<div className="config-social-items"> <div className="config-social-items">
<Title level={2}>Social Items</Title> <Title>Social Items</Title>
<EditSocialLinks /> <EditSocialLinks />
</div> </div>

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

@@ -7,7 +7,7 @@ const { Title } = Typography;
export default function ConfigStorageInfo() { export default function ConfigStorageInfo() {
return ( return (
<> <>
<Title level={2} className="page-title"> <Title>
Storage Storage
</Title> </Title>
<p className="description"> <p className="description">

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

@@ -9,9 +9,7 @@ const { Title } = Typography;
export default function ConfigVideoSettings() { export default function ConfigVideoSettings() {
return ( return (
<div className="config-video-variants"> <div className="config-video-variants">
<Title level={2} className="page-title"> <Title>Video configuration</Title>
Video configuration
</Title>
<p className="description"> <p className="description">
Before changing your video configuration{' '} Before changing your video configuration{' '}
<a href="https://owncast.online/docs/encoding">visit the video documentation</a> to learn <a href="https://owncast.online/docs/encoding">visit the video documentation</a> to learn

9
web/pages/help.tsx
View File

@@ -2,9 +2,7 @@ import { Button, Card, Col, Divider, Result, Row } from 'antd';
import Meta from 'antd/lib/card/Meta'; import Meta from 'antd/lib/card/Meta';
import Title from 'antd/lib/typography/Title'; import Title from 'antd/lib/typography/Title';
import { import {
AlertOutlined,
ApiTwoTone, ApiTwoTone,
BookOutlined,
BugTwoTone, BugTwoTone,
CameraTwoTone, CameraTwoTone,
DatabaseTwoTone, DatabaseTwoTone,
@@ -17,9 +15,10 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import React from 'react'; import React from 'react';
interface Props {}
export default function Help(props: Props) {
export default function Help() {
const questions = [ const questions = [
{ {
icon: <SettingTwoTone style={{ fontSize: '24px' }} />, icon: <SettingTwoTone style={{ fontSize: '24px' }} />,
@@ -144,7 +143,7 @@ export default function Help(props: Props) {
]; ];
return ( return (
<div> <div className="help-page">
<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"> <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' }}>

41
web/pages/upgrade.tsx
View File

@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react';
import ReactMarkdown from "react-markdown"; import ReactMarkdown from 'react-markdown';
import { Table, Typography } from "antd"; import { Table, Typography } from 'antd';
import { getGithubRelease } from "../utils/apis"; import { getGithubRelease } from '../utils/apis';
const { Title } = Typography; const { Title } = Typography;
@@ -10,32 +10,29 @@ function AssetTable(assets) {
const columns = [ const columns = [
{ {
title: "Name", title: 'Name',
dataIndex: "name", dataIndex: 'name',
key: "name", key: 'name',
render: (text, entry) => render: (text, entry) => <a href={entry.browser_download_url}>{text}</a>,
<a href={entry.browser_download_url}>{text}</a>,
}, },
{ {
title: "Size", title: 'Size',
dataIndex: "size", dataIndex: 'size',
key: "size", key: 'size',
render: (text) => (`${(text/1024/1024).toFixed(2)} MB`), render: text => `${(text / 1024 / 1024).toFixed(2)} MB`,
}, },
]; ];
return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} /> return <Table dataSource={data} columns={columns} rowKey="id" size="large" pagination={false} />;
} }
export default function Logs() { export default function Logs() {
const [release, setRelease] = useState({ const [release, setRelease] = useState({
html_url: "", html_url: '',
name: "", name: '',
created_at: null, created_at: null,
body: "", body: '',
assets: [], assets: [],
}); });
const getRelease = async () => { const getRelease = async () => {
@@ -43,7 +40,7 @@ export default function Logs() {
const result = await getGithubRelease(); const result = await getGithubRelease();
setRelease(result); setRelease(result);
} catch (error) { } catch (error) {
console.log("==== error", error); console.log('==== error', error);
} }
}; };
@@ -61,9 +58,9 @@ export default function Logs() {
<a href={release.html_url}>{release.name}</a> <a href={release.html_url}>{release.name}</a>
</Title> </Title>
<Title level={5}>{new Date(release.created_at).toDateString()}</Title> <Title level={5}>{new Date(release.created_at).toDateString()}</Title>
<ReactMarkdown>{release.body}</ReactMarkdown><h3>Downloads</h3> <ReactMarkdown>{release.body}</ReactMarkdown>
<h3>Downloads</h3>
<AssetTable {...release.assets} /> <AssetTable {...release.assets} />
</div> </div>
); );
} }

1
web/pages/viewer-info.tsx
View File

@@ -114,6 +114,7 @@ export default function ViewersOverTime() {
prefix={<UserOutlined />} prefix={<UserOutlined />}
/> />
</Row> </Row>
<Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" /> <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
{online && <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />} {online && <Table dataSource={clients} columns={columns} rowKey={row => row.clientID} />}
</div> </div>

25
web/pages/webhooks.tsx
View File

@@ -1,24 +1,12 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
Table, import { DeleteOutlined } from '@ant-design/icons';
Tag,
Space,
Button,
Modal,
Checkbox,
Input,
Typography,
Tooltip,
Select,
} from 'antd';
import { DeleteOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons';
import { isValidUrl } from '../utils/urls'; import { isValidUrl } from '../utils/urls';
const { Title, Paragraph, Text } = Typography;
const { Option } = Select;
import { fetchData, DELETE_WEBHOOK, CREATE_WEBHOOK, WEBHOOKS } from '../utils/apis'; import { fetchData, DELETE_WEBHOOK, CREATE_WEBHOOK, WEBHOOKS } from '../utils/apis';
const { Title, Paragraph } = Typography;
const availableEvents = { const availableEvents = {
CHAT: { name: 'Chat messages', description: 'When a user sends a chat message', color: 'purple' }, CHAT: { name: 'Chat messages', description: 'When a user sends a chat message', color: 'purple' },
USER_JOINED: { name: 'User joined', description: 'When a user joins the chat', color: 'green' }, USER_JOINED: { name: 'User joined', description: 'When a user joins the chat', color: 'green' },
@@ -96,9 +84,12 @@ function NewWebhookModal(props) {
<p>Select the events that will be sent to this webhook.</p> <p>Select the events that will be sent to this webhook.</p>
<Checkbox.Group options={events} value={selectedEvents} onChange={onChange} /> <Checkbox.Group options={events} value={selectedEvents} onChange={onChange} />
<Button type="text" size="small" onClick={selectAll}>
<p>
<Button type="primary" onClick={selectAll}>
Select all Select all
</Button> </Button>
</p>
</Modal> </Modal>
); );
} }

44
web/styles/ant-overrides.scss
View File

@@ -36,25 +36,36 @@ h5.ant-typography,
.ant-typography h4, .ant-typography h4,
.ant-typography h5 { .ant-typography h5 {
color: var(--white); color: var(--white);
font-weight: 500; font-weight: 400;
margin: .5em 0;
} }
.ant-typography.ant-typography-secondary { .ant-typography.ant-typography-secondary {
color: var(--white); color: var(--white);
font-weight: 400; font-weight: 400;
} }
.ant-typography { .ant-typography {
font-weight: 300;
color: var(--white-75);
a { a {
color: var(--owncast-purple); color: var(--owncast-purple);
} }
} }
.ant-typography h1, .ant-typography h1,
h1.ant-typography { h1.ant-typography {
color: var(--white); font-size: 1.75em;
}
.ant-typography h2,
h2.ant-typography{
color: var(--pink); color: var(--pink);
} }
.ant-typography h2,
h2.ant-typography {
font-size: 1.5em;
}
.ant-typography h3,
h3.ant-typography {
font-size: 1.25em;
}
.ant-progress-text, .ant-progress-text,
@@ -184,6 +195,15 @@ h2.ant-typography{
// ANT INPUT // ANT INPUT
input.ant-input,
textarea.ant-input {
background-color: var(--textfield-bg);
color: var(--white-88);
border-color: var(--black);
&::placeholder {
color: var(--owncast-purple-50);
}
}
.ant-input-affix-wrapper, .ant-input-affix-wrapper,
.ant-input-number { .ant-input-number {
background-color: var(--textfield-bg); background-color: var(--textfield-bg);
@@ -201,6 +221,7 @@ h2.ant-typography{
} }
} }
} }
.ant-input:hover,
.ant-input-number:hover, .ant-input-number:hover,
.ant-input-affix-wrapper:hover { .ant-input-affix-wrapper:hover {
border-color: var(--owncast-purple); border-color: var(--owncast-purple);
@@ -209,6 +230,7 @@ h2.ant-typography{
border-color: var(--owncast-purple); border-color: var(--owncast-purple);
} }
} }
.ant-input,
.ant-input-number:focus, .ant-input-number:focus,
.ant-input-affix-wrapper:focus, .ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused { .ant-input-affix-wrapper-focused {
@@ -422,3 +444,15 @@ textarea.ant-input {
} }
} }
} }
// ANT CHECKBOX
.ant-checkbox-wrapper {
color: var(--white-75);
margin: .5em 0;
}
.ant-checkbox-group {
.ant-checkbox-group-item {
display: block;
}
}

29
web/styles/config.scss
View File

@@ -1,29 +0,0 @@
// todo: put these somewhere else
.edit-page-content {
.page-content-actions {
margin-top: 1em;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.status-message {
margin-left: 1em;
}
}
}
.segment-tip {
width: 10em;
text-align: center;
margin: auto;
display: inline-block;
}

5
web/styles/form-misc-elements.scss
View File

@@ -39,9 +39,6 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
*/ */
.field-container { .field-container {
padding: .85em 0 .5em; padding: .85em 0 .5em;
// &:nth-child(even) {
// background-color: rgba(0,0,0,.25);
// }
} }
@@ -50,7 +47,7 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
width: 90%; width: 90%;
margin: auto; margin: auto;
padding: 1em 2em .75em; padding: 1em 2em .75em;
background-color: var(--black-35); background-color: var(--owncast-purple-25);
border-radius: 1em; border-radius: 1em;
.ant-slider-rail { .ant-slider-rail {
background-color: var(--black); background-color: var(--black);

24
web/styles/globals.scss
View File

@@ -25,8 +25,12 @@ a {
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
p {
p,
p.description,
.ant-typography {
font-weight: 300; font-weight: 300;
margin: 1em 0;
color: var(--white-75); color: var(--white-75);
} }
pre { pre {
@@ -52,10 +56,7 @@ code {
width: 2rem; width: 2rem;
} }
p.description {
margin: 1em 0;
color: var(--white-75);
}
.line-chart-container { .line-chart-container {
@@ -64,18 +65,7 @@ p.description {
border: 1px solid var(--gray-dark); border: 1px solid var(--gray-dark);
} }
h2.ant-typography.page-title,
h3.ant-typography.page-title
{
font-weight: 400;
font-size: 1.5em;
color: var(--nav-selected-text);
}
h2.section-title,
h3.section-title {
font-weight: 400;
font-size: 1.25em;
}
.form-module { .form-module {
margin: 1em 0; margin: 1em 0;

2
web/styles/main-layout.scss
View File

@@ -50,7 +50,7 @@
.main-content-container { .main-content-container {
padding: 3em; padding: 2em 3em 3em;
} }
.footer-container { .footer-container {

13
web/styles/pages.scss Normal file
View File

@@ -0,0 +1,13 @@
// misc styling for various /pages
.help-page {
.ant-result-image {
height: 100px;
svg {
height: 100%;
width: 100%;
}
}
}

2
web/styles/variables.scss
View File

@@ -1,5 +1,3 @@
// rename to variables.scss
:root { :root {
// colors // colors
--white: rgba(255,255,255,1); --white: rgba(255,255,255,1);