From ee50071c8dc0871020e0aa16d6ceabb334ccef9a Mon Sep 17 00:00:00 2001
From: Jan Stabenow <moin@jan-stabenow.de>
Date: Thu, 26 Sep 2024 08:34:06 +0200
Subject: [PATCH] Mod uses params instead of defaultProps

---
 src/Footer.js                                 |  41 ++-
 src/Header.js                                 |  83 +++---
 src/RestreamerUI.js                           |  16 +-
 src/Router.js                                 |  30 +-
 src/index.js                                  |   2 +-
 src/misc/ActionButton.js                      |  48 ++-
 src/misc/BoxText.js                           |  23 +-
 src/misc/BoxTextarea.js                       |   8 +-
 src/misc/Changelog.js                         |  27 +-
 src/misc/ChannelList.js                       |  70 ++---
 src/misc/Checkbox.js                          |  15 +-
 src/misc/ColorPicker.js                       |  16 +-
 src/misc/CopyButton.js                        |   9 +-
 src/misc/Duration.js                          |  10 +-
 src/misc/EncodingSelect.js                    |  73 +++--
 src/misc/Env.js                               |   6 +-
 src/misc/Filesize.js                          |  17 +-
 src/misc/FilterSelect.js                      |  25 +-
 src/misc/FormInlineButton.js                  |  34 ++-
 src/misc/LanguageSelect.js                    |   8 +-
 src/misc/ModalContent.js                      |  26 +-
 src/misc/MultiSelect.js                       |  27 +-
 src/misc/MultiSelectOption.js                 |  14 +-
 src/misc/Number.js                            |  14 +-
 src/misc/Paper.js                             |  51 ++--
 src/misc/PaperContent.js                      |  11 +-
 src/misc/PaperFooter.js                       |  11 +-
 src/misc/PaperHeader.js                       |  33 +-
 src/misc/PaperThumb.js                        |  10 +-
 src/misc/Password.js                          |  58 ++--
 src/misc/Player/index.js                      |  72 +++--
 src/misc/Player/videojs.js                    |  13 +-
 src/misc/Progress.js                          | 105 +++++--
 src/misc/Select.js                            |  18 +-
 src/misc/SelectCustom.js                      |  85 +++---
 src/misc/TabPanel.js                          |   5 +-
 src/misc/TabsHorizontal.js                    |  12 +-
 src/misc/TabsVerticalGrid.js                  |   8 +-
 src/misc/TextField.js                         |  47 ++-
 src/misc/TextFieldCopy.js                     |  44 ++-
 src/misc/Textarea.js                          |  85 +++---
 src/misc/UploadButton.js                      |  40 +--
 src/misc/coders/Decoders/audio/default.js     |  17 +-
 src/misc/coders/Decoders/video/av1_cuvid.js   |  17 +-
 src/misc/coders/Decoders/video/default.js     |  17 +-
 src/misc/coders/Decoders/video/h264_cuvid.js  |  17 +-
 src/misc/coders/Decoders/video/h264_mmal.js   |  17 +-
 src/misc/coders/Decoders/video/hevc_cuvid.js  |  17 +-
 src/misc/coders/Decoders/video/mjpeg_cuvid.js |  17 +-
 src/misc/coders/Decoders/video/mpeg1_cuvid.js |  17 +-
 src/misc/coders/Decoders/video/mpeg2_cuvid.js |  17 +-
 src/misc/coders/Decoders/video/mpeg2_mmal.js  |  17 +-
 src/misc/coders/Decoders/video/mpeg4_cuvid.js |  17 +-
 src/misc/coders/Decoders/video/mpeg4_mmal.js  |  17 +-
 src/misc/coders/Decoders/video/nvdec.js       |  17 +-
 src/misc/coders/Decoders/video/vc1_cuvid.js   |  17 +-
 src/misc/coders/Decoders/video/vc1_mmal.js    |  17 +-
 .../coders/Decoders/video/videotoolbox.js     |  17 +-
 src/misc/coders/Decoders/video/vp8_cuvid.js   |  17 +-
 src/misc/coders/Decoders/video/vp9_cuvid.js   |  17 +-
 src/misc/coders/Encoders/audio/aac.js         |  17 +-
 .../coders/Encoders/audio/aac_audiotoolbox.js |  17 +-
 src/misc/coders/Encoders/audio/aac_libfdk.js  |  17 +-
 src/misc/coders/Encoders/audio/copy.js        |  17 +-
 .../coders/Encoders/audio/mp3_libmp3lame.js   |  17 +-
 src/misc/coders/Encoders/audio/none.js        |  17 +-
 src/misc/coders/Encoders/audio/opus.js        |  52 ++--
 .../coders/Encoders/audio/opus_libopus.js     |  17 +-
 src/misc/coders/Encoders/audio/vorbis.js      |  17 +-
 .../coders/Encoders/audio/vorbis_libvorbis.js |  17 +-
 src/misc/coders/Encoders/video/av1_libaom.js  |  26 +-
 .../coders/Encoders/video/av1_librav1e.js     |  26 +-
 src/misc/coders/Encoders/video/copy.js        |  17 +-
 .../coders/Encoders/video/h264_libx264.js     |  35 +--
 src/misc/coders/Encoders/video/h264_nvenc.js  |  53 +---
 src/misc/coders/Encoders/video/h264_omx.js    |  17 +-
 .../coders/Encoders/video/h264_v4l2m2m.js     |  17 +-
 src/misc/coders/Encoders/video/h264_vaapi.js  |  35 +--
 .../Encoders/video/h264_videotoolbox.js       |  26 +-
 .../coders/Encoders/video/hevc_libx265.js     |  35 +--
 src/misc/coders/Encoders/video/hevc_vaapi.js  |  35 +--
 .../Encoders/video/hevc_videotoolbox.js       |  26 +-
 src/misc/coders/Encoders/video/none.js        |  17 +-
 src/misc/coders/Encoders/video/rawvideo.js    |  17 +-
 src/misc/coders/Encoders/video/vp9_libvpx.js  |  17 +-
 src/misc/coders/Encoders/video/vp9_vaapi.js   |  35 +--
 src/misc/coders/settings/Audio.js             | 116 ++++---
 src/misc/coders/settings/Video.js             | 282 +++++++-----------
 src/misc/controls/HLS.js                      |  13 +-
 src/misc/controls/License/index.js            |  31 +-
 src/misc/controls/Limits.js                   |  13 +-
 src/misc/controls/Metadata.js                 |  13 +-
 src/misc/controls/Preview.js                  |  15 +-
 src/misc/controls/Process.js                  |  13 +-
 src/misc/controls/RTMP.js                     |  20 +-
 src/misc/controls/SRT.js                      |  20 +-
 src/misc/controls/Snapshot.js                 |  13 +-
 src/misc/controls/Source.js                   |  30 +-
 src/misc/filters/audio/Loudnorm.js            |  11 +-
 src/misc/filters/audio/Pan.js                 |  20 +-
 src/misc/filters/audio/Resample.js            |  89 +++---
 src/misc/filters/audio/Volume.js              |  40 +--
 src/misc/filters/video/Bwdif.js               |  38 +--
 src/misc/filters/video/Framerate.js           |  39 +--
 src/misc/filters/video/HFlip.js               |  11 +-
 src/misc/filters/video/Scale.js               |  20 +-
 src/misc/filters/video/Transpose.js           |  20 +-
 src/misc/filters/video/VFlip.js               |  11 +-
 src/misc/modals/Debug.js                      |  20 +-
 src/misc/modals/Dialog.js                     |  82 +++--
 src/misc/modals/Hint.js                       |  81 ++---
 src/misc/modals/Probe.js                      |  14 +-
 src/misc/modals/Process.js                    |  36 ++-
 src/misc/modals/Textarea.js                   |  27 +-
 src/theme/components/chip.js                  |   4 +-
 src/utils/auth0.js                            |   2 +-
 src/views/ChannelSelect.js                    |   8 +-
 src/views/Edit/Profile.js                     |  99 +++---
 src/views/Edit/ProfileSummary.js              |  19 +-
 src/views/Edit/SourceSelect.js                |  84 +++---
 src/views/Edit/Sources/ALSA.js                |  29 +-
 src/views/Edit/Sources/AVFoundation.js        |  31 +-
 src/views/Edit/Sources/AudioLoop.js           |  31 +-
 src/views/Edit/Sources/Framebuffer.js         |  26 +-
 src/views/Edit/Sources/Network.js             | 206 ++++++-------
 src/views/Edit/Sources/NoAudio.js             |   9 +-
 src/views/Edit/Sources/Raspicam.js            |  19 +-
 src/views/Edit/Sources/V4L.js                 |  20 +-
 src/views/Edit/Sources/VideoAudio.js          |   9 +-
 src/views/Edit/Sources/VideoLoop.js           |  31 +-
 src/views/Edit/Sources/VirtualAudio.js        |  14 +-
 src/views/Edit/Sources/VirtualVideo.js        |  14 +-
 src/views/Edit/StreamSelect.js                |  34 +--
 src/views/Edit/Summary.js                     |  18 +-
 src/views/Edit/Wizard/Abort.js                |  19 +-
 src/views/Edit/Wizard/Audio.js                |  60 ++--
 src/views/Edit/Wizard/Error.js                |  12 +-
 src/views/Edit/Wizard/License.js              |  19 +-
 src/views/Edit/Wizard/Metadata.js             |  19 +-
 src/views/Edit/Wizard/Probe.js                |   8 +-
 src/views/Edit/Wizard/Saving.js               |   8 +-
 src/views/Edit/Wizard/Source.js               |  15 +-
 src/views/Edit/Wizard/Sources/AVFoundation.js |  36 +--
 src/views/Edit/Wizard/Sources/InternalHLS.js  |  24 +-
 src/views/Edit/Wizard/Sources/InternalRTMP.js |  30 +-
 src/views/Edit/Wizard/Sources/InternalSRT.js  |  28 +-
 src/views/Edit/Wizard/Sources/Network.js      |  24 +-
 src/views/Edit/Wizard/Sources/Raspicam.js     |  21 +-
 src/views/Edit/Wizard/Sources/V4L.js          |  24 +-
 src/views/Edit/Wizard/Video.js                |  37 ++-
 src/views/Edit/Wizard/VideoProfile.js         |  64 ++--
 src/views/Edit/Wizard/index.js                |  50 ++--
 src/views/Edit/index.js                       |  42 ++-
 src/views/Incompatible.js                     |  18 +-
 src/views/Invalid.js                          |  10 +-
 src/views/Login.js                            |  22 +-
 src/views/Main/Egress.js                      |  74 +++--
 src/views/Main/Progress.js                    |  14 +-
 src/views/Main/Publication.js                 |  25 +-
 src/views/Main/index.js                       |  76 ++---
 src/views/Password.js                         |  42 ++-
 src/views/Playersite.js                       | 104 ++-----
 src/views/Publication/Add.js                  |  16 +-
 src/views/Publication/Edit.js                 |  38 ++-
 src/views/Publication/Player.js               |  30 +-
 src/views/Publication/Process.js              |  12 +-
 src/views/Publication/Services/Akamai.js      |  14 +-
 src/views/Publication/Services/Azure.js       |  14 +-
 src/views/Publication/Services/Brightcove.js  |  14 +-
 src/views/Publication/Services/CDN77.js       |  14 +-
 src/views/Publication/Services/Core.js        |  22 +-
 src/views/Publication/Services/DASH.js        |  14 +-
 src/views/Publication/Services/DLive.js       |  14 +-
 src/views/Publication/Services/DaCast.js      |  14 +-
 src/views/Publication/Services/Dailymotion.js |  18 +-
 src/views/Publication/Services/Dummy.js       |  18 +-
 src/views/Publication/Services/Facebook.js    |  14 +-
 src/views/Publication/Services/Framebuffer.js |  16 +-
 src/views/Publication/Services/HLS.js         |  14 +-
 src/views/Publication/Services/Icecast.js     |  16 +-
 src/views/Publication/Services/Image2.js      |  14 +-
 src/views/Publication/Services/Instagram.js   |  29 +-
 src/views/Publication/Services/Kick.js        |  14 +-
 src/views/Publication/Services/Linkedin.js    |  14 +-
 src/views/Publication/Services/Livepush.js    |  14 +-
 .../Publication/Services/Livespotting.js      |  14 +-
 src/views/Publication/Services/MPEGTS.js      |  14 +-
 .../Publication/Services/MediaNetwork.js      |  14 +-
 src/views/Publication/Services/NimoTv.js      |  14 +-
 src/views/Publication/Services/Owncast.js     |  14 +-
 src/views/Publication/Services/PeerTube.js    |  14 +-
 src/views/Publication/Services/PicartoTv.js   |  14 +-
 src/views/Publication/Services/RTMP.js        |  24 +-
 src/views/Publication/Services/RTSP.js        |  14 +-
 src/views/Publication/Services/Red5.js        |  14 +-
 src/views/Publication/Services/Restream.js    |  14 +-
 src/views/Publication/Services/Rumble.js      |  14 +-
 src/views/Publication/Services/SRT.js         |  14 +-
 src/views/Publication/Services/Telegram.js    |  14 +-
 src/views/Publication/Services/TikTok.js      |  14 +-
 src/views/Publication/Services/Trovo.js       |  14 +-
 src/views/Publication/Services/Twitch.js      |  14 +-
 src/views/Publication/Services/Twitter.js     |  16 +-
 src/views/Publication/Services/UDP.js         |  14 +-
 src/views/Publication/Services/Vimeo.js       |  14 +-
 src/views/Publication/Services/WOWZA.js       |  14 +-
 src/views/Publication/Services/Wettercom.js   |  16 +-
 src/views/Publication/Services/Youtube.js     |  24 +-
 src/views/Publication/TabContent.js           |  18 +-
 src/views/Settings.js                         |  47 ++-
 src/views/Welcome.js                          |   2 +-
 211 files changed, 2221 insertions(+), 3654 deletions(-)

diff --git a/src/Footer.js b/src/Footer.js
index a6c645b..6597f70 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -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;
-	},
-};
diff --git a/src/Header.js b/src/Header.js
index 0cdfffa..41e664d 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -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,
-};
diff --git a/src/RestreamerUI.js b/src/RestreamerUI.js
index 7b22b16..6ac419d 100644
--- a/src/RestreamerUI.js
+++ b/src/RestreamerUI.js
@@ -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: '',
-};
diff --git a/src/Router.js b/src/Router.js
index 76d06b4..4cc4cc3 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -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,
-};
diff --git a/src/index.js b/src/index.js
index 4958457..2e8ed97 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,5 +25,5 @@ createRoot(document.getElementById('root')).render(
 			<CssBaseline />
 			<RestreamerUI address={address} />
 		</ThemeProvider>
-	</StyledEngineProvider>
+	</StyledEngineProvider>,
 );
diff --git a/src/misc/ActionButton.js b/src/misc/ActionButton.js
index ddacd3f..5a2db14 100644
--- a/src/misc/ActionButton.js
+++ b/src/misc/ActionButton.js
@@ -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 () {},
-};
diff --git a/src/misc/BoxText.js b/src/misc/BoxText.js
index 9423eb9..8706829 100644
--- a/src/misc/BoxText.js
+++ b/src/misc/BoxText.js
@@ -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',
-};
diff --git a/src/misc/BoxTextarea.js b/src/misc/BoxTextarea.js
index d9afe23..48f6ac7 100644
--- a/src/misc/BoxTextarea.js
+++ b/src/misc/BoxTextarea.js
@@ -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 = {};
diff --git a/src/misc/Changelog.js b/src/misc/Changelog.js
index 695e0c6..487ccf5 100644
--- a/src/misc/Changelog.js
+++ b/src/misc/Changelog.js
@@ -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: () => {},
-};
diff --git a/src/misc/ChannelList.js b/src/misc/ChannelList.js
index e1df526..1e93157 100644
--- a/src/misc/ChannelList.js
+++ b/src/misc/ChannelList.js
@@ -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;
-	},
-};
diff --git a/src/misc/Checkbox.js b/src/misc/Checkbox.js
index f549d39..24a216e 100644
--- a/src/misc/Checkbox.js
+++ b/src/misc/Checkbox.js
@@ -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) {},
-};
diff --git a/src/misc/ColorPicker.js b/src/misc/ColorPicker.js
index 810ead2..a025c19 100644
--- a/src/misc/ColorPicker.js
+++ b/src/misc/ColorPicker.js
@@ -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: () => {},
-};
diff --git a/src/misc/CopyButton.js b/src/misc/CopyButton.js
index 6ea468c..72def23 100644
--- a/src/misc/CopyButton.js
+++ b/src/misc/CopyButton.js
@@ -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: '',
-};
diff --git a/src/misc/Duration.js b/src/misc/Duration.js
index 29e5ef9..48bf8ec 100644
--- a/src/misc/Duration.js
+++ b/src/misc/Duration.js
@@ -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,
-};
diff --git a/src/misc/EncodingSelect.js b/src/misc/EncodingSelect.js
index e2a675b..3d9c48b 100644
--- a/src/misc/EncodingSelect.js
+++ b/src/misc/EncodingSelect.js
@@ -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) {},
-};
diff --git a/src/misc/Env.js b/src/misc/Env.js
index fe28783..a41a598 100644
--- a/src/misc/Env.js
+++ b/src/misc/Env.js
@@ -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 = {};
diff --git a/src/misc/Filesize.js b/src/misc/Filesize.js
index eacdd92..1bb0a99 100644
--- a/src/misc/Filesize.js
+++ b/src/misc/Filesize.js
@@ -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,
-};
diff --git a/src/misc/FilterSelect.js b/src/misc/FilterSelect.js
index b5ceb35..28c6e57 100644
--- a/src/misc/FilterSelect.js
+++ b/src/misc/FilterSelect.js
@@ -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) {},
-};
diff --git a/src/misc/FormInlineButton.js b/src/misc/FormInlineButton.js
index 82df21e..690b676 100644
--- a/src/misc/FormInlineButton.js
+++ b/src/misc/FormInlineButton.js
@@ -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 = {};
diff --git a/src/misc/LanguageSelect.js b/src/misc/LanguageSelect.js
index bca7b3c..e625835 100644
--- a/src/misc/LanguageSelect.js
+++ b/src/misc/LanguageSelect.js
@@ -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) {},
-};
diff --git a/src/misc/ModalContent.js b/src/misc/ModalContent.js
index abc0986..7581a07 100644
--- a/src/misc/ModalContent.js
+++ b/src/misc/ModalContent.js
@@ -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,
-};
diff --git a/src/misc/MultiSelect.js b/src/misc/MultiSelect.js
index 6375eb6..cdbee3c 100644
--- a/src/misc/MultiSelect.js
+++ b/src/misc/MultiSelect.js
@@ -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) {},
-};
diff --git a/src/misc/MultiSelectOption.js b/src/misc/MultiSelectOption.js
index 2dbdcad..83bedab 100644
--- a/src/misc/MultiSelectOption.js
+++ b/src/misc/MultiSelectOption.js
@@ -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,
-};
diff --git a/src/misc/Number.js b/src/misc/Number.js
index e359f9a..4084f42 100644
--- a/src/misc/Number.js
+++ b/src/misc/Number.js
@@ -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,
-};
diff --git a/src/misc/Paper.js b/src/misc/Paper.js
index 1c7e641..0ef0e86 100644
--- a/src/misc/Paper.js
+++ b/src/misc/Paper.js
@@ -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',
-};
diff --git a/src/misc/PaperContent.js b/src/misc/PaperContent.js
index b072ad5..f9d3289 100644
--- a/src/misc/PaperContent.js
+++ b/src/misc/PaperContent.js
@@ -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',
-};
diff --git a/src/misc/PaperFooter.js b/src/misc/PaperFooter.js
index 58e9bbf..4e55ff4 100644
--- a/src/misc/PaperFooter.js
+++ b/src/misc/PaperFooter.js
@@ -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,
-};
diff --git a/src/misc/PaperHeader.js b/src/misc/PaperHeader.js
index 1c7bb61..5b60f09 100644
--- a/src/misc/PaperHeader.js
+++ b/src/misc/PaperHeader.js
@@ -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,
-};
diff --git a/src/misc/PaperThumb.js b/src/misc/PaperThumb.js
index c199b65..cf5289b 100644
--- a/src/misc/PaperThumb.js
+++ b/src/misc/PaperThumb.js
@@ -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',
-};
diff --git a/src/misc/Password.js b/src/misc/Password.js
index 2bdd42b..775d382 100644
--- a/src/misc/Password.js
+++ b/src/misc/Password.js
@@ -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) {},
-};
diff --git a/src/misc/Player/index.js b/src/misc/Player/index.js
index b74b570..9927418 100644
--- a/src/misc/Player/index.js
+++ b/src/misc/Player/index.js
@@ -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,
-};
diff --git a/src/misc/Player/videojs.js b/src/misc/Player/videojs.js
index 502ebc2..8d067e5 100644
--- a/src/misc/Player/videojs.js
+++ b/src/misc/Player/videojs.js
@@ -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',
-};
diff --git a/src/misc/Progress.js b/src/misc/Progress.js
index f07f044..d736a83 100644
--- a/src/misc/Progress.js
+++ b/src/misc/Progress.js
@@ -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,
-};
diff --git a/src/misc/Select.js b/src/misc/Select.js
index 443ee1a..204d8d6 100644
--- a/src/misc/Select.js
+++ b/src/misc/Select.js
@@ -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) {},
-};
diff --git a/src/misc/SelectCustom.js b/src/misc/SelectCustom.js
index b114a73..3949a95 100644
--- a/src/misc/SelectCustom.js
+++ b/src/misc/SelectCustom.js
@@ -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) {},
-};
diff --git a/src/misc/TabPanel.js b/src/misc/TabPanel.js
index 98ddead..534a34e 100644
--- a/src/misc/TabPanel.js
+++ b/src/misc/TabPanel.js
@@ -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}
diff --git a/src/misc/TabsHorizontal.js b/src/misc/TabsHorizontal.js
index 724f234..57affb0 100644
--- a/src/misc/TabsHorizontal.js
+++ b/src/misc/TabsHorizontal.js
@@ -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) {},
-};
diff --git a/src/misc/TabsVerticalGrid.js b/src/misc/TabsVerticalGrid.js
index c398a3f..7c63dec 100644
--- a/src/misc/TabsVerticalGrid.js
+++ b/src/misc/TabsVerticalGrid.js
@@ -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,
-};
diff --git a/src/misc/TextField.js b/src/misc/TextField.js
index efd2300..1599cfe 100644
--- a/src/misc/TextField.js
+++ b/src/misc/TextField.js
@@ -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) {},
-};
diff --git a/src/misc/TextFieldCopy.js b/src/misc/TextFieldCopy.js
index 0ab3646..2676075 100644
--- a/src/misc/TextFieldCopy.js
+++ b/src/misc/TextFieldCopy.js
@@ -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) {},
-};
diff --git a/src/misc/Textarea.js b/src/misc/Textarea.js
index bb30bc9..b48b43e 100644
--- a/src/misc/Textarea.js
+++ b/src/misc/Textarea.js
@@ -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,
-};
diff --git a/src/misc/UploadButton.js b/src/misc/UploadButton.js
index c232cee..6614a93 100644
--- a/src/misc/UploadButton.js
+++ b/src/misc/UploadButton.js
@@ -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) {},
-};
diff --git a/src/misc/coders/Decoders/audio/default.js b/src/misc/coders/Decoders/audio/default.js
index 2b7a145..fe760b4 100644
--- a/src/misc/coders/Decoders/audio/default.js
+++ b/src/misc/coders/Decoders/audio/default.js
@@ -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 = [];
diff --git a/src/misc/coders/Decoders/video/av1_cuvid.js b/src/misc/coders/Decoders/video/av1_cuvid.js
index bba6403..d718382 100644
--- a/src/misc/coders/Decoders/video/av1_cuvid.js
+++ b/src/misc/coders/Decoders/video/av1_cuvid.js
@@ -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';
diff --git a/src/misc/coders/Decoders/video/default.js b/src/misc/coders/Decoders/video/default.js
index 18b665d..cf7f14b 100644
--- a/src/misc/coders/Decoders/video/default.js
+++ b/src/misc/coders/Decoders/video/default.js
@@ -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 = [];
diff --git a/src/misc/coders/Decoders/video/h264_cuvid.js b/src/misc/coders/Decoders/video/h264_cuvid.js
index b64f25f..f3c0a37 100644
--- a/src/misc/coders/Decoders/video/h264_cuvid.js
+++ b/src/misc/coders/Decoders/video/h264_cuvid.js
@@ -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';
diff --git a/src/misc/coders/Decoders/video/h264_mmal.js b/src/misc/coders/Decoders/video/h264_mmal.js
index 767cdec..676cd18 100644
--- a/src/misc/coders/Decoders/video/h264_mmal.js
+++ b/src/misc/coders/Decoders/video/h264_mmal.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/hevc_cuvid.js b/src/misc/coders/Decoders/video/hevc_cuvid.js
index efe80c4..8c71699 100644
--- a/src/misc/coders/Decoders/video/hevc_cuvid.js
+++ b/src/misc/coders/Decoders/video/hevc_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/mjpeg_cuvid.js b/src/misc/coders/Decoders/video/mjpeg_cuvid.js
index 6f8a71f..e06fb37 100644
--- a/src/misc/coders/Decoders/video/mjpeg_cuvid.js
+++ b/src/misc/coders/Decoders/video/mjpeg_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/mpeg1_cuvid.js b/src/misc/coders/Decoders/video/mpeg1_cuvid.js
index 3a1e359..6f7fc5f 100644
--- a/src/misc/coders/Decoders/video/mpeg1_cuvid.js
+++ b/src/misc/coders/Decoders/video/mpeg1_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/mpeg2_cuvid.js b/src/misc/coders/Decoders/video/mpeg2_cuvid.js
index 617a7cb..a22151b 100644
--- a/src/misc/coders/Decoders/video/mpeg2_cuvid.js
+++ b/src/misc/coders/Decoders/video/mpeg2_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/mpeg2_mmal.js b/src/misc/coders/Decoders/video/mpeg2_mmal.js
index d53b02c..80d948f 100644
--- a/src/misc/coders/Decoders/video/mpeg2_mmal.js
+++ b/src/misc/coders/Decoders/video/mpeg2_mmal.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/mpeg4_cuvid.js b/src/misc/coders/Decoders/video/mpeg4_cuvid.js
index a18a06b..da18c77 100644
--- a/src/misc/coders/Decoders/video/mpeg4_cuvid.js
+++ b/src/misc/coders/Decoders/video/mpeg4_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/mpeg4_mmal.js b/src/misc/coders/Decoders/video/mpeg4_mmal.js
index 314463d..605f066 100644
--- a/src/misc/coders/Decoders/video/mpeg4_mmal.js
+++ b/src/misc/coders/Decoders/video/mpeg4_mmal.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/nvdec.js b/src/misc/coders/Decoders/video/nvdec.js
index 9b0b96a..6ae767d 100644
--- a/src/misc/coders/Decoders/video/nvdec.js
+++ b/src/misc/coders/Decoders/video/nvdec.js
@@ -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';
diff --git a/src/misc/coders/Decoders/video/vc1_cuvid.js b/src/misc/coders/Decoders/video/vc1_cuvid.js
index cf5df1c..3fcef26 100644
--- a/src/misc/coders/Decoders/video/vc1_cuvid.js
+++ b/src/misc/coders/Decoders/video/vc1_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/vc1_mmal.js b/src/misc/coders/Decoders/video/vc1_mmal.js
index efa1375..848b2cd 100644
--- a/src/misc/coders/Decoders/video/vc1_mmal.js
+++ b/src/misc/coders/Decoders/video/vc1_mmal.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/videotoolbox.js b/src/misc/coders/Decoders/video/videotoolbox.js
index b339717..392f31c 100644
--- a/src/misc/coders/Decoders/video/videotoolbox.js
+++ b/src/misc/coders/Decoders/video/videotoolbox.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/vp8_cuvid.js b/src/misc/coders/Decoders/video/vp8_cuvid.js
index d304200..a8a9fe2 100644
--- a/src/misc/coders/Decoders/video/vp8_cuvid.js
+++ b/src/misc/coders/Decoders/video/vp8_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Decoders/video/vp9_cuvid.js b/src/misc/coders/Decoders/video/vp9_cuvid.js
index 4e0ee52..1dff10a 100644
--- a/src/misc/coders/Decoders/video/vp9_cuvid.js
+++ b/src/misc/coders/Decoders/video/vp9_cuvid.js
@@ -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'];
diff --git a/src/misc/coders/Encoders/audio/aac.js b/src/misc/coders/Encoders/audio/aac.js
index b31b899..11b360a 100644
--- a/src/misc/coders/Encoders/audio/aac.js
+++ b/src/misc/coders/Encoders/audio/aac.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/aac_audiotoolbox.js b/src/misc/coders/Encoders/audio/aac_audiotoolbox.js
index 469e354..ba17196 100644
--- a/src/misc/coders/Encoders/audio/aac_audiotoolbox.js
+++ b/src/misc/coders/Encoders/audio/aac_audiotoolbox.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/aac_libfdk.js b/src/misc/coders/Encoders/audio/aac_libfdk.js
index 5555687..e7e6e66 100644
--- a/src/misc/coders/Encoders/audio/aac_libfdk.js
+++ b/src/misc/coders/Encoders/audio/aac_libfdk.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/copy.js b/src/misc/coders/Encoders/audio/copy.js
index 57053c7..bbc5e91 100644
--- a/src/misc/coders/Encoders/audio/copy.js
+++ b/src/misc/coders/Encoders/audio/copy.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/mp3_libmp3lame.js b/src/misc/coders/Encoders/audio/mp3_libmp3lame.js
index f784e77..c9ca52e 100644
--- a/src/misc/coders/Encoders/audio/mp3_libmp3lame.js
+++ b/src/misc/coders/Encoders/audio/mp3_libmp3lame.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/none.js b/src/misc/coders/Encoders/audio/none.js
index a83dd7a..628579b 100644
--- a/src/misc/coders/Encoders/audio/none.js
+++ b/src/misc/coders/Encoders/audio/none.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/opus.js b/src/misc/coders/Encoders/audio/opus.js
index e46c5c6..99642a2 100644
--- a/src/misc/coders/Encoders/audio/opus.js
+++ b/src/misc/coders/Encoders/audio/opus.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/opus_libopus.js b/src/misc/coders/Encoders/audio/opus_libopus.js
index f1ce58a..e9befe3 100644
--- a/src/misc/coders/Encoders/audio/opus_libopus.js
+++ b/src/misc/coders/Encoders/audio/opus_libopus.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/vorbis.js b/src/misc/coders/Encoders/audio/vorbis.js
index f5db446..c32caaf 100644
--- a/src/misc/coders/Encoders/audio/vorbis.js
+++ b/src/misc/coders/Encoders/audio/vorbis.js
@@ -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';
diff --git a/src/misc/coders/Encoders/audio/vorbis_libvorbis.js b/src/misc/coders/Encoders/audio/vorbis_libvorbis.js
index 7a573c1..6d79624 100644
--- a/src/misc/coders/Encoders/audio/vorbis_libvorbis.js
+++ b/src/misc/coders/Encoders/audio/vorbis_libvorbis.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/av1_libaom.js b/src/misc/coders/Encoders/video/av1_libaom.js
index 8ed846b..b9c0919 100644
--- a/src/misc/coders/Encoders/video/av1_libaom.js
+++ b/src/misc/coders/Encoders/video/av1_libaom.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/av1_librav1e.js b/src/misc/coders/Encoders/video/av1_librav1e.js
index fc1ce36..d406a18 100644
--- a/src/misc/coders/Encoders/video/av1_librav1e.js
+++ b/src/misc/coders/Encoders/video/av1_librav1e.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/copy.js b/src/misc/coders/Encoders/video/copy.js
index 4dbb5df..26956f7 100644
--- a/src/misc/coders/Encoders/video/copy.js
+++ b/src/misc/coders/Encoders/video/copy.js
@@ -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}`;
 }
diff --git a/src/misc/coders/Encoders/video/h264_libx264.js b/src/misc/coders/Encoders/video/h264_libx264.js
index 57138d6..3c6fef7 100644
--- a/src/misc/coders/Encoders/video/h264_libx264.js
+++ b/src/misc/coders/Encoders/video/h264_libx264.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/h264_nvenc.js b/src/misc/coders/Encoders/video/h264_nvenc.js
index 27e4758..f8bf818 100644
--- a/src/misc/coders/Encoders/video/h264_nvenc.js
+++ b/src/misc/coders/Encoders/video/h264_nvenc.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/h264_omx.js b/src/misc/coders/Encoders/video/h264_omx.js
index 1152e93..0717123 100644
--- a/src/misc/coders/Encoders/video/h264_omx.js
+++ b/src/misc/coders/Encoders/video/h264_omx.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/h264_v4l2m2m.js b/src/misc/coders/Encoders/video/h264_v4l2m2m.js
index 8f70b18..90e072f 100644
--- a/src/misc/coders/Encoders/video/h264_v4l2m2m.js
+++ b/src/misc/coders/Encoders/video/h264_v4l2m2m.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/h264_vaapi.js b/src/misc/coders/Encoders/video/h264_vaapi.js
index e417198..071c3a6 100644
--- a/src/misc/coders/Encoders/video/h264_vaapi.js
+++ b/src/misc/coders/Encoders/video/h264_vaapi.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/h264_videotoolbox.js b/src/misc/coders/Encoders/video/h264_videotoolbox.js
index 53dd587..48af786 100644
--- a/src/misc/coders/Encoders/video/h264_videotoolbox.js
+++ b/src/misc/coders/Encoders/video/h264_videotoolbox.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/hevc_libx265.js b/src/misc/coders/Encoders/video/hevc_libx265.js
index ec63211..951a164 100644
--- a/src/misc/coders/Encoders/video/hevc_libx265.js
+++ b/src/misc/coders/Encoders/video/hevc_libx265.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/hevc_vaapi.js b/src/misc/coders/Encoders/video/hevc_vaapi.js
index 0989d0b..4a9f8dd 100644
--- a/src/misc/coders/Encoders/video/hevc_vaapi.js
+++ b/src/misc/coders/Encoders/video/hevc_vaapi.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/hevc_videotoolbox.js b/src/misc/coders/Encoders/video/hevc_videotoolbox.js
index 24cf454..b104905 100644
--- a/src/misc/coders/Encoders/video/hevc_videotoolbox.js
+++ b/src/misc/coders/Encoders/video/hevc_videotoolbox.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/none.js b/src/misc/coders/Encoders/video/none.js
index 5242c2c..be95f51 100644
--- a/src/misc/coders/Encoders/video/none.js
+++ b/src/misc/coders/Encoders/video/none.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/rawvideo.js b/src/misc/coders/Encoders/video/rawvideo.js
index 947b226..fec3139 100644
--- a/src/misc/coders/Encoders/video/rawvideo.js
+++ b/src/misc/coders/Encoders/video/rawvideo.js
@@ -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}`;
 }
