Phase 6 WIP

2026-08-05 11:56:52 +02:00
parent 59180948d0
commit 968101c532
7 changed files with 983 additions and 4 deletions
@@ -0,0 +1,152 @@
+// The transport strip: sections coloured by kind, bar ticks, scene-change
+// markers, playhead.
+//
+// This is the review surface. Segmentation problems are visible here at a glance
+// in a way they are not from watching the video — a boundary in the wrong place
+// shows up as a coloured block that doesn't line up with what you're hearing.
+
+const KIND_COLORS = {
+    intro:     '#2f4858',
+    build:     '#8a5a2b',
+    drop:      '#b5323c',
+    sustain:   '#3a6b52',
+    breakdown: '#3d3a6b',
+    outro:     '#43404a',
+};
+
+export class TimelineStrip {
+    constructor(canvas, { onSeek = null } = {}) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.onSeek = onSeek;
+        this.show = null;
+        this.frame = 0;
+        this.hoverFrame = -1;
+        this.loopSection = -1;
+
+        canvas.addEventListener('pointerdown', (e) => this._seekFromEvent(e));
+        canvas.addEventListener('pointermove', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            this.hoverFrame = this._frameAt(e.clientX - rect.left, rect.width);
+            if (e.buttons & 1) this._seekFromEvent(e);
+        });
+        canvas.addEventListener('pointerleave', () => { this.hoverFrame = -1; });
+    }
+
+    setShow(show) { this.show = show; }
+    setFrame(frame) { this.frame = frame; }
+    setLoopSection(index) { this.loopSection = index; }
+
+    _frameAt(x, width) {
+        if (!this.show || !this.show.ready) return 0;
+        return Math.round((x / Math.max(1, width)) * (this.show.frameCount - 1));
+    }
+
+    _seekFromEvent(event) {
+        if (!this.onSeek || !this.show || !this.show.ready) return;
+        const rect = this.canvas.getBoundingClientRect();
+        this.onSeek(this._frameAt(event.clientX - rect.left, rect.width));
+    }
+
+    resize() {
+        const rect = this.canvas.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = Math.max(1, Math.round(rect.width * dpr));
+        this.canvas.height = Math.max(1, Math.round(rect.height * dpr));
+        this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        this._w = rect.width;
+        this._h = rect.height;
+    }
+
+    draw() {
+        const ctx = this.ctx;
+        const w = this._w || this.canvas.width;
+        const h = this._h || this.canvas.height;
+        ctx.clearRect(0, 0, w, h);
+
+        ctx.fillStyle = '#0e1016';
+        ctx.fillRect(0, 0, w, h);
+
+        const show = this.show;
+        if (!show || !show.ready) return;
+
+        const track = show.track;
+        const total = show.frameCount;
+        const toX = (frame) => (frame / total) * w;
+
+        // Sections.
+        for (const section of track.sections) {
+            const x0 = toX(section.startFrame);
+            const x1 = toX(section.endFrame);
+            const look = show.look.sections[section.index];
+
+            ctx.fillStyle = KIND_COLORS[section.kind] || '#333';
+            ctx.fillRect(x0, 0, Math.max(1, x1 - x0), h);
+
+            if (look && look.locked) {
+                ctx.save();
+                ctx.strokeStyle = 'rgba(250, 204, 21, 0.85)';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(x0 + 1, 1, Math.max(1, x1 - x0) - 2, h - 2);
+                ctx.restore();
+            }
+            if (section.index === this.loopSection) {
+                ctx.fillStyle = 'rgba(255,255,255,0.10)';
+                ctx.fillRect(x0, 0, Math.max(1, x1 - x0), h);
+            }
+
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(x0, 0, Math.max(0, x1 - x0), h);
+            ctx.clip();
+            ctx.fillStyle = 'rgba(255,255,255,0.72)';
+            ctx.font = '10px ui-monospace, monospace';
+            ctx.fillText(section.kind, x0 + 5, 13);
+            if (look) {
+                ctx.fillStyle = 'rgba(255,255,255,0.45)';
+                ctx.fillText(look.layers[0].module.name, x0 + 5, h - 6);
+            }
+            ctx.restore();
+
+            // Boundary line.
+            ctx.strokeStyle = 'rgba(0,0,0,0.65)';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(x0 + 0.5, 0);
+            ctx.lineTo(x0 + 0.5, h);
+            ctx.stroke();
+        }
+
+        // Bar ticks — sparse enough to stay readable on a long track.
+        const barSeconds = (track.tempo.period * track.tempo.beatsPerBar) / track.fps;
+        const pixelsPerBar = (barSeconds * track.fps / total) * w;
+        if (pixelsPerBar > 6) {
+            const every = pixelsPerBar > 18 ? 1 : 4;
+            ctx.strokeStyle = 'rgba(255,255,255,0.10)';
+            ctx.beginPath();
+            let bar = 0;
+            for (let t = 0; t < track.duration; t += barSeconds, bar++) {
+                if (bar % every) continue;
+                const x = Math.round(toX(t * track.fps)) + 0.5;
+                ctx.moveTo(x, h - 7);
+                ctx.lineTo(x, h);
+            }
+            ctx.stroke();
+        }
+
+        // Hover.
+        if (this.hoverFrame >= 0) {
+            ctx.fillStyle = 'rgba(255,255,255,0.16)';
+            ctx.fillRect(toX(this.hoverFrame), 0, 1, h);
+        }
+
+        // Playhead.
+        const px = toX(this.frame);
+        ctx.fillStyle = '#f8fafc';
+        ctx.fillRect(px - 1, 0, 2, h);
+        ctx.fillStyle = 'rgba(248,250,252,0.25)';
+        ctx.fillRect(0, h - 2, px, 2);
+    }
+}
+
+export { KIND_COLORS };
@@ -1 +1,149 @@
-/* styles */
+:root {
+    color-scheme: dark;
+    --bg: #07080c;
+    --panel: #0e1016;
+    --line: #1c2029;
+    --text: #d6dae3;
+    --dim: #7d8698;
+    --accent: #4ade80;
+}
+
+* { box-sizing: border-box; }
+
+body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--text);
+    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+    overflow: hidden;
+}
+
+#app {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    grid-template-rows: 1fr auto;
+    grid-template-areas: "stage panel" "transport panel";
+    height: 100vh;
+    gap: 1px;
+    background: var(--line);
+}
+
+#stage {
+    grid-area: stage;
+    position: relative;
+    background: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+#canvas { display: block; max-width: 100%; max-height: 100%; }
+
+#overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#dropzone {
+    width: 100%; height: 100%;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer;
+    border: 1px dashed var(--line);
+}
+#dropzone:hover { background: rgba(255,255,255,0.02); }
+.dz-inner { text-align: center; }
+.dz-title { font-size: 26px; letter-spacing: .34em; text-transform: uppercase; margin-bottom: 12px; }
+.dz-sub { color: var(--dim); }
+.dz-hint { color: #4b5563; font-size: 11px; margin-top: 6px; }
+
+#analysing { text-align: center; min-width: 260px; }
+.an-title { letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
+.an-step { margin: 8px 0; color: var(--text); }
+.an-bar { height: 3px; background: var(--line); overflow: hidden; margin-top: 8px; }
+.an-fill { height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
+
+#hud {
+    position: absolute; top: 10px; left: 10px;
+    background: rgba(7,8,12,0.82);
+    border: 1px solid var(--line);
+    padding: 8px 10px;
+    font-size: 11px; line-height: 1.65;
+    color: #9aa3b4;
+    pointer-events: none;
+}
+
+#transport { grid-area: transport; background: var(--panel); }
+#timeline { height: 46px; }
+#timeline-canvas { width: 100%; height: 46px; display: block; cursor: pointer; }
+
+#controls {
+    display: flex; align-items: center; gap: 6px;
+    padding: 8px 10px;
+    border-top: 1px solid var(--line);
+    flex-wrap: wrap;
+}
+#controls .spacer { flex: 1; }
+#time-display, #section-display { color: var(--dim); font-size: 12px; }
+
+button, select {
+    background: #171a22;
+    color: var(--text);
+    border: 1px solid var(--line);
+    padding: 5px 10px;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+button:hover, select:hover { background: #1f232d; }
+button.primary { border-color: #2f6f4a; color: var(--accent); }
+button.wide { width: 100%; margin-top: 12px; }
+.ctl { color: var(--dim); display: flex; align-items: center; gap: 5px; }
+
+#panel {
+    grid-area: panel;
+    background: var(--panel);
+    display: flex; flex-direction: column;
+    overflow: hidden;
+}
+#panel-tabs { display: flex; border-bottom: 1px solid var(--line); }
+#panel-tabs button { flex: 1; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--dim); }
+#panel-tabs button.active { color: var(--text); background: #141821; }
+#panel-body { flex: 1; overflow-y: auto; padding: 10px; }
+
+.pp-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
+.pp-name { font-size: 14px; }
+.pp-family { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
+.pp-sub { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin: 14px 0 6px; }
+
+.pp-row { display: grid; grid-template-columns: 84px 1fr 46px; gap: 8px; align-items: center; margin-bottom: 5px; }
+.pp-label { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
+.pp-value { color: var(--text); font-size: 11px; text-align: right; }
+.pp-input { width: 100%; }
+input[type=range] { accent-color: var(--accent); background: transparent; }
+
+.pp-reactive { margin-top: 12px; }
+.pp-react-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; font-size: 11px; color: var(--dim); }
+.pp-feature { color: #6b8afd; }
+.pp-amount { color: var(--text); }
+
+.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; }
+.kv span { color: var(--dim); }
+.kv b { font-weight: 500; text-align: right; }
+.kv.current { background: rgba(74,222,128,0.08); margin: 0 -4px; padding: 2px 4px; }
+
+.swatches { display: flex; gap: 3px; margin: 10px 0; }
+.sw { flex: 1; height: 26px; border: 1px solid rgba(0,0,0,0.4); }
+
+.hint { color: #4b5563; font-size: 11px; margin-top: 8px; line-height: 1.5; }
+
+@media (max-width: 900px) {
+    #app {
+        grid-template-columns: 1fr;
+        grid-template-areas: "stage" "transport" "panel";
+        grid-template-rows: auto auto 1fr;
+    }
+}