= {
src: videoSrc,
loop: !!videoNode.loop,
- cardWidth: getCardWidth(videoNode)
+ cardWidth: getCardWidth(domNode)
};
if (durationText) {
- const [minutes, seconds] = durationText.split(':');
- try {
- payload.duration = parseInt(minutes) * 60 + parseInt(seconds);
- } catch (e) {
- // ignore duration
+ const [rawMinutes, rawSeconds = '0'] = durationText.split(':');
+ const minutes = Number.parseInt(rawMinutes.trim(), 10);
+ const seconds = Number.parseInt(rawSeconds.trim(), 10);
+
+ if (Number.isFinite(minutes) && Number.isFinite(seconds)) {
+ payload.duration = minutes * 60 + seconds;
}
}
@@ -57,7 +59,7 @@ export function parseVideoNode(VideoNode) {
const node = new VideoNode(payload);
return {node};
},
- priority: 1
+ priority: 1 as const
};
}
return null;
@@ -65,7 +67,7 @@ export function parseVideoNode(VideoNode) {
};
}
-function getCardWidth(domNode) {
+function getCardWidth(domNode: Element) {
if (domNode.classList.contains('kg-width-full')) {
return 'full';
} else if (domNode.classList.contains('kg-width-wide')) {
diff --git a/packages/kg-default-nodes/lib/nodes/video/video-renderer.js b/packages/kg-default-nodes/src/nodes/video/video-renderer.ts
similarity index 74%
rename from packages/kg-default-nodes/lib/nodes/video/video-renderer.js
rename to packages/kg-default-nodes/src/nodes/video/video-renderer.ts
index 53326c14c3..d12287024a 100644
--- a/packages/kg-default-nodes/lib/nodes/video/video-renderer.js
+++ b/packages/kg-default-nodes/src/nodes/video/video-renderer.ts
@@ -1,10 +1,50 @@
-import {addCreateDocumentOption} from '../../utils/add-create-document-option';
-import {renderEmptyContainer} from '../../utils/render-empty-container';
+import {addCreateDocumentOption} from '../../utils/add-create-document-option.js';
+import type {ExportDOMOptions} from '../../export-dom.js';
+import {renderEmptyContainer} from '../../utils/render-empty-container.js';
+
+interface VideoNodeData {
+ src: string;
+ width: number | null;
+ height: number | null;
+ caption: string;
+ loop: boolean;
+ thumbnailSrc: string;
+ customThumbnailSrc: string;
+ formattedDuration: string;
+ cardWidth: string;
+}
+
+interface BaseVideoRenderOptions extends ExportDOMOptions {}
+
+interface EmailVideoRenderOptions extends BaseVideoRenderOptions {
+ target: 'email';
+ postUrl: string;
+}
+
+interface DefaultVideoRenderOptions extends BaseVideoRenderOptions {
+ target?: string;
+ postUrl?: string;
+}
+
+type VideoRenderOptions = EmailVideoRenderOptions | DefaultVideoRenderOptions;
+const DEFAULT_EMAIL_ASPECT_RATIO = 16 / 9;
-export function renderVideoNode(node, options = {}) {
+function hasVideoDimensions(node: VideoNodeData): node is VideoNodeData & {width: number; height: number} {
+ return node.width !== null && node.height !== null && node.width > 0 && node.height > 0;
+}
+
+function getPosterSpacerSrc(width: number, height: number) {
+ return `https://img.spacergif.org/v1/${width}x${height}/0a/spacer.png`;
+}
+
+function isEmailRenderOptions(options: VideoRenderOptions): options is EmailVideoRenderOptions {
+ return options.target === 'email' && typeof options.postUrl === 'string' && options.postUrl.trim() !== '';
+}
+
+export function renderVideoNode(node: VideoNodeData, options: VideoRenderOptions = {}) {
addCreateDocumentOption(options);
- const document = options.createDocument();
+ const document = options.createDocument!();
if (!node.src || node.src.trim() === '') {
return renderEmptyContainer(document);
@@ -13,19 +53,25 @@ export function renderVideoNode(node, options = {}) {
const cardClasses = getCardClasses(node).join(' ');
const htmlString = options.target === 'email'
- ? emailCardTemplate({node, options, cardClasses})
+ ? (() => {
+ if (!isEmailRenderOptions(options)) {
+ throw new Error('renderVideoNode requires options.postUrl when options.target is "email"');
+ }
+
+ return emailCardTemplate({node, options, cardClasses});
+ })()
: cardTemplate({node, cardClasses});
const element = document.createElement('div');
element.innerHTML = htmlString.trim();
- return {element: element.firstElementChild};
+ return {element: element.firstElementChild, type: 'outer' as const};
}
-export function cardTemplate({node, cardClasses}) {
- const width = node.width;
- const height = node.height;
- const posterSpacerSrc = `https://img.spacergif.org/v1/${width}x${height}/0a/spacer.png`;
+export function cardTemplate({node, cardClasses}: {node: VideoNodeData, cardClasses: string}) {
+ const widthAttr = hasVideoDimensions(node) ? `width="${node.width}"` : '';
+ const heightAttr = hasVideoDimensions(node) ? `height="${node.height}"` : '';
+ const posterAttr = hasVideoDimensions(node) ? `poster="${getPosterSpacerSrc(node.width, node.height)}"` : '';
const autoplayAttr = node.loop ? 'loop autoplay muted' : '';
const thumbnailSrc = node.customThumbnailSrc || node.thumbnailSrc;
const hideControlsClass = node.loop ? ' kg-video-hide' : '';
@@ -36,9 +82,9 @@ export function cardTemplate({node, cardClasses}) {
-
+ `
+ : `