fix PSD tools flicker

Author: bea4dev

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frame-script",
   "private": true,
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "scripts": {
     "dev:vite": "vite --config vite.studio.config.ts",

render/src/main.rs

@@ -163,6 +163,49 @@ async fn wait_for_images_ready(page: &Page) {
     page.evaluate(script).await.unwrap();
 }
 
+async fn wait_for_audio_waveforms_ready(page: &Page) {
+    let script = r#"
+        (async () => {
+          const api = window.__frameScript;
+          if (api && typeof api.waitAudioWaveformsReady === "function") {
+            await api.waitAudioWaveformsReady();
+          }
+        })()
+    "#;
+    page.evaluate(script).await.unwrap();
+}
+
+async fn wait_for_psd_ready(page: &Page) {
+    let script = r#"
+        (async () => {
+          const api = window.__frameScript;
+          if (api && typeof api.waitPsdReady === "function") {
+            await api.waitPsdReady();
+          }
+        })()
+    "#;
+    page.evaluate(script).await.unwrap();
+}
+
+async fn wait_for_psd_frame(page: &Page, frame: usize) {
+    let script = format!(
+        r#"
+        (async () => {{
+          const api = window.__frameScript;
+          if (api && typeof api.waitPsdFrame === "function") {{
+            try {{
+              await api.waitPsdFrame({});
+            }} catch (_e) {{
+              // ignore
+            }}
+          }}
+        }})()
+    "#,
+        frame
+    );
+    page.evaluate(script).await.unwrap();
+}
+
 async fn wait_for_webgl_ready(page: &Page) {
     let script = r#"
         (async () => {
@@ -337,8 +380,10 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
         let completed_clone = completed.clone();
         let is_canceled_clone = is_canceled.clone();
         tasks.push(tokio::spawn(async move {
-            let profile_dir =
-                PathBuf::from(format!("{}/profiles/profile-{:03}", FRAME_DIRECTORY, worker_id));
+            let profile_dir = PathBuf::from(format!(
+                "{}/profiles/profile-{:03}",
+                FRAME_DIRECTORY, worker_id
+            ));
 
             let (mut browser, mut handler) = spawn_browser_instance(profile_dir, width, height)
                 .await
@@ -361,7 +406,9 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
                 ffmpeg_low_memory_clone,
             )
             .await
-            .map_err(|error| format!("worker {worker_id}: failed to create ffmpeg writer: {error}"))?;
+            .map_err(|error| {
+                format!("worker {worker_id}: failed to create ffmpeg writer: {error}")
+            })?;
 
             let page = browser
                 .new_page(page_url)
@@ -373,6 +420,8 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
             wait_for_frame_api(&page).await;
             wait_for_animation_ready(&page).await;
             wait_for_draw_text_ready(&page).await;
+            wait_for_audio_waveforms_ready(&page).await;
+            wait_for_psd_ready(&page).await;
             wait_for_webgl_ready(&page).await;
 
             for frame in start..end {
@@ -389,9 +438,9 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
                     "#,
                     frame
                 );
-                page.evaluate(js)
-                    .await
-                    .map_err(|error| format!("worker {worker_id}: setFrame eval failed: {error}"))?;
+                page.evaluate(js).await.map_err(|error| {
+                    format!("worker {worker_id}: setFrame eval failed: {error}")
+                })?;
 
                 wait_for_next_frame(&page).await;
 
@@ -410,10 +459,12 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
                 "#,
                     frame
                 );
-                page.evaluate(script)
-                    .await
-                    .map_err(|error| format!("worker {worker_id}: waitCanvasFrame eval failed: {error}"))?;
+                page.evaluate(script).await.map_err(|error| {
+                    format!("worker {worker_id}: waitCanvasFrame eval failed: {error}")
+                })?;
 
+                wait_for_audio_waveforms_ready(&page).await;
+                wait_for_psd_frame(&page, frame).await;
                 wait_for_images_ready(&page).await;
                 wait_for_webgl_frame(&page, frame).await;
 

src/lib/audio-waveform.ts

@@ -15,6 +15,94 @@ export type WaveformData = {
   durationSec: number
 }
 
+type AudioWaveformTracker = {
+  pending: number
+  start: () => () => void
+  wait: () => Promise<void>
+}
+
+const AUDIO_WAVEFORM_TRACKER_KEY = "__frameScript_AudioWaveformTracker"
+
+const getAudioWaveformTracker = (): AudioWaveformTracker => {
+  const g = globalThis as unknown as Record<string, unknown>
+  const existing = g[AUDIO_WAVEFORM_TRACKER_KEY] as
+    | AudioWaveformTracker
+    | undefined
+  if (existing) return existing
+
+  let pending = 0
+  const waiters = new Set<() => void>()
+
+  const notifyIfReady = () => {
+    if (pending !== 0) return
+    for (const resolve of Array.from(waiters)) {
+      resolve()
+    }
+    waiters.clear()
+  }
+
+  const tracker: AudioWaveformTracker = {
+    get pending() {
+      return pending
+    },
+    start: () => {
+      pending += 1
+      let done = false
+      return () => {
+        if (done) return
+        done = true
+        pending = Math.max(0, pending - 1)
+        notifyIfReady()
+      }
+    },
+    wait: () => {
+      if (pending === 0) return Promise.resolve()
+      return new Promise<void>((resolve) => {
+        waiters.add(resolve)
+      })
+    },
+  }
+
+  g[AUDIO_WAVEFORM_TRACKER_KEY] = tracker
+  return tracker
+}
+
+const waitForAnimationTick = () =>
+  new Promise<void>((resolve) => {
+    if (
+      typeof window === "undefined" ||
+      typeof window.requestAnimationFrame !== "function"
+    ) {
+      setTimeout(resolve, 0)
+      return
+    }
+    window.requestAnimationFrame(() => resolve())
+  })
+
+const installAudioWaveformApi = () => {
+  if (typeof window === "undefined") return
+  const tracker = getAudioWaveformTracker()
+  const waitAudioWaveformsReady = async () => {
+    while (true) {
+      if (tracker.pending === 0) {
+        await waitForAnimationTick()
+        if (tracker.pending === 0) return
+      }
+      await tracker.wait()
+    }
+  }
+
+  ;(window as any).__frameScript = {
+    ...(window as any).__frameScript,
+    waitAudioWaveformsReady,
+    getAudioWaveformsPending: () => tracker.pending,
+  }
+}
+
+if (typeof window !== "undefined") {
+  installAudioWaveformApi()
+}
+
 const waveformCache = new Map<string, WaveformData | null>()
 const waveformPromises = new Map<string, Promise<WaveformData | null>>()
 let waveformAudioContext: AudioContext | null = null
@@ -76,6 +164,7 @@ export const loadWaveformData = async (
   const existing = waveformPromises.get(path)
   if (existing) return existing
 
+  const finishPending = getAudioWaveformTracker().start()
   const promise = (async () => {
     try {
       const ctx = getAudioContext()
@@ -95,6 +184,7 @@ export const loadWaveformData = async (
       return null
     } finally {
       waveformPromises.delete(path)
+      finishPending()
     }
   })()