Add video-js shortcode (#308)

Reviewed-on: #308

static/admin/shortcodes/video.js

@@ -0,0 +1,74 @@
+import { Card, TextField, Label } from "./components.js";
+
+const VideoShortcode = {
+  label: "Videodatei",
+  openTag: "{{< ",
+  closeTag: " >}}",
+  separator: " ",
+  toProps: (args) => {
+    if (args.length > 0) {
+      const src =
+        args
+          .find((arg) => arg.startsWith("src="))
+          ?.split("=")[1]
+          .replaceAll('"', "") ?? "";
+      return { src: src };
+    }
+    return { src: "" };
+  },
+  toArgs: ({ src }) => {
+    return [`src=\"${src}\"`];
+  },
+  control: ({ src, onChange, controlProps }) => {
+    const { collection, field } = controlProps;
+
+    const handleChange = ({ path }) => {
+      onChange({ src: path });
+    };
+
+    const handleOpenMediaLibrary = useMediaInsert(
+      src,
+      { collection, field },
+      handleChange
+    );
+
+    return Card([
+      Label("Videodatei"),
+      h(
+        "span",
+        { className: "CMS_WidgetDateTime_inputs" },
+        TextField({
+          value: src,
+          onChange: (event) => {
+            onChange({ src: event.target.value });
+          },
+        }),
+        h(
+          "span",
+          {
+            key: "video-button",
+            className: "CMS_WidgetDateTime_NowButton_root",
+          },
+          h(
+            "button",
+            {
+              type: "button",
+              onClick: handleOpenMediaLibrary,
+              className: "CMS_Button_root CMS_Button_outlined-primary",
+            },
+            "wählen"
+          )
+        )
+      ),
+    ]);
+  },
+  preview: ({ src }) => {
+    return h(
+      "div",
+      { className: "card" },
+      h("video", { className: "w-100", src: src, controls: true })
+    );
+  },
+};
+
+export default VideoShortcode;