Debug: log vidUpdate structure, handle all Gradio 5 video output shapes

app.py

@@ -1648,31 +1648,63 @@ _GLOBAL_JS = """
           // data[0] = video update, data[1] = waveform HTML update
           var vidUpdate  = out.data[0];
           var waveUpdate = out.data[1];
+          console.log('[_listenAndApply] vidUpdate raw:', JSON.stringify(vidUpdate));
+          console.log('[_listenAndApply] waveUpdate type:', typeof waveUpdate,
+                      waveUpdate && typeof waveUpdate === 'object' ? Object.keys(waveUpdate) : waveUpdate && String(waveUpdate).slice(0,80));
+
+          // Extract video URL — Gradio 5 gr.Video outputs as {video:{url:"...",...},subtitles:null}
+          // or sometimes wrapped in {value:{video:{url:"..."}}}
+          var newSrc = null;
+          if (vidUpdate) {
+            if (vidUpdate.video && vidUpdate.video.url) {
+              newSrc = vidUpdate.video.url;          // Gradio 5 direct
+            } else if (vidUpdate.value && vidUpdate.value.video && vidUpdate.value.video.url) {
+              newSrc = vidUpdate.value.video.url;    // wrapped
+            } else if (vidUpdate.value && vidUpdate.value.url) {
+              newSrc = vidUpdate.value.url;          // older style
+            } else if (typeof vidUpdate.value === 'string') {
+              newSrc = vidUpdate.value;              // plain string
+            } else if (vidUpdate.url) {
+              newSrc = vidUpdate.url;                // flat
+            }
+          }
+          console.log('[_listenAndApply] resolved video src:', newSrc);
+
           // Apply video: update the <video> src inside the slot_vid element
-          if (vidUpdate && vidUpdate.value) {
+          if (newSrc) {
             var vidEl = document.getElementById('slot_vid_' + slot_id);
             if (vidEl) {
               var video = vidEl.querySelector('video');
               if (video) {
-                var newSrc = vidUpdate.value.url || vidUpdate.value;
-                if (typeof newSrc === 'string') {
-                  video.src = newSrc;
-                  video.load();
-                }
+                // Gradio 5 uses Svelte — set src attribute AND property to force reload
+                video.setAttribute('src', newSrc);
+                video.src = newSrc;
+                video.load();
+                console.log('[_listenAndApply] set video src on', 'slot_vid_' + slot_id);
+              } else {
+                console.warn('[_listenAndApply] no <video> element found inside', 'slot_vid_' + slot_id);
               }
+            } else {
+              console.warn('[_listenAndApply] no element with id slot_vid_' + slot_id);
             }
           }
+
           // Apply waveform HTML: update innerHTML of the slot_wave element
-          if (waveUpdate && waveUpdate.value) {
+          var waveHtml = null;
+          if (waveUpdate) {
+            if (typeof waveUpdate === 'string') {
+              waveHtml = waveUpdate;
+            } else if (waveUpdate.value && typeof waveUpdate.value === 'string') {
+              waveHtml = waveUpdate.value;
+            }
+          }
+          if (waveHtml) {
             var waveEl = document.getElementById('slot_wave_' + slot_id);
             if (waveEl) {
               // Find the inner content div (Gradio wraps HTML component)
               var inner = waveEl.querySelector('.prose') || waveEl.querySelector('div');
-              if (inner) inner.innerHTML = waveUpdate.value;
-              else waveEl.innerHTML = waveUpdate.value;
-              // Also update the data-state on the new wf_container
-              var newContainer = waveEl.querySelector('#wf_container_' + slot_id);
-              // data-state is already embedded in the returned HTML
+              if (inner) inner.innerHTML = waveHtml;
+              else waveEl.innerHTML = waveHtml;
             }
           }
         }