Regieplatz, Bildschirm teilen, Zuruecksetzen und der Preis

Vier Sachen aus Filipes Ansagen vom 28.09.2026.

=======================================================================
1. DER REGIEPLATZ

"kann das nicht bissl aufgeteilt sein auf links und rechts und eine
barre unten in der mitte. kannst du das nicht hoch professionell
machen und hochwertig vom aussehen?"

Die Teilung folgt dem, was WANN gebraucht wird:
  LINKS   Was laeuft. Das liest man.
  RECHTS  Was eingetragen wird. Das tippt man VOR der Sendung.
  UNTEN   Der Transport. Den fasst man WAEHREND der Sendung an.

Vorher stand alles in einem Stapel, und wer im Live an den Play-Knopf
wollte, musste an den Eingabefeldern vorbeiscrollen. Der Play-Knopf
ist jetzt rund und 58 px -- der einzige, den man blind treffen muss,
und die Form unterscheidet ihn schon vor dem Hinsehen.

UND EIN FUND, DEN NUR DIE MESSUNG FAND: Nach dem Umbau lag die Leiste
bei y=986 in einem 900 Pixel hohen Fenster. Die Rechnung ging auf
(links, rechts, Leiste darunter) und das Ergebnis war trotzdem
falsch. Jetzt klebt sie (`position: sticky`) -- unten, wie gewollt,
und immer sichtbar. Ihr Grund musste dafuer dicht werden: eine
halbdurchsichtige Leiste, durch die Text scrollt, ist die Flaeche,
auf der man sich im Live verliest.

=======================================================================
2. DEN BILDSCHIRM TEILEN

"waere es nicht einfach eine bildschirm uebertragung zu installieren
und es zu perfektionieren?"

Ja -- der Weg war schon da: Die Kamerabilder laufen als
Direktverbindung von Mensch zu Mensch. Geteilt wird deshalb AN STELLE
der Kamera; `replaceTrack` tauscht die Bildspur in jeder bestehenden
Leitung aus, ohne dass eine einzige neu ausgehandelt werden muss.
Eine zweite Spur daneben waere eine zweite Verhandlung je Zuschauer,
und jede davon kann scheitern.

Vier Dinge, die sonst schiefgegangen waeren:
  - Wer waehrenddessen dazukommt, bekommt den Bildschirm und nicht
    das Gesicht.
  - Das eigene Fenster zeigt, was die anderen sehen -- sonst waere es
    die eine Anzeige, der man nicht trauen kann.
  - Der Stopp-Knopf des Browsers wird gehoert; sonst bliebe die Seite
    auf "teilt" stehen und sendete ein totes Bild.
  - Der Kameraknopf wird grau, solange geteilt wird. Er haette keine
    Wirkung mehr -- und ein Knopf, der still nichts tut, ist
    schlimmer als keiner.

Ein Bildschirm wird ausserdem NICHT zugeschnitten: `cover` ist fuer
ein Gesicht richtig, bei einem Schreibtisch faellt links und rechts
genau das weg, worum es geht.

UND DIE WAHRHEIT STEHT AN DER BEDIENUNG: Netflix, Disney+ und Prime
bleiben beim Teilen schwarz (Widevine schaltet den Videobereich ab --
auf Discord und Zoom ist es genauso), und einen Film weiterzusenden
waere eine oeffentliche Wiedergabe. Wer das erst erfaehrt, nachdem im
Stream zehn Minuten ein schwarzes Rechteck stand, erfaehrt es zu
spaet.

=======================================================================
3. ALLES ZURUECKSETZEN

"brauch ich auch noch einen button wo ich alles easy zuruecksetzen
kann."

"Alles" heisst: der Schreibtisch, nicht das Gedaechtnis. Geleert
werden Titel, Video, zweites Video, Vorschaubild, Beginn,
Warteschlange, Gaesteliste; Anordnung, Kameragroesse, Ecke, Tempo und
Chatmodus gehen auf Vorgabe.

