fix(core): avoid live volume probe during render

2026-09-11 14:50:02 +00:00 · 2026-07-26 22:39:58 +00:00
parent 2dddb4c463
commit 477defc7e7
11 changed files with 219 additions and 1 deletions
@@ -0,0 +1,56 @@
+<template id="child-template">
+  <div
+    id="child-root"
+    data-composition-id="child"
+    data-start="0"
+    data-duration="10"
+    data-width="640"
+    data-height="360"
+  >
+    <div class="future-state">
+      <strong>MUST BE VISIBLE</strong>
+      <span>static audio cannot seek visual state</span>
+    </div>
+  </div>
+
+  <style>
+    [data-composition-id="child"] {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      width: 640px;
+      height: 360px;
+    }
+
+    [data-composition-id="child"] .future-state {
+      display: grid;
+      gap: 14px;
+      min-width: 420px;
+      padding: 42px;
+      border: 8px solid #d8ffe5;
+      border-radius: 28px;
+      color: #f4fff7;
+      background: #087443;
+      box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
+      font: 22px/1.3 Arial, sans-serif;
+      text-align: center;
+      visibility: visible;
+    }
+
+    [data-composition-id="child"] .future-state strong {
+      font-size: 38px;
+      letter-spacing: 0.04em;
+    }
+  </style>
+
+  <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+      const timeline = gsap.timeline({ paused: true });
+      timeline.to(".future-state", { opacity: 0.2, duration: 0.25 }, 9.4);
+      timeline.set(".future-state", { visibility: "hidden" }, 9.65);
+      window.__timelines.child = timeline;
+    })();
+  </script>
+</template>
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Static volume with future nested set</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        width: 640px;
+        height: 360px;
+        margin: 0;
+        overflow: hidden;
+        background: #07111f;
+      }
+
+      #root,
+      #child-host {
+        position: absolute;
+        inset: 0;
+        width: 640px;
+        height: 360px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="12"
+      data-width="640"
+      data-height="360"
+    >
+      <div
+        id="child-host"
+        data-composition-id="child"
+        data-composition-src="compositions/child.html"
+        data-start="2"
+        data-duration="10"
+        data-track-index="0"
+      ></div>
+      <audio
+        id="bed"
+        src="assets/silence.wav"
+        data-start="0"
+        data-duration="12"
+        data-track-index="1"
+        data-volume="1"
+      ></audio>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const timeline = gsap.timeline({ paused: true });
+      timeline.to({}, { duration: 12 }, 0);
+      window.__timelines.main = timeline;
+    </script>
+  </body>
+</html>