Add video-js shortcode (#308)

Reviewed-on: #308

assets/css/style.css

@@ -272,7 +272,7 @@ textarea.form-control {
   border-color: var(--gcg-color-primary);
 }
 
-.content *:not(details, details > *, .shortcode *, .alert *) {
+.content *:not(details, details > *, .shortcode *, .alert *, .video-js *) {
   margin-bottom: 20px;
 }
 

assets/js/script.js

@@ -69,6 +69,14 @@
     });
   });
 
+  // video-js
+  $(document).ready(function () {
+    document.querySelectorAll("video.video-js").forEach((video) => {
+      // @ts-ignore
+      videojs(video, {});
+    });
+  });
+
   // filter
   $(document).ready(function () {
     if ($(".filter-container").length != 0) {

config.yml

@@ -35,11 +35,13 @@ params:
       - https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.css
       - https://assets.cantorgymnasium.de/fonts/fira/fira.min.css
       - https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.min.css
+      - https://assets.cantorgymnasium.de/videojs/v8/video-js.min.css
       - /pagefind/pagefind-ui.css
     js:
       - https://assets.cantorgymnasium.de/bootstrap/v5/js/bootstrap.bundle.min.js
       - https://assets.cantorgymnasium.de/slick/v1.8/slick.min.js
       - https://assets.cantorgymnasium.de/lazyload/v17/dist/lazyload.min.js
+      - https://assets.cantorgymnasium.de/videojs/v8/video.min.js
       - /pagefind/pagefind-ui.js
     head_js:
       - https://assets.cantorgymnasium.de/jquery/v3.7/jquery.min.js

content/blog/35-jahre-georg-cantor-gymnasium.md

@@ -32,7 +32,7 @@ Im Rahmen der ["Red Hand Day"-Aktion](https://www.redhandday.org/de/), welche au
 
 Unserem Wunsch, diese Botschaft im Form von Handabdrücken an die Politik zu übergeben, konnte der Bundestagsabgeordnete für Halle, Herr Dr. Karamba Diaby, entsprechen. Am Dienstag, dem 12.09.2023, bekamen wir die Gelegenheit, eine Podiumsdiskussion mit ihm zu veranstalten. In diesem Rahmen übergaben wir ihm auch eine Mappe mit unseren Handabdrücken.
 
-<video class="mb-0" src="https://cloud.cantorgymnasium.de/s/9RqxDLfppQt5YBL/download/RedHandErweitert_Final.mp4" controls width="100%"></video>
+{{< video src="https://cloud.cantorgymnasium.de/s/9RqxDLfppQt5YBL/download/RedHandErweitert_Final.mp4" >}}
 
 {{< card title="Artikel: Red Hand Day - Talk mit Dr. Karamba Diaby" link="/blog/red-hand-day-talk-mit-dr-karamba-diaby/" >}}
 
@@ -236,7 +236,7 @@ Auf das letzte Klavierstück der Veranstaltung - "Nightbook" von Ludovico Einaud
 
 Zum letzten Mal für diesen abwechslungsreichen Nachmittag stand nun wieder die Wissenschaft im Vordergrund: mittels einer Live-Übertragung durften unsere Gäste den Start eines Wetterballons, organisiert und umgesetzt durch den Modulkurs Physik der Klasse 11, mitverfolgen.
 
-<video src="https://cloud.cantorgymnasium.de/s/8HHKXf5Fewb5im7/download/Wetterballon%20ffmpeg.mp4" width="100%" controls></video>
+{{< video src="https://cloud.cantorgymnasium.de/s/8HHKXf5Fewb5im7/download/Wetterballon%20ffmpeg.mp4" >}}
 
 Zum Zeitpunkt der Veröffentlichung dieses Artikels ist der Wetterballon bereits gelandet und die aufgenommenen Daten befinden sich in der Auswertung. Regelmäßige Website-Besucher können sich also schon jetzt auf einen eigenen Beitrag zum Ballonstart freuen.
 
@@ -324,7 +324,7 @@ Einige Versuche später entstand um 12.46 Uhr die Endversion des Bildes als krö
 
 {{< gallery dir="/media/blog/Sj2023_2024/35-jahre-gcg/flashmob" >}}
 
-<video src="https://cloud.cantorgymnasium.de/s/kP6KYoBsjBGEwLs/download/35%20Jahre%20Georg%20Cantor%20Gymnasium.mp4" width="100%" controls></video>
+{{< video src="https://cloud.cantorgymnasium.de/s/kP6KYoBsjBGEwLs/download/35%20Jahre%20Georg%20Cantor%20Gymnasium.mp4" >}}
 
 ## Danksagung
 

layouts/partials/download.html

@@ -1,6 +1,6 @@
 <div class="shortcode card border-primary rounded-0 hover-shadow mb-2">
   <div class="card-body mb-0">
-    <h4 class="card-title"><a class="text-decoration-none" href='{{ .link }}'>{{ .title }}</a></h4>
+    <h4 class="card-title"><a class="text-decoration-none" href="{{ .link }}">{{ .title }}</a></h4>
-    <a href='{{ .link }}' class="text-decoration-none btn btn-primary btn-sm mb-0">{{ partial "mdi" "tray-arrow-down" }}<span class="ms-2">Download</span></a>
+    <a href="{{ .link }}" class="text-decoration-none btn btn-primary btn-sm mb-0">{{ partial "mdi" "tray-arrow-down" }}<span class="ms-2">Download</span></a>
   </div>
 </div>

layouts/partials/tile-modals.html

@@ -14,7 +14,7 @@
             {{ if and .image (ne .image "/media/image.webp") }}
               <img class="card-img-top rounded-0" src="{{ .image | relURL }}">
             {{ else }}
-              <div class="container fb-tile-color" style="background-color:{{ .bg_color }};">
+              <div class="container fb-tile-color" style="background-color: {{ .bg_color }};">
                 <span class="fb-tile-icon" style="color: {{ .font_color }}">{{ partial "mdi" .icon }}</span>
               </div>
             {{ end }}

layouts/shortcodes/audio.html

@@ -1,3 +1,3 @@
 <div class="shortcode card">
-  <audio src='{{ .Get "src" }}' class="mb-0" controls></audio>
+  <audio src="{{ .Get `src` }}" class="mb-0" controls></audio>
 </div>

layouts/shortcodes/card.html

@@ -1,6 +1,6 @@
 <div class="shortcode card border-primary rounded-0 hover-shadow mb-4">
   <div class="card-body mb-0">
-    <h4 class="card-title"><a class="text-decoration-none" href='{{ .Get "link" }}'>{{ .Get "title" }}</a></h4>
+    <h4 class="card-title"><a class="text-decoration-none" href="{{ .Get `link` }}">{{ .Get "title" }}</a></h4>
-    <a href='{{ .Get "link" }}' class="mb-0 btn btn-primary btn-sm text-decoration-none">Mehr anzeigen</a>
+    <a href="{{ .Get `link` }}" class="mb-0 btn btn-primary btn-sm text-decoration-none">Mehr anzeigen</a>
   </div>
 </div>

layouts/shortcodes/gallery.html

@@ -6,12 +6,12 @@
 	  {{ $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
 	  {{ if $isimg }}
 	    {{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }}
-	    <div class="col-lg-3 col-md-4 col-sm-6">
+	    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
-		  <a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}">
+        <a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}">
-		  	<div class="ratio ratio-4x3">
+          <div class="ratio ratio-4x3">
-				<img class="lazy img-thumbnail w-100 object-cover" data-src="{{ $linkURL }}">
+            <img class="lazy img-thumbnail w-100 object-cover" data-src="{{ $linkURL }}">
-			</div>
+          </div>
-		  </a>	
+        </a>	
 	    </div>
 	  {{ end }}
     {{ end }}

layouts/shortcodes/image.html

@@ -1,3 +1,3 @@
 <div class="shortcode col-lg-3 col-md-4 col-sm-6">
-  <a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src='{{ .Get "src" }}'></a>
+  <a class="vb-gallery" data-gall="{{ md5 (.Get `src`) }}" href="{{ .Get `src` }}"><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src="{{ .Get `src` }}"></a>
 </div>

layouts/shortcodes/slider.html

@@ -1,7 +1,7 @@
 {{ $dir := (.Get "dir") }}
 {{ if $dir }}
 <div class="shortcode card border-primary rounded-3">
-  <div class="carousel slide mb-0" data-bs-ride="true" id='slider-{{ md5 $dir }}'>
+  <div class="carousel slide mb-0" data-bs-ride="true" id="slider-{{ md5 $dir }}">
     {{ $images := slice }}
     {{ range readDir (print "/static/" $dir) }}
       {{ if (lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
@@ -16,7 +16,7 @@
     <div class="carousel-inner mb-0">
       {{ range $index, $image := $images }}
         <div class="carousel-item mb-0 {{ if eq $index 0 }}active{{end}}">
-          <img src='{{ print $.Site.BaseURL $dir "/" $image.Name | absURL }}' class="d-block w-100 mb-0 rounded-3">
+          <img src="{{ print $.Site.BaseURL $dir `/` $image.Name | absURL }}" class="d-block w-100 mb-0 rounded-3">
         </div>
     {{ end }}
     </div>

layouts/shortcodes/video.html

@@ -0,0 +1 @@
+<video class="video-js vjs-fluid" src="{{ .Get `src` }}" width="100%" controls></video>

layouts/termine/list.html

@@ -10,7 +10,7 @@
     <div class="filter-container row mx-auto">
       {{ range sort .Params.events ".date" }}
       {{ if not .hidden }}
-      <div class="filter-item col-12" data-groups='{{if partial "data/termin-upcoming" .}}upcoming{{else}}past{{end}}'>
+      <div class="filter-item col-12" data-groups="{{ if partial `data/termin-upcoming` . }}upcoming{{else}}past{{end}}">
         {{ partial "termin" . }}
       </div>
       {{ end }}

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;