NICHT ANGETASTET werden Spenden, die Dogen der Leute, der Chatverlauf
und die Massnahmen der Moderation. Eine bezahlte Spende aus den
Buechern zu nehmen waere eine Faelschung; eine stillschweigend
aufgehobene Sperre waere eine Entscheidung, die niemand getroffen
hat. Beides steht nebeneinander im Dialog, BEVOR etwas passiert -- ein
"Bist du sicher?" ohne diese Liste ist keine Frage, sondern eine
Huerde.

Im Live ist der Knopf grau und sagt warum. Und die Spalten stehen
einzeln da statt als "alles ausser": Eine Ausnahmeliste waechst still
mit jeder neuen Spalte mit, und dann loescht das Zuruecksetzen
irgendwann etwas, das es nie loeschen sollte.

=======================================================================
4. DER PREIS BEI DEN DOGEN

"da muss ich auch sehen so viel dogen sind so viel euro. damit ich
auch immer weiss was es ist. aber nur ich. die leute sollen nur sehen
was dogen kosten."

Das ist keine Ruecknahme von "nie Geld", sondern ihre Grenze. Die
Regel war richtig fuer alles, was ANZEIGE ist -- Karte, Stream, Chat,
Punktestand -- und falsch fuer die eine Stelle, an der jemand KAUFT.

GENAU ZWEI AUSNAHMEN, und die Pruefung nennt sie beim Namen statt die
Regel aufzuweichen:
  knoepfe[].cent      fuer alle -- der Preis am Kaufknopf
  kurs_cent_je_doge   nur fuer die Leitung

DIE ERLAUBNIS STECKT IN DEN DATEN UND NICHT IN EINEM `if`. Ein
Zuschauer hat den Kurs nicht und kann deshalb GAR KEINEN Preis
ausrechnen -- auch nicht, wenn eine spaetere Zeile es versuchte. Eine
Abfrage "darf der das sehen?" in der Oberflaeche waere eine Regel, die
man vergessen kann; eine fehlende Zahl ist eine, die man nicht
vergessen kann.

Eine Zahl statt dreissig Einzelumrechnungen: Wer je Zeile einen Cent
mitschickt, hat dreissig Gelegenheiten, eine zu vergessen.

=======================================================================
FUENF BEFUNDE GEGEN DIE EIGENEN PRUEFUNGEN

1. Eine Pruefung fragte "liegt die Leiste unter beiden Spalten?" --
   das tut eine klebende Leiste beim Hochscrollen absichtlich nicht.
   Sie stellte die Frage von vorher. Jetzt zaehlt die Reihenfolge im
   Dokument, die beim Scrollen wie beim Stillstand gilt.
2. Eine Messung klickte auf einen Namen und wartete 400 ms auf die
   UHR -- und verschluckte den Klickfehler still. Derselbe Lauf war
   dreimal gruen und beim vierten rot, ohne Codeaenderung. Jetzt wird
   auf das Merkmal gewartet, bis zu dreimal, und die Zahl der
   Anlaeufe steht im Protokoll.
3. Eine Pruefung loeschte erst selbst den Chat (eine Sendung zu
   beenden tut das mit Absicht) und fragte dann, ob er noch da ist.
4. "Die Dogen sind unberuehrt (0 Staende)" -- null bleibt auch dann
   null, wenn das Zuruecksetzen sie mitnaehme. Jetzt steht vorher
   eine echte Spende da, und die Zahl gehoert in die BEDINGUNG.
5. `knopf-still--haupt` stand seit Wochen im HTML und war in KEINEM
   Stilblatt definiert -- eine Klasse, die aussieht, als sei etwas
   hervorgehoben, und auf dem Bildschirm ist es das nicht. Gefunden
   beim Nachsehen, ob es sie gibt, bevor ich sie ein zweites Mal
   benutze.

Und eine neue Pruefung, die es vorher nicht gab: ALLE 118 Kennungen,
die das Programm mit `$('...')` anspricht, werden gegen das HTML
gehalten. Nach einem Umbau, der die halbe Tafel neu sortiert, waere
eine verlorene Kennung KEIN Fehler beim Laden -- `$()` gibt still
`null` zurueck, und der Fehler erscheint erst, wenn jemand mitten in
der Sendung den Knopf drueckt.

