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:
Claude Opus 5
+204
-6
@@ -396,6 +396,143 @@ await host.seite.evaluate(() => {
|
||||
});
|
||||
await host.seite.waitForTimeout(900);
|
||||
|
||||
/* ---- Der Regieplatz: links, rechts und die Leiste unten ----------
|
||||
|
||||
Filipe: „kann das nicht bissl aufgeteilt sein auf links und rechts
|
||||
und eine barre unten in der mitte."
|
||||
|
||||
GEMESSEN WIRD DIE LAGE UND NICHT DIE REGEL. Dass im Stilblatt
|
||||
`grid-template-areas` steht, sagt nichts darueber, ob die rechte
|
||||
Spalte auch wirklich rechts landet -- eine spaetere Regel, eine zu
|
||||
breite Zelle, ein langer Titel, und sie steht darunter. Geprueft
|
||||
wird deshalb an den Kanten:
|
||||
linke Spalte endet, BEVOR die rechte anfaengt
|
||||
die Leiste liegt UNTER beiden und ist so breit wie beide
|
||||
Und zusaetzlich, dass nichts seitlich hinauslaeuft: Der Umbau hat
|
||||
eine 16-rem-Spalte gegen einen Videotitel ohne Grenze gestellt. */
|
||||
{
|
||||
const platz = await host.seite.evaluate(() => {
|
||||
const k = (w) => {
|
||||
const e = document.querySelector(w);
|
||||
if (!e) return null;
|
||||
const r = e.getBoundingClientRect();
|
||||
return {
|
||||
l: Math.round(r.left), r: Math.round(r.right),
|
||||
o: Math.round(r.top), u: Math.round(r.bottom),
|
||||
b: Math.round(r.width), h: Math.round(r.height),
|
||||
};
|
||||
};
|
||||
const innen = document.getElementById("pult-innen");
|
||||
return {
|
||||
links: k(".regieplatz__seite:not(.regieplatz__seite--rechts)"),
|
||||
rechts: k(".regieplatz__seite--rechts"),
|
||||
leiste: k(".transport"),
|
||||
spiel: k("#v-spiel"),
|
||||
/* Laeuft etwas seitlich hinaus? `scrollWidth` groesser als die
|
||||
sichtbare Breite heisst genau das. */
|
||||
ueber: innen ? innen.scrollWidth - innen.clientWidth : -1,
|
||||
/* ==== UND IST DIE LEISTE UEBERHAUPT ZU SEHEN? ============
|
||||
Beim ersten Bau lag sie bei y=986 in einem 900 Pixel hohen
|
||||
Fenster -- die Rechnung ging auf, und man kam trotzdem nur
|
||||
mit Scrollen an den Play-Knopf. Geprueft wird deshalb
|
||||
gegen den SICHTBAREN Ausschnitt der Regie, nicht gegen die
|
||||
Seite. */
|
||||
sichtbar: (() => {
|
||||
const e = document.querySelector(".transport");
|
||||
if (!e || !innen) return false;
|
||||
const r = e.getBoundingClientRect();
|
||||
const i = innen.getBoundingClientRect();
|
||||
return r.bottom <= i.bottom + 1 && r.top >= i.top - 1;
|
||||
})(),
|
||||
/* ==== UND SIE IST DIE LETZTE ZEILE ========================
|
||||
„Unten" laesst sich bei einer KLEBENDEN Leiste nicht mehr an
|
||||
den Kanten ablesen: Beim Hochscrollen schwebt sie
|
||||
absichtlich ueber dem unteren Teil der Spalten. Die Frage
|
||||
„liegt sie unter beiden?" war die von vorher -- sie hat nach
|
||||
der Reparatur einen Fehler gemeldet, wo das Verhalten
|
||||
richtig ist.
|
||||
Was „unten" wirklich heisst, steht in der Reihenfolge: Sie
|
||||
kommt im Dokument NACH beiden Spalten. Das gilt beim
|
||||
Scrollen wie beim Stillstand. */
|
||||
letzte: (() => {
|
||||
const e = document.querySelector(".transport");
|
||||
const r = document.querySelector(".regieplatz__seite--rechts");
|
||||
if (!e || !r) return false;
|
||||
/* 4 = DOCUMENT_POSITION_FOLLOWING */
|
||||
return !!(r.compareDocumentPosition(e) & 4);
|
||||
})(),
|
||||
klebt: (() => {
|
||||
const e = document.querySelector(".transport");
|
||||
return e ? getComputedStyle(e).position : "(?)";
|
||||
})(),
|
||||
fenster: window.innerHeight,
|
||||
};
|
||||
});
|
||||
const p = platz;
|
||||
console.log(` Regieplatz: links ${p.links?.l}..${p.links?.r} · `
|
||||
+ `rechts ${p.rechts?.l}..${p.rechts?.r} · `
|
||||
+ `Leiste ${p.leiste?.l}..${p.leiste?.r} bei y=${p.leiste?.o} (${p.leiste?.h} px hoch)`);
|
||||
console.log(` Play-Knopf ${p.spiel?.b}x${p.spiel?.h} px · seitlich ueber ${p.ueber} px `
|
||||
+ `· Leiste ohne Scrollen sichtbar: ${p.sichtbar} `
|
||||
+ `(${p.klebt}, nach beiden Spalten: ${p.letzte})`);
|
||||
if (!p.sichtbar) {
|
||||
console.log(" ACHTUNG: Die Transportleiste ist nur mit Scrollen zu erreichen.");
|
||||
ausgang = 1;
|
||||
}
|
||||
if (!p.links || !p.rechts || !p.leiste) {
|
||||
console.log(" ACHTUNG: Der Regieplatz fehlt.");
|
||||
ausgang = 1;
|
||||
} else {
|
||||
if (p.links.r > p.rechts.l + 1) {
|
||||
console.log(" ACHTUNG: Links und rechts stehen nicht nebeneinander.");
|
||||
ausgang = 1;
|
||||
}
|
||||
if (!p.letzte || p.klebt !== "sticky") {
|
||||
console.log(` ACHTUNG: Die Leiste ist nicht die letzte Zeile `
|
||||
+ `(danach=${p.letzte}, position=${p.klebt}).`);
|
||||
ausgang = 1;
|
||||
}
|
||||
/* Sie soll ueber die GANZE Breite gehen -- eine Leiste, die nur
|
||||
so breit ist wie eine Spalte, ist keine Leiste unten in der
|
||||
Mitte, sondern eine dritte Spalte. */
|
||||
if (p.leiste.l > p.links.l + 1 || p.leiste.r < p.rechts.r - 1) {
|
||||
console.log(" ACHTUNG: Die Leiste geht nicht ueber beide Spalten.");
|
||||
ausgang = 1;
|
||||
}
|
||||
/* Der Play-Knopf ist der einzige, den man im Live blind treffen
|
||||
muss. 44 px ist die Hausgrenze; er soll deutlich darueber
|
||||
liegen. */
|
||||
if ((p.spiel?.b || 0) < 52 || (p.spiel?.h || 0) < 52) {
|
||||
console.log(" ACHTUNG: Der Play-Knopf ist zu klein zum Blindtreffen.");
|
||||
ausgang = 1;
|
||||
}
|
||||
if (p.ueber > 1) {
|
||||
console.log(` ACHTUNG: Der Regieplatz laeuft ${p.ueber} px seitlich hinaus.`);
|
||||
ausgang = 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Und der Knopf zum Teilen ---- */
|
||||
const teilen = await host.seite.evaluate(() => {
|
||||
const e = document.getElementById("s-teilen");
|
||||
if (!e) return null;
|
||||
const r = e.getBoundingClientRect();
|
||||
return {
|
||||
da: r.width > 0 && r.height > 0,
|
||||
b: Math.round(r.width), h: Math.round(r.height),
|
||||
wort: document.getElementById("s-teilen-wort")?.textContent || "",
|
||||
gedrueckt: e.getAttribute("aria-pressed"),
|
||||
};
|
||||
});
|
||||
console.log(` Bildschirm teilen: „${teilen?.wort}" ${teilen?.b}x${teilen?.h} px, `
|
||||
+ `gedrueckt=${teilen?.gedrueckt}`);
|
||||
if (!teilen?.da || teilen.h < 40 || teilen.wort !== "Bildschirm") {
|
||||
console.log(" ACHTUNG: Der Knopf zum Teilen fehlt oder ist zu klein.");
|
||||
ausgang = 1;
|
||||
}
|
||||
await bild(host.seite, "23-regieplatz");
|
||||
}
|
||||
|
||||
const regie = await host.seite.evaluate(() => {
|
||||
const t = (id) => document.getElementById(id)?.textContent?.trim() || "";
|
||||
const sicht = (w) => {
|
||||
@@ -639,17 +776,48 @@ const geben = await zuschauer.seite.evaluate(() => {
|
||||
if (!b) return false;
|
||||
return b.tagName.toLowerCase() === "img" ? b.naturalWidth > 0 : true;
|
||||
}).length,
|
||||
/* Und nirgends ein Euro. */
|
||||
geld: /€|EUR|Euro/.test(k2?.textContent || ""),
|
||||
/* ==== HIER MUSS DER PREIS STEHEN ==========================
|
||||
Filipe: „die leute sollen nur sehen was dogen kosten. sonst
|
||||
wissen die ja nicht wie viel es kosten wird."
|
||||
Hier stand bis zum 28.09. das Gegenteil -- „nirgends ein
|
||||
Euro". Das war fuer jede ANZEIGE richtig und fuer den einen
|
||||
Kaufknopf falsch. */
|
||||
preise: knoepfe.map((a) => a.querySelector(".geben__preis")?.textContent?.trim() || ""),
|
||||
/* ==== UND SONST NIRGENDS AUF DER SEITE ====================
|
||||
Die staerkste Form der Frage: den ganzen sichtbaren Text
|
||||
nehmen, den Geben-Kasten herausschneiden und nachsehen, ob
|
||||
irgendwo noch ein Eurozeichen uebrig ist. Eine Pruefung, die
|
||||
nur den Kasten ansieht, uebersieht genau die Stelle, an der
|
||||
es versehentlich landet. */
|
||||
geldSonstwo: (() => {
|
||||
const alles = document.body.textContent || "";
|
||||
const kasten = k2?.textContent || "";
|
||||
return /€|EUR/.test(alles.split(kasten).join(" "));
|
||||
})(),
|
||||
};
|
||||
});
|
||||
console.log(` Geben-Kasten: ${geben.knoepfe} Knoepfe (${geben.zahlen.join(" · ")}), `
|
||||
+ `${geben.zeichen} mit Zeichen, Geld im Text: ${geben.geld}`);
|
||||
if (!geben.da || geben.knoepfe !== 4 || geben.zeichen !== 4 || geben.geld
|
||||
+ `${geben.zeichen} mit Zeichen`);
|
||||
console.log(` Preise am Knopf: ${geben.preise.join(" · ")} `
|
||||
+ `| Geld sonstwo auf der Seite: ${geben.geldSonstwo}`);
|
||||
if (!geben.da || geben.knoepfe !== 4 || geben.zeichen !== 4
|
||||
|| geben.zahlen[0] !== "0,2") {
|
||||
console.log(" ACHTUNG: Der Geben-Kasten zeigt nicht, was er soll.");
|
||||
ausgang = 1;
|
||||
}
|
||||
/* WER BEZAHLT, MUSS VORHER WISSEN, WAS ER ZAHLT. Vier Knoepfe, vier
|
||||
Preise -- ein Knopf ohne Preis waere der eine, bei dem es niemand
|
||||
merkt. */
|
||||
if (geben.preise.some((p) => !/\d/.test(p) || !p.includes("€"))) {
|
||||
console.log(` ACHTUNG: An einem Knopf fehlt der Preis (${geben.preise.join(" | ")}).`);
|
||||
ausgang = 1;
|
||||
}
|
||||
/* UND SONST NIRGENDS. Ein Zuschauer sieht den Preis dort, wo er
|
||||
kauft -- und sonst nur Dogen. */
|
||||
if (geben.geldSonstwo) {
|
||||
console.log(" ACHTUNG: Auf der Zuschauerseite steht Geld ausserhalb der Kaufknoepfe.");
|
||||
ausgang = 1;
|
||||
}
|
||||
|
||||
/* ==== DIE PROBE AENDERT NUR DAS, WAS SIE AENDERN MUSS ============
|
||||
Der Knopf ist ein Verweis mit `target="_blank"` und fuehrt zu
|
||||
@@ -1837,8 +2005,38 @@ if (modiSicht !== 0 || abz.namensknoepfe < 3) {
|
||||
/* DAS MENUE MUSS INS BILD PASSEN. Ein Menue, das unten oder rechts
|
||||
heraussteht, ist auf dem Handy die Haelfte der Zeit nicht
|
||||
bedienbar -- und man sieht es erst, wenn man es aufmacht. */
|
||||
await modi.seite.click("#chat-liste .beitrag:last-child .beitrag__name").catch(() => {});
|
||||
await modi.seite.waitForTimeout(400);
|
||||
/* ==== AUF DAS MENUE WARTEN, NICHT AUF DIE UHR ===================
|
||||
|
||||
Hier stand `click(...).catch(() => {})` und danach 400 ms Pause.
|
||||
Beide Haelften waren falsch:
|
||||
|
||||
Der `.catch()` verschluckte einen fehlgeschlagenen Klick still.
|
||||
Die Chatliste wird bei jeder Meldung neu gezeichnet, und trifft
|
||||
das genau zwischen Auswahl und Klick, ist der Knoten weg.
|
||||
|
||||
Und 400 ms sind eine Wette. Gemessen: Derselbe Lauf war am
|
||||
28.09. dreimal gruen und beim vierten Mal rot -- geaendert
|
||||
hatte sich am Programm nichts, nur an dieser Messung. Ein
|
||||
Ergebnis, das ohne Codeaenderung kippt, ist ein Fehler der
|
||||
Messung und kein Befund.
|
||||
|
||||
Jetzt wird auf das MERKMAL gewartet und bis zu dreimal neu
|
||||
angesetzt -- und die Zahl der Versuche steht im Protokoll. Ein
|
||||
stiller Wiederholungsversuch waere nur eine leisere Wette. */
|
||||
let menueVersuche = 0;
|
||||
let menueOffen = false;
|
||||
while (menueVersuche < 3 && !menueOffen) {
|
||||
menueVersuche += 1;
|
||||
await modi.seite.click("#chat-liste .beitrag:last-child .beitrag__name")
|
||||
.catch(() => {});
|
||||
menueOffen = await modi.seite.waitForSelector(".modmenue", { timeout: 3000 })
|
||||
.then(() => true).catch(() => false);
|
||||
}
|
||||
if (menueVersuche > 1) {
|
||||
console.log(` (Das Menue brauchte ${menueVersuche} Anlaeufe -- die Chatliste `
|
||||
+ `wurde dazwischen neu gezeichnet.)`);
|
||||
}
|
||||
await modi.seite.waitForTimeout(250);
|
||||
const menue = await modi.seite.evaluate(() => {
|
||||
const m = document.querySelector(".modmenue");
|
||||
if (!m) return null;
|
||||
|
||||
Reference in New Issue
Block a user