Mod uses params instead of defaultProps

datarhei · Sep 26, 2024 · ee50071 · ee50071
1 parent 2ecf252
commit ee50071
Show file tree

Hide file tree

Showing 211 changed files with 2,221 additions and 3,654 deletions.
diff --git 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,22 +365,29 @@ 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}>
 					<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={0}>
 						<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
@@ -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
@@ -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
@@ -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
@@ -25,5 +25,5 @@ createRoot(document.getElementById('root')).render(
 			<CssBaseline />
 			<RestreamerUI address={address} />
 		</ThemeProvider>
-	</StyledEngineProvider>
+	</StyledEngineProvider>,
 );