Add iframe widget

src/utils/config/service-helpers.js

@@ -366,6 +366,14 @@ export function cleanServiceGroups(groups) {
           firstDayInWeek,
           view,
           maxEvents,
+          src,
+          sizes,
+          referrerPolicy,
+          allowPolicy,
+          allowFullscreen,
+          loadingStrategy,
+          allowScrolling,
+          border
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -413,6 +421,17 @@ export function cleanServiceGroups(groups) {
           if (app) cleanedService.widget.app = app;
           if (podSelector) cleanedService.widget.podSelector = podSelector;
         }
+        if (type === "iframe") {
+          if (src) cleanedService.widget.src = src
+          if (src) cleanedService.widget.sizes = sizes
+          if (src) cleanedService.widget.referrerPolicy = referrerPolicy
+          if (src) cleanedService.widget.allowPolicy = allowPolicy
+          if (src) cleanedService.widget.allowFullscreen = allowFullscreen
+          if (src) cleanedService.widget.loadingStrategy = loadingStrategy
+          if (src) cleanedService.widget.allowScrolling = allowScrolling
+          if (src) cleanedService.widget.border = border
+          if (src) cleanedService.widget.refreshInterval = refreshInterval
+        }
         if (["opnsense", "pfsense"].includes(type)) {
           if (wan) cleanedService.widget.wan = wan;
         }

src/widgets/components.js

@@ -15,6 +15,7 @@ const components = {
   channelsdvrserver: dynamic(() => import("./channelsdvrserver/component")),
   cloudflared: dynamic(() => import("./cloudflared/component")),
   coinmarketcap: dynamic(() => import("./coinmarketcap/component")),
+  iframe: dynamic(() => import("./iframe/component")),
   customapi: dynamic(() => import("./customapi/component")),
   deluge: dynamic(() => import("./deluge/component")),
   diskstation: dynamic(() => import("./diskstation/component")),

src/widgets/iframe/component.jsx

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+
+import Block from "./components/block";
+
+import Container from "components/services/widget/container";
+
+export default function Component({ service }) {
+  const [refreshTimer, setRefreshTimer] = useState(0);
+
+  const { widget } = service;
+  useEffect(() => {
+    const refreshInterval = setInterval(
+      () => {setRefreshTimer(refreshTimer + 1)},
+      widget?.refreshInterval
+    );
+    return () => clearInterval(refreshInterval)
+  }, [refreshTimer]);
+
+  const scrollingDisableStyle = widget.scrolling
+    ? "pointer-events:none; overflow: hidden;"
+    : "";
+
+  return (
+    <Container service={service}>
+      <Block>
+        <iframe
+          src={widget.src}
+          id={refreshTimer}
+          key={refreshTimer}
+          title="Iframe"
+          allow={widget?.allowPolicy}
+          allowfullscreen={widget?.allowfullscreen}
+          referrerpolicy={widget?.referrerPolicy}
+          loading={widget?.loadingStrategy}
+          scrolling={widget?.allowScrolling}
+          frameBorder={widget?.border}
+          style={{ width: "100%", scrollingDisableStyle }}
+          className={`h-${widget.sizes?.xs} sm:h-${widget.sizes?.sm} md:h-${widget.sizes?.md} lg:h-${widget.sizes?.lg} xl:h-${widget.sizes?.xl} 2xl:h-${widget.sizes?.["2xl"]} ${scrollingDisableStyle}`}
+        />
+      </Block>
+    </Container>
+  );
+}

src/widgets/iframe/components/block.jsx

@@ -0,0 +1,14 @@
+import classNames from "classnames";
+
+export default function Block({ children }) {
+  return (
+    <div
+      className={classNames(
+        "bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center text-center p-1",
+        "service-block"
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src/widgets/iframe/widget.js

@@ -0,0 +1,4 @@
+const widget = {
+};
+
+export default widget;