Add video-js shortcode (#308)
All checks were successful
Website Prod/Test / Produktivumgebung (push) Successful in 18s
Website Prod/Test / Testumgebung (push) Successful in 12s
Website Dev / Entwicklungsumgebung (push) Successful in 17s

Reviewed-on: #308
This commit is contained in:
2024-12-27 13:35:32 +01:00
parent ef4356799e
commit ab73609db6
16 changed files with 123 additions and 34 deletions

View File

@ -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);

View File

@ -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,
};

View File

@ -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;