45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import {__, _x, _n, _nx} from '@wordpress/i18n';
|
|
import Form from 'react-bootstrap/Form';
|
|
import Row from "react-bootstrap/Row";
|
|
import Col from "react-bootstrap/Col";
|
|
import {Badge} from "react-bootstrap";
|
|
|
|
export default function ResCheckbox({px, bitrate, settings, setSettings}) {
|
|
const resolution = px + "p";
|
|
//calculate width if 16:9 based on height
|
|
const width = Math.round(px * 16 / 9);
|
|
const label = "(" + width + "x" + px + ")";
|
|
const bitrateLabel = bitrate ? bitrate + " kbps" : "";
|
|
const hdLabel = px >= 2160 ? "4K UHD" : px >= 1440 ? "2K QHD" : px >= 1080 ? "Full HD" : px >= 720 ? "HD" : "";
|
|
const disabled = px >= 1440;
|
|
|
|
return (
|
|
<Badge bg="light" text="dark" className="mb-2 rounded-pill px-3 w-100">
|
|
<Row className="d-flex justify-content-between align-items-center">
|
|
<Col className="">
|
|
<Form.Check
|
|
className="d-flex align-items-center"
|
|
type="checkbox"
|
|
id={resolution}
|
|
label={
|
|
<span className="text-nowrap"><strong>{resolution}</strong> {label} {hdLabel}</span>
|
|
}
|
|
checked={settings.EnabledResolutions.includes(resolution)}
|
|
onChange={e => setSettings(settings => {
|
|
if (e.target.checked) {
|
|
return {...settings, EnabledResolutions: [...settings.EnabledResolutions, resolution]};
|
|
} else {
|
|
return {...settings, EnabledResolutions: settings.EnabledResolutions.filter(res => res !== resolution)};
|
|
}
|
|
})}
|
|
disabled={disabled}
|
|
/>
|
|
</Col>
|
|
<Col className="col-auto">
|
|
{bitrateLabel}
|
|
</Col>
|
|
</Row>
|
|
</Badge>
|
|
);
|
|
}
|