kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Poster argument for video component

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-15 16:06:31 +02:00
parent a364cc97a3
commit 1261c6d977
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/back/jdd-components/video/video.jdd.tsx
View File

@ -2,11 +2,13 @@ import { TempstreamJSX } from "tempstream";
import type { ComponentToHTMLArgs } from "@sealcode/jdd"; import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd"; import { Component, ComponentArguments } from "@sealcode/jdd";
import { PathFilePointer } from "@sealcode/file-manager"; import { PathFilePointer } from "@sealcode/file-manager";
import { imageRouter } from "src/back/image-router.js";
const component_arguments = { const component_arguments = {
file: new ComponentArguments.File(), file: new ComponentArguments.File(),
max_height: new ComponentArguments.Number(), max_height: new ComponentArguments.Number(),
max_width: new ComponentArguments.Number(), max_width: new ComponentArguments.Number(),
cover_image: new ComponentArguments.Image().setExampleValues([null]),
} as const; } as const;
export class Video extends Component<typeof component_arguments> { export class Video extends Component<typeof component_arguments> {
@ -15,14 +17,25 @@ export class Video extends Component<typeof component_arguments> {
} }
async toHTML({ async toHTML({
args: { file, max_width, max_height }, args: { file, max_width, max_height, cover_image },
classes, classes,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> { }: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
const poster = cover_image
? await imageRouter.singleImage(
await cover_image.getPath(),
max_width || 320,
"jpg",
false
)
: false;
return ( return (
<div class={["video", ...classes]}> <div class={["video", ...classes]}>
{file instanceof PathFilePointer ? ( {file instanceof PathFilePointer ? (
<video <video
controls controls
loading="lazy"
poster={poster}
style={[ style={[
`${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`, `${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`,
`${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`, `${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`,