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
+176 -86
View File
@@ -7,14 +7,14 @@
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609281932" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609281932" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609281932" />
<link rel="stylesheet" href="assets/css/start.css?v=202609281932" />
<link rel="stylesheet" href="assets/css/reaktion.css?v=202609281932" />
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609281932" />
<link rel="stylesheet" href="assets/css/module.css?v=202609281932" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609281932" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609282002" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609282002" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/start.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/reaktion.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/module.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609282002" />
</head>
<body class="start reaktion-seite" data-stand="laedt">
@@ -212,6 +212,22 @@
</svg>
<span id="s-kamera-wort">Kamera</span>
</button>
<!-- ==== DEN BILDSCHIRM TEILEN ==========================
Filipe: „waere es nicht einfach eine bildschirm
uebertragung zu installieren?"
Er geht denselben Weg wie die Kamera — dieselbe
Direktverbindung, nur eine andere Quelle. Deshalb steht
der Knopf auch hier und nicht in einem eigenen
Bereich. -->
<button type="button" class="sender-knopf" id="s-teilen" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 4.5h18v12H3z" />
<path d="M8 20.5h8" />
<path d="M12 16.5v4" />
</svg>
<span id="s-teilen-wort">Bildschirm</span>
</button>
<button type="button" class="sender-knopf" id="s-mikro" aria-pressed="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 3.2a2.6 2.6 0 0 1 2.6 2.6v6a2.6 2.6 0 0 1-5.2 0v-6A2.6 2.6 0 0 1 12 3.2z" />
@@ -403,79 +419,129 @@
<section class="pult-tafel" data-tafel="sendung" role="tabpanel"
id="tafel-sendung" aria-labelledby="reiter-sendung">
<!-- DIE VIDEOSPUR. Vorher gab es für das laufende Video im
Pult überhaupt keine Bedienung — wer spulen wollte,
musste in das YouTube-Bild fassen, und was dort passiert,
passiert nur bei einem selbst. -->
<div class="spur" id="spur">
<div class="spur__kopf">
<span class="spur__marke" id="spur-marke">Läuft</span>
<strong class="spur__titel" id="spur-titel">Noch kein Video eingetragen</strong>
</div>
<div class="spur__band">
<button type="button" class="spur__knopf" id="v-zurueck" title="10 Sekunden zurück">−10</button>
<button type="button" class="spur__knopf spur__knopf--gross" id="v-spiel" title="Leertaste">
<svg viewBox="0 0 24 24" aria-hidden="true" id="v-spiel-bild"><path d="M8 5h3v14H8zm5 0h3v14h-3z" /></svg>
</button>
<button type="button" class="spur__knopf" id="v-vor" title="10 Sekunden vor">+10</button>
<input type="range" class="spur__schiene" id="v-band" min="0" max="1000" value="0"
step="1" aria-label="Stelle im Video" />
<span class="spur__zeit" id="v-zeit">0:00 / 0:00</span>
<button type="button" class="spur__knopf spur__knopf--weiter" id="v-naechstes"
title="Nächstes Video aus der Warteschlange">Nächstes</button>
<!-- ==== DER REGIEPLATZ ==================================
Filipe: „kann das nicht bissl aufgeteilt sein auf links
und rechts und eine barre unten in der mitte."
Links steht, was LÄUFT — das liest man. Rechts steht,
was man EINTRÄGT — das tippt man vor der Sendung. Unten
liegt der Transport — den fasst man währenddessen an,
und er liegt deshalb immer an derselben Stelle. -->
<div class="regieplatz">
<!-- ---- LINKS: was läuft ---------------------------- -->
<div class="regieplatz__seite">
<h4 class="regieplatz__ueber">Was läuft</h4>
<div class="spur" id="spur">
<div class="spur__kopf">
<span class="spur__marke" id="spur-marke">Läuft</span>
<strong class="spur__titel" id="spur-titel">Noch kein Video eingetragen</strong>
</div>
<!-- Der Umschalter steht bei dem, was läuft, und nicht
bei den Feldern: Er ist eine Entscheidung im Live,
keine Eintragung davor. -->
<button type="button" class="spur__knopf spur__knopf--tausch" id="v-tauschen"
hidden title="Zwischen den beiden Videos wechseln (T)">
Wechseln zu <span id="v-tausch-titel">…</span>
</button>
</div>
<!-- ==== DAS ZWEITE VIDEO ==========================
Nicht die Warteschlange: Die ist eine Reihenfolge,
eins nach dem anderen, und das Gespielte ist danach
heraus. Hier stehen ZWEI nebeneinander, und jedes
merkt sich seine Stelle. -->
<label class="pult__feld">
<span>Zweites Video (zum Hin- und Herschalten)</span>
<input type="text" id="p-zweit" placeholder="YouTube-Adresse — leer lassen räumt es weg" />
</label>
<div class="pult__zeile">
<button type="button" class="knopf-still" id="p-zweit-sichern">Bereitlegen</button>
</div>
<p class="pult__klein" id="zweit-hinweis">
Beide merken sich, wo sie stehen. Du kannst also mitten
im einen wegschalten und später genau dort weitermachen.
</p>
</div>
<!-- ==== GESCHWINDIGKEIT UND UMSCHALTER ==================
Beide stehen an der Spur und nicht in einem eigenen
Register: Es ist dieselbe Frage — was läuft gerade und
wie. Ein Registerwechsel mitten im Live ist ein
Handgriff zu viel. -->
<div class="spur__mehr">
<div class="tempo" id="tempo" role="group" aria-label="Geschwindigkeit"></div>
<button type="button" class="spur__knopf spur__knopf--tausch" id="v-tauschen"
hidden title="Zwischen den beiden Videos wechseln (T)">
Wechseln zu <span id="v-tausch-titel">…</span>
</button>
<!-- ---- RECHTS: einrichten -------------------------- -->
<div class="regieplatz__seite regieplatz__seite--rechts">
<h4 class="regieplatz__ueber">Einrichten</h4>
<label class="pult__feld">
<span>Titel der Sendung</span>
<input type="text" id="p-titel" maxlength="120" placeholder="Worum geht es?" />
</label>
<label class="pult__feld">
<span>YouTube</span>
<input type="text" id="p-video" placeholder="Adresse oder Kennung einfügen" />
</label>
<label class="pult__feld">
<span>Vorschaubild</span>
<input type="text" id="p-vorschau" placeholder="Adresse eines Bildes (freiwillig)" />
</label>
<div class="pult__zeile">
<label class="pult__feld pult__feld--kurz">
<span>Beginn</span>
<input type="datetime-local" id="p-beginn" />
</label>
<button type="button" class="knopf-still knopf-still--haupt"
id="p-sichern">Übernehmen</button>
</div>
<!-- ==== ALLES ZURÜCKSETZEN ========================
Filipe: „brauch ich auch noch einen button wo ich
alles easy zurücksetzen kann."
Er steht unten in der Spalte, in der eingetragen
wird — und bewusst ruhig: Er gehört hierher, aber er
ist nicht das, was man sucht. Was er leert und was
er stehen lässt, sagt er vorher. -->
<div class="pult__zeile pult__zeile--ende">
<button type="button" class="knopf-still knopf-still--leise"
id="p-zuruecksetzen">Alles zurücksetzen</button>
<span class="pult__klein" id="zurueck-hinweis"></span>
</div>
</div>
</div>
<div class="pult__zeile">
<label class="pult__feld">
<span>Titel der Sendung</span>
<input type="text" id="p-titel" maxlength="120" placeholder="Worum geht es?" />
</label>
<label class="pult__feld">
<span>YouTube</span>
<input type="text" id="p-video" placeholder="Adresse oder Kennung einfügen" />
</label>
</div>
<!-- ---- UNTEN MITTIG: die Transportleiste -----------
Aufgebaut wie jeder Videospieler, den man kennt:
Schiene über die ganze Breite, darunter eine Reihe mit
dem Transport in der Mitte. Eine Anordnung, die man
schon kennt, muss man nicht lernen. -->
<div class="transport">
<div class="transport__schiene">
<input type="range" class="spur__schiene" id="v-band" min="0" max="1000" value="0"
step="1" aria-label="Stelle im Video" />
<span class="spur__zeit" id="v-zeit">0:00 / 0:00</span>
</div>
<!-- ==== DAS ZWEITE VIDEO ================================
Nicht die Warteschlange: Die ist eine Reihenfolge, eins
nach dem anderen, und das Gespielte ist danach heraus.
Hier stehen ZWEI nebeneinander, und jedes merkt sich
seine Stelle. -->
<div class="pult__zeile">
<label class="pult__feld">
<span>Zweites Video (zum Hin- und Herschalten)</span>
<input type="text" id="p-zweit" placeholder="YouTube-Adresse — leer lassen räumt es weg" />
</label>
<button type="button" class="knopf-still" id="p-zweit-sichern">Bereitlegen</button>
</div>
<p class="pult__klein" id="zweit-hinweis">
Beide merken sich, wo sie stehen. Du kannst also mitten im
einen wegschalten und später genau dort weitermachen.
</p>
<div class="pult__zeile">
<label class="pult__feld">
<span>Vorschaubild</span>
<input type="text" id="p-vorschau" placeholder="Adresse eines Bildes (freiwillig)" />
</label>
<label class="pult__feld pult__feld--kurz">
<span>Beginn</span>
<input type="datetime-local" id="p-beginn" />
</label>
<button type="button" class="knopf-still" id="p-sichern">Übernehmen</button>
<div class="transport__reihe">
<!-- Links die Geschwindigkeit: Sie wird selten
angefasst und darf nicht neben dem Play-Knopf
liegen, wo man im Live hinfasst. -->
<div class="transport__teil">
<div class="tempo" id="tempo" role="group" aria-label="Geschwindigkeit"></div>
</div>
<div class="transport__teil transport__teil--mitte">
<button type="button" class="spur__knopf" id="v-zurueck"
title="10 Sekunden zurück">−10</button>
<button type="button" class="spur__knopf spur__knopf--gross" id="v-spiel"
title="Leertaste">
<svg viewBox="0 0 24 24" aria-hidden="true" id="v-spiel-bild"><path d="M8 5h3v14H8zm5 0h3v14h-3z" /></svg>
</button>
<button type="button" class="spur__knopf" id="v-vor"
title="10 Sekunden vor">+10</button>
</div>
<div class="transport__teil transport__teil--rechts">
<button type="button" class="spur__knopf spur__knopf--weiter" id="v-naechstes"
title="Nächstes Video aus der Warteschlange">Nächstes</button>
</div>
</div>
</div>
</div>
</section>
@@ -530,6 +596,26 @@
(380 px) gab es nichts. Für eine Sendung, in der zwei
Leute reden, ist das eine zu klein und das andere
verdeckt das Video. -->
<!-- ==== WAS BEIM TEILEN ZU ERWARTEN IST ===============
Das gehört an die Bedienung und nicht in eine Hilfe:
Wer es erst erfährt, nachdem im Stream zehn Minuten ein
schwarzes Rechteck stand, erfährt es zu spät. -->
<h3 class="pult__ueber">Bildschirm teilen</h3>
<p class="pult__klein">
Der Knopf sitzt unten in der Senderleiste. Geteilt wird
statt deiner Kamera — dein Bildschirm läuft dann in deinem
Fenster, und mit „Kameras groß" oder „Nur Kamera" füllt er
die ganze Fläche.
</p>
<p class="pult__klein" id="teilen-hinweis">
<strong>Netflix, Disney+ und Prime bleiben schwarz.</strong>
Das ist keine Einstellung, sondern ihr Kopierschutz — auf
Discord und Zoom ist es genauso. Und einen Film
weiterzusenden wäre eine öffentliche Wiedergabe. Gedacht
ist das Teilen für dein Spiel, dein Schnittprogramm, OBS
oder eine Webseite.
</p>
<h3 class="pult__ueber">Kamerafenster</h3>
<div class="kamerawahl">
<div class="kamerawahl__teil">
@@ -623,7 +709,11 @@
drei Sekunden eingetippt, die Karte läuft sofort. -->
<div class="pult__zeile">
<label class="pult__feld pult__feld--kurz">
<span>Dogen</span>
<!-- Der Preis steht IM Feldnamen und nicht darunter: Beim
Eintragen liest man die Zahl von der Zahlungsmeldung
ab, und die Umrechnung muss in derselben Zeile
stehen, in der man tippt. -->
<span>Dogen <span class="preis" id="sp-preis"></span></span>
<input type="text" id="sp-betrag" inputmode="decimal" placeholder="0,5" />
</label>
<label class="pult__feld">
@@ -674,14 +764,14 @@
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
liest daraus die Leitungsrollen. -->
<script src="assets/js/bereiche.js?v=202609281932" defer></script>
<script src="assets/js/wahl.js?v=202609281932" defer></script>
<script src="assets/js/nachfrage.js?v=202609281932" defer></script>
<script src="assets/js/meldung.js?v=202609281932" defer></script>
<script src="assets/js/installieren.js?v=202609281932" defer></script>
<script src="assets/js/kopf.js?v=202609281932" defer></script>
<script src="assets/js/glocke.js?v=202609281932" defer></script>
<script src="assets/js/spendenkarte.js?v=202609281932" defer></script>
<script src="assets/js/reaktion.js?v=202609281932" defer></script>
<script src="assets/js/bereiche.js?v=202609282002" defer></script>
<script src="assets/js/wahl.js?v=202609282002" defer></script>
<script src="assets/js/nachfrage.js?v=202609282002" defer></script>
<script src="assets/js/meldung.js?v=202609282002" defer></script>
<script src="assets/js/installieren.js?v=202609282002" defer></script>
<script src="assets/js/kopf.js?v=202609282002" defer></script>
<script src="assets/js/glocke.js?v=202609282002" defer></script>
<script src="assets/js/spendenkarte.js?v=202609282002" defer></script>
<script src="assets/js/reaktion.js?v=202609282002" defer></script>
</body>
</html>