From ab73609db658bc70cd93f87a2e19b9b90c49d3fb Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Fri, 27 Dec 2024 13:35:32 +0100 Subject: [PATCH] Add video-js shortcode (#308) Reviewed-on: https://git.cantorgymnasium.de/gcg/gcg-website/pulls/308 --- assets/css/style.css | 2 +- assets/js/script.js | 8 ++ config.yml | 2 + .../blog/35-jahre-georg-cantor-gymnasium.md | 6 +- layouts/partials/download.html | 6 +- layouts/partials/tile-modals.html | 4 +- layouts/shortcodes/audio.html | 4 +- layouts/shortcodes/card.html | 4 +- layouts/shortcodes/gallery.html | 14 ++-- layouts/shortcodes/image.html | 4 +- layouts/shortcodes/slider.html | 6 +- layouts/shortcodes/video.html | 1 + layouts/termine/list.html | 2 +- static/admin/index.html | 2 + static/admin/shortcodes/index.js | 18 +++-- static/admin/shortcodes/video.js | 74 +++++++++++++++++++ 16 files changed, 123 insertions(+), 34 deletions(-) create mode 100644 layouts/shortcodes/video.html create mode 100644 static/admin/shortcodes/video.js diff --git a/assets/css/style.css b/assets/css/style.css index 5024fc61..759c640c 100644 --- a/assets/css/style.css +++ b/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; } diff --git a/assets/js/script.js b/assets/js/script.js index 817ef511..da4f0902 100644 --- a/assets/js/script.js +++ b/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) { diff --git a/config.yml b/config.yml index 4609c0d5..dede5d2e 100644 --- a/config.yml +++ b/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 diff --git a/content/blog/35-jahre-georg-cantor-gymnasium.md b/content/blog/35-jahre-georg-cantor-gymnasium.md index 5cf59023..90dfcebb 100644 --- a/content/blog/35-jahre-georg-cantor-gymnasium.md +++ b/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 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" >}} 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" >}} ## Danksagung diff --git a/layouts/partials/download.html b/layouts/partials/download.html index 38be77b6..1ec3b384 100644 --- a/layouts/partials/download.html +++ b/layouts/partials/download.html @@ -1,6 +1,6 @@
-

{{ .title }}

- {{ partial "mdi" "tray-arrow-down" }}Download +

{{ .title }}

+ {{ partial "mdi" "tray-arrow-down" }}Download
-
\ No newline at end of file + diff --git a/layouts/partials/tile-modals.html b/layouts/partials/tile-modals.html index 79d8b87b..8ca10d6b 100644 --- a/layouts/partials/tile-modals.html +++ b/layouts/partials/tile-modals.html @@ -14,7 +14,7 @@ {{ if and .image (ne .image "/media/image.webp") }} {{ else }} -
+
{{ partial "mdi" .icon }}
{{ end }} @@ -32,4 +32,4 @@
- \ No newline at end of file + diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html index 91ef74d1..ff9a6163 100644 --- a/layouts/shortcodes/audio.html +++ b/layouts/shortcodes/audio.html @@ -1,3 +1,3 @@
- -
\ No newline at end of file + + diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html index 43a9c640..e585b83f 100644 --- a/layouts/shortcodes/card.html +++ b/layouts/shortcodes/card.html @@ -1,6 +1,6 @@
-

{{ .Get "title" }}

- Mehr anzeigen +

{{ .Get "title" }}

+ Mehr anzeigen
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index b5addd88..0ad84632 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -6,14 +6,14 @@ {{ $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }} {{ if $isimg }} {{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }} -
- -
- -
- +
+ +
+ +
+
{{ end }} {{ end }} {{ end }} -
\ No newline at end of file + diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index 159ea389..f853d218 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -1,3 +1,3 @@
- -
\ No newline at end of file + + diff --git a/layouts/shortcodes/slider.html b/layouts/shortcodes/slider.html index d59ca6c5..495e483b 100644 --- a/layouts/shortcodes/slider.html +++ b/layouts/shortcodes/slider.html @@ -1,7 +1,7 @@ {{ $dir := (.Get "dir") }} {{ if $dir }}
- -{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html new file mode 100644 index 00000000..aa0d9d86 --- /dev/null +++ b/layouts/shortcodes/video.html @@ -0,0 +1 @@ + diff --git a/layouts/termine/list.html b/layouts/termine/list.html index d007fd5f..80767b2e 100644 --- a/layouts/termine/list.html +++ b/layouts/termine/list.html @@ -10,7 +10,7 @@
{{ range sort .Params.events ".date" }} {{ if not .hidden }} -
+
{{ partial "termin" . }}
{{ end }} diff --git a/static/admin/index.html b/static/admin/index.html index ef5aec3d..5e769382 100644 --- a/static/admin/index.html +++ b/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); diff --git a/static/admin/shortcodes/index.js b/static/admin/shortcodes/index.js index 385c103a..133bf0ac 100644 --- a/static/admin/shortcodes/index.js +++ b/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, }; diff --git a/static/admin/shortcodes/video.js b/static/admin/shortcodes/video.js new file mode 100644 index 00000000..b51ff294 --- /dev/null +++ b/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;