Add chip + small fixes
This commit is contained in:
Jan Stabenow
parent
c3632068a6
commit
a57cd63d81
@ -42,13 +42,10 @@ export default function VideoJS(props) {
|
||||
player.addClass('video-js');
|
||||
player.addClass('vjs-16-9');
|
||||
|
||||
// retry on MEDIA_ERR_NETWORK = 2
|
||||
let retry_count = 0;
|
||||
// retry on MEDIA_ERR_NETWORK = 2 || 4
|
||||
player.on('error', () => {
|
||||
const error = player.error();
|
||||
console.log(error);
|
||||
if (error && (error.code === 2 || error.code === 4) && retry_count < 10) {
|
||||
retry_count += 1;
|
||||
if (error && (error.code === 2 || error.code === 4)) {
|
||||
setTimeout(retryVideo, 2000);
|
||||
}
|
||||
});
|
||||
@ -58,6 +55,7 @@ export default function VideoJS(props) {
|
||||
// player.autoplay(options.autoplay);
|
||||
// player.src(options.sources);
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [options, videoRef, onReady, props.type]);
|
||||
|
||||
// Dispose the Video.js player when the functional component unmounts
|
||||
|
||||
34
src/theme/components/chip.js
Normal file
34
src/theme/components/chip.js
Normal file
@ -0,0 +1,34 @@
|
||||
/* eslint-disable import/no-anonymous-default-export */
|
||||
import base from '../base';
|
||||
|
||||
const root = {
|
||||
textAlign: 'center',
|
||||
textTransform: 'uppercase',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
const outlined = {
|
||||
base: {
|
||||
borderRadius: 4,
|
||||
border: 'unset',
|
||||
height: 'auto',
|
||||
'& .MuiChip-label': {
|
||||
padding: '.1em .7em .1em .7em',
|
||||
margin: 0,
|
||||
fontSize: '.9rem'
|
||||
},
|
||||
marginRight: '.5em'
|
||||
},
|
||||
primary: {
|
||||
color: base.palette.text.primary,
|
||||
backgroundColor: base.palette.background.box_default,
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
styleOverrides: {
|
||||
root: { ...root },
|
||||
outlined: { ...outlined.base },
|
||||
outlinedPrimary: { ...outlined.primary },
|
||||
},
|
||||
};
|
||||
@ -11,6 +11,7 @@ import backdrop from './components/backdrop';
|
||||
import box from './components/box';
|
||||
import button from './components/button';
|
||||
import checkobox from './components/checkbox';
|
||||
import chip from './components/chip';
|
||||
import ctypography from './components/typography';
|
||||
import dialog from './components/dialog';
|
||||
import divider from './components/divider';
|
||||
@ -58,6 +59,7 @@ const theme = createTheme({
|
||||
MuiBox: { ...box },
|
||||
MuiButton: { ...button },
|
||||
MuiCheckbox: { ...checkobox },
|
||||
MuiChip: { ...chip },
|
||||
MuiDialog: { ...dialog },
|
||||
MuiDivider: { ...divider },
|
||||
MuiFab: { ...fab },
|
||||
|
||||
@ -1767,7 +1767,7 @@ class Restreamer {
|
||||
];
|
||||
}
|
||||
};
|
||||
const hls_params_raw = getHLSParams(control.hls.lhls, control.hls.version);
|
||||
const hls_params_raw = getHLSParams(control.hls.version);
|
||||
|
||||
// 3.3 Use strftime for DiskFS
|
||||
if (control.hls.storage && control.hls.storage === 'diskfs') {
|
||||
|
||||
@ -3,6 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { Trans } from '@lingui/macro';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Link from '@mui/material/Link';
|
||||
@ -300,10 +301,14 @@ export default function Main(props) {
|
||||
const manifest_preview = props.restreamer.GetChannelAddress('hls+' + storage, `${_channelid}_h264`);
|
||||
const poster = props.restreamer.GetChannelAddress('snapshot+' + storage, _channelid);
|
||||
|
||||
let title = <Trans>{$state.progress.video_codec} - Main channel</Trans>;
|
||||
let title = <Trans>Main channel</Trans>;
|
||||
if (channel && channel.name && channel.name.length !== 0) {
|
||||
if ($state.progress.video_codec) {
|
||||
title = `${$state.progress.video_codec} - ${channel.name}`;
|
||||
title = (
|
||||
<>
|
||||
<Chip variant="outlined" color="primary" label={$state.progress.video_codec} /> {channel.name}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
title = `${channel.name}`;
|
||||
}
|
||||
@ -326,7 +331,7 @@ export default function Main(props) {
|
||||
className={classes.playerL3}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
spacing={1}
|
||||
spacing={2}
|
||||
>
|
||||
<Grid item>
|
||||
<Typography variant="h2">
|
||||
@ -342,7 +347,7 @@ export default function Main(props) {
|
||||
className={classes.playerL3}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
spacing={1}
|
||||
spacing={2}
|
||||
>
|
||||
<Grid item>
|
||||
<CircularProgress color="inherit" />
|
||||
@ -361,7 +366,7 @@ export default function Main(props) {
|
||||
className={classes.playerL3}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
spacing={1}
|
||||
spacing={2}
|
||||
>
|
||||
<Grid item>
|
||||
<WarningIcon className={classes.playerWarningIcon} />
|
||||
@ -397,7 +402,7 @@ export default function Main(props) {
|
||||
)}
|
||||
</Grid>
|
||||
)}
|
||||
{$state.state === 'connected' && $state.progress.video_codec === 'h264' && (
|
||||
{$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 && (
|
||||
@ -410,7 +415,8 @@ export default function Main(props) {
|
||||
className={classes.playerL3}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
spacing={1}
|
||||
textAlign={"center"}
|
||||
spacing={2}
|
||||
>
|
||||
<Grid item>
|
||||
<WarningIcon className={classes.playerWarningIcon} />
|
||||
@ -420,14 +426,39 @@ export default function Main(props) {
|
||||
<Trans>No H.264 Stream availabe.</Trans>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item textAlign={'center'}>
|
||||
<Grid item>
|
||||
<Typography>
|
||||
<Trans>
|
||||
Please{' '}
|
||||
<Link style={{ textDecoration: 'underline' }} onClick={() => navigate(`/${_channelid}/edit`)}>
|
||||
edit
|
||||
</Link>{' '}
|
||||
this channel and enable the browser-compatible H.264 stream in the "Processing & Control" area:
|
||||
this channel and enable the browser-compatible H.264 stream in the "Processing & Control" area.
|
||||
</Trans>
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
{$state.state === 'connected' && $state.progress.video_codec === 'h264' && $metadata.control.preview.enable && (
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
className={classes.playerL3}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
spacing={2}
|
||||
>
|
||||
<Grid item>
|
||||
<WarningIcon className={classes.playerWarningIcon} />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography>
|
||||
<Trans>
|
||||
Please{' '}
|
||||
<Link style={{ textDecoration: 'underline' }} onClick={() => navigate(`/${_channelid}/edit`)}>
|
||||
edit
|
||||
</Link>{' '}
|
||||
this channel and disable the second H.264 stream in the "Processing & Control" area.
|
||||
</Trans>
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user