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

Fix warnings navigating away during component mount

Browse Source
This commit is contained in:
Ingo Oppermann 2022-11-10 16:43:57 +01:00
parent 4ec02d1b2d
commit 731d4a93d8
No known key found for this signature in database
GPG Key ID: 2AB32426E9DD229E
6 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/Edit/Wizard/index.js
View File

@ -54,6 +54,7 @@ export default function Wizard(props) {
step: 'TYPE',
});
const [$ready, setReady] = React.useState(false);
const [$invalid, setInvalid] = React.useState(false);
React.useEffect(() => {
(async () => {
@ -62,10 +63,16 @@ export default function Wizard(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if ($invalid === true) {
navigate('/', { replace: true });
}
}, [navigate, $invalid]);
const load = async () => {
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
setInvalid(true);
return;
}

15
src/views/Edit/index.js
View File

@ -78,6 +78,7 @@ export default function Edit(props) {
target: '',
what: '',
});
const [$invalid, setInvalid] = React.useState(false);
React.useEffect(() => {
(async () => {
@ -86,10 +87,16 @@ export default function Edit(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if ($invalid === true) {
navigate('/', { replace: true });
}
}, [navigate, $invalid]);
const load = async () => {
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
setInvalid(true);
return;
}
@ -383,12 +390,6 @@ export default function Edit(props) {
return null;
}
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
return null;
}
let title = <Trans>Main Source</Trans>;
if ($data.meta.name.length !== '') {
title = $data.meta.name;

18
src/views/Main/index.js
View File

@ -58,6 +58,7 @@ const useStyles = makeStyles((theme) => ({
export default function Main(props) {
const classes = useStyles();
const navigate = useNavigate();
const { channelid: _channelid } = useParams();
const [$state, setState] = React.useState({
ready: false,
@ -80,8 +81,7 @@ export default function Main(props) {
data: '',
});
const [$config, setConfig] = React.useState(null);
const navigate = useNavigate();
const [$invalid, setInvalid] = React.useState(false);
useInterval(async () => {
await update();
@ -95,6 +95,12 @@ export default function Main(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if ($invalid === true) {
navigate('/', { replace: true });
}
}, [navigate, $invalid]);
const load = async () => {
const config = props.restreamer.ConfigActive();
setConfig(config);
@ -111,7 +117,7 @@ export default function Main(props) {
const update = async () => {
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
setInvalid(true);
return;
}
@ -275,12 +281,6 @@ export default function Main(props) {
return <Welcome />;
}
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
return null;
}
const storage = $metadata.control.hls.storage;
const channel = props.restreamer.GetChannel(_channelid);
const manifest = props.restreamer.GetChannelAddress('hls+' + storage, _channelid);

16
src/views/Publication/Add.js
View File

@ -53,6 +53,7 @@ export default function Add(props) {
const classes = useStyles();
const { i18n } = useLingui();
const navigate = useNavigate();
const [$ready, setReady] = React.useState(false);
const { channelid: _channelid } = useParams();
const notify = React.useContext(NotifyContext);
const [$service, setService] = React.useState('');
@ -68,6 +69,7 @@ export default function Add(props) {
license: '',
});
const [$saving, setSaving] = React.useState(false);
const [$invalid, setInvalid] = React.useState(false);
React.useEffect(() => {
(async () => {
@ -76,10 +78,16 @@ export default function Add(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if ($invalid === true) {
navigate('/', { replace: true });
}
}, [navigate, $invalid]);
const load = async () => {
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
setInvalid(true);
return;
}
@ -109,6 +117,8 @@ export default function Add(props) {
setLocalSources(localSources);
setSources(helper.createSourcesFromStreams(ingest.streams));
setReady(true);
};
const handleFilterChange = (event, value) => {
@ -239,9 +249,7 @@ export default function Add(props) {
H(topic);
};
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
if ($ready === false) {
return null;
}

19
src/views/Publication/Edit.js
View File

@ -83,6 +83,7 @@ export default function Edit(props) {
const [$saving, setSaving] = React.useState(false);
const [$service, setService] = React.useState(null);
const [$serviceSkills, setServiceSkills] = React.useState(null);
const [$invalid, setInvalid] = React.useState('');
useInterval(async () => {
await update(false);
@ -95,17 +96,23 @@ export default function Edit(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if ($invalid.length !== 0) {
navigate($invalid, { replace: true });
}
}, [navigate, $invalid]);
const update = async (isFirst) => {
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
setInvalid('/');
return;
}
const proc = await props.restreamer.GetEgress(_channelid, id, ['state']);
if (proc === null) {
notify.Dispatch('warning', 'notfound:egress:' + _service, i18n._(t`Publication service not found`));
navigate(`/${_channelid}`);
setInvalid(`/${_channelid}`);
return;
}
@ -115,7 +122,7 @@ export default function Edit(props) {
const s = Services.Get(_service);
if (s === null) {
notify.Dispatch('warning', 'notfound:egress:' + _service, i18n._(t`Publication service not found`));
navigate(`/${_channelid}/`);
setInvalid(`/${_channelid}/`);
return null;
}
@ -365,12 +372,6 @@ export default function Edit(props) {
return null;
}
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
return null;
}
const ServiceControl = $service.component;
const title = $settings.name.length === 0 ? $service.name : $settings.name;

17
src/views/Publication/Player.js
View File

@ -79,6 +79,7 @@ export default function Edit(props) {
title: '',
message: '',
});
const [$invalid, setInvalid] = React.useState('');
React.useEffect(() => {
(async () => {
@ -87,17 +88,23 @@ export default function Edit(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if ($invalid.length !== 0) {
navigate($invalid, { replace: true });
}
}, [navigate, $invalid]);
const mount = async () => {
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
setInvalid('/');
return;
}
const proc = await props.restreamer.GetIngest(channelid, ['state', 'metadata']);
if (proc === null) {
notify.Dispatch('warning', 'notfound:ingest', i18n._(t`Main channel not found`));
navigate(`/${_channelid}/`);
setInvalid(`/${_channelid}/`);
return;
}
@ -306,12 +313,6 @@ export default function Edit(props) {
return null;
}
const channelid = props.restreamer.SelectChannel(_channelid);
if (channelid === '' || channelid !== _channelid) {
navigate('/', { replace: true });
return null;
}
const storage = $metadata.control.hls.storage;
const manifest = props.restreamer.GetChannelAddress('hls+' + storage, _channelid);
const poster = props.restreamer.GetChannelAddress('snapshot+' + storage, _channelid);