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]>

workspace/assets/css/reaktion.css

@@ -465,6 +465,36 @@
   display: block;
   background: #0b0a12;
 }
+
+/* ==== EIN GETEILTER BILDSCHIRM WIRD NICHT ZUGESCHNITTEN ============
+
+   Filipe: „waere es nicht einfach eine bildschirm uebertragung zu
+   installieren?"
+
+   `cover` ist fuer ein Gesicht richtig: Es fuellt den Rahmen, und
+   was an den Seiten fehlt, fehlt niemandem. Bei einem Bildschirm
+   faellt genau das weg, worum es geht -- 16:9 in einem 4:3-Fenster
+   verliert links und rechts je ein Achtel, und dort steht die
+   Werkzeugleiste.
+
+   `contain` UND EIN SCHWARZER GRUND. Die schwarzen Streifen sind
+   kein Schoenheitsfehler, sondern die einzige Art, ein Bild ganz zu
+   zeigen, dessen Form man nicht kennt.
+
+   UND DAS SEITENVERHAELTNIS GEHT AUF 16:9. Ein Bildschirm ist fast
+   nie 4:3; das Fenster passt sich an, statt den Rahmen mit Schwarz
+   zu fuellen. */
+.kamera[data-bildschirm="ja"] { aspect-ratio: 16 / 9; }
+.kamera[data-bildschirm="ja"] video {
+  object-fit: contain;
+  background: #000;
+}
+/* Ein Schild, damit niemand ein stehendes Bild fuer eine
+   eingefrorene Kamera haelt. */
+.kamera[data-bildschirm="ja"] .kamera__name::before {
+  content: "Bildschirm · ";
+  color: var(--schrift-leise);
+}
 .kamera__name {
   position: absolute; left: 8px; bottom: 8px;
   padding: 3px 9px 4px;
@@ -972,6 +1002,42 @@
   background: linear-gradient(180deg, #7de2a8, #47c97f);
   box-shadow: 0 10px 22px -14px #47c97f;
 }
+/* ==== DER PREIS AM KAUFKNOPF ======================================
+   Filipe: „die leute sollen nur sehen was dogen kosten. sonst wissen
+   die ja nicht wie viel es kosten wird."
+
+   Klein und ruhig UNTER der Dogenzahl. Die Dogen sind die Waehrung
+   des Hauses, der Preis ist die Auskunft dazu -- andersherum waere
+   es ein Geldknopf mit Dogen als Beiwerk. Die Farbe ist dieselbe wie
+   der Knopftext, nur schwaecher: Ein zweiter Farbton auf einem Knopf
+   von 44 Pixeln ist einer zu viel. */
+.geben__preis {
+  display: block;
+  margin-top: 1px;
+  font-size: .72rem; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  opacity: .62;
+}
+
+/* ==== UND DIE UMRECHNUNG FUER DIE LEITUNG =========================
+   Filipe: „damit ich auch immer weiss was es ist. aber nur ich."
+
+   Sie steht ueberall, wo er eine Dogenzahl EINTRAEGT oder PRUEFT --
+   an der Stufenleiter, beim Eintragen, in den Listen. Immer leise:
+   Sie ist die Nebenauskunft, nicht die Zahl, um die es geht.
+
+   Es gibt sie nur, wenn der Server den Kurs mitgeschickt hat -- und
+   den bekommt nur die Leitung. Ein Zuschauer sieht diese Klasse nie,
+   weil die Zeichenkette leer bleibt und `if (preis)` sie gar nicht
+   erst anlegt. */
+.preis {
+  font-size: .72rem; font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--schrift-leise);
+  letter-spacing: 0; text-transform: none;
+}
+.preis--unter { display: block; margin-top: 1px; }
+
 .geben__frei {
   justify-self: start;
   min-height: 34px; display: inline-flex; align-items: center;
@@ -1484,6 +1550,114 @@
    und was dort passiert, passiert nur bei einem selbst, waehrend
    alle anderen weiterlaufen.
    --------------------------------------------------------------------- */
+/* =====================================================================
+   DER REGIEPLATZ (28.09.2026)
+
+   Filipe: „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 läuft. Das liest man, man tippt es nicht.
+     RECHTS  Was eingetragen wird. Das tippt man VOR der Sendung.
+     UNTEN   Der Transport. Den fasst man WÄHREND der Sendung an --
+             und er liegt deshalb immer an derselben Stelle, über
+             die ganze Breite.
+
+   Vorher stand alles in einem Stapel untereinander, und wer im Live
+   an den Play-Knopf wollte, musste an den Eingabefeldern
+   vorbeiscrollen. Scrollen ist mitten in einer Sendung ein Griff
+   daneben.
+
+   `minmax(0, 1fr)` UND NICHT `1fr`: Ein langer Videotitel würde die
+   Spalte sonst aufziehen, statt abgeschnitten zu werden -- und dann
+   läuft die rechte Seite aus dem Pult. Dieselbe Falle wie bei den
+   Saalzeilen am selben Tag.
+   ===================================================================== */
+.regieplatz {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-areas:
+    "links rechts"
+    "leiste leiste";
+  gap: 16px 20px;
+  align-items: start;
+}
+.regieplatz__seite { grid-area: links; display: grid; gap: 10px; align-content: start; }
+.regieplatz__seite--rechts {
+  grid-area: rechts;
+  /* Eine ruhige Linie statt eines Kastens. Zwei Kästen nebeneinander
+     wären zwei Rahmen mehr auf einer Fläche, die ohnehin voll ist. */
+  border-left: 1px solid var(--rand);
+  padding-left: 20px;
+}
+.regieplatz__ueber {
+  margin: 0;
+  /* .72rem und nicht .68: 11,52 px ist die Untergrenze des Hauses,
+     10,88 waere darunter. Die Zahl ist nicht Geschmack -- sie steht
+     in `pruef-css-klassen`, und genau dort ist diese Zeile
+     aufgefallen. */
+  font-size: .72rem; font-weight: 800;
+  letter-spacing: .14em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
+
+/* ---- 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.
+
+   Sie ist die einzige Fläche im Pult mit eigenem Grund -- weil sie
+   die einzige ist, die im Live gebraucht wird. */
+.transport {
+  grid-area: leiste;
+  display: grid; gap: 10px;
+  padding: 12px 14px 13px;
+  border-radius: 15px;
+  border: 1px solid var(--rand-hell);
+  /* ==== SIE KLEBT UNTEN ==========================================
+
+     GEMESSEN, NICHT VERMUTET: Beim ersten Bau lag die Leiste bei
+     y=986 in einem 900 Pixel hohen Fenster -- unter dem Falz. Wer im
+     Live an den Play-Knopf wollte, haette also scrollen muessen, und
+     genau davon sollte der Umbau wegfuehren. Die Rechnung ging auf
+     (links, rechts, Leiste darunter), und das Ergebnis war trotzdem
+     falsch.
+
+     `sticky` loest beides auf einmal: Sie steht unten -- wie Filipe
+     es wollte -- und bleibt dabei immer sichtbar. Sie ist die
+     LETZTE Zeile des Rasters, also verdeckt sie nichts: Unter ihr
+     kommt nichts mehr.
+
+     Der Grund muss dafuer DICHT sein. Eine halbdurchsichtige Leiste,
+     durch die Text scrollt, ist genau die Art Flaeche, auf der man
+     sich im Live verliest. */
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  background:
+    linear-gradient(180deg, rgba(23, 20, 34, .95), rgba(15, 13, 24, .98));
+  backdrop-filter: blur(12px) saturate(1.1);
+  -webkit-backdrop-filter: blur(12px) saturate(1.1);
+  box-shadow: 0 -14px 26px -22px #000, inset 0 1px 0 rgba(255, 255, 255, .06);
+}
+.transport__schiene { display: flex; align-items: center; gap: 12px; }
+.transport__schiene .spur__schiene { flex: 1 1 auto; min-width: 0; }
+.transport__reihe {
+  display: grid;
+  /* Drei gleich breite Teile -- nur so steht der Transport wirklich
+     in der Mitte und nicht dort, wo die Nachbarn gerade Platz
+     lassen. */
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 10px;
+}
+.transport__teil { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.transport__teil--mitte { justify-content: center; gap: 10px; }
+.transport__teil--rechts { justify-content: flex-end; }
+
 .spur {
   display: grid; gap: 11px;
   padding: 13px 14px 14px;
@@ -1521,7 +1695,6 @@
   font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
   font-size: .82rem;
 }
-.spur__band { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
 .spur__knopf {
   appearance: none; cursor: pointer;
   min-height: 40px; min-width: 44px; padding: 0 12px;
@@ -1533,11 +1706,18 @@
   font-variant-numeric: tabular-nums;
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
 }
+/* DER PLAY-KNOPF IST DER GROESSTE KNOPF DES HAUSES -- und das ist
+   kein Geschmack: Er ist der einzige, den man mitten in einer
+   Sendung blind treffen muss. Rund, damit er sich schon in der
+   Form von allen anderen unterscheidet. */
 .spur__knopf--gross {
-  min-width: 52px;
-  background: rgba(255, 255, 255, .1);
+  min-width: 58px; min-height: 58px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, .12);
+  border-color: var(--rand-hell);
 }
-.spur__knopf--gross svg { width: 18px; height: 18px; fill: currentColor; }
+.spur__knopf--gross:hover { background: rgba(255, 255, 255, .17); }
+.spur__knopf--gross svg { width: 22px; height: 22px; fill: currentColor; }
 .spur__knopf--weiter {
   border-color: rgba(154, 183, 255, .34);
   background: rgba(154, 183, 255, .12);
@@ -1551,7 +1731,11 @@
   border-color: rgba(224, 161, 58, .36);
   background: rgba(224, 161, 58, .13);
   color: #f0cf9a;
-  max-width: 24rem;
+  /* Er steht seit dem 28.09. in der linken Spalte und nicht mehr in
+     einer eigenen Reihe: Dort ist die Breite der Spalte die Grenze,
+     nicht eine Zahl, die man beim naechsten Umbau vergisst. */
+  max-width: 100%;
+  justify-content: flex-start;
   overflow: hidden;
 }
 .spur__knopf--tausch span {
@@ -1562,13 +1746,11 @@
 /* ---- Geschwindigkeit ----
    Eine Reihe kleiner Schalter, kein Schieberegler: Es gibt sechs
    erlaubte Werte, und ein Regler, der zwischen ihnen einrastet, wäre
-   eine Bedienung, die etwas vortäuscht, das sie nicht kann. */
-.spur__mehr {
-  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-  margin-top: 9px;
-  padding-top: 9px;
-  border-top: 1px solid var(--rand);
-}
+   eine Bedienung, die etwas vortäuscht, das sie nicht kann.
+
+   Sie steht LINKS in der Transportleiste und nicht neben dem
+   Play-Knopf: Sie wird selten angefasst, und im Live fasst man in
+   die Mitte. */
 .tempo { display: flex; gap: 4px; flex-wrap: wrap; }
 .tempo__knopf {
   appearance: none; cursor: pointer;
@@ -1998,6 +2180,17 @@
    Element gedeckt ist, und hat den Eckwähler zu Recht gemeldet,
    solange dort nur eine feste Höhe stand. Eine feste Höhe sagt
    „genau so groß"; die Regel will wissen „mindestens so groß". */
+/* Der Teilen-Knopf in der Senderleiste: gedrueckt heisst hier
+   „teilt gerade" und nicht „ist aus" -- deshalb leuchtet er, statt
+   durchgestrichen zu sein. */
+#s-teilen[aria-pressed="true"] {
+  border-color: rgba(125, 226, 168, .5);
+  background: rgba(125, 226, 168, .16);
+  color: #9ff0c2;
+}
+#s-teilen svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
+.sender-knopf[disabled] { opacity: .4; cursor: default; }
+
 @media (pointer: coarse) {
   .kamgroesse__knopf { min-height: 44px; }
   .kamecke__knopf { min-height: 44px; min-width: 52px; height: 44px; width: 52px; }
@@ -2063,6 +2256,39 @@
   font-size: .72rem; font-weight: 700;
   color: var(--schrift-leise); letter-spacing: .04em;
 }
+/* ==== DER HAUPTKNOPF EINER ZEILE ===================================
+   `knopf-still--haupt` stand schon an „Übernehmen" bei den Stufen --
+   und war NIRGENDS gestaltet. Eine Klasse, die kein Stilblatt kennt,
+   ist stille Absicht ohne Wirkung: Sie sieht im Quelltext aus, 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.
+
+   Dieselben Werte wie „Nächstes" in der Transportleiste: Ein Haus,
+   in dem die wichtige Handlung zweimal verschieden aussieht, hat
+   keine wichtige Handlung. */
+.knopf-still--haupt {
+  border-color: rgba(154, 183, 255, .34);
+  background: rgba(154, 183, 255, .12);
+  color: #cfe0ff;
+}
+
+/* Ein Knopf, der gebraucht wird, aber nicht gesucht: leise Farbe,
+   und im Live grau. Rot waere er erst, wenn er etwas zerstoeren
+   koennte -- er leert nur den Schreibtisch. */
+.knopf-still--leise {
+  border-color: var(--rand);
+  background: none;
+  color: var(--schrift-leise);
+}
+.knopf-still--leise:hover:not([disabled]) {
+  color: var(--an-hell);
+  border-color: rgba(216, 64, 74, .35);
+  background: rgba(216, 64, 74, .1);
+}
+.knopf-still--leise[disabled] { opacity: .4; cursor: default; }
+.pult__zeile--ende { margin-top: 4px; align-items: center; }
+
 .pult__feld select {
   min-height: 44px; padding: 0 10px;
   border-radius: 11px;
@@ -2089,6 +2315,32 @@
    Grund, warum jemand hier ist.
    ===================================================================== */
 @media (max-width: 860px) {
+  /* ==== AM HANDY WIRD AUS LINKS UND RECHTS EIN STAPEL ==========
+     Zwei Spalten auf 390 px waeren zwei Spalten mit je 180 px -- da
+     passt kein Videotitel hinein und kein Datumsfeld. Die
+     Transportleiste bleibt, wo sie ist: ganz unten, ueber die
+     ganze Breite. Sie ist das, was man im Live anfasst, und das
+     aendert sich mit der Bildschirmbreite nicht. */
+  .regieplatz {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "links" "rechts" "leiste";
+    gap: 14px;
+  }
+  .regieplatz__seite--rechts {
+    border-left: 0;
+    border-top: 1px solid var(--rand);
+    padding-left: 0;
+    padding-top: 14px;
+  }
+  /* Die drei gleich breiten Teile der Leiste gehen auf; uebrig
+     bleibt: Transport in der Mitte, alles andere darunter. */
+  .transport__reihe {
+    grid-template-columns: minmax(0, 1fr);
+    justify-items: center;
+    gap: 12px;
+  }
+  .transport__teil--rechts { justify-content: center; }
+
   .kino {
     grid-template-columns: 1fr;
     grid-template-rows: auto 1fr;

workspace/assets/js/meldung.js

@@ -212,6 +212,9 @@
       'Es sind schon zwei Gäste dabei. Nimm erst jemanden heraus.',
     layout_unbekannt:
       'Diese Anordnung gibt es nicht.',
+    laeuft_noch:
+      'Die Sendung läuft gerade. Beende sie zuerst — mitten im Live '
+      + 'zurückzusetzen würde allen das Video wegnehmen.',
     satz_unbekannt:
       'Diesen Münzsatz gibt es nicht. Wähl einen aus der Liste — '
       + '„Eigenes Zeichen" geht erst, wenn du eines hochgeladen hast.',

workspace/assets/js/reaktion.js

@@ -278,6 +278,11 @@
          Ohne diese Beschriftung sind beide ein schwarzes Rechteck,
          und man fragt den anderen, ob bei ihm etwas klemmt. */
       fenster.dataset.kamera = s.kamera_aus ? 'aus' : 'an';
+      /* EIN BILDSCHIRM WIRD NICHT ZUGESCHNITTEN. Ein Kamerafenster
+         steht auf `object-fit: cover` -- richtig fuer ein Gesicht,
+         falsch fuer einen Schreibtisch: Dort faellt genau das weg,
+         worum es geht. Das Stilblatt schaltet daran auf `contain`. */
+      fenster.dataset.bildschirm = s.bildschirm ? 'ja' : 'nein';
       /* `stumm` setzt der Host fuer alle, `mikro_aus` der Mensch fuer
          sich. Beides sieht man dem Fenster an, und beides heisst
          dasselbe: von hier kommt gerade kein Ton. */
@@ -291,8 +296,13 @@
       }
       const draht = drähte.get(s.id);
       const v = fenster.querySelector('video');
-      if (s.id === meineId && meinStrom && v.srcObject !== meinStrom) {
-        v.srcObject = meinStrom;
+      /* IM EIGENEN FENSTER STEHT, WAS DIE ANDEREN SEHEN. Zeigte es
+         weiter die Kamera, waehrend der Bildschirm hinausgeht, waere
+         es die eine Anzeige, der man nicht trauen kann -- und man
+         merkt es erst, wenn jemand nachfragt. */
+      const meins = bildschirmStrom || meinStrom;
+      if (s.id === meineId && meins && v.srcObject !== meins) {
+        v.srcObject = meins;
         v.play().catch(() => { /* stumm darf immer */ });
       }
       if (draht && draht.strom && v.srcObject !== draht.strom) {
@@ -326,6 +336,31 @@
     const mAus = !!lage.ich.mikro_aus;
     $('s-kamera').setAttribute('aria-pressed', String(kAus));
     $('s-mikro').setAttribute('aria-pressed', String(mAus));
+
+    /* ==== DER BILDSCHIRM ==========================================
+       `aria-pressed` steht hier fuer „teilt gerade" und nicht wie
+       bei den Nachbarn fuer „ist aus". Das ist kein Bruch, sondern
+       der Unterschied: Kamera und Mikro schaltet man AB, den
+       Bildschirm schaltet man AN.
+
+       UND DIE KAMERA WIRD DERWEIL GRAU. Solange der Bildschirm
+       hinausgeht, ist die Bildspur der Leitungen der Bildschirm --
+       der Kameraknopf haette dann keine Wirkung mehr auf das, was
+       ankommt. Ein Knopf, der still nichts tut, ist schlimmer als
+       einer, der nicht da ist. */
+    const teilt = !!lage.ich.bildschirm;
+    const knopf = $('s-teilen');
+    if (knopf) {
+      knopf.setAttribute('aria-pressed', String(teilt));
+      knopf.title = teilt
+        ? 'Teilen beenden — dann läuft wieder deine Kamera'
+        : 'Deinen Bildschirm statt der Kamera zeigen';
+      $('s-teilen-wort').textContent = teilt ? 'Teilt' : 'Bildschirm';
+    }
+    $('s-kamera').disabled = teilt;
+    $('s-kamera').title = teilt
+      ? 'Solange du den Bildschirm teilst, geht dein Bildschirm hinaus'
+      : '';
     $('s-kamera-wort').textContent = kAus ? 'Kamera an' : 'Kamera';
     $('s-mikro-wort').textContent = mAus ? 'Mikro an' : 'Mikro';
     $('s-kamera').title = kAus ? 'Bild wieder einschalten' : 'Bild abschalten';
@@ -337,6 +372,146 @@
    *  ERST DAS GERAET, DANN DIE ANSAGE. Andersherum stuende bei allen
    *  „Kamera aus", waehrend noch ein Bild fliesst -- und das ist die
    *  unangenehmere Reihenfolge: Man glaubt, man sei unsichtbar. */
+  /* =================================================================
+     DEN BILDSCHIRM TEILEN
+
+     Filipe: „waere es nicht einfach eine bildschirm uebertragung zu
+     installieren und es zu perfektionieren?"
+
+     Es ist einfach, weil der Weg schon da ist: Die Kamerabilder
+     laufen als Direktverbindung von Mensch zu Mensch. Geteilt wird
+     deshalb nicht NEBEN der Kamera, sondern AN IHRER STELLE --
+     `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.
+
+     WAS DAMIT NICHT GEHT, STEHT IM REGIEPULT und nicht nur hier:
+     Netflix, Disney+ und Prime bleiben schwarz (Kopierschutz), und
+     einen Film weiterzusenden waere eine oeffentliche Wiedergabe.
+     ================================================================= */
+  let bildschirmStrom = null;
+  let bildschirmSpur = null;
+
+  async function bildschirmSchalten() {
+    if (bildschirmStrom) { await bildschirmBeenden(); return; }
+    if (!navigator.mediaDevices?.getDisplayMedia) {
+      sagFehler('Dieser Browser kann den Bildschirm nicht teilen. '
+        + 'Am Handy geht es grundsätzlich nicht — dort gibt es die Funktion nicht.');
+      return;
+    }
+    /* OHNE KAMERA KEINE LEITUNG. Die Verbindungen entstehen aus dem
+       eigenen Strom; ohne ihn gibt es nichts, worin man tauschen
+       könnte. */
+    if (!meinStrom) await kameraHolen();
+    if (!meinStrom) return;
+
+    let strom;
+    try {
+      strom = await navigator.mediaDevices.getDisplayMedia({
+        /* 15 Bilder je Sekunde und höchstens 1280 breit. Ein
+           Bildschirm ist meist ruhig, und jede Verbindung kostet
+           den, der teilt, Upload: Bei 12 Zuschauern ist der
+           Unterschied zwischen „läuft" und „stockt" genau diese
+           Zahl. Gemessen steht die Grenze im Kopf von
+           reaktion-tabellen.js. */
+        video: { frameRate: { ideal: 15, max: 30 }, width: { max: 1280 } },
+        /* KEIN RECHNERTON. `getDisplayMedia` kann ihn liefern, und
+           er käme zusätzlich zum Mikrofon heraus -- alles doppelt
+           und einmal davon verzögert. Der Ton bleibt beim Mikro. */
+        audio: false,
+      });
+    } catch {
+      /* Abgebrochen ist kein Fehler: Wer im Auswahlfenster
+         „Abbrechen" drückt, hat sich entschieden. Eine Fehlermeldung
+         darauf wäre eine Belehrung. */
+      return;
+    }
+
+    bildschirmStrom = strom;
+    bildschirmSpur = strom.getVideoTracks()[0] || null;
+    /* DER BROWSER HAT EINEN EIGENEN STOPP-KNOPF, unten am Rand. Wer
+       ihn drückt, erwartet, dass alles zurückgeht -- ohne diesen
+       Zuhörer bliebe die Seite auf „teilt" stehen und sendete ein
+       totes Bild. */
+    if (bildschirmSpur) {
+      bildschirmSpur.addEventListener('ended', () => { bildschirmBeenden(); });
+    }
+    await bildSpurTauschen(bildschirmSpur);
+    await bildschirmMelden(true);
+  }
+
+  async function bildschirmBeenden() {
+    if (!bildschirmStrom) return;
+    try { for (const sp of bildschirmStrom.getTracks()) sp.stop(); } catch { /* war schon aus */ }
+    bildschirmStrom = null;
+    bildschirmSpur = null;
+    await bildSpurTauschen(meinStrom ? meinStrom.getVideoTracks()[0] : null);
+    await bildschirmMelden(false);
+  }
+
+  /** Die Bildspur in JEDER bestehenden Leitung austauschen. */
+  async function bildSpurTauschen(spur) {
+    for (const d of drähte.values()) {
+      const sender = d.pc.getSenders().find((x) => x.track && x.track.kind === 'video');
+      if (!sender) continue;
+      try { await sender.replaceTrack(spur); } catch { /* diese Leitung eben nicht */ }
+    }
+    kamerasZeichnen();
+  }
+
+  async function bildschirmMelden(an) {
+    try {
+      const a = await hole('/workspace/api/reaktion/senden', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ bildschirm: an }),
+      });
+      if (a.ok) { lage = { ...(await a.json()) }; zeichnen(); }
+    } catch { /* die Leitung laeuft trotzdem -- nur das Schild fehlt */ }
+  }
+
+  /* =================================================================
+     ALLES ZURUECKSETZEN
+
+     Filipe: „brauch ich auch noch einen button wo ich alles easy
+     zuruecksetzen kann."
+
+     ZWEI SPALTEN IM DIALOG, und das ist der ganze Punkt: Was geleert
+     wird, steht neben dem, was bleibt. Ein „Bist du sicher?" ohne
+     diese Liste ist keine Frage, sondern eine Huerde -- man klickt
+     sie weg und erfaehrt erst danach, was fehlt.
+     ================================================================= */
+  async function allesZuruecksetzen() {
+    if (!window.frageNach) return;
+    const ja = await window.frageNach({
+      titel: 'Das Pult zurücksetzen?',
+      was: 'Titel, Video, zweites Video, Vorschaubild, Beginn, die '
+        + 'Warteschlange und die Gästeliste werden geleert. Anordnung, '
+        + 'Kameragröße, Ecke, Tempo und der Chatmodus gehen auf ihre '
+        + 'Vorgaben zurück.',
+      bleibt: 'Spenden, die Dogen der Leute, der Chatverlauf und alle '
+        + 'Maßnahmen der Moderation bleiben unberührt.',
+      ja: 'Ja, zurücksetzen',
+      nein: 'Doch nicht',
+      endgueltig: true,
+    });
+    if (!ja) return;
+    const a = await hole('/workspace/api/reaktion/zuruecksetzen', { method: 'POST' });
+    if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
+    lage = { ...(await a.json()) };
+    zeichnen();
+    /* DIE FELDER LEERT DER SERVER NICHT -- er kennt sie nicht. Ohne
+       diese Zeilen stuende der alte Text weiter im Eingabefeld,
+       waehrend die Sendung leer ist: die eine Anzeige, der man nicht
+       trauen kann. */
+    for (const id of ['p-titel', 'p-video', 'p-vorschau', 'p-zweit', 'p-beginn']) {
+      const e = $(id);
+      if (e) e.value = '';
+    }
+    sagFehler('');
+  }
+
   async function sendenSchalten(was, aus) {
     if (!meinStrom) return;
     const spuren = was === 'kamera'
@@ -688,7 +863,18 @@
       }
     };
     if (binSender && meinStrom) {
-      for (const spur of meinStrom.getTracks()) pc.addTrack(spur, meinStrom);
+      /* ==== WAS HINAUSGEHT, IST NICHT IMMER DIE KAMERA ==========
+         Teile ich gerade den Bildschirm, muss auch eine NEUE
+         Verbindung den Bildschirm bekommen -- sonst sieht jeder, der
+         waehrenddessen dazukommt, mein Gesicht statt dessen, worum
+         es geht. Genau das ist die Sorte Fehler, die erst auffaellt,
+         wenn jemand im Chat fragt, was er sehen soll.
+         Der Ton kommt weiter vom Mikrofon: `getDisplayMedia` liefert
+         den Ton des Rechners, und den will hier niemand. */
+      const bild = bildschirmSpur || meinStrom.getVideoTracks()[0];
+      const ton = meinStrom.getAudioTracks()[0];
+      if (bild) pc.addTrack(bild, meinStrom);
+      if (ton) pc.addTrack(ton, meinStrom);
     }
     return d;
   }
@@ -1683,10 +1869,17 @@
     $('zeichen-weg').addEventListener('click', zeichenWeg);
 
     /* ---- Spenden ---- */
+    $('p-zuruecksetzen').addEventListener('click', allesZuruecksetzen);
     $('sp-zeigen').addEventListener('click', spendeEintragen);
     $('sp-betrag').addEventListener('keydown', (e) => {
       if (e.key === 'Enter') { e.preventDefault(); spendeEintragen(); }
     });
+    /* Beim Tippen mitrechnen: Die Zahl von der Zahlungsmeldung steht
+       in Euro, eingetragen wird in Dogen -- ohne die Umrechnung
+       daneben ist jeder Eintrag geraten. */
+    $('sp-betrag').addEventListener('input', () => {
+      $('sp-preis').textContent = alsPreis(dogenInMille($('sp-betrag').value));
+    });
 
     $('v-spiel').addEventListener('click', spielPause);
     $('v-zurueck').addEventListener('click', () => springen(-10));
@@ -2161,6 +2354,17 @@
     $('p-beenden').disabled = lage.stand === 'zu';
     $('p-starten').textContent = lage.video ? 'Auf Sendung' : 'Erst ein Video eintragen';
 
+    /* ZURUECKSETZEN GEHT NICHT IM LIVE. Wer mitten in der Sendung
+       zuruecksetzt, zieht allen das Video unter den Fuessen weg --
+       und das ist nicht rueckgaengig zu machen. Der Knopf wird grau
+       und sagt, warum; einer, der verschwindet, laesst einen
+       suchen. */
+    const laeuftGerade = lage.stand === 'live';
+    $('p-zuruecksetzen').disabled = laeuftGerade;
+    $('zurueck-hinweis').textContent = laeuftGerade
+      ? 'Geht erst, wenn die Sendung beendet ist.'
+      : 'Leert das Pult — Spenden, Dogen und Chat bleiben.';
+
     for (const k of $('layout-reihe').children) {
       k.setAttribute('aria-pressed', String(k.dataset.layout === (lage.layout || 'kino')));
     }
@@ -2384,6 +2588,11 @@
       const zeile = el('li', 'spendenzeile');
       const betrag = el('strong', 'spendenzeile__betrag');
       betrag.append(window.Spendenkarte.dogenStueck(k.dogen_mille, k.zeichen));
+      /* Der Preis daneben -- das ist die Zahl, die in Filipes
+         Zahlungsmeldung steht. Ohne sie muesste er beim Bestaetigen
+         im Kopf umrechnen, und das mitten in einer Sendung. */
+      const preis = alsPreis(k.dogen_mille);
+      if (preis) betrag.append(el('span', 'preis preis--unter', preis));
       zeile.append(betrag);
 
       /* ==== DIE SCHRANKE VOR DEM STREAM =========================
@@ -2435,6 +2644,8 @@
       const zeile = el('li', 'spendenzeile');
       const betrag = el('strong', 'spendenzeile__betrag');
       betrag.append(window.Spendenkarte.dogenStueck(k.dogen_mille, k.zeichen));
+      const preis = alsPreis(k.dogen_mille);
+      if (preis) betrag.append(el('span', 'preis preis--unter', preis));
       zeile.append(betrag);
       const mitte = el('div', 'spendenzeile__mitte');
       mitte.append(el('span', 'spendenzeile__wer', k.name || 'Jemand'));
@@ -2465,6 +2676,8 @@
       zeile.append(el('span', 'dogenzeile__wer', p.name));
       const wert = el('strong', 'dogenzeile__wert');
       wert.append(window.Spendenkarte.dogenStueck(p.mille, spendenLage.zeichen));
+      const preis = alsPreis(p.mille);
+      if (preis) wert.append(el('span', 'preis preis--unter', preis));
       zeile.append(wert);
       staende.append(zeile);
     }
@@ -2945,8 +3158,27 @@
 
       /* Die Grenze steht in DOGEN — im Feld wie in der Leitung.
          Diese Seite kennt keinen anderen Wert mehr. */
-      zeile.append(feld('Ab Dogen', eingabe('text', milleAlsWort(st.ab_mille),
-        { inputMode: 'decimal', className: 'stufe-ab' })));
+      /* ==== WAS EINE STUFE IN GELD BEDEUTET ==================
+         Filipe: „da muss ich auch sehen so viel dogen sind so viel
+         euro. damit ich auch immer weiss was es ist."
+
+         Direkt am Feld und nicht in einer Fußzeile: Wer eine Grenze
+         verschiebt, will im selben Blick sehen, was er verschoben
+         hat. Die Zahl rechnet beim Tippen mit -- eine Umrechnung,
+         die erst nach dem Speichern stimmt, kommt zu spät. */
+      const abFeld = eingabe('text', milleAlsWort(st.ab_mille),
+        { inputMode: 'decimal', className: 'stufe-ab' });
+      const abPreis = el('span', 'preis', alsPreis(st.ab_mille));
+      abFeld.addEventListener('input', () => {
+        abPreis.textContent = alsPreis(dogenInMille(abFeld.value));
+      });
+      const abKasten = el('label', 'stufe-feld');
+      const abWort = el('span');
+      abWort.append(document.createTextNode('Ab Dogen '));
+      abWort.append(abPreis);
+      abKasten.append(abWort);
+      abKasten.append(abFeld);
+      zeile.append(abKasten);
       zeile.append(feld('Name', eingabe('text', st.name,
         { maxLength: 40, className: 'stufe-name' })));
 
@@ -3228,6 +3460,13 @@
         const k = el('a', 'geben__betrag');
         k.append(window.Spendenkarte.dogenStueck(b.mille, spendenLage.zeichen,
           'dogen--nurzahl'));
+        /* ==== DER PREIS STEHT AM KNOPF =========================
+           Filipe: „die leute sollen nur sehen was dogen kosten.
+           sonst wissen die ja nicht wie viel es kosten wird."
+           Klein unter der Zahl: Die Dogen sind die Währung des
+           Hauses, der Preis ist die Auskunft dazu. Andersherum
+           wäre es ein Geldknopf mit Dogen als Beiwerk. */
+        if (b.cent) k.append(el('span', 'geben__preis', window.Spendenkarte.alsGeld(b.cent)));
         k.href = b.ziel;
         k.target = '_blank';
         k.rel = 'noopener noreferrer';
@@ -3351,6 +3590,25 @@
     return Math.round(zahl * 1000);
   }
 
+  /** Dogen in Geld — oder nichts.
+   *
+   *  ==== DIE ERLAUBNIS STECKT IN DEN DATEN, NICHT IN EINEM `if`
+   *
+   *  Der Kurs kommt nur für die Leitung mit (`kurs_cent_je_doge`).
+   *  Ein Zuschauer hat ihn nicht und kann deshalb GAR KEINEN Preis
+   *  ausrechnen -- auch nicht, wenn eine spätere Zeile es versuchte.
+   *  Eine Abfrage „darf der das sehen?" in der Oberfläche wäre eine
+   *  Regel, die man vergessen kann; eine fehlende Zahl ist eine, die
+   *  man nicht vergessen kann.
+   *
+   *  Die Kaufknöpfe sind die Ausnahme: Dort schickt der Server den
+   *  Betrag ausdrücklich mit, für jeden. */
+  function alsPreis(mille) {
+    const kurs = spendenLage?.kurs_cent_je_doge;
+    if (!kurs) return '';
+    return window.Spendenkarte.alsGeld(Math.round((Number(mille) || 0) * kurs / 1000));
+  }
+
   /** Tausendstel zurück in das, was im Feld steht. */
   function milleAlsWort(mille) {
     return String((Math.round(Number(mille) || 0) / 1000)).replace('.', ',');
@@ -3412,6 +3670,7 @@
       () => sendenSchalten('kamera', !lage.ich.kamera_aus));
     $('s-mikro').addEventListener('click',
       () => sendenSchalten('mikro', !lage.ich.mikro_aus));
+    $('s-teilen').addEventListener('click', bildschirmSchalten);
 
     /* Die Chat-Stufe -- nur fuer die zwei */
     $('chat-meldungen')?.addEventListener('click', meldungenZeigen);

workspace/assets/js/spendenkarte.js

@@ -105,6 +105,31 @@
     }
   }
 
