Add video-js shortcode (#308)

Reviewed-on: #308

static/admin/index.html

@@ -52,6 +52,7 @@
         YoutubeShortcode,
         AudioShortcode,
         SliderShortcode,
+        VideoShortcode,
       } from "./shortcodes/index.js";
       import { StatusPage, WikiLink } from "./links/index.js";
       import Icons from "./icons.js";
@@ -110,6 +111,7 @@
       CMS.registerShortcode("youtube", YoutubeShortcode);
       CMS.registerShortcode("audio", AudioShortcode);
       CMS.registerShortcode("slider", SliderShortcode);
+      CMS.registerShortcode("video", VideoShortcode);
 
       // links
       CMS.registerAdditionalLink(StatusPage);

static/admin/shortcodes/index.js

@@ -1,17 +1,19 @@
+import AudioShortcode from "./audio.js";
+import CardShortcode from "./card.js";
+import DownloadShortcode from "./download.js";
 import GalleryShortcode from "./gallery.js";
 import ImageShortcode from "./image.js";
-import DownloadShortcode from "./download.js";
-import CardShortcode from "./card.js";
-import YoutubeShortcode from "./youtube.js";
-import AudioShortcode from "./audio.js";
 import SliderShortcode from "./slider.js";
+import VideoShortcode from "./video.js";
+import YoutubeShortcode from "./youtube.js";
 
 export {
+  AudioShortcode,
+  CardShortcode,
+  DownloadShortcode,
   GalleryShortcode,
   ImageShortcode,
-  DownloadShortcode,
-  CardShortcode,
-  YoutubeShortcode,
-  AudioShortcode,
   SliderShortcode,
+  VideoShortcode,
+  YoutubeShortcode,
 };

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;