Add video component
This commit is contained in:
parent
61230ba301
commit
2df4029268
14
package-lock.json
generated
14
package-lock.json
generated
@ -15,7 +15,7 @@
|
||||
"@sealcode/add-to-head": "^1.0.0",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
"@sealcode/jdd": "^0.8.6",
|
||||
"@sealcode/jdd-editor": "^0.2.18",
|
||||
"@sealcode/jdd-editor": "^0.2.19",
|
||||
"@sealcode/monaco-wrapper": "^0.0.4",
|
||||
"@sealcode/sealgen": "^0.19.20",
|
||||
"@sealcode/show-first-row": "^0.1.0",
|
||||
@ -1380,9 +1380,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@sealcode/jdd-editor": {
|
||||
"version": "0.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.18.tgz",
|
||||
"integrity": "sha512-14oT7FDjKWuH5aMm5C2jsdpFAGjz+cQjomj4aLMrMkPUtPSYtKV7CUxseM+OJKynSJl05iPTAtc1FebydqlRHQ==",
|
||||
"version": "0.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.19.tgz",
|
||||
"integrity": "sha512-zkM5fTx5UavRDfueLYX2wj6vkG4Ytd9Ro01Ik+u6681mu99z7WLLYKKSIzvTY6i2Qo2tVYujE1wvhg1sugBM/Q==",
|
||||
"dependencies": {
|
||||
"@koa/router": "^13.1.0",
|
||||
"@sealcode/jdd": "^0.8.6",
|
||||
@ -16021,9 +16021,9 @@
|
||||
}
|
||||
},
|
||||
"@sealcode/jdd-editor": {
|
||||
"version": "0.2.18",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.18.tgz",
|
||||
"integrity": "sha512-14oT7FDjKWuH5aMm5C2jsdpFAGjz+cQjomj4aLMrMkPUtPSYtKV7CUxseM+OJKynSJl05iPTAtc1FebydqlRHQ==",
|
||||
"version": "0.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.19.tgz",
|
||||
"integrity": "sha512-zkM5fTx5UavRDfueLYX2wj6vkG4Ytd9Ro01Ik+u6681mu99z7WLLYKKSIzvTY6i2Qo2tVYujE1wvhg1sugBM/Q==",
|
||||
"requires": {
|
||||
"@koa/router": "^13.1.0",
|
||||
"@sealcode/jdd": "^0.8.6",
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
"@sealcode/add-to-head": "^1.0.0",
|
||||
"@sealcode/file-manager": "^1.0.2",
|
||||
"@sealcode/jdd": "^0.8.6",
|
||||
"@sealcode/jdd-editor": "^0.2.18",
|
||||
"@sealcode/jdd-editor": "^0.2.19",
|
||||
"@sealcode/monaco-wrapper": "^0.0.4",
|
||||
"@sealcode/sealgen": "^0.19.20",
|
||||
"@sealcode/show-first-row": "^0.1.0",
|
||||
|
||||
5
src/back/jdd-components/video/video.css
Normal file
5
src/back/jdd-components/video/video.css
Normal file
@ -0,0 +1,5 @@
|
||||
.video {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
38
src/back/jdd-components/video/video.jdd.tsx
Normal file
38
src/back/jdd-components/video/video.jdd.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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";
|
||||
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";
|
||||
application.register("refresh-on-ts-changes", RefreshOnTsChanges);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user