+  /** Cent als Geld.
+   *
+   *  ==== WARUM ES DIESE FUNKTION WIEDER GIBT
+   *
+   *  Am 28.09. flog sie raus: „es soll auch nie geld da stehen
+   *  sondern Dogen." Das war richtig für alles, was ANZEIGE ist --
+   *  Karte, Stream, Chat, Punktestand. Es war falsch für die eine
+   *  Stelle, an der jemand KAUFT: Wer auf „0,2 Dogen" drückt, muss
+   *  vorher wissen, dass ihn das zwei Euro kostet.
+   *
+   *  Sie formatiert nur. Ob überhaupt ein Betrag da ist, entscheidet
+   *  der Server -- ein Zuschauer bekommt außerhalb der Kaufknöpfe
+   *  keinen. */
+  function alsGeld(cent) {
+    const c = Math.round(Number(cent) || 0);
+    try {
+      return new Intl.NumberFormat('de-DE', {
+        style: 'currency', currency: 'EUR',
+        minimumFractionDigits: c % 100 === 0 ? 0 : 2,
+      }).format(c / 100);
+    } catch {
+      return (c / 100).toFixed(2).replace('.', ',') + ' €';
+    }
+  }
+
   /** „Doge" oder „Dogen" — die Einzahl gibt es nur bei genau einem. */
   function dogenWort(mille) {
     return Math.abs(Math.round(Number(mille) || 0)) === 1000 ? 'Doge' : 'Dogen';
@@ -288,7 +313,7 @@
   }
 
   window.Spendenkarte = {
-    zeigen, alsDogen, dogenWort, dogenStueck, muenzeFuer,
+    zeigen, alsDogen, dogenWort, dogenStueck, muenzeFuer, alsGeld,
     /* „dogen" ist keine Zeichnung, aber eine gueltige Vorlage --
        deshalb steht sie hier dabei und nicht in `VORLAGEN`. */
     VORLAGEN: ['dogen', ...Object.keys(VORLAGEN)],