Poster argument for video component
This commit is contained in:
parent
a364cc97a3
commit
1261c6d977
@ -2,11 +2,13 @@ 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> {
|
||||
@ -15,14 +17,25 @@ export class Video extends Component<typeof component_arguments> {
|
||||
}
|
||||
|
||||
async toHTML({
|
||||
args: { file, max_width, max_height },
|
||||
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);` : ""}`,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user