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