mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-23 05:14:20 +03:00
Code Issues Projects Releases Packages Wiki Activity

update video-variant-form

Browse source 
Change min and max values, update slider marks, and add more
descriptive notes for framerate and video bitrate fields.

Closes #715
This commit is contained in:
nebunez 2021-02-13 19:44:16 -05:00
parent b706b7eb2e
commit 36b286eac2
1 changed files with 50 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
web/components/config/video-variant-form.tsx
View file

@ -12,11 +12,11 @@ const { Panel } = Collapse;
const VIDEO_VARIANT_DEFAULTS = { const VIDEO_VARIANT_DEFAULTS = {
framerate: { framerate: {
min: 10, min: 24,
max: 90, max: 120,
defaultValue: 24, defaultValue: 24,
unit: 'fps', unit: 'fps',
incrementBy: 1, incrementBy: null,
tip: 'You prob wont need to touch this unless youre a hardcore gamer and need all the bitties', tip: 'You prob wont need to touch this unless youre a hardcore gamer and need all the bitties',
}, },
videoBitrate: { videoBitrate: {
@ -98,14 +98,55 @@ export default function VideoVariantForm({
const framerateMin = framerateDefaults.min; const framerateMin = framerateDefaults.min;
const framerateMax = framerateDefaults.max; const framerateMax = framerateDefaults.max;
const framerateUnit = framerateDefaults.unit; const framerateUnit = framerateDefaults.unit;
const framerateMarks = {
[framerateMin]: `${framerateMin} ${framerateUnit}`,
30: '',
60: '',
[framerateMax]: `${framerateMax} ${framerateUnit}`,
};
const videoBitrateDefaults = VIDEO_VARIANT_DEFAULTS.videoBitrate; const videoBitrateDefaults = VIDEO_VARIANT_DEFAULTS.videoBitrate;
const videoBRMin = videoBitrateDefaults.min; const videoBRMin = videoBitrateDefaults.min;
const videoBRMax = videoBitrateDefaults.max; const videoBRMax = videoBitrateDefaults.max;
const videoBRUnit = videoBitrateDefaults.unit; const videoBRUnit = videoBitrateDefaults.unit;
const videoBRMarks = {
[videoBRMin]: `${videoBRMin} ${videoBRUnit}`,
3000: 3000,
4500: 4500,
[videoBRMax]: `${videoBRMax} ${videoBRUnit}`,
};
const selectedVideoBRnote = `Selected: ${dataState.videoBitrate}${videoBRUnit} - it sucks`; const selectedVideoBRnote = () => {
const selectedFramerateNote = `Selected: ${dataState.framerate}${framerateUnit} - whoa there`; let note = `Selected: ${dataState.videoBitrate}${videoBRUnit}`;
if (dataState.videoBitrate < 3000) {
note = `${note} - Good for low bandwidth environments.`;
} else if (dataState.videoBitrate < 4500) {
note = `${note} - Good for most bandwidth environments.`;
} else {
note = `${note} - Good for high bandwidth environments.`;
}
return note;
};
const selectedFramerateNote = () => {
let note = `Selected: ${dataState.framerate}${framerateUnit}`;
switch (dataState.framerate) {
case 24:
note = `${note} - Good for film, presentations, music, low power/bandwidth servers.`;
break;
case 30:
note = `${note} - Good for slow/casual games, chat, general purpose.`;
break;
case 60:
note = `${note} - Good for fast/action games, sports, HD video.`;
break;
case 120:
note = `${note} - Experimental, use at your own risk!`;
break;
default:
note = '';
}
return note;
};
const selectedPresetNote = ''; const selectedPresetNote = '';
return ( return (
@ -163,14 +204,9 @@ export default function VideoVariantForm({
step={videoBitrateDefaults.incrementBy} step={videoBitrateDefaults.incrementBy}
min={videoBRMin} min={videoBRMin}
max={videoBRMax} max={videoBRMax}
marks={{ marks={videoBRMarks}
[videoBRMin]: `${videoBRMin} ${videoBRUnit}`,
[videoBRMax]: `${videoBRMax} ${videoBRUnit}`,
}}
/> />
{selectedVideoBRnote && ( <span className="selected-value-note">{selectedVideoBRnote()}</span>
<span className="selected-value-note">{selectedVideoBRnote}</span>
)}
</div> </div>
</div> </div>
</div> </div>
@ -214,14 +250,9 @@ export default function VideoVariantForm({
step={framerateDefaults.incrementBy} step={framerateDefaults.incrementBy}
min={framerateMin} min={framerateMin}
max={framerateMax} max={framerateMax}
marks={{ marks={framerateMarks}
[framerateMin]: `${framerateMin} ${framerateUnit}`,
[framerateMax]: `${framerateMax} ${framerateUnit}`,
}}
/> />
{selectedFramerateNote ? ( <span className="selected-value-note">{selectedFramerateNote()}</span>
<span className="selected-value-note">{selectedFramerateNote}</span>
) : null}
</div> </div>
</div> </div>
</Panel> </Panel>