Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up video config forms and styling

Browse Source
This commit is contained in:
gingervitis 2021-02-14 18:46:34 -08:00
parent c5d4851296
commit 220c48432f
8 changed files with 149 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/config/cpu-usage.tsx
View File

@ -44,15 +44,11 @@ export default function CPUUsageSelector({ defaultValue, onChange }: Props) {
};
return (
<div className="config-video-segements-conatiner">
<Title level={3} className="section-title">
CPU Usage
</Title>
<div className="config-video-cpu-container">
<Title level={3}>CPU Usage</Title>
<p className="description">
There are trade-offs when considering CPU usage blah blah more wording here.
</p>
<br />
<div className="segment-slider-container">
<Slider
tipFormatter={value => TOOLTIPS[value]}

2
web/components/config/video-latency.tsx
View File

@ -104,7 +104,7 @@ export default function VideoLatency() {
};
return (
<div className="config-video-segements-conatiner">
<div className="config-video-latency-container">
<Title level={3} className="section-title">
Latency Buffer
</Title>

142
web/components/config/video-variant-form.tsx
View File

@ -1,11 +1,11 @@
// This content populates the video variant modal, which is spawned from the variants table.
import React from 'react';
import { Slider, Switch, Collapse, Typography } from 'antd';
import { Row, Col, Slider, Collapse, Typography } from 'antd';
import { FieldUpdaterFunc, VideoVariant, UpdateArgs } from '../../types/config-section';
import TextField from './form-textfield';
import { DEFAULT_VARIANT_STATE } from '../../utils/config-constants';
import InfoTip from '../info-tip';
import CPUUsageSelector from './cpu-usage';
import ToggleSwitch from './form-toggleswitch';
const { Panel } = Collapse;
@ -146,52 +146,45 @@ export default function VideoVariantForm({
}
return note;
};
const selectedPresetNote = '';
return (
<div className="config-variant-form">
<p className="description">
Say a thing here about how this all works. Read more{' '}
<a href="https://owncast.online/docs/configuration/">here</a>.
<a href="https://owncast.online/docs/configuration/">here</a>. Click the OK button below to
save your information.
</p>
<div className="row">
<div>
<Row gutter={16}>
<Col xs={12} xl={12}>
{/* ENCODER PRESET FIELD */}
<div className="form-module cpu-usage-container">
<CPUUsageSelector
defaultValue={dataState.cpuUsageLevel}
onChange={handleVideoCpuUsageLevelChange}
/>
{selectedPresetNote && (
<span className="selected-value-note">{selectedPresetNote}</span>
)}
</div>
{/* VIDEO PASSTHROUGH FIELD */}
{/* VIDEO PASSTHROUGH FIELD - currently disabled */}
<div style={{ display: 'none' }} className="form-module">
<p className="label">
<InfoTip tip={VIDEO_VARIANT_DEFAULTS.videoPassthrough.tip} />
Use Video Passthrough?
</p>
<div className="form-component">
{/* todo: change to ToggleSwitch for layout */}
<Switch
defaultChecked={dataState.videoPassthrough}
checked={dataState.videoPassthrough}
onChange={handleVideoPassChange}
// label="Use Video Passthrough"
checkedChildren="Yes"
unCheckedChildren="No"
/>
</div>
<ToggleSwitch
label="Use Video Passthrough?"
fieldName="video-passthrough"
tip={VIDEO_VARIANT_DEFAULTS.videoPassthrough.tip}
checked={dataState.videoPassthrough}
onChange={handleVideoPassChange}
/>
</div>
</Col>
<Col xs={12} xl={12}>
{/* VIDEO BITRATE FIELD */}
<div className={`form-module ${dataState.videoPassthrough ? 'disabled' : ''}`}>
<Typography.Title level={3} className="section-title">
Video Bitrate
</Typography.Title>
<div
className={`form-module bitrate-container ${
dataState.videoPassthrough ? 'disabled' : ''
}`}
>
<Typography.Title level={3}>Video Bitrate</Typography.Title>
<p className="description">{VIDEO_VARIANT_DEFAULTS.videoBitrate.tip}</p>
<div className="segment-slider-container">
<Slider
@ -205,58 +198,53 @@ export default function VideoVariantForm({
max={videoBRMax}
marks={videoBRMarks}
/>
<span className="selected-value-note">{selectedVideoBRnote()}</span>
<p className="selected-value-note">{selectedVideoBRnote()}</p>
</div>
</div>
</div>
<Collapse className="advanced-settings">
<Panel header="Advanced Settings" key="1">
<div className="section-intro">
Resizing your content will take additional resources on your server. If you wish to
optionally resize your output for this stream variant then you should either set the
width <strong>or</strong> the height to keep your aspect ratio.
</div>
<div className="field">
<TextField
type="number"
{...VIDEO_VARIANT_DEFAULTS.scaledWidth}
value={dataState.scaledWidth}
onChange={handleScaledWidthChanged}
/>
</div>
<div className="field">
<TextField
type="number"
{...VIDEO_VARIANT_DEFAULTS.scaledHeight}
value={dataState.scaledHeight}
onChange={handleScaledHeightChanged}
/>
</div>
</Col>
</Row>
<Collapse className="advanced-settings">
<Panel header="Advanced Settings" key="1">
<p className="description">
Resizing your content will take additional resources on your server. If you wish to
optionally resize your output for this stream variant then you should either set the
width <strong>or</strong> the height to keep your aspect ratio.
</p>
{/* FRAME RATE FIELD */}
<div className="field">
<p className="label">
<InfoTip tip={VIDEO_VARIANT_DEFAULTS.framerate.tip} />
Frame rate:
</p>
<div className="segment-slider-container form-component">
<Slider
// tooltipVisible
tipFormatter={value => `${value} ${framerateUnit}`}
defaultValue={dataState.framerate}
value={dataState.framerate}
onChange={handleFramerateChange}
step={framerateDefaults.incrementBy}
min={framerateMin}
max={framerateMax}
marks={framerateMarks}
/>
<span className="selected-value-note">{selectedFramerateNote()}</span>
</div>
<TextField
type="number"
{...VIDEO_VARIANT_DEFAULTS.scaledWidth}
value={dataState.scaledWidth}
onChange={handleScaledWidthChanged}
/>
<TextField
type="number"
{...VIDEO_VARIANT_DEFAULTS.scaledHeight}
value={dataState.scaledHeight}
onChange={handleScaledHeightChanged}
/>
{/* FRAME RATE FIELD */}
<div className="form-module frame-rate">
<Typography.Title level={3}>Frame rate</Typography.Title>
<p className="description">{VIDEO_VARIANT_DEFAULTS.framerate.tip}</p>
<div className="segment-slider-container">
<Slider
// tooltipVisible
tipFormatter={value => `${value} ${framerateUnit}`}
defaultValue={dataState.framerate}
value={dataState.framerate}
onChange={handleFramerateChange}
step={framerateDefaults.incrementBy}
min={framerateMin}
max={framerateMax}
marks={framerateMarks}
/>
<p className="selected-value-note">{selectedFramerateNote()}</p>
</div>
</Panel>
</Collapse>
</div>
</div>
</Panel>
</Collapse>
</div>
);
}

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

@ -1,5 +1,5 @@
import React from 'react';
import { Typography } from 'antd';
import { Typography, Row, Col } from 'antd';
import VideoVariantsTable from '../components/config/video-variants-table';
import VideoLatency from '../components/config/video-latency';
@ -16,15 +16,18 @@ export default function ConfigVideoSettings() {
how it impacts your stream performance.
</p>
<div className="row">
<div className="form-module variants-table-module">
<VideoVariantsTable />
</div>
<div className="form-module latency-module">
<VideoLatency />
</div>
</div>
<Row gutter={16}>
<Col lg={12}>
<div className="form-module variants-table-module">
<VideoVariantsTable />
</div>
</Col>
<Col lg={12}>
<div className="form-module latency-module">
<VideoLatency />
</div>
</Col>
</Row>
</div>
);
}

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

@ -54,6 +54,9 @@ h5.ant-typography,
h1.ant-typography {
font-size: 1.75em;
color: var(--pink);
&:first-of-type {
margin-top: 0;
}
}
.ant-typography h2,
h2.ant-typography {
@ -253,13 +256,13 @@ textarea.ant-input {
// ANT BUTTON
.ant-btn {
background-color: var(--purple-dark);
border-color: var(--white-25);
background-color: var(--owncast-purple-25);
border-color: var(--owncast-purple-25);
color: var(--white-75);
&:hover,
&:focus {
background-color: var(--owncast-purple);
border-color: var(--owncast-purple);
background-color: var(--button-focused);
border-color: var(--button-focused);
color: var(--white);
}
}
@ -308,12 +311,13 @@ textarea.ant-input {
}
.ant-table-tbody > tr > td {
transition-duration: var(--ant-transition-duration);
background-color: #141417;
background-color: #222325;
color: var(--white-75);
}
.ant-table-tbody > tr:nth-child(odd) > td {
background-color: #222325;
.ant-table-tbody > tr.ant-table-row:hover > td {
background-color: var(--gray-dark);
}
.ant-empty {
color: var(--white-75);
}
@ -335,6 +339,10 @@ textarea.ant-input {
// MODAL
.ant-modal,
.ant-modal-body {
font-size: 1em;
}
.ant-modal-content {
border-radius: var(--container-border-radius);
border: 1px solid var(--owncast-purple);
@ -362,7 +370,7 @@ textarea.ant-input {
.ant-modal-content,
.ant-modal-header,
.ant-modal-footer {
border-color: var(--gray);
border-color: var(--white-50);
}
// SELECT
@ -378,6 +386,23 @@ textarea.ant-input {
.ant-slider-mark-text {
font-size: .85em;
white-space: nowrap;
color: var(--white);
opacity: .5;
}
.ant-slider-handle {
border-color: var(--blue);
}
.ant-slider:hover .ant-slider-track {
background-color: var(--blue);
}
.ant-slider-rail {
background-color: var(--black);
}
.ant-slider-track {
background-color: var(--nav-text);
}
.ant-slider-mark-text-active {
opacity: 1;
}
// ANT SWITCH
@ -394,6 +419,7 @@ textarea.ant-input {
// ANT COLLAPSE
.ant-collapse {
font-size: 1em;
border-color: transparent;
&> .ant-collapse-item,
.ant-collapse-content {
@ -410,13 +436,16 @@ textarea.ant-input {
.ant-collapse-content {
background-color: var(--black-35); //#181231;
}
.ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
border-radius: var(--container-border-radius) var(--container-border-radius) 0 0;
}
.ant-collapse-item:last-child > .ant-collapse-content {
border-radius: 0 0 var(--container-border-radius) var(--container-border-radius);
}
// ANT POPOVER
.ant-popover {
}
.ant-popover-inner {
background-color: var(--black);
}

85
web/styles/config-video-variants.scss
View File

@ -7,9 +7,7 @@
}
.variants-table-module {
min-width: 48%;
max-width: 600px;
margin-right: 1em
min-width: 400px;
}
}
@ -20,80 +18,13 @@
margin-top: 0;
}
.cpu-usage-container,
.bitrate-container {
height: 20em;
}
.advanced-settings {
width: 48%;
margin-left: 2em;
}
.blurb {
margin: 1em;
opacity: .75;
}
.note {
display: inline-block;
margin-left: 1em;
font-size: .75em;
opacity: .5;
font-style: italic;
}
// .field {
// margin-bottom: 2em;
// display: flex;
// flex-direction: row;
// justify-content: center;
// align-items: flex-start;
// transform: opacity .15s;
// &.disabled {
// opacity: .25;
// }
// .label {
// width: 40%;
// text-align: right;
// padding-right: 2em;
// font-weight: bold;
// color: var(--owncast-purple);
// }
// .info-tip {
// margin-right: 1em;
// }
// .form-component {
// width: 60%;
// .selected-value-note {
// font-size: .85em;
// display: inline-block;
// text-align: center;
// }
// }
// }
// .ant-collapse {
// border: none;
// border-radius: 6px;
// }
// .ant-collapse > .ant-collapse-item:last-child,
// .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
// border: none;
// background-color: rgba(0,0,0,.25);
// border-radius: 6px;
// }
// .ant-collapse-content {
// background-color: rgba(0,0,0,.1);
// }
}
.config-video-segements-conatiner {
// display: flex;
// flex-direction: row;
// justify-content: center;
// align-items: flex-start;
.status-message {
text-align: center;
margin-top: 1em;
}
}
@ -109,7 +40,3 @@
opacity: .8;
}
}
.advanced-settings {
margin-top: 2em;
}

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

@ -42,32 +42,31 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
}
/* SEGMENT SLIDER */
/* SEGMENT SLIDER GROUP WITH SELECTED NOTE, OR STATUS */
.segment-slider-container {
width: 90%;
width: 100%;
margin: auto;
padding: 1em 2em .75em;
background-color: var(--owncast-purple-25);
border-radius: 1em;
.ant-slider-rail {
background-color: var(--black);
}
.ant-slider-track {
background-color: var(--nav-text);
}
.ant-slider-mark-text,
.ant-slider-mark-text-active {
color: var(--white);
opacity: .5;
}
.ant-slider-mark-text-active {
opacity: 1;
}
border-radius: var(--container-border-radius);
.status-container {
width: 100%;
margin: .5em auto;
text-align: center;
}
.selected-value-note {
width: 100%;
margin: 3em auto 0;
text-align: center;
font-size: .75em;
line-height: normal;
color: var(--white);
padding: 1em;
border-radius: var(--container-border-radius);
background-color: var(--black-35);
}
}

6
web/styles/globals.scss
View File

@ -72,6 +72,12 @@ code {
background-color: var(--container-bg-color);
padding: 2em;
border-radius: var(--container-border-radius);
h3 {
&:first-of-type {
margin-top: 0;
}
}
}
.row {