Add video component

This commit is contained in:
Kuba Orlik 2026-05-22 10:28:04 +02:00
parent 61230ba301
commit 2df4029268
5 changed files with 54 additions and 8 deletions

14
package-lock.json generated
View File

@ -15,7 +15,7 @@
"@sealcode/add-to-head": "^1.0.0", "@sealcode/add-to-head": "^1.0.0",
"@sealcode/file-manager": "^1.0.2", "@sealcode/file-manager": "^1.0.2",
"@sealcode/jdd": "^0.8.6", "@sealcode/jdd": "^0.8.6",
"@sealcode/jdd-editor": "^0.2.18", "@sealcode/jdd-editor": "^0.2.19",
"@sealcode/monaco-wrapper": "^0.0.4", "@sealcode/monaco-wrapper": "^0.0.4",
"@sealcode/sealgen": "^0.19.20", "@sealcode/sealgen": "^0.19.20",
"@sealcode/show-first-row": "^0.1.0", "@sealcode/show-first-row": "^0.1.0",
@ -1380,9 +1380,9 @@
} }
}, },
"node_modules/@sealcode/jdd-editor": { "node_modules/@sealcode/jdd-editor": {
"version": "0.2.18", "version": "0.2.19",
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.18.tgz", "resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.19.tgz",
"integrity": "sha512-14oT7FDjKWuH5aMm5C2jsdpFAGjz+cQjomj4aLMrMkPUtPSYtKV7CUxseM+OJKynSJl05iPTAtc1FebydqlRHQ==", "integrity": "sha512-zkM5fTx5UavRDfueLYX2wj6vkG4Ytd9Ro01Ik+u6681mu99z7WLLYKKSIzvTY6i2Qo2tVYujE1wvhg1sugBM/Q==",
"dependencies": { "dependencies": {
"@koa/router": "^13.1.0", "@koa/router": "^13.1.0",
"@sealcode/jdd": "^0.8.6", "@sealcode/jdd": "^0.8.6",
@ -16021,9 +16021,9 @@
} }
}, },
"@sealcode/jdd-editor": { "@sealcode/jdd-editor": {
"version": "0.2.18", "version": "0.2.19",
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.18.tgz", "resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.19.tgz",
"integrity": "sha512-14oT7FDjKWuH5aMm5C2jsdpFAGjz+cQjomj4aLMrMkPUtPSYtKV7CUxseM+OJKynSJl05iPTAtc1FebydqlRHQ==", "integrity": "sha512-zkM5fTx5UavRDfueLYX2wj6vkG4Ytd9Ro01Ik+u6681mu99z7WLLYKKSIzvTY6i2Qo2tVYujE1wvhg1sugBM/Q==",
"requires": { "requires": {
"@koa/router": "^13.1.0", "@koa/router": "^13.1.0",
"@sealcode/jdd": "^0.8.6", "@sealcode/jdd": "^0.8.6",

View File

@ -98,7 +98,7 @@
"@sealcode/add-to-head": "^1.0.0", "@sealcode/add-to-head": "^1.0.0",
"@sealcode/file-manager": "^1.0.2", "@sealcode/file-manager": "^1.0.2",
"@sealcode/jdd": "^0.8.6", "@sealcode/jdd": "^0.8.6",
"@sealcode/jdd-editor": "^0.2.18", "@sealcode/jdd-editor": "^0.2.19",
"@sealcode/monaco-wrapper": "^0.0.4", "@sealcode/monaco-wrapper": "^0.0.4",
"@sealcode/sealgen": "^0.19.20", "@sealcode/sealgen": "^0.19.20",
"@sealcode/show-first-row": "^0.1.0", "@sealcode/show-first-row": "^0.1.0",

View File

@ -0,0 +1,5 @@
.video {
display: flex;
flex-flow: column;
align-items: center;
}

View File

@ -0,0 +1,38 @@
import { TempstreamJSX } from "tempstream";
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import { PathFilePointer } from "@sealcode/file-manager";
const component_arguments = {
file: new ComponentArguments.File(),
max_height: new ComponentArguments.Number(),
max_width: new ComponentArguments.Number(),
} as const;
export class Video extends Component<typeof component_arguments> {
getArguments() {
return component_arguments;
}
async toHTML({
args: { file, max_width, max_height },
classes,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
return (
<div class={["video", ...classes]}>
{file instanceof PathFilePointer ? (
<video
controls
style={`max-width: ${max_width}px; max-height: ${max_height}px`}
>
<source src={file.getURL()} type={file.mimetype} />
Your browser does not support video {" "}
<a href={file.getURL()}>Download the video</a>
</video>
) : (
""
)}
</div>
);
}
}

View File

@ -37,6 +37,9 @@ application.register("jdd-table-paste", JddTablePaste);
import { default as JsonEditor } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/json-editor.stimulus.js"; import { default as JsonEditor } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/json-editor.stimulus.js";
application.register("json-editor", JsonEditor); application.register("json-editor", JsonEditor);
import { default as MarkdownTextarea } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/markdown-textarea.stimulus.js";
application.register("markdown-textarea", MarkdownTextarea);
import { default as RefreshOnTsChanges } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/refresh-on-ts-changes.stimulus.js"; import { default as RefreshOnTsChanges } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/refresh-on-ts-changes.stimulus.js";
application.register("refresh-on-ts-changes", RefreshOnTsChanges); application.register("refresh-on-ts-changes", RefreshOnTsChanges);