diff --git a/packages/core/src/blocks/Video/block.ts b/packages/core/src/blocks/Video/block.ts index 026b333ba5..d6af290579 100644 --- a/packages/core/src/blocks/Video/block.ts +++ b/packages/core/src/blocks/Video/block.ts @@ -11,6 +11,7 @@ export const FILE_VIDEO_ICON_SVG = export interface VideoOptions { icon?: string; + preload?: "none" | "metadata" | "auto"; } export type VideoBlockConfig = ReturnType; @@ -93,6 +94,9 @@ export const createVideoBlockSpec = createBlockSpec( video.contentEditable = "false"; video.draggable = false; video.width = block.props.previewWidth; + if (config.preload) { + video.preload = config.preload; + } videoWrapper.appendChild(video); return createResizableFileBlockWrapper( diff --git a/packages/react/src/blocks/Video/block.tsx b/packages/react/src/blocks/Video/block.tsx index 74870a1974..589fabb513 100644 --- a/packages/react/src/blocks/Video/block.tsx +++ b/packages/react/src/blocks/Video/block.tsx @@ -1,14 +1,14 @@ -import { createVideoBlockConfig, videoParse } from "@blocknote/core"; +import { createVideoBlockConfig, VideoOptions, videoParse } from "@blocknote/core"; import { RiVideoFill } from "react-icons/ri"; import { createReactBlockSpec, ReactCustomBlockRenderProps, } from "../../schema/ReactBlockSpec.js"; -import { useResolveUrl } from "../File/useResolveUrl.js"; -import { FigureWithCaption } from "../File/helpers/toExternalHTML/FigureWithCaption.js"; import { ResizableFileBlockWrapper } from "../File/helpers/render/ResizableFileBlockWrapper.js"; +import { FigureWithCaption } from "../File/helpers/toExternalHTML/FigureWithCaption.js"; import { LinkWithCaption } from "../File/helpers/toExternalHTML/LinkWithCaption.js"; +import { useResolveUrl } from "../File/useResolveUrl.js"; export const VideoPreview = ( props: Omit< @@ -18,7 +18,9 @@ export const VideoPreview = ( ReturnType["content"] >, "contentRef" - >, + > & { + preload?: "none" | "metadata" | "auto"; + }, ) => { const resolved = useResolveUrl(props.block.props.url!); @@ -33,6 +35,7 @@ export const VideoPreview = ( controls={true} contentEditable={false} draggable={false} + preload={props.preload} /> ); }; @@ -74,7 +77,7 @@ export const VideoToExternalHTML = ( return video; }; -export const VideoBlock = ( +export const VideoBlock = (config: VideoOptions) => ( props: ReactCustomBlockRenderProps< ReturnType["type"], ReturnType["propSchema"], @@ -86,7 +89,7 @@ export const VideoBlock = ( {...(props as any)} buttonIcon={} > - + ); }; @@ -94,7 +97,7 @@ export const VideoBlock = ( export const ReactVideoBlock = createReactBlockSpec( createVideoBlockConfig, (config) => ({ - render: VideoBlock, + render: VideoBlock(config), parse: videoParse(config), toExternalHTML: VideoToExternalHTML, }),