55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { TempstreamJSX } from "tempstream";
|
|
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
|
|
import { Component, ComponentArguments } from "@sealcode/jdd";
|
|
import { PathFilePointer } from "@sealcode/file-manager";
|
|
import { imageRouter } from "src/back/image-router.js";
|
|
|
|
const component_arguments = {
|
|
file: new ComponentArguments.File(),
|
|
max_height: new ComponentArguments.Number(),
|
|
max_width: new ComponentArguments.Number(),
|
|
cover_image: new ComponentArguments.Image().setExampleValues([null]),
|
|
} as const;
|
|
|
|
export class Video extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
async toHTML({
|
|
args: { file, max_width, max_height, cover_image },
|
|
classes,
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
|
|
const poster = cover_image
|
|
? await imageRouter.singleImage(
|
|
await cover_image.getPath(),
|
|
max_width || 320,
|
|
"jpg",
|
|
false
|
|
)
|
|
: false;
|
|
|
|
return (
|
|
<div class={["video", ...classes]}>
|
|
{file instanceof PathFilePointer ? (
|
|
<video
|
|
controls
|
|
loading="lazy"
|
|
poster={poster}
|
|
style={[
|
|
`${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`,
|
|
`${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`,
|
|
].join("; ")}
|
|
>
|
|
<source src={file.getURL()} type={file.mimetype} />
|
|
Your browser does not support video —{" "}
|
|
<a href={file.getURL()}>Download the video</a>
|
|
</video>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|