diff --git a/src/misc/coders/Encoders/video/vp9_libvpx.js b/src/misc/coders/Encoders/video/vp9_libvpx.js
index aa7da96..5005f68 100644
--- a/src/misc/coders/Encoders/video/vp9_libvpx.js
+++ b/src/misc/coders/Encoders/video/vp9_libvpx.js
@@ -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';
diff --git a/src/misc/coders/Encoders/video/vp9_vaapi.js b/src/misc/coders/Encoders/video/vp9_vaapi.js
index 74a7fd9..d826d55 100644
--- a/src/misc/coders/Encoders/video/vp9_vaapi.js
+++ b/src/misc/coders/Encoders/video/vp9_vaapi.js
@@ -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';
diff --git a/src/misc/coders/settings/Audio.js b/src/misc/coders/settings/Audio.js
index 2550e42..4c8057f 100644
--- a/src/misc/coders/settings/Audio.js
+++ b/src/misc/coders/settings/Audio.js
@@ -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,
diff --git a/src/misc/coders/settings/Video.js b/src/misc/coders/settings/Video.js
index 7b77963..24d7c08 100644
--- a/src/misc/coders/settings/Video.js
+++ b/src/misc/coders/settings/Video.js
@@ -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,
diff --git a/src/misc/controls/HLS.js b/src/misc/controls/HLS.js
index 6e08a92..806e0c0 100644
--- a/src/misc/controls/HLS.js
+++ b/src/misc/controls/HLS.js
@@ -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) {},
-};
diff --git a/src/misc/controls/License/index.js b/src/misc/controls/License/index.js
index 55835dd..cad4a5b 100644
--- a/src/misc/controls/License/index.js
+++ b/src/misc/controls/License/index.js
@@ -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) {},
-};
diff --git a/src/misc/controls/Limits.js b/src/misc/controls/Limits.js
index 3e762c7..8d46003 100644
--- a/src/misc/controls/Limits.js
+++ b/src/misc/controls/Limits.js
@@ -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) {},
-};
diff --git a/src/misc/controls/Metadata.js b/src/misc/controls/Metadata.js
index 6813a65..d72c4c3 100644
--- a/src/misc/controls/Metadata.js
+++ b/src/misc/controls/Metadata.js
@@ -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) {},
-};
diff --git a/src/misc/controls/Preview.js b/src/misc/controls/Preview.js
index 580537e..20496f2 100644
--- a/src/misc/controls/Preview.js
+++ b/src/misc/controls/Preview.js
@@ -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) {},
-};
diff --git a/src/misc/controls/Process.js b/src/misc/controls/Process.js
index 32fde7d..32b1f03 100644
--- a/src/misc/controls/Process.js
+++ b/src/misc/controls/Process.js
@@ -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) {},
-};
diff --git a/src/misc/controls/RTMP.js b/src/misc/controls/RTMP.js
index 97831c6..b019214 100644
--- a/src/misc/controls/RTMP.js
+++ b/src/misc/controls/RTMP.js
@@ -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) {},
-};
diff --git a/src/misc/controls/SRT.js b/src/misc/controls/SRT.js
index 0219fd4..c85cc6d 100644
--- a/src/misc/controls/SRT.js
+++ b/src/misc/controls/SRT.js
@@ -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) {},
-};
diff --git a/src/misc/controls/Snapshot.js b/src/misc/controls/Snapshot.js
index 5f52d4c..d75212e 100644
--- a/src/misc/controls/Snapshot.js
+++ b/src/misc/controls/Snapshot.js
@@ -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) {},
-};
diff --git a/src/misc/controls/Source.js b/src/misc/controls/Source.js
index 43cf013..24c51b7 100644
--- a/src/misc/controls/Source.js
+++ b/src/misc/controls/Source.js
@@ -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) {},
-};
diff --git a/src/misc/filters/audio/Loudnorm.js b/src/misc/filters/audio/Loudnorm.js
index b808ee7..7758760 100644
--- a/src/misc/filters/audio/Loudnorm.js
+++ b/src/misc/filters/audio/Loudnorm.js
@@ -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';
diff --git a/src/misc/filters/audio/Pan.js b/src/misc/filters/audio/Pan.js
index 8e14e18..7a0a5d4 100644
--- a/src/misc/filters/audio/Pan.js
+++ b/src/misc/filters/audio/Pan.js
@@ -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';
diff --git a/src/misc/filters/audio/Resample.js b/src/misc/filters/audio/Resample.js
index 65c89ce..f83bb3b 100644
--- a/src/misc/filters/audio/Resample.js
+++ b/src/misc/filters/audio/Resample.js
@@ -44,22 +44,31 @@ function createGraph(settings) {
 	return 'aresample=' + mapping.join(':');
 }
 
-function Layout(props) {
+function Layout({
+	value = '',
+	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.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 ...`) });
 	}
 
@@ -67,12 +76,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>
@@ -81,17 +90,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' },
@@ -102,15 +110,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 ...`) });
 	}
 
@@ -118,12 +126,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>
@@ -132,18 +140,8 @@ 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 () {},
-};
-
-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;
@@ -152,7 +150,7 @@ function Filter(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createGraph(newSettings), automatic);
+		onChange(newSettings, createGraph(newSettings), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -200,11 +198,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, graph, automatic) {},
-};
-
 const filter = 'aresample';
 const name = 'Resample';
 const type = 'audio';
diff --git a/src/misc/filters/audio/Volume.js b/src/misc/filters/audio/Volume.js
index 5a476a4..4f79125 100644
--- a/src/misc/filters/audio/Volume.js
+++ b/src/misc/filters/audio/Volume.js
@@ -39,9 +39,9 @@ function createGraph(settings) {
 	return mapping.join(',');
 }
 
