From a57cd63d818ca3e406f853df36b12efa426f756c Mon Sep 17 00:00:00 2001 From: Jan Stabenow Date: Tue, 24 Sep 2024 18:37:58 +0200 Subject: [PATCH] Add chip + small fixes --- src/misc/Player/videojs.js | 8 +++--- src/theme/components/chip.js | 34 +++++++++++++++++++++++++ src/theme/index.js | 2 ++ src/utils/restreamer.js | 2 +- src/views/Main/index.js | 49 +++++++++++++++++++++++++++++------- 5 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 src/theme/components/chip.js diff --git a/src/misc/Player/videojs.js b/src/misc/Player/videojs.js index 0bbb08d..502ebc2 100644 --- a/src/misc/Player/videojs.js +++ b/src/misc/Player/videojs.js @@ -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 diff --git a/src/theme/components/chip.js b/src/theme/components/chip.js new file mode 100644 index 0000000..4caa491 --- /dev/null +++ b/src/theme/components/chip.js @@ -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 }, + }, +}; diff --git a/src/theme/index.js b/src/theme/index.js index 75dcb6b..696730d 100644 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -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 }, diff --git a/src/utils/restreamer.js b/src/utils/restreamer.js index c4cbf88..c9a6e10 100644 --- a/src/utils/restreamer.js +++ b/src/utils/restreamer.js @@ -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') { diff --git a/src/views/Main/index.js b/src/views/Main/index.js index 35a3956..3188927 100644 --- a/src/views/Main/index.js +++ b/src/views/Main/index.js @@ -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 = {$state.progress.video_codec} - Main channel; + let title = Main channel; if (channel && channel.name && channel.name.length !== 0) { if ($state.progress.video_codec) { - title = `${$state.progress.video_codec} - ${channel.name}`; + title = ( + <> + {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} > @@ -342,7 +347,7 @@ export default function Main(props) { className={classes.playerL3} justifyContent="center" alignItems="center" - spacing={1} + spacing={2} > @@ -361,7 +366,7 @@ export default function Main(props) { className={classes.playerL3} justifyContent="center" alignItems="center" - spacing={1} + spacing={2} > @@ -397,7 +402,7 @@ export default function Main(props) { )} )} - {$state.state === 'connected' && $state.progress.video_codec === 'h264' && ( + {$state.state === 'connected' && $state.progress.video_codec === 'h264'&& !$metadata.control.preview.enable && ( )} {$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} > @@ -420,14 +426,39 @@ export default function Main(props) { No H.264 Stream availabe. - + Please{' '} navigate(`/${_channelid}/edit`)}> edit {' '} - 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. + + + + + )} + {$state.state === 'connected' && $state.progress.video_codec === 'h264' && $metadata.control.preview.enable && ( + + + + + + + + Please{' '} + navigate(`/${_channelid}/edit`)}> + edit + {' '} + this channel and disable the second H.264 stream in the "Processing & Control" area.