admin: play the clip, the raw take, the seed frame and the audio per shot

admin.html

@@ -132,6 +132,72 @@ function shotHtml(s) {
         ? '<details><summary>The request body actually POSTed</summary><pre>'
           + esc(s.request_sent) + '</pre></details>'
         : '')
+    // THE MEDIA. A fault is understood by relating four things, and until
+    // now the panel showed none of them: the cut that went in the film, the
+    // RAW take before cutting, the seed frame it grew from, and the audio we
+    // handed the engine. The raw take is the one that separates "the engine
+    // never said it" from "we cut it off" - the distinction that cost a day
+    // on shot 03, where the missing word was in the take all along.
+    + (function () {
+        var bits = [];
+        if (s.clip_url) {
+          bits.push('<div><div class="kv"><b>the cut used in the film</b>'
+            + (s.clip_seconds ? ' &middot; ' + s.clip_seconds + 's' : '') + '</div>'
+            + '<video controls playsinline preload="metadata" src="'
+            + esc(s.clip_url) + '" style="width:100%;border-radius:6px"></video></div>');
+        }
+        if (s.take_url) {
+          bits.push('<div><div class="kv">the raw take, before cutting</div>'
+            + '<video controls playsinline preload="metadata" src="'
+            + esc(s.take_url) + '" style="width:100%;border-radius:6px"></video></div>');
+        }
+        if (s.plate_url) {
+          bits.push('<div><div class="kv">the seed frame it was filmed from</div>'
+            + '<img src="' + esc(s.plate_url)
+            + '" alt="seed frame" style="width:100%;border-radius:6px"></div>');
+        }
+        (s.audio_urls || []).forEach(function (u, i) {
+          bits.push('<div><div class="kv">audio sent to the engine'
+            + ((s.audio_urls.length > 1) ? ' (' + (i + 1) + ')' : '') + '</div>'
+            + '<audio controls preload="metadata" src="' + esc(u)
+            + '" style="width:100%"></audio></div>');
+        });
+        return bits.length
+          ? '<div class="grid2" style="margin:10px 0;gap:10px">' + bits.join('') + '</div>'
+          : '';
+      })()
+    // What was asked for against what was paid for. They differ whenever a
+    // shot was re-rolled, and showing the second as "duration" is what made a
+    // 9 second request read as 15.
+    + ((s.source_seconds || s.billed_seconds)
+        ? '<div class="kv">asked for <b>' + (s.source_seconds || '?') + 's</b>'
+          + ((s.billed_seconds && s.billed_seconds !== s.source_seconds)
+              ? ' &middot; billed ' + s.billed_seconds + 's (re-rolled)' : '')
+          + '</div>'
+        : '')
+    // What the line was meant to say and what the render-time check heard.
+    + ((s.audio_said || []).length
+        ? '<div class="kv">' + (s.audio_said || []).map(function (a) {
+            return 'said: <b>' + esc(a.text || '') + '</b>'
+              + (a.verdict ? ' &middot; recording ' + esc(a.verdict) : '')
+              + (a.seconds ? ' &middot; ' + a.seconds + 's' : '');
+          }).join('<br>') + '</div>'
+        : '')
+    + (s.audio_check
+        ? '<div class="kv">in the film: ' + esc(s.audio_check)
+          + (s.audio_heard ? ' &middot; heard "' + esc(s.audio_heard) + '"' : '')
+          + '</div>'
+        : '')
+    // The picture verdict, beside the frame it happened in.
+    + (s.vision_check
+        ? '<div class="kv">picture: <b>' + esc(s.vision_check) + '</b></div>'
+          + (s.vision_faults || []).map(function (f) {
+              return '<div class="kv warnw">' + esc(f.kind || '') + ': '
+                + esc(f.what || '')
+                + (f.prompt_fix ? '<br><i>fix: ' + esc(f.prompt_fix) + '</i>' : '')
+                + '</div>';
+            }).join('')
+        : '')
     + '</div>';
 }