-function VolumeLevel(props) {
+function VolumeLevel({ value = '', onChange = function (event) {} }) {
 	return (
-		<Select label={<Trans>Volume</Trans>} value={props.value} onChange={props.onChange}>
+		<Select label={<Trans>Volume</Trans>} value={value} onChange={onChange}>
 			<MenuItem value="inherit">
 				<Trans>Inherit</Trans>
 			</MenuItem>
@@ -61,33 +61,12 @@ function VolumeLevel(props) {
 	);
 }
 
-VolumeLevel.defaultProps = {
-	value: '',
-	onChange: function (event) {},
-};
-
-function VolumeDB(props) {
-	return (
-		<TextField
-			variant="outlined"
-			fullWidth
-			label={<Trans>Decibels (dB)</Trans>}
-			type="number"
-			value={props.value}
-			disabled={props.disabled}
-			onChange={props.onChange}
-		/>
-	);
+function VolumeDB({ value = '', disabled = false, onChange = function (event) {} }) {
+	return <TextField variant="outlined" fullWidth label={<Trans>Decibels (dB)</Trans>} type="number" value={value} disabled={disabled} onChange={onChange} />;
 }
 
-VolumeDB.defaultProps = {
-	value: '',
-	disabled: false,
-	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;
@@ -96,7 +75,7 @@ function Filter(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createGraph(newSettings), automatic);
+		onChange(newSettings, createGraph(newSettings), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -125,11 +104,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, graph, automatic) {},
-};
-
 const filter = 'volume';
 const name = 'Volume';
 const type = 'audio';
diff --git a/src/misc/filters/video/Bwdif.js b/src/misc/filters/video/Bwdif.js
index cf02820..d38a29b 100644
--- a/src/misc/filters/video/Bwdif.js
+++ b/src/misc/filters/video/Bwdif.js
@@ -34,9 +34,9 @@ function createGraph(settings) {
 	return mapping.join(',');
 }
 
-function Mode(props) {
+function Mode({ value = '', onChange = function (event) {} }) {
 	return (
-		<Select label={<Trans>Deinterlace mode</Trans>} value={props.value} onChange={props.onChange}>
+		<Select label={<Trans>Deinterlace mode</Trans>} value={value} onChange={onChange}>
 			<MenuItem value="0">
 				<Trans>Each frames</Trans>
 			</MenuItem>
@@ -47,14 +47,9 @@ function Mode(props) {
 	);
 }
 
-Mode.defaultProps = {
-	value: '',
-	onChange: function (event) {},
-};
-
-function Parity(props) {
+function Parity({ value = '', onChange = function (event) {} }) {
 	return (
-		<Select label={<Trans>Deinterlace parity</Trans>} value={props.value} onChange={props.onChange}>
+		<Select label={<Trans>Deinterlace parity</Trans>} value={value} onChange={onChange}>
 			<MenuItem value="0">
 				<Trans>Top field</Trans>
 			</MenuItem>
@@ -68,14 +63,9 @@ function Parity(props) {
 	);
 }
 
-Parity.defaultProps = {
-	value: '',
-	onChange: function (event) {},
-};
-
-function Deint(props) {
+function Deint({ value = '', onChange = function (event) {} }) {
 	return (
-		<Select label={<Trans>Deinterlace deint</Trans>} value={props.value} onChange={props.onChange}>
+		<Select label={<Trans>Deinterlace deint</Trans>} value={value} onChange={onChange}>
 			<MenuItem value="0">
 				<Trans>All frames</Trans>
 			</MenuItem>
@@ -86,13 +76,8 @@ function Deint(props) {
 	);
 }
 
-Deint.defaultProps = {
-	value: '',
-	onChange: function (event) {},
-};
-
-function Filter(props) {
-	const settings = init(props.settings);
+function Filter({ settings = {}, onChange = function (settings, mapping) {} }) {
+	settings = init(settings);
 
 	const handleChange = (newSettings) => {
 		let automatic = false;
@@ -101,7 +86,7 @@ function Filter(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createGraph(newSettings), automatic);
+		onChange(newSettings, createGraph(newSettings), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -144,11 +129,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, mapping) {},
-};
-
 const filter = 'bwdif';
 const name = 'Deinterlacing Filter';
 const type = 'video';
diff --git a/src/misc/filters/video/Framerate.js b/src/misc/filters/video/Framerate.js
index 4c4ae11..7fe288b 100644
--- a/src/misc/filters/video/Framerate.js
+++ b/src/misc/filters/video/Framerate.js
@@ -32,7 +32,14 @@ function createGraph(settings) {
 	return mapping.join(',');
 }
 
-function Framerate(props) {
+function Framerate({
+	label = <Trans>Framerate</Trans>,
+	customLabel = <Trans>Custom framerate</Trans>,
+	value = '',
+	variant = 'outlined',
+	allowCustom = true,
+	onChange = function (event) {},
+}) {
 	const { i18n } = useLingui();
 	const sizes = [
 		{ value: '60', label: '60' },
@@ -49,29 +56,12 @@ function Framerate(props) {
 	];
 
 	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 = {
-	label: <Trans>Framerate</Trans>,
-	customLabel: <Trans>Custom framerate</Trans>,
-	value: '',
-	variant: 'outlined',
-	allowCustom: true,
-	onChange: function (event) {},
-};
-
-function Filter(props) {
-	const settings = init(props.settings);
+function Filter({ settings = {}, onChange = function (settings, mapping) {} }) {
+	settings = init(settings);
 
 	const handleChange = (newSettings) => {
 		let automatic = false;
@@ -80,7 +70,7 @@ function Filter(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createGraph(newSettings), automatic);
+		onChange(newSettings, createGraph(newSettings), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -117,11 +107,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, mapping) {},
-};
-
 const filter = 'fps';
 const name = 'Frame Interpolation';
 const type = 'video';
diff --git a/src/misc/filters/video/HFlip.js b/src/misc/filters/video/HFlip.js
index 813fafb..b08ca87 100644
--- a/src/misc/filters/video/HFlip.js
+++ b/src/misc/filters/video/HFlip.js
@@ -29,8 +29,8 @@ function createGraph(settings) {
 	return mapping.join(',');
 }
 
-function Filter(props) {
-	const settings = init(props.settings);
+function Filter({ settings = {}, onChange = function (settings, mapping) {} }) {
+	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) => {
@@ -67,11 +67,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, graph, automatic) {},
-};
-
 const filter = 'hflip';
 const name = 'Horizonal Flip';
 const type = 'video';
diff --git a/src/misc/filters/video/Scale.js b/src/misc/filters/video/Scale.js
index a0d7fcd..91f5255 100644
--- a/src/misc/filters/video/Scale.js
+++ b/src/misc/filters/video/Scale.js
@@ -38,9 +38,9 @@ function createGraph(settings) {
 	return mapping.join(',');
 }
 
-function Mode(props) {
+function Mode({ value = '', onChange = function (event) {} }) {
 	return (
-		<Select label={<Trans>Scale</Trans>} value={props.value} onChange={props.onChange}>
+		<Select label={<Trans>Scale</Trans>} value={value} onChange={onChange}>
 			<MenuItem value="none">
 				<Trans>None</Trans>
 			</MenuItem>
@@ -57,13 +57,8 @@ function Mode(props) {
 	);
 }
 
-Mode.defaultProps = {
-	value: '',
-	onChange: function (event) {},
-};
-
-function Filter(props) {
-	const settings = init(props.settings);
+function Filter({ settings = {}, onChange = function (settings, mapping) {} }) {
+	settings = init(settings);
 
 	const handleChange = (newSettings) => {
 		let automatic = false;
@@ -72,7 +67,7 @@ function Filter(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createGraph(newSettings), automatic);
+		onChange(newSettings, createGraph(newSettings), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -113,11 +108,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, mapping) {},
-};
-
 const filter = 'scale';
 const name = 'Scale';
 const type = 'video';
diff --git a/src/misc/filters/video/Transpose.js b/src/misc/filters/video/Transpose.js
index 17e5f75..66ef043 100644
--- a/src/misc/filters/video/Transpose.js
+++ b/src/misc/filters/video/Transpose.js
@@ -41,9 +41,9 @@ function createGraph(settings) {
 }
 
 // filter
-function Rotate(props) {
+function Rotate({ value = '', onChange = function (event) {} }) {
 	return (
-		<Select label={<Trans>Rotate</Trans>} value={props.value} onChange={props.onChange}>
+		<Select label={<Trans>Rotate</Trans>} value={value} onChange={onChange}>
 			<MenuItem value="none">None</MenuItem>
 			<MenuItem value="90">90°</MenuItem>
 			<MenuItem value="180">180°</MenuItem>
@@ -52,13 +52,8 @@ function Rotate(props) {
 	);
 }
 
-Rotate.defaultProps = {
-	value: '',
-	onChange: function (event) {},
-};
-
-function Filter(props) {
-	const settings = init(props.settings);
+function Filter({ settings = {}, onChange = function (settings, mapping) {} }) {
+	settings = init(settings);
 
 	const handleChange = (newSettings) => {
 		let automatic = false;
@@ -67,7 +62,7 @@ function Filter(props) {
 			automatic = true;
 		}
 
-		props.onChange(newSettings, createGraph(newSettings), automatic);
+		onChange(newSettings, createGraph(newSettings), automatic);
 	};
 
 	const update = (what) => (event) => {
@@ -91,11 +86,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, mapping) {},
-};
-
 const filter = 'transpose';
 const name = 'Transpose';
 const type = 'video';
diff --git a/src/misc/filters/video/VFlip.js b/src/misc/filters/video/VFlip.js
index 96fa74b..7dd8c98 100644
--- a/src/misc/filters/video/VFlip.js
+++ b/src/misc/filters/video/VFlip.js
@@ -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) => {
@@ -67,11 +67,6 @@ function Filter(props) {
 	);
 }
 
-Filter.defaultProps = {
-	settings: {},
-	onChange: function (settings, graph, automatic) {},
-};
-
 const filter = 'vflip';
 const name = 'Vertical Flip';
 const type = 'video';
diff --git a/src/misc/modals/Debug.js b/src/misc/modals/Debug.js
index dff242d..e9222d7 100644
--- a/src/misc/modals/Debug.js
+++ b/src/misc/modals/Debug.js
@@ -2,15 +2,15 @@ import React from 'react';
 
 import TextareaModal from './Textarea';
 
-const Component = function (props) {
+const Component = function ({ open = false, data = '', title = '', onClose = null, onHelp = null }) {
 	return (
 		<TextareaModal
-			open={props.open}
-			title={props.title}
-			onClose={props.onClose}
-			onHelp={props.onHelp}
+			open={open}
+			title={title}
+			onClose={onClose}
+			onHelp={onHelp}
 			rows={20}
-			value={props.data}
+			value={data}
 			readOnly
 			allowCopy
 			allowDownload
@@ -21,11 +21,3 @@ const Component = function (props) {
 };
 
 export default Component;
-
-Component.defaultProps = {
-	open: false,
-	data: '',
-	title: '',
-	onClose: null,
-	onHelp: null,
-};
diff --git a/src/misc/modals/Dialog.js b/src/misc/modals/Dialog.js
index 325189c..af88953 100644
--- a/src/misc/modals/Dialog.js
+++ b/src/misc/modals/Dialog.js
@@ -42,55 +42,47 @@ const useStyles = makeStyles((theme) => ({
 
 // todo: use MuiDialog
 
-const Component = React.forwardRef((props, ref) => {
-	const classes = useStyles();
+const Component = React.forwardRef(
+	({ open = false, title = '', onClose = null, onHelp = null, buttonsRight = null, buttonsLeft = null, maxWidth = -1, children = null }, ref) => {
+		const classes = useStyles();
 
-	const paperStyle = {};
+		const paperStyle = {};
 
-	if (props.maxWidth > 0) {
-		paperStyle.maxWidth = props.maxWidth + 'px';
-	}
+		if (maxWidth > 0) {
+			paperStyle.maxWidth = maxWidth + 'px';
+		}
 
-	return (
-		<Modal open={props.open} onClose={props.onClose} className="modal" disableScrollLock>
-			<Paper className={classes.modalPaper} elevation={0} ref={ref} tabIndex={-1} style={paperStyle}>
-				<Grid container spacing={0}>
-					<Grid item xs={12} className={classes.modalHeader}>
-						<Typography variant="button">{props.title}</Typography>
-						{typeof props.onClose === 'function' && (
-							<IconButton color="inherit" size="small" onClick={props.onClose}>
-								<CloseIcon fontSize="small" />
-							</IconButton>
-						)}
-						{typeof props.onHelp === 'function' && (
-							<IconButton color="inherit" size="small" onClick={props.onHelp}>
-								<HelpIcon fontSize="small" />
-							</IconButton>
-						)}
+		return (
+			<Modal open={open} onClose={onClose} className="modal" disableScrollLock>
+				<Paper className={classes.modalPaper} elevation={0} ref={ref} tabIndex={-1} style={paperStyle}>
+					<Grid container spacing={0}>
+						<Grid item xs={12} className={classes.modalHeader}>
+							<Typography variant="button">{title}</Typography>
+							{typeof onClose === 'function' && (
+								<IconButton color="inherit" size="small" onClick={onClose}>
+									<CloseIcon fontSize="small" />
+								</IconButton>
+							)}
+							{typeof onHelp === 'function' && (
+								<IconButton color="inherit" size="small" onClick={onHelp}>
+									<HelpIcon fontSize="small" />
+								</IconButton>
+							)}
+						</Grid>
 					</Grid>
-				</Grid>
-				<Grid item xs={12}>
-					{props.children}
-				</Grid>
-				<Grid container spacing={0}>
-					<Grid item xs={12} className={classes.modalFooter}>
-						<div>{props.buttonsRight}</div>
-						{props.buttonsLeft}
+					<Grid item xs={12}>
+						{children}
 					</Grid>
-				</Grid>
-			</Paper>
-		</Modal>
-	);
-});
+					<Grid container spacing={0}>
+						<Grid item xs={12} className={classes.modalFooter}>
+							<div>{buttonsRight}</div>
+							{buttonsLeft}
+						</Grid>
+					</Grid>
+				</Paper>
+			</Modal>
+		);
+	},
+);
 
 export default Component;
-
-Component.defaultProps = {
-	open: false,
-	title: '',
-	onClose: null,
-	onHelp: null,
-	buttonsRight: null,
-	buttonsLefts: null,
-	maxWidth: -1,
-};
diff --git a/src/misc/modals/Hint.js b/src/misc/modals/Hint.js
index 3fb46b4..5813db6 100644
--- a/src/misc/modals/Hint.js
+++ b/src/misc/modals/Hint.js
@@ -12,12 +12,12 @@ import Select from '../Select';
 import Video from '../coders/settings/Video';
 import Audio from '../coders/settings/Audio';
 
-const Stream = function (props) {
+const Stream = function ({ stream = {}, onChange = () => {} }) {
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
 
-		let stream = {
-			...props.stream,
+		stream = {
+			...stream,
 		};
 
 		if (what === 'type') {
@@ -51,36 +51,36 @@ const Stream = function (props) {
 			stream[what] = value;
 		}
 
-		props.onChange(stream);
+		onChange(stream);
 	};
 
 	return (
 		<Grid container spacing={2}>
 			{/* <Grid item xs={6}>
-				<Select label={<Trans>Type</Trans>} value={props.stream.type} onChange={handleChange('type')}>
+				<Select label={<Trans>Type</Trans>} value={stream.type} onChange={handleChange('type')}>
 					<MenuItem value="audio">Audio</MenuItem>
 					<MenuItem value="video">Video</MenuItem>
 				</Select>
 			</Grid> */}
-			{props.stream.type === 'audio' ? (
+			{stream.type === 'audio' ? (
 				<React.Fragment>
 					<Grid item xs={12}>
-						<Select label={<Trans>Codec</Trans>} value={props.stream.codec} onChange={handleChange('codec')}>
+						<Select label={<Trans>Codec</Trans>} value={stream.codec} onChange={handleChange('codec')}>
 							<MenuItem value="aac">AAC</MenuItem>
 							<MenuItem value="mp3">MP3</MenuItem>
 						</Select>
 					</Grid>
 					<Grid item xs={12}>
-						<Audio.Sampling value={props.stream.sampling_hz} onChange={handleChange('sampling_hz')} allowCustom />
+						<Audio.Sampling value={stream.sampling_hz} onChange={handleChange('sampling_hz')} allowCustom />
 					</Grid>
 					<Grid item xs={12}>
-						<Audio.Layout value={props.stream.layout} onChange={handleChange('layout')} allowCustom />
+						<Audio.Layout value={stream.layout} onChange={handleChange('layout')} allowCustom />
 					</Grid>
 				</React.Fragment>
 			) : (
 				<React.Fragment>
 					<Grid item xs={12}>
-						<Select label={<Trans>Codec</Trans>} value={props.stream.codec} onChange={handleChange('codec')}>
+						<Select label={<Trans>Codec</Trans>} value={stream.codec} onChange={handleChange('codec')}>
 							<MenuItem value="h264">H264</MenuItem>
 							<MenuItem value="hevc">HEVC</MenuItem>
 							<MenuItem value="vp9">VP9</MenuItem>
@@ -89,10 +89,10 @@ const Stream = function (props) {
 						</Select>
 					</Grid>
 					<Grid item xs={12}>
-						<Video.Size value={props.stream.width + 'x' + props.stream.height} onChange={handleChange('size')} allowCustom />
+						<Video.Size value={stream.width + 'x' + stream.height} onChange={handleChange('size')} allowCustom />
 					</Grid>
 					<Grid item xs={12}>
-						<Video.PixFormat value={props.stream.pix_fmt} onChange={handleChange('pix_fmt')} allowCustom />
+						<Video.PixFormat value={stream.pix_fmt} onChange={handleChange('pix_fmt')} allowCustom />
 					</Grid>
 				</React.Fragment>
 			)}
@@ -100,25 +100,20 @@ const Stream = function (props) {
 	);
 };
 
-Stream.defaultProps = {
-	stream: {},
-	onChange: () => {},
-};
-
-const Streams = function (props) {
+const Streams = function ({ streams = [], type = '', onChange = () => {} }) {
 	const handleChange = (index) => (stream) => {
-		const streams = props.streams.slice();
+		streams = streams.slice();
 
 		streams[index] = stream;
 
-		props.onChange(streams);
+		onChange(streams);
 	};
 
 	const handleAddStream = () => {
-		const streams = props.streams.slice();
+		streams = streams.slice();
 
 		streams.push({
-			index: props.type === 'video' ? 0 : 1,
+			index: type === 'video' ? 0 : 1,
 			stream: streams.length,
 			type: 'audio',
 			codec: 'aac',
@@ -129,18 +124,18 @@ const Streams = function (props) {
 			channels: 2,
 		});
 
-		props.onChange(streams);
+		onChange(streams);
 	};
 
 	const handleRemoveStream = (index) => () => {
-		const streams = props.streams.toSpliced(index, 1);
+		streams = streams.toSpliced(index, 1);
 
-		props.onChange(streams);
+		onChange(streams);
 	};
 
 	return (
 		<Grid container spacing={1}>
-			{props.streams.map((stream, index) => (
+			{streams.map((stream, index) => (
 				<Grid key={stream.index + ':' + stream.stream} item xs={12}>
 					<Stack>
 						<Typography sx={{ textTransform: 'UPPERCASE', marginBottom: 2 }}>{stream.type}</Typography>
@@ -149,12 +144,12 @@ const Streams = function (props) {
 				</Grid>
 			))}
 			<Grid item xs={12}>
-				{props.streams.length < 2 && (
+				{streams.length < 2 && (
 					<Button variant="outlined" color="default" onClick={handleAddStream}>
 						<Trans>Add Audio</Trans>
 					</Button>
 				)}
-				{props.streams.length === 2 && (
+				{streams.length === 2 && (
 					<Button variant="outlined" color="secondary" onClick={handleRemoveStream(1)}>
 						<Trans>Remove Audio</Trans>
 					</Button>
@@ -164,42 +159,26 @@ const Streams = function (props) {
 	);
 };
 
-Streams.defaultProps = {
-	streams: [],
-	type: '',
-	onChange: () => {},
-};
-
-const Component = function (props) {
+const Component = function ({ open = false, title = '', streams = [], type = '', onClose = null, onDone = () => {}, onChange = () => {}, onHelp = null }) {
 	return (
 		<Dialog
-			open={props.open}
-			onClose={props.onClose}
-			title={props.title}
+			open={open}
+			onClose={onClose}
+			title={title}
 			buttonsLeft={
-				<Button variant="outlined" color="secondary" onClick={props.onClose}>
+				<Button variant="outlined" color="secondary" onClick={onClose}>
 					<Trans>Close</Trans>
 				</Button>
 			}
 			buttonsRight={
-				<Button variant="outlined" color="default" onClick={props.onDone}>
+				<Button variant="outlined" color="default" onClick={onDone}>
 					<Trans>Save</Trans>
 				</Button>
 			}
 		>
-			<Streams type={props.type} streams={props.streams} onChange={props.onChange} />
+			<Streams type={type} streams={streams} onChange={onChange} />
 		</Dialog>
 	);
 };
 
 export default Component;
-
-Component.defaultProps = {
-	open: false,
-	title: '',
-	streams: [],
-	type: '',
-	onClose: null,
-	onDone: () => {},
-	onHelp: null,
-};
diff --git a/src/misc/modals/Probe.js b/src/misc/modals/Probe.js
index f3fcec6..a8555c2 100644
--- a/src/misc/modals/Probe.js
+++ b/src/misc/modals/Probe.js
@@ -2,18 +2,8 @@ import React from 'react';
 
 import TextareaModal from './Textarea';
 
-const Component = function (props) {
-	return (
-		<TextareaModal open={props.open} title={props.title} onClose={props.onClose} onHelp={props.onHelp} rows={18} value={props.data} readOnly allowCopy />
-	);
+const Component = function ({ open = false, data = '', title = '', onClose = null, onHelp = null }) {
+	return <TextareaModal open={open} title={title} onClose={onClose} onHelp={onHelp} rows={18} value={data} readOnly allowCopy />;
 };
 
 export default Component;
-
-Component.defaultProps = {
-	open: false,
-	data: '',
-	title: '',
-	onClose: null,
-	onHelp: null,
-};
diff --git a/src/misc/modals/Process.js b/src/misc/modals/Process.js
index 6498ca9..ea62903 100644
--- a/src/misc/modals/Process.js
+++ b/src/misc/modals/Process.js
@@ -113,16 +113,26 @@ const formatLogline = (entry) => {
 	return line;
 };
 
-const Component = function (props) {
+const Component = function ({
+	open = false,
+	title = '',
+	progress = {},
+	logdata = {
+		prelude: [],
+		log: [],
+	},
+	onClose = null,
+	onHelp = null,
+}) {
 	const classes = useStyles();
-	const logdata = initLogdata({
-		...props.logdata,
-		command: props.progress?.command,
+	logdata = initLogdata({
+		...logdata,
+		command: progress?.command,
 	});
 
 	return (
-		<Modal open={props.open} onClose={props.onClose} className="modal">
-			<ModalContent title={props.title} onClose={props.onClose} onHelp={props.onHelp}>
+		<Modal open={open} onClose={onClose} className="modal">
+			<ModalContent title={title} onClose={onClose} onHelp={onHelp}>
 				<Grid container spacing={1}>
 					<Grid item xs={12} md={8} lg={10}>
 						<Grid container spacing={3}>
@@ -161,7 +171,7 @@ const Component = function (props) {
 						</Grid>
 					</Grid>
 					<Grid item xs={12} md={4} lg={2}>
-						{props.progress !== null && <Progress {...props.progress} />}
+						{progress !== null && <Progress {...progress} />}
 					</Grid>
 				</Grid>
 			</ModalContent>
@@ -170,15 +180,3 @@ const Component = function (props) {
 };
 
 export default Component;
-
-Component.defaultProps = {
-	open: false,
-	title: '',
-	progress: {},
-	logdata: {
-		prelude: [],
-		log: [],
-	},
-	onClose: null,
-	onHelp: null,
-};
diff --git a/src/misc/modals/Textarea.js b/src/misc/modals/Textarea.js
index fd19ae1..a0e6746 100644
--- a/src/misc/modals/Textarea.js
+++ b/src/misc/modals/Textarea.js
@@ -16,18 +16,26 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-const Component = function (props) {
+const Component = function ({
+	open = false,
+	title = '',
+	value = '',
+	rows = 0,
+	scrollTo = 'bottom',
+	readOnly = true,
+	allowCopy = true,
+	onClose = null,
+	onHelp = null,
+}) {
 	const classes = useStyles();
 
-	const { open, title, onClose, onHelp, ...other } = props;
-
 	return (
-		<Modal open={props.open} onClose={props.onClose} className="modal">
-			<ModalContent title={props.title} onClose={props.onClose} onHelp={props.onHelp} style={{ overflow: 'hidden' }}>
+		<Modal open={open} onClose={onClose} className="modal">
+			<ModalContent title={title} onClose={onClose} onHelp={onHelp} style={{ overflow: 'hidden' }}>
 				<Grid container spacing={1}>
 					<Grid item xs={12}>
 						<Stack direction="column" justifyContent="center" alignItems="center" spacing={1} className={classes.box}>
-							<Textarea {...other} />
+							<Textarea value={value} rows={rows} scrollTo={scrollTo} readOnly={readOnly} allowCopy={allowCopy} />
 						</Stack>
 					</Grid>
 				</Grid>
@@ -37,10 +45,3 @@ const Component = function (props) {
 };
 
 export default Component;
-
-Component.defaultProps = {
-	open: false,
-	title: '',
-	onClose: null,
-	onHelp: null,
-};
diff --git a/src/theme/components/chip.js b/src/theme/components/chip.js
index 4caa491..46dd04f 100644
--- a/src/theme/components/chip.js
+++ b/src/theme/components/chip.js
@@ -15,9 +15,9 @@ const outlined = {
 		'& .MuiChip-label': {
 			padding: '.1em .7em .1em .7em',
 			margin: 0,
-			fontSize: '.9rem'
+			fontSize: '.9rem',
 		},
-		marginRight: '.5em'
+		marginRight: '.5em',
 	},
 	primary: {
 		color: base.palette.text.primary,
diff --git a/src/utils/auth0.js b/src/utils/auth0.js
index 81ca087..4c9dd1c 100644
--- a/src/utils/auth0.js
+++ b/src/utils/auth0.js
@@ -31,7 +31,7 @@ const setConfig = (config) => {
 			audience: '',
 			redirect_uri: window.location.origin,
 			...config,
-		})
+		}),
 	);
 };
 
diff --git a/src/views/ChannelSelect.js b/src/views/ChannelSelect.js
index ba4b6d9..d209700 100644
--- a/src/views/ChannelSelect.js
+++ b/src/views/ChannelSelect.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-export default function ChannelSelector(props) {
+export default function ChannelSelector({ channelid = '' }) {
 	const navigate = useNavigate();
 	const [$channelid, setChannelid] = React.useState('');
 
@@ -15,12 +15,8 @@ export default function ChannelSelector(props) {
 	}, [navigate, $channelid]);
 
 	const onMount = () => {
-		setChannelid(props.channelid);
+		setChannelid(channelid);
 	};
 
 	return null;
 }
-
-ChannelSelector.defaultProps = {
-	channelid: '',
-};
diff --git a/src/views/Edit/Profile.js b/src/views/Edit/Profile.js
index 92f515f..2907c44 100644
--- a/src/views/Edit/Profile.js
+++ b/src/views/Edit/Profile.js
@@ -21,12 +21,30 @@ import StreamSelect from './StreamSelect';
 
 import FilterSelect from '../../misc/FilterSelect';
 
-export default function Profile(props) {
+export default function Profile({
+	skills = {},
+	sources = [],
+	profile = {},
+	config = {},
+	startWith = '',
+	onDone = function (sources, profile) {},
+	onAbort = function () {},
+	onProbe = function (inputs) {
+		return {
+			streams: [],
+			log: ['onProbe function not provided for this component'],
+		};
+	},
+	onRefresh = function () {},
+	onStore = function (name, data) {
+		return '';
+	},
+}) {
 	const [$sources, setSources] = React.useState({
-		video: M.initSource('video', props.sources[0]),
-		audio: M.initSource('audio', props.sources[1]),
+		video: M.initSource('video', sources[0]),
+		audio: M.initSource('audio', sources[1]),
 	});
-	const [$profile, setProfile] = React.useState(M.initProfile(props.profile));
+	const [$profile, setProfile] = React.useState(M.initProfile(profile));
 	const [$videoProbe, setVideoProbe] = React.useState({
 		probing: false,
 		log: [],
@@ -49,7 +67,7 @@ export default function Profile(props) {
 		type: '',
 		streams: [],
 	});
-	const [$activeStep, setActiveStep] = React.useState(props.startWith === 'audio' ? 1 : 0);
+	const [$activeStep, setActiveStep] = React.useState(startWith === 'audio' ? 1 : 0);
 	const [$ready, setReady] = React.useState(false);
 
 	React.useEffect(() => {
@@ -61,7 +79,7 @@ export default function Profile(props) {
 
 	const load = async () => {
 		// Add pseudo sources
-		props.skills.sources.noaudio = [];
+		skills.sources.noaudio = [];
 
 		let audio = $sources.audio;
 
@@ -74,9 +92,9 @@ export default function Profile(props) {
 		}
 
 		if (hasAudio === true) {
-			props.skills.sources.videoaudio = [];
+			skills.sources.videoaudio = [];
 		} else {
-			delete props.skills.sources.videoaudio;
+			delete skills.sources.videoaudio;
 		}
 
 		setSources({
@@ -110,7 +128,7 @@ export default function Profile(props) {
 			});
 		}
 
-		const res = await props.onProbe(inputs);
+		const res = await onProbe(inputs);
 
 		const status = handleProbeStreams(type, device, settings, inputs, res);
 
@@ -123,10 +141,10 @@ export default function Profile(props) {
 		if (type === 'video') {
 			let audio = $sources.audio;
 
-			const profile = M.preselectProfile('video', res.streams, $profile, props.skills.encoders, audio.type === '');
+			const profile = M.preselectProfile('video', res.streams, $profile, skills.encoders, audio.type === '');
 
 			// Add pseudo sources
-			props.skills.sources.noaudio = [];
+			skills.sources.noaudio = [];
 
 			let hasAudio = false;
 			for (let i = 0; i < res.streams.length; i++) {
@@ -137,12 +155,12 @@ export default function Profile(props) {
 			}
 
 			if (hasAudio === true) {
-				props.skills.sources.videoaudio = [];
+				skills.sources.videoaudio = [];
 				if (audio.type === '') {
 					audio.type = 'videoaudio';
 				}
 			} else {
-				delete props.skills.sources.videoaudio;
+				delete skills.sources.videoaudio;
 				if (audio.type === '' || audio.type === 'videoaudio') {
 					audio.type = 'noaudio';
 					profile.audio.source = -1;
@@ -182,7 +200,7 @@ export default function Profile(props) {
 				},
 			});
 		} else {
-			const profile = M.preselectProfile('audio', res.streams, $profile, props.skills.encoders);
+			const profile = M.preselectProfile('audio', res.streams, $profile, skills.encoders);
 
 			setProfile({
 				...$profile,
@@ -210,12 +228,12 @@ export default function Profile(props) {
 
 	const handleRefresh = async () => {
 		setSkillsRefresh(true);
-		await props.onRefresh();
+		await onRefresh();
 		setSkillsRefresh(false);
 	};
 
 	const handleStore = async (name, data) => {
-		return await props.onStore(name, data);
+		return await onStore(name, data);
 	};
 
 	const handleEncoding = (type) => (encoder, decoder) => {
@@ -245,11 +263,11 @@ export default function Profile(props) {
 		const sources = M.cleanupSources($sources);
 		const profile = M.cleanupProfile($profile);
 
-		props.onDone(sources, profile);
+		onDone(sources, profile);
 	};
 
 	const handleAbort = () => {
-		props.onAbort();
+		onAbort();
 	};
 
 	const handleProbeLogModal = (type) => (event) => {
@@ -493,9 +511,9 @@ export default function Profile(props) {
 						<Grid item xs={12}>
 							<SourceSelect
 								type="video"
-								skills={props.skills}
+								skills={skills}
 								source={$sources.video}
-								config={props.config}
+								config={config}
 								onProbe={handleProbe}
 								onChange={handleSourceSettingsChange}
 								onRefresh={handleRefresh}
@@ -570,7 +588,7 @@ export default function Profile(props) {
 												streams={$sources.video.streams}
 												profile={$profile.video}
 												codecs={['copy', 'h264', 'hevc', 'av1', 'vp8', 'vp9']}
-												skills={props.skills}
+												skills={skills}
 												onChange={handleEncoding('video')}
 											/>
 										</Grid>
@@ -579,7 +597,7 @@ export default function Profile(props) {
 												<FilterSelect
 													type="video"
 													profile={$profile.video}
-													availableFilters={props.skills.filter}
+													availableFilters={skills.filter}
 													onChange={handleFilter('video')}
 												/>
 											</Grid>
@@ -617,9 +635,9 @@ export default function Profile(props) {
 						<Grid item xs={12}>
 							<SourceSelect
 								type="audio"
-								skills={props.skills}
+								skills={skills}
 								source={$sources.audio}
-								config={props.config}
+								config={config}
 								onProbe={handleProbe}
 								onSelect={handleSourceChange}
 								onChange={handleSourceSettingsChange}
@@ -643,18 +661,13 @@ export default function Profile(props) {
 										streams={$sources.video.streams}
 										profile={$profile.audio}
 										codecs={['copy', 'aac', 'mp3', 'opus']}
-										skills={props.skills}
+										skills={skills}
 										onChange={handleEncoding('audio')}
 									/>
 								</Grid>
 								{$profile.audio.encoder.coder !== 'none' && $profile.audio.encoder.coder !== 'copy' && $profile.audio.source !== -1 && (
 									<Grid item xs={12}>
-										<FilterSelect
-											type="audio"
-											profile={$profile.audio}
-											availableFilters={props.skills.filter}
-											onChange={handleFilter('audio')}
-										/>
+										<FilterSelect type="audio" profile={$profile.audio} availableFilters={skills.filter} onChange={handleFilter('audio')} />
 									</Grid>
 								)}
 							</React.Fragment>
@@ -729,7 +742,7 @@ export default function Profile(props) {
 														streams={$sources.audio.streams}
 														profile={$profile.audio}
 														codecs={['copy', 'aac', 'mp3']}
-														skills={props.skills}
+														skills={skills}
 														onChange={handleEncoding('audio')}
 													/>
 												</Grid>
@@ -738,7 +751,7 @@ export default function Profile(props) {
 														<FilterSelect
 															type="audio"
 															profile={$profile.audio}
-															availableFilters={props.skills.filter}
+															availableFilters={skills.filter}
 															onChange={handleFilter('audio')}
 														/>
 													</Grid>
@@ -788,23 +801,3 @@ export default function Profile(props) {
 		</React.Fragment>
 	);
 }
-
-Profile.defaultProps = {
-	skills: {},
-	sources: [],
-	profile: {},
-	config: {},
-	startWith: '',
-	onDone: function (sources, profile) {},
-	onAbort: function () {},
-	onProbe: function (inputs) {
-		return {
-			streams: [],
-			log: ['onProbe function not provided for this component'],
-		};
-	},
-	onRefresh: function () {},
-	onStore: function (name, data) {
-		return '';
-	},
-};
diff --git a/src/views/Edit/ProfileSummary.js b/src/views/Edit/ProfileSummary.js
index 1dcf9f5..5f4b08d 100644
--- a/src/views/Edit/ProfileSummary.js
+++ b/src/views/Edit/ProfileSummary.js
@@ -30,17 +30,17 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function ProfileSummary(props) {
+export default function ProfileSummary({ sources = [], profile = null, onEdit = function (type) {}, onWizard = function () {} }) {
 	const classes = useStyles();
 
-	const profile = M.initProfile(props.profile);
+	profile = M.initProfile(profile);
 
 	const handleEdit = (what) => () => {
-		props.onEdit(what);
+		onEdit(what);
 	};
 
 	const handleWizard = () => () => {
-		props.onWizard();
+		onWizard();
 	};
 
 	return (
@@ -67,7 +67,7 @@ export default function ProfileSummary(props) {
 				</Typography>
 			</Grid>
 			<Grid item xs={12}>
-				<Summary type="video" sources={props.sources} profile={profile.video} />
+				<Summary type="video" sources={sources} profile={profile.video} />
 			</Grid>
 			<Grid
 				item
@@ -91,15 +91,8 @@ export default function ProfileSummary(props) {
 				</Typography>
 			</Grid>
 			<Grid item xs={12}>
-				<Summary type="audio" sources={props.sources} profile={profile.audio} />
+				<Summary type="audio" sources={sources} profile={profile.audio} />
 			</Grid>
 		</Grid>
 	);
 }
-
-ProfileSummary.defaultProps = {
-	sources: [],
-	profile: null,
-	onEdit: function (type) {},
-	onWizard: function () {},
-};
diff --git a/src/views/Edit/SourceSelect.js b/src/views/Edit/SourceSelect.js
index e9991ee..d92a590 100644
--- a/src/views/Edit/SourceSelect.js
+++ b/src/views/Edit/SourceSelect.js
@@ -45,35 +45,45 @@ function reducer(settings, data) {
 	return newSettings;
 }
 
-export default function SourceSelect(props) {
+export default function SourceSelect({
+	type = '',
+	skills = {},
+	source = {},
+	config = {},
+	onProbe = function (type, device, settings, inputs) {},
+	onSelect = function (type, device) {},
+	onChange = function (type, device, settings) {},
+	onRefresh = function () {},
+	onStore = function (name, data) {},
+}) {
 	// $source holds the currently selected device. It is initialized with the
 	// last stored source.
-	const [$source, setSource] = React.useState(props.source.type);
+	const [$source, setSource] = React.useState(source.type);
 
 	// $settings is for storing the settings of the different devices, such that if
 	// the user switches between them, they can be restored. It takes the last
 	// stored source settings as initial value.
-	const [$settings, setSettings] = React.useReducer(reducer, props.source, init);
+	const [$settings, setSettings] = React.useReducer(reducer, source, init);
 
-	const config = initConfig(props.config);
+	config = initConfig(config);
 
 	const handleSource = (source) => {
-		props.onChange(props.type);
+		onChange(type);
 		setSource(source);
 
-		props.onSelect(props.type, source);
+		onSelect(type, source);
 	};
 
 	const handleRefresh = async () => {
-		await props.onRefresh();
+		await onRefresh();
 	};
 
 	const handleStore = async (name, data) => {
-		return await props.onStore(name, data);
+		return await onStore(name, data);
 	};
 
 	const handleProbe = async (settings, inputs) => {
-		await props.onProbe(props.type, $source, settings, inputs);
+		await onProbe(type, $source, settings, inputs);
 	};
 
 	const handleChange = (source) => (settings) => {
@@ -82,7 +92,7 @@ export default function SourceSelect(props) {
 			[source]: settings,
 		});
 
-		props.onChange(props.type, source, settings);
+		onChange(type, source, settings);
 	};
 
 	let sourceControl = null;
@@ -91,11 +101,11 @@ export default function SourceSelect(props) {
 	if (s !== null) {
 		const Component = s.component;
 
-		if (SemverSatisfies(props.skills.ffmpeg.version, s.ffversion)) {
+		if (SemverSatisfies(skills.ffmpeg.version, s.ffversion)) {
 			sourceControl = (
 				<Component
-					knownDevices={props.skills.sources[$source]}
-					skills={props.skills}
+					knownDevices={skills.sources[$source]}
+					skills={skills}
 					config={config[$source]}
 					settings={$settings[$source]}
 					onChange={handleChange($source)}
@@ -110,13 +120,7 @@ export default function SourceSelect(props) {
 	return (
 		<Grid container spacing={1}>
 			<Grid item xs={12}>
-				<Select
-					type={props.type}
-					selected={$source}
-					ffversion={props.skills.ffmpeg.version}
-					availableSources={props.skills.sources}
-					onSelect={handleSource}
-				/>
+				<Select type={type} selected={$source} ffversion={skills.ffmpeg.version} availableSources={skills.sources} onSelect={handleSource} />
 			</Grid>
 			<Grid item xs={12}>
 				{sourceControl}
@@ -125,42 +129,30 @@ export default function SourceSelect(props) {
 	);
 }
 
-SourceSelect.defaultProps = {
-	type: '',
-	skills: {},
-	source: {},
-	config: {},
-	onProbe: function (type, device, settings, inputs) {},
-	onSelect: function (type, device) {},
-	onChange: function (type, device, settings) {},
-	onRefresh: function () {},
-	onStore: function (name, data) {},
-};
-
-function Select(props) {
+function Select({ type = '', selected = '', ffversion = '0.0.0', availableSources = {}, onSelect = function (source) {} }) {
 	const handleSource = (source) => () => {
-		props.onSelect(source);
+		onSelect(source);
 	};
 
-	let availableSources = [];
+	let selectAvailableSources = [];
 
 	for (let s of Sources.List()) {
-		if (!(s.id in props.availableSources)) {
+		if (!(s.id in availableSources)) {
 			continue;
 		}
 
-		if (!s.capabilities.includes(props.type)) {
+		if (!s.capabilities.includes(type)) {
 			continue;
 		}
 
-		if (!SemverSatisfies(props.ffversion, s.ffversion)) {
+		if (!SemverSatisfies(ffversion, s.ffversion)) {
 			continue;
 		}
 
-		const variant = s.id === props.selected ? 'bigSelected' : 'big';
+		const variant = s.id === selected ? 'bigSelected' : 'big';
 		const Icon = s.icon;
 
-		availableSources.push(
+		selectAvailableSources.push(
 			<Grid item xs={6} md={4} align="center" key={s.id}>
 				<Button variant={variant} onClick={handleSource(s.id)}>
 					<div>
@@ -172,7 +164,7 @@ function Select(props) {
 		);
 	}
 
-	if (availableSources.length === 0) {
+	if (selectAvailableSources.length === 0) {
 		return (
 			<Grid container spacing={1}>
 				<Grid item xs={12}>
@@ -186,15 +178,7 @@ function Select(props) {
 
 	return (
 		<Grid container spacing={1}>
-			{availableSources}
+			{selectAvailableSources}
 		</Grid>
 	);
 }
-
-Select.defaultProps = {
-	type: '',
-	selected: '',
-	ffversion: '0.0.0',
-	availableSources: {},
-	onSelect: function (source) {},
-};
diff --git a/src/views/Edit/Sources/ALSA.js b/src/views/Edit/Sources/ALSA.js
index 1d562db..a2e9fd4 100644
--- a/src/views/Edit/Sources/ALSA.js
+++ b/src/views/Edit/Sources/ALSA.js
@@ -57,10 +57,19 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({
+	knownDevices = [],
+	settings = {},
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+	onStore = function (name, data) {
+		return '';
+	},
+}) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (what) => (event) => {
 		let data = {};
@@ -69,21 +78,21 @@ function Source(props) {
 			data[what] = event.target.value;
 		}
 
-		props.onChange({
+		onChange({
 			...settings,
 			...data,
 		});
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
-	const filteredDevices = props.knownDevices.filter((device) => device.media === 'audio');
+	const filteredDevices = knownDevices.filter((device) => device.media === 'audio');
 	const options = filteredDevices.map((device) => {
 		return {
 			value: device.id.replace(/^hw:/, ''),
@@ -140,14 +149,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-};
-
 function SourceIcon(props) {
 	return <Icon {...props} />;
 }
diff --git a/src/views/Edit/Sources/AVFoundation.js b/src/views/Edit/Sources/AVFoundation.js
index 072b7d9..1cde83b 100644
--- a/src/views/Edit/Sources/AVFoundation.js
+++ b/src/views/Edit/Sources/AVFoundation.js
@@ -74,10 +74,19 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({
+	knownDevices = [],
+	settings = {},
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+	onStore = function (name, data) {
+		return '';
+	},
+}) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (what) => (event) => {
 		let data = {};
@@ -88,21 +97,21 @@ function Source(props) {
 			data[what] = event.target.value;
 		}
 
-		props.onChange({
+		onChange({
 			...settings,
 			...data,
 		});
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
-	let filteredDevices = props.knownDevices.filter((device) => device.media === 'video');
+	let filteredDevices = knownDevices.filter((device) => device.media === 'video');
 	let options = filteredDevices.map((device) => {
 		return {
 			value: device.id,
@@ -132,7 +141,7 @@ function Source(props) {
 		/>
 	);
 
-	filteredDevices = props.knownDevices.filter((device) => device.media === 'audio');
+	filteredDevices = knownDevices.filter((device) => device.media === 'audio');
 	options = filteredDevices.map((device) => {
 		return {
 			value: device.id,
@@ -205,14 +214,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/AudioLoop.js b/src/views/Edit/Sources/AudioLoop.js
index 2220f50..794918e 100644
--- a/src/views/Edit/Sources/AudioLoop.js
+++ b/src/views/Edit/Sources/AudioLoop.js
@@ -50,9 +50,19 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({
+	knownDevices = [],
+	settings = {},
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+	onStore = function (name, data) {
+		return '';
+	},
+}) {
 	const classes = useStyles();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
+
 	const [$saving, setSaving] = React.useState(false);
 	const [$error, setError] = React.useState({
 		open: false,
@@ -61,9 +71,9 @@ function Source(props) {
 	});
 
 	const handleFileUpload = async (data, extension, mimetype) => {
-		const path = await props.onStore('audioloop.source', data);
+		const path = await onStore('audioloop.source', data);
 
-		props.onChange({
+		onChange({
 			...settings,
 			address: path,
 			mimetype: mimetype,
@@ -127,7 +137,7 @@ function Source(props) {
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
 	return (
@@ -175,17 +185,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-	onStore: function (name, data) {
-		return '';
-	},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/Framebuffer.js b/src/views/Edit/Sources/Framebuffer.js
index 2f80556..8692429 100644
--- a/src/views/Edit/Sources/Framebuffer.js
+++ b/src/views/Edit/Sources/Framebuffer.js
@@ -45,10 +45,19 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({
+	knownDevices = [],
+	settings = {},
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+	onStore = function (name, data) {
+		return '';
+	},
+}) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (what) => (event) => {
 		let data = {};
@@ -57,17 +66,17 @@ function Source(props) {
 			data[what] = event.target.value;
 		}
 
-		props.onChange({
+		onChange({
 			...settings,
 			...data,
 		});
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
-	const filteredDevices = props.knownDevices.filter((device) => device.extra !== '');
+	const filteredDevices = knownDevices.filter((device) => device.extra !== '');
 	const options = filteredDevices.map((device) => {
 		return {
 			value: device.id,
@@ -114,13 +123,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-};
-
 function SourceIcon(props) {
 	return <FontAwesomeIcon icon={faImages} style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/Network.js b/src/views/Edit/Sources/Network.js
index 18fd4d4..6c754e3 100644
--- a/src/views/Edit/Sources/Network.js
+++ b/src/views/Edit/Sources/Network.js
@@ -495,8 +495,7 @@ const isValidURL = (address) => {
 	return true;
 };
 
-function AdvancedSettings(props) {
-	const settings = props.settings;
+function AdvancedSettings({ settings = {}, onChange = function (settings) {} }) {
 	let protocolClass = getProtocolClass(settings.address);
 	if (settings.mode === 'push') {
 		switch (settings.push.type) {
@@ -528,7 +527,7 @@ function AdvancedSettings(props) {
 									</Typography>
 								</Grid>
 								<Grid item xs={12}>
-									<Checkbox label={<Trans>UDP transport</Trans>} checked={settings.rtsp.udp} onChange={props.onChange('rtsp', 'udp')} />
+									<Checkbox label={<Trans>UDP transport</Trans>} checked={settings.rtsp.udp} onChange={onChange('rtsp', 'udp')} />
 								</Grid>
 								<Grid item xs={12}>
 									<TextField
@@ -539,7 +538,7 @@ function AdvancedSettings(props) {
 										fullWidth
 										label={<Trans>Socket timeout (microseconds)</Trans>}
 										value={settings.rtsp.stimeout}
-										onChange={props.onChange('rtsp', 'stimeout')}
+										onChange={onChange('rtsp', 'stimeout')}
 									/>
 								</Grid>
 							</React.Fragment>
@@ -555,12 +554,12 @@ function AdvancedSettings(props) {
 									<Checkbox
 										label={<Trans>Read input at native speed</Trans>}
 										checked={settings.http.readNative}
-										onChange={props.onChange('http', 'readNative')}
+										onChange={onChange('http', 'readNative')}
 									/>
 									<Checkbox
 										label={<Trans>Force input framerate</Trans>}
 										checked={settings.http.forceFramerate}
-										onChange={props.onChange('http', 'forceFramerate')}
+										onChange={onChange('http', 'forceFramerate')}
 									/>
 								</Grid>
 								{settings.http.forceFramerate === true && (
@@ -573,7 +572,7 @@ function AdvancedSettings(props) {
 											fullWidth
 											label={<Trans>Framerate</Trans>}
 											value={settings.http.framerate}
-											onChange={props.onChange('http', 'framerate')}
+											onChange={onChange('http', 'framerate')}
 										/>
 									</Grid>
 								)}
@@ -583,7 +582,7 @@ function AdvancedSettings(props) {
 										fullWidth
 										label="User-Agent"
 										value={settings.http.userAgent}
-										onChange={props.onChange('http', 'userAgent')}
+										onChange={onChange('http', 'userAgent')}
 									/>
 								</Grid>
 								<Grid item xs={12}>
@@ -592,7 +591,7 @@ function AdvancedSettings(props) {
 										fullWidth
 										label="Referrer"
 										value={settings.http.referer}
-										onChange={props.onChange('http', 'referer')}
+										onChange={onChange('http', 'referer')}
 									/>
 								</Grid>
 								<Grid item xs={12}>
@@ -601,7 +600,7 @@ function AdvancedSettings(props) {
 										fullWidth
 										label="HTTP proxy"
 										value={settings.http.http_proxy}
-										onChange={props.onChange('http', 'http_proxy')}
+										onChange={onChange('http', 'http_proxy')}
 										placeholder="https://123.123.123.123:443"
 									/>
 								</Grid>
@@ -621,7 +620,7 @@ function AdvancedSettings(props) {
 								fullWidth
 								label="thread_queue_size"
 								value={settings.general.thread_queue_size}
-								onChange={props.onChange('general', 'thread_queue_size')}
+								onChange={onChange('general', 'thread_queue_size')}
 							/>
 						</Grid>
 						<Grid item xs={12}>
@@ -633,7 +632,7 @@ function AdvancedSettings(props) {
 								fullWidth
 								label="probesize (bytes)"
 								value={settings.general.probesize}
-								onChange={props.onChange('general', 'probesize')}
+								onChange={onChange('general', 'probesize')}
 							/>
 							<Typography variant="caption">
 								<Trans>
@@ -650,7 +649,7 @@ function AdvancedSettings(props) {
 								fullWidth
 								label="max_probe_packets"
 								value={settings.general.max_probe_packets}
-								onChange={props.onChange('general', 'max_probe_packets')}
+								onChange={onChange('general', 'max_probe_packets')}
 							/>
 							<Typography variant="caption">
 								<Trans>Default {2500}</Trans>
@@ -677,7 +676,7 @@ function AdvancedSettings(props) {
 												? settings.general.analyzeduration_rtmp
 												: settings.general.analyzeduration
 								}
-								onChange={props.onChange(
+								onChange={onChange(
 									'general',
 									settings.mode === 'push'
 										? settings.push.type === 'hls'
@@ -699,7 +698,7 @@ function AdvancedSettings(props) {
 							</Typography>
 						</Grid>
 						<Grid item xs={12}>
-							<MultiSelect type="select" label="flags" value={settings.general.fflags} onChange={props.onChange('general', 'fflags')}>
+							<MultiSelect type="select" label="flags" value={settings.general.fflags} onChange={onChange('general', 'fflags')}>
 								<MultiSelectOption value="discardcorrupt" name="discardcorrupt" />
 								<MultiSelectOption value="fastseek" name="fastseek" />
 								<MultiSelectOption value="genpts" name="genpts" />
@@ -712,16 +711,16 @@ function AdvancedSettings(props) {
 							</MultiSelect>
 						</Grid>
 						<Grid item xs={12}>
-							<Checkbox label={<Trans>copyts</Trans>} checked={settings.general.copyts} onChange={props.onChange('general', 'copyts')} />
+							<Checkbox label={<Trans>copyts</Trans>} checked={settings.general.copyts} onChange={onChange('general', 'copyts')} />
 							<Checkbox
 								label={<Trans>start_at_zero</Trans>}
 								checked={settings.general.start_at_zero}
-								onChange={props.onChange('general', 'start_at_zero')}
+								onChange={onChange('general', 'start_at_zero')}
 							/>
 							<Checkbox
 								label={<Trans>use_wallclock_as_timestamps</Trans>}
 								checked={settings.general.use_wallclock_as_timestamps}
-								onChange={props.onChange('general', 'use_wallclock_as_timestamps')}
+								onChange={onChange('general', 'use_wallclock_as_timestamps')}
 							/>
 						</Grid>
 						<Grid item xs={12}>
@@ -729,7 +728,7 @@ function AdvancedSettings(props) {
 								type="select"
 								label={<Trans>avoid_negative_ts</Trans>}
 								value={settings.general.avoid_negative_ts}
-								onChange={props.onChange('general', 'avoid_negative_ts')}
+								onChange={onChange('general', 'avoid_negative_ts')}
 							>
 								<MenuItem value="make_non_negative">make_non_negative</MenuItem>
 								<MenuItem value="make_zero">make_zero</MenuItem>
@@ -744,12 +743,19 @@ function AdvancedSettings(props) {
 	);
 }
 
-function Pull(props) {
+function Pull({
+	knownDevices = [],
+	settings = {},
+	config = {},
+	skills = null,
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+}) {
 	const classes = useStyles();
-	const settings = props.settings;
 	const authProtocol = isAuthProtocol(settings.address);
 	const validURL = isValidURL(settings.address);
-	const supportedProtocol = isSupportedProtocol(settings.address, props.skills.protocols.input);
+	const supportedProtocol = isSupportedProtocol(settings.address, skills.protocols.input);
 
 	return (
 		<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
@@ -765,7 +771,7 @@ function Pull(props) {
 					label={<Trans>Address</Trans>}
 					placeholder="rtsp://ip:port/path"
 					value={settings.address}
-					onChange={props.onChange('', 'address')}
+					onChange={onChange('', 'address')}
 				/>
 				<Typography variant="caption">
 					<Trans>Supports HTTP (HLS, DASH), RTP, RTSP, RTMP, SRT and more.</Trans>
@@ -792,7 +798,7 @@ function Pull(props) {
 											fullWidth
 											label={<Trans>Username</Trans>}
 											value={settings.username}
-											onChange={props.onChange('', 'username')}
+											onChange={onChange('', 'username')}
 										/>
 										<Typography variant="caption">
 											<Trans>Username for the device.</Trans>
@@ -804,7 +810,7 @@ function Pull(props) {
 											fullWidth
 											label={<Trans>Password</Trans>}
 											value={settings.password}
-											onChange={props.onChange('', 'password')}
+											onChange={onChange('', 'password')}
 										/>
 										<Typography variant="caption">
 											<Trans>Password for the device.</Trans>
@@ -812,13 +818,13 @@ function Pull(props) {
 									</Grid>
 								</React.Fragment>
 							)}
-							<AdvancedSettings {...props}></AdvancedSettings>
+							<AdvancedSettings settings={settings} onChange={onChange} />
 						</React.Fragment>
 					)}
 				</React.Fragment>
 			)}
 			<Grid item xs={12}>
-				<FormInlineButton disabled={!validURL || !supportedProtocol} onClick={props.onProbe}>
+				<FormInlineButton disabled={!validURL || !supportedProtocol} onClick={onProbe}>
 					<Trans>Probe</Trans>
 				</FormInlineButton>
 			</Grid>
@@ -826,13 +832,20 @@ function Pull(props) {
 	);
 }
 
-function Push(props) {
+function Push({
+	knownDevices = [],
+	settings = {},
+	config = {},
+	skills = null,
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+}) {
 	const classes = useStyles();
-	const settings = props.settings;
 
-	//const supportsHLS = isSupportedProtocol('http://', props.skills.protocols.input);
-	const supportsRTMP = isSupportedProtocol('rtmp://', props.skills.protocols.input);
-	const supportsSRT = isSupportedProtocol('srt://', props.skills.protocols.input);
+	//const supportsHLS = isSupportedProtocol('http://', skills.protocols.input);
+	const supportsRTMP = isSupportedProtocol('rtmp://', skills.protocols.input);
+	const supportsSRT = isSupportedProtocol('srt://', skills.protocols.input);
 
 	if (!supportsRTMP && !supportsSRT) {
 		return (
@@ -853,7 +866,7 @@ function Push(props) {
 		<React.Fragment>
 			<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
 				<Grid item xs={12}>
-					<Select type="select" label={<Trans>Protocol</Trans>} value={settings.push.type} onChange={props.onChange('push', 'type')}>
+					<Select type="select" label={<Trans>Protocol</Trans>} value={settings.push.type} onChange={onChange('push', 'type')}>
 						<MenuItem value="rtmp" disabled={!supportsRTMP}>
 							RTMP
 						</MenuItem>
@@ -863,26 +876,19 @@ function Push(props) {
 					</Select>
 				</Grid>
 			</Grid>
-			{settings.push.type === 'rtmp' && <PushRTMP {...props} />}
-			{settings.push.type === 'hls' && <PushHLS {...props} />}
-			{settings.push.type === 'srt' && <PushSRT {...props} />}
+			{settings.push.type === 'rtmp' && (
+				<PushRTMP knownDevices={knownDevices} settings={settings} config={config} onChange={onChange} onProbe={onProbe} onRefresh={onRefresh} />
+			)}
+			{settings.push.type === 'hls' && <PushHLS settings={settings} config={config} onChange={onChange} onProbe={onProbe} />}
+			{settings.push.type === 'srt' && (
+				<PushSRT knownDevices={knownDevices} settings={settings} config={config} onChange={onChange} onProbe={onProbe} onRefresh={onRefresh} />
+			)}
 		</React.Fragment>
 	);
 }
 
-Push.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	config: {},
-	skills: null,
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-};
-
-function PushHLS(props) {
+function PushHLS({ settings = {}, config = {}, onChange = function (settings) {}, onProbe = function (settings, inputs) {} }) {
 	const classes = useStyles();
-	const config = props.config;
 
 	const HLS = getHLS(config);
 
@@ -898,9 +904,9 @@ function PushHLS(props) {
 					<Textarea rows={1} value={HLS} readOnly allowCopy />
 				</BoxTextarea>
 			</Grid>
-			<AdvancedSettings {...props} />
+			<AdvancedSettings settings={settings} onChange={onChange} />
 			<Grid item xs={12}>
-				<FormInlineButton onClick={props.onProbe}>
+				<FormInlineButton onClick={onProbe}>
 					<Trans>Probe</Trans>
 				</FormInlineButton>
 			</Grid>
@@ -908,11 +914,17 @@ function PushHLS(props) {
 	);
 }
 
-function PushRTMP(props) {
+function PushRTMP({
+	knownDevices = [],
+	settings = {},
+	config = {},
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+}) {
 	const { i18n } = useLingui();
 	const classes = useStyles();
 	const navigate = useNavigate();
-	const config = props.config;
 
 	let form = null;
 
@@ -934,7 +946,7 @@ function PushRTMP(props) {
 	} else {
 		const RTMP = getRTMP(config);
 
-		const filteredDevices = props.knownDevices.filter((device) => device.media === 'rtmp');
+		const filteredDevices = knownDevices.filter((device) => device.media === 'rtmp');
 		const options = filteredDevices.map((device) => {
 			return (
 				<MenuItem key={device.id} value={device.id}>
@@ -958,14 +970,14 @@ function PushRTMP(props) {
 		form = (
 			<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
 				<Grid item xs={12}>
-					<Select type="select" label={<Trans>Input stream</Trans>} value={props.settings.push.name} onChange={props.onChange('push', 'name')}>
+					<Select type="select" label={<Trans>Input stream</Trans>} value={settings.push.name} onChange={onChange('push', 'name')}>
 						{options}
 					</Select>
-					<Button size="small" startIcon={<RefreshIcon />} onClick={props.onRefresh} sx={{ float: 'right' }}>
+					<Button size="small" startIcon={<RefreshIcon />} onClick={onRefresh} sx={{ float: 'right' }}>
 						<Trans>Refresh</Trans>
 					</Button>
 				</Grid>
-				{props.settings.push.name === config.channelid && (
+				{settings.push.name === config.channelid && (
 					<React.Fragment>
 						<Grid item xs={12}>
 							<Typography>
@@ -979,9 +991,9 @@ function PushRTMP(props) {
 						</Grid>
 					</React.Fragment>
 				)}
-				<AdvancedSettings {...props} />
+				<AdvancedSettings settings={settings} onChange={onChange} />
 				<Grid item xs={12}>
-					<FormInlineButton onClick={props.onProbe} disabled={props.settings.push.name === 'none'}>
+					<FormInlineButton onClick={onProbe} disabled={settings.push.name === 'none'}>
 						<Trans>Probe</Trans>
 					</FormInlineButton>
 				</Grid>
@@ -992,21 +1004,17 @@ function PushRTMP(props) {
 	return form;
 }
 
-PushRTMP.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	config: {},
-	skills: null,
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-};
-
-function PushSRT(props) {
+function PushSRT({
+	knownDevices = [],
+	settings = {},
+	config = {},
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+}) {
 	const { i18n } = useLingui();
 	const classes = useStyles();
 	const navigate = useNavigate();
-	const config = props.config;
 
 	let form = null;
 
@@ -1028,7 +1036,7 @@ function PushSRT(props) {
 	} else {
 		const SRT = getSRT(config);
 
-		const filteredDevices = props.knownDevices.filter((device) => device.media === 'srt');
+		const filteredDevices = knownDevices.filter((device) => device.media === 'srt');
 		const options = filteredDevices.map((device) => {
 			return (
 				<MenuItem key={device.id} value={device.id}>
@@ -1052,14 +1060,14 @@ function PushSRT(props) {
 		form = (
 			<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
 				<Grid item xs={12}>
-					<Select type="select" label={<Trans>Input stream</Trans>} value={props.settings.push.name} onChange={props.onChange('push', 'name')}>
+					<Select type="select" label={<Trans>Input stream</Trans>} value={settings.push.name} onChange={onChange('push', 'name')}>
 						{options}
 					</Select>
-					<Button size="small" startIcon={<RefreshIcon />} onClick={props.onRefresh} sx={{ float: 'right' }}>
+					<Button size="small" startIcon={<RefreshIcon />} onClick={onRefresh} sx={{ float: 'right' }}>
 						<Trans>Refresh</Trans>
 					</Button>
 				</Grid>
-				{props.settings.push.name === config.channelid && (
+				{settings.push.name === config.channelid && (
 					<React.Fragment>
 						<Grid item xs={12}>
 							<Typography>
@@ -1073,9 +1081,9 @@ function PushSRT(props) {
 						</Grid>
 					</React.Fragment>
 				)}
-				<AdvancedSettings {...props} />
+				<AdvancedSettings settings={settings} onChange={onChange} />
 				<Grid item xs={12}>
-					<FormInlineButton onClick={props.onProbe} disabled={props.settings.push.name === 'none'}>
+					<FormInlineButton onClick={onProbe} disabled={settings.push.name === 'none'}>
 						<Trans>Probe</Trans>
 					</FormInlineButton>
 				</Grid>
@@ -1086,22 +1094,23 @@ function PushSRT(props) {
 	return form;
 }
 
-PushSRT.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	config: {},
-	skills: null,
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-};
-
-function Source(props) {
+function Source({
+	knownDevices = [],
+	settings = {},
+	config = {},
+	skills = null,
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+	onStore = function (name, data) {
+		return '';
+	},
+}) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
-	const config = initConfig(props.config);
-	const settings = initSettings(props.settings, config);
-	const skills = initSkills(props.skills);
+	config = initConfig(config);
+	settings = initSettings(settings, config);
+	skills = initSkills(skills);
 
 	const handleChange = (section, what) => (event) => {
 		const value = event.target.value;
@@ -1133,17 +1142,17 @@ function Source(props) {
 			settings[what] = value;
 		}
 
-		props.onChange({
+		onChange({
 			...settings,
 		});
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings, config, skills));
+		onProbe(settings, createInputs(settings, config, skills));
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	return (
@@ -1163,7 +1172,7 @@ function Source(props) {
 					settings={settings}
 					config={config}
 					skills={skills}
-					knownDevices={props.knownDevices}
+					knownDevices={knownDevices}
 					onChange={handleChange}
 					onProbe={handleProbe}
 					onRefresh={handleRefresh}
@@ -1173,15 +1182,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	config: {},
-	skills: null,
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/NoAudio.js b/src/views/Edit/Sources/NoAudio.js
index b6f7668..51f7ec1 100644
--- a/src/views/Edit/Sources/NoAudio.js
+++ b/src/views/Edit/Sources/NoAudio.js
@@ -26,17 +26,10 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({ knownDevices = [], settings = {}, onChange = function (settings) {}, onProbe = function (settings, inputs) {} }) {
 	return null;
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-};
-
 function SourceIcon(props) {
 	return <Icon {...props} />;
 }
diff --git a/src/views/Edit/Sources/Raspicam.js b/src/views/Edit/Sources/Raspicam.js
index 471704f..a35fc04 100644
--- a/src/views/Edit/Sources/Raspicam.js
+++ b/src/views/Edit/Sources/Raspicam.js
@@ -54,10 +54,10 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({ knownDevices = [], settings = {}, onChange = function (settings) {}, onProbe = function (settings, inputs) {}, onRefresh = function () {} }) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (what) => (event) => {
 		let data = {};
@@ -66,21 +66,21 @@ function Source(props) {
 			data[what] = event.target.value;
 		}
 
-		props.onChange({
+		onChange({
 			...settings,
 			...data,
 		});
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
-	const filteredDevices = props.knownDevices.filter((device) => device.media === 'video');
+	const filteredDevices = knownDevices.filter((device) => device.media === 'video');
 	const options = filteredDevices.map((device) => {
 		return {
 			value: device.id,
@@ -129,13 +129,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-};
-
 function SourceIcon(props) {
 	return <FontAwesomeIcon icon={faRaspberryPi} style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/V4L.js b/src/views/Edit/Sources/V4L.js
index 003c166..8f9b044 100644
--- a/src/views/Edit/Sources/V4L.js
+++ b/src/views/Edit/Sources/V4L.js
@@ -54,10 +54,10 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({ knownDevices = [], settings = {}, onChange = function (settings) {}, onProbe = function (settings, inputs) {}, onRefresh = function () {} }) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (what) => (event) => {
 		let data = {};
@@ -66,21 +66,21 @@ function Source(props) {
 			data[what] = event.target.value;
 		}
 
-		props.onChange({
+		onChange({
 			...settings,
 			...data,
 		});
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
-	const filteredDevices = props.knownDevices.filter((device) => device.media === 'video');
+	const filteredDevices = knownDevices.filter((device) => device.media === 'video');
 	const options = filteredDevices.map((device) => {
 		return {
 			value: device.id,
@@ -138,14 +138,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-};
-
 function SourceIcon(props) {
 	return <FontAwesomeIcon icon={faUsb} style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/VideoAudio.js b/src/views/Edit/Sources/VideoAudio.js
index 47b3ec0..084d57d 100644
--- a/src/views/Edit/Sources/VideoAudio.js
+++ b/src/views/Edit/Sources/VideoAudio.js
@@ -26,17 +26,10 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({ knownDevices = [], settings = {}, onChange = function (settings) {}, onProbe = function (settings, inputs) {} }) {
 	return null;
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-};
-
 function SourceIcon(props) {
 	return <Icon {...props} />;
 }
diff --git a/src/views/Edit/Sources/VideoLoop.js b/src/views/Edit/Sources/VideoLoop.js
index 9350f33..bbdbdd6 100644
--- a/src/views/Edit/Sources/VideoLoop.js
+++ b/src/views/Edit/Sources/VideoLoop.js
@@ -58,9 +58,19 @@ const createInputs = (settings) => {
 	return [input];
 };
 
-function Source(props) {
+function Source({
+	knownDevices = [],
+	settings = {},
+	onChange = function (settings) {},
+	onProbe = function (settings, inputs) {},
+	onRefresh = function () {},
+	onStore = function (name, data) {
+		return '';
+	},
+}) {
 	const classes = useStyles();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
+
 	const [$saving, setSaving] = React.useState(false);
 	const [$error, setError] = React.useState({
 		open: false,
@@ -69,9 +79,9 @@ function Source(props) {
 	});
 
 	const handleFileUpload = async (data, extension, mimetype) => {
-		const path = await props.onStore('videoloop.source', data);
+		const path = await onStore('videoloop.source', data);
 
-		props.onChange({
+		onChange({
 			...settings,
 			address: path,
 			mimetype: mimetype,
@@ -135,7 +145,7 @@ function Source(props) {
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
 	return (
@@ -183,17 +193,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-	onRefresh: function () {},
-	onStore: function (name, data) {
-		return '';
-	},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/VirtualAudio.js b/src/views/Edit/Sources/VirtualAudio.js
index de0b0d5..7fd0b91 100644
--- a/src/views/Edit/Sources/VirtualAudio.js
+++ b/src/views/Edit/Sources/VirtualAudio.js
@@ -60,21 +60,21 @@ const createInputs = (settings) => {
 	return inputs;
 };
 
-function Source(props) {
+function Source({ settings = {}, onChange = function (settings) {}, onProbe = function (settings, inputs) {} }) {
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
 
-		props.onChange({
+		onChange({
 			...settings,
 			[what]: value,
 		});
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
 	return (
@@ -173,12 +173,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Sources/VirtualVideo.js b/src/views/Edit/Sources/VirtualVideo.js
index aeb8dfa..b5a9baa 100644
--- a/src/views/Edit/Sources/VirtualVideo.js
+++ b/src/views/Edit/Sources/VirtualVideo.js
@@ -84,21 +84,21 @@ const createInputs = (settings) => {
 	return inputs;
 };
 
-function Source(props) {
+function Source({ settings = {}, onChange = function (settings) {}, onProbe = function (settings, inputs) {} }) {
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
 
-		props.onChange({
+		onChange({
 			...settings,
 			[what]: value,
 		});
 	};
 
 	const handleProbe = () => {
-		props.onProbe(settings, createInputs(settings));
+		onProbe(settings, createInputs(settings));
 	};
 
 	return (
@@ -192,12 +192,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	settings: {},
-	onChange: function (settings) {},
-	onProbe: function (settings, inputs) {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/StreamSelect.js b/src/views/Edit/StreamSelect.js
index aa5dd85..aa0530c 100644
--- a/src/views/Edit/StreamSelect.js
+++ b/src/views/Edit/StreamSelect.js
@@ -7,20 +7,19 @@ import MenuItem from '@mui/material/MenuItem';
 
 import Select from '../../misc/Select';
 
-export default function StreamSelect(props) {
+export default function StreamSelect({ type = '', streams = [], selected = -1, allowCustom = false, allowNone = false, onChange = function (stream) {} }) {
 	const { i18n } = useLingui();
-	let selected = props.selected;
 
 	const handleChange = (event) => {
 		const stream = parseInt(event.target.value);
 
-		props.onChange(stream);
+		onChange(stream);
 	};
 
 	let streamList = [];
 
-	for (let s of props.streams) {
-		if (s.type !== props.type) {
+	for (let s of streams) {
+		if (s.type !== type) {
 			continue;
 		}
 
@@ -28,45 +27,45 @@ export default function StreamSelect(props) {
 			streamList.push(
 				<MenuItem value={s.stream} key={s.stream}>
 					{i18n._(t`Stream`)} {s.stream}: {s.codec.toUpperCase()} {s.width}x{s.height} {s.pix_fmt}
-				</MenuItem>
+				</MenuItem>,
 			);
 		} else if (s.type === 'audio') {
 			streamList.push(
 				<MenuItem value={s.stream} key={s.stream}>
 					{i18n._(t`Stream`)} {s.stream}: {s.codec.toUpperCase()} {s.layout} {s.sampling_hz}Hz
-				</MenuItem>
+				</MenuItem>,
 			);
 		}
 	}
 
-	if (props.type === 'video') {
+	if (type === 'video') {
 		if (streamList.length === 0) {
 			selected = -1;
 			streamList.push(
 				<MenuItem value="-1" key="unavailable" disabled>
 					{i18n._(t`No video stream available`)}
-				</MenuItem>
+				</MenuItem>,
 			);
 		} else {
 			streamList.unshift(
 				<MenuItem value="-1" key="none" disabled>
 					{i18n._(t`Choose a video stream`)}
-				</MenuItem>
+				</MenuItem>,
 			);
 		}
-	} else if (props.type === 'audio') {
+	} else if (type === 'audio') {
 		if (streamList.length === 0 && selected >= 0) {
 			selected = -1;
 			streamList.push(
 				<MenuItem value="-1" key="unavailable" disabled>
 					{i18n._(t`No audio stream available`)}
-				</MenuItem>
+				</MenuItem>,
 			);
 		} else {
 			streamList.unshift(
 				<MenuItem value="-1" key="none" disabled>
 					{i18n._(t`Choose an audio stream`)}
-				</MenuItem>
+				</MenuItem>,
 			);
 		}
 	}
@@ -85,12 +84,3 @@ export default function StreamSelect(props) {
 		</Grid>
 	);
 }
-
-StreamSelect.defaultProps = {
-	type: '',
-	streams: [],
-	selected: -1,
-	allowCustom: false,
-	allowNone: false,
-	onChange: function (stream) {},
-};
diff --git a/src/views/Edit/Summary.js b/src/views/Edit/Summary.js
index 4361f68..e55f759 100644
--- a/src/views/Edit/Summary.js
+++ b/src/views/Edit/Summary.js
@@ -10,10 +10,8 @@ import * as Filters from '../../misc/filters';
 import BoxText from '../../misc/BoxText';
 import Sources from './Sources';
 
-export default function Summary(props) {
+export default function Summary({ type = '', sources = [], profile = null }) {
 	const { i18n } = useLingui();
-	const sources = props.sources;
-	const profile = props.profile;
 
 	let source = null;
 	let stream = null;
@@ -44,9 +42,9 @@ export default function Summary(props) {
 
 		let coder = null;
 
-		if (props.type === 'video') {
+		if (type === 'video') {
 			coder = Coders.Video.Get(profile.encoder.coder);
-		} else if (props.type === 'audio') {
+		} else if (type === 'audio') {
 			coder = Coders.Audio.Get(profile.encoder.coder);
 		}
 
@@ -58,9 +56,9 @@ export default function Summary(props) {
 			if (profile.filter.graph.length !== 0) {
 				let filters = null;
 
-				if (props.type === 'video') {
+				if (type === 'video') {
 					filters = Filters.Video;
-				} else if (props.type === 'audio') {
+				} else if (type === 'audio') {
 					filters = Filters.Audio;
 				}
 
@@ -114,9 +112,3 @@ export default function Summary(props) {
 		</BoxText>
 	);
 }
-
-Summary.defaultProps = {
-	type: '',
-	sources: [],
-	profile: null,
-};
diff --git a/src/views/Edit/Wizard/Abort.js b/src/views/Edit/Wizard/Abort.js
index 955a593..d72b584 100644
--- a/src/views/Edit/Wizard/Abort.js
+++ b/src/views/Edit/Wizard/Abort.js
@@ -8,12 +8,12 @@ import Button from '@mui/material/Button';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function Abort(props) {
+export default function Abort({ onHelp = () => {}, onBack = () => {}, onNext = () => {}, nchannels = 0 }) {
 	return (
 		<Paper xs={12} sm={8} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={3} variant="h1" title={<Trans>Abort</Trans>} onHelp={props.onHelp} />
+			<PaperHeader spacing={3} variant="h1" title={<Trans>Abort</Trans>} onHelp={onHelp} />
 			<Grid container spacing={3}>
-				{props.nchannels <= 1 ? (
+				{nchannels <= 1 ? (
 					<React.Fragment>
 						<Grid item xs={12}>
 							<Typography>
@@ -21,7 +21,7 @@ export default function Abort(props) {
 							</Typography>
 						</Grid>
 						<Grid item xs={12}>
-							<Button variant="outlined" color="primary" fullWidth onClick={props.onBack}>
+							<Button variant="outlined" color="primary" fullWidth onClick={onBack}>
 								<Trans>Back</Trans>
 							</Button>
 						</Grid>
@@ -34,12 +34,12 @@ export default function Abort(props) {
 							</Typography>
 						</Grid>
 						<Grid item xs={6}>
-							<Button variant="outlined" color="default" fullWidth onClick={props.onNext}>
+							<Button variant="outlined" color="default" fullWidth onClick={onNext}>
 								<Trans>Yes</Trans>
 							</Button>
 						</Grid>
 						<Grid item xs={6}>
-							<Button variant="outlined" color="primary" fullWidth onClick={props.onBack}>
+							<Button variant="outlined" color="primary" fullWidth onClick={onBack}>
 								<Trans>No</Trans>
 							</Button>
 						</Grid>
@@ -49,10 +49,3 @@ export default function Abort(props) {
 		</Paper>
 	);
 }
-
-Abort.defaultProps = {
-	onHelp: () => {},
-	onBack: () => {},
-	onNext: () => {},
-	nchannels: 0,
-};
diff --git a/src/views/Edit/Wizard/Audio.js b/src/views/Edit/Wizard/Audio.js
index b61c2fd..741dc47 100644
--- a/src/views/Edit/Wizard/Audio.js
+++ b/src/views/Edit/Wizard/Audio.js
@@ -17,18 +17,32 @@ import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 import Select from '../../../misc/Select';
 
-export default function Audio(props) {
+export default function Audio({
+	onAbort = () => {},
+	onHelp = () => {},
+	onBack = () => {},
+	onNext = () => {},
+	onSource = () => {},
+	source = '',
+	onAudioStreamChange = () => {},
+	onAudioDeviceChange = () => {},
+	streamList = [],
+	deviceList = [],
+	status = '',
+	stream = 0,
+	address = {},
+}) {
 	const { i18n } = useLingui();
 
 	return (
 		<Paper xs={12} sm={9} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" title={<Trans>Audio setup</Trans>} onAbort={props.onAbort} onHelp={props.onHelp} />
+			<PaperHeader spacing={2} variant="h1" title={<Trans>Audio setup</Trans>} onAbort={onAbort} onHelp={onHelp} />
 			<Grid container spacing={2}>
 				<Grid item xs={12}>
 					<Divider />
 				</Grid>
 				<Grid item xs={12}>
-					{props.status === 'error' && (
+					{status === 'error' && (
 						<BoxText color="dark">
 							<WarningIcon fontSize="large" color="error" />
 							<Typography textAlign="center">
@@ -36,7 +50,7 @@ export default function Audio(props) {
 							</Typography>
 						</BoxText>
 					)}
-					{props.status === 'nostream' && (
+					{status === 'nostream' && (
 						<BoxText color="dark">
 							<WarningIcon fontSize="large" color="error" />
 							<Typography textAlign="center">
@@ -44,7 +58,7 @@ export default function Audio(props) {
 							</Typography>
 						</BoxText>
 					)}
-					{props.status === 'nocoder' && (
+					{status === 'nocoder' && (
 						<BoxText color="dark">
 							<WarningIcon fontSize="large" color="error" />
 							<Typography textAlign="center">
@@ -54,9 +68,9 @@ export default function Audio(props) {
 					)}
 				</Grid>
 				<Grid item xs={12}>
-					<RadioGroup row value={props.source} onChange={props.onSource}>
+					<RadioGroup row value={source} onChange={onSource}>
 						<Grid container spacing={2}>
-							{props.streamList.length === 0 && (
+							{streamList.length === 0 && (
 								<Grid item xs={12}>
 									<Typography>
 										<Trans>
@@ -66,26 +80,26 @@ export default function Audio(props) {
 									</Typography>
 								</Grid>
 							)}
-							{props.streamList.length !== 0 && (
+							{streamList.length !== 0 && (
 								<React.Fragment>
 									<Grid item xs={12}>
 										<FormControlLabel value="video" control={<Radio />} label={i18n._(t`Audio from device`)} />
 									</Grid>
 									<Grid item xs={12}>
-										<Select label={<Trans>Stream</Trans>} value={props.stream} onChange={props.onAudioStreamChange}>
-											{props.streamList}
+										<Select label={<Trans>Stream</Trans>} value={stream} onChange={onAudioStreamChange}>
+											{streamList}
 										</Select>
 									</Grid>
 								</React.Fragment>
 							)}
-							{props.deviceList.length !== 0 && (
+							{deviceList.length !== 0 && (
 								<React.Fragment>
 									<Grid item xs={12}>
 										<FormControlLabel value="alsa" control={<Radio />} label={i18n._(t`Audio from device`)} />
 									</Grid>
 									<Grid item xs={12}>
-										<Select label={<Trans>Device</Trans>} value={props.address} onChange={props.onAudioDeviceChange}>
-											{props.deviceList}
+										<Select label={<Trans>Device</Trans>} value={address} onChange={onAudioDeviceChange}>
+											{deviceList}
 										</Select>
 									</Grid>
 								</React.Fragment>
@@ -105,12 +119,12 @@ export default function Audio(props) {
 					<Divider />
 				</Grid>
 				<Grid item xs={3}>
-					<Button variant="outlined" color="default" fullWidth onClick={props.onBack}>
+					<Button variant="outlined" color="default" fullWidth onClick={onBack}>
 						<Trans>Back</Trans>
 					</Button>
 				</Grid>
 				<Grid item xs={9}>
-					<Button variant="outlined" fullWidth color="primary" onClick={props.onNext}>
+					<Button variant="outlined" fullWidth color="primary" onClick={onNext}>
 						<Trans>Next</Trans>
 					</Button>
 				</Grid>
@@ -118,19 +132,3 @@ export default function Audio(props) {
 		</Paper>
 	);
 }
-
-Audio.defaultProps = {
-	onAbort: () => {},
-	onHelp: () => {},
-	onBack: () => {},
-	onNext: () => {},
-	onSource: () => {},
-	source: '',
-	onAudioStreamChange: () => {},
-	onAudioDeviceChange: () => {},
-	streamList: [],
-	deviceList: [],
-	status: '',
-	stream: 0,
-	address: {},
-};
diff --git a/src/views/Edit/Wizard/Error.js b/src/views/Edit/Wizard/Error.js
index e5ac148..f4d3657 100644
--- a/src/views/Edit/Wizard/Error.js
+++ b/src/views/Edit/Wizard/Error.js
@@ -10,10 +10,10 @@ import BoxText from '../../../misc/BoxText';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function Error(props) {
+export default function Error({ onAbort = () => {}, onHelp = () => {}, onNext = () => {} }) {
 	return (
 		<Paper xs={12} sm={8} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={3} variant="h1" title={<Trans>Error</Trans>} onAbort={props.onAbort} onHelp={props.onHelp} />
+			<PaperHeader spacing={3} variant="h1" title={<Trans>Error</Trans>} onAbort={onAbort} onHelp={onHelp} />
 			<Grid container spacing={3}>
 				<BoxText color="dark">
 					<WarningIcon fontSize="large" color="error" />
@@ -22,7 +22,7 @@ export default function Error(props) {
 					</Typography>
 				</BoxText>
 				<Grid item xs={12}>
-					<Button variant="outlined" fullWidth color="primary" onClick={props.onNext}>
+					<Button variant="outlined" fullWidth color="primary" onClick={onNext}>
 						<Trans>Retry</Trans>
 					</Button>
 				</Grid>
@@ -30,9 +30,3 @@ export default function Error(props) {
 		</Paper>
 	);
 }
-
-Error.defaultProps = {
-	onAbort: () => {},
-	onHelp: () => {},
-	onNext: () => {},
-};
diff --git a/src/views/Edit/Wizard/License.js b/src/views/Edit/Wizard/License.js
index d361f56..c15a285 100644
--- a/src/views/Edit/Wizard/License.js
+++ b/src/views/Edit/Wizard/License.js
@@ -11,10 +11,10 @@ import LicenseControl from '../../../misc/controls/License';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function License(props) {
+export default function License({ onAbort = () => {}, onHelp = () => {}, onBack = () => {}, onNext = () => {}, onChange = (license) => {}, license = '' }) {
 	return (
 		<Paper xs={12} sm={9} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" title={<Trans>License</Trans>} onAbort={props.onAbort} onHelp={props.onHelp} />
+			<PaperHeader spacing={2} variant="h1" title={<Trans>License</Trans>} onAbort={onAbort} onHelp={onHelp} />
 			<Grid container spacing={2}>
 				<Grid item xs={12}>
 					<Divider />
@@ -28,18 +28,18 @@ export default function License(props) {
 					</Typography>
 				</Grid>
 				<Grid item xs={12}>
-					<LicenseControl license={props.license} onChange={props.onChange} />
+					<LicenseControl license={license} onChange={onChange} />
 				</Grid>
 				<Grid item xs={12}>
 					<Divider />
 				</Grid>
 				<Grid item xs={3}>
-					<Button variant="outlined" color="default" fullWidth onClick={props.onBack}>
+					<Button variant="outlined" color="default" fullWidth onClick={onBack}>
 						<Trans>Back</Trans>
 					</Button>
 				</Grid>
 				<Grid item xs={9}>
-					<Button variant="outlined" color="primary" fullWidth onClick={props.onNext}>
+					<Button variant="outlined" color="primary" fullWidth onClick={onNext}>
 						<Trans>Save</Trans>
 					</Button>
 				</Grid>
@@ -47,12 +47,3 @@ export default function License(props) {
 		</Paper>
 	);
 }
-
-License.defaultProps = {
-	onAbort: () => {},
-	onHelp: () => {},
-	onBack: () => {},
-	onNext: () => {},
-	onChange: (license) => {},
-	license: '',
-};
diff --git a/src/views/Edit/Wizard/Metadata.js b/src/views/Edit/Wizard/Metadata.js
index eac9d34..0ce2965 100644
--- a/src/views/Edit/Wizard/Metadata.js
+++ b/src/views/Edit/Wizard/Metadata.js
@@ -11,10 +11,10 @@ import MetadataControl from '../../../misc/controls/Metadata';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function Metadata(props) {
+export default function Metadata({ onAbort = () => {}, onHelp = () => {}, onBack = () => {}, onNext = () => {}, onChange = (metadata) => {}, metadata = {} }) {
 	return (
 		<Paper xs={12} sm={9} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" title={<Trans>Metadata</Trans>} onAbort={props.onAbort} onHelp={props.onHelp} />
+			<PaperHeader spacing={2} variant="h1" title={<Trans>Metadata</Trans>} onAbort={onAbort} onHelp={onHelp} />
 			<Grid container spacing={2}>
 				<Grid item xs={12}>
 					<Divider />
@@ -25,18 +25,18 @@ export default function Metadata(props) {
 					</Typography>
 				</Grid>
 				<Grid item xs={12}>
-					<MetadataControl settings={props.metadata} onChange={props.onChange} />
+					<MetadataControl settings={metadata} onChange={onChange} />
 				</Grid>
 				<Grid item xs={12}>
 					<Divider />
 				</Grid>
 				<Grid item xs={3}>
-					<Button variant="outlined" color="default" fullWidth onClick={props.onBack}>
+					<Button variant="outlined" color="default" fullWidth onClick={onBack}>
 						<Trans>Back</Trans>
 					</Button>
 				</Grid>
 				<Grid item xs={9}>
-					<Button variant="outlined" fullWidth color="primary" onClick={props.onNext}>
+					<Button variant="outlined" fullWidth color="primary" onClick={onNext}>
 						<Trans>Next</Trans>
 					</Button>
 				</Grid>
@@ -44,12 +44,3 @@ export default function Metadata(props) {
 		</Paper>
 	);
 }
-
-Metadata.defaultProps = {
-	onAbort: () => {},
-	onHelp: () => {},
-	onBack: () => {},
-	onNext: () => {},
-	onChange: (metadata) => {},
-	metadata: {},
-};
diff --git a/src/views/Edit/Wizard/Probe.js b/src/views/Edit/Wizard/Probe.js
index 15a6bc0..a96c1d2 100644
--- a/src/views/Edit/Wizard/Probe.js
+++ b/src/views/Edit/Wizard/Probe.js
@@ -8,10 +8,10 @@ import Typography from '@mui/material/Typography';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function Probe(props) {
+export default function Probe({ onAbort = () => {} }) {
 	return (
 		<Paper xs={12} md={5} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" onAbort={props.onAbort} />
+			<PaperHeader spacing={2} variant="h1" onAbort={onAbort} />
 			<Grid container justifyContent="center" spacing={2} align="center">
 				<Grid item xs={12}>
 					<CircularProgress color="inherit" />
@@ -25,7 +25,3 @@ export default function Probe(props) {
 		</Paper>
 	);
 }
-
-Probe.defaultProps = {
-	onAbort: () => {},
-};
diff --git a/src/views/Edit/Wizard/Saving.js b/src/views/Edit/Wizard/Saving.js
index ea9e940..5f3b93a 100644
--- a/src/views/Edit/Wizard/Saving.js
+++ b/src/views/Edit/Wizard/Saving.js
@@ -8,10 +8,10 @@ import Typography from '@mui/material/Typography';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function Saving(props) {
+export default function Saving({ onAbort = () => {} }) {
 	return (
 		<Paper xs={12} md={5} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" onAbort={props.onAbort} />
+			<PaperHeader spacing={2} variant="h1" onAbort={onAbort} />
 			<Grid container justifyContent="center" spacing={2} align="center">
 				<Grid item xs={12}>
 					<CircularProgress color="inherit" />
@@ -25,7 +25,3 @@ export default function Saving(props) {
 		</Paper>
 	);
 }
-
-Saving.defaultProps = {
-	onAbort: () => {},
-};
diff --git a/src/views/Edit/Wizard/Source.js b/src/views/Edit/Wizard/Source.js
index 9f3e452..2f7c9dd 100644
--- a/src/views/Edit/Wizard/Source.js
+++ b/src/views/Edit/Wizard/Source.js
@@ -9,10 +9,10 @@ import Typography from '@mui/material/Typography';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function Source(props) {
+export default function Source({ onAbort = () => {}, onHelp = () => {}, onAdvanced = () => {}, sources = [] }) {
 	return (
 		<Paper xs={12} sm={9} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" title={<Trans>Video setup</Trans>} onAbort={props.Abort} onHelp={props.onHelp} />
+			<PaperHeader spacing={2} variant="h1" title={<Trans>Video setup</Trans>} onAbort={onAbort} onHelp={onHelp} />
 			<Grid container spacing={2}>
 				<Grid item xs={12}>
 					<Typography>
@@ -27,14 +27,14 @@ export default function Source(props) {
 				</Grid>
 				<Grid item xs={12}>
 					<Grid container spacing={2}>
-						{props.sources}
+						{sources}
 					</Grid>
 				</Grid>
 				<Grid item xs={12}>
 					<Divider />
 				</Grid>
 				<Grid item xs={12}>
-					<Button variant="outlined" fullWidth color="default" onClick={props.onAdvanced}>
+					<Button variant="outlined" fullWidth color="default" onClick={onAdvanced}>
 						<Trans>Advanced setup</Trans>
 					</Button>
 				</Grid>
@@ -42,10 +42,3 @@ export default function Source(props) {
 		</Paper>
 	);
 }
-
-Source.defaultProps = {
-	onAbort: () => {},
-	onHelp: () => {},
-	onAdvanced: () => {},
-	sources: [],
-};
diff --git a/src/views/Edit/Wizard/Sources/AVFoundation.js b/src/views/Edit/Wizard/Sources/AVFoundation.js
index 615658c..252657f 100644
--- a/src/views/Edit/Wizard/Sources/AVFoundation.js
+++ b/src/views/Edit/Wizard/Sources/AVFoundation.js
@@ -23,20 +23,27 @@ function initSettings(initialSettings) {
 	return settings;
 }
 
-function Source(props) {
+function Source({
+	settings = {},
+	knownDevices = [],
+	config = null,
+	skills = null,
+	onChange = function (type, settings, inputs, ready) {},
+	onRefresh = function () {},
+}) {
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings);
+	settings = initSettings(settings);
 
 	const handleChange = (newSettings) => {
 		newSettings = newSettings || settings;
 
-		const filteredDevices = props.knownDevices.filter((device) => device.media === 'video');
+		const filteredDevices = knownDevices.filter((device) => device.media === 'video');
 
-		props.onChange(S.id, newSettings, S.func.createInputs(newSettings), filteredDevices.length !== 0 ? true : false);
+		onChange(S.id, newSettings, S.func.createInputs(newSettings), filteredDevices.length !== 0 ? true : false);
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const update = (what) => (event) => {
@@ -55,7 +62,7 @@ function Source(props) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	let filteredDevices = props.knownDevices.filter((device) => device.media === 'video');
+	let filteredDevices = knownDevices.filter((device) => device.media === 'video');
 	let options = filteredDevices.map((device) => {
 		return (
 			<MenuItem key={device.id} value={device.id}>
@@ -68,13 +75,13 @@ function Source(props) {
 		options.push(
 			<MenuItem key="none" value="none" disabled={true}>
 				{i18n._(t`No input device available`)}
-			</MenuItem>
+			</MenuItem>,
 		);
 	} else {
 		options.unshift(
 			<MenuItem key="default" value="default">
 				{i18n._(t`Default`)}
-			</MenuItem>
+			</MenuItem>,
 		);
 	}
 
@@ -84,7 +91,7 @@ function Source(props) {
 		</Select>
 	);
 
-	filteredDevices = props.knownDevices.filter((device) => device.media === 'audio');
+	filteredDevices = knownDevices.filter((device) => device.media === 'audio');
 	options = filteredDevices.map((device) => {
 		return (
 			<MenuItem key={device.id} value={device.id}>
@@ -96,14 +103,14 @@ function Source(props) {
 	options.unshift(
 		<MenuItem key="none" value="none">
 			{i18n._(t`None`)}
-		</MenuItem>
+		</MenuItem>,
 	);
 
 	if (options.length > 1) {
 		options.unshift(
 			<MenuItem key="default" value="default">
 				{i18n._(t`Default`)}
-			</MenuItem>
+			</MenuItem>,
 		);
 	}
 
@@ -141,13 +148,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (type, settings, inputs, ready) {},
-	onRefresh: function () {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Wizard/Sources/InternalHLS.js b/src/views/Edit/Wizard/Sources/InternalHLS.js
index 929153f..ce53bca 100644
--- a/src/views/Edit/Wizard/Sources/InternalHLS.js
+++ b/src/views/Edit/Wizard/Sources/InternalHLS.js
@@ -20,10 +20,17 @@ const initSettings = (initialSettings, config) => {
 	return settings;
 };
 
-function Source(props) {
-	const config = S.func.initConfig(props.config);
-	const settings = initSettings(props.settings, config);
-	const skills = S.func.initSkills(props.skills);
+function Source({
+	settings = {},
+	knownDevices = [],
+	config = null,
+	skills = null,
+	onChange = function (type, settings, inputs, ready) {},
+	onRefresh = function () {},
+}) {
+	config = S.func.initConfig(config);
+	settings = initSettings(settings, config);
+	skills = S.func.initSkills(skills);
 
 	const handleChange = (newSettings) => {
 		newSettings = newSettings || settings;
@@ -31,7 +38,7 @@ function Source(props) {
 		const inputs = S.func.createInputs(newSettings, config, skills);
 		newSettings.address = inputs[0].address;
 
-		props.onChange(S.id, newSettings, inputs, newSettings.address.length !== 0);
+		onChange(S.id, newSettings, inputs, newSettings.address.length !== 0);
 	};
 
 	React.useEffect(() => {
@@ -57,13 +64,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	settings: {},
-	config: null,
-	skills: null,
-	onChange: function (type, settings, inputs, ready) {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Wizard/Sources/InternalRTMP.js b/src/views/Edit/Wizard/Sources/InternalRTMP.js
index f777551..22b9af7 100644
--- a/src/views/Edit/Wizard/Sources/InternalRTMP.js
+++ b/src/views/Edit/Wizard/Sources/InternalRTMP.js
@@ -26,12 +26,19 @@ const initSettings = (initialSettings, config) => {
 	return settings;
 };
 
-function Source(props) {
+function Source({
+	settings = {},
+	knownDevices = [],
+	config = null,
+	skills = null,
+	onChange = function (type, settings, inputs, ready) {},
+	onRefresh = function () {},
+}) {
 	const { i18n } = useLingui();
 	const navigate = useNavigate();
-	const config = S.func.initConfig(props.config);
-	const settings = initSettings(props.settings, config);
-	const skills = S.func.initSkills(props.skills);
+	config = S.func.initConfig(config);
+	settings = initSettings(settings, config);
+	skills = S.func.initSkills(skills);
 
 	const handleChange = (newSettings) => {
 		newSettings = newSettings || settings;
@@ -39,11 +46,11 @@ function Source(props) {
 		const inputs = S.func.createInputs(newSettings, config, skills);
 		newSettings.address = inputs[0].address;
 
-		props.onChange(S.id, newSettings, inputs, config.rtmp.enabled);
+		onChange(S.id, newSettings, inputs, config.rtmp.enabled);
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const update = (what) => (event) => {
@@ -82,7 +89,7 @@ function Source(props) {
 			</React.Fragment>
 		);
 	} else {
-		const filteredDevices = props.knownDevices.filter((device) => device.media === 'rtmp');
+		const filteredDevices = knownDevices.filter((device) => device.media === 'rtmp');
 		const options = filteredDevices.map((device) => {
 			return (
 				<MenuItem key={device.id} value={device.id}>
@@ -136,15 +143,6 @@ function Source(props) {
 	return form;
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	config: null,
-	skills: null,
-	onChange: function (type, settings, inputs, ready) {},
-	onRefresh: function () {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Wizard/Sources/InternalSRT.js b/src/views/Edit/Wizard/Sources/InternalSRT.js
index 0341c6c..f475535 100644
--- a/src/views/Edit/Wizard/Sources/InternalSRT.js
+++ b/src/views/Edit/Wizard/Sources/InternalSRT.js
@@ -26,12 +26,19 @@ const initSettings = (initialSettings, config) => {
 	return settings;
 };
 
-function Source(props) {
+function Source({
+	settings = {},
+	knownDevices = [],
+	config = null,
+	skills = null,
+	onChange = function (type, settings, inputs, ready) {},
+	onRefresh = function () {},
+}) {
 	const { i18n } = useLingui();
 	const navigate = useNavigate();
-	const config = S.func.initConfig(props.config);
-	const settings = initSettings(props.settings, config);
-	const skills = S.func.initSkills(props.skills);
+	config = S.func.initConfig(config);
+	settings = initSettings(settings, config);
+	skills = S.func.initSkills(skills);
 
 	const handleChange = (newSettings) => {
 		newSettings = newSettings || settings;
@@ -39,11 +46,11 @@ function Source(props) {
 		const inputs = S.func.createInputs(newSettings, config, skills);
 		newSettings.address = inputs[0].address;
 
-		props.onChange(S.id, newSettings, inputs, config.srt.enabled);
+		onChange(S.id, newSettings, inputs, config.srt.enabled);
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const update = (what) => (event) => {
@@ -82,7 +89,7 @@ function Source(props) {
 			</React.Fragment>
 		);
 	} else {
-		const filteredDevices = props.knownDevices.filter((device) => device.media === 'srt');
+		const filteredDevices = knownDevices.filter((device) => device.media === 'srt');
 		const options = filteredDevices.map((device) => {
 			return (
 				<MenuItem key={device.id} value={device.id}>
@@ -136,13 +143,6 @@ function Source(props) {
 	return form;
 }
 
-Source.defaultProps = {
-	settings: {},
-	config: null,
-	skills: null,
-	onChange: function (type, settings, inputs, ready) {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Wizard/Sources/Network.js b/src/views/Edit/Wizard/Sources/Network.js
index 88578c0..8279afe 100644
--- a/src/views/Edit/Wizard/Sources/Network.js
+++ b/src/views/Edit/Wizard/Sources/Network.js
@@ -19,15 +19,22 @@ const initSettings = (initialSettings, config) => {
 	return settings;
 };
 
-function Source(props) {
-	const config = S.func.initConfig(props.config);
-	const settings = initSettings(props.settings, config);
-	const skills = S.func.initSkills(props.skills);
+function Source({
+	settings = {},
+	knownDevices = [],
+	config = null,
+	skills = null,
+	onChange = function (type, settings, inputs, ready) {},
+	onRefresh = function () {},
+}) {
+	config = S.func.initConfig(config);
+	settings = initSettings(settings, config);
+	skills = S.func.initSkills(skills);
 
 	const handleChange = (newSettings) => {
 		newSettings = newSettings || settings;
 
-		props.onChange(S.id, newSettings, S.func.createInputs(newSettings, config, skills), S.func.isValidURL(newSettings.address));
+		onChange(S.id, newSettings, S.func.createInputs(newSettings, config, skills), S.func.isValidURL(newSettings.address));
 	};
 
 	const update = (protocol, what) => (event) => {
@@ -107,13 +114,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	settings: {},
-	config: null,
-	skills: null,
-	onChange: function (type, settings, inputs, ready) {},
-};
-
 function SourceIcon(props) {
 	return <Icon style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Wizard/Sources/Raspicam.js b/src/views/Edit/Wizard/Sources/Raspicam.js
index de92d24..1af32ed 100644
--- a/src/views/Edit/Wizard/Sources/Raspicam.js
+++ b/src/views/Edit/Wizard/Sources/Raspicam.js
@@ -48,14 +48,21 @@ function initDevices(initialDevices) {
 	return devices;
 }
 
-function Source(props) {
-	const settings = initSettings(props.settings, props.knownDevices);
-	const devices = initDevices(props.knownDevices);
+function Source({
+	settings = {},
+	knownDevices = [],
+	config = null,
+	skills = null,
+	onChange = function (type, settings, inputs, ready) {},
+	onRefresh = function () {},
+}) {
+	const devices = initDevices(knownDevices);
+	settings = initSettings(settings, knownDevices);
 
 	const handleChange = (newSettings) => {
 		newSettings = newSettings || settings;
 
-		props.onChange(S.id, newSettings, S.func.createInputs(newSettings), true);
+		onChange(S.id, newSettings, S.func.createInputs(newSettings), true);
 	};
 
 	const update = (what) => (event) => {
@@ -102,12 +109,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (type, settings, inputs, ready) {},
-};
-
 function SourceIcon(props) {
 	return <FontAwesomeIcon icon={faRaspberryPi} style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Wizard/Sources/V4L.js b/src/views/Edit/Wizard/Sources/V4L.js
index 7417a08..8d153b8 100644
--- a/src/views/Edit/Wizard/Sources/V4L.js
+++ b/src/views/Edit/Wizard/Sources/V4L.js
@@ -54,19 +54,26 @@ function initDevices(initialDevices) {
 	return devices;
 }
 
-function Source(props) {
+function Source({
+	settings = {},
+	knownDevices = [],
+	config = null,
+	skills = null,
+	onChange = function (type, settings, inputs, ready) {},
+	onRefresh = function () {},
+}) {
 	const { i18n } = useLingui();
-	const settings = initSettings(props.settings, props.knownDevices);
-	const devices = initDevices(props.knownDevices);
+	const devices = initDevices(knownDevices);
+	settings = initSettings(settings, knownDevices);
 
 	const handleChange = (newSettings) => {
 		newSettings = newSettings || settings;
 
-		props.onChange(S.id, newSettings, S.func.createInputs(newSettings), devices.length !== 0 ? true : false);
+		onChange(S.id, newSettings, S.func.createInputs(newSettings), devices.length !== 0 ? true : false);
 	};
 
 	const handleRefresh = () => {
-		props.onRefresh();
+		onRefresh();
 	};
 
 	const update = (what) => (event) => {
@@ -124,13 +131,6 @@ function Source(props) {
 	);
 }
 
-Source.defaultProps = {
-	knownDevices: [],
-	settings: {},
-	onChange: function (type, settings, inputs, ready) {},
-	onRefresh: function () {},
-};
-
 function SourceIcon(props) {
 	return <FontAwesomeIcon icon={faUsb} style={{ color: '#FFF' }} {...props} />;
 }
diff --git a/src/views/Edit/Wizard/Video.js b/src/views/Edit/Wizard/Video.js
index f907dd1..192bbaa 100644
--- a/src/views/Edit/Wizard/Video.js
+++ b/src/views/Edit/Wizard/Video.js
@@ -13,21 +13,30 @@ import BoxText from '../../../misc/BoxText';
 import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 
-export default function Video(props) {
+export default function Video({
+	onAbort = () => {},
+	onHelp = () => {},
+	onBack = () => {},
+	onNext = () => {},
+	sourceid = '',
+	status = '',
+	ready = false,
+	children = null,
+}) {
 	return (
 		<Paper xs={12} sm={9} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" title={<Trans>Video setup</Trans>} onAbort={props.onAbort} onHelp={props.onHelp} />
+			<PaperHeader spacing={2} variant="h1" title={<Trans>Video setup</Trans>} onAbort={onAbort} onHelp={onHelp} />
 			<Grid container spacing={2}>
 				<Grid item xs={12}>
 					<Divider />
 				</Grid>
-				{props.children}
+				{children}
 				<Grid item xs={12}>
-					{props.status === 'error' && (
+					{status === 'error' && (
 						<BoxText color="dark">
 							<WarningIcon fontSize="large" color="error" />
 							<Typography textAlign="center">
-								{props.sourceid === 'rtmp' || props.sourceid === 'hls' ? (
+								{sourceid === 'rtmp' || sourceid === 'hls' ? (
 									<Trans>No live stream was detected. Please check the software that sends the stream.</Trans>
 								) : (
 									<Trans>Failed to verify the source. Please check the address.</Trans>
@@ -35,7 +44,7 @@ export default function Video(props) {
 							</Typography>
 						</BoxText>
 					)}
-					{props.status === 'nostream' && (
+					{status === 'nostream' && (
 						<BoxText color="dark">
 							<WarningIcon fontSize="large" color="error" />
 							<Typography textAlign="center">
@@ -43,7 +52,7 @@ export default function Video(props) {
 							</Typography>
 						</BoxText>
 					)}
-					{props.status === 'nocoder' && (
+					{status === 'nocoder' && (
 						<BoxText color="dark">
 							<WarningIcon fontSize="large" color="error" />
 							<Typography textAlign="center">
@@ -62,12 +71,12 @@ export default function Video(props) {
 					<Divider />
 				</Grid>
 				<Grid item xs={3}>
-					<Button variant="outlined" color="default" fullWidth onClick={props.onBack}>
+					<Button variant="outlined" color="default" fullWidth onClick={onBack}>
 						<Trans>Back</Trans>
 					</Button>
 				</Grid>
 				<Grid item xs={9}>
-					<Button variant="outlined" fullWidth color="primary" disabled={!props.ready} onClick={props.onNext}>
+					<Button variant="outlined" fullWidth color="primary" disabled={!ready} onClick={onNext}>
 						<Trans>Next</Trans>
 					</Button>
 				</Grid>
@@ -75,13 +84,3 @@ export default function Video(props) {
 		</Paper>
 	);
 }
-
-Video.defaultProps = {
-	onAbort: () => {},
-	onHelp: () => {},
-	onBack: () => {},
-	onNext: () => {},
-	sourceid: '',
-	status: '',
-	ready: false,
-};
diff --git a/src/views/Edit/Wizard/VideoProfile.js b/src/views/Edit/Wizard/VideoProfile.js
index 5eef427..a8743e5 100644
--- a/src/views/Edit/Wizard/VideoProfile.js
+++ b/src/views/Edit/Wizard/VideoProfile.js
@@ -10,10 +10,25 @@ import Paper from '../../../misc/Paper';
 import PaperHeader from '../../../misc/PaperHeader';
 import Select from '../../../misc/Select';
 
-export default function VideoProfile(props) {
+export default function VideoProfile({
+	onAbort = () => {},
+	onHelp = () => {},
+	onBack = () => {},
+	onNext = () => {},
+	compatible = false,
+	onStreamChange = () => {},
+	streamList = [],
+	stream = 0,
+	onDecoderChange = () => {},
+	decodersList = [],
+	decoder = '',
+	onEncoderChange = () => {},
+	encodersList = [],
+	encoder = '',
+}) {
 	return (
 		<Paper xs={12} sm={9} md={6} marginBottom="6em" className="PaperM">
-			<PaperHeader spacing={2} variant="h1" title={<Trans>Video setup</Trans>} onAbort={props.onAbort} onHelp={props.onHelp} />
+			<PaperHeader spacing={2} variant="h1" title={<Trans>Video setup</Trans>} onAbort={onAbort} onHelp={onHelp} />
 			<Grid container spacing={2}>
 				<Grid item xs={12}>
 					<Divider />
@@ -24,13 +39,13 @@ export default function VideoProfile(props) {
 					</Typography>
 				</Grid>
 				<Grid item xs={12}>
-					<Select label={<Trans>Profile</Trans>} value={props.stream} onChange={props.onStreamChange}>
-						{props.streamList}
+					<Select label={<Trans>Profile</Trans>} value={stream} onChange={onStreamChange}>
+						{streamList}
 					</Select>
 				</Grid>
-				{props.compatible === false && (
+				{compatible === false && (
 					<React.Fragment>
-						{props.encodersList.length === 0 ? (
+						{encodersList.length === 0 ? (
 							<Grid item xs={12}>
 								<Typography>
 									<Trans>Your stream needs to be encoded, but there's no suitable encoder available.</Trans>
@@ -43,16 +58,16 @@ export default function VideoProfile(props) {
 										<Trans>Your stream needs to be encoded. Choose the desired encoder:</Trans>
 									</Typography>
 								</Grid>
-								{props.decodersList.length >= 2 && (
+								{decodersList.length >= 2 && (
 									<Grid item xs={12}>
-										<Select label={<Trans>Decoder</Trans>} value={props.decoder} onChange={props.onDecoderChange}>
-											{props.decodersList}
+										<Select label={<Trans>Decoder</Trans>} value={decoder} onChange={onDecoderChange}>
+											{decodersList}
 										</Select>
 									</Grid>
 								)}
 								<Grid item xs={12}>
-									<Select label={<Trans>Encoder</Trans>} value={props.encoder} onChange={props.onEncoderChange}>
-										{props.encodersList}
+									<Select label={<Trans>Encoder</Trans>} value={encoder} onChange={onEncoderChange}>
+										{encodersList}
 									</Select>
 								</Grid>
 							</React.Fragment>
@@ -63,18 +78,12 @@ export default function VideoProfile(props) {
 					<Divider />
 				</Grid>
 				<Grid item xs={3}>
-					<Button variant="outlined" color="default" fullWidth onClick={props.onBack}>
+					<Button variant="outlined" color="default" fullWidth onClick={onBack}>
 						<Trans>Back</Trans>
 					</Button>
 				</Grid>
 				<Grid item xs={9}>
-					<Button
-						variant="outlined"
-						fullWidth
-						color="primary"
-						disabled={props.compatible === false && props.encodersList.length === 0}
-						onClick={props.onNext}
-					>
+					<Button variant="outlined" fullWidth color="primary" disabled={compatible === false && encodersList.length === 0} onClick={onNext}>
 						<Trans>Next</Trans>
 					</Button>
 				</Grid>
@@ -82,20 +91,3 @@ export default function VideoProfile(props) {
 		</Paper>
 	);
 }
-
-VideoProfile.defaultProps = {
-	onAbort: () => {},
-	onHelp: () => {},
-	onBack: () => {},
-	onNext: () => {},
-	compatible: false,
-	onStreamChange: () => {},
-	streamList: [],
-	stream: 0,
-	onDecoderChange: () => {},
-	decodersList: [],
-	decoder: '',
-	onEncoderChange: () => {},
-	encodersList: [],
-	encoder: '',
-};
diff --git a/src/views/Edit/Wizard/index.js b/src/views/Edit/Wizard/index.js
index 0aa0113..7369531 100644
--- a/src/views/Edit/Wizard/index.js
+++ b/src/views/Edit/Wizard/index.js
@@ -29,7 +29,7 @@ import Probe from './Probe';
 import License from './License';
 import Metadata from './Metadata';
 
-export default function Wizard(props) {
+export default function Wizard({ restreamer = null }) {
 	const { i18n } = useLingui();
 	const navigate = useNavigate();
 	const { channelid: _channelid } = useParams();
@@ -69,22 +69,22 @@ export default function Wizard(props) {
 	}, [navigate, $invalid]);
 
 	const load = async () => {
-		const channelid = props.restreamer.SelectChannel(_channelid);
+		const channelid = restreamer.SelectChannel(_channelid);
 		if (channelid === '' || channelid !== _channelid) {
 			setInvalid(true);
 			return;
 		}
 
-		const skills = await props.restreamer.Skills();
+		const skills = await restreamer.Skills();
 		setSkills(skills);
 
-		const config = await props.restreamer.ConfigActive();
+		const config = await restreamer.ConfigActive();
 		setConfig(config);
 
 		setData({
 			...$data,
 			meta: {
-				name: props.restreamer.GetChannel(_channelid).name,
+				name: restreamer.GetChannel(_channelid).name,
 			},
 		});
 
@@ -92,9 +92,9 @@ export default function Wizard(props) {
 	};
 
 	const refreshSkills = async () => {
-		await props.restreamer.RefreshSkills();
+		await restreamer.RefreshSkills();
 
-		const skills = await props.restreamer.Skills();
+		const skills = await restreamer.Skills();
 		setSkills(skills);
 	};
 
@@ -105,7 +105,7 @@ export default function Wizard(props) {
 			status: 'none',
 		});
 
-		let [res, err] = await props.restreamer.Probe(_channelid, source.inputs);
+		let [res, err] = await restreamer.Probe(_channelid, source.inputs);
 		if (err !== null) {
 			res = {
 				streams: [],
@@ -179,23 +179,23 @@ export default function Wizard(props) {
 
 		data.streams = M.createOutputStreams(sources, profiles);
 
-		const [, err] = await props.restreamer.UpsertIngest(_channelid, global, inputs, outputs, control);
+		const [, err] = await restreamer.UpsertIngest(_channelid, global, inputs, outputs, control);
 		if (err !== null) {
 			notify.Dispatch('error', 'save:ingest', err.message);
 			return false;
 		}
 
 		// Save the metadata
-		await props.restreamer.SetIngestMetadata(_channelid, data);
+		await restreamer.SetIngestMetadata(_channelid, data);
 
 		// Create update the ingest snapshot process
-		await props.restreamer.UpsertIngestSnapshot(_channelid, control);
+		await restreamer.UpsertIngestSnapshot(_channelid, control);
 
 		// Create/update the player
-		await props.restreamer.UpdatePlayer(_channelid);
+		await restreamer.UpdatePlayer(_channelid);
 
 		// Create/update the playersite
-		await props.restreamer.UpdatePlayersite();
+		await restreamer.UpdatePlayersite();
 
 		notify.Dispatch('success', 'save:ingest', i18n._(t`Main channel saved`));
 
@@ -275,7 +275,7 @@ export default function Wizard(props) {
 							<Typography>{s.name}</Typography>
 						</div>
 					</Button>
-				</Grid>
+				</Grid>,
 			);
 		}
 
@@ -489,7 +489,7 @@ export default function Wizard(props) {
 			decodersList.push(
 				<MenuItem value={c.coder} key={c.coder}>
 					{c.name}
-				</MenuItem>
+				</MenuItem>,
 			);
 		}
 
@@ -501,7 +501,7 @@ export default function Wizard(props) {
 			encodersList.push(
 				<MenuItem value={c.coder} key={c.coder}>
 					{c.name}
-				</MenuItem>
+				</MenuItem>,
 			);
 		}
 
@@ -515,7 +515,7 @@ export default function Wizard(props) {
 			streamList.push(
 				<MenuItem value={s.stream} key={s.stream}>
 					{s.width}x{s.height}, {s.codec.toUpperCase()}
-				</MenuItem>
+				</MenuItem>,
 			);
 		}
 
@@ -667,7 +667,7 @@ export default function Wizard(props) {
 			streamList.push(
 				<MenuItem value={s.stream} key={s.stream}>
 					{s.codec.toUpperCase()} {s.layout} {s.sampling_hz}Hz
-				</MenuItem>
+				</MenuItem>,
 			);
 		}
 
@@ -682,7 +682,7 @@ export default function Wizard(props) {
 				deviceList.push(
 					<MenuItem key={device.id} value={device.id}>
 						{device.name} ({device.id})
-					</MenuItem>
+					</MenuItem>,
 				);
 			}
 		}
@@ -851,18 +851,18 @@ export default function Wizard(props) {
 
 		return <Error onAbort={handleAbort} onHelp={handleHelp('error')} />;
 	} else if ($step === 'ABORT') {
-		const nchannels = props.restreamer.ListChannels().length;
+		const nchannels = restreamer.ListChannels().length;
 
 		handleBack = () => {
 			setStep($abort.step);
 		};
 
 		handleNext = () => {
-			props.restreamer.DeleteChannel(_channelid);
+			restreamer.DeleteChannel(_channelid);
 
 			// Select a channel to jump back to
-			const channels = props.restreamer.ListChannels();
-			props.restreamer.SelectChannel(channels[0].channelid);
+			const channels = restreamer.ListChannels();
+			restreamer.SelectChannel(channels[0].channelid);
 
 			navigate(`/`);
 		};
@@ -872,7 +872,3 @@ export default function Wizard(props) {
 
 	return null;
 }
-
-Wizard.defaultProps = {
-	restreamer: null,
-};
diff --git a/src/views/Edit/index.js b/src/views/Edit/index.js
index cbea87c..a1ba9d6 100644
--- a/src/views/Edit/index.js
+++ b/src/views/Edit/index.js
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function Edit(props) {
+export default function Edit({ restreamer = null }) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
 	const navigate = useNavigate();
@@ -96,25 +96,25 @@ export default function Edit(props) {
 	}, [navigate, $invalid]);
 
 	const load = async () => {
-		const channelid = props.restreamer.SelectChannel(_channelid);
+		const channelid = restreamer.SelectChannel(_channelid);
 		if (channelid === '' || channelid !== _channelid) {
 			setInvalid(true);
 			return;
 		}
 
-		const proc = await props.restreamer.GetIngestProgress(_channelid);
+		const proc = await restreamer.GetIngestProgress(_channelid);
 		setProcess(proc);
 
-		let metadata = await props.restreamer.GetIngestMetadata(_channelid);
+		let metadata = await restreamer.GetIngestMetadata(_channelid);
 		setData({
 			...$data,
 			...metadata,
 		});
 
-		const skills = await props.restreamer.Skills();
+		const skills = await restreamer.Skills();
 		setSkills(skills);
 
-		const config = await props.restreamer.ConfigActive();
+		const config = await restreamer.ConfigActive();
 		setConfig(config);
 
 		const complete = M.validateProfile(metadata.sources, metadata.profiles[0]);
@@ -171,8 +171,8 @@ export default function Edit(props) {
 	const handleSourceEditDialogDone = async () => {
 		let stopped = false;
 
-		stopped = await props.restreamer.StopIngest(_channelid);
-		stopped = stopped ? await props.restreamer.StopIngestSnapshot(_channelid) : false;
+		stopped = await restreamer.StopIngest(_channelid);
+		stopped = stopped ? await restreamer.StopIngestSnapshot(_channelid) : false;
 
 		const target = $editDialog.target;
 		const what = $editDialog.what;
@@ -205,18 +205,18 @@ export default function Edit(props) {
 	};
 
 	const handleSkillsRefresh = async () => {
-		await props.restreamer.RefreshSkills();
+		await restreamer.RefreshSkills();
 
-		const skills = await props.restreamer.Skills();
+		const skills = await restreamer.Skills();
 		setSkills(skills);
 	};
 
 	const handleSourceStore = async (name, data) => {
-		return await props.restreamer.UploadData('', name, data);
+		return await restreamer.UploadData('', name, data);
 	};
 
 	const handleSourceProbe = async (inputs) => {
-		let [res, err] = await props.restreamer.Probe(_channelid, inputs);
+		let [res, err] = await restreamer.Probe(_channelid, inputs);
 		if (err !== null) {
 			res = {
 				streams: [],
@@ -305,38 +305,38 @@ export default function Edit(props) {
 			}
 
 			// Create/update the ingest
-			let [, err] = await props.restreamer.UpsertIngest(_channelid, global, inputs, outputs, control);
+			let [, err] = await restreamer.UpsertIngest(_channelid, global, inputs, outputs, control);
 			if (err !== null) {
 				notify.Dispatch('error', 'save:ingest', i18n._(t`Failed to update ingest process (${err.message})`));
 				return false;
 			}
 
 			// Save the metadata
-			let res = await props.restreamer.SetIngestMetadata(_channelid, $data);
+			let res = await restreamer.SetIngestMetadata(_channelid, $data);
 			if (res === false) {
 				notify.Dispatch('warning', 'save:ingest', i18n._(t`Failed to save ingest metadata`));
 			}
 
 			// Create/update the ingest snapshot process
-			[, err] = await props.restreamer.UpsertIngestSnapshot(_channelid, control);
+			[, err] = await restreamer.UpsertIngestSnapshot(_channelid, control);
 			if (err !== null) {
 				notify.Dispatch('error', 'save:ingest', i18n._(t`Failed to update ingest snapshot process (${err.message})`));
 			}
 
 			// Create/update the ingest preview process
-			[, err] = await props.restreamer.UpsertIngestPreview(_channelid, control);
+			[, err] = await restreamer.UpsertIngestPreview(_channelid, control);
 			if (err !== null) {
 				notify.Dispatch('error', 'save:ingest', i18n._(t`Failed to update ingest preview process (${err.message})`));
 			}
 
 			// Create/update the player
-			res = await props.restreamer.UpdatePlayer(_channelid);
+			res = await restreamer.UpdatePlayer(_channelid);
 			if (res === false) {
 				notify.Dispatch('warning', 'save:ingest', i18n._(t`Failed to update the player`));
 			}
 
 			// Create/update the playersite
-			res = await props.restreamer.UpdatePlayersite();
+			res = await restreamer.UpdatePlayersite();
 			if (res === false) {
 				notify.Dispatch('warning', 'save:ingest', i18n._(t`Failed to update the playersite`));
 			}
@@ -374,7 +374,7 @@ export default function Edit(props) {
 			saving: true,
 		});
 
-		const res = await props.restreamer.DeleteChannel(_channelid);
+		const res = await restreamer.DeleteChannel(_channelid);
 		if (res === false) {
 			setState({
 				...$state,
@@ -705,10 +705,6 @@ export default function Edit(props) {
 	);
 }
 
-Edit.defaultProps = {
-	restreamer: null,
-};
-
 Edit.propTypes = {
 	restreamer: PropTypes.object.isRequired,
 };
diff --git a/src/views/Incompatible.js b/src/views/Incompatible.js
index 9afcc4c..a58f7a1 100644
--- a/src/views/Incompatible.js
+++ b/src/views/Incompatible.js
@@ -6,21 +6,19 @@ import Paper from '../misc/Paper';
 import PaperHeader from '../misc/PaperHeader';
 import PaperContent from '../misc/PaperContent';
 
-export default function Incompatible(props) {
+export default function Incompatible({ type = '', have = '', want = '' }) {
 	let text = <Trans>This version of the UI is compatible.</Trans>;
 
-	if (props.type === 'core') {
+	if (type === 'core') {
 		text = (
 			<Trans>
-				This version of the UI doesn't support the connected Core ({props.have}). The UI requires {props.want}. Please use a compatible version of the
-				UI.
+				This version of the UI doesn't support the connected Core ({have}). The UI requires {want}. Please use a compatible version of the UI.
 			</Trans>
 		);
-	} else if (props.type === 'ffmpeg') {
+	} else if (type === 'ffmpeg') {
 		text = (
 			<Trans>
-				This version of the UI doesn't support the available FFmpeg binary ({props.have}). The UI requires {props.want}. Please use a supported FFmpeg
-				binary.
+				This version of the UI doesn't support the available FFmpeg binary ({have}). The UI requires {want}. Please use a supported FFmpeg binary.
 			</Trans>
 		);
 	}
@@ -32,9 +30,3 @@ export default function Incompatible(props) {
 		</Paper>
 	);
 }
-
-Incompatible.defaultProps = {
-	type: '',
-	have: '',
-	want: '',
-};
diff --git a/src/views/Invalid.js b/src/views/Invalid.js
index f3840c2..f01a0ee 100644
--- a/src/views/Invalid.js
+++ b/src/views/Invalid.js
@@ -21,15 +21,15 @@ const isProbablyMixedContent = (address) => {
 	return false;
 };
 
-export default function Invalid(props) {
-	const [$mixed] = React.useState(isProbablyMixedContent(props.address));
+export default function Invalid({ address = '' }) {
+	const [$mixed] = React.useState(isProbablyMixedContent(address));
 
 	return (
 		<Paper xs={8} sm={6} md={6} className="PaperM">
 			<PaperHeader title={<Trans>Error</Trans>} onAbort={() => window.location.reload()} />
 			<PaperContent>
 				<Typography>
-					<Trans>There was an error connecting to Restreamer Core at {props.address}.</Trans>
+					<Trans>There was an error connecting to Restreamer Core at {address}.</Trans>
 				</Typography>
 				{$mixed === true && (
 					<Typography sx={{ mt: '1em' }}>
@@ -47,7 +47,3 @@ export default function Invalid(props) {
 		</Paper>
 	);
 }
-
-Invalid.defaultProps = {
-	address: '',
-};
diff --git a/src/views/Login.js b/src/views/Login.js
index 813ddfd..abccf85 100644
--- a/src/views/Login.js
+++ b/src/views/Login.js
@@ -104,8 +104,8 @@ function initAuths(auths) {
 	return auths;
 }
 
-export default function Login(props) {
-	const [$auths] = React.useState(initAuths(props.auths));
+export default function Login({ address = '', auths = [], hasService = false, onLogin = function (username, password) {}, onAuth0 = function () {} }) {
+	const [$auths] = React.useState(initAuths(auths));
 	const [$login, setLogin] = React.useState({
 		username: '',
 		password: '',
@@ -143,7 +143,7 @@ export default function Login(props) {
 
 		setLoginCheck(true);
 
-		const res = await props.onLogin($login.username, $login.password);
+		const res = await onLogin($login.username, $login.password);
 		if (res === false) {
 			setLoginCheck(false);
 		}
@@ -182,7 +182,7 @@ export default function Login(props) {
 
 		if (isAuthenticated === false) {
 			const redirect = await auth0.login({
-				address: props.address,
+				address: address,
 				hash: window.location.hash.substring(1),
 			});
 
@@ -198,7 +198,7 @@ export default function Login(props) {
 
 	const handleAuth0 = async () => {
 		setLoginCheck(true);
-		await props.onAuth0();
+		await onAuth0();
 	};
 
 	const handleChange = (what) => (event) => {
@@ -241,7 +241,7 @@ export default function Login(props) {
 										<Trans>Basic</Trans>
 									</ToggleButton>
 								)}
-								{props.hasService === true && !hasAuthType($auths, 'auth0') && (
+								{hasService === true && !hasAuthType($auths, 'auth0') && (
 									<ToggleButton value="service">
 										<Trans>Service</Trans>
 									</ToggleButton>
@@ -302,7 +302,7 @@ export default function Login(props) {
 						</Grid>
 					</React.Fragment>
 				)}
-				{props.hasService === true && $loginTarget === 'service' && !hasAuthType($auths, 'auth0') && (
+				{hasService === true && $loginTarget === 'service' && !hasAuthType($auths, 'auth0') && (
 					<React.Fragment>
 						<Grid item xs={12} align="center">
 							<Grid container spacing={0}>
@@ -420,11 +420,3 @@ export default function Login(props) {
 		</Paper>
 	);
 }
-
-Login.defaultProps = {
-	address: '',
-	auths: [],
-	hasService: false,
-	onLogin: function (username, password) {},
-	onAuth0: function () {},
-};
diff --git a/src/views/Main/Egress.js b/src/views/Main/Egress.js
index e479ccf..583e5d9 100644
--- a/src/views/Main/Egress.js
+++ b/src/views/Main/Egress.js
@@ -59,7 +59,15 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function Egress(props) {
+export default function Egress({
+	service = '',
+	name = '',
+	state = 'disconnected',
+	order = 'stop',
+	reconnect = true,
+	onEdit = function () {},
+	onOrder = function (order) {},
+}) {
 	const classes = useStyles();
 	const [$order, setOrder] = React.useState('stop');
 
@@ -71,57 +79,57 @@ export default function Egress(props) {
 	}, []);
 
 	const update = async () => {
-		setOrder(props.order);
+		setOrder(order);
 	};
 
 	const handleSwitch = async (event) => {
 		const checked = event.target.checked;
 
-		const order = checked === true ? 'start' : 'stop';
+		const egrees_order = checked === true ? 'start' : 'stop';
 
-		setOrder(order);
+		setOrder(egrees_order);
 
-		let onOrder = order;
-		if (order === 'start' && $order === 'start') {
-			onOrder = 'restart';
+		let egress_onOrder = egrees_order;
+		if (egrees_order === 'start' && $order === 'start') {
+			egress_onOrder = 'restart';
 		}
 
-		const res = await props.onOrder(onOrder);
+		const res = await onOrder(egress_onOrder);
 
 		if (res === false) {
-			setOrder(order === 'start' ? 'stop' : 'start');
+			setOrder(egrees_order === 'start' ? 'stop' : 'start');
 		}
 	};
 
-	let name = <Trans>Unknown</Trans>;
-	let icon = <DeviceUnknownIcon />;
+	let egress_name = <Trans>Unknown</Trans>;
+	let egress_icon = <DeviceUnknownIcon />;
 
-	if (props.service === 'player') {
-		name = <Trans>Player</Trans>;
-		icon = <OndemandVideoIcon className="player-icon" />;
+	if (service === 'player') {
+		egress_name = <Trans>Player</Trans>;
+		egress_icon = <OndemandVideoIcon className="player-icon" />;
 	} else {
-		let s = Services.Get(props.service);
+		let s = Services.Get(service);
 		if (s !== null) {
 			const Icon = s.icon;
 
-			name = s.name;
-			if (props.name && props.name.length !== 0) {
-				name = props.name;
+			egress_name = s.name;
+			if (name && name.length !== 0) {
+				egress_name = name;
 			}
 
-			icon = <Icon />;
+			egress_icon = <Icon />;
 		}
 	}
 
-	let checked = props.order === 'start' ? true : false;
-	if (props.reconnect === false) {
-		if (props.state === 'error' || props.state === 'disconnected') {
+	let checked = order === 'start' ? true : false;
+	if (reconnect === false) {
+		if (state === 'error' || state === 'disconnected') {
 			checked = false;
 		}
 	}
 
 	let color = 'secondary';
-	switch (props.state) {
+	switch (state) {
 		case 'disconnecting':
 		case 'connecting':
 			color = 'warning';
@@ -141,22 +149,22 @@ export default function Egress(props) {
 				<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={0}>
 					<Stack className="egress-left" direction="row" alignItems="center" spacing={0}>
 						<IconButton size="small" className="egress-left">
-							{icon}
+							{egress_icon}
 						</IconButton>
-						<Typography className="egress-name">{name}</Typography>
+						<Typography className="egress-name">{egress_name}</Typography>
 					</Stack>
 					<Stack direction="row" alignItems="center" spacing={0}>
-						{props.service !== 'player' && (
+						{service !== 'player' && (
 							<Switch
 								checked={checked}
-								disabled={props.order !== $order}
+								disabled={order !== $order}
 								onChange={handleSwitch}
 								color={color}
 								size="small"
 								className="egress-right-switch"
 							/>
 						)}
-						<IconButton size="small" className="egress-right-edit" onClick={props.onEdit}>
+						<IconButton size="small" className="egress-right-edit" onClick={onEdit}>
 							<EditIcon />
 						</IconButton>
 					</Stack>
@@ -165,13 +173,3 @@ export default function Egress(props) {
 		</Grid>
 	);
 }
-
-Egress.defaultProps = {
-	service: '',
-	name: '',
-	state: 'disconnected',
-	order: 'stop',
-	reconnect: true,
-	onEdit: function () {},
-	onOrder: function (order) {},
-};
diff --git a/src/views/Main/Progress.js b/src/views/Main/Progress.js
index 0fda947..ef9f0e1 100644
--- a/src/views/Main/Progress.js
+++ b/src/views/Main/Progress.js
@@ -8,11 +8,11 @@ import Duration from '../../misc/Duration';
 import Number from '../../misc/Number';
 import Palette from '../../theme/base/palette';
 
-export default function Progress(props) {
-	const uptime = props.progress.time;
-	const bitrate = props.progress.bitrate;
-	const fps = props.progress.fps;
-	const speed = props.progress.speed;
+export default function Progress({ progress = {} }) {
+	const uptime = progress.time;
+	const bitrate = progress.bitrate;
+	const fps = progress.fps;
+	const speed = progress.speed;
 
 	const valueStyle = {
 		fontWeight: 'bold',
@@ -81,7 +81,3 @@ export default function Progress(props) {
 		</Grid>
 	);
 }
-
-Progress.defaultProps = {
-	progress: {},
-};
diff --git a/src/views/Main/Publication.js b/src/views/Main/Publication.js
index 463364c..acdf943 100644
--- a/src/views/Main/Publication.js
+++ b/src/views/Main/Publication.js
@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function Publication(props) {
+export default function Publication({ channelid = '', restreamer = null }) {
 	const classes = useStyles();
 
 	const navigate = useNavigate();
@@ -73,7 +73,7 @@ export default function Publication(props) {
 	const update = async () => {
 		const egresses = [];
 
-		const processes = await props.restreamer.ListIngestEgresses(props.channelid, services);
+		const processes = await restreamer.ListIngestEgresses(channelid, services);
 
 		for (let p of processes) {
 			egresses.push({
@@ -89,7 +89,7 @@ export default function Publication(props) {
 	};
 
 	const sessions = async () => {
-		const current = await props.restreamer.CurrentSessions(['ffmpeg', 'hls', 'rtmp', 'srt']);
+		const current = await restreamer.CurrentSessions(['ffmpeg', 'hls', 'rtmp', 'srt']);
 
 		setSession({
 			viewer: current.sessions,
@@ -100,11 +100,11 @@ export default function Publication(props) {
 	const handleServiceAdd = (event) => {
 		event.preventDefault();
 
-		navigate(`/${props.channelid}/publication/`);
+		navigate(`/${channelid}/publication/`);
 	};
 
 	const handleServiceEdit = (service, index) => () => {
-		let target = `/${props.channelid}/publication/${service}`;
+		let target = `/${channelid}/publication/${service}`;
 
 		if (service !== 'player') {
 			target = target + '/' + index;
@@ -117,14 +117,14 @@ export default function Publication(props) {
 		let res = false;
 
 		if (order === 'start') {
-			res = await props.restreamer.StartEgress(props.channelid, id);
+			res = await restreamer.StartEgress(channelid, id);
 		} else if (order === 'restart') {
-			res = await props.restreamer.StopEgress(props.channelid, id);
+			res = await restreamer.StopEgress(channelid, id);
 			if (res === true) {
-				res = await props.restreamer.StartEgress(props.channelid, id);
+				res = await restreamer.StartEgress(channelid, id);
 			}
 		} else if (order === 'stop') {
-			res = await props.restreamer.StopEgress(props.channelid, id);
+			res = await restreamer.StopEgress(channelid, id);
 		}
 
 		return res;
@@ -153,7 +153,7 @@ export default function Publication(props) {
 						onOrder={handleOrderChange(e.id)}
 					/>
 				</Grid>
-			</React.Fragment>
+			</React.Fragment>,
 		);
 	}
 
@@ -191,8 +191,3 @@ export default function Publication(props) {
 		</React.Fragment>
 	);
 }
-
-Publication.defaultProps = {
-	channelid: '',
-	restreamer: null,
-};
diff --git a/src/views/Main/index.js b/src/views/Main/index.js
index 3188927..1d65d4a 100644
--- a/src/views/Main/index.js
+++ b/src/views/Main/index.js
@@ -60,7 +60,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function Main(props) {
+export default function Main({ restreamer = null }) {
 	const classes = useStyles();
 	const navigate = useNavigate();
 	const { channelid: _channelid } = useParams();
@@ -107,10 +107,10 @@ export default function Main(props) {
 	}, [navigate, $invalid]);
 
 	const load = async () => {
-		const config = props.restreamer.ConfigActive();
+		const config = restreamer.ConfigActive();
 		setConfig(config);
 
-		const metadata = await props.restreamer.GetIngestMetadata(_channelid);
+		const metadata = await restreamer.GetIngestMetadata(_channelid);
 		setMetadata({
 			...$metadata,
 			...metadata,
@@ -120,13 +120,13 @@ export default function Main(props) {
 	};
 
 	const update = async () => {
-		const channelid = props.restreamer.SelectChannel(_channelid);
+		const channelid = restreamer.SelectChannel(_channelid);
 		if (channelid === '' || channelid !== _channelid) {
 			setInvalid(true);
 			return;
 		}
 
-		const progress = await props.restreamer.GetIngestProgress(_channelid);
+		const progress = await restreamer.GetIngestProgress(_channelid);
 
 		const state = {
 			...$state,
@@ -139,8 +139,8 @@ export default function Main(props) {
 		if (state.state === 'connecting') {
 			if (state.onConnect === null) {
 				state.onConnect = async () => {
-					await props.restreamer.StopIngestSnapshot(_channelid);
-					await props.restreamer.StartIngestSnapshot(_channelid);
+					await restreamer.StopIngestSnapshot(_channelid);
+					await restreamer.StartIngestSnapshot(_channelid);
 				};
 			}
 		} else if (state.state === 'connected') {
@@ -153,7 +153,7 @@ export default function Main(props) {
 			}
 			// check av codec @ preview
 			if (state.progress.video_codec !== 'h264' && $state.preview === null) {
-				const preview_progress = await props.restreamer.GetIngestProgress(`${_channelid}`, '_preview');
+				const preview_progress = await restreamer.GetIngestProgress(`${_channelid}`, '_preview');
 				if (preview_progress) {
 					state.preview = false;
 				} else {
@@ -185,13 +185,13 @@ export default function Main(props) {
 			...$state,
 			state: 'connecting',
 			onConnect: async () => {
-				await props.restreamer.StopIngestSnapshot(_channelid);
-				await props.restreamer.StartIngestSnapshot(_channelid);
+				await restreamer.StopIngestSnapshot(_channelid);
+				await restreamer.StartIngestSnapshot(_channelid);
 			},
 		});
 
-		await props.restreamer.StartIngest(_channelid);
-		await props.restreamer.StartIngestSnapshot(_channelid);
+		await restreamer.StartIngest(_channelid);
+		await restreamer.StartIngestSnapshot(_channelid);
 	};
 
 	const disconnect = async () => {
@@ -200,8 +200,8 @@ export default function Main(props) {
 			state: 'disconnecting',
 		});
 
-		await props.restreamer.StopIngestSnapshot(_channelid);
-		await props.restreamer.StopIngest(_channelid);
+		await restreamer.StopIngestSnapshot(_channelid);
+		await restreamer.StopIngest(_channelid);
 
 		await disconnectEgresses();
 	};
@@ -212,7 +212,7 @@ export default function Main(props) {
 	};
 
 	const disconnectEgresses = async () => {
-		await props.restreamer.StopAllEgresses(_channelid);
+		await restreamer.StopAllEgresses(_channelid);
 	};
 
 	const handleProcessDetails = async (event) => {
@@ -225,7 +225,7 @@ export default function Main(props) {
 		};
 
 		if (open === true) {
-			const data = await props.restreamer.GetIngestLog(_channelid);
+			const data = await restreamer.GetIngestLog(_channelid);
 			if (data !== null) {
 				logdata = data;
 			}
@@ -245,7 +245,7 @@ export default function Main(props) {
 	};
 
 	const updateProcessDetailsLog = async () => {
-		const data = await props.restreamer.GetIngestLog(_channelid);
+		const data = await restreamer.GetIngestLog(_channelid);
 		if (data !== null) {
 			setProcessDetails({
 				...$processDetails,
@@ -261,7 +261,7 @@ export default function Main(props) {
 		let data = '';
 
 		if ($processDebug.open === false) {
-			const debug = await props.restreamer.GetIngestDebug(_channelid);
+			const debug = await restreamer.GetIngestDebug(_channelid);
 			data = JSON.stringify(debug, null, 2);
 		}
 
@@ -296,17 +296,17 @@ export default function Main(props) {
 	}
 
 	const storage = $metadata.control.hls.storage;
-	const channel = props.restreamer.GetChannel(_channelid);
-	const manifest = props.restreamer.GetChannelAddress('hls+' + storage, _channelid);
-	const manifest_preview = props.restreamer.GetChannelAddress('hls+' + storage, `${_channelid}_h264`);
-	const poster = props.restreamer.GetChannelAddress('snapshot+' + storage, _channelid);
+	const channel = restreamer.GetChannel(_channelid);
+	const manifest = restreamer.GetChannelAddress('hls+' + storage, _channelid);
+	const manifest_preview = restreamer.GetChannelAddress('hls+' + storage, `${_channelid}_h264`);
+	const poster = restreamer.GetChannelAddress('snapshot+' + storage, _channelid);
 
 	let title = <Trans>Main channel</Trans>;
 	if (channel && channel.name && channel.name.length !== 0) {
 		if ($state.progress.video_codec) {
 			title = (
 				<>
-				  	<Chip variant="outlined" color="primary" label={$state.progress.video_codec} /> {channel.name}
+					<Chip variant="outlined" color="primary" label={$state.progress.video_codec} /> {channel.name}
 				</>
 			);
 		} else {
@@ -402,7 +402,7 @@ export default function Main(props) {
 												)}
 											</Grid>
 										)}
-										{$state.state === 'connected' && $state.progress.video_codec === 'h264'&& !$metadata.control.preview.enable && (
+										{$state.state === 'connected' && $state.progress.video_codec === 'h264' && !$metadata.control.preview.enable && (
 											<Player type="videojs-internal" source={manifest} poster={poster} autoplay mute controls />
 										)}
 										{$state.state === 'connected' && $state.progress.video_codec !== 'h264' && $metadata.control.preview.enable && (
@@ -415,7 +415,7 @@ export default function Main(props) {
 												className={classes.playerL3}
 												justifyContent="center"
 												alignItems="center"
-												textAlign={"center"}
+												textAlign={'center'}
 												spacing={2}
 											>
 												<Grid item>
@@ -480,27 +480,17 @@ export default function Main(props) {
 											variant="outlined"
 											color="default"
 											size="small"
-											value={props.restreamer.GetPublicAddress('hls+' + storage, _channelid)}
+											value={restreamer.GetPublicAddress('hls+' + storage, _channelid)}
 										>
 											<Trans>HLS</Trans>
 										</CopyButton>
 										{$metadata.control.rtmp.enable && (
-											<CopyButton
-												variant="outlined"
-												color="default"
-												size="small"
-												value={props.restreamer.GetPublicAddress('rtmp', _channelid)}
-											>
+											<CopyButton variant="outlined" color="default" size="small" value={restreamer.GetPublicAddress('rtmp', _channelid)}>
 												<Trans>RTMP</Trans>
 											</CopyButton>
 										)}
 										{$metadata.control.srt.enable && (
-											<CopyButton
-												variant="outlined"
-												color="default"
-												size="small"
-												value={props.restreamer.GetPublicAddress('srt', _channelid)}
-											>
+											<CopyButton variant="outlined" color="default" size="small" value={restreamer.GetPublicAddress('srt', _channelid)}>
 												<Trans>SRT</Trans>
 											</CopyButton>
 										)}
@@ -508,7 +498,7 @@ export default function Main(props) {
 											variant="outlined"
 											color="default"
 											size="small"
-											value={props.restreamer.GetPublicAddress('snapshot+memfs', _channelid)}
+											value={restreamer.GetPublicAddress('snapshot+memfs', _channelid)}
 										>
 											<Trans>Snapshot</Trans>
 										</CopyButton>
@@ -517,7 +507,7 @@ export default function Main(props) {
 												variant="outlined"
 												color="default"
 												size="small"
-												value={props.restreamer.GetPublicAddress('hls+' + storage, `${_channelid}_h264`)}
+												value={restreamer.GetPublicAddress('hls+' + storage, `${_channelid}_h264`)}
 											>
 												<Trans>HLS @ H.264</Trans>
 											</CopyButton>
@@ -547,7 +537,7 @@ export default function Main(props) {
 					</Paper>
 				</Grid>
 				<Grid item xs={12} sm={12} md={4}>
-					<Publication restreamer={props.restreamer} channelid={_channelid} />
+					<Publication restreamer={restreamer} channelid={_channelid} />
 				</Grid>
 			</Grid>
 			<ProcessModal
@@ -568,7 +558,3 @@ export default function Main(props) {
 		</React.Fragment>
 	);
 }
-
-Main.defaultProps = {
-	restreamer: null,
-};
diff --git a/src/views/Password.js b/src/views/Password.js
index ed6ab6c..5940ecc 100644
--- a/src/views/Password.js
+++ b/src/views/Password.js
@@ -26,12 +26,18 @@ const generatePassword = (length) => {
 	return password;
 };
 
-export default function ResetPassword(props) {
+export default function ResetPassword({
+	onReset = function (username, password) {},
+	username = '',
+	usernameOverride = false,
+	password = '',
+	passwordOverride = false,
+}) {
 	const [$login, setLogin] = React.useState({
-		username: props.username.length === 0 ? 'admin' : props.username,
-		password: props.password.length === 0 ? generatePassword(6) + '-' + generatePassword(6) + '-' + generatePassword(6) : props.password,
-		passwordConfirm: props.password.length !== 0 ? props.password : '',
-		showPassword: props.password.length === 0 ? true : false,
+		username: username.length === 0 ? 'admin' : username,
+		password: password.length === 0 ? generatePassword(6) + '-' + generatePassword(6) + '-' + generatePassword(6) : password,
+		passwordConfirm: password.length !== 0 ? password : '',
+		showPassword: password.length === 0 ? true : false,
 	});
 	const [$restart, setRestart] = React.useState({
 		restarting: false,
@@ -52,16 +58,16 @@ export default function ResetPassword(props) {
 		// values won't be changed.
 
 		let username = $login.username;
-		if (props.usernameOverride) {
+		if (usernameOverride) {
 			username = '';
 		}
 
 		let password = $login.password;
-		if (props.passwordOverride) {
+		if (passwordOverride) {
 			password = '';
 		}
 
-		const res = await props.onReset(username, $login.username, password, $login.password);
+		const res = await onReset(username, $login.username, password, $login.password);
 		switch (res) {
 			case 'ERROR':
 				setRestart({
@@ -111,8 +117,8 @@ export default function ResetPassword(props) {
 									value={$login.username}
 									onChange={handleChange('username')}
 									autoComplete="username"
-									disabled={props.usernameOverride}
-									env={props.usernameOverride}
+									disabled={usernameOverride}
+									env={usernameOverride}
 								/>
 							</Grid>
 							<Grid item xs={12}>
@@ -123,8 +129,8 @@ export default function ResetPassword(props) {
 									onChange={handleChange('password')}
 									show={$login.showPassword}
 									autoComplete="current-password"
-									disabled={props.passwordOverride}
-									env={props.passwordOverride}
+									disabled={passwordOverride}
+									env={passwordOverride}
 								/>
 							</Grid>
 							<Grid item xs={12}>
@@ -134,8 +140,8 @@ export default function ResetPassword(props) {
 									label={<Trans>Confirm password</Trans>}
 									onChange={handleChange('passwordConfirm')}
 									show={$login.showPassword}
-									disabled={props.passwordOverride}
-									env={props.passwordOverride}
+									disabled={passwordOverride}
+									env={passwordOverride}
 								/>
 							</Grid>
 							<Grid item xs={12}>
@@ -184,11 +190,3 @@ export default function ResetPassword(props) {
 		</Paper>
 	);
 }
-
-ResetPassword.defaultProps = {
-	onReset: function (username, password) {},
-	username: '',
-	usernameOverride: false,
-	password: '',
-	passwordOverride: false,
-};
diff --git a/src/views/Playersite.js b/src/views/Playersite.js
index 69e48b3..0b4ab6c 100644
--- a/src/views/Playersite.js
+++ b/src/views/Playersite.js
@@ -14,11 +14,6 @@ import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 
 import * as M from '../utils/metadata';
 import playerSiteThumb from '../assets/images/playersite.png';
@@ -56,67 +51,12 @@ const imageTypes = [
 
 const templateTypes = [{ mimetype: 'text/html', extension: 'html', maxSize: 500 * 1024 }];
 
-function CheckboxList(props) {
-	const [$checked, setChecked] = React.useState(props.selected);
-
-	const handleToggle = (value) => () => {
-		const currentIndex = $checked.indexOf(value);
-		const newChecked = [...$checked];
-
-		if (currentIndex === -1) {
-			newChecked.push(value);
-		} else {
-			newChecked.splice(currentIndex, 1);
-		}
-
-		setChecked(newChecked);
-
-		props.onChange({
-			target: {
-				value: [...newChecked],
-			},
-		});
-	};
-
-	return (
-		<List sx={{ width: '100%', position: 'relative', overflow: 'auto', maxHeight: 300 }}>
-			{props.items.map((value) => {
-				const labelId = `checkbox-list-label-${value.id}`;
-
-				return (
-					<ListItem key={value.id} disablePadding>
-						<ListItemButton onClick={handleToggle(value.id)} dense disabled={props.disabled}>
-							<ListItemIcon>
-								<Checkbox
-									edge="start"
-									checked={$checked.indexOf(value.id) !== -1}
-									tabIndex={-1}
-									disableRipple
-									inputProps={{ 'aria-labelledby': labelId }}
-								/>
-							</ListItemIcon>
-							<ListItemText id={labelId} primary={value.name} />
-						</ListItemButton>
-					</ListItem>
-				);
-			})}
-		</List>
-	);
-}
-
-CheckboxList.defaultProps = {
-	disabled: false,
-	selected: [],
-	items: [],
-	onChange: function () {},
-};
-
-export default function Playersite(props) {
+export default function Playersite({ restreamer = null }) {
 	const classes = useStyles();
 	const navigate = useNavigate();
 	const { i18n } = useLingui();
-	const address = props.restreamer.Address() + '/';
-	const playersiteUrl = props.restreamer.GetPlayersiteUrl();
+	const address = restreamer.Address() + '/';
+	const playersiteUrl = restreamer.GetPlayersiteUrl();
 	const notify = React.useContext(NotifyContext);
 	const [$ready, setReady] = React.useState(false);
 	const [$ingest, setIngest] = React.useState(false);
@@ -141,15 +81,15 @@ export default function Playersite(props) {
 	}, []);
 
 	const mount = async () => {
-		const data = await props.restreamer.GetMetadata();
+		const data = await restreamer.GetMetadata();
 
 		setData(data);
-		setSettings(props.restreamer.InitPlayersiteSettings(data.playersite));
-		setChannels(props.restreamer.ListChannels());
-		setIngest(props.restreamer.HasIngest());
+		setSettings(restreamer.InitPlayersiteSettings(data.playersite));
+		setChannels(restreamer.ListChannels());
+		setIngest(restreamer.HasIngest());
 
-		setTemplates(await props.restreamer.ListPlayersiteTemplates());
-		setAvailable(await props.restreamer.HasPlayersite());
+		setTemplates(await restreamer.ListPlayersiteTemplates());
+		setAvailable(await restreamer.HasPlayersite());
 
 		setReady(true);
 	};
@@ -171,7 +111,7 @@ export default function Playersite(props) {
 	};
 
 	const handleBackgroundImageUpload = async (data, extension) => {
-		const path = await props.restreamer.UploadPlayersiteBackgroundImage(data, extension);
+		const path = await restreamer.UploadPlayersiteBackgroundImage(data, extension);
 
 		handleChange('bgimage_url')({
 			target: {
@@ -183,9 +123,9 @@ export default function Playersite(props) {
 	};
 
 	const handleTemplateUpload = async (data, extension) => {
-		const name = await props.restreamer.UploadPlayersiteTemplate(data, $settings.templatename);
+		const name = await restreamer.UploadPlayersiteTemplate(data, $settings.templatename);
 
-		setTemplates(await props.restreamer.ListPlayersiteTemplates());
+		setTemplates(await restreamer.ListPlayersiteTemplates());
 		setSettings({
 			...$settings,
 			template: name,
@@ -198,12 +138,12 @@ export default function Playersite(props) {
 	const handleTemplateDelete = async () => {
 		setSaving(true);
 
-		await props.restreamer.DeletePlayersiteTemplate($settings.template);
+		await restreamer.DeletePlayersiteTemplate($settings.template);
 		setSettings({
 			...$settings,
 			template: '!default',
 		});
-		setTemplates(await props.restreamer.ListPlayersiteTemplates());
+		setTemplates(await restreamer.ListPlayersiteTemplates());
 
 		setSaving(false);
 	};
@@ -270,21 +210,21 @@ export default function Playersite(props) {
 			playersite: $settings,
 		};
 
-		let res = await props.restreamer.SetMetadata(data);
+		let res = await restreamer.SetMetadata(data);
 		if (res === false) {
 			notify.Dispatch('error', 'save:playersite', i18n._(t`Failed to store player size setting.`));
 			setSaving(false);
 			return;
 		}
 
-		res = await props.restreamer.UpdatePlayersite();
+		res = await restreamer.UpdatePlayersite();
 		if (res === false) {
 			notify.Dispatch('error', 'save:playersite', i18n._(t`Failed to create publication website files.`));
 			setSaving(false);
 			return;
 		}
 
-		setAvailable(await props.restreamer.HasPlayersite());
+		setAvailable(await restreamer.HasPlayersite());
 
 		setSaving(false);
 
@@ -312,8 +252,8 @@ export default function Playersite(props) {
 		return null;
 	}
 
-	let main_channelid = props.restreamer.GetCurrentChannelID();
-	let channel = props.restreamer.GetChannel($settings.channelid);
+	let main_channelid = restreamer.GetCurrentChannelID();
+	let channel = restreamer.GetChannel($settings.channelid);
 	if (channel !== null) {
 		main_channelid = channel.channelid;
 	}
@@ -399,7 +339,7 @@ export default function Playersite(props) {
 										renderValue={(selected) => {
 											return selected
 												.map((id) => {
-													let channel = props.restreamer.GetChannel(id);
+													let channel = restreamer.GetChannel(id);
 													if (channel === null) {
 														return '';
 													}
@@ -860,7 +800,3 @@ export default function Playersite(props) {
 		</React.Fragment>
 	);
 }
-
-Playersite.defaultProps = {
-	restreamer: null,
-};
diff --git a/src/views/Publication/Add.js b/src/views/Publication/Add.js
index d6ecf09..0eddb7c 100644
--- a/src/views/Publication/Add.js
+++ b/src/views/Publication/Add.js
@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function Add(props) {
+export default function Add({ restreamer = null }) {
 	const theme = useTheme();
 	const breakpointUpSm = useMediaQuery(theme.breakpoints.up('sm'));
 	const classes = useStyles();
@@ -88,16 +88,16 @@ export default function Add(props) {
 	}, [navigate, $invalid]);
 
 	const load = async () => {
-		const channelid = props.restreamer.SelectChannel(_channelid);
+		const channelid = restreamer.SelectChannel(_channelid);
 		if (channelid === '' || channelid !== _channelid) {
 			setInvalid(true);
 			return;
 		}
 
-		const skills = await props.restreamer.Skills();
+		const skills = await restreamer.Skills();
 		setSkills(skills);
 
-		let ingest = await props.restreamer.GetIngestMetadata(_channelid);
+		let ingest = await restreamer.GetIngestMetadata(_channelid);
 		setMetadata({
 			...$metadata,
 			name: ingest.meta.name,
@@ -223,14 +223,14 @@ export default function Add(props) {
 			return;
 		}
 
-		const [id, err] = await props.restreamer.CreateEgress(_channelid, $service, global, inputs, outputs, $settings.control);
+		const [id, err] = await restreamer.CreateEgress(_channelid, $service, global, inputs, outputs, $settings.control);
 		if (err !== null) {
 			setSaving(false);
 			notify.Dispatch('error', 'save:egress:' + $service, i18n._(t`Failed to create publication service (${err.message})`));
 			return;
 		}
 
-		await props.restreamer.SetEgressMetadata(_channelid, id, $settings);
+		await restreamer.SetEgressMetadata(_channelid, id, $settings);
 
 		let message = i18n._(t`The publication service has been created`);
 		if ($settings.name.length !== 0) {
@@ -578,10 +578,6 @@ export default function Add(props) {
 	);
 }
 
-Add.defaultProps = {
-	restreamer: null,
-};
-
 Add.propTypes = {
 	restreamer: PropTypes.object.isRequired,
 };
diff --git a/src/views/Publication/Edit.js b/src/views/Publication/Edit.js
index 86edeef..6f50251 100644
--- a/src/views/Publication/Edit.js
+++ b/src/views/Publication/Edit.js
@@ -50,11 +50,11 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function Edit(props) {
+export default function Edit({ restreamer = null }) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
 	const { channelid: _channelid, service: _service, index: _index } = useParams();
-	const id = props.restreamer.GetEgressId(_service, _index);
+	const id = restreamer.GetEgressId(_service, _index);
 	const navigate = useNavigate();
 	const notify = React.useContext(NotifyContext);
 	const [$ready, setReady] = React.useState(false);
@@ -106,13 +106,13 @@ export default function Edit(props) {
 	}, [navigate, $invalid]);
 
 	const update = async (isFirst) => {
-		const channelid = props.restreamer.SelectChannel(_channelid);
+		const channelid = restreamer.SelectChannel(_channelid);
 		if (channelid === '' || channelid !== _channelid) {
 			setInvalid('/');
 			return;
 		}
 
-		const proc = await props.restreamer.GetEgress(_channelid, id, ['state']);
+		const proc = await restreamer.GetEgress(_channelid, id, ['state']);
 		if (proc === null) {
 			notify.Dispatch('warning', 'notfound:egress:' + _service, i18n._(t`Publication service not found`));
 			setInvalid(`/${_channelid}`);
@@ -131,13 +131,13 @@ export default function Edit(props) {
 
 			setService(s);
 
-			const skills = await props.restreamer.Skills();
+			const skills = await restreamer.Skills();
 			setSkills(skills);
 
 			const serviceSkills = helper.conflateServiceSkills(s.requires, skills);
 			setServiceSkills(serviceSkills);
 
-			const ingest = await props.restreamer.GetIngestMetadata(_channelid);
+			const ingest = await restreamer.GetIngestMetadata(_channelid);
 			setMetadata({
 				...$metadata,
 				name: ingest.meta.name,
@@ -162,7 +162,7 @@ export default function Edit(props) {
 			const sources = helper.createSourcesFromStreams(ingest.streams);
 			setSources(sources);
 
-			const settings = await props.restreamer.GetEgressMetadata(_channelid, id);
+			const settings = await restreamer.GetEgressMetadata(_channelid, id);
 
 			const profiles = settings.profiles;
 			profiles[0].video = helper.preselectProfile(profiles[0].video, 'video', ingest.streams, serviceSkills.codecs.video, skills);
@@ -181,14 +181,14 @@ export default function Edit(props) {
 		let state = 'disconnected';
 
 		if (action === 'connect') {
-			await props.restreamer.StartEgress(_channelid, id);
+			await restreamer.StartEgress(_channelid, id);
 			state = 'connecting';
 		} else if (action === 'disconnect') {
-			await props.restreamer.StopEgress(_channelid, id);
+			await restreamer.StopEgress(_channelid, id);
 			state = 'disconnecting';
 		} else if (action === 'reconnect') {
-			await props.restreamer.StopEgress(_channelid, id);
-			await props.restreamer.StartEgress(_channelid, id);
+			await restreamer.StopEgress(_channelid, id);
+			await restreamer.StartEgress(_channelid, id);
 			state = 'connecting';
 		}
 
@@ -263,14 +263,14 @@ export default function Edit(props) {
 			return;
 		}
 
-		const [, err] = await props.restreamer.UpdateEgress(_channelid, id, global, inputs, outputs, $settings.control);
+		const [, err] = await restreamer.UpdateEgress(_channelid, id, global, inputs, outputs, $settings.control);
 		if (err !== null) {
 			setSaving(false);
 			notify.Dispatch('error', 'save:egress:' + _service, i18n._(t`Failed to store publication service (${err.message})`));
 			return;
 		}
 
-		await props.restreamer.SetEgressMetadata(_channelid, id, $settings);
+		await restreamer.SetEgressMetadata(_channelid, id, $settings);
 
 		setSaving(false);
 
@@ -311,7 +311,7 @@ export default function Edit(props) {
 	const handleServiceDelete = async () => {
 		setSaving(true);
 
-		const res = await props.restreamer.DeleteEgress(_channelid, id);
+		const res = await restreamer.DeleteEgress(_channelid, id);
 		if (res === false) {
 			setSaving(false);
 			notify.Dispatch('warning', 'delete:egress:' + _service, i18n._(t`The publication service "${$settings.name}" could not be deleted`));
@@ -352,7 +352,7 @@ export default function Edit(props) {
 		};
 
 		if (open === true) {
-			const data = await props.restreamer.GetEgressLog(_channelid, id);
+			const data = await restreamer.GetEgressLog(_channelid, id);
 			if (data !== null) {
 				logdata = data;
 			}
@@ -372,7 +372,7 @@ export default function Edit(props) {
 	};
 
 	const updateProcessDetailsLog = async () => {
-		const data = await props.restreamer.GetEgressLog(_channelid, id);
+		const data = await restreamer.GetEgressLog(_channelid, id);
 		if (data !== null) {
 			setProcessDetails({
 				...$processDetails,
@@ -389,7 +389,7 @@ export default function Edit(props) {
 		let data = '';
 
 		if (show === true) {
-			const debug = await props.restreamer.GetEgressDebug(_channelid, id);
+			const debug = await restreamer.GetEgressDebug(_channelid, id);
 			data = JSON.stringify(debug, null, 2);
 		}
 
@@ -648,10 +648,6 @@ export default function Edit(props) {
 	);
 }
 
-Edit.defaultProps = {
-	restreamer: null,
-};
-
 Edit.propTypes = {
 	restreamer: PropTypes.object.isRequired,
 };
diff --git a/src/views/Publication/Player.js b/src/views/Publication/Player.js
index 7c44463..4e4d43e 100644
--- a/src/views/Publication/Player.js
+++ b/src/views/Publication/Player.js
@@ -63,12 +63,12 @@ const posterImageTypes = [
 	{ mimetype: 'image/jpeg', extension: 'jpg', maxSize: 1 * 1024 * 1024 },
 ];
 
-export default function Edit(props) {
+export default function Edit({ restreamer = null }) {
 	const classes = useStyles();
 	const navigate = useNavigate();
 	const { channelid: _channelid } = useParams();
 	const { i18n } = useLingui();
-	const address = props.restreamer.Address();
+	const address = restreamer.Address();
 	const timeout = React.useRef();
 	const notify = React.useContext(NotifyContext);
 	const [$player] = React.useState('videojs-public');
@@ -100,13 +100,13 @@ export default function Edit(props) {
 	}, [navigate, $invalid]);
 
 	const mount = async () => {
-		const channelid = props.restreamer.SelectChannel(_channelid);
+		const channelid = restreamer.SelectChannel(_channelid);
 		if (channelid === '' || channelid !== _channelid) {
 			setInvalid('/');
 			return;
 		}
 
-		const proc = await props.restreamer.GetIngest(channelid, ['state', 'metadata']);
+		const proc = await restreamer.GetIngest(channelid, ['state', 'metadata']);
 		if (proc === null) {
 			notify.Dispatch('warning', 'notfound:ingest', i18n._(t`Main channel not found`));
 			setInvalid(`/${_channelid}/`);
@@ -115,7 +115,7 @@ export default function Edit(props) {
 
 		setMetadata(proc.metadata);
 		setState(proc.progress.state);
-		setSettings(props.restreamer.InitPlayerSettings(proc.metadata.player));
+		setSettings(restreamer.InitPlayerSettings(proc.metadata.player));
 
 		setReady(true);
 	};
@@ -157,7 +157,7 @@ export default function Edit(props) {
 		};
 
 	const handleLogoUpload = async (data, extension) => {
-		const path = await props.restreamer.UploadLogo(_channelid, data, extension);
+		const path = await restreamer.UploadLogo(_channelid, data, extension);
 
 		handleChange(
 			'image',
@@ -172,7 +172,7 @@ export default function Edit(props) {
 	};
 
 	const handlePosterUpload = async (data, extension) => {
-		const path = await props.restreamer.UploadPoster(_channelid, data, extension);
+		const path = await restreamer.UploadPoster(_channelid, data, extension);
 
 		handleChange('poster')({
 			target: {
@@ -292,8 +292,8 @@ export default function Edit(props) {
 			player: $settings,
 		};
 
-		await props.restreamer.SetIngestMetadata(_channelid, metadata);
-		await props.restreamer.UpdatePlayer(_channelid);
+		await restreamer.SetIngestMetadata(_channelid, metadata);
+		await restreamer.UpdatePlayer(_channelid);
 
 		setSaving(false);
 
@@ -335,10 +335,10 @@ export default function Edit(props) {
 	}
 
 	const storage = $metadata.control.hls.storage;
-	const manifest = props.restreamer.GetChannelAddress('hls+' + storage, _channelid);
-	const poster = $settings.poster ? prepareUrl($settings.poster) : props.restreamer.GetChannelAddress('snapshot+' + storage, _channelid);
-	const playerAddress = props.restreamer.GetPublicAddress('player', _channelid);
-	const iframeCode = props.restreamer.GetPublicIframeCode(_channelid);
+	const manifest = restreamer.GetChannelAddress('hls+' + storage, _channelid);
+	const poster = $settings.poster ? prepareUrl($settings.poster) : restreamer.GetChannelAddress('snapshot+' + storage, _channelid);
+	const playerAddress = restreamer.GetPublicAddress('player', _channelid);
+	const iframeCode = restreamer.GetPublicIframeCode(_channelid);
 	const logo = { ...$settings.logo, image: prepareUrl($settings.logo.image) };
 
 	return (
@@ -573,7 +573,3 @@ export default function Edit(props) {
 		</React.Fragment>
 	);
 }
-
-Edit.defaultProps = {
-	restreamer: null,
-};
diff --git a/src/views/Publication/Process.js b/src/views/Publication/Process.js
index c2fd31f..f3113d5 100644
--- a/src/views/Publication/Process.js
+++ b/src/views/Publication/Process.js
@@ -7,7 +7,6 @@ import Typography from '@mui/material/Typography';
 import ActionButton from '../../misc/ActionButton';
 import BoxText from '../../misc/BoxText';
 import Duration from '../../misc/Duration';
-import Progress from '../../misc/Progress';
 
 function init(progress) {
 	const initProgress = {
@@ -24,11 +23,11 @@ function init(progress) {
 	return initProgress;
 }
 
-export default function Process(props) {
-	const progress = init(props.progress);
+export default function Process({ progress = {}, onAction = function (action) {} }) {
+	progress = init(progress);
 
 	const handleAction = (action) => () => {
-		props.onAction(action);
+		onAction(action);
 	};
 
 	return (
@@ -96,8 +95,3 @@ export default function Process(props) {
 		</Grid>
 	);
 }
-
-Progress.defaultProps = {
-	progress: {},
-	onAction: function (action) {},
-};
diff --git a/src/views/Publication/Services/Akamai.js b/src/views/Publication/Services/Akamai.js
index c5fcfb9..4119a8a 100644
--- a/src/views/Publication/Services/Akamai.js
+++ b/src/views/Publication/Services/Akamai.js
@@ -73,8 +73,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -91,7 +91,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -204,12 +204,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Azure.js b/src/views/Publication/Services/Azure.js
index 99f70db..f1f60b9 100644
--- a/src/views/Publication/Services/Azure.js
+++ b/src/views/Publication/Services/Azure.js
@@ -61,8 +61,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -71,7 +71,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -105,12 +105,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Brightcove.js b/src/views/Publication/Services/Brightcove.js
index 8f06248..df22006 100644
--- a/src/views/Publication/Services/Brightcove.js
+++ b/src/views/Publication/Services/Brightcove.js
@@ -56,8 +56,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -66,7 +66,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -107,12 +107,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/CDN77.js b/src/views/Publication/Services/CDN77.js
index fb341d6..a4e1c72 100644
--- a/src/views/Publication/Services/CDN77.js
+++ b/src/views/Publication/Services/CDN77.js
@@ -56,8 +56,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -66,7 +66,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -120,12 +120,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Core.js b/src/views/Publication/Services/Core.js
index e4c02bd..a38c5cf 100644
--- a/src/views/Publication/Services/Core.js
+++ b/src/views/Publication/Services/Core.js
@@ -92,8 +92,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -151,7 +151,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -166,15 +166,15 @@ function Service(props) {
 		} else {
 			output.options = ['-f', 'flv'];
 
-			if (props.skills.ffmpeg.version_major >= 6) {
+			if (skills.ffmpeg.version_major >= 6) {
 				const codecs = [];
-				if (props.skills.codecs.video.includes('hevc')) {
+				if (skills.codecs.video.includes('hevc')) {
 					codecs.push('hvc1');
 				}
-				if (props.skills.codecs.video.includes('av1')) {
+				if (skills.codecs.video.includes('av1')) {
 					codecs.push('av01');
 				}
-				if (props.skills.codecs.video.includes('vp9')) {
+				if (skills.codecs.video.includes('vp9')) {
 					codecs.push('vp09');
 				}
 
@@ -248,14 +248,6 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export {
 	id,
 	name,
diff --git a/src/views/Publication/Services/DASH.js b/src/views/Publication/Services/DASH.js
index 720c6a5..b2475d6 100644
--- a/src/views/Publication/Services/DASH.js
+++ b/src/views/Publication/Services/DASH.js
@@ -108,8 +108,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -140,7 +140,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -512,12 +512,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/DLive.js b/src/views/Publication/Services/DLive.js
index 4ae0af0..4aa4deb 100644
--- a/src/views/Publication/Services/DLive.js
+++ b/src/views/Publication/Services/DLive.js
@@ -47,8 +47,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -57,7 +57,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -83,12 +83,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/DaCast.js b/src/views/Publication/Services/DaCast.js
index 77d8410..48703d4 100644
--- a/src/views/Publication/Services/DaCast.js
+++ b/src/views/Publication/Services/DaCast.js
@@ -63,8 +63,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -77,7 +77,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange(output, settings);
+		onChange(output, settings);
 	};
 
 	const createOutput = (settings) => {
@@ -189,12 +189,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Dailymotion.js b/src/views/Publication/Services/Dailymotion.js
index b418236..55e8a9e 100644
--- a/src/views/Publication/Services/Dailymotion.js
+++ b/src/views/Publication/Services/Dailymotion.js
@@ -55,8 +55,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -65,7 +65,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -87,7 +87,9 @@ function Service(props) {
 					value={settings.server_url}
 					onChange={handleChange('server_url')}
 					error={settings.server_url.includes('rtmp://') || settings.server_url.includes('rtmps://') ? false : true}
-					helperText={settings.server_url.includes('rtmp://') || settings.server_url.includes('rtmps://') ? false : 'Please enter a valid RTMP/S URL.'}
+					helperText={
+						settings.server_url.includes('rtmp://') || settings.server_url.includes('rtmps://') ? false : 'Please enter a valid RTMP/S URL.'
+					}
 				/>
 			</Grid>
 			<Grid item xs={12} md={9}>
@@ -104,12 +106,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Dummy.js b/src/views/Publication/Services/Dummy.js
index 5d04c05..2fd5c89 100644
--- a/src/views/Publication/Services/Dummy.js
+++ b/src/views/Publication/Services/Dummy.js
@@ -253,8 +253,8 @@ function createOutputs(settings, skills, metadata, streams) {
 //
 // 'settings' is the settings object where you store the settings for the
 // service. Its state is managed by the parent React component.
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -265,12 +265,12 @@ function Service(props) {
 			settings[what] = value;
 		}
 
-		const outputs = createOutputs(settings, props.skills, props.metadata, props.streams);
+		const outputs = createOutputs(settings, skills, metadata, streams);
 
-		props.onChange(outputs, settings);
+		onChange(outputs, settings);
 	};
 
-	if (props.skills === null) {
+	if (skills === null) {
 		return null;
 	}
 
@@ -287,14 +287,6 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: null,
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 Service.propTypes = {
 	metadata: PropTypes.object.isRequired,
 	onChange: PropTypes.func.isRequired,
diff --git a/src/views/Publication/Services/Facebook.js b/src/views/Publication/Services/Facebook.js
index cf7cfcf..e4eeece 100644
--- a/src/views/Publication/Services/Facebook.js
+++ b/src/views/Publication/Services/Facebook.js
@@ -51,8 +51,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -65,7 +65,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange(output, settings);
+		onChange(output, settings);
 	};
 
 	const createOutput = (settings) => {
@@ -142,12 +142,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Framebuffer.js b/src/views/Publication/Services/Framebuffer.js
index 327d0c2..b80a8aa 100644
--- a/src/views/Publication/Services/Framebuffer.js
+++ b/src/views/Publication/Services/Framebuffer.js
@@ -51,8 +51,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -61,7 +61,7 @@ function Service(props) {
 
 		const outputs = createOutput(settings);
 
-		props.onChange(outputs, settings);
+		onChange(outputs, settings);
 	};
 
 	const createOutput = (settings) => {
@@ -75,7 +75,7 @@ function Service(props) {
 		return outputs;
 	};
 
-	const filteredDevices = props.skills.devices.fbdev.filter((device) => device.extra !== '');
+	const filteredDevices = skills.devices.fbdev.filter((device) => device.extra !== '');
 	const options = filteredDevices.map((device) => {
 		return {
 			value: device.id,
@@ -114,12 +114,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/HLS.js b/src/views/Publication/Services/HLS.js
index 6ff75f5..fd9ec68 100644
--- a/src/views/Publication/Services/HLS.js
+++ b/src/views/Publication/Services/HLS.js
@@ -106,8 +106,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		let value = event.target.value;
@@ -124,7 +124,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -507,12 +507,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Icecast.js b/src/views/Publication/Services/Icecast.js
index 8d8904f..d10dcf9 100644
--- a/src/views/Publication/Services/Icecast.js
+++ b/src/views/Publication/Services/Icecast.js
@@ -129,8 +129,8 @@ function createOutputs(settings, skills, metadata, streams) {
 	return [output];
 }
 
-function Service(props) {
-	const settings = init(props.settings, props.metadata);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings, metadata);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -145,9 +145,9 @@ function Service(props) {
 			settings[what] = value;
 		}
 
-		const outputs = createOutputs(settings, props.skills, props.metadata, props.streams);
+		const outputs = createOutputs(settings, skills, metadata, streams);
 
-		props.onChange(outputs, settings);
+		onChange(outputs, settings);
 	};
 
 	return (
@@ -251,14 +251,6 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export {
 	id,
 	name,
diff --git a/src/views/Publication/Services/Image2.js b/src/views/Publication/Services/Image2.js
index f26e88e..f8fe57e 100644
--- a/src/views/Publication/Services/Image2.js
+++ b/src/views/Publication/Services/Image2.js
@@ -75,8 +75,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -93,7 +93,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -182,12 +182,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Instagram.js b/src/views/Publication/Services/Instagram.js
index 2eaee4a..f65ef8e 100644
--- a/src/views/Publication/Services/Instagram.js
+++ b/src/views/Publication/Services/Instagram.js
@@ -12,11 +12,7 @@ const id = 'instagram';
 const name = 'Instagram';
 const version = '1.1';
 const stream_key_link = 'https://about.instagram.com/blog/tips-and-tricks/instagram-live-producer';
-const description = (
-	<Trans>
-		Live-Streaming to Instagram Live RTMP Service.
-	</Trans>
-);
+const description = <Trans>Live-Streaming to Instagram Live RTMP Service.</Trans>;
 const image_copyright = '';
 const author = {
 	creator: {
@@ -53,8 +49,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -63,7 +59,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -78,7 +74,14 @@ function Service(props) {
 	return (
 		<Grid container spacing={2}>
 			<Grid item xs={12} md={9}>
-				<TextField variant="outlined" fullWidth label={<Trans>Stream key</Trans>} placeholder="IG-10101942686003993-0-AbyaAF64MLbaxSBJ" value={settings.key} onChange={handleChange('key')} />
+				<TextField
+					variant="outlined"
+					fullWidth
+					label={<Trans>Stream key</Trans>}
+					placeholder="IG-10101942686003993-0-AbyaAF64MLbaxSBJ"
+					value={settings.key}
+					onChange={handleChange('key')}
+				/>
 			</Grid>
 			<Grid item xs={12} md={3}>
 				<FormInlineButton target="blank" href={stream_key_link} component="a">
@@ -89,12 +92,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Kick.js b/src/views/Publication/Services/Kick.js
index 4a3b30a..9b64539 100644
--- a/src/views/Publication/Services/Kick.js
+++ b/src/views/Publication/Services/Kick.js
@@ -56,8 +56,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -66,7 +66,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -111,12 +111,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Linkedin.js b/src/views/Publication/Services/Linkedin.js
index ef51577..430f2aa 100644
--- a/src/views/Publication/Services/Linkedin.js
+++ b/src/views/Publication/Services/Linkedin.js
@@ -56,8 +56,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -66,7 +66,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -100,12 +100,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Livepush.js b/src/views/Publication/Services/Livepush.js
index 01a84df..501a1ca 100644
--- a/src/views/Publication/Services/Livepush.js
+++ b/src/views/Publication/Services/Livepush.js
@@ -57,8 +57,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -67,7 +67,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -107,12 +107,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Livespotting.js b/src/views/Publication/Services/Livespotting.js
index 9374fc9..32bd89e 100644
--- a/src/views/Publication/Services/Livespotting.js
+++ b/src/views/Publication/Services/Livespotting.js
@@ -58,8 +58,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -68,7 +68,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -109,12 +109,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/MPEGTS.js b/src/views/Publication/Services/MPEGTS.js
index e6c2acd..d895327 100644
--- a/src/views/Publication/Services/MPEGTS.js
+++ b/src/views/Publication/Services/MPEGTS.js
@@ -91,8 +91,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -109,7 +109,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -376,12 +376,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/MediaNetwork.js b/src/views/Publication/Services/MediaNetwork.js
index 9f34143..192b500 100644
--- a/src/views/Publication/Services/MediaNetwork.js
+++ b/src/views/Publication/Services/MediaNetwork.js
@@ -47,8 +47,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -57,7 +57,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -83,12 +83,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/NimoTv.js b/src/views/Publication/Services/NimoTv.js
index 819485a..6ced52c 100644
--- a/src/views/Publication/Services/NimoTv.js
+++ b/src/views/Publication/Services/NimoTv.js
@@ -58,8 +58,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -68,7 +68,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -107,12 +107,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Owncast.js b/src/views/Publication/Services/Owncast.js
index b6ffdf5..1a7b6e6 100644
--- a/src/views/Publication/Services/Owncast.js
+++ b/src/views/Publication/Services/Owncast.js
@@ -56,8 +56,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -66,7 +66,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -116,12 +116,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/PeerTube.js b/src/views/Publication/Services/PeerTube.js
index bbceeb5..f12aedf 100644
--- a/src/views/Publication/Services/PeerTube.js
+++ b/src/views/Publication/Services/PeerTube.js
@@ -50,8 +50,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -64,7 +64,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -103,12 +103,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/PicartoTv.js b/src/views/Publication/Services/PicartoTv.js
index 581b9d7..d8fbe8b 100644
--- a/src/views/Publication/Services/PicartoTv.js
+++ b/src/views/Publication/Services/PicartoTv.js
@@ -57,8 +57,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -67,7 +67,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -98,12 +98,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/RTMP.js b/src/views/Publication/Services/RTMP.js
index 89119d0..3ff359d 100644
--- a/src/views/Publication/Services/RTMP.js
+++ b/src/views/Publication/Services/RTMP.js
@@ -78,8 +78,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		let value = event.target.value;
@@ -90,7 +90,7 @@ function Service(props) {
 			if (what === 'address') {
 				const matches = value.match(/(rtmp.):\/\//);
 				if (matches !== null) {
-					if (props.skills.protocols.includes(matches[1])) {
+					if (skills.protocols.includes(matches[1])) {
 						settings['protocol'] = matches[0];
 						value = value.replace(matches[0], '');
 					}
@@ -102,21 +102,21 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
 		const options = ['-f', 'flv'];
 
-		if (props.skills.ffmpeg.version_major >= 6) {
+		if (skills.ffmpeg.version_major >= 6) {
 			const codecs = [];
-			if (props.skills.codecs.video.includes('hevc')) {
+			if (skills.codecs.video.includes('hevc')) {
 				codecs.push('hvc1');
 			}
-			if (props.skills.codecs.video.includes('av1')) {
+			if (skills.codecs.video.includes('av1')) {
 				codecs.push('av01');
 			}
-			if (props.skills.codecs.video.includes('vp9')) {
+			if (skills.codecs.video.includes('vp9')) {
 				codecs.push('vp09');
 			}
 
@@ -297,12 +297,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/RTSP.js b/src/views/Publication/Services/RTSP.js
index 67bc83e..830ba4e 100644
--- a/src/views/Publication/Services/RTSP.js
+++ b/src/views/Publication/Services/RTSP.js
@@ -81,8 +81,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -95,7 +95,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -246,12 +246,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Red5.js b/src/views/Publication/Services/Red5.js
index 83ce49d..9bcfc2c 100644
--- a/src/views/Publication/Services/Red5.js
+++ b/src/views/Publication/Services/Red5.js
@@ -61,8 +61,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -71,7 +71,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -164,12 +164,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Restream.js b/src/views/Publication/Services/Restream.js
index c2653ff..ffaa92c 100644
--- a/src/views/Publication/Services/Restream.js
+++ b/src/views/Publication/Services/Restream.js
@@ -58,8 +58,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -68,7 +68,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -124,12 +124,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Rumble.js b/src/views/Publication/Services/Rumble.js
index 7a1677b..59a6ea0 100644
--- a/src/views/Publication/Services/Rumble.js
+++ b/src/views/Publication/Services/Rumble.js
@@ -56,8 +56,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -66,7 +66,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -111,12 +111,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/SRT.js b/src/views/Publication/Services/SRT.js
index 86707d5..b103b1f 100644
--- a/src/views/Publication/Services/SRT.js
+++ b/src/views/Publication/Services/SRT.js
@@ -102,8 +102,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -120,7 +120,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -439,12 +439,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Telegram.js b/src/views/Publication/Services/Telegram.js
index 1f09197..d198aaf 100644
--- a/src/views/Publication/Services/Telegram.js
+++ b/src/views/Publication/Services/Telegram.js
@@ -47,8 +47,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -57,7 +57,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -107,12 +107,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/TikTok.js b/src/views/Publication/Services/TikTok.js
index 64cbd62..fee169f 100644
--- a/src/views/Publication/Services/TikTok.js
+++ b/src/views/Publication/Services/TikTok.js
@@ -57,8 +57,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -67,7 +67,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -112,12 +112,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Trovo.js b/src/views/Publication/Services/Trovo.js
index 64644a1..bbe9be2 100644
--- a/src/views/Publication/Services/Trovo.js
+++ b/src/views/Publication/Services/Trovo.js
@@ -47,8 +47,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -57,7 +57,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -83,12 +83,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Twitch.js b/src/views/Publication/Services/Twitch.js
index fc97923..c580f46 100644
--- a/src/views/Publication/Services/Twitch.js
+++ b/src/views/Publication/Services/Twitch.js
@@ -50,8 +50,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -60,7 +60,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -159,12 +159,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Twitter.js b/src/views/Publication/Services/Twitter.js
index 2798c4a..7cce79e 100644
--- a/src/views/Publication/Services/Twitter.js
+++ b/src/views/Publication/Services/Twitter.js
@@ -72,8 +72,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -82,7 +82,7 @@ function Service(props) {
 
 		const outputs = createOutput(settings);
 
-		props.onChange(outputs, settings);
+		onChange(outputs, settings);
 	};
 
 	const createOutput = (settings) => {
@@ -133,7 +133,7 @@ function Service(props) {
 		return outputs;
 	};
 
-	const allowRTMPS = props.skills.protocols.includes('rtmps') && props.skills.formats.includes('flv');
+	const allowRTMPS = skills.protocols.includes('rtmps') && skills.formats.includes('flv');
 
 	return (
 		<Grid container spacing={2}>
@@ -183,12 +183,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/UDP.js b/src/views/Publication/Services/UDP.js
index 5826fbe..6e5dd9d 100644
--- a/src/views/Publication/Services/UDP.js
+++ b/src/views/Publication/Services/UDP.js
@@ -79,8 +79,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -97,7 +97,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -252,12 +252,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Vimeo.js b/src/views/Publication/Services/Vimeo.js
index fd43f5e..28006c8 100644
--- a/src/views/Publication/Services/Vimeo.js
+++ b/src/views/Publication/Services/Vimeo.js
@@ -45,8 +45,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -55,7 +55,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -76,12 +76,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/WOWZA.js b/src/views/Publication/Services/WOWZA.js
index 4cc7c43..b2b69b8 100644
--- a/src/views/Publication/Services/WOWZA.js
+++ b/src/views/Publication/Services/WOWZA.js
@@ -65,8 +65,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -78,7 +78,7 @@ function Service(props) {
 		}
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -184,12 +184,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Wettercom.js b/src/views/Publication/Services/Wettercom.js
index b6fb70d..018bb1a 100644
--- a/src/views/Publication/Services/Wettercom.js
+++ b/src/views/Publication/Services/Wettercom.js
@@ -14,7 +14,7 @@ const version = '1.0';
 const stream_key_link = 'https://www.wetter.com/hd-live-webcams/informationen/';
 const description = (
 	<Trans>
-		Transmit your Livestream to wetter.com. Contact the publisher {' '}
+		Transmit your Livestream to wetter.com. Contact the publisher{' '}
 		<Link color="secondary" target="_blank" href="https://www.wetter.com/hd-live-webcams/informationen/">
 			here{' '}
 		</Link>
@@ -58,8 +58,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -68,7 +68,7 @@ function Service(props) {
 
 		const output = createOutput(settings);
 
-		props.onChange([output], settings);
+		onChange([output], settings);
 	};
 
 	const createOutput = (settings) => {
@@ -111,12 +111,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/Services/Youtube.js b/src/views/Publication/Services/Youtube.js
index 747f12c..d1238c7 100644
--- a/src/views/Publication/Services/Youtube.js
+++ b/src/views/Publication/Services/Youtube.js
@@ -74,8 +74,8 @@ function init(settings) {
 	return initSettings;
 }
 
-function Service(props) {
-	const settings = init(props.settings);
+function Service({ settings = {}, skills = {}, metadata = {}, streams = [], onChange = function (output, settings) {} }) {
+	settings = init(settings);
 
 	const handleChange = (what) => (event) => {
 		const value = event.target.value;
@@ -88,7 +88,7 @@ function Service(props) {
 
 		const outputs = createOutput(settings);
 
-		props.onChange(outputs, settings);
+		onChange(outputs, settings);
 	};
 
 	const createOutput = (settings) => {
@@ -101,12 +101,12 @@ function Service(props) {
 		if (settings.mode === 'rtmps') {
 			let options = ['-f', 'flv'];
 
-			if (props.skills.ffmpeg.version_major >= 6) {
+			if (skills.ffmpeg.version_major >= 6) {
 				const codecs = [];
-				if (props.skills.codecs.video.includes('hevc')) {
+				if (skills.codecs.video.includes('hevc')) {
 					codecs.push('hvc1');
 				}
-				if (props.skills.codecs.video.includes('av1')) {
+				if (skills.codecs.video.includes('av1')) {
 					codecs.push('av01');
 				}
 
@@ -174,8 +174,8 @@ function Service(props) {
 		return outputs;
 	};
 
-	const allowRTMPS = props.skills.protocols.includes('rtmps') && props.skills.formats.includes('flv');
-	const allowHLS = props.skills.protocols.includes('https') && props.skills.formats.includes('hls');
+	const allowRTMPS = skills.protocols.includes('rtmps') && skills.formats.includes('flv');
+	const allowHLS = skills.protocols.includes('https') && skills.formats.includes('hls');
 
 	return (
 		<Grid container spacing={2}>
@@ -201,12 +201,4 @@ function Service(props) {
 	);
 }
 
-Service.defaultProps = {
-	settings: {},
-	skills: {},
-	metadata: {},
-	streams: [],
-	onChange: function (output, settings) {},
-};
-
 export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };
diff --git a/src/views/Publication/TabContent.js b/src/views/Publication/TabContent.js
index 93ebb39..688143c 100644
--- a/src/views/Publication/TabContent.js
+++ b/src/views/Publication/TabContent.js
@@ -21,34 +21,34 @@ const useStyles = makeStyles((theme) => ({
 	},
 }));
 
-export default function TabContent(props) {
+export default function TabContent({ service = null, children = '' }) {
 	const classes = useStyles();
 
 	return (
 		<Grid container spacing={2}>
 			<Grid item xs={12}>
 				<Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-					<props.service.icon className={classes.serviceIcon} />
+					<service.icon className={classes.serviceIcon} />
 					<Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
 						<Typography variant="h1" className={classes.serviceName}>
-							{props.service.name}
+							{service.name}
 						</Typography>
-						<Typography>v{props.service.version}</Typography>
+						<Typography>v{service.version}</Typography>
 					</Stack>
 				</Stack>
 			</Grid>
 			<Grid item xs={12}>
 				<Divider />
 			</Grid>
-			{props.children}
+			{children}
 			<Grid item xs={12}>
 				<Divider />
 			</Grid>
 			<Grid item xs={12}>
 				<Typography>
 					<Trans>Maintainer:</Trans>{' '}
-					<Link color="secondary" target="_blank" href={props.service.author.maintainer.link}>
-						{props.service.author.maintainer.name}
+					<Link color="secondary" target="_blank" href={service.author.maintainer.link}>
+						{service.author.maintainer.name}
 					</Link>
 				</Typography>
 			</Grid>
@@ -56,10 +56,6 @@ export default function TabContent(props) {
 	);
 }
 
-TabContent.defaultProps = {
-	service: null,
-};
-
 TabContent.propTypes = {
 	service: PropTypes.object.isRequired,
 };
diff --git a/src/views/Settings.js b/src/views/Settings.js
index 598641c..4f342ef 100644
--- a/src/views/Settings.js
+++ b/src/views/Settings.js
@@ -650,8 +650,8 @@ function ErrorTab(props) {
 	return <Tab label={label} {...other} />;
 }
 
-function ErrorBox(props) {
-	const messages = props.messages.filter((m) => props.configvalue === '' || m.configvalue === props.configvalue);
+function ErrorBox({ configvalue = '', messages = [] }) {
+	messages = messages.filter((m) => configvalue === '' || m.configvalue === configvalue);
 
 	if (messages.length === 0) {
 		return null;
@@ -671,11 +671,6 @@ function ErrorBox(props) {
 	);
 }
 
-ErrorBox.defaultProps = {
-	configvalue: '',
-	messages: [],
-};
-
 const toArray = (val, separator) => {
 	return val
 		.split(separator)
@@ -691,7 +686,7 @@ const toInt = (val) => {
 	return val;
 };
 
-export default function Settings(props) {
+export default function Settings({ restreamer = null }) {
 	const classes = useStyles();
 	const { i18n } = useLingui();
 	const navigate = useNavigate();
@@ -709,10 +704,10 @@ export default function Settings(props) {
 		core: '',
 		service: false,
 	});
-	const [$expert, setExpert] = React.useState(props.restreamer.IsExpert());
+	const [$expert, setExpert] = React.useState(restreamer.IsExpert());
 	const [$updates, setUpdates] = React.useState({
-		has: props.restreamer.HasUpdates(),
-		want: props.restreamer.CheckForUpdates(),
+		has: restreamer.HasUpdates(),
+		want: restreamer.CheckForUpdates(),
 	});
 	const [$tab, setTab] = React.useState(_tab ? _tab : 'general');
 	const [$tabs, setTabs] = React.useState({
@@ -757,14 +752,14 @@ export default function Settings(props) {
 	useInterval(() => {
 		setUpdates({
 			...$updates,
-			has: props.restreamer.HasUpdates(),
+			has: restreamer.HasUpdates(),
 		});
 	}, 1000 * 2);
 
 	const load = async () => {
-		setReloadKey(props.restreamer.CreatedAt().toISOString());
+		setReloadKey(restreamer.CreatedAt().toISOString());
 
-		const data = await props.restreamer.Config();
+		const data = await restreamer.Config();
 
 		let config = null;
 		let overrides = [];
@@ -814,17 +809,17 @@ export default function Settings(props) {
 			overrides: overrides,
 			outdated: outdated,
 			core: '',
-			service: props.restreamer.HasService(),
+			service: restreamer.HasService(),
 		});
 	};
 
 	const handleExpertMode = () => {
-		props.restreamer.SetExpert(!$expert);
+		restreamer.SetExpert(!$expert);
 		setExpert(!$expert);
 	};
 
 	const handleCheckForUpdates = () => {
-		props.restreamer.SetCheckForUpdates(!$updates.want);
+		restreamer.SetCheckForUpdates(!$updates.want);
 		setUpdates({
 			...$updates,
 			want: !$updates.want,
@@ -907,7 +902,7 @@ export default function Settings(props) {
 	};
 
 	const updateLogdata = async () => {
-		const logdata = await props.restreamer.Log();
+		const logdata = await restreamer.Log();
 		setLogdata(logdata.join('\n'));
 	};
 
@@ -994,7 +989,7 @@ export default function Settings(props) {
 
 		let outdated = $config.outdated;
 
-		const [, err] = await props.restreamer.ConfigSet(config);
+		const [, err] = await restreamer.ConfigSet(config);
 		if (err !== null) {
 			if (err.code === 404) {
 				notify.Dispatch('error', 'save:settings', i18n._(t`API endpoint not found. Settings not saved.`));
@@ -1103,7 +1098,7 @@ export default function Settings(props) {
 			timeout: false,
 		});
 
-		const res = await props.restreamer.ConfigReload();
+		const res = await restreamer.ConfigReload();
 		if (res === false) {
 			notify.Dispatch('error', 'restart', i18n._(t`Restarting the application failed.`));
 
@@ -1121,7 +1116,7 @@ export default function Settings(props) {
 			});
 		};
 
-		props.restreamer.IgnoreAPIErrors(true);
+		restreamer.IgnoreAPIErrors(true);
 
 		let restarted = false;
 
@@ -1130,7 +1125,7 @@ export default function Settings(props) {
 
 			let currentKey = $reloadKey;
 
-			const about = await props.restreamer.About();
+			const about = await restreamer.About();
 			if (about === null) {
 				// API is not yet available
 				continue;
@@ -1168,8 +1163,8 @@ export default function Settings(props) {
 			return false;
 		}
 
-		await props.restreamer.Validate();
-		await props.restreamer.Login($config.data.api.auth.username, $config.data.api.auth.password);
+		await restreamer.Validate();
+		await restreamer.Login($config.data.api.auth.username, $config.data.api.auth.password);
 
 		window.location.reload();
 
@@ -2314,10 +2309,6 @@ export default function Settings(props) {
 	);
 }
 
-Settings.defaultProps = {
-	restreamer: null,
-};
-
 Settings.propTypes = {
 	restreamer: PropTypes.object.isRequired,
 };
diff --git a/src/views/Welcome.js b/src/views/Welcome.js
index 5fbce1f..fcf8db5 100644
--- a/src/views/Welcome.js
+++ b/src/views/Welcome.js
@@ -11,7 +11,7 @@ import welcomeImage from '../assets/images/welcome.png';
 import Paper from '../misc/Paper';
 import PaperThumb from '../misc/PaperThumb';
 
-export default function Welcome(props) {
+export default function Welcome() {
 	const navigate = useNavigate();
 	const { channelid: _channelid } = useParams();