Allow specify object fit for mjpeg widget

This commit is contained in:
shamoon 2023-08-06 07:33:08 -07:00
parent ba19f77b8f
commit f8c382c480
2 changed files with 4 additions and 2 deletions

View File

@ -297,6 +297,7 @@ export function cleanServiceGroups(groups) {
repositoryId, repositoryId,
metric, // glances metric, // glances
stream, // mjpeg stream, // mjpeg
fit,
} = cleanedService.widget; } = cleanedService.widget;
let fieldsList = fields; let fieldsList = fields;
@ -365,6 +366,7 @@ export function cleanServiceGroups(groups) {
} }
if (type === "mjpeg") { if (type === "mjpeg") {
if (stream) cleanedService.widget.stream = stream; if (stream) cleanedService.widget.stream = stream;
if (fit) cleanedService.widget.fit = fit;
} }
} }

View File

@ -2,13 +2,13 @@ import Image from "next/image";
export default function Component({ service }) { export default function Component({ service }) {
const { widget } = service; const { widget } = service;
const { stream } = widget; const { stream, fit = "contain" } = widget;
return ( return (
<div> <div>
<div className="absolute top-0 bottom-0 right-0 left-0"> <div className="absolute top-0 bottom-0 right-0 left-0">
<Image layout="fill" objectFit="fill" className="blur-md" src={stream} alt="stream" /> <Image layout="fill" objectFit="fill" className="blur-md" src={stream} alt="stream" />
<Image layout="fill" objectFit="contain" className="drop-shadow-2xl" src={stream} alt="stream" /> <Image layout="fill" objectFit={fit} className="drop-shadow-2xl" src={stream} alt="stream" />
</div> </div>
<div className="absolute top-0 right-0 bottom-0 left-0 overflow-clip shadow-[inset_0_0_200px_#000] shadow-theme-700/10 dark:shadow-theme-900/10" /> <div className="absolute top-0 right-0 bottom-0 left-0 overflow-clip shadow-[inset_0_0_200px_#000] shadow-theme-700/10 dark:shadow-theme-900/10" />
<div className="h-[68px] overflow-clip" /> <div className="h-[68px] overflow-clip" />