LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Use a single setting

Browse source
This commit is contained in:
Rafael 2022-04-22 08:11:24 -03:00 • committed by Thomas Zarebczan
parent f4567a8984
commit 14fc7bae50
1 changed files with 21 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
ui/component/settingDefaultQuality/view.jsx
View file

@ -4,6 +4,8 @@ import { FormField } from 'component/common/form';
import { VIDEO_QUALITY_OPTIONS } from 'constants/player'; import { VIDEO_QUALITY_OPTIONS } from 'constants/player';
import { toCapitalCase } from 'util/string'; import { toCapitalCase } from 'util/string';
const OPTION_DISABLED = 'Disabled';
type Props = { type Props = {
defaultQuality: ?string, defaultQuality: ?string,
doSetDefaultVideoQuality: (value: ?string) => void, doSetDefaultVideoQuality: (value: ?string) => void,
@ -12,60 +14,32 @@ type Props = {
export default function SettingDefaultQuality(props: Props) { export default function SettingDefaultQuality(props: Props) {
const { defaultQuality, doSetDefaultVideoQuality } = props; const { defaultQuality, doSetDefaultVideoQuality } = props;
const [enabled, setEnabled] = React.useState<boolean>(Boolean(defaultQuality)); const valueRef = React.useRef();
const dropdownOptions = [OPTION_DISABLED, ...VIDEO_QUALITY_OPTIONS];
const valueRef = React.useRef(VIDEO_QUALITY_OPTIONS[0]);
function handleEnable() {
if (enabled) {
setEnabled(false);
// From enabled to disabled -> clear the setting
valueRef.current = defaultQuality;
doSetDefaultVideoQuality(null);
} else {
setEnabled(true);
// From to disabled to enabled -> set the current shown value
doSetDefaultVideoQuality(valueRef.current);
}
}
function handleSetQuality(e) { function handleSetQuality(e) {
const { value } = e.target; const { value } = e.target;
doSetDefaultVideoQuality(value);
doSetDefaultVideoQuality(value === OPTION_DISABLED ? null : value);
valueRef.current = value; valueRef.current = value;
} }
return ( return (
<> <FormField
<fieldset-section> name="default_video_quality"
<FormField type="select"
name="default_video_quality" onChange={handleSetQuality}
type="select" value={defaultQuality || valueRef.current}
onChange={handleSetQuality} >
disabled={!enabled} {dropdownOptions.map((option) => {
value={defaultQuality || valueRef.current} const qualityStr = typeof option === 'number' ? option + 'p' : toCapitalCase(option);
>
{VIDEO_QUALITY_OPTIONS.map((quality) => {
const qualityStr = typeof quality === 'number' ? quality + 'p' : toCapitalCase(quality);
return ( return (
<option key={'quality' + qualityStr} value={quality}> <option key={'quality' + qualityStr} value={option}>
{__(qualityStr)} {__(qualityStr)}
</option> </option>
); );
})} })}
</FormField> </FormField>
</fieldset-section>
<fieldset-section>
<FormField
type="checkbox"
name="enable_default_quality"
onChange={handleEnable}
checked={enabled}
label={__('Enable default quality setting')}
/>
</fieldset-section>
</>
); );
} }