()
| 358 | }; |
| 359 | |
| 360 | const applyClipLayout = () => { |
| 361 | const rootEl = resolveRootCompositionElement(); |
| 362 | if (!rootEl) return; |
| 363 | if (!rootEl.style.position) { |
| 364 | rootEl.style.position = "relative"; |
| 365 | } |
| 366 | rootEl.style.overflow = "hidden"; |
| 367 | const rootWidth = parseDimensionPx(rootEl.getAttribute("data-width")); |
| 368 | const rootHeight = parseDimensionPx(rootEl.getAttribute("data-height")); |
| 369 | if (rootWidth) rootEl.style.width = rootWidth; |
| 370 | if (rootHeight) rootEl.style.height = rootHeight; |
| 371 | const children = Array.from(rootEl.children) as HTMLElement[]; |
| 372 | for (const el of children) { |
| 373 | const tag = el.tagName.toLowerCase(); |
| 374 | if (tag === "script" || tag === "style" || tag === "link" || tag === "meta") continue; |
| 375 | if (!el.hasAttribute("data-start")) continue; |
| 376 | // Runtime-stamped clips are NOT authored overlay clips. In Studio/preview |
| 377 | // the runtime stamps `data-start` onto ID'd or GSAP-targeted flow children |
| 378 | // (a <header>/<footer> in a flex column) so the design panel can discover |
| 379 | // them — see the stamping pass in bindCapturedTimeline. Forcing those out |
| 380 | // of document flow collapses the layout: the footer shrink-wraps and its |
| 381 | // `justify-content: space-between` clusters in the top-left. Leave them in |
| 382 | // flow so the preview matches the rendered video, which never stamps |
| 383 | // (production renders run as the top-level page, not in an iframe). |
| 384 | if (el.hasAttribute("data-hf-autostamped")) continue; |
| 385 | const hasLegacyAnchoredDefaults = |
| 386 | (el.style.top === "0px" || el.style.top === "0") && |
| 387 | (el.style.left === "0px" || el.style.left === "0") && |
| 388 | el.style.width === "100%" && |
| 389 | el.style.height === "100%"; |
| 390 | const hasCenteringTransform = /translate\(\s*-50%\s*,\s*-50%\s*\)/.test(el.style.transform); |
| 391 | if ( |
| 392 | hasLegacyAnchoredDefaults && |
| 393 | hasCenteringTransform && |
| 394 | !el.hasAttribute("data-width") && |
| 395 | !el.hasAttribute("data-height") |
| 396 | ) { |
| 397 | const previousTop = el.style.top; |
| 398 | const previousLeft = el.style.left; |
| 399 | const previousWidth = el.style.width; |
| 400 | const previousHeight = el.style.height; |
| 401 | el.style.top = ""; |
| 402 | el.style.left = ""; |
| 403 | el.style.width = ""; |
| 404 | el.style.height = ""; |
| 405 | const clearedComputed = window.getComputedStyle(el); |
| 406 | const cssProvidesClipLayout = |
| 407 | clearedComputed.top !== "auto" || |
| 408 | clearedComputed.bottom !== "auto" || |
| 409 | clearedComputed.left !== "auto" || |
| 410 | clearedComputed.right !== "auto" || |
| 411 | clearedComputed.width !== "0px" || |
| 412 | clearedComputed.height !== "0px"; |
| 413 | if (!cssProvidesClipLayout) { |
| 414 | el.style.top = previousTop; |
| 415 | el.style.left = previousLeft; |
| 416 | el.style.width = previousWidth; |
| 417 | el.style.height = previousHeight; |
no test coverage detected