neoris/restreamer-ui-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mod uses params instead of defaultProps

Browse Source
This commit is contained in:
Jan Stabenow 2024-09-26 08:34:06 +02:00
parent 2ecf252a57
commit ee50071c8d
211 changed files with 2221 additions and 3654 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/Footer.js
View File

@ -67,7 +67,11 @@ const useStyles = makeStyles((theme) => ({
},
}));
function Resources(props) {
function Resources({
getResources = () => {
return null;
},
}) {
const classes = useStyles();
const [$popover, setPopover] = React.useState(null);
const [$resources, setResources] = React.useState(null);
@ -94,7 +98,7 @@ function Resources(props) {
}, []);
const update = async () => {
const resources = await props.resources();
const resources = await getResources();
if (resources === null) {
return;
}
@ -347,12 +351,6 @@ function Resources(props) {
);
}
Resources.defaultProps = {
resources: () => {
return null;
},
};
const initVersion = (initialVersion) => {
if (!initialVersion) {
initialVersion = {};
@ -367,11 +365,18 @@ const initVersion = (initialVersion) => {
return version;
};
export default function Footer(props) {
export default function Footer({
expand = false,
app = '',
name = '',
version = initVersion(),
getResources = () => {
return null;
},
}) {
const classes = useStyles();
const version = initVersion(props.version);
if (props.expand === true) {
if (expand === true) {
return (
<Grid container className={classes.footer} spacing={0} direction="row" alignItems="center">
<Grid item xs={12}>
@ -379,10 +384,10 @@ export default function Footer(props) {
<Stack className="footerLeft" direction="row" alignItems="center" spacing={0}>
<Logo className={classes.logo} />
<Typography className="footerVersion">
{props.app} v{version.number} ({version.arch}) {props.name ? '- ' + props.name : ''}
{app} v{version.number} ({version.arch}) {name ? '- ' + name : ''}
</Typography>
</Stack>
<Resources resources={props.resources} />
<Resources getResources={getResources} />
</Stack>
</Grid>
</Grid>
@ -401,13 +406,3 @@ export default function Footer(props) {
);
}
}
Footer.defaultProps = {
expand: false,
app: '',
name: '',
version: initVersion(),
resources: () => {
return null;
},
};

83
src/Header.js
View File

@ -160,12 +160,12 @@ const StyledMenu = styled((props) => (
},
}));
function AboutModal(props) {
function AboutModal({ open = false, onClose = () => {} }) {
const classes = useStyles();
return (
<Modal open={props.open} onClose={props.onClose} className="modal">
<ModalContent title="About datarhei Restreamer" onClose={props.onClose} className={classes.modalPaper}>
<Modal open={open} onClose={onClose} className="modal">
<ModalContent title="About datarhei Restreamer" onClose={onClose} className={classes.modalPaper}>
<Grid container spacing={1}>
<Grid item xs={12} className={classes.aboutImage}>
<PaperThumb image={welcomeImage} title="Welcome to Restreamer v2" height="200px" />
@ -215,12 +215,17 @@ function AboutModal(props) {
);
}
AboutModal.defaultProps = {
open: false,
onClose: () => {},
};
function HeaderMenu(props) {
function HeaderMenu({
onChannel = () => {},
onPlayersite = () => {},
onSettings = () => {},
onLogout = () => {},
expand = true,
showPlayersite = false,
showSettings = false,
hasUpdates = false,
hasService = false,
}) {
const classes = useStyles();
const [$anchorEl, setAnchorEl] = React.useState(null);
@ -238,17 +243,17 @@ function HeaderMenu(props) {
Storage.Set('language', language);
};
if (props.expand === true) {
if (expand === true) {
return (
<React.Fragment>
<Fab className="headerFab" color="primary" onClick={props.onChannel}>
<Fab className="headerFab" color="primary" onClick={onChannel}>
<VideocamIcon className="fabIcon" />
</Fab>
<Fab className={props.hasUpdates ? 'headerFabHighlight' : 'headerFab'} color="primary" onClick={handleMenuOpen}>
<Fab className={hasUpdates ? 'headerFabHighlight' : 'headerFab'} color="primary" onClick={handleMenuOpen}>
<MenuOpenIcon className="fabIcon" />
</Fab>
<StyledMenu anchorEl={$anchorEl} open={$anchorEl !== null} onClose={handleMenuClose} onClick={handleMenuClose} disableScrollLock>
{props.hasService === true && (
{hasService === true && (
<React.Fragment>
<MenuItem component="a" href="https://service.datarhei.com" target="blank">
<ListItemIcon>
@ -259,18 +264,18 @@ function HeaderMenu(props) {
<Divider />
</React.Fragment>
)}
{props.showPlayersite === true && (
<MenuItem onClick={props.onPlayersite}>
{showPlayersite === true && (
<MenuItem onClick={onPlayersite}>
<ListItemIcon size="large">
<WebIcon fontSize="small" size="large" />
</ListItemIcon>
<Trans>Playersite</Trans>
</MenuItem>
)}
{props.showSettings === true && (
<MenuItem onClick={props.onSettings}>
{showSettings === true && (
<MenuItem onClick={onSettings}>
<ListItemIcon>
<Settings fontSize="small" className={props.hasUpdates ? classes.colorHighlight : ''} />
<Settings fontSize="small" className={hasUpdates ? classes.colorHighlight : ''} />
</ListItemIcon>
<Trans>System</Trans>
</MenuItem>
@ -300,7 +305,7 @@ function HeaderMenu(props) {
</ListItemIcon>
<LanguageSelect onChange={handleLanguageChange} />
</MenuItem>
<MenuItem onClick={props.onLogout}>
<MenuItem onClick={onLogout}>
<ListItemIcon>
<Logout fontSize="small" />
</ListItemIcon>
@ -348,19 +353,17 @@ function HeaderMenu(props) {
}
}
HeaderMenu.defaultProps = {
onChannel: () => {},
onPlayersite: () => {},
onSettings: () => {},
onLogout: () => {},
expand: false,
showPlayersite: false,
showSettings: false,
hasUpdates: false,
hasService: false,
};
export default function Header(props) {
export default function Header({
onChannel = () => {},
onPlayersite = () => {},
onSettings = () => {},
onLogout = () => {},
expand = true,
showPlayersite = false,
showSettings = false,
hasUpdates = false,
hasService = false,
}) {
const classes = useStyles();
return (
@ -372,14 +375,20 @@ export default function Header(props) {
<Typography className="headerTitle">Restreamer</Typography>
</Stack>
<Stack className="headerRight" direction="row" alignItems="center" spacing={0}>
<HeaderMenu {...props}></HeaderMenu>
<HeaderMenu
onChannel={onChannel}
onPlayersite={onPlayersite}
onSettings={onSettings}
onLogout={onLogout}
expand={expand}
showPlayersite={showPlayersite}
showSettings={showSettings}
hasUpdates={hasUpdates}
hasService={hasService}
></HeaderMenu>
</Stack>
</Stack>
</Grid>
</Grid>
);
}
Header.defaultProps = {
expand: false,
};

16
src/RestreamerUI.js
View File

@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function RestreamerUI(props) {
export default function RestreamerUI({ address = '' }) {
const classes = useStyles();
const [$state, setState] = React.useState({
@ -121,7 +121,7 @@ export default function RestreamerUI(props) {
};
const handleMount = async () => {
restreamer.current = new Restreamer(props.address);
restreamer.current = new Restreamer(address);
restreamer.current.AddListener((event) => {
notify(event.severity, event.type, event.message);
});
@ -452,7 +452,7 @@ export default function RestreamerUI(props) {
name = restreamer.current.Name();
}
let resources = () => {
let getResources = () => {
return null;
};
@ -490,7 +490,7 @@ export default function RestreamerUI(props) {
);
} else {
view = <Router restreamer={restreamer.current} />;
resources = handleResources;
getResources = handleResources;
}
}
@ -523,7 +523,7 @@ export default function RestreamerUI(props) {
</Grid>
</Grid>
</Grid>
<Footer expand={$state.connected} app={app} version={version} name={name} resources={resources} />
<Footer expand={$state.connected} app={app} version={version} name={name} getResources={getResources} />
<Snackbar
anchorOrigin={{
vertical: 'top',
@ -540,7 +540,7 @@ export default function RestreamerUI(props) {
{expand && (
<ChannelList
open={$channelList.open}
channels={$channelList.channels}
allChannels={$channelList.channels}
channelid={$channelList.channelid}
onClose={handleCloseChannelList}
onClick={handleSelectChannel}
@ -555,7 +555,3 @@ export default function RestreamerUI(props) {
</I18n>
);
}
RestreamerUI.defaultProps = {
address: '',
};

30
src/Router.js
View File

@ -3,33 +3,29 @@ import { Route, Navigate, Routes, HashRouter as DOMRouter } from 'react-router-d
import Views from './views';
export default function Router(props) {
if (props.restreamer === null) {
export default function Router({ restreamer = null }) {
if (restreamer === null) {
return null;
}
const channelid = props.restreamer.GetCurrentChannelID();
const channelid = restreamer.GetCurrentChannelID();
return (
<DOMRouter>
<Routes>
<Route path="/" element={<Views.ChannelSelect channelid={channelid} />} />
<Route path="/playersite" element={<Views.Playersite restreamer={props.restreamer} />} />
<Route path="/settings" element={<Views.Settings restreamer={props.restreamer} />} />
<Route path="/settings/:tab" element={<Views.Settings restreamer={props.restreamer} />} />
<Route path="/:channelid" element={<Views.Main key={channelid} restreamer={props.restreamer} />} />
<Route path="/:channelid/edit" element={<Views.Edit key={channelid} restreamer={props.restreamer} />} />
<Route path="/:channelid/edit/wizard" element={<Views.Wizard key={channelid} restreamer={props.restreamer} />} />
<Route path="/:channelid/edit/:tab" element={<Views.Edit key={channelid} restreamer={props.restreamer} />} />
<Route path="/:channelid/publication" element={<Views.AddService key={channelid} restreamer={props.restreamer} />} />
<Route path="/:channelid/publication/player" element={<Views.EditPlayer key={channelid} restreamer={props.restreamer} />} />
<Route path="/:channelid/publication/:service/:index" element={<Views.EditService key={channelid} restreamer={props.restreamer} />} />
<Route path="/playersite" element={<Views.Playersite restreamer={restreamer} />} />
<Route path="/settings" element={<Views.Settings restreamer={restreamer} />} />
<Route path="/settings/:tab" element={<Views.Settings restreamer={restreamer} />} />
<Route path="/:channelid" element={<Views.Main key={channelid} restreamer={restreamer} />} />
<Route path="/:channelid/edit" element={<Views.Edit key={channelid} restreamer={restreamer} />} />
<Route path="/:channelid/edit/wizard" element={<Views.Wizard key={channelid} restreamer={restreamer} />} />
<Route path="/:channelid/edit/:tab" element={<Views.Edit key={channelid} restreamer={restreamer} />} />
<Route path="/:channelid/publication" element={<Views.AddService key={channelid} restreamer={restreamer} />} />
<Route path="/:channelid/publication/player" element={<Views.EditPlayer key={channelid} restreamer={restreamer} />} />
<Route path="/:channelid/publication/:service/:index" element={<Views.EditService key={channelid} restreamer={restreamer} />} />
<Route path="*" render={() => <Navigate to="/" replace />} />
</Routes>
</DOMRouter>
);
}
Router.defaultProps = {
restreamer: null,
};

2
src/index.js
View File

@ -25,5 +25,5 @@ createRoot(document.getElementById('root')).render(
<CssBaseline />
<RestreamerUI address={address} />
</ThemeProvider>
</StyledEngineProvider>
</StyledEngineProvider>,
);

48
src/misc/ActionButton.js
View File

@ -3,59 +3,67 @@ import React from 'react';
import { Trans } from '@lingui/macro';
import Button from '@mui/material/Button';
export default function ActionButton(props) {
export default function ActionButton({
order = 'stop',
state = 'disconnected',
reconnect = -1,
disabled = false,
onDisconnect = function () {},
onConnect = function () {},
onReconnect = function () {},
}) {
let button = null;
if (props.state === 'connecting') {
if (state === 'connecting') {
button = (
<Button variant="outlined" fullWidth disabled>
<Trans>Connecting ...</Trans>
</Button>
);
} else if (props.state === 'disconnecting') {
} else if (state === 'disconnecting') {
button = (
<Button variant="outlined" fullWidth disabled>
<Trans>Disconnecting ...</Trans>
</Button>
);
} else if (props.state === 'connected') {
} else if (state === 'connected') {
button = (
<Button variant="outlined" fullWidth color="secondary" disabled={props.disabled} onClick={props.onDisconnect}>
<Button variant="outlined" fullWidth color="secondary" disabled={disabled} onClick={onDisconnect}>
<Trans>Disconnect</Trans>
</Button>
);
} else if (props.state === 'disconnected') {
if (props.reconnect < 0) {
if (props.order === 'start') {
} else if (state === 'disconnected') {
if (reconnect < 0) {
if (order === 'start') {
button = (
<Button variant="outlined" fullWidth color="primary" disabled={props.disabled} onClick={props.onReconnect}>
<Button variant="outlined" fullWidth color="primary" disabled={disabled} onClick={onReconnect}>
<Trans>Reconnect</Trans>
</Button>
);
} else {
button = (
<Button variant="outlined" fullWidth color="primary" disabled={props.disabled} onClick={props.onConnect}>
<Button variant="outlined" fullWidth color="primary" disabled={disabled} onClick={onConnect}>
<Trans>Connect</Trans>
</Button>
);
}
} else {
button = (
<Button variant="outlined" fullWidth color="secondary" disabled={props.disabled} onClick={props.onDisconnect}>
<Button variant="outlined" fullWidth color="secondary" disabled={disabled} onClick={onDisconnect}>
<Trans>Disconnect</Trans>
</Button>
);
}
} else if (props.state === 'error') {
if (props.reconnect < 0) {
} else if (state === 'error') {
if (reconnect < 0) {
button = (
<Button variant="outlined" fullWidth color="primary" disabled={props.disabled} onClick={props.onReconnect}>
<Button variant="outlined" fullWidth color="primary" disabled={disabled} onClick={onReconnect}>
<Trans>Reconnect</Trans>
</Button>
);
} else {
button = (
<Button variant="outlined" fullWidth color="secondary" disabled={props.disabled} onClick={props.onDisconnect}>
<Button variant="outlined" fullWidth color="secondary" disabled={disabled} onClick={onDisconnect}>
<Trans>Disconnect</Trans>
</Button>
);
@ -64,13 +72,3 @@ export default function ActionButton(props) {
return button;
}
ActionButton.defaultProps = {
order: 'stop',
state: 'disconnected',
reconnect: -1,
disabled: false,
onDisconnect: function () {},
onConnect: function () {},
onReconnect: function () {},
};

23
src/misc/BoxText.js
View File

@ -41,29 +41,20 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function Component(props) {
export default function Component({ color = 'light', textAlign = 'left', alignItems = 'center', justifyContent = 'center', style = null, children = null }) {
const classes = useStyles();
return (
<Stack
direction="column"
justifyContent={props.justifyContent}
alignItems={props.alignItems}
textAlign={props.textAlign}
justifyContent={justifyContent}
alignItems={alignItems}
textAlign={textAlign}
spacing={1}
className={
props.color === 'dark' ? classes.dark : props.color === 'success' ? classes.success : props.color === 'danger' ? classes.danger : classes.light
}
{...props}
className={color === 'dark' ? classes.dark : color === 'success' ? classes.success : color === 'danger' ? classes.danger : classes.light}
style={style}
>
{props.children}
{children}
</Stack>
);
}
Component.defaultProps = {
color: 'light',
textAlign: 'left',
alignItems: 'center',
justifyContent: 'center',
};

8
src/misc/BoxTextarea.js
View File

@ -12,14 +12,12 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function Component(props) {
export default function Component({ style = null, children = null }) {
const classes = useStyles();
return (
<Stack direction="column" justifyContent="center" alignItems="center" spacing={1} className={classes.box} {...props}>
{props.children}
<Stack direction="column" justifyContent="center" alignItems="center" spacing={1} className={classes.box} style={style}>
{children}
</Stack>
);
}
Component.defaultProps = {};

27
src/misc/Changelog.js
View File

@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function Changelog(props) {
export default function Changelog({ open = false, current = '', previous = '', onClose = () => {}, children = null }) {
const [$data, setData] = React.useState('');
const classes = useStyles();
@ -62,7 +62,7 @@ export default function Changelog(props) {
const onMount = async () => {
let data = await loadData();
data = filter(data, props.current, props.previous);
data = filter(data, current, previous);
setData(data);
};
@ -141,39 +141,39 @@ export default function Changelog(props) {
const renderers = {
h1: (props) => (
<h1 className={classes.h1} {...props}>
{props.children}
{children}
</h1>
),
h2: (props) => (
<h2 className={classes.h2} {...props}>
{props.children}
{children}
</h2>
),
h3: (props) => (
<h3 className={classes.h3} {...props}>
{props.children}
{children}
</h3>
),
h4: (props) => (
<h4 className={classes.h4} {...props}>
{props.children}
{children}
</h4>
),
a: (props) => (
<a className={classes.a} target="_blank" {...props}>
{props.children}
{children}
</a>
),
};
return (
<Dialog
open={props.open}
onClose={props.onClose}
open={open}
onClose={onClose}
title={<Trans>Update details (Changelog)</Trans>}
maxWidth={600}
buttonsRight={
<Button variant="outlined" color="primary" onClick={props.onClose}>
<Button variant="outlined" color="primary" onClick={onClose}>
<Trans>Close</Trans>
</Button>
}
@ -188,10 +188,3 @@ export default function Changelog(props) {
</Dialog>
);
}
Changelog.defaultProps = {
open: false,
current: '',
previous: '',
onClose: () => {},
};

70
src/misc/ChannelList.js
View File

@ -121,12 +121,12 @@ const ImageBackdrop = styled('span')(({ theme }) => ({
border: `2px solid ${theme.palette.primary.dark}`,
}));
function ChannelButton(props, largeChannelList) {
function ChannelButton({ url = '', width = 200, title = '', state = '', disabled = false, onClick = () => {}, largeChannelList = [] }) {
const classes = useStyles();
const theme = useTheme();
let color = theme.palette.primary.main;
switch (props.state) {
switch (state) {
case 'disconnected':
color = theme.palette.primary.main;
break;
@ -146,7 +146,7 @@ function ChannelButton(props, largeChannelList) {
}
let color_active = theme.palette.primary.main;
switch (props.disabled) {
switch (disabled) {
case true:
color_active = theme.palette.primary.light;
break;
@ -157,23 +157,23 @@ function ChannelButton(props, largeChannelList) {
return (
<Grid item xs={12} sm={6} md={4} lg={3} style={{ paddingBottom: largeChannelList ? '10px' : 'auto' }}>
<ImageButton focusRipple disabled={props.disabled} onClick={props.onClick} style={{ width: props.width }}>
<ImageButton focusRipple disabled={disabled} onClick={onClick} style={{ width: width }}>
<Stack direction="column" spacing={0.5}>
<Image
style={{
width: props.width,
height: parseInt((props.width / 16) * 9),
width: width,
height: parseInt((width / 16) * 9),
}}
>
<ImageAlt>
<DoNotDisturbAltIcon fontSize="large" />
</ImageAlt>
<ImageSrc style={{ backgroundImage: `url(${props.url})`, borderColor: color_active }} />
<ImageSrc style={{ backgroundImage: `url(${url})`, borderColor: color_active }} />
<ImageBackdrop className="MuiImageBackdrop-root" style={{ borderColor: color_active }} />
</Image>
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" className={classes.imageTitle}>
<Typography variant="body2" color="inherit">
{props.title}
{title}
</Typography>
<Typography variant="body2" color="inherit">
<LensIcon fontSize="small" style={{ color: color }} />
@ -185,15 +185,6 @@ function ChannelButton(props, largeChannelList) {
);
}
ChannelButton.defaultProps = {
url: '',
width: 200,
title: '',
state: '',
disabled: false,
onClick: () => {},
};
const calculateColumnsPerRow = (breakpointSmall, breakpointMedium, breakpointLarge) => {
if (breakpointLarge) {
return 4;
@ -209,7 +200,21 @@ const calculateRowsToFit = (windowHeight, thumbnailHeight, otherUIHeight) => {
return Math.floor((windowHeight - otherUIHeight) / thumbnailHeight);
};
export default function ChannelList(props) {
export default function ChannelList({
open = false,
channelid = '',
allChannels = [],
onClose = () => {},
onClick = (channelid) => {},
onAdd = (name) => {},
onState = (channelids) => {
const states = {};
for (let channelid of channelids) {
states[channelid] = '';
}
return states;
},
}) {
const classes = useStyles();
const theme = useTheme();
const breakpointSmall = useMediaQuery(theme.breakpoints.up('sm'));
@ -225,8 +230,6 @@ export default function ChannelList(props) {
const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
const [windowHeight, setWindowHeight] = React.useState(window.innerHeight);
const { channels: allChannels, channelid, onClick, onClose, onState } = props;
const [$largeChannelList, setLargeChannelList] = React.useState(false);
React.useEffect(() => {
@ -316,7 +319,7 @@ export default function ChannelList(props) {
});
};
if (props.open === false) {
if (open === false) {
return null;
}
@ -333,9 +336,9 @@ export default function ChannelList(props) {
<React.Fragment>
<SwipeableDrawer
anchor="bottom"
open={props.open}
open={open}
onOpen={() => {}}
onClose={props.onClose}
onClose={onClose}
sx={{
marginButtom: 60,
'& .MuiDrawer-paper': {
@ -363,7 +366,7 @@ export default function ChannelList(props) {
<IconButton color="inherit" size="large" onClick={handleLargeChannelList}>
{$largeChannelList ? <FullscreenExitIcon /> : <FullscreenIcon />}
</IconButton>
<IconButton color="inherit" size="large" onClick={props.onClose}>
<IconButton color="inherit" size="large" onClick={onClose}>
<CloseIcon />
</IconButton>
</Stack>
@ -419,7 +422,7 @@ export default function ChannelList(props) {
disabled={$addChannel.name.length === 0}
onClick={() => {
handleAddChannelDialog();
props.onAdd($addChannel.name);
onAdd($addChannel.name);
}}
>
<Trans>Add</Trans>
@ -440,20 +443,3 @@ export default function ChannelList(props) {
</React.Fragment>
);
}
ChannelList.defaultProps = {
open: false,
channelid: '',
channels: [],
onClose: () => {},
onClick: (channelid) => {},
onAdd: (name) => {},
onState: (channelids) => {
const states = {};
for (let channelid of channelids) {
states[channelid] = '';
}
return states;
},
};

15
src/misc/Checkbox.js
View File

@ -18,22 +18,15 @@ const useStyles = makeStyles((theme) => ({
disabled: {},
}));
export default function Component(props) {
export default function Component({ label = '', checked = false, disabled = false, onChange = function (event) {} }) {
const classes = useStyles();
return (
<FormControlLabel
className={classes.root}
control={<Checkbox className={classes.root} checked={props.checked} onChange={props.onChange} />}
label={props.label}
disabled={props.disabled}
control={<Checkbox className={classes.root} checked={checked} onChange={onChange} />}
label={label}
disabled={disabled}
/>
);
}
Component.defaultProps = {
label: '',
checked: false,
disabled: false,
onChange: function (event) {},
};

16
src/misc/ColorPicker.js
View File

@ -16,7 +16,7 @@ function hexToRGBA(value) {
return result ? `rgba(${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)},1)` : value;
}
export default function ColorPicker(props) {
export default function ColorPicker({ variant = 'default', label = '', fullWidth = false, value = 'rgba(255, 255, 255, 1)', onChange = () => {} }) {
const [$open, setOpen] = React.useState(false);
const handleOpen = () => {
@ -28,18 +28,18 @@ export default function ColorPicker(props) {
};
const handleChange = (color) => {
props.onChange({
onChange({
target: {
value: color,
},
});
};
const value = hexToRGBA(props.value);
value = hexToRGBA(value);
return (
<React.Fragment>
<TextField variant={props.variant} fullWidth={props.fullWidth} label={props.label} value={value} onClick={handleOpen} onChange={props.onChange} />
<TextField variant={variant} fullWidth={fullWidth} label={label} value={value} onClick={handleOpen} onChange={onChange} />
{$open ? (
<div style={{ position: 'absolute', zIndex: '2' }}>
<div
@ -58,11 +58,3 @@ export default function ColorPicker(props) {
</React.Fragment>
);
}
ColorPicker.defaultProps = {
variant: 'default',
label: '',
fullWidth: false,
value: 'rgba(255, 255, 255, 1)',
onChange: () => {},
};

9
src/misc/CopyButton.js
View File

@ -8,10 +8,9 @@ import FileCopyIcon from '@mui/icons-material/FileCopy';
import CopyToClipboard from '../utils/clipboard';
import NotifyContext from '../contexts/Notify';
export default function CopyButton(props) {
export default function CopyButton({ variant = 'outlined', color = 'default', size = 'small', value = '', children = null }) {
const notify = useContext(NotifyContext);
const { i18n } = useLingui();
const { children, value, ...other } = props;
const handleCopy = async () => {
const success = await CopyToClipboard(value);
@ -24,12 +23,8 @@ export default function CopyButton(props) {
};
return (
<Button {...other} endIcon={<FileCopyIcon />} onClick={handleCopy}>
<Button variant={variant} color={color} size={size} endIcon={<FileCopyIcon />} onClick={handleCopy}>
{children}
</Button>
);
}
CopyButton.defaultProps = {
value: '',
};

10
src/misc/Duration.js
View File

@ -1,13 +1,13 @@
import React from 'react';
export default function Duration(props) {
const fullSeconds = parseInt(Math.floor(props.seconds));
export default function Duration({ seconds = 0 }) {
const fullSeconds = parseInt(Math.floor(seconds));
const s = fullSeconds % 60;
const m = parseInt(fullSeconds / 60) % 60;
const h = parseInt(fullSeconds / (60 * 60)) % 24;
const d = parseInt(fullSeconds / (60 * 60 * 24));
let duration = '.' + ((props.seconds - fullSeconds) * 100).toFixed(0);
let duration = '.' + ((seconds - fullSeconds) * 100).toFixed(0);
if (s < 10) {
duration = ':0' + s + duration;
@ -33,7 +33,3 @@ export default function Duration(props) {
return <React.Fragment>{duration}</React.Fragment>;
}
Duration.defaultProps = {
seconds: 0,
};

73
src/misc/EncodingSelect.js
View File

@ -12,40 +12,46 @@ import * as Decoders from './coders/Decoders';
import Select from './Select';
import H from '../utils/help';
export default function EncodingSelect(props) {
export default function EncodingSelect({
type = '',
streams = [],
profile = {},
codecs = [],
skills = {},
onChange = function (encoder, decoder, automatic) {},
}) {
const { i18n } = useLingui();
const profile = props.profile;
let availableEncoders = [];
let availableDecoders = [];
if (props.type === 'video') {
availableEncoders = props.skills.encoders.video;
availableDecoders = props.skills.decoders.video;
} else if (props.type === 'audio') {
availableEncoders = props.skills.encoders.audio;
if (type === 'video') {
availableEncoders = skills.encoders.video;
availableDecoders = skills.decoders.video;
} else if (type === 'audio') {
availableEncoders = skills.encoders.audio;
}
const handleDecoderChange = (event) => {
const decoder = profile.decoder;
const stream = props.streams[profile.stream];
const stream = streams[profile.stream];
decoder.coder = event.target.value;
// If the coder changes, use the coder's default settings
let c = null;
if (props.type === 'audio') {
if (type === 'audio') {
c = Decoders.Audio.Get(decoder.coder);
} else if (props.type === 'video') {
} else if (type === 'video') {
c = Decoders.Video.Get(decoder.coder);
}
if (c !== null) {
const defaults = c.defaults(stream, props.skills);
const defaults = c.defaults(stream, skills);
decoder.settings = defaults.settings;
decoder.mapping = defaults.mapping;
}
props.onChange(profile.encoder, decoder, false);
onChange(profile.encoder, decoder, false);
};
const handleDecoderSettingsChange = (settings, mapping, automatic) => {
@ -54,29 +60,29 @@ export default function EncodingSelect(props) {
decoder.settings = settings;
decoder.mapping = mapping;
props.onChange(profile.encoder, decoder, automatic);
onChange(profile.encoder, decoder, automatic);
};
const handleEncoderChange = (event) => {
const encoder = profile.encoder;
const stream = props.streams[profile.stream];
const stream = streams[profile.stream];
encoder.coder = event.target.value;
// If the coder changes, use the coder's default settings
let c = null;
if (props.type === 'audio') {
if (type === 'audio') {
c = Encoders.Audio.Get(encoder.coder);
} else if (props.type === 'video') {
} else if (type === 'video') {
c = Encoders.Video.Get(encoder.coder);
}
if (c !== null) {
const defaults = c.defaults(stream, props.skills);
const defaults = c.defaults(stream, skills);
encoder.settings = defaults.settings;
encoder.mapping = defaults.mapping;
}
props.onChange(encoder, profile.decoder, false);
onChange(encoder, profile.decoder, false);
};
const handleEncoderSettingsChange = (settings, mapping, automatic) => {
@ -85,7 +91,7 @@ export default function EncodingSelect(props) {
encoder.settings = settings;
encoder.mapping = mapping;
props.onChange(encoder, profile.decoder, automatic);
onChange(encoder, profile.decoder, automatic);
};
const handleEncoderHelp = (topic) => (event) => {
@ -96,8 +102,8 @@ export default function EncodingSelect(props) {
let stream = null;
if (profile.stream >= 0) {
if (profile.stream < props.streams.length) {
stream = props.streams[profile.stream];
if (profile.stream < streams.length) {
stream = streams[profile.stream];
}
}
@ -105,18 +111,18 @@ export default function EncodingSelect(props) {
return null;
}
if (stream.type !== props.type) {
if (stream.type !== type) {
return null;
}
let allowCopy = props.codecs.includes(stream.codec);
let allowCopy = codecs.includes(stream.codec);
let encoderRegistry = null;
let decoderRegistry = null;
if (props.type === 'video') {
if (type === 'video') {
encoderRegistry = Encoders.Video;
decoderRegistry = Decoders.Video;
} else if (props.type === 'audio') {
} else if (type === 'audio') {
encoderRegistry = Encoders.Audio;
decoderRegistry = Decoders.Audio;
} else {
@ -130,9 +136,9 @@ export default function EncodingSelect(props) {
if (coder !== null && availableEncoders.includes(coder.coder)) {
const Settings = coder.component;
encoderSettings = <Settings stream={stream} settings={profile.encoder.settings} skills={props.skills} onChange={handleEncoderSettingsChange} />;
encoderSettings = <Settings stream={stream} settings={profile.encoder.settings} skills={skills} onChange={handleEncoderSettingsChange} />;
if (props.type === 'video' && !['copy', 'none', 'rawvideo'].includes(coder.coder)) {
if (type === 'video' && !['copy', 'none', 'rawvideo'].includes(coder.coder)) {
encoderSettingsHelp = handleEncoderHelp(coder.coder);
}
}
@ -146,7 +152,7 @@ export default function EncodingSelect(props) {
}
// Is the encoder in the list of codec we allow as target?
if (!props.codecs.includes(c.codec)) {
if (!codecs.includes(c.codec)) {
continue;
}
@ -187,7 +193,7 @@ export default function EncodingSelect(props) {
if (c !== null && availableDecoders.includes(c.coder)) {
const Settings = c.component;
decoderSettings = <Settings stream={stream} settings={profile.decoder.settings} skills={props.skills} onChange={handleDecoderSettingsChange} />;
decoderSettings = <Settings stream={stream} settings={profile.decoder.settings} skills={skills} onChange={handleDecoderSettingsChange} />;
}
// List all decoders for the codec of the stream
@ -244,12 +250,3 @@ export default function EncodingSelect(props) {
</Grid>
);
}
EncodingSelect.defaultProps = {
type: '',
streams: [],
profile: {},
codecs: [],
skills: {},
onChange: function (encoder, decoder, automatic) {},
};

6
src/misc/Env.js
View File

@ -32,7 +32,7 @@ const HtmlTooltip = withStyles((theme) => ({
},
}))(Tooltip);
export default function Component(props) {
export default function Component({ style = null }) {
const classes = useStyles();
return (
<HtmlTooltip
@ -44,9 +44,7 @@ export default function Component(props) {
placement="right"
arrow
>
<Chip size="small" label="ENV" className={classes.root} {...props} />
<Chip size="small" label="ENV" className={classes.root} style={style} />
</HtmlTooltip>
);
}
Component.defaultProps = {};

17
src/misc/Filesize.js
View File

@ -1,28 +1,21 @@
import React from 'react';
// Adapted from https://stackoverflow.com/questions/10420352/converting-file-size-in-bytes-to-human-readable-string
export default function Filesize(props) {
let bytes = props.bytes;
const thresh = props.si ? 1000 : 1024;
export default function Filesize({ bytes = 0, si = false, digits = 1 }) {
const thresh = si ? 1000 : 1024;
if (Math.abs(bytes) < thresh) {
return bytes + ' B';
}
const units = props.si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
const units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
let u = -1;
const r = 10 ** props.digits;
const r = 10 ** digits;
do {
bytes /= thresh;
++u;
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
return <React.Fragment>{bytes.toFixed(props.digits) + ' ' + units[u]}</React.Fragment>;
return <React.Fragment>{bytes.toFixed(digits) + ' ' + units[u]}</React.Fragment>;
}
Filesize.defaultProps = {
bytes: 0,
si: false,
digits: 1,
};

25
src/misc/FilterSelect.js
View File

@ -10,9 +10,7 @@ import * as Filters from './filters';
// Import all encoders (audio/video)
import * as Encoders from './coders/Encoders';
export default function FilterSelect(props) {
const profile = props.profile;
export default function FilterSelect({ type = '', profile = {}, availableFilters = [], onChange = function (filter, automatic) {} }) {
// handleFilterChange
// what: Filter name
// settings (component settings): {Key: Value}
@ -28,7 +26,7 @@ export default function FilterSelect(props) {
// Get the order of the filters
let filterOrder = [];
if (props.type === 'video') {
if (type === 'video') {
filterOrder = Filters.Video.Filters();
} else {
filterOrder = Filters.Audio.Filters();
@ -48,14 +46,14 @@ export default function FilterSelect(props) {
filter.graph = graphs.join(',');
props.onChange(filter, automatic);
onChange(filter, automatic);
};
// Set filterRegistry by type
let filterRegistry = null;
if (props.type === 'video') {
if (type === 'video') {
filterRegistry = Filters.Video;
} else if (props.type === 'audio') {
} else if (type === 'audio') {
filterRegistry = Filters.Audio;
} else {
return null;
@ -64,10 +62,10 @@ export default function FilterSelect(props) {
// Checks the state of hwaccel (gpu encoding)
let encoderRegistry = null;
let hwaccel = false;
if (props.type === 'video') {
if (type === 'video') {
encoderRegistry = Encoders.Video;
for (let encoder of encoderRegistry.List()) {
if (encoder.codec === props.profile.encoder.coder && encoder.hwaccel) {
if (encoder.codec === profile.encoder.coder && encoder.hwaccel) {
hwaccel = true;
}
}
@ -78,7 +76,7 @@ export default function FilterSelect(props) {
if (!hwaccel) {
for (let c of filterRegistry.List()) {
// Checks FFmpeg skills (filter is available)
if (props.availableFilters.includes(c.filter)) {
if (availableFilters.includes(c.filter)) {
const Settings = c.component;
if (!(c.filter in profile.filter.settings)) {
@ -125,10 +123,3 @@ export default function FilterSelect(props) {
</Grid>
);
}
FilterSelect.defaultProps = {
type: '',
profile: {},
availableFilters: [],
onChange: function (filter, automatic) {},
};

34
src/misc/FormInlineButton.js
View File

@ -9,15 +9,37 @@ const useStyles = makeStyles((theme) => ({
height: '56px!important',
},
}));
export default function Component(props) {
// component="label" variant={variant} color={color} disabled={disabled}
// onClick disabled
// target="blank" href={stream_key_link} component="a"
export default function Component({
component = 'label',
variant = 'outlined',
size = 'large',
color = 'primary',
disabled = false,
target = 'blank',
href = '#',
className = null,
onClick = () => {},
children = null,
}) {
const classes = useStyles();
return (
<Button variant="outlined" size="large" fullWidth color="primary" className={classes.button} {...props}>
{props.children}
<Button
component={component}
variant={variant}
size={size}
disabled={disabled}
fullWidth
color={color}
className={className ? className : classes.button}
target={target}
href={href}
onClick={onClick}
>
{children}
</Button>
);
}
Component.defaultProps = {};

8
src/misc/LanguageSelect.js
View File

@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function LanguageSelect(props) {
export default function LanguageSelect({ onChange = function (lang) {} }) {
const classes = useStyles();
const { i18n } = useLingui();
@ -37,7 +37,7 @@ export default function LanguageSelect(props) {
i18n.activate(language);
props.onChange(language);
onChange(language);
};
return (
@ -60,7 +60,3 @@ export default function LanguageSelect(props) {
</Select>
);
}
LanguageSelect.defaultProps = {
onChange: function (lang) {},
};

26
src/misc/ModalContent.js
View File

@ -44,25 +44,23 @@ const useStyles = makeStyles((theme) => ({
},
}));
const Component = React.forwardRef((props, ref) => {
const Component = React.forwardRef(({ title = '', onClose = null, onHelp = null, className = null, style = null, children = null }, ref) => {
const classes = useStyles();
const { title, onClose, onHelp, ...other } = props;
return (
<Paper className={classes.modalPaper} elevation={0} tabIndex={-1} ref={ref} {...other}>
<Paper className={className ? className : classes.modalPaper} elevation={0} tabIndex={-1} ref={ref} style={style}>
<Grid container spacing={0}>
<Grid item xs={12} className={classes.modalHeader}>
<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
<Typography variant="button">{props.title}</Typography>
<Typography variant="button">{title}</Typography>
<Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
{typeof props.onHelp === 'function' && (
<IconButton color="inherit" size="small" onClick={props.onHelp}>
{typeof onHelp === 'function' && (
<IconButton color="inherit" size="small" onClick={onHelp}>
<HelpIcon fontSize="small" />
</IconButton>
)}
{typeof props.onClose === 'function' && (
<IconButton color="inherit" size="small" onClick={props.onClose}>
{typeof onClose === 'function' && (
<IconButton color="inherit" size="small" onClick={onClose}>
<CloseIcon fontSize="small" />
</IconButton>
)}
@ -70,10 +68,10 @@ const Component = React.forwardRef((props, ref) => {
</Stack>
</Grid>
</Grid>
{props.children}
{children}
<Grid container spacing={0}>
<Grid item xs={12} className={classes.modalFooter}>
<Button variant="outlined" color="default" onClick={props.onClose}>
<Button variant="outlined" color="default" onClick={onClose}>
<Trans>Close</Trans>
</Button>
</Grid>
@ -83,9 +81,3 @@ const Component = React.forwardRef((props, ref) => {
});
export default Component;
Component.defaultProps = {
title: '',
onClose: null,
onHelp: null,
};

27
src/misc/MultiSelect.js
View File

@ -13,22 +13,21 @@ const MenuProps = {
},
};
export default function Component(props) {
export default function Component({
variant = 'outlined',
label = '',
value = [],
disabled = false,
renderValue = (selected) => selected.join(', '),
onChange = function (event) {},
children = null,
}) {
return (
<FormControl variant={props.variant} disabled={props.disabled} fullWidth>
<InputLabel>{props.label}</InputLabel>
<Select multiple value={props.value} onChange={props.onChange} input={<OutlinedInput />} renderValue={props.renderValue} MenuProps={MenuProps}>
{props.children}
<FormControl variant={variant} disabled={disabled} fullWidth>
<InputLabel>{label}</InputLabel>
<Select multiple value={value} onChange={onChange} input={<OutlinedInput />} renderValue={renderValue} MenuProps={MenuProps}>
{children}
</Select>
</FormControl>
);
}
Component.defaultProps = {
variant: 'outlined',
label: '',
value: [],
disabled: false,
renderValue: (selected) => selected.join(', '),
onChange: function (event) {},
};

14
src/misc/MultiSelectOption.js
View File

@ -10,22 +10,14 @@ const useStyles = makeStyles((theme) => ({
},
}));
const Component = React.forwardRef((props, ref) => {
const Component = React.forwardRef(({ key = '', name = '', value = '', selected = false }, ref) => {
const classes = useStyles();
const { name, value, selected, ...other } = props;
return (
<MenuItem value={props.value} className={props.selected ? classes.root : ''} ref={ref} {...other}>
{props.name}
<MenuItem key={key} value={value} className={selected ? classes.root : ''} ref={ref}>
{name}
</MenuItem>
);
});
export default Component;
Component.defaultProps = {
name: '',
value: '',
selected: false,
};

14
src/misc/Number.js
View File

@ -2,21 +2,15 @@ import React from 'react';
import { i18n } from '@lingui/core';
export default function Number(props) {
export default function Number({ value = 0, digits = 0, minDigits = 0 }) {
const options = {
minimumFractionDigits: props.minDigits,
maximumFractionDigits: props.digits,
minimumFractionDigits: minDigits,
maximumFractionDigits: digits,
};
if (options.minimumFractionDigits > options.maximumFractionDigits) {
options.maximumFractionDigits = options.minimumFractionDigits;
}
return <React.Fragment>{i18n.number(props.value, options)}</React.Fragment>;
return <React.Fragment>{i18n.number(value, options)}</React.Fragment>;
}
Number.defaultProps = {
value: 0,
digits: 0,
minDigits: 0,
};

51
src/misc/Paper.js
View File

@ -18,31 +18,34 @@ const useStyles = makeStyles((theme) => ({
},
}));
const Component = React.forwardRef((props, ref) => {
const classes = useStyles();
let { marginBottom, xs, sm, md, ld, className, elevation, ...other } = props;
const Component = React.forwardRef(
(
{
xs = 12,
sm = undefined,
md = undefined,
lg = undefined,
elevation = 0,
className = 'paper',
style = null,
marginBottom = '6em',
tabIndex = 0,
children = null,
},
ref,
) => {
const classes = useStyles();
elevation = 0;
return (
<Grid container justifyContent="center" spacing={1} style={{ marginBottom: props.marginBottom }}>
<Grid item xs={props.xs} sm={props.sm} md={props.md} lg={props.lg}>
<Paper className={classes[props.className]} elevation={elevation} ref={ref} {...other}>
{props.children}
</Paper>
return (
<Grid container justifyContent="center" spacing={1} style={{ marginBottom: marginBottom }}>
<Grid item xs={xs} sm={sm} md={md} lg={lg}>
<Paper className={classes[className]} elevation={elevation} ref={ref} tabIndex={tabIndex} style={style}>
{children}
</Paper>
</Grid>
</Grid>
</Grid>
);
});
);
},
);
export default Component;
Component.defaultProps = {
marginBottom: '6em',
xs: 12,
sm: undefined,
md: undefined,
lg: undefined,
elevation: 0,
className: 'paper',
};

11
src/misc/PaperContent.js
View File

@ -2,19 +2,14 @@ import React from 'react';
import Grid from '@mui/material/Grid';
const Component = function (props) {
const Component = function ({ spacing = 3, textAlign = 'left', children = null }) {
return (
<Grid container justifyContent="center" spacing={props.spacing} align={props.textAlign}>
<Grid container justifyContent="center" spacing={spacing} align={textAlign}>
<Grid item xs={12}>
{props.children}
{children}
</Grid>
</Grid>
);
};
export default Component;
Component.defaultProps = {
spacing: 3,
textAlign: 'left',
};

11
src/misc/PaperFooter.js
View File

@ -19,22 +19,17 @@ const useStyles = makeStyles((theme) => ({
},
}));
const Component = function (props) {
const Component = function ({ buttonsLeft = null, buttonsRight = null }) {
const classes = useStyles();
return (
<Grid container spacing={3}>
<Grid item xs={12} className={classes.root}>
<div>{props.buttonsRight}</div>
{props.buttonsLeft}
<div>{buttonsRight}</div>
{buttonsLeft}
</Grid>
</Grid>
);
};
export default Component;
Component.defaultProps = {
buttonsLeft: null,
buttonsRight: null,
};

33
src/misc/PaperHeader.js
View File

@ -19,47 +19,36 @@ const useStyles = makeStyles((theme) => ({
},
}));
const Component = function (props) {
const Component = function ({ spacing = 0, padding = null, title = '', variant = 'pagetitle', onAbort = null, onHelp = null, onEdit = null, onAdd = null }) {
const classes = useStyles();
return (
<Grid container spacing={props.spacing} padding={props.padding}>
<Grid container spacing={spacing} padding={padding}>
<Grid item xs={12} className={classes.root}>
{typeof props.onAbort === 'function' && (
<IconButton color="inherit" size="small" onClick={props.onAbort}>
{typeof onAbort === 'function' && (
<IconButton color="inherit" size="small" onClick={onAbort}>
<CloseIcon />
</IconButton>
)}
{typeof props.onEdit === 'function' && (
<IconButton color="inherit" size="small" onClick={props.onEdit}>
{typeof onEdit === 'function' && (
<IconButton color="inherit" size="small" onClick={onEdit}>
<EditIcon />
</IconButton>
)}
{typeof props.onAdd === 'function' && (
<IconButton color="inherit" size="small" onClick={props.onAdd}>
{typeof onAdd === 'function' && (
<IconButton color="inherit" size="small" onClick={onAdd}>
<AddIcon />
</IconButton>
)}
{typeof props.onHelp === 'function' && (
<IconButton color="inherit" size="small" onClick={props.onHelp}>
{typeof onHelp === 'function' && (
<IconButton color="inherit" size="small" onClick={onHelp}>
<HelpIcon />
</IconButton>
)}
<Typography variant={props.variant}>{props.title}</Typography>
<Typography variant={variant}>{title}</Typography>
</Grid>
</Grid>
);
};
export default Component;
Component.defaultProps = {
spacing: 0,
padding: null,
title: '',
variant: 'pagetitle',
onAbort: null,
onHelp: null,
onEdit: null,
onAdd: null,
};

10
src/misc/PaperThumb.js
View File

@ -10,14 +10,8 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function Component(props) {
export default function Component({ image = '', title = '', height = '0px' }) {
const classes = useStyles();
return <CardMedia className={classes.media} style={{ height: props.height }} image={props.image} title={props.title} />;
return <CardMedia className={classes.media} style={{ height: height }} image={image} title={title} />;
}
Component.defaultProps = {
image: '',
title: '',
height: '0px',
};

58
src/misc/Password.js
View File

@ -11,8 +11,20 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff';
import Env from './Env';
export default function Password(props) {
const [$visible, setVisible] = React.useState(props.show);
export default function Password({
id = 'password',
label = '',
value = '',
disabled = false,
autoComplete = 'current-password',
env = false,
show = false,
helperText = false,
inputProps = {},
error = false,
onChange = function (value) {},
}) {
const [$visible, setVisible] = React.useState(show);
const handleClickShowPassword = () => {
setVisible(!$visible);
@ -27,50 +39,36 @@ export default function Password(props) {
<IconButton edge="end" size="large">
<VisibilityOff />
</IconButton>
{props.env ? <Env /> : null}
{env ? <Env /> : null}
</InputAdornment>
);
if (props.disabled === false) {
if (disabled === false) {
adornment = (
<InputAdornment position="end">
<IconButton onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} edge="end" size="large">
{$visible ? <Visibility /> : <VisibilityOff />}
</IconButton>
{props.env ? <Env /> : null}
{env ? <Env /> : null}
</InputAdornment>
);
}
return (
<FormControl variant="outlined" disabled={props.disabled} fullWidth>
<InputLabel htmlFor={props.id}>{props.label}</InputLabel>
<FormControl variant="outlined" disabled={disabled} fullWidth>
<InputLabel htmlFor={id}>{label}</InputLabel>
<OutlinedInput
id={props.id}
type={$visible && !props.disabled ? 'text' : 'password'}
value={props.value}
onChange={props.onChange}
id={id}
type={$visible && !disabled ? 'text' : 'password'}
value={value}
onChange={onChange}
endAdornment={adornment}
label={props.label}
autoComplete={props.autoComplete}
inputProps={props.inputProps}
error={props.error}
label={label}
autoComplete={autoComplete}
inputProps={inputProps}
error={error}
/>
{props.helperText && <FormHelperText>{props.helperText}</FormHelperText>}
{helperText && <FormHelperText>{helperText}</FormHelperText>}
</FormControl>
);
}
Password.defaultProps = {
id: 'password',
label: '',
value: '',
disabled: false,
autoComplete: 'current-password',
env: false,
show: false,
helperText: false,
inputProps: {},
error: false,
onChange: function (value) {},
};

72
src/misc/Player/index.js
View File

@ -2,22 +2,43 @@ import React from 'react';
import VideoJS from './videojs';
export default function Player(props) {
const type = props.type ? props.type : 'videojs-internal';
export default function Player({
type = 'videojs-internal',
source = '',
poster = '',
controls = false,
autoplay = false,
mute = false,
logo = {
image: '',
position: 'top-right',
link: '',
},
ga = {
account: '',
name: '',
},
colors = {
seekbar: '#fff',
buttons: '#fff',
},
statistics = false,
}) {
type = type ? type : 'videojs-internal';
if (type === 'videojs-internal' || type === 'videojs-public') {
const config = {
controls: props.controls,
poster: props.poster,
autoplay: type === 'videojs-internal' ? true : props.autoplay ? (props.mute === 'muted' ? true : false) : false,
muted: type === 'videojs-internal' ? 'muted' : props.mute,
controls: controls,
poster: poster,
autoplay: type === 'videojs-internal' ? true : autoplay ? (mute === 'muted' ? true : false) : false,
muted: type === 'videojs-internal' ? 'muted' : mute,
liveui: true,
responsive: true,
fluid: true,
plugins: {
reloadSourceOnError: {},
},
sources: [{ src: props.source, type: 'application/x-mpegURL' }],
sources: [{ src: source, type: 'application/x-mpegURL' }],
};
return (
@ -25,7 +46,7 @@ export default function Player(props) {
type={type}
options={config}
onReady={(player) => {
if (props.logo.image.length !== 0) {
if (logo.image.length !== 0) {
var overlay = null;
var imgTag = new Image();
@ -33,11 +54,11 @@ export default function Player(props) {
imgTag.setAttribute('width', this.width);
imgTag.setAttribute('height'.this.height);
};
imgTag.src = props.logo.image + '?' + Math.random();
imgTag.src = logo.image + '?' + Math.random();
if (props.logo.link.length !== 0) {
if (logo.link.length !== 0) {
var aTag = document.createElement('a');
aTag.setAttribute('href', props.logo.link);
aTag.setAttribute('href', logo.link);
aTag.setAttribute('target', '_blank');
aTag.appendChild(imgTag);
overlay = aTag.outerHTML;
@ -47,7 +68,7 @@ export default function Player(props) {
if (player.overlay) {
player.overlay({
align: props.logo.position,
align: logo.position,
overlays: [
{
showBackground: false,
@ -60,7 +81,7 @@ export default function Player(props) {
}
}
if (props.autoplay === true) {
if (autoplay === true) {
// https://videojs.com/blog/autoplay-best-practices-with-video-js/
const p = player.play();
@ -73,7 +94,7 @@ export default function Player(props) {
},
() => {
// autoplay did not work
}
},
);
}
}
@ -82,26 +103,3 @@ export default function Player(props) {
);
}
}
Player.defaultProps = {
type: 'videojs-internal',
source: '',
poster: '',
controls: false,
autoplay: false,
mute: false,
logo: {
image: '',
position: 'top-right',
link: '',
},
ga: {
account: '',
name: '',
},
colors: {
seekbar: '#fff',
buttons: '#fff',
},
statistics: false,
};

13
src/misc/Player/videojs.js
View File

@ -9,10 +9,9 @@ import './video-js-skin-internal.min.css';
import './video-js-skin-public.min.css';
import 'videojs-overlay/dist/videojs-overlay.css';
export default function VideoJS(props) {
export default function VideoJS({ type = 'videojs-internal', options = {}, onReady = null }) {
const videoRef = React.useRef(null);
const playerRef = React.useRef(null);
const { options, onReady } = props;
const retryVideo = () => {
const player = playerRef.current;
@ -34,7 +33,7 @@ export default function VideoJS(props) {
}));
// add internal/public skin style
if (props.type === 'videojs-public') {
if (type === 'videojs-public') {
player.addClass('vjs-public');
} else {
player.addClass('vjs-internal');
@ -55,8 +54,8 @@ export default function VideoJS(props) {
// player.autoplay(options.autoplay);
// player.src(options.sources);
}
// eslint-disable-next-line
}, [options, videoRef, onReady, props.type]);
// eslint-disable-next-line
}, [options, videoRef, onReady, type]);
// Dispose the Video.js player when the functional component unmounts
React.useEffect(() => {
@ -85,7 +84,3 @@ export default function VideoJS(props) {
</Grid>
);
}
VideoJS.defaultProps = {
type: 'videojs-internal',
};

105
src/misc/Progress.js
View File

@ -18,28 +18,92 @@ const useStyles = makeStyles((theme) => ({
},
}));
function init(props) {
function init({
valid = false,
order = 'stop',
state = 'disconnected',
error = '',
reconnect = -1,
bitrate = 0,
fps = 0,
time = 0,
speed = 0,
q = -1,
frames = 0,
drop = 0,
dup = 0,
command = [],
cpu = 0,
memory = 0,
video_codec = '',
audio_codec = '',
}) {
const initProps = {
time: 0,
fps: 0,
bitrate: 0,
q: -1,
speed: 0,
drop: 0,
dup: 0,
frames: 0,
cpu: 0,
memory: 0,
...props,
valid: valid,
order: order,
state: state,
error: error,
reconnect: reconnect,
bitrate: bitrate,
fps: fps,
time: time,
speed: speed,
q: q,
frames: frames,
drop: drop,
dup: dup,
command: command,
cpu: cpu,
memory: memory,
video_codec: video_codec,
audio_codec: audio_codec,
};
return initProps;
}
export default function Progress(props) {
export default function Progress({
valid = false,
order = 'stop',
state = 'disconnected',
error = '',
reconnect = -1,
bitrate = 0,
fps = 0,
time = 0,
speed = 0,
q = -1,
frames = 0,
drop = 0,
dup = 0,
command = [],
cpu = 0,
memory = 0,
video_codec = '',
audio_codec = '',
}) {
const classes = useStyles();
const progress = init(props);
const progress = init({
valid: valid,
order: order,
state: state,
error: error,
reconnect: reconnect,
bitrate: bitrate,
fps: fps,
time: time,
speed: speed,
q: q,
frames: frames,
drop: drop,
dup: dup,
command: command,
cpu: cpu,
memory: memory,
video_codec: video_codec,
audio_codec: audio_codec,
});
return (
<Grid container className={classes.box}>
@ -137,7 +201,7 @@ export default function Progress(props) {
<Grid item xs={12}>
<Typography variant="h4">
<strong>
<Number value={!isNaN((props.drop * 100) / props.frames) || 0} digits={2} minDigits={2} />%
<Number value={!isNaN((progress.drop * 100) / progress.frames) || 0} digits={2} minDigits={2} />%
</strong>
</Typography>
<Typography variant="body2" gutterBottom>
@ -160,14 +224,3 @@ export default function Progress(props) {
</Grid>
);
}
Progress.defaultProps = {
time: 0,
fps: 0,
bitrate: 0,
q: -1,
speed: 0,
drop: 0,
dup: 0,
frame: 0,
};

18
src/misc/Select.js
View File

@ -4,21 +4,13 @@ import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
export default function Component(props) {
export default function Component({ variant = 'outlined', label = '', value = '', disabled = false, onChange = function (event) {}, children = null }) {
return (
<FormControl variant={props.variant} fullWidth>
<InputLabel>{props.label}</InputLabel>
<Select value={props.value} onChange={props.onChange} disabled={props.disabled} label={props.label} MenuProps={{ disableScrollLock: true }}>
{props.children}
<FormControl variant={variant} fullWidth>
<InputLabel>{label}</InputLabel>
<Select value={value} onChange={onChange} disabled={disabled} label={label} MenuProps={{ disableScrollLock: true }}>
{children}
</Select>
</FormControl>
);
}
Component.defaultProps = {
variant: 'outlined',
label: '',
value: '',
disabled: false,
onChange: function (event) {},
};

85
src/misc/SelectCustom.js
View File

@ -17,11 +17,21 @@ function isCustomOption(value, options) {
return true;
}
export default function Component(props) {
export default function Component({
variant = 'outlined',
label = '',
value = '',
disabled = false,
customKey = 'custom',
customLabel = '',
allowCustom = false,
options = [],
onChange = function (event) {},
}) {
const [$value, setValue] = React.useState({
value: props.value,
isCustom: isCustomOption(props.value, props.options),
custom: isCustomOption(props.value, props.options) === true ? props.value : '',
value: value,
isCustom: isCustomOption(value, options),
custom: isCustomOption(value, options) === true ? value : '',
});
const handleChange = (event) => {
@ -29,7 +39,7 @@ export default function Component(props) {
const value = $value;
value.isCustom = v === props.customKey ? true : false;
value.isCustom = v === customKey ? true : false;
if (value.isCustom === true) {
value.custom = value.value;
}
@ -38,12 +48,12 @@ export default function Component(props) {
setValue({
...$value,
value: v,
isCustom: v === props.customKey ? true : false,
isCustom: v === customKey ? true : false,
});
props.onChange({
onChange({
target: {
value: v === props.customKey ? value.custom : value.value,
value: v === customKey ? value.custom : value.value,
},
});
};
@ -54,13 +64,13 @@ export default function Component(props) {
custom: event.target.value,
});
props.onChange(event);
onChange(event);
};
const options = [];
const selectOptions = [];
for (let o of props.options) {
options.push(
for (let o of options) {
selectOptions.push(
<MenuItem key={o.value} value={o.value} disabled={o.disabled === true}>
{o.label}
</MenuItem>,
@ -69,29 +79,29 @@ export default function Component(props) {
return (
<Grid container spacing={2}>
{props.allowCustom === true ? (
{allowCustom === true ? (
<React.Fragment>
{$value.isCustom === true ? (
<React.Fragment>
<Grid item xs={6}>
<FormControl variant={props.variant} fullWidth>
<InputLabel>{props.label}</InputLabel>
<FormControl variant={variant} fullWidth>
<InputLabel>{label}</InputLabel>
<Select
value={$value.isCustom === false ? $value.value : props.customKey}
value={$value.isCustom === false ? $value.value : customKey}
onChange={handleChange}
disabled={props.disabled}
label={props.label}
disabled={disabled}
label={label}
>
{options}
{selectOptions}
</Select>
</FormControl>
</Grid>
<Grid item xs={6}>
<TextField
variant={props.variant}
variant={variant}
fullWidth
disabled={props.disabled === true || $value.isCustom === false}
label={props.customLabel ? props.customLabel : props.label}
disabled={disabled === true || $value.isCustom === false}
label={customLabel ? customLabel : label}
value={$value.custom}
onChange={handleCustomChange}
/>
@ -99,15 +109,10 @@ export default function Component(props) {
</React.Fragment>
) : (
<Grid item xs={12}>
<FormControl variant={props.variant} fullWidth>
<InputLabel>{props.label}</InputLabel>
<Select
value={$value.isCustom === false ? $value.value : props.customKey}
onChange={handleChange}
disabled={props.disabled}
label={props.label}
>
{options}
<FormControl variant={variant} fullWidth>
<InputLabel>{label}</InputLabel>
<Select value={$value.isCustom === false ? $value.value : customKey} onChange={handleChange} disabled={disabled} label={label}>
{selectOptions}
</Select>
</FormControl>
</Grid>
@ -115,10 +120,10 @@ export default function Component(props) {
</React.Fragment>
) : (
<Grid item xs={12}>
<FormControl variant={props.variant} fullWidth>
<InputLabel>{props.label}</InputLabel>
<Select value={$value.value} onChange={handleChange} disabled={props.disabled} label={props.label}>
{options}
<FormControl variant={variant} fullWidth>
<InputLabel>{label}</InputLabel>
<Select value={$value.value} onChange={handleChange} disabled={disabled} label={label}>
{selectOptions}
</Select>
</FormControl>
</Grid>
@ -126,13 +131,3 @@ export default function Component(props) {
</Grid>
);
}
Component.defaultProps = {
variant: 'outlined',
label: '',
value: '',
disabled: false,
customKey: 'custom',
allowCustom: false,
onChange: function (event) {},
};

5
src/misc/TabPanel.js
View File

@ -13,12 +13,11 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function TabPanel(props) {
export default function TabPanel({ children = null, value = '', index = '' }) {
const classes = useStyles();
const { children, value, index, ...other } = props;
return (
<div className={classes.root} role="tabpanel" hidden={value !== index} id={`vertical-tabpanel-${index}`} {...other}>
<div className={classes.root} role="tabpanel" hidden={value !== index} id={`vertical-tabpanel-${index}`}>
{value === index && (
<Box classes={{ root: classes }} p={0}>
{children}

12
src/misc/TabsHorizontal.js
View File

@ -26,20 +26,14 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function Component(props) {
export default function Component({ value = '', children = null, onChange = function (event) {} }) {
const classes = useStyles();
return (
<Box className={classes.box}>
<Tabs className={classes.tabs} variant="scrollable" scrollButtons allowScrollButtonsMobile value={props.value} onChange={props.onChange}>
{props.children}
<Tabs className={classes.tabs} variant="scrollable" scrollButtons allowScrollButtonsMobile value={value} onChange={onChange}>
{children}
</Tabs>
</Box>
);
}
Component.defaultProps = {
value: '',
children: null,
onChange: function (event) {},
};

8
src/misc/TabsVerticalGrid.js
View File

@ -11,16 +11,12 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function Component(props) {
export default function Component({ children = null }) {
const classes = useStyles();
return (
<Grid item xs={12} className={classes.grid}>
{props.children}
{children}
</Grid>
);
}
Component.defaultProps = {
children: null,
};

47
src/misc/TextField.js
View File

@ -9,11 +9,22 @@ import OutlinedInput from '@mui/material/OutlinedInput';
import Env from './Env';
export default function Component(props) {
const id = props.id === null ? uuidv4() : props.id;
export default function Component({
id = null,
label = '',
value = '',
disabled = false,
multiline = false,
rows = 1,
env = false,
type = 'text',
helperText = null,
onChange = function (value) {},
}) {
id = id === null ? uuidv4() : id;
let adornment = null;
if (props.env) {
if (env) {
adornment = (
<InputAdornment position="end">
<Env />
@ -22,32 +33,10 @@ export default function Component(props) {
}
return (
<FormControl variant="outlined" disabled={props.disabled} fullWidth>
<InputLabel htmlFor={id}>{props.label}</InputLabel>
<OutlinedInput
id={id}
value={props.value}
onChange={props.onChange}
endAdornment={adornment}
label={props.label}
multiline={props.multiline}
rows={props.rows}
type={props.type}
/>
{props.helperText && <FormHelperText>{props.helperText}</FormHelperText>}
<FormControl variant="outlined" disabled={disabled} fullWidth>
<InputLabel htmlFor={id}>{label}</InputLabel>
<OutlinedInput id={id} value={value} onChange={onChange} endAdornment={adornment} label={label} multiline={multiline} rows={rows} type={type} />
{helperText && <FormHelperText>{helperText}</FormHelperText>}
</FormControl>
);
}
Component.defaultProps = {
id: null,
label: '',
value: '',
disabled: false,
multiline: false,
rows: 1,
env: false,
type: 'text',
helperText: null,
onChange: function (value) {},
};

44
src/misc/TextFieldCopy.js
View File

@ -20,14 +20,26 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function Component(props) {
export default function Component({
id = null,
label = '',
value = '',
disabled = false,
multiline = false,
rows = 1,
type = 'text',
readOnly = true,
allowCopy = true,
size = 'small',
onChange = function (value) {},
}) {
const classes = useStyles();
const { i18n } = useLingui();
const notify = useContext(NotifyContext);
const handleCopy = async () => {
const success = await CopyToClipboard(props.value);
const success = await CopyToClipboard(value);
if (success === true) {
notify.Dispatch('success', 'clipboard', i18n._(t`Data copied to clipboard`));
@ -37,18 +49,18 @@ export default function Component(props) {
};
return (
<FormControl variant="outlined" disabled={props.disabled} fullWidth>
<InputLabel htmlFor={props.id}>{props.label}</InputLabel>
<FormControl variant="outlined" disabled={disabled} fullWidth>
<InputLabel htmlFor={id}>{label}</InputLabel>
<OutlinedInput
className={classes.root}
id={props.id}
value={props.value}
label={props.label}
type={props.type}
id={id}
value={value}
label={label}
type={type}
inputprops={{
readOnly: true,
}}
size={props.size}
size={size}
endAdornment={
<IconButton size="small" onClick={handleCopy}>
<FileCopyIcon fontSize="small" />
@ -58,17 +70,3 @@ export default function Component(props) {
</FormControl>
);
}
Component.defaultProps = {
id: null,
label: '',
value: '',
disabled: false,
multiline: false,
rows: 1,
type: 'text',
readOnly: true,
allowCopy: true,
size: 'small',
onChange: function (value) {},
};

85
src/misc/Textarea.js
View File

@ -12,7 +12,21 @@ import NotifyContext from '../contexts/Notify';
import Palette from '../theme/base/palette';
import TextareaModal from './modals/Textarea';
export default function Component(props) {
export default function Component({
title = '',
rows = 20,
value = '',
readOnly = true,
allowCopy = true,
allowModal = false,
allowDownload = false,
downloadName = '',
disabled = false,
scrollTo = 'top',
onChange = function (value) {},
onHelp = null,
content = null,
}) {
const { i18n } = useLingui();
const [$modal, setModal] = React.useState(false);
@ -20,10 +34,8 @@ export default function Component(props) {
const notify = useContext(NotifyContext);
const textAreaRef = React.createRef();
const { content } = props;
React.useEffect(() => {
scrollTo();
scrollToAction();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [content]);
@ -62,8 +74,8 @@ export default function Component(props) {
});
};
const scrollTo = () => {
if (props.scrollTo === 'bottom') {
const scrollToAction = () => {
if (scrollTo === 'bottom') {
textAreaRef.current.scrollTop = textAreaRef.current.scrollHeight;
}
@ -72,8 +84,8 @@ export default function Component(props) {
const handleDownload = () => {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(props.value));
element.setAttribute('download', props.downloadName);
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(value));
element.setAttribute('download', downloadName);
element.style.display = 'none';
document.body.appendChild(element);
@ -83,18 +95,15 @@ export default function Component(props) {
document.body.removeChild(element);
};
let allowCopy = props.allowCopy;
if (props.value.length === 0 || props.disabled === true) {
if (value.length === 0 || disabled === true) {
allowCopy = false;
}
let allowModal = props.allowModal;
if (props.value.length === 0 || props.disabled === true) {
if (value.length === 0 || disabled === true) {
allowModal = false;
}
let allowDownload = props.allowDownload;
if (props.value.length === 0 || props.disabled === true || props.downloadName.length === 0) {
if (value.length === 0 || disabled === true || downloadName.length === 0) {
allowDownload = false;
}
@ -113,10 +122,10 @@ export default function Component(props) {
backgroundColor: Palette.background.footer2,
},
};
if (props.rows === 1) {
if (rows === 1) {
textAreaStyle = {
...textAreaStyle,
height: 18 * props.rows + 9.5 + 'px',
height: 18 * rows + 9.5 + 'px',
overflowY: 'hidden',
marginBottom: '0em',
marginTop: '0em',
@ -134,7 +143,7 @@ export default function Component(props) {
} else {
textAreaStyle = {
...textAreaStyle,
height: 18 * props.rows + 8 + 'px',
height: 18 * rows + 8 + 'px',
};
textAreaDivStyle = {
...textAreaDivStyle,
@ -167,45 +176,21 @@ export default function Component(props) {
</IconButton>
)}
</Stack>
<textarea
style={textAreaStyle}
ref={textAreaRef}
rows={props.rows}
value={props.value}
readOnly={props.readOnly}
disabled={props.disabled}
onChange={props.onChange}
/>
<textarea style={textAreaStyle} ref={textAreaRef} rows={rows} value={value} readOnly={readOnly} disabled={disabled} onChange={onChange} />
</Stack>
<TextareaModal
open={$modal}
onClose={handleModal}
title={props.title}
onHelp={props.onHelp}
rows={props.rows}
value={props.value}
readOnly={props.readOnly}
disabled={props.disabled}
onChange={props.onChange}
scrollTo={props.scrollTo}
{...props}
title={title}
onHelp={onHelp}
rows={rows}
value={value}
readOnly={readOnly}
disabled={disabled}
onChange={onChange}
scrollTo={scrollToAction}
allowModal={false}
/>
</React.Fragment>
);
}
Component.defaultProps = {
title: '',
rows: 20,
value: '',
readOnly: true,
allowCopy: true,
allowModal: false,
allowDownload: false,
downloadName: '',
disabled: false,
scrollTo: 'top',
onChange: function (value) {},
onHelp: null,
};

40
src/misc/UploadButton.js
View File

@ -2,10 +2,17 @@ import React from 'react';
import FormInlineButton from './FormInlineButton';
export default function UploadButton(props) {
const { acceptTypes, label, onError, onStart, onUpload, ...other } = props;
const accept = props.acceptTypes.map((t) => t.mimetype);
export default function UploadButton({
label = '',
acceptTypes = [],
onStart = function () {},
onError = function () {},
onUpload = function (data, extension) {},
variant = 'outlined',
color = 'primary',
disabled = false,
}) {
const accept = acceptTypes.map((t) => t.mimetype);
const handleUpload = (event) => {
const handler = (event) => {
@ -13,7 +20,7 @@ export default function UploadButton(props) {
if (files.length === 0) {
// no files selected
props.onError({
onError({
type: 'nofiles',
});
return;
@ -22,7 +29,7 @@ export default function UploadButton(props) {
const file = files[0];
let type = null;
for (let t of props.acceptTypes) {
for (let t of acceptTypes) {
const accept = t.mimetype.split('/');
const actual = file.type.split('/');
@ -38,7 +45,7 @@ export default function UploadButton(props) {
if (type === null) {
// not one of the allowed mimetypes
props.onError({
onError({
type: 'mimetype',
actual: file.type,
allowed: accept.slice(),
@ -48,7 +55,7 @@ export default function UploadButton(props) {
if (file.size > type.maxSize) {
// the file is too big
props.onError({
onError({
type: 'size',
actual: file.size,
allowed: type.maxSize,
@ -61,18 +68,18 @@ export default function UploadButton(props) {
reader.onloadend = async () => {
if (reader.result === null) {
// reading the file failed
props.onError({
onError({
type: 'read',
message: reader.error.message,
});
return;
}
props.onUpload(reader.result, type.extension, type.mimetype);
onUpload(reader.result, type.extension, type.mimetype);
};
};
props.onStart();
onStart();
handler(event);
@ -82,16 +89,9 @@ export default function UploadButton(props) {
};
return (
<FormInlineButton component="label" {...other}>
{props.label}
<FormInlineButton component="label" variant={variant} color={color} disabled={disabled}>
{label}
<input accept={accept.join(',')} type="file" hidden onChange={handleUpload} />
</FormInlineButton>
);
}
UploadButton.defaultProps = {
label: '',
acceptTypes: [],
onError: function () {},
onUpload: function (data, extension) {},
};

17
src/misc/coders/Decoders/audio/default.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'default';
const name = 'Default';
const codecs = [];

17
src/misc/coders/Decoders/video/av1_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
// -hwaccel nvdec
const coder = 'av1_cuvid';

17
src/misc/coders/Decoders/video/default.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'default';
const name = 'Default';
const codecs = [];

17
src/misc/coders/Decoders/video/h264_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
// -c:v h264_cuvid -i ...
const coder = 'h264_cuvid';

17
src/misc/coders/Decoders/video/h264_mmal.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'h264_mmal';
const name = 'H.264 (MMAL)';
const codecs = ['h264'];

17
src/misc/coders/Decoders/video/hevc_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'hevc_cuvid';
const name = 'HEVC (CUVID)';
const codecs = ['hevc'];

17
src/misc/coders/Decoders/video/mjpeg_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'mjpeg_cuvid';
const name = 'MJPEG (CUVID)';
const codecs = ['mjpeg'];

17
src/misc/coders/Decoders/video/mpeg1_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'mpeg1_cuvid';
const name = 'MPEG1 (CUVID)';
const codecs = ['mpeg1'];

17
src/misc/coders/Decoders/video/mpeg2_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'mpeg2_cuvid';
const name = 'MPEG2 (CUVID)';
const codecs = ['mpeg2'];

17
src/misc/coders/Decoders/video/mpeg2_mmal.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'mpeg2_mmal';
const name = 'MPEG2 (MMAL)';
const codecs = ['mpeg2'];

17
src/misc/coders/Decoders/video/mpeg4_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'mpeg4_cuvid';
const name = 'MPEG4 (CUVID)';
const codecs = ['mpeg4'];

17
src/misc/coders/Decoders/video/mpeg4_mmal.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'mpeg4_mmal';
const name = 'MPEG4 (MMAL)';
const codecs = ['mpeg4'];

17
src/misc/coders/Decoders/video/nvdec.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
// -hwaccel cuda -hwaccel_output_format cuda
const coder = 'cuda';

17
src/misc/coders/Decoders/video/vc1_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'vc1_cuvid';
const name = 'VC1 (CUVID)';
const codecs = ['vc1'];

17
src/misc/coders/Decoders/video/vc1_mmal.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'vc1_mmal';
const name = 'VC1 (MMAL)';
const codecs = ['vc1'];

17
src/misc/coders/Decoders/video/videotoolbox.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'videotoolbox';
const name = 'VideoToolbox';
const codecs = ['h264', 'hevc', 'vp9', 'mpeg1', 'mpeg2', 'mpeg4'];

17
src/misc/coders/Decoders/video/vp8_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'vp8_cuvid';
const name = 'VP8 (CUVID)';
const codecs = ['vp8'];

17
src/misc/coders/Decoders/video/vp9_cuvid.js
View File

@ -23,10 +23,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -35,7 +35,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -46,13 +46,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'vp9_cuvid';
const name = 'VP9 (CUVID)';
const codecs = ['vp9'];

17
src/misc/coders/Encoders/audio/aac.js
View File

@ -33,10 +33,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -45,7 +45,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -73,13 +73,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'aac';
const name = 'AAC';
const codec = 'aac';

17
src/misc/coders/Encoders/audio/aac_audiotoolbox.js
View File

@ -33,10 +33,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -45,7 +45,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -73,13 +73,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'aac_at';
const name = 'AAC (AudioToolbox)';
const codec = 'aac';

17
src/misc/coders/Encoders/audio/aac_libfdk.js
View File

@ -33,10 +33,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -45,7 +45,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -73,13 +73,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libfdk_aac';
const name = 'AAC (libfdk)';
const codec = 'aac';

17
src/misc/coders/Encoders/audio/copy.js
View File

@ -21,10 +21,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = {};
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = {};
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -33,7 +33,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -44,13 +44,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'copy';
const name = 'Passthrough (copy)';
const codec = 'copy';

17
src/misc/coders/Encoders/audio/mp3_libmp3lame.js
View File

@ -30,10 +30,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -42,7 +42,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -70,13 +70,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libmp3lame';
const name = 'MP3 (libmp3lame)';
const codec = 'mp3';

17
src/misc/coders/Encoders/audio/none.js
View File

@ -17,10 +17,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = {};
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = {};
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -29,7 +29,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -40,13 +40,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'none';
const name = 'No Audio';
const codec = 'none';

52
src/misc/coders/Encoders/audio/opus.js
View File

@ -50,7 +50,15 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Delay(props) {
function Delay({
value = '',
variant = 'outlined',
allowAuto = false,
allowCustom = false,
label = <Trans>Delay</Trans>,
customLabel = <Trans>Custom delay</Trans>,
onChange = function () {},
}) {
const { i18n } = useLingui();
const options = [
{ value: '20', label: '20ms' },
@ -58,11 +66,11 @@ function Delay(props) {
{ value: '50', label: '50ms' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
options.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
options.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
@ -70,12 +78,12 @@ function Delay(props) {
<React.Fragment>
<SelectCustom
options={options}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
label={label}
customLabel={customLabel}
value={value}
onChange={onChange}
variant={variant}
allowCustom={allowCustom}
/>
<Typography variant="caption">
<Trans>Maximum delay in milliseconds.</Trans>
@ -84,19 +92,10 @@ function Delay(props) {
);
}
Delay.defaultProps = {
variant: 'outlined',
allowAuto: false,
allowCustom: false,
label: <Trans>Delay</Trans>,
customLabel: <Trans>Custom delay</Trans>,
onChange: function () {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -105,7 +104,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -136,13 +135,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'opus';
const name = 'Opus';
const codec = 'opus';

17
src/misc/coders/Encoders/audio/opus_libopus.js
View File

@ -29,10 +29,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -41,7 +41,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -69,13 +69,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libopus';
const name = 'Opus (libopus)';
const codec = 'opus';

17
src/misc/coders/Encoders/audio/vorbis.js
View File

@ -29,10 +29,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -41,7 +41,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -69,13 +69,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'vorbis';
const name = 'Vorbis';
const codec = 'vorbis';

17
src/misc/coders/Encoders/audio/vorbis_libvorbis.js
View File

@ -29,10 +29,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -41,7 +41,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -69,13 +69,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libvorbis';
const name = 'Vorbis (libvorbis)';
const codec = 'vorbis';

26
src/misc/coders/Encoders/video/av1_libaom.js
View File

@ -66,10 +66,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Usage(props) {
function Usage({ value = '', onChange = function (event) {} }) {
return (
<React.Fragment>
<Select label={<Trans>Usage</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Usage</Trans>} value={value} onChange={onChange}>
<MenuItem value="good">good</MenuItem>
<MenuItem value="realtime">realtime</MenuItem>
<MenuItem value="allintra">allintra</MenuItem>
@ -81,15 +81,10 @@ function Usage(props) {
);
}
Usage.defaultProps = {
value: 'realtime',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -98,7 +93,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -138,13 +133,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libaom-av1';
const name = 'AV1 (libaom)';
const codec = 'av1';

26
src/misc/coders/Encoders/video/av1_librav1e.js
View File

@ -84,10 +84,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Speed(props) {
function Speed({ value = '', onChange = function (event) {} }) {
return (
<React.Fragment>
<Select label={<Trans>Speed Preset</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Speed Preset</Trans>} value={value} onChange={onChange}>
<MenuItem value="-1">auto (-1)</MenuItem>
<MenuItem value="0">slowest (0)</MenuItem>
<MenuItem value="1">1</MenuItem>
@ -108,15 +108,10 @@ function Speed(props) {
);
}
Speed.defaultProps = {
value: '-1',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -125,7 +120,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -227,13 +222,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'librav1e';
const name = 'AV1 (librav1e)';
const codec = 'av1';

17
src/misc/coders/Encoders/video/copy.js
View File

@ -17,10 +17,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = {};
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = {};
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -29,7 +29,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -40,13 +40,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
function summarize(settings) {
return `${name}`;
}

35
src/misc/coders/Encoders/video/h264_libx264.js
View File

@ -77,9 +77,9 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Preset(props) {
function Preset({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Preset</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Preset</Trans>} value={value} onChange={onChange}>
<MenuItem value="ultrafast">ultrafast</MenuItem>
<MenuItem value="superfast">superfast</MenuItem>
<MenuItem value="veryfast">veryfast</MenuItem>
@ -93,14 +93,9 @@ function Preset(props) {
);
}
Preset.defaultProps = {
value: '',
onChange: function (event) {},
};
function Tune(props) {
function Tune({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Tune</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Tune</Trans>} value={value} onChange={onChange}>
<MenuItem value="none">none</MenuItem>
<MenuItem value="animation">animation</MenuItem>
<MenuItem value="fastdecode">fastdecode</MenuItem>
@ -112,15 +107,10 @@ function Tune(props) {
);
}
Tune.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -129,7 +119,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -175,13 +165,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libx264';
const name = 'H.264 (libx264)';
const codec = 'h264';

53
src/misc/coders/Encoders/video/h264_nvenc.js
View File

@ -70,9 +70,9 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Preset(props) {
function Preset({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Preset</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Preset</Trans>} value={value} onChange={onChange}>
<MenuItem value="default">default</MenuItem>
<MenuItem value="slow">slow</MenuItem>
<MenuItem value="medium">medium</MenuItem>
@ -90,14 +90,9 @@ function Preset(props) {
);
}
Preset.defaultProps = {
value: '',
onChange: function (event) {},
};
function Profile(props) {
function Profile({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Profile</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Profile</Trans>} value={value} onChange={onChange}>
<MenuItem value="auto">auto</MenuItem>
<MenuItem value="baseline">baseline</MenuItem>
<MenuItem value="main">main</MenuItem>
@ -107,14 +102,9 @@ function Profile(props) {
);
}
Profile.defaultProps = {
value: '',
onChange: function (event) {},
};
function Level(props) {
function Level({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Level</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Level</Trans>} value={value} onChange={onChange}>
<MenuItem value="auto">auto</MenuItem>
<MenuItem value="1">1</MenuItem>
<MenuItem value="1.0">1.0</MenuItem>
@ -142,14 +132,9 @@ function Level(props) {
);
}
Level.defaultProps = {
value: '',
onChange: function (event) {},
};
function RateControl(props) {
function RateControl({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Rate control</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Rate control</Trans>} value={value} onChange={onChange}>
<MenuItem value="auto">auto</MenuItem>
<MenuItem value="constqp">constqp</MenuItem>
<MenuItem value="vbr">vbr</MenuItem>
@ -161,15 +146,10 @@ function RateControl(props) {
);
}
RateControl.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -178,7 +158,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -222,13 +202,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'h264_nvenc';
const name = 'H.264 (NVENC)';
const codec = 'h264';

17
src/misc/coders/Encoders/video/h264_omx.js
View File

@ -53,10 +53,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -65,7 +65,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -100,13 +100,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'h264_omx';
const name = 'H.264 (OpenMAX IL)';
const codec = 'h264';

17
src/misc/coders/Encoders/video/h264_v4l2m2m.js
View File

@ -131,10 +131,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -143,7 +143,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -199,13 +199,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'h264_v4l2m2m';
const name = 'H.264 (V4L2 Memory to Memory)';
const codec = 'h264';

35
src/misc/coders/Encoders/video/h264_vaapi.js
View File

@ -65,9 +65,9 @@ function createMapping(settings, stream, skills) {
};
}
function RateControl(props) {
function RateControl({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Rate control</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Rate control</Trans>} value={value} onChange={onChange}>
<MenuItem value="0">auto</MenuItem>
<MenuItem value="1">Constant-quality</MenuItem>
<MenuItem value="2">Constant-bitrate</MenuItem>
@ -79,14 +79,9 @@ function RateControl(props) {
);
}
RateControl.defaultProps = {
value: '',
onChange: function (event) {},
};
function Profile(props) {
function Profile({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Profile</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Profile</Trans>} value={value} onChange={onChange}>
<MenuItem value="578">baseline (constrained)</MenuItem>
<MenuItem value="77">main</MenuItem>
<MenuItem value="100">high</MenuItem>
@ -94,15 +89,10 @@ function Profile(props) {
);
}
Profile.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -111,7 +101,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -152,13 +142,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'h264_vaapi';
const name = 'H.264 (Intel VAAPI)';
const codec = 'h264';

26
src/misc/coders/Encoders/video/h264_videotoolbox.js
View File

@ -64,9 +64,9 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Entropy(props) {
function Entropy({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Entropy coder</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Entropy coder</Trans>} value={value} onChange={onChange}>
<MenuItem value="default">default</MenuItem>
<MenuItem value="cavlc">CAVLC</MenuItem>
<MenuItem value="cabac">CABAC</MenuItem>
@ -74,15 +74,10 @@ function Entropy(props) {
);
}
Entropy.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -91,7 +86,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -129,13 +124,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'h264_videotoolbox';
const name = 'H.264 (VideoToolbox)';
const codec = 'h264';

35
src/misc/coders/Encoders/video/hevc_libx265.js
View File

@ -77,9 +77,9 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Preset(props) {
function Preset({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Preset</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Preset</Trans>} value={value} onChange={onChange}>
<MenuItem value="ultrafast">ultrafast</MenuItem>
<MenuItem value="superfast">superfast</MenuItem>
<MenuItem value="veryfast">veryfast</MenuItem>
@ -93,14 +93,9 @@ function Preset(props) {
);
}
Preset.defaultProps = {
value: '',
onChange: function (event) {},
};
function Tune(props) {
function Tune({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Tune</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Tune</Trans>} value={value} onChange={onChange}>
<MenuItem value="none">none</MenuItem>
<MenuItem value="animation">animation</MenuItem>
<MenuItem value="fastdecode">fastdecode</MenuItem>
@ -112,15 +107,10 @@ function Tune(props) {
);
}
Tune.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -129,7 +119,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -175,13 +165,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libx265';
const name = 'HEVC (libx265)';
const codec = 'hevc';

35
src/misc/coders/Encoders/video/hevc_vaapi.js
View File

@ -67,9 +67,9 @@ function createMapping(settings, stream, skills) {
};
}
function RateControl(props) {
function RateControl({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Rate control</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Rate control</Trans>} value={value} onChange={onChange}>
<MenuItem value="0">auto</MenuItem>
<MenuItem value="1">Constant-quality</MenuItem>
<MenuItem value="2">Constant-bitrate</MenuItem>
@ -81,14 +81,9 @@ function RateControl(props) {
);
}
RateControl.defaultProps = {
value: '',
onChange: function (event) {},
};
function Profile(props) {
function Profile({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Profile</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Profile</Trans>} value={value} onChange={onChange}>
<MenuItem value="578">baseline (constrained)</MenuItem>
<MenuItem value="77">main</MenuItem>
<MenuItem value="100">high</MenuItem>
@ -96,15 +91,10 @@ function Profile(props) {
);
}
Profile.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -113,7 +103,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -154,13 +144,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'hevc_vaapi';
const name = 'HEVC (Intel VAAPI)';
const codec = 'hevc';

26
src/misc/coders/Encoders/video/hevc_videotoolbox.js
View File

@ -59,9 +59,9 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Profile(props) {
function Profile({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Profile</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Profile</Trans>} value={value} onChange={onChange}>
<MenuItem value="auto">auto</MenuItem>
<MenuItem value="main">main</MenuItem>
<MenuItem value="main10">main10</MenuItem>
@ -69,15 +69,10 @@ function Profile(props) {
);
}
Profile.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -86,7 +81,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -121,13 +116,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'hevc_videotoolbox';
const name = 'HEVC (VideoToolbox)';
const codec = 'hevc';

17
src/misc/coders/Encoders/video/none.js
View File

@ -17,10 +17,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = {};
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = {};
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -29,7 +29,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -40,13 +40,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'none';
const name = 'No Video';
const codec = 'none';

17
src/misc/coders/Encoders/video/rawvideo.js
View File

@ -17,10 +17,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = {};
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = {};
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -29,7 +29,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
React.useEffect(() => {
@ -40,13 +40,6 @@ function Coder(props) {
return null;
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
function summarize(settings) {
return `${name}`;
}

17
src/misc/coders/Encoders/video/vp9_libvpx.js
View File

@ -62,10 +62,10 @@ function createMapping(settings, stream, skills) {
return mapping;
}
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -74,7 +74,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -111,13 +111,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'libvpx-vp9';
const name = 'VP9 (libvpx-vp9)';
const codec = 'vp9';

35
src/misc/coders/Encoders/video/vp9_vaapi.js
View File

@ -67,9 +67,9 @@ function createMapping(settings, stream, skills) {
};
}
function RateControl(props) {
function RateControl({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Rate control</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Rate control</Trans>} value={value} onChange={onChange}>
<MenuItem value="0">auto</MenuItem>
<MenuItem value="1">Constant-quality</MenuItem>
<MenuItem value="2">Constant-bitrate</MenuItem>
@ -81,14 +81,9 @@ function RateControl(props) {
);
}
RateControl.defaultProps = {
value: '',
onChange: function (event) {},
};
function Profile(props) {
function Profile({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Profile</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Profile</Trans>} value={value} onChange={onChange}>
<MenuItem value="578">baseline (constrained)</MenuItem>
<MenuItem value="77">main</MenuItem>
<MenuItem value="100">high</MenuItem>
@ -96,15 +91,10 @@ function Profile(props) {
);
}
Profile.defaultProps = {
value: '',
onChange: function (event) {},
};
function Coder(props) {
const settings = init(props.settings);
const stream = Helper.InitStream(props.stream);
const skills = Helper.InitSkills(props.skills);
function Coder({ stream = {}, settings = {}, skills = {}, onChange = function (settings, mapping) {} }) {
settings = init(settings);
stream = Helper.InitStream(stream);
skills = Helper.InitSkills(skills);
const handleChange = (newSettings) => {
let automatic = false;
@ -113,7 +103,7 @@ function Coder(props) {
automatic = true;
}
props.onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
onChange(newSettings, createMapping(newSettings, stream, skills), automatic);
};
const update = (what) => (event) => {
@ -154,13 +144,6 @@ function Coder(props) {
);
}
Coder.defaultProps = {
stream: {},
settings: {},
skills: {},
onChange: function (settings, mapping) {},
};
const coder = 'vp9_vaapi';
const name = 'VP9 (Intel VAAPI)';
const codec = 'vp9';

116
src/misc/coders/settings/Audio.js
View File

@ -6,7 +6,15 @@ import Typography from '@mui/material/Typography';
import SelectCustom from '../../../misc/SelectCustom';
function Bitrate(props) {
function Bitrate({
value = '',
allowAuto = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Bitrate</Trans>,
customLabel = <Trans>Custom bitrate (kbit/s)</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const bitrates = [
{ value: '256', label: '256 kbit/s' },
@ -17,11 +25,11 @@ function Bitrate(props) {
{ value: '8', label: '8 kbit/s' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
bitrates.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
bitrates.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
@ -29,12 +37,12 @@ function Bitrate(props) {
<React.Fragment>
<SelectCustom
options={bitrates}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
label={label}
customLabel={customLabel}
value={value}
onChange={onChange}
variant={variant}
allowCustom={allowCustom}
/>
<Typography variant="caption">
<Trans>The bitrate of the audio stream.</Trans>
@ -43,23 +51,24 @@ function Bitrate(props) {
);
}
Bitrate.defaultProps = {
allowAuto: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Bitrate</Trans>,
customLabel: <Trans>Custom bitrate (kbit/s)</Trans>,
onChange: function (event) {},
};
function Layout(props) {
function Layout({
value = '',
extended = false,
variant = 'outlined',
allowAuto = false,
allowInherit = false,
allowCustom = false,
label = <Trans>Layout</Trans>,
customLabel = <Trans>Custom layout</Trans>,
onChange = function () {},
}) {
const { i18n } = useLingui();
const options = [
{ value: 'mono', label: 'mono' },
{ value: 'stereo', label: 'stereo' },
];
if (props.extended) {
if (extended) {
options.push(
...[
{ value: '2.1', label: '2.1' },
@ -99,15 +108,15 @@ function Layout(props) {
);
}
if (props.allowAuto === true) {
if (allowAuto === true) {
options.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowInherit === true) {
if (allowInherit === true) {
options.unshift({ value: 'inherit', label: i18n._(t`Inherit`) });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
options.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
@ -115,12 +124,12 @@ function Layout(props) {
<React.Fragment>
<SelectCustom
options={options}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
label={label}
customLabel={customLabel}
value={value}
onChange={onChange}
variant={variant}
allowCustom={allowCustom}
/>
<Typography variant="caption">
<Trans>The layout of the audio stream.</Trans>
@ -129,17 +138,16 @@ function Layout(props) {
);
}
Layout.defaultProps = {
variant: 'outlined',
allowAuto: false,
allowInherit: false,
allowCustom: false,
label: <Trans>Layout</Trans>,
customLabel: <Trans>Custom layout</Trans>,
onChange: function () {},
};
function Sampling(props) {
function Sampling({
value = '',
variant = 'outlined',
allowAuto = false,
allowInherit = false,
allowCustom = false,
label = <Trans>Sampling</Trans>,
customLabel = <Trans>Custom sampling (Hz)</Trans>,
onChange = function () {},
}) {
const { i18n } = useLingui();
const options = [
{ value: '96000', label: '96000 Hz' },
@ -150,15 +158,15 @@ function Sampling(props) {
{ value: '8000', label: '8000 Hz' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
options.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowInherit === true) {
if (allowInherit === true) {
options.unshift({ value: 'inherit', label: i18n._(t`Inherit`) });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
options.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
@ -166,12 +174,12 @@ function Sampling(props) {
<React.Fragment>
<SelectCustom
options={options}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
label={label}
customLabel={customLabel}
value={value}
onChange={onChange}
variant={variant}
allowCustom={allowCustom}
/>
<Typography variant="caption">
<Trans>The sample rate of the audio stream.</Trans>
@ -180,16 +188,6 @@ function Sampling(props) {
);
}
Sampling.defaultProps = {
variant: 'outlined',
allowAuto: false,
allowInherit: false,
allowCustom: false,
label: <Trans>Sampling</Trans>,
customLabel: <Trans>Custom sampling (Hz)</Trans>,
onChange: function () {},
};
export default {
Bitrate,
Layout,

282
src/misc/coders/settings/Video.js
View File

@ -7,7 +7,15 @@ import MenuItem from '@mui/material/MenuItem';
import Select from '../../../misc/Select';
import SelectCustom from '../../../misc/SelectCustom';
function Bitrate(props) {
function Bitrate({
value = '',
allowAuto = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Bitrate</Trans>,
customLabel = <Trans>Custom bitrate (kbit/s)</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const bitrates = [
{ value: '32768', label: '32768 kbit/s' },
@ -23,37 +31,36 @@ function Bitrate(props) {
{ value: '256', label: '256 kbit/s' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
bitrates.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
bitrates.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={bitrates}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
label={label}
customLabel={customLabel}
value={value}
onChange={onChange}
variant={variant}
allowCustom={allowCustom}
/>
);
}
Bitrate.defaultProps = {
allowAuto: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Bitrate</Trans>,
customLabel: <Trans>Custom bitrate (kbit/s)</Trans>,
onChange: function (event) {},
};
function GOP(props) {
function GOP({
value = '',
allowAuto = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Keyframe interval (seconds)</Trans>,
customLabel = <Trans>Custom keyframe interval</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const bitrates = [
{ value: '1', label: '1' },
@ -62,37 +69,36 @@ function GOP(props) {
{ value: '10', label: '10' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
bitrates.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
bitrates.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={bitrates}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
label={label}
customLabel={customLabel}
value={value}
onChange={onChange}
variant={variant}
allowCustom={allowCustom}
/>
);
}
GOP.defaultProps = {
allowAuto: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Keyframe interval (seconds)</Trans>,
customLabel: <Trans>Custom keyframe interval</Trans>,
onChange: function (event) {},
};
function Framerate(props) {
function Framerate({
value = '',
allowAuto = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Framerate</Trans>,
customLabel = <Trans>Custom framerate</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const sizes = [
{ value: '60', label: '60' },
@ -107,39 +113,22 @@ function Framerate(props) {
{ value: '10', label: '10' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
sizes.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={sizes}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
/>
<SelectCustom options={sizes} label={label} customLabel={customLabel} value={value} onChange={onChange} variant={variant} allowCustom={allowCustom} />
);
}
Framerate.defaultProps = {
allowAuto: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Framerate</Trans>,
customLabel: <Trans>Custom framerate</Trans>,
onChange: function (event) {},
};
function Profile(props) {
function Profile({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Profile</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Profile</Trans>} value={value} onChange={onChange}>
<MenuItem value="auto">auto</MenuItem>
<MenuItem value="baseline">baseline</MenuItem>
<MenuItem value="main">main</MenuItem>
@ -148,13 +137,16 @@ function Profile(props) {
);
}
Profile.defaultProps = {
value: '',
onChange: function (event) {},
};
// https://en.wikipedia.org/wiki/Graphics_display_resolution
function Size(props) {
function Size({
value = '',
allowAuto = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Size</Trans>,
customLabel = <Trans>Custom size</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const sizes = [
{ value: '7680x4320', label: '7680x4320 (8K UHD)' },
@ -173,37 +165,28 @@ function Size(props) {
{ value: '640x360', label: '640x360 (nHD)' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
sizes.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={sizes}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
/>
<SelectCustom options={sizes} label={label} customLabel={customLabel} value={value} onChange={onChange} variant={variant} allowCustom={allowCustom} />
);
}
Size.defaultProps = {
allowAuto: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Size</Trans>,
customLabel: <Trans>Custom size</Trans>,
onChange: function (event) {},
};
function Height(props) {
function Height({
value = '',
allowNone = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Height</Trans>,
customLabel = <Trans>Custom size</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const height = [
{ value: '4320', label: '4320' },
@ -219,33 +202,24 @@ function Height(props) {
{ value: '360', label: '360' },
];
if (props.allowCustom === true) {
if (allowCustom === true) {
height.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={height}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
/>
<SelectCustom options={height} label={label} customLabel={customLabel} value={value} onChange={onChange} variant={variant} allowCustom={allowCustom} />
);
}
Height.defaultProps = {
allowNone: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Height</Trans>,
customLabel: <Trans>Custom size</Trans>,
onChange: function (event) {},
};
function Width(props) {
function Width({
value = '',
allowNone = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Width</Trans>,
customLabel = <Trans>Custom size</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const width = [
{ value: '7680', label: '7680' },
@ -262,33 +236,24 @@ function Width(props) {
{ value: '640', label: '640' },
];
if (props.allowCustom === true) {
if (allowCustom === true) {
width.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={width}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
/>
<SelectCustom options={width} label={label} customLabel={customLabel} value={value} onChange={onChange} variant={variant} allowCustom={allowCustom} />
);
}
Width.defaultProps = {
allowNone: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Width</Trans>,
customLabel: <Trans>Custom size</Trans>,
onChange: function (event) {},
};
function Format(props) {
function Format({
value = '',
allowAuto = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Format</Trans>,
customLabel = <Trans>Custom format</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const sizes = [
{ value: 'yuv420p', label: 'yuv420p' },
@ -297,76 +262,50 @@ function Format(props) {
{ value: 'mjpeg', label: 'MJPEG' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
sizes.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={sizes}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
/>
<SelectCustom options={sizes} label={label} customLabel={customLabel} value={value} onChange={onChange} variant={variant} allowCustom={allowCustom} />
);
}
Format.defaultProps = {
allowAuto: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Format</Trans>,
customLabel: <Trans>Custom format</Trans>,
onChange: function (event) {},
};
function PixFormat(props) {
function PixFormat({
value = '',
allowAuto = false,
allowCustom = false,
variant = 'outlined',
label = <Trans>Pixel Format</Trans>,
customLabel = <Trans>Custom format</Trans>,
onChange = function (event) {},
}) {
const { i18n } = useLingui();
const sizes = [
{ value: 'yuv420p', label: 'yuv420p' },
{ value: 'nv12', label: 'nv12' },
];
if (props.allowAuto === true) {
if (allowAuto === true) {
sizes.unshift({ value: 'auto', label: 'auto' });
}
if (props.allowCustom === true) {
if (allowCustom === true) {
sizes.push({ value: 'custom', label: i18n._(t`Custom ...`) });
}
return (
<SelectCustom
options={sizes}
label={props.label}
customLabel={props.customLabel}
value={props.value}
onChange={props.onChange}
variant={props.variant}
allowCustom={props.allowCustom}
/>
<SelectCustom options={sizes} label={label} customLabel={customLabel} value={value} onChange={onChange} variant={variant} allowCustom={allowCustom} />
);
}
PixFormat.defaultProps = {
allowAuto: false,
allowCustom: false,
variant: 'outlined',
label: <Trans>Pixel Format</Trans>,
customLabel: <Trans>Custom format</Trans>,
onChange: function (event) {},
};
function FpsMode(props) {
function FpsMode({ value = '', onChange = function (event) {} }) {
return (
<Select label={<Trans>Framerate mode</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Framerate mode</Trans>} value={value} onChange={onChange}>
<MenuItem value="passthrough">
<Trans>Frame is passed through (Passthrough)</Trans>
</MenuItem>
@ -383,11 +322,6 @@ function FpsMode(props) {
);
}
FpsMode.defaultProps = {
value: '',
onChange: function (event) {},
};
export default {
Bitrate,
GOP,

13
src/misc/controls/HLS.js
View File

@ -24,12 +24,12 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
const settings = init(props.settings);
export default function Control({ settings = {}, onChange = function (settings, automatic) {} }) {
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -42,7 +42,7 @@ export default function Control(props) {
settings[what] = value;
}
props.onChange(settings, false);
onChange(settings, false);
};
return (
@ -125,8 +125,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
onChange: function (settings, automatic) {},
};

31
src/misc/controls/License/index.js
View File

@ -28,13 +28,13 @@ const useStyles = makeStyles((theme) => ({
},
}));
export default function License(props) {
export default function License({ license = 'none', onChange = function (license) {} }) {
const classes = useStyles();
const { i18n } = useLingui();
const handleLicenseChange = (event) => {
props.onChange(event.target.value);
onChange(event.target.value);
};
let image = null;
@ -45,61 +45,61 @@ export default function License(props) {
const reVersion = new RegExp('[0-9]+.[0-9]+$');
let version = '4.0';
const matches = props.license.match(reVersion);
const matches = license.match(reVersion);
if (matches !== null) {
version = matches[0];
}
const which = props.license.replace(reVersion, '').trim();
const which = license.replace(reVersion, '').trim();
switch (which) {
case 'CC0':
image = cc_zero;
link = 'https://creativecommons.org/licenses/zero/1.0/';
description = i18n._(
t`The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.`
t`The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.`,
);
break;
case 'CC BY':
image = cc_by;
link = `https://creativecommons.org/licenses/by/${version}/`;
description = i18n._(
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. The license allows for commercial use.`
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. The license allows for commercial use.`,
);
break;
case 'CC BY-SA':
image = cc_by_sa;
link = `https://creativecommons.org/licenses/by-sa/${version}/`;
description = i18n._(
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. The license allows for commercial use. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.`
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. The license allows for commercial use. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.`,
);
break;
case 'CC BY-NC':
image = cc_by_nc;
link = `https://creativecommons.org/licenses/by-nc/${version}/`;
description = i18n._(
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator.`
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator.`,
);
break;
case 'CC BY-NC-SA':
image = cc_by_nc_sa;
link = `https://creativecommons.org/licenses/by-nc-sa/${version}/`;
description = i18n._(
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.`
t`This license allows reusers to distribute, remix, adapt, and build upon the material in any medium or format for noncommercial purposes only, and only so long as attribution is given to the creator. If you remix, adapt, or build upon the material, you must license the modified material under identical terms.`,
);
break;
case 'CC BY-ND':
image = cc_by_nd;
link = `https://creativecommons.org/licenses/by-nd/${version}/`;
description = i18n._(
t`This license allows reusers to copy and distribute the material in any medium or format in unadapted form only, and only so long as attribution is given to the creator. The license allows for commercial use.`
t`This license allows reusers to copy and distribute the material in any medium or format in unadapted form only, and only so long as attribution is given to the creator. The license allows for commercial use.`,
);
break;
case 'CC BY-NC-ND':
image = cc_by_nc_nd;
link = `https://creativecommons.org/licenses/by-nc-nd/${version}/`;
description = i18n._(
t`This license allows reusers to copy and distribute the material in any medium or format in unadapted form only, for noncommercial purposes only, and only so long as attribution is given to the creator.`
t`This license allows reusers to copy and distribute the material in any medium or format in unadapted form only, for noncommercial purposes only, and only so long as attribution is given to the creator.`,
);
break;
default:
@ -109,7 +109,7 @@ export default function License(props) {
return (
<Grid container spacing={2}>
<Grid item xs={12}>
<Select label={<Trans>Creative Commons</Trans>} value={props.license} onChange={handleLicenseChange}>
<Select label={<Trans>Creative Commons</Trans>} value={license} onChange={handleLicenseChange}>
<MenuItem value="none">none</MenuItem>
<MenuItem value="CC0 1.0">CC0 1.0</MenuItem>
<MenuItem value="CC BY 4.0">CC BY 4.0</MenuItem>
@ -135,15 +135,10 @@ export default function License(props) {
{image !== null && (
<Grid item xs={12}>
<Link href={link} target="_blank" rel="noopener noreferrer">
<img src={image} alt={props.license} />
<img src={image} alt={license} />
</Link>
</Grid>
)}
</Grid>
);
}
License.defaultProps = {
license: 'none',
onChange: function (license) {},
};

13
src/misc/controls/Limits.js
View File

@ -16,12 +16,12 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
const settings = init(props.settings);
export default function Control({ settings = {}, onChange = function (settings, automatic) {} }) {
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -30,7 +30,7 @@ export default function Control(props) {
settings[what] = value;
props.onChange(settings, false);
onChange(settings, false);
};
return (
@ -80,8 +80,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
onChange: function (settings, automatic) {},
};

13
src/misc/controls/Metadata.js
View File

@ -34,14 +34,14 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
export default function Control({ settings = {}, onChange = function (metadata) {} }) {
const classes = useStyles();
const [$tab, setTab] = React.useState('content');
const settings = init(props.settings);
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -56,7 +56,7 @@ export default function Control(props) {
settings[what] = value;
}
props.onChange(settings, false);
onChange(settings, false);
};
const handleChangeTab = (event, value) => {
@ -118,8 +118,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaultProps = {
settings: {},
onChange: function (metadata) {},
};

15
src/misc/controls/Preview.js
View File

@ -19,13 +19,12 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
const settings = init(props.settings);
const encoders = props.encoders;
export default function Control({ settings = {}, encoders = [], onChange = function (settings, automatic) {} }) {
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -38,7 +37,7 @@ export default function Control(props) {
settings[what] = value;
}
props.onChange(settings, false);
onChange(settings, false);
};
return (
@ -74,9 +73,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
encoders: [],
onChange: function (settings, automatic) {},
};

13
src/misc/controls/Process.js
View File

@ -20,12 +20,12 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
const settings = init(props.settings);
export default function Control({ settings = {}, onChange = function (settings, automatic) {} }) {
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -38,7 +38,7 @@ export default function Control(props) {
settings[what] = value;
}
props.onChange(settings, false);
onChange(settings, false);
};
return (
@ -77,8 +77,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
onChange: function (settings, automatic) {},
};

20
src/misc/controls/RTMP.js
View File

@ -18,13 +18,13 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
export default function Control({ settings = {}, enabled = false, onChange = function (settings, automatic) {} }) {
const navigate = useNavigate();
const settings = init(props.settings);
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -37,17 +37,17 @@ export default function Control(props) {
settings[what] = value;
}
props.onChange(settings, false);
onChange(settings, false);
};
return (
<Grid container spacing={2}>
{props.enabled && (
{enabled && (
<Grid item xs={12}>
<Checkbox
label={<Trans>Enable</Trans>}
checked={settings.enable}
disabled={!props.enabled && settings.enable !== true}
disabled={!enabled && settings.enable !== true}
onChange={handleChange('enable')}
/>
<Typography variant="caption">
@ -55,7 +55,7 @@ export default function Control(props) {
</Typography>
</Grid>
)}
{!props.enabled && (
{!enabled && (
<Grid item xs={12}>
<BoxText textAlign="center">
<Trans>The RTMP output requires the RTMP Server.</Trans>
@ -75,9 +75,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
enabled: false,
onChange: function (settings, automatic) {},
};

20
src/misc/controls/SRT.js
View File

@ -18,13 +18,13 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
export default function Control({ settings = {}, enabled = false, onChange = function (settings, automatic) {} }) {
const navigate = useNavigate();
const settings = init(props.settings);
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -37,17 +37,17 @@ export default function Control(props) {
settings[what] = value;
}
props.onChange(settings, false);
onChange(settings, false);
};
return (
<Grid container spacing={2}>
{props.enabled && (
{enabled && (
<Grid item xs={12}>
<Checkbox
label={<Trans>Enable</Trans>}
checked={settings.enable}
disabled={!props.enabled && settings.enable !== true}
disabled={!enabled && settings.enable !== true}
onChange={handleChange('enable')}
/>
<Typography variant="caption">
@ -55,7 +55,7 @@ export default function Control(props) {
</Typography>
</Grid>
)}
{!props.enabled && (
{!enabled && (
<Grid item xs={12}>
<BoxText textAlign="center">
<Trans>The SRT output requires the SRT Server.</Trans>
@ -75,9 +75,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
enabled: false,
onChange: function (settings, automatic) {},
};

13
src/misc/controls/Snapshot.js
View File

@ -17,12 +17,12 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
const settings = init(props.settings);
export default function Control({ settings = {}, onChange = function (settings, automatic) {} }) {
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -35,7 +35,7 @@ export default function Control(props) {
settings[what] = value;
}
props.onChange(settings, false);
onChange(settings, false);
};
return (
@ -59,8 +59,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
onChange: function (settings, automatic) {},
};

30
src/misc/controls/Source.js
View File

@ -25,12 +25,12 @@ function init(settings) {
return initSettings;
}
export default function Control(props) {
const settings = init(props.settings);
export default function Control({ settings = {}, sources = [], onChange = function (settings, automatic) {} }) {
settings = init(settings);
// Set the defaults
React.useEffect(() => {
props.onChange(settings, true);
onChange(settings, true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -39,33 +39,33 @@ export default function Control(props) {
settings[what] = value;
props.onChange(settings, false);
onChange(settings, false);
};
const items = [];
items.push(
<MenuItem key="hls+memfs" value="hls+memfs" disabled={!props.sources.includes('hls+memfs')}>
<MenuItem key="hls+memfs" value="hls+memfs" disabled={!sources.includes('hls+memfs')}>
HLS (memfs)
</MenuItem>
</MenuItem>,
);
items.push(
<MenuItem key="hls+diskfs" value="hls+diskfs" disabled={!props.sources.includes('hls+diskfs')}>
<MenuItem key="hls+diskfs" value="hls+diskfs" disabled={!sources.includes('hls+diskfs')}>
HLS (diskfs)
</MenuItem>
</MenuItem>,
);
items.push(
<MenuItem key="rtmp" value="rtmp" disabled={!props.sources.includes('rtmp')}>
<MenuItem key="rtmp" value="rtmp" disabled={!sources.includes('rtmp')}>
RTMP
</MenuItem>
</MenuItem>,
);
items.push(
<MenuItem key="srt" value="srt" disabled={!props.sources.includes('srt')}>
<MenuItem key="srt" value="srt" disabled={!sources.includes('srt')}>
SRT
</MenuItem>
</MenuItem>,
);
return (
@ -81,9 +81,3 @@ export default function Control(props) {
</Grid>
);
}
Control.defaulProps = {
settings: {},
sources: [],
onChange: function (settings, automatic) {},
};

11
src/misc/filters/audio/Loudnorm.js
View File

@ -29,8 +29,8 @@ function createGraph(settings) {
return mapping.join(',');
}
function Filter(props) {
const settings = init(props.settings);
function Filter({ settings = {}, onChange = function (settings, graph, automatic) {} }) {
settings = init(settings);
const handleChange = (newSettings) => {
let automatic = false;
@ -39,7 +39,7 @@ function Filter(props) {
automatic = true;
}
props.onChange(newSettings, createGraph(newSettings), automatic);
onChange(newSettings, createGraph(newSettings), automatic);
};
const update = (what) => (event) => {
@ -69,11 +69,6 @@ function Filter(props) {
);
}
Filter.defaultProps = {
settings: {},
onChange: function (settings, graph, automatic) {},
};
const filter = 'loudnorm';
const name = 'Loudness Normalization';
const type = 'audio';

20
src/misc/filters/audio/Pan.js
View File

@ -39,10 +39,10 @@ function createGraph(settings) {
}
// filter
function Pan(props) {
function Pan({ value = '', onChange = function (event) {} }) {
return (
<React.Fragment>
<Select label={<Trans>Pan</Trans>} value={props.value} onChange={props.onChange}>
<Select label={<Trans>Pan</Trans>} value={value} onChange={onChange}>
<MenuItem value="inherit">
<Trans>Inherit</Trans>
</MenuItem>
@ -60,13 +60,8 @@ function Pan(props) {
);
}
Pan.defaultProps = {
value: '',
onChange: function (event) {},
};
function Filter(props) {
const settings = init(props.settings);
function Filter({ settings = {}, onChange = function (settings, graph, automatic) {} }) {
settings = init(settings);
const handleChange = (newSettings) => {
let automatic = false;
@ -75,7 +70,7 @@ function Filter(props) {
automatic = true;
}
props.onChange(newSettings, createGraph(newSettings), automatic);
onChange(newSettings, createGraph(newSettings), automatic);
};
const update = (what) => (event) => {
@ -102,11 +97,6 @@ function Filter(props) {
);
}
Filter.defaultProps = {
settings: {},
onChange: function (settings, graph, automatic) {},
};
const filter = 'pan';
const name = 'Pan';
const type = 'audio';

Some files were not shown because too many files have changed in this diff Show More