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

Fix publication service icon styles

Browse Source
This commit is contained in:
Jan Stabenow 2022-06-21 22:42:21 +02:00
parent fbe9d91eed
commit ed3d67f33a
No known key found for this signature in database
GPG Key ID: 9C22DD65A9AAF133
13 changed files with 139 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -1,10 +1,11 @@
# Restreamer-UI
#### v1.1.0 > v1.3.1
#### v1.1.0 > v1.3.2
- Add Owncast to publication services
- Add Telegram to publication services
- Fix VAAPI encoder
- Add Owncast to publication services ([#369](https://github.com/datarhei/restreamer/issues/369))
- Add Telegram to publication services (thx Martin Held)
- Fix publication service icon styles
- Fix VAAPI encoder
#### v1.0.0 > v1.1.0

5
src/views/Main/Egress.js
View File

@ -29,6 +29,11 @@ const useStyles = makeStyles((theme) => ({
minWidth: 30,
marginRight: 6,
float: 'left',
'& img': {
maxWidth: 22,
maxHeight: 22,
marginBottom: '0!important',
},
},
'& .egress-right-edit': {
float: 'right',

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

@ -13,6 +13,7 @@ import CircularProgress from '@mui/material/CircularProgress';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import TextField from '@mui/material/TextField';
@ -49,6 +50,9 @@ const useStyles = makeStyles((theme) => ({
maxHeight: 64,
marginTop: '-0.065em',
},
serviceName: {
marginTop: '-.2rem',
},
buttonGroup: {
marginTop: '0.5em',
marginBottom: '-0.5em',
@ -375,12 +379,24 @@ export default function Add(props) {
</Tabs>
<TabPanel value={$tab} index="general" className="panel">
<Grid container spacing={2}>
<Grid item xs={12} md={2}>
<ServiceIcon className={classes.serviceIcon} />
</Grid>
<Grid item xs={12} md={10}>
<Typography variant="h1">{service.name}</Typography>
<Typography>v{service.version}</Typography>
<Grid item xs={12}>
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
>
<ServiceIcon className={classes.serviceIcon} />
<Stack
direction="column"
justifyContent="center"
alignItems="flex-start"
spacing={0}
>
<Typography variant="h1" className={classes.serviceName}>{service.name}</Typography>
<Typography>v{service.version}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} className={classes.serviceDescription}>
<Typography>{service.description}</Typography>
@ -418,12 +434,24 @@ export default function Add(props) {
</TabPanel>
<TabPanel value={$tab} index="process" className="panel">
<Grid container spacing={2}>
<Grid item xs={12} md={2}>
<ServiceIcon className={classes.serviceIcon} />
</Grid>
<Grid item xs={12} md={10}>
<Typography variant="h1">{service.name}</Typography>
<Typography>v{service.version}</Typography>
<Grid item xs={12}>
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
>
<ServiceIcon className={classes.serviceIcon} />
<Stack
direction="column"
justifyContent="center"
alignItems="flex-start"
spacing={0}
>
<Typography variant="h1" className={classes.serviceName}>{service.name}</Typography>
<Typography>v{service.version}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12}>
<Divider />
@ -451,12 +479,24 @@ export default function Add(props) {
</TabPanel>
<TabPanel value={$tab} index="encoding" className="panel">
<Grid container spacing={2}>
<Grid item xs={12} md={2}>
<ServiceIcon className={classes.serviceIcon} />
</Grid>
<Grid item xs={12} md={10}>
<Typography variant="h1">{service.name}</Typography>
<Typography>v{service.version}</Typography>
<Grid item xs={12}>
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
>
<ServiceIcon className={classes.serviceIcon} />
<Stack
direction="column"
justifyContent="center"
alignItems="flex-start"
spacing={0}
>
<Typography variant="h1" className={classes.serviceName}>{service.name}</Typography>
<Typography>v{service.version}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12}>
<Divider />

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

@ -11,6 +11,7 @@ import CircularProgress from '@mui/material/CircularProgress';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import TextField from '@mui/material/TextField';
@ -52,6 +53,9 @@ const useStyles = makeStyles((theme) => ({
maxHeight: 64,
marginTop: '-0.065em',
},
serviceName: {
marginTop: '-.2rem',
},
}));
export default function Edit(props) {
@ -389,12 +393,24 @@ export default function Edit(props) {
</Tabs>
<TabPanel value={$tab} index="general" className="panel">
<Grid container spacing={2}>
<Grid item xs={12} md={2}>
<ServiceIcon className={classes.serviceIcon} />
</Grid>
<Grid item xs={12} md={10}>
<Typography variant="h1">{$service.name}</Typography>
<Typography>v{$service.version}</Typography>
<Grid item xs={12}>
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
>
<ServiceIcon className={classes.serviceIcon} />
<Stack
direction="column"
justifyContent="center"
alignItems="flex-start"
spacing={0}
>
<Typography variant="h1" className={classes.serviceName}>{$service.name}</Typography>
<Typography>v{$service.version}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} className={classes.serviceDescription}>
<Typography>{$service.description}</Typography>
@ -426,15 +442,27 @@ export default function Edit(props) {
</TabPanel>
<TabPanel value={$tab} index="process" className="panel">
<Grid container spacing={2}>
<Grid item xs={12} md={2}>
<ServiceIcon className={classes.serviceIcon} />
<Grid item xs={12}>
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
>
<ServiceIcon className={classes.serviceIcon} />
<Stack
direction="column"
justifyContent="center"
alignItems="flex-start"
spacing={0}
>
<Typography variant="h1" className={classes.serviceName}>{$service.name}</Typography>
<Typography>v{$service.version}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} md={10}>
<Typography variant="h1">{$service.name}</Typography>
<Typography>v{$service.version}</Typography>
</Grid>
<Grid item xs={12} className={classes.serviceDescription}>
<Typography>{$service.description}</Typography>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12}>
<Typography variant="h2">
@ -446,9 +474,6 @@ export default function Edit(props) {
</Grid>
<Grid item xs={12}>
<Grid container spacing={1} className={classes.gridContainer}>
<Grid item xs={12}>
<Divider />
</Grid>
{$unsavedChanges === true && (
<Grid item xs={12}>
<BoxText>
@ -490,15 +515,27 @@ export default function Edit(props) {
</TabPanel>
<TabPanel value={$tab} index="encoding" className="panel">
<Grid container spacing={2}>
<Grid item xs={12} md={2}>
<ServiceIcon className={classes.serviceIcon} />
<Grid item xs={12}>
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
>
<ServiceIcon className={classes.serviceIcon} />
<Stack
direction="column"
justifyContent="center"
alignItems="flex-start"
spacing={0}
>
<Typography variant="h1" className={classes.serviceName}>{$service.name}</Typography>
<Typography>v{$service.version}</Typography>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} md={10}>
<Typography variant="h1">{$service.name}</Typography>
<Typography>v{$service.version}</Typography>
</Grid>
<Grid item xs={12} className={classes.serviceDescription}>
<Typography>{$service.description}</Typography>
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12}>
<Typography variant="h2">

2
src/views/Publication/Services/Bitmovin.js
View File

@ -42,7 +42,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="Bitmovin Logo" style={{ marginBottom: '-6px' }} {...props} />;
return <img src={Logo} alt="Bitmovin Logo" {...props} />;
}
function init(settings) {

2
src/views/Publication/Services/CDN77.js
View File

@ -42,7 +42,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="DaCast Logo" style={{ marginBottom: '-6px' }} {...props} />;
return <img src={Logo} alt="DaCast Logo" {...props} />;
}
function init(settings) {

2
src/views/Publication/Services/Core.js
View File

@ -45,7 +45,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="datarhei.com Logo" style={{ marginBottom: '-6px' }} {...props} />;
return <img src={Logo} alt="datarhei.com Logo" {...props} />;
}
function init(settings) {

2
src/views/Publication/Services/DaCast.js
View File

@ -45,7 +45,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="DaCast Logo" style={{ marginBottom: '-6px' }} {...props} />;
return <img src={Logo} alt="DaCast Logo" {...props} />;
}
function init(settings) {

2
src/views/Publication/Services/Icecast.js
View File

@ -48,7 +48,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="Icecat Logo" style={{ marginBottom: '-7px' }} {...props} />;
return <img src={Logo} alt="Icecat Logo" {...props} />;
}
function init(settings, metadata) {

2
src/views/Publication/Services/Livespotting.js
View File

@ -42,7 +42,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="livespotting.com Logo" style={{ marginBottom: '-6px' }} {...props} />;
return <img src={Logo} alt="livespotting.com Logo" {...props} />;
}
function init(settings) {

2
src/views/Publication/Services/Red5.js
View File

@ -44,7 +44,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="Red5 Logo" style={{ marginBottom: '-7px' }} {...props} />;
return <img src={Logo} alt="Red5 Logo" {...props} />;
}
function init(settings) {

2
src/views/Publication/Services/Restream.js
View File

@ -45,7 +45,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="restream.io Logo" style={{ marginBottom: '-6px' }} {...props} />;
return <img src={Logo} alt="restream.io Logo" {...props} />;
}
function init(settings) {

2
src/views/Publication/Services/WOWZA.js
View File

@ -47,7 +47,7 @@ const requires = {
};
function ServiceIcon(props) {
return <img src={Logo} alt="wowza.com Logo" style={{ marginBottom: '-7px' }} {...props} />;
return <img src={Logo} alt="wowza.com Logo" {...props} />;
}
function init(settings) {