feat: add WHEP control, WHEPStatus badge, Wild Dragon Logo components: WHEP.js

overlay/src/misc/controls/WHEP.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Trans } from '@lingui/macro';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+
+import Checkbox from '../Checkbox';
+
+function init(settings) {
+	return { enable: false, ...settings };
+}
+
+export default function Control(props) {
+	const settings = init(props.settings);
+
+	React.useEffect(() => {
+		props.onChange(settings, true);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const handleChange = (what) => () => {
+		if (what === 'enable') {
+			settings[what] = !settings[what];
+		}
+		props.onChange(settings, false);
+	};
+
+	return (
+		<Grid container spacing={2}>
+			<Grid item xs={12}>
+				<Checkbox
+					label={<Trans>Enable</Trans>}
+					checked={settings.enable}
+					onChange={handleChange('enable')}
+				/>
+				<Typography variant="caption">
+					<Trans>Make the channel available as a low-latency WebRTC stream via WHEP.</Trans>
+				</Typography>
+			</Grid>
+		</Grid>
+	);
+}
+
+Control.defaultProps = {
+	settings: {},
+	onChange: function (settings, automatic) {},
+};