feat: add video widget (#287)

* feat: add nestjs replacement, remove nestjs

* feat: add video widget

* feat: add notice about youtube not supported with video.js

* fix: format issue

* fix: format issue

packages/definitions/src/widget.ts

@@ -1,2 +1,2 @@
-export const widgetKinds = ["clock", "weather", "app"] as const;
+export const widgetKinds = ["clock", "weather", "app", "video"] as const;
 export type WidgetKind = (typeof widgetKinds)[number];

packages/translation/src/lang/en.ts

@@ -202,6 +202,7 @@ export default {
       confirm: "Confirm",
       previous: "Previous",
       next: "Next",
+      checkoutDocs: "Check out the documentation",
     },
     multiSelect: {
       placeholder: "Pick one or more values",
@@ -435,6 +436,30 @@ export default {
         },
       },
     },
+    video: {
+      name: "Video Stream",
+      description: "Embed a video stream or video from a camera or a website",
+      option: {
+        feedUrl: {
+          label: "Feed URL",
+        },
+        hasAutoPlay: {
+          label: "Autoplay",
+          description:
+            "Autoplay only works when muted because of browser restrictions",
+        },
+        isMuted: {
+          label: "Muted",
+        },
+        hasControls: {
+          label: "Show controls",
+        },
+      },
+      error: {
+        noUrl: "No Video URL provided",
+        forYoutubeUseIframe: "For YouTube videos use the iframe option",
+      },
+    },
   },
   widgetPreview: {
     toggle: {

packages/widgets/package.json

@@ -23,6 +23,7 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
+    "@types/video.js": "^7.3.57",
     "eslint": "^8.57.0",
     "typescript": "^5.4.5"
   },
@@ -43,6 +44,7 @@
     "@homarr/redis": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
-    "@homarr/validation": "workspace:^0.1.0"
+    "@homarr/validation": "workspace:^0.1.0",
+    "video.js": "^8.10.0"
   }
 }

packages/widgets/src/index.tsx

@@ -9,6 +9,7 @@ import * as app from "./app";
 import * as clock from "./clock";
 import type { WidgetComponentProps } from "./definition";
 import type { WidgetImportRecord } from "./import";
+import * as video from "./video";
 import * as weather from "./weather";
 
 export { reduceWidgetOptionsWithDefaultValues } from "./options";
@@ -21,6 +22,7 @@ export const widgetImports = {
   clock,
   weather,
   app,
+  video,
 } satisfies WidgetImportRecord;
 
 export type WidgetImports = typeof widgetImports;

packages/widgets/src/video/component.module.css

@@ -0,0 +1,6 @@
+.video {
+  height: 100%;
+  width: 100%;
+  border-radius: var(--mantine-radius-md);
+  overflow: hidden;
+}

packages/widgets/src/video/component.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import combineClasses from "clsx";
+import videojs from "video.js";
+
+import { useI18n } from "@homarr/translation/client";
+import {
+  Anchor,
+  Center,
+  Group,
+  IconBrandYoutube,
+  IconDeviceCctvOff,
+  Stack,
+  Title,
+} from "@homarr/ui";
+
+import type { WidgetComponentProps } from "../definition";
+import classes from "./component.module.css";
+
+import "video.js/dist/video-js.css";
+
+export default function VideoWidget({
+  options,
+}: WidgetComponentProps<"video">) {
+  if (options.feedUrl.trim() === "") {
+    return <NoUrl />;
+  }
+
+  if (options.feedUrl.trim().startsWith("https://www.youtube.com/watch")) {
+    return <ForYoutubeUseIframe />;
+  }
+
+  return <Feed options={options} />;
+}
+
+const NoUrl = () => {
+  const t = useI18n();
+
+  return (
+    <Center h="100%">
+      <Stack align="center">
+        <IconDeviceCctvOff />
+        <Title order={4}>{t("widget.video.error.noUrl")}</Title>
+      </Stack>
+    </Center>
+  );
+};
+
+const ForYoutubeUseIframe = () => {
+  const t = useI18n();
+
+  return (
+    <Center h="100%">
+      <Stack align="center" gap="xs">
+        <IconBrandYoutube />
+        <Title order={4}>{t("widget.video.error.forYoutubeUseIframe")}</Title>
+        <Anchor href="https://homarr.dev/docs/widgets/iframe/">
+          {t("common.action.checkoutDocs")}
+        </Anchor>
+      </Stack>
+    </Center>
+  );
+};
+
+const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (!videoRef.current) {
+      return;
+    }
+
+    // Initialize Video.js player if it's not already initialized
+    if (!("player" in videoRef.current)) {
+      videojs(
+        videoRef.current,
+        {
+          autoplay: options.hasAutoPlay,
+          muted: options.isMuted,
+          controls: options.hasControls,
+        },
+        () => undefined,
+      );
+    }
+  }, [videoRef]);
+
+  return (
+    <Group justify="center" w="100%" h="100%" pos="relative">
+      <video
+        className={combineClasses("video-js", classes.video)}
+        ref={videoRef}
+      >
+        <source src={options.feedUrl} />
+      </video>
+    </Group>
+  );
+};

packages/widgets/src/video/index.ts

@@ -0,0 +1,20 @@
+import { IconDeviceCctv } from "@homarr/ui";
+
+import { createWidgetDefinition } from "../definition";
+import { optionsBuilder } from "../options";
+
+export const { definition, componentLoader } = createWidgetDefinition("video", {
+  icon: IconDeviceCctv,
+  options: optionsBuilder.from((factory) => ({
+    feedUrl: factory.text({
+      defaultValue: "",
+    }),
+    hasAutoPlay: factory.switch({
+      withDescription: true,
+    }),
+    isMuted: factory.switch({
+      defaultValue: true,
+    }),
+    hasControls: factory.switch(),
+  })),
+}).withDynamicImport(() => import("./component"));