53 lines
1.5 KiB
JavaScript

import React from 'react';
import { Trans } from '@lingui/macro';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Paper from '../../../misc/Paper';
import PaperHeader from '../../../misc/PaperHeader';
export default function Source(props) {
return (
<Paper xs={12} sm={9} md={6} marginBottom="6em" className="PaperM">
<PaperHeader spacing={2} variant="h1" title={<Trans>Video setup</Trans>} onAbort={props.Abort} onHelp={props.onHelp} />
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography>
<Trans>
Select whether you pull the stream from a <strong>network source</strong> (such as a network camera), the{' '}
<strong>internal RTMP server</strong> (e.g., OBS streams to the Restreamer), or use a{' '}
<strong>WebRTC Room</strong> to stream directly from a browser (screen share or camera).
</Trans>
</Typography>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12}>
<Grid container spacing={2}>
{props.sources}
</Grid>
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12}>
<Button variant="outlined" fullWidth color="default" onClick={props.onAdvanced}>
<Trans>Advanced setup</Trans>
</Button>
</Grid>
</Grid>
</Paper>
);
}
Source.defaultProps = {
onAbort: () => {},
onHelp: () => {},
onAdvanced: () => {},
sources: [],
};