pruef-reaktion 365/0 (vorher 321) - pruef-spenden 172/0 (vorher 167) -
pruef-buehne 36/0 - pruef-css-klassen ok - pruef-tippziele 11/0 -
mess-reaktion und mess-buehne ohne Beanstandung

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-28 20:03:38 +02:00
co-authored by Claude Opus 5
parent 96bdd79a91
commit 99e62eebbe
55 changed files with 2043 additions and 776 deletions
+259
View File
@@ -1895,6 +1895,265 @@ melde("=== 19. Groesse und Ecke der Kamerafenster ===");
}
}
/* =======================================================================
20. DER REGIEPLATZ UND DAS TEILEN DES BILDSCHIRMS
Filipe, 28.09.2026:
„kann das nicht bissl aufgeteilt sein auf links und rechts und
eine barre unten in der mitte."
„waere es nicht einfach eine bildschirm uebertragung zu
installieren und es zu perfektionieren?"
======================================================================= */
melde("");
melde("=== 20. Regieplatz und Bildschirm ===");
{
const html = readFileSync(join(HIER, "..", "workspace", "reaktion.html"), "utf8");
const css = readFileSync(join(HIER, "..", "workspace", "assets", "css", "reaktion.css"), "utf8");
const js = readFileSync(join(HIER, "..", "workspace", "assets", "js", "reaktion.js"), "utf8");
const regeln = css.replace(/\/\*[\s\S]*?\*\//g, " ");
/* ==== KEINE KENNUNG DARF BEIM UMBAU VERLORENGEHEN ==============
Das ist die wichtigste Pruefung dieses Abschnitts. Der
Regieplatz hat die halbe Sendung-Tafel neu sortiert, und jedes
`$('...')` im Programm zeigt auf ein Element im HTML. Faellt
eines heraus, ist es KEIN Fehler beim Laden -- `$()` gibt `null`
zurueck, und der Fehler erscheint erst, wenn jemand den Knopf
drueckt. Also mitten in einer Sendung.
Gezaehlt wird gegen die Kennungen im HTML. Was das Programm
selbst anlegt, steht darunter namentlich -- eine Liste von
Ausnahmen, die man SIEHT, ist besser als eine Pruefung, die
schweigt. */
{
const selbstGebaut = new Set([
/* Diese legt das Programm an oder sie stehen in anderen
Dateien der Kopfleiste. */
]);
const gebraucht = [...js.matchAll(/\$\('([a-z0-9-]+)'\)/g)].map((m) => m[1]);
const einmalig = [...new Set(gebraucht)].filter((x) => !selbstGebaut.has(x));
const fehlend = einmalig.filter((x) => !html.includes(`id="${x}"`));
ok(einmalig.length > 40, `das Programm greift auf ${einmalig.length} Kennungen zu`);
ok(fehlend.length === 0,
fehlend.length
? `ES FEHLEN IM HTML: ${fehlend.join(", ")}`
: "und jede davon gibt es im HTML");
/* Gegenprobe: Eine erfundene Kennung muss auffallen -- sonst
koennte die Liste auch leer sein und die Pruefung gruen. */
ok(!html.includes('id="gibtesnicht"'),
"Gegenprobe: eine erfundene Kennung steht in keinem HTML");
}
/* ---- LINKS, RECHTS UND EINE LEISTE UNTEN ---- */
ok(/grid-template-areas:\s*"links rechts"\s*"leiste leiste"/.test(regeln.replace(/\s+/g, " ")
.replace(/" "/g, '" "')) || /links rechts[\s\S]{0,40}leiste leiste/.test(regeln),
"der Regieplatz hat links, rechts und eine Leiste unten");
const platz = [...regeln.matchAll(/([^{}]*\.regieplatz[^{}]*)\{([^}]*)\}/g)]
.filter((m) => /grid-template-areas/.test(m[2]));
/* ZWEI REGELN FUER DIESELBE FRAGE SIND DIE GARANTIE, DASS EINE
FALSCH GEWINNT -- heute schon viermal passiert. Die Handyansicht
darf die Bereiche neu setzen; deshalb zwei, nicht eine. */
ok(platz.length === 2,
`${platz.length} Regeln ordnen den Regieplatz (Rechner und Handy)`);
/* Die Leiste traegt den ganzen Transport -- und zwar in EINER. */
const iLeiste = html.indexOf('class="transport"');
const iEnde = html.indexOf("</section>", iLeiste);
const inLeiste = html.slice(iLeiste, iEnde);
for (const k of ["v-band", "v-zeit", "v-zurueck", "v-spiel", "v-vor", "v-naechstes", "tempo"]) {
ok(inLeiste.includes(`id="${k}"`), `„${k}" liegt in der Transportleiste`);
}
ok(!inLeiste.includes('id="p-titel"'),
"und die Eingabefelder liegen NICHT darin");
/* ---- DER BILDSCHIRM ---- */
ok(/getDisplayMedia/.test(js), "die Seite kann den Bildschirm holen");
ok(/replaceTrack/.test(js),
"und tauscht die Bildspur aus, statt eine zweite Leitung auszuhandeln");
ok(/audio:\s*false/.test(js),
"der Rechnerton kommt NICHT mit -- sonst waere alles doppelt");
ok(/addEventListener\('ended'/.test(js),
"der eigene Stopp-Knopf des Browsers wird gehoert");
ok(/bildschirmSpur \|\| meinStrom\.getVideoTracks\(\)\[0\]/.test(js),
"auch wer waehrenddessen dazukommt, bekommt den Bildschirm");
ok(/\.kamera\[data-bildschirm="ja"\] video/.test(regeln)
&& /object-fit:\s*contain/.test(regeln),
"ein geteilter Bildschirm wird nicht zugeschnitten");
ok(html.includes('id="s-teilen"'), "es gibt den Knopf in der Senderleiste");
/* ==== UND DIE WAHRHEIT STEHT AN DER BEDIENUNG ==================
Netflix und Disney+ bleiben beim Teilen schwarz -- das ist ihr
Kopierschutz und keine Einstellung. Wer das erst erfaehrt,
nachdem im Stream zehn Minuten ein schwarzes Rechteck stand,
erfaehrt es zu spaet. Deshalb ist der Hinweis Teil der Seite
und nicht Teil einer Hilfe, die niemand oeffnet. */
ok(/Netflix[\s\S]{0,80}schwarz/.test(html),
"und die Seite sagt, dass Netflix schwarz bleibt");
ok(/öffentliche Wiedergabe/.test(html),
"und warum ein Film nicht weitergesendet wird");
/* ---- AM SERVER ---- */
{
const an = await roh(CREW, "/workspace/api/reaktion/senden", {
method: "POST", keks: k.admin, rumpf: { bildschirm: true },
});
ok(an.code === 200 && an.j?.ich?.bildschirm === true,
`der Host meldet das Teilen (${an.code})`);
const beiAnderen = await roh(CREW, "/workspace/api/reaktion", { keks: k.gast });
ok(beiAnderen.j?.host?.bildschirm === true,
"und alle sehen es an seinem Fenster");
const aus = await roh(CREW, "/workspace/api/reaktion/senden", {
method: "POST", keks: k.admin, rumpf: { bildschirm: false },
});
ok(aus.code === 200 && aus.j?.ich?.bildschirm === false,
`und das Beenden auch (${aus.code})`);
const fremd = await roh(CREW, "/workspace/api/reaktion/senden", {
method: "POST", keks: k.gast, rumpf: { bildschirm: true },
});
ok(fremd.code === 403,
`wer nicht sendet, teilt auch nicht (${fremd.code})`);
}
}
/* =======================================================================
21. ALLES ZURUECKSETZEN
Filipe, 28.09.2026: „brauch ich auch noch einen button wo ich alles
easy zuruecksetzen kann."
Die wichtigste Frage dieses Abschnitts ist nicht, ob es leert --
sondern ob es das Richtige STEHEN LAESST. Ein Zuruecksetzen, das
eine bezahlte Spende mitnimmt, ist keine Bequemlichkeit, sondern
ein Datenverlust mit Knopf.
======================================================================= */
melde("");
melde("=== 21. Alles zuruecksetzen ===");
{
/* Erst etwas hinstellen, das verschwinden soll -- und etwas, das
bleiben muss. Ohne beides prueft man ein leeres Haus.
==== „VORBEREITUNG" UND NICHT „ZU" -- UND DAS IST DER PUNKT
Beim ersten Lauf stand hier „zu", und die Pruefung meldete
danach „der Chatverlauf steht nicht mehr". Der Befund war
richtig und die Pruefung trotzdem falsch: Eine Sendung zu
BEENDEN loescht den Live-Chat seit jeher mit Absicht (sonst
finge die naechste mit den Rufen der letzten an). Sie hat also
erst selbst geloescht und dann gefragt, ob noch etwas da ist --
und haette dieselbe Antwort auch gegeben, wenn das
Zuruecksetzen den Chat mitnaehme.
In „vorbereitung" bleibt der Chat stehen, und erst dann sagt
die Antwort etwas ueber das Zuruecksetzen. */
await roh(CREW, "/workspace/api/reaktion/stand", {
method: "POST", keks: k.admin, rumpf: { stand: "vorbereitung" },
});
await roh(CREW, "/workspace/api/reaktion/chat", {
method: "POST", keks: k.admin, rumpf: { text: "Der bleibt stehen" },
});
await roh(CREW, "/workspace/api/reaktion", {
method: "PUT", keks: k.admin,
rumpf: { titel: "Wird geleert", video: "dQw4w9WgXcQ", vorschau: "https://x/y.jpg" },
});
await roh(CREW, "/workspace/api/reaktion/liste", {
method: "POST", keks: k.admin, rumpf: { video: "dQw4w9WgXcQ" },
});
await roh(CREW, "/workspace/api/reaktion/layout", {
method: "POST", keks: k.admin,
rumpf: { layout: "gleich", kamera_gross: 2, kamera_ecke: "ol" },
});
/* ==== ES MUSS AUCH ETWAS DA SEIN, DAS BLEIBEN KANN ===========
Beim ersten Lauf stand hier „die Dogen sind unberuehrt (0
Staende)". Null bleibt aber auch dann null, wenn das
Zuruecksetzen sie mitnaehme -- die Zeile war gruen und wertlos.
Die Zahl der geprueften Dinge gehoert in die BEDINGUNG und
nicht nur in den Meldetext. */
await roh(CREW, "/workspace/api/spenden", {
method: "POST", keks: k.admin,
rumpf: { dogen_mille: 500, name: "Nachtfalter", person_id: IDS.gast },
});
const vorher = await roh(CREW, "/workspace/api/reaktion", { keks: k.admin });
const spendenVorher = await roh(CREW, "/workspace/api/spenden", { keks: k.admin });
const dogenVorher = spendenVorher.j?.staende?.length || 0;
const letzteVorher = spendenVorher.j?.letzte?.length || 0;
ok(!!vorher.j?.titel && (vorher.j?.liste || []).length > 0,
`vorher steht etwas da (Titel „${vorher.j?.titel}", `
+ `${vorher.j?.liste?.length} in der Warteschlange)`);
const weg = await roh(CREW, "/workspace/api/reaktion/zuruecksetzen", {
method: "POST", keks: k.admin,
});
ok(weg.code === 200, `zuruecksetzen geht (${weg.code})`);
ok(weg.j?.titel === "" && weg.j?.video === "",
"Titel und Video sind leer");
ok((weg.j?.liste || []).length === 0, "die Warteschlange ist leer");
ok((weg.j?.gaeste || []).length === 0, "die Gaesteliste ist leer");
ok(weg.j?.layout === "kino" && weg.j?.kamera_gross === 1
&& weg.j?.kamera_ecke === "ur" && weg.j?.tempo === 1,
`das Bild steht wieder auf Vorgabe (${weg.j?.layout}, `
+ `${weg.j?.kamera_gross}x, ${weg.j?.kamera_ecke})`);
ok(weg.j?.stand === "zu", "und der Saal ist zu");
/* ==== UND DAS WICHTIGERE: WAS BLEIBEN MUSS, BLEIBT ============ */
const spendenNachher = await roh(CREW, "/workspace/api/spenden", { keks: k.admin });
ok(dogenVorher > 0 && letzteVorher > 0,
`es gab vorher etwas zu verlieren (${dogenVorher} Staende, `
+ `${letzteVorher} Spenden)`);
ok(dogenVorher > 0 && (spendenNachher.j?.staende?.length || 0) === dogenVorher,
`die Dogen der Leute sind unberuehrt (${dogenVorher} Staende)`);
ok(letzteVorher > 0 && (spendenNachher.j?.letzte?.length || 0) === letzteVorher,
`und die Spenden auch (${letzteVorher} gezeigte)`);
const chat = await roh(CREW, "/workspace/api/reaktion/chat", { keks: k.admin });
ok((chat.j?.beitraege || []).some((b) => b.text === "Der bleibt stehen"),
`der Chatverlauf steht noch (${chat.j?.beitraege?.length} Beitraege)`);
/* ---- NICHT WAEHREND EINER SENDUNG ----
Mitten im Live zurueckzusetzen zieht allen das Video unter den
Fuessen weg -- und zwar ohne Rueckweg. */
await roh(CREW, "/workspace/api/reaktion", {
method: "PUT", keks: k.admin, rumpf: { titel: "Laeuft", video: "dQw4w9WgXcQ" },
});
await roh(CREW, "/workspace/api/reaktion/stand", {
method: "POST", keks: k.admin, rumpf: { stand: "live" },
});
const imLive = await roh(CREW, "/workspace/api/reaktion/zuruecksetzen", {
method: "POST", keks: k.admin,
});
ok(imLive.code === 409 && imLive.j?.fehler === "laeuft_noch",
`waehrend der Sendung wird abgelehnt (${imLive.code})`);
const nochDa = await roh(CREW, "/workspace/api/reaktion", { keks: k.admin });
ok(nochDa.j?.titel === "Laeuft",
"und es ist dabei auch wirklich nichts passiert");
/* ---- UND NUR DER HOST ---- */
const fremd = await roh(CREW, "/workspace/api/reaktion/zuruecksetzen", {
method: "POST", keks: k.modi,
});
ok(fremd.code === 403, `ein Modi setzt nichts zurueck (${fremd.code})`);
/* ---- DER KNOPF SAGT VORHER, WAS ER TUT ----
Ein „Bist du sicher?" ohne die Liste ist keine Frage, sondern
eine Huerde: Man klickt sie weg und erfaehrt erst danach, was
fehlt. */
{
const html = readFileSync(join(HIER, "..", "workspace", "reaktion.html"), "utf8");
const js = readFileSync(join(HIER, "..", "workspace", "assets", "js", "reaktion.js"), "utf8");
ok(html.includes('id="p-zuruecksetzen"'), "es gibt den Knopf");
ok(/frageNach\(\{[\s\S]{0,600}?bleibt:/.test(js),
"und er sagt vorher, was BLEIBT -- nicht nur, was verschwindet");
ok(/Spenden[\s\S]{0,80}Dogen[\s\S]{0,120}unberührt/.test(js),
"und nennt Spenden und Dogen dabei ausdruecklich");
ok(/p-zuruecksetzen'\)\.disabled = laeuftGerade/.test(js),
"im Live ist er grau");
}
await roh(CREW, "/workspace/api/reaktion/stand", {
method: "POST", keks: k.admin, rumpf: { stand: "live" },
});
}
melde("");
melde(`${geprueft} Pruefungen, ${fehler} Fehler`);
melde(fehler === 0 ? "ALLES IN ORDNUNG" : "NICHT IN ORDNUNG");