explainer-video 0.0.0-stage → 0.4.0

package/skills/explainer-video-from-coursework/src/scene-diagram.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Diagram scene host</title>
+<style>
+  html, body {
+    margin: 0; padding: 0; width: 1920px; height: 1080px;
+    overflow: hidden; background: #080e1a;
+  }
+  svg#stage { display: block; width: 1920px; height: 1080px; }
+  text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+</style>
+</head>
+<body>
+<!--
+  Host for the DIAGRAM renderer. The scene config supplies the content and the
+  beat timings (relative to a narration segment); src/timeline.js supplies the
+  MEASURED segment windows produced by the audio stage.
+-->
+<svg id="stage" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"></svg>
+
+<script src="scene-core.js"></script>
+<script>
+  // ?scene=<name> names the config; ?work=<dir> scopes it to a video's own dir so
+  // multiple videos don't share a timeline or scene namespace (ROADMAP §1, "Work-dir layout").
+  var Q = new URLSearchParams(location.search);
+  var NAME = Q.get('scene') || 'srp-split';
+  var WORK = Q.get('work') || '';
+  var tlEl = document.createElement('script');
+  tlEl.src = WORK ? WORK + '/timeline.js' : 'timeline.js';
+  tlEl.onload = function () {
+    var s = document.createElement('script');
+    s.src = WORK ? WORK + '/scenes/' + NAME + '.js' : '../scenes/' + NAME + '.js';
+    s.onload = function () {
+      var TL = window.TIMELINE;
+      var scene = window.SceneCore.createScene({
+        svg: document.getElementById('stage'),
+        config: window.SCENE_CONFIG,
+        timeline: TL,
+      });
+      window.renderAt = function (t) { scene.renderAt(t); return true; };
+      window.VIDEO_META = { width: TL.width, height: TL.height, fps: TL.fps, total: TL.total };
+    };
+    document.head.appendChild(s);
+  };
+  document.head.appendChild(tlEl);
+</script>
+</body>
+</html>

