From 72a938e7046b3d9227cbb61e60d116ba6908eb15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 26 May 2026 17:37:01 +0000
Subject: [PATCH] fix: include pip sub-composition source file

---
 .../src/compositions/pip.html                 | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 packages/producer/tests/pip-video-late-host/src/compositions/pip.html

diff --git a/packages/producer/tests/pip-video-late-host/src/compositions/pip.html b/packages/producer/tests/pip-video-late-host/src/compositions/pip.html
new file mode 100644
index 000000000..9a4be1721
--- /dev/null
+++ b/packages/producer/tests/pip-video-late-host/src/compositions/pip.html
@@ -0,0 +1,63 @@
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<template id="pip-template">
+  <div data-composition-id="pip-scene" data-width="1920" data-height="1080">
+    <!-- Pip video: data-start="3" is global time matching the host start.
+         Before the fix, resolveStartForElement returned 3+3=6, hiding the
+         video for the entire host window (3–6s). -->
+    <video
+      id="pip-video"
+      data-start="3"
+      data-duration="3"
+      data-track-index="0"
+      src="https://gen-os-static.s3.us-east-2.amazonaws.com/astral_assets/uploaded_assets/fb7e48ac_f6bf2ab079394d7ebd0491e7008a9242.mp4"
+      muted
+      playsinline
+      crossorigin="anonymous"
+      style="position: absolute; width: 100%; height: 100%; object-fit: cover;"
+    ></video>
+
+    <!-- Overlay text confirming pip scene is active -->
+    <div
+      id="pip-label"
+      data-start="3"
+      data-duration="3"
+      style="
+        position: absolute;
+        bottom: 80px;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        font-family: system-ui, sans-serif;
+        font-size: 48px;
+        font-weight: 700;
+        color: #fff;
+        text-shadow: 0 2px 8px rgba(0,0,0,0.7);
+        z-index: 10;
+      "
+    >PIP VIDEO (3–6s)</div>
+
+    <style>
+      [data-composition-id="pip-scene"] {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #0a0a23;
+      }
+    </style>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      tl.fromTo("#pip-video", { scale: 1.05 }, { scale: 1, duration: 3, ease: "none" }, 0);
+      tl.fromTo(
+        "#pip-label",
+        { y: 20, opacity: 0 },
+        { y: 0, opacity: 1, duration: 0.4, ease: "power2.out" },
+        0.2,
+      );
+
+      window.__timelines["pip-scene"] = tl;
+    </script>
+  </div>
+</template>