ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): add 4k canvas resolution presets

Browse Source
This commit is contained in:
James
2026-05-07 02:36:16 +00:00
parent f385181d66
commit 555c51fcf6
5 changed files with 72 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/parsers/htmlParser.test.ts
+45
View File
@@ -212,6 +212,51 @@ describe("parseHtml", () => {
expect(result.resolution).toBe("portrait");
});
it("detects landscape-4k resolution from data attribute", () => {
const html = `
<html data-resolution="landscape-4k">
<body>
<div id="stage">
<div id="text1" data-start="0" data-end="5"><div>Hello</div></div>
</div>
</body>
</html>
`;
const result = parseHtml(html);
expect(result.resolution).toBe("landscape-4k");
});
it("infers landscape-4k from composition dimensions", () => {
const html = `
<html data-composition-width="3840" data-composition-height="2160">
<body>
<div id="stage">
<div id="text1" data-start="0" data-end="5"><div>Hello</div></div>
</div>
</body>
</html>
`;
const result = parseHtml(html);
expect(result.resolution).toBe("landscape-4k");
});
it("infers portrait-4k from inline stage style", () => {
const html = `
<html>
<body>
<div id="stage" style="width: 2160px; height: 3840px;">
<div id="text1" data-start="0" data-end="5"><div>Hello</div></div>
</div>
</body>
</html>
`;
const result = parseHtml(html);
expect(result.resolution).toBe("portrait-4k");
});
it("extracts x, y, scale, opacity from data attributes", () => {
const html = `
<html>
packages/core/src/parsers/htmlParser.ts
+18 -5
View File
@@ -90,7 +90,7 @@ function parseResolutionFromCss(doc: Document, cssText: string | null): CanvasRe
const w = parseInt(inlineStyle.width, 10);
const h = parseInt(inlineStyle.height, 10);
if (w && h) {
return w > h ? "landscape" : "portrait";
return resolveResolutionFromDimensions(w, h);
}
}
}
@@ -102,7 +102,7 @@ function parseResolutionFromCss(doc: Document, cssText: string | null): CanvasRe
if (stageMatch) {
const w = parseInt(stageMatch[1] ?? "", 10);
const h = parseInt(stageMatch[2] ?? "", 10);
return w > h ? "landscape" : "portrait";
return resolveResolutionFromDimensions(w, h);
}
const stageMatchReverse = cssText.match(
/#stage\s*\{[^}]*height:\s*(\d+)px[^}]*width:\s*(\d+)px[^}]*\}/,
@@ -110,7 +110,7 @@ function parseResolutionFromCss(doc: Document, cssText: string | null): CanvasRe
if (stageMatchReverse) {
const h = parseInt(stageMatchReverse[1] ?? "", 10);
const w = parseInt(stageMatchReverse[2] ?? "", 10);
return w > h ? "landscape" : "portrait";
return resolveResolutionFromDimensions(w, h);
}
}
@@ -120,7 +120,12 @@ function parseResolutionFromCss(doc: Document, cssText: string | null): CanvasRe
function parseResolutionFromHtml(doc: Document): CanvasResolution | null {
const htmlEl = doc.documentElement;
const resolutionAttr = htmlEl.getAttribute("data-resolution");
if (resolutionAttr === "landscape" || resolutionAttr === "portrait") {
if (
resolutionAttr === "landscape" ||
resolutionAttr === "portrait" ||
resolutionAttr === "landscape-4k" ||
resolutionAttr === "portrait-4k"
) {
return resolutionAttr;
}
@@ -130,13 +135,21 @@ function parseResolutionFromHtml(doc: Document): CanvasResolution | null {
const width = parseInt(widthAttr, 10);
const height = parseInt(heightAttr, 10);
if (width && height) {
return width > height ? "landscape" : "portrait";
return resolveResolutionFromDimensions(width, height);
}
}
return null;
}
function resolveResolutionFromDimensions(width: number, height: number): CanvasResolution {
const isLandscape = width > height;
const longSide = Math.max(width, height);
const isUhd = longSide >= 2560;
if (isLandscape) return isUhd ? "landscape-4k" : "landscape";
return isUhd ? "portrait-4k" : "portrait";
}
export function parseHtml(html: string): ParsedHtml {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");