package/skills/explainer-video-from-coursework/src/scene-svg.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>SVG scene host — the open lane</title>
+<style>
+  html, body { margin:0; padding:0; width:1920px; height:1080px; overflow:hidden; background:#080e1a; }
+  svg#stage { display:block; width:1920px; height:1080px; }
+  /* must match the font textW() measures with, or primitive layout drifts */
+  text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
+</style>
+</head>
+<body>
+<!--
+  Open lane for stage 5. The author's scene script defines:
+
+    window.SCENE_CONFIG = { renderAt(t, svg, timeline) }
+
+  renderAt is a PURE function of time: it draws the frame for t and returns, so
+  frames can be rendered in any order and re-rendered after an audio change. The
+  author owns the SVG completely — no node kinds, no fixed vocabulary.
+-->
+<svg id="stage" xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"></svg>
+
+<script src="scene-core.js"></script>
+<script>
+  var Q = new URLSearchParams(location.search);
+  var NAME = Q.get('scene') || 'svg';
+  var WORK = Q.get('work') || '';
+  var tlEl = document.createElement('script');
+  tlEl.src = WORK ? WORK + '/timeline.js' : 'timeline.js';
+  tlEl.onload = function () {
+    var s = document.createElement('script');
+    s.src = WORK ? WORK + '/scenes/' + NAME + '.js' : '../scenes/' + NAME + '.js';
+    s.onload = function () {
+      var TL = window.TIMELINE;
+      var cfg = window.SCENE_CONFIG;
+      if (!cfg || typeof cfg.renderAt !== 'function') {
+        throw new Error(NAME + ': SCENE_CONFIG must expose renderAt(t, svg, timeline)');
+      }
+      var stage = document.getElementById('stage');
+      window.renderAt = function (t) { cfg.renderAt(t, stage, TL); return true; };
+      window.VIDEO_META = { width: TL.width, height: TL.height, fps: TL.fps, total: TL.total };
+    };
+    document.head.appendChild(s);
+  };
+  document.head.appendChild(tlEl);
+</script>
+</body>
+</html>

package/skills/explainer-video-from-coursework/src/timeline.js

@@ -0,0 +1,297 @@
+window.TIMELINE = {
+  "fps": 30,
+  "width": 1920,
+  "height": 1080,
+  "total": 392.220317,
+  "scenes": {
+    "hook": {
+      "start": 0.6,
+      "end": 23.88,
+      "dur": 23.28
+    },
+    "why": {
+      "start": 24.63,
+      "end": 55.67,
+      "dur": 31.04
+    },
+    "why-analogy": {
+      "start": 56.42,
+      "end": 75.74,
+      "dur": 19.32
+    },
+    "l4-vs-l7": {
+      "start": 76.49,
+      "end": 114.01,
+      "dur": 37.52
+    },
+    "l4l7-analogy": {
+      "start": 114.76,
+      "end": 135.52,
+      "dur": 20.76
+    },
+    "round-robin": {
+      "start": 136.27,
+      "end": 163.91,
+      "dur": 27.64
+    },
+    "weighted-round-robin": {
+      "start": 164.66,
+      "end": 183.38,
+      "dur": 18.72
+    },
+    "least-connections": {
+      "start": 184.13,
+      "end": 206.25,
+      "dur": 22.12
+    },
+    "ip-hash": {
+      "start": 207,
+      "end": 231.6,
+      "dur": 24.6
+    },
+    "consistent-hashing": {
+      "start": 232.35,
+      "end": 262.43,
+      "dur": 30.08
+    },
+    "least-response-time": {
+      "start": 263.18,
+      "end": 284.94,
+      "dur": 21.76
+    },
+    "health-checks": {
+      "start": 285.69,
+      "end": 313.57,
+      "dur": 27.88
+    },
+    "graceful-draining": {
+      "start": 314.32,
+      "end": 337.96,
+      "dur": 23.64
+    },
+    "code-demos": {
+      "start": 338.71,
+      "end": 366.55,
+      "dur": 27.84
+    },
+    "outro": {
+      "start": 367.3,
+      "end": 390.62,
+      "dur": 23.32
+    }
+  },
+  "windows": {
+    "hook": {
+      "start": 0,
+      "end": 24.03,
+      "dur": 24.03
+    },
+    "why": {
+      "start": 24.03,
+      "end": 55.82,
+      "dur": 31.79
+    },
+    "why-analogy": {
+      "start": 55.82,
+      "end": 75.89,
+      "dur": 20.07
+    },
+    "l4-vs-l7": {
+      "start": 75.89,
+      "end": 114.16,
+      "dur": 38.27
+    },
+    "l4l7-analogy": {
+      "start": 114.16,
+      "end": 135.67,
+      "dur": 21.51
+    },
+    "round-robin": {
+      "start": 135.67,
+      "end": 164.06,
+      "dur": 28.39
+    },
+    "weighted-round-robin": {
+      "start": 164.06,
+      "end": 183.53,
+      "dur": 19.47
+    },
+    "least-connections": {
+      "start": 183.53,
+      "end": 206.4,
+      "dur": 22.87
+    },
+    "ip-hash": {
+      "start": 206.4,
+      "end": 231.75,
+      "dur": 25.35
+    },
+    "consistent-hashing": {
+      "start": 231.75,
+      "end": 262.58,
+      "dur": 30.83
+    },
+    "least-response-time": {
+      "start": 262.58,
+      "end": 285.09,
+      "dur": 22.51
+    },
+    "health-checks": {
+      "start": 285.09,
+      "end": 313.72,
+      "dur": 28.63
+    },
+    "graceful-draining": {
+      "start": 313.72,
+      "end": 338.11,
+      "dur": 24.39
+    },
+    "code-demos": {
+      "start": 338.11,
+      "end": 366.7,
+      "dur": 28.59
+    },
+    "outro": {
+      "start": 366.7,
+      "end": 392.22,
+      "dur": 25.52
+    }
+  },
+  "segments": [
+    {
+      "key": "hook",
+      "start": 0.6,
+      "end": 23.88,
+      "duration": 23.28,
+      "pad": 0,
+      "words": 65,
+      "cached": true
+    },
+    {
+      "key": "why",
+      "start": 24.63,
+      "end": 55.67,
+      "duration": 31.04,
+      "pad": 0,
+      "words": 70,
+      "cached": true
+    },
+    {
+      "key": "why-analogy",
+      "start": 56.42,
+      "end": 75.74,
+      "duration": 19.32,
+      "pad": 0,
+      "words": 58,
+      "cached": true
+    },
+    {
+      "key": "l4-vs-l7",
+      "start": 76.49,
+      "end": 114.01,
+      "duration": 37.52,
+      "pad": 0,
+      "words": 86,
+      "cached": true
+    },
+    {
+      "key": "l4l7-analogy",
+      "start": 114.76,
+      "end": 135.52,
+      "duration": 20.76,
+      "pad": 0,
+      "words": 55,
+      "cached": true
+    },
+    {
+      "key": "round-robin",
+      "start": 136.27,
+      "end": 163.91,
+      "duration": 27.64,
+      "pad": 0,
+      "words": 66,
+      "cached": true
+    },
+    {
+      "key": "weighted-round-robin",
+      "start": 164.66,
+      "end": 183.38,
+      "duration": 18.72,
+      "pad": 0,
+      "words": 49,
+      "cached": true
+    },
+    {
+      "key": "least-connections",
+      "start": 184.13,
+      "end": 206.25,
+      "duration": 22.12,
+      "pad": 0,
+      "words": 52,
+      "cached": true
+    },
+    {
+      "key": "ip-hash",
+      "start": 207,
+      "end": 231.6,
+      "duration": 24.6,
+      "pad": 0,
+      "words": 64,
+      "cached": true
+    },
+    {
+      "key": "consistent-hashing",
+      "start": 232.35,
+      "end": 262.43,
+      "duration": 30.08,
+      "pad": 0,
+      "words": 76,
+      "cached": true
+    },
+    {
+      "key": "least-response-time",
+      "start": 263.18,
+      "end": 284.94,
+      "duration": 21.76,
+      "pad": 0,
+      "words": 49,
+      "cached": true
+    },
+    {
+      "key": "health-checks",
+      "start": 285.69,
+      "end": 313.57,
+      "duration": 27.88,
+      "pad": 0,
+      "words": 67,
+      "cached": true
+    },
+    {
+      "key": "graceful-draining",
+      "start": 314.32,
+      "end": 337.96,
+      "duration": 23.64,
+      "pad": 0,
+      "words": 60,
+      "cached": true
+    },
+    {
+      "key": "code-demos",
+      "start": 338.71,
+      "end": 366.55,
+      "duration": 27.84,
+      "pad": 0,
+      "words": 78,
+      "cached": true
+    },
+    {
+      "key": "outro",
+      "start": 367.3,
+      "end": 390.62,
+      "duration": 23.32,
+      "pad": 0,
+      "words": 68,
+      "cached": true
+    }
+  ]
+};

package/skills/explainer-video-from-coursework/src/timing-chart.js

@@ -0,0 +1,160 @@
+/* =============================================================================
+   timing-chart.js — browser side of the timing audit.
+
+   `tools/timing-report.mjs` sets window.TIMING_DATA and inlines this file (plus
+   Plotly) into timing.html, so the page is self-contained and opens with no
+   network. Shape of the data:
+
+     { mode: 'flat' | 'grouped',
+       stages: [['3', 'script'], …],
+       modules: [{ name, display, videos: [{ index, title, stages: { '<stage>': secs } }] }] }
+
+   mode 'flat'    — every video on one stacked-bar chart. Used when the series
+                    spans a single module, where grouping would be a pointless
+                    extra click.
+   mode 'grouped' — one aggregate bar per module (summed across its videos), click
+                    a bar to break that module down by video. Used as soon as a
+                    series spans more than one module, which is the case that made
+                    a single 85-row chart unusable.
+
+   Layout notes, all learned the hard way:
+     · the <h1>/<h2> titles are HTML, not Plotly titles — a Plotly title anchors to
+       the container while the legend anchors to the plot, so on short charts they
+       collide;
+     · the legend is placed with yanchor:'bottom' at a pixel offset converted into
+       plot fractions, after reserving room for half a tick label;
+     · rows are 34px so a two-line wrapped label does not collide with its
+       neighbour, and wrapping is capped at two lines;
+     · labels are pushed off the axis with `ticks:'outside'` + `ticklen`, since
+       cartesian axes have no tick-label padding property.
+   ========================================================================== */
+(function () {
+  const D = window.TIMING_DATA;
+  if (!D || !window.Plotly) return;
+
+  const STAGES = D.stages || [];
+  const COLORS = ['#4f46e5', '#0ea5e9', '#14b8a6', '#f59e0b', '#ef4444', '#8b5cf6',
+                  '#ec4899', '#10b981', '#f97316', '#6366f1', '#a855f7', '#22c55e'];
+  const stageName = {}, colorOf = {};
+  STAGES.forEach(([k, n], i) => { stageName[k] = n; colorOf[k] = COLORS[i % COLORS.length]; });
+  const label = (k) => k + ' · ' + (stageName[k] || '');
+
+  const escHtml = (s) => String(s ?? '').replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const rev = (a) => a.slice().reverse();
+  const round1 = (n) => Math.round(n * 10) / 10;
+
+  function wrap(t, max) {
+    const words = escHtml(t).split(/\s+/);
+    const lines = []; let cur = '';
+    for (const w of words) {
+      if (!cur) cur = w;
+      else if ((cur + ' ' + w).length <= max) cur += ' ' + w;
+      else { lines.push(cur); cur = w; }
+    }
+    if (cur) lines.push(cur);
+    if (lines.length > 2) {                 // cap at two lines so rows stay predictable
+      const rest = lines.slice(1).join(' ');
+      lines.length = 1;
+      lines.push(rest.length > max ? rest.slice(0, max - 1) + '…' : rest);
+    }
+    return lines.join('<br>');
+  }
+
+  function tracesFor(videos) {
+    return STAGES.map(([k]) => ({
+      type: 'bar', orientation: 'h', name: label(k),
+      y: videos.map((v) => v.title),
+      x: videos.map((v) => round1(v.stages[k] || 0)),
+      marker: { color: colorOf[k] },
+      hovertemplate: '%{y}<br>' + label(k) + ': %{x:.1f}s<extra></extra>',
+    }));
+  }
+
+  function aggTraces(rows) {
+    return STAGES.map(([k]) => ({
+      type: 'bar', orientation: 'h', name: label(k),
+      y: rows.map((r) => r.title),
+      x: rows.map((r) => round1(r.stages[k] || 0)),
+      customdata: rows.map((r) => r.count),
+      marker: { color: colorOf[k] },
+      hovertemplate: '%{y}<br>' + label(k) + ': %{x:.1f}s<br>%{customdata} video(s)<extra></extra>',
+    }));
+  }
+
+  function layoutFor(rows, wrapMax) {
+    const legendH = 22, labelHalf = 8, gap = 12;
+    const topPad = labelHalf + gap + legendH;
+    const b = 40, rowH = 34;
+    const h = Math.max(200, rows.length * rowH + topPad + b);
+    const plotH = Math.max(48, h - topPad - b);
+    return {
+      barmode: 'stack', hovermode: 'closest',
+      xaxis: { title: { text: 'seconds', font: { size: 11 } }, gridcolor: '#eceff3', zeroline: true },
+      yaxis: {
+        automargin: true, tickmode: 'array',
+        ticks: 'outside', ticklen: 16, tickcolor: '#cbd5e1',
+        tickvals: rows.map((r) => r.title),
+        ticktext: rows.map((r) => wrap(r.title, wrapMax || 42)),
+        tickfont: { size: 11 },
+      },
+      height: h,
+      margin: { l: 0, r: 24, t: topPad, b },
+      showlegend: true,
+      legend: {
+        orientation: 'h', yanchor: 'bottom',
+        y: 1 + (labelHalf + gap) / plotH,
+        x: 0, xanchor: 'left', traceorder: 'normal', font: { size: 11 },
+      },
+      hoverlabel: { namelength: -1 },
+    };
+  }
+
+  const CONFIG = { displaylogo: false, responsive: true };
+
+  function renderFlat() {
+    const all = [];
+    for (const m of (D.modules || [])) for (const v of (m.videos || [])) all.push(v);
+    all.sort((a, b) => a.index - b.index);
+    const vs = rev(all);                      // plan order reads top-down
+    Plotly.newPlot('timing-chart', tracesFor(vs), layoutFor(vs, 42), CONFIG);
+  }
+
+  function renderGrouped() {
+    const rows = rev((D.modules || []).map((m) => {
+      const stages = {};
+      for (const [k] of STAGES) stages[k] = m.videos.reduce((a, v) => a + (v.stages[k] || 0), 0);
+      return { title: m.display, stages, count: m.videos.length, videos: m.videos };
+    }));
+    const el = document.getElementById('timing-chart');
+    Plotly.newPlot(el, aggTraces(rows), layoutFor(rows, 30), CONFIG);
+    el.on('plotly_click', (e) => {
+      const name = e.points[0].y;
+      const m = (D.modules || []).find((x) => x.display === name);
+      if (m) showDetail(m);
+    });
+  }
+
+  function showDetail(m) {
+    const wrapEl = document.getElementById('timing-detail-wrap');
+    if (!wrapEl) return;
+    document.getElementById('timing-detail-title').textContent =
+      m.display + ' — ' + m.videos.length + ' video' + (m.videos.length === 1 ? '' : 's');
+    const vs = rev(m.videos.slice().sort((a, b) => a.index - b.index));
+    Plotly.react('timing-detail', tracesFor(vs), layoutFor(vs, 46), CONFIG);
+    wrapEl.hidden = false;
+    wrapEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  const reset = document.getElementById('all-modules');
+  if (reset) {
+    reset.onclick = (e) => {
+      e.preventDefault();
+      const w = document.getElementById('timing-detail-wrap');
+      if (w) w.hidden = true;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+  }
+
+  if (D.mode === 'grouped') renderGrouped(); else renderFlat();
+})();