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

fix(engine): preserve video frame replacement geometry (#838)

Browse Source 
* fix(engine): preserve video frame replacement geometry

* test(producer): cover video overlay stretch regression

* fix(engine): always pass clip to Page.captureScreenshot

Without an explicit clip, Chrome can resolve replaced-element sizing
differently at dpr=1 when full-bleed absolute videos interact with
overlay layers — producing anisotropic frame stretching on some
compositor paths. Always passing clip with scale=dpr (including 1)
ensures geometry is locked to the measured viewport dimensions.

Credit: brian-t-allen (#837)

* test(producer): regenerate style-9-prod baseline for always-clip capture path

The always-clip change in screenshotService.ts routes Chrome through a
different compositor capture path at dpr=1, producing different video
frame compression artifacts. Regenerated inside Dockerfile.test to match
CI environment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Miguel Ángel
2026-05-15 18:58:50 +02:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 952d2658b0
commit 8e0cfc33a7
10 changed files with 1451 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/producer/tests/render-video-overlay-stretch/output/compiled.html
+78
View File
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=480, height=270">
<title>Video Overlay Stretch Regression</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 480px;
height: 270px;
overflow: hidden;
background: #000;
}
#root {
position: relative;
width: 480px;
height: 270px;
overflow: hidden;
background: #000;
}
.scene-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.transition-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.82;
}
.cut-label {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 20;
padding: 5px 8px;
border: 2px solid rgba(255, 255, 255, 0.88);
color: #fff;
background: rgba(0, 0, 0, 0.68);
font: 700 13px Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="root" data-composition-id="video-overlay-stretch" data-start="0" data-duration="4" data-width="480" data-height="270">
<video id="clip-a" class="clip scene-video" src="clip.mp4" data-start="0" data-duration="2" data-track-index="0" muted playsinline data-end="2" data-has-audio="false"></video>
<video id="clip-b" class="clip scene-video" src="clip.mp4" data-start="2" data-duration="2" data-track-index="1" muted playsinline data-end="4" data-has-audio="false"></video>
<img id="transition" class="clip transition-overlay" src="transition-overlay.png" data-start="1.6" data-duration="0.8" data-track-index="10" alt="">
<div class="clip cut-label" data-start="0" data-duration="2" data-track-index="20">
CLIP A
</div>
<div class="clip cut-label" data-start="2" data-duration="2" data-track-index="21">
CLIP B
</div>
</div>
<script>window.__timelines = window.__timelines || {};</script></body>
</html>
packages/producer/tests/render-video-overlay-stretch/output/output.mp4
+3
View File
@@ -0,0 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:95f96e2676be7808074ca22dc06f68bb845c83ff3f2036afd75730c4c487cc3a
size 20066