From ba19f77b8fe7d29c3d96f6447aee28f424ab1828 Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Sun, 6 Aug 2023 14:21:01 +0300
Subject: [PATCH 1/2] add mjpeg stream widget

---
 src/utils/config/service-helpers.js |  4 ++++
 src/widgets/components.js           |  1 +
 src/widgets/mjpeg/component.jsx     | 17 +++++++++++++++++
 src/widgets/mjpeg/widget.js         |  8 ++++++++
 src/widgets/widgets.js              |  2 ++
 5 files changed, 32 insertions(+)
 create mode 100644 src/widgets/mjpeg/component.jsx
 create mode 100644 src/widgets/mjpeg/widget.js

diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js
index 1e241e463..901ae5f62 100644
--- a/src/utils/config/service-helpers.js
+++ b/src/utils/config/service-helpers.js
@@ -296,6 +296,7 @@ export function cleanServiceGroups(groups) {
           userEmail, // azuredevops
           repositoryId,
           metric, // glances
+          stream, // mjpeg
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -362,6 +363,9 @@ export function cleanServiceGroups(groups) {
         if (type === "glances") {
           if (metric) cleanedService.widget.metric = metric;
         }
+        if (type === "mjpeg") {
+          if (stream) cleanedService.widget.stream = stream;
+        }
       }
 
       return cleanedService;
diff --git a/src/widgets/components.js b/src/widgets/components.js
index 851322e7c..0db4878c9 100644
--- a/src/widgets/components.js
+++ b/src/widgets/components.js
@@ -46,6 +46,7 @@ const components = {
   minecraft: dynamic(() => import("./minecraft/component")),
   miniflux: dynamic(() => import("./miniflux/component")),
   mikrotik: dynamic(() => import("./mikrotik/component")),
+  mjpeg: dynamic(() => import("./mjpeg/component")),
   moonraker: dynamic(() => import("./moonraker/component")),
   mylar: dynamic(() => import("./mylar/component")),
   navidrome: dynamic(() => import("./navidrome/component")),
diff --git a/src/widgets/mjpeg/component.jsx b/src/widgets/mjpeg/component.jsx
new file mode 100644
index 000000000..dd29f0a5d
--- /dev/null
+++ b/src/widgets/mjpeg/component.jsx
@@ -0,0 +1,17 @@
+import Image from "next/image";
+
+export default function Component({ service }) {
+  const { widget } = service;
+  const { stream } = widget;
+
+  return (
+    <div>
+      <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="contain" className="drop-shadow-2xl" src={stream} alt="stream" />
+      </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="h-[68px] overflow-clip" />
+    </div>
+  );
+}
diff --git a/src/widgets/mjpeg/widget.js b/src/widgets/mjpeg/widget.js
new file mode 100644
index 000000000..400c33a65
--- /dev/null
+++ b/src/widgets/mjpeg/widget.js
@@ -0,0 +1,8 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/{endpoint}",
+  proxyHandler: genericProxyHandler,
+};
+
+export default widget;
diff --git a/src/widgets/widgets.js b/src/widgets/widgets.js
index 41a31253a..d28f3b38c 100644
--- a/src/widgets/widgets.js
+++ b/src/widgets/widgets.js
@@ -40,6 +40,7 @@ import medusa from "./medusa/widget";
 import minecraft from "./minecraft/widget";
 import miniflux from "./miniflux/widget";
 import mikrotik from "./mikrotik/widget";
+import mjpeg from "./mjpeg/widget";
 import moonraker from "./moonraker/widget";
 import mylar from "./mylar/widget";
 import navidrome from "./navidrome/widget";
@@ -134,6 +135,7 @@ const widgets = {
   minecraft,
   miniflux,
   mikrotik,
+  mjpeg,
   moonraker,
   mylar,
   navidrome,

From f8c382c480c67b5549d10936981c393f6d395234 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 6 Aug 2023 07:33:08 -0700
Subject: [PATCH 2/2] Allow specify object fit for mjpeg widget

---
 src/utils/config/service-helpers.js | 2 ++
 src/widgets/mjpeg/component.jsx     | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js
index 901ae5f62..83b4b07bc 100644
--- a/src/utils/config/service-helpers.js
+++ b/src/utils/config/service-helpers.js
@@ -297,6 +297,7 @@ export function cleanServiceGroups(groups) {
           repositoryId,
           metric, // glances
           stream, // mjpeg
+          fit,
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -365,6 +366,7 @@ export function cleanServiceGroups(groups) {
         }
         if (type === "mjpeg") {
           if (stream) cleanedService.widget.stream = stream;
+          if (fit) cleanedService.widget.fit = fit;
         }
       }
 
diff --git a/src/widgets/mjpeg/component.jsx b/src/widgets/mjpeg/component.jsx
index dd29f0a5d..30907c311 100644
--- a/src/widgets/mjpeg/component.jsx
+++ b/src/widgets/mjpeg/component.jsx
@@ -2,13 +2,13 @@ import Image from "next/image";
 
 export default function Component({ service }) {
   const { widget } = service;
-  const { stream } = widget;
+  const { stream, fit = "contain" } = widget;
 
   return (
     <div>
       <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="contain" className="drop-shadow-2xl" src={stream} alt="stream" />
+        <Image layout="fill" objectFit={fit} className="drop-shadow-2xl" src={stream} alt="stream" />
       </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="h-[68px] overflow-clip" />