@upstart.gg/sdk
Version:
You can test the CLI without recompiling by running:
99 lines (97 loc) • 2.54 kB
JavaScript
import { defineBrickManifest } from "../../brick-manifest.js";
import { cssLength } from "../props/css-length.js";
import { defineProps } from "../props/helpers.js";
import { shadow } from "../props/effects.js";
import { border, rounding } from "../props/border.js";
import { Type } from "@sinclair/typebox";
import { RxVideo } from "react-icons/rx";
//#region src/shared/bricks/manifests/video.manifest.ts
const manifest = defineBrickManifest({
type: "video",
name: "Video",
category: "media",
description: "An embedded video player for YouTube / Vimeo / Wistia links",
icon: RxVideo,
defaultWidth: {
mobile: "auto",
desktop: `${360 * 16 / 9}px`
},
defaultHeight: {
mobile: "168px",
desktop: "360px"
},
minWidth: {
mobile: 300,
desktop: 360 * 16 / 9
},
minHeight: {
mobile: 168,
desktop: 360
},
props: defineProps({
url: Type.String({
title: "Video URL",
description: "URL of the video to embed. It can be a YouTube link or an embed link. It also supports Vimeo and Wistia links.",
default: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
metadata: {
category: "content",
"ui:responsive": "desktop"
}
}),
padding: Type.Optional(cssLength({
description: "Padding inside the video player.",
"ai:instructions": "Use only a single value like '1rem' or '10px'",
title: "Padding",
"ui:responsive": true,
"ui:placeholder": "Not specified",
"ui:styleId": "styles:padding"
})),
rounding: Type.Optional(rounding({ default: "rounded-md" })),
border: Type.Optional(border()),
shadow: Type.Optional(shadow())
})
});
const examples = [
{
description: "A YouTube video",
type: "video",
props: { url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" }
},
{
description: "An embedded YouTube video",
type: "video",
props: { url: "https://www.youtube.com/embed/dQw4w9WgXcQ" }
},
{
description: "A Vimeo video",
type: "video",
props: { url: "https://vimeo.com/123456789" }
},
{
description: "Dynamic course video using course query",
type: "video",
props: {
url: "{{course.videoUrl}}",
padding: "1rem",
rounding: "rounded-lg",
shadow: "shadow-md"
}
},
{
description: "Dynamic product demo video using product query",
type: "video",
props: {
url: "{{product.demoVideoUrl}}",
padding: "0.5rem",
rounding: "rounded-xl",
shadow: "shadow-lg",
border: {
width: "border-2",
color: "border-primary-300"
}
}
}
];
//#endregion
export { examples, manifest };
//# sourceMappingURL=video.manifest.js.map