110 lines
3.1 KiB
JavaScript
110 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
|
|
import { Trans } from '@lingui/macro';
|
|
import Grid from '@mui/material/Grid';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
import Checkbox from '../Checkbox';
|
|
import Select from '../Select';
|
|
|
|
function init(settings) {
|
|
const initSettings = {
|
|
lhls: false,
|
|
segmentDuration: 2,
|
|
listSize: 6,
|
|
cleanup: true,
|
|
version: 3,
|
|
...settings,
|
|
};
|
|
|
|
return initSettings;
|
|
}
|
|
|
|
export default function Control(props) {
|
|
const settings = init(props.settings);
|
|
|
|
// Set the defaults
|
|
React.useEffect(() => {
|
|
props.onChange(settings, true);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
const handleChange = (what) => (event) => {
|
|
const value = event.target.value;
|
|
|
|
if (['lhls', 'cleanup'].includes(what)) {
|
|
settings[what] = !settings[what];
|
|
} else {
|
|
settings[what] = value;
|
|
}
|
|
|
|
props.onChange(settings, false);
|
|
};
|
|
return (
|
|
<Grid container spacing={2}>
|
|
{/*
|
|
lhls problems:
|
|
- naming of the manifests and media files does not work
|
|
- segmentation of audio and video creates a playback error
|
|
- hls inputs requires encoding
|
|
- have to wait for the final integration in hls.js
|
|
|
|
<Grid item xs={12}>
|
|
<Checkbox label={<Trans>Low latency Mode (LHLS/CMAF)</Trans>} checked={settings.lhls} onChange={handleChange('lhls')} />
|
|
<Typography variant="caption">
|
|
<Trans>Experimental function. Older browsers and clients may not be supported.</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
*/}
|
|
<Grid item xs={12}>
|
|
<Select label={<Trans>EXT-X-VERSION</Trans>} value={settings.version} onChange={handleChange('version')}>
|
|
<MenuItem value={3}>3</MenuItem>
|
|
<MenuItem value={6}>
|
|
<Trans>6 (+ guaranteed to start with a Key frame)</Trans>
|
|
</MenuItem>
|
|
<MenuItem value={7}>
|
|
<Trans>7 (+ fragmented MP4 format)</Trans>
|
|
</MenuItem>
|
|
</Select>
|
|
<Typography variant="caption">
|
|
<Trans>M3U8 manifest version. Version 3 has the best browser/client compatibility.</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} md={6}>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
label={<Trans>Segment length (seconds)</Trans>}
|
|
value={settings.segmentDuration}
|
|
onChange={handleChange('segmentDuration')}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>Segment will be cut on the following keyframe after this time has passed. 2 is recommended.</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12} md={6}>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
label={<Trans>List size (segments)</Trans>}
|
|
value={settings.listSize}
|
|
onChange={handleChange('listSize')}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>The maximum number of playlist segments. 0 will contain all the segments. 6 is recommended.</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Checkbox label={<Trans>Automatic cleanup of all media data</Trans>} checked={settings.cleanup} onChange={handleChange('cleanup')} />
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
Control.defaulProps = {
|
|
settings: {},
|
|
onChange: function (settings, automatic) {},
|
|
};
|