@ -1,11 +1,12 @@
// 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 } from 'antd' ; import { Slider , Switch , 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 InfoTip from '../info-tip' ;
import CPUUsageSelector from './cpu-usage' ; import CPUUsageSelector from './cpu-usage' ;
// import ToggleSwitch from './form-toggleswitch-with-submit';
const { Panel } = Collapse ; const { Panel } = Collapse ;
@ -55,7 +56,6 @@ const VIDEO_VARIANT_DEFAULTS = {
tip : "Optionally resize this content's height." , tip : "Optionally resize this content's height." ,
} , } ,
} ; } ;
interface VideoVariantFormProps { interface VideoVariantFormProps {
dataState : VideoVariant ; dataState : VideoVariant ;
onUpdateField : FieldUpdaterFunc ; onUpdateField : FieldUpdaterFunc ;
@ -79,6 +79,7 @@ export default function VideoVariantForm({
} ; } ;
const handleScaledWidthChanged = ( args : UpdateArgs ) = > { const handleScaledWidthChanged = ( args : UpdateArgs ) = > {
const value = Number ( args . value ) ; const value = Number ( args . value ) ;
// eslint-disable-next-line no-restricted-globals
if ( isNaN ( value ) ) { if ( isNaN ( value ) ) {
return ; return ;
} }
@ -86,6 +87,7 @@ export default function VideoVariantForm({
} ; } ;
const handleScaledHeightChanged = ( args : UpdateArgs ) = > { const handleScaledHeightChanged = ( args : UpdateArgs ) = > {
const value = Number ( args . value ) ; const value = Number ( args . value ) ;
// eslint-disable-next-line no-restricted-globals
if ( isNaN ( value ) ) { if ( isNaN ( value ) ) {
return ; return ;
} }
@ -108,124 +110,123 @@ export default function VideoVariantForm({
return ( return (
< div className = "config-variant-form" > < div className = "config-variant-form" >
< div className = "se ction-intro " > < p className = "de scrip tion" >
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 > .
< br / > < / p >
< 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 }
< / div >
< / div >
{ /* VIDEO PASSTHROUGH FIELD */ } < div className = "row" >
< div style = { { display : 'none' } } > < div >
< div className = "field" > { /* ENCODER PRESET FIELD */ }
< p className = "label" > < div className = "form-module cpu-usage-container" >
< InfoTip tip = { VIDEO_VARIANT_DEFAULTS . videoPassthrough . tip } / > < CPUUsageSelector
Use Video Passthrough ? defaultValue = { dataState . cpuUsageLevel }
< / p > onChange = { handleVideoCpuUsageLevelChange }
< div className = "form-component" >
< Switch
defaultChecked = { dataState . videoPassthrough }
checked = { dataState . videoPassthrough }
onChange = { handleVideoPassChange }
checkedChildren = "Yes"
unCheckedChildren = "No"
/ > / >
{ selectedPresetNote && (
< span className = "selected-value-note" > { selectedPresetNote } < / span >
) }
< / div > < / div >
< / div >
< / div >
{ /* VIDEO BITRATE FIELD */ } { /* VIDEO PASSTHROUGH FIELD */ }
< div className = { ` field ${ dataState . videoPassthrough ? 'disabled' : '' } ` } > < div style = { { display : 'none' } } className = "form-module" >
< p className = "label" >
< InfoTip tip = { VIDEO_VARIANT_DEFAULTS . videoBitrate . tip } / >
Video Bitrate :
< / p >
< div className = "form-component" >
< Slider
tipFormatter = { value = > ` ${ value } ${ videoBRUnit } ` }
disabled = { dataState . videoPassthrough === true }
defaultValue = { dataState . videoBitrate }
value = { dataState . videoBitrate }
onChange = { handleVideoBitrateChange }
step = { videoBitrateDefaults . incrementBy }
min = { videoBRMin }
max = { videoBRMax }
marks = { {
[ videoBRMin ] : ` ${ videoBRMin } ${ videoBRUnit } ` ,
[ videoBRMax ] : ` ${ videoBRMax } ${ videoBRUnit } ` ,
} }
/ >
{ selectedVideoBRnote ? (
< span className = "selected-value-note" > { selectedVideoBRnote } < / span >
) : null }
< / div >
< / div >
< Collapse >
< 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 >
{ /* FRAME RATE FIELD */ }
< div className = "field" >
< p className = "label" > < p className = "label" >
< InfoTip tip = { VIDEO_VARIANT_DEFAULTS . framerate . tip } / > < InfoTip tip = { VIDEO_VARIANT_DEFAULTS . videoPassthrough . tip } / >
Frame rate : Use Video Passthrough ?
< / p > < / p >
< div className = "form-component" > < 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 >
< / div >
{ /* VIDEO BITRATE FIELD */ }
< div className = { ` form-module ${ dataState . videoPassthrough ? 'disabled' : '' } ` } >
< Typography.Title level = { 3 } className = "section-title" >
Video Bitrate
< / Typography.Title >
< p className = "description" > { VIDEO_VARIANT_DEFAULTS . videoBitrate . tip } < / p >
< div className = "segment-slider-container" >
< Slider < Slider
// tooltipVisible
tipFormatter = { value = > ` ${ value } ${ videoBRUnit } ` }
tipFormatter = { value = > ` ${ value } ${ framerateUnit } ` } disabled = { dataState . videoPassthrough === true }
defaultValue = { dataState . framerate } defaultValue = { dataState . videoBitrate }
value = { dataState . framerate } value = { dataState . videoBitrate }
onChange = { handleFramerateChange } onChange = { handleVideoBitrateChange }
step = { framerateDefaults . incrementBy } step = { videoBitrateDefaults . incrementBy }
min = { framerateMin } min = { videoBRMin }
max = { framerateMax } max = { videoBRMax }
marks = { { marks = { {
[ framerateMin ] : ` ${ framerateMin } ${ framerateUnit } ` , [ videoBRMin ] : ` ${ videoBRMin } ${ videoBRUnit } ` ,
[ framerateMax ] : ` ${ framerateMax } ${ framerateUnit } ` , [ videoBRMax ] : ` ${ videoBRMax } ${ videoBRUnit } ` ,
} } } }
/ > / >
{ selectedFramerateNote ? ( { selectedVideoBRnote && (
< span className = "selected-value-note" > { selectedFramerateNote } < / span > < span className = "selected-value-note" > { selectedVideoBRnote } < / span >
) : null } ) }
< / div > < / div >
< / div > < / div >
< / Panel > < / div >
< / Collapse > < 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 >
{ /* 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 = { {
[ framerateMin ] : ` ${ framerateMin } ${ framerateUnit } ` ,
[ framerateMax ] : ` ${ framerateMax } ${ framerateUnit } ` ,
} }
/ >
{ selectedFramerateNote ? (
< span className = "selected-value-note" > { selectedFramerateNote } < / span >
) : null }
< / div >
< / div >
< / Panel >
< / Collapse >
< / div >
< / div > < / div >
) ; ) ;
} }
gingervitis
5 years ago
committed by
GitHub