Reaction: Geschwindigkeit, zwei neue Anordnungen, zweites Video

Filipes Wunsch: „auch bei den videos sachen wie pause
geschwindigkeit. meine kamera größer machen video kleiner. nur mein
bild, nur das video, möglichkeit zwischen allem zu wechseln so wie ich
will, auch gerne so dass ich vielleicht noch ein zweites nebenbei
vorbereiten kann so dass ich hin und her switchen kann."

GESCHWINDIGKEIT
Sechs Stufen von 0,5× bis 2× (0,25× fehlt mit Absicht — bei einem
Viertel klingt Sprache wie ein defektes Band). Sie gilt für ALLE: Wer
sie nur bei sich umstellte, redete über eine Stelle, die die anderen
noch nicht gesehen haben. Die OBS-Bühne zieht sie mit nach — ohne das
liefe der Stream nach fünf Minuten auf 1,5× zweieinhalb Minuten hinter
dem Saal her.
Und der Zuschauer SIEHT sie: ein kleines Schild „1,5×
Geschwindigkeit" auf der Leinwand, nur wenn es nicht 1× ist. Ohne das
hält jeder Zweite seine Leitung für kaputt.
Zwei Fallen, die dabei zugemacht wurden: Der Fünf-Sekunden-Takt des
Hosts schreibt das Tempo NICHT mit (sonst drehte ein Takt mit altem
Wert die Einstellung zurück), und nach jedem Videowechsel wird es neu
gesetzt (YouTube stellt beim Laden auf 1 zurück). Gesetzt wird nur,
was `getAvailablePlaybackRates()` hergibt — einen unmöglichen Wert
ignoriert der Player schweigend, und dann stünde der Knopf auf 1,5
und es liefe 1,0.

ZWEI ANORDNUNGEN MEHR
„Nur Video" und „Nur Kamera" sind kein weiteres Größenverhältnis,
sondern ein Weglassen — und genau das braucht OBS: Dort liegt die
Kamera ohnehin als eigene Quelle, die Bühnenseite soll sie nicht
doppelt zeigen. `display: none` und nicht `opacity: 0`: ein
unsichtbarer YouTube-Rahmen spielt weiter und hält den Ton.
Tasten 1–5, wie vorher 1–3.

DAS ZWEITE VIDEO — und warum es nicht die Warteschlange ist
Die Schlange ist eine Reihenfolge: eins nach dem anderen, das
Gespielte ist weg. Filipe will etwas anderes — zwei Videos
NEBENEINANDER, hin und her, und jedes merkt sich seine Stelle. Mit
der Schlange nachgebaut wäre es eine Schlange, aus der man nie wieder
herauskommt. Der Umschalter steht nur da, wenn es etwas zum Umschalten
GIBT; ein Knopf, der „kein zweites Video" antwortet, ist im Live eine
Falle. Getauscht wird in EINEM Schreibvorgang (BEGIN IMMEDIATE) —
ein Abbruch dazwischen hätte dasselbe Video auf beiden Seiten und die
gemerkte Stelle des anderen verloren. Und die Stelle kommt vom Host
und nicht aus der Datenbank: dort steht der Stand vom letzten Takt,
bis zu fünf Sekunden alt.
Was daneben bereitliegt, sieht nur, wer sendet — es ist die Rückhand,
und die verrät man nicht vorher (`zweit` ist aus `oeffentlich()`
ausgenommen).

DER FEHLER, DEN DIE MESSUNG GEFUNDEN HAT
Bei „Nur Kamera" war der Kamerabehälter 2175 px breit in einer
1072 px breiten Leinwand — von zwei Gästen stand nur einer im Bild,
der zweite lag hinter `overflow: hidden`. Auf dem Bildschirmfoto sah
das aus wie eine Anordnung für einen, und niemand hätte gefragt, wo
der zweite geblieben ist.
Zwei Ursachen: Die Leinwand ist ein Raster mit einer Spalte nach
Inhaltsbreite — ein zu breites Kind im Fluss zieht die Spalte mit, und
`width: 100%` bezog sich danach auf die gewachsene Spalte. Die
Begrenzung wuchs also mit dem, was sie begrenzen sollte; `max-width:
calc(50% - 8px)` rechnete gegen denselben Wert und war wirkungslos.
Jetzt `position: absolute; inset: 0` (kann das Raster nicht mehr
aufziehen) und `flex: 1 1 0; min-width: 0` an den Fenstern — eine
Regel, die nicht rechnet, kann sich nicht verrechnen.
Die Messung prüft seitdem bei JEDER Anordnung, ob alle Kamerafenster
innerhalb der Leinwand liegen.

GEMESSEN, NICHT ANGENOMMEN
Dass in der Datenbank 1.5 steht, sagt nichts darüber, ob das Video
schneller läuft. Die Messung liest deshalb die Uhr der Regie zweimal
ab und rechnet nach: 1× → 1,00 Sekunden je Sekunde, 2× → 2,00.
Der Umschalter ebenso: hin, zurück, und die Uhr steht wieder bei 79 s
statt bei 0.

GEPRUEFT
pruef-reaktion: 260 Prüfungen (vorher 216), 0 Fehler.
pruef-buehne 36, pruef-struktur, pruef-meldungen, pruef-tippziele,
pruef-css-klassen alle grün. mess-reaktion: Rückgabewert 0, kein
einziges ACHTUNG.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/reaktion.css

@@ -273,6 +273,23 @@
   display: grid; place-items: center;
   color: var(--schrift-leise); font-size: .9rem;
 }
+/* Links oben und nicht rechts: Rechts unten liegen die Kamerafenster,
+   rechts oben das Stumm-Schild. Gedeckt und klein -- es soll
+   beantworten, nicht rufen. */
+.leinwand__tempo {
+  position: absolute; left: 14px; top: 14px;
+  z-index: 22;
+  padding: 3px 9px 4px;
+  border-radius: 999px;
+  font-size: .72rem; font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: .04em;
+  background: rgba(6, 5, 11, .76);
+  border: 1px solid var(--rand);
+  color: var(--schrift-leise);
+  backdrop-filter: blur(6px);
+}
+.leinwand__tempo[hidden] { display: none; }
 
 /* ---- Die Kamerafenster ----------------------------------------------
    Sie liegen ÜBER dem Video. Genau so sieht eine Reaction aus: das
@@ -360,6 +377,74 @@
   z-index: 25;
 }
 
+/* ==== WEGLASSEN IST KEINE ANORDNUNG MEHR, SONDERN EINE ANDERE FRAGE
+
+   Filipe: „nur mein bild, nur das video, möglichkeit zwischen allem
+   zu wechseln so wie ich will."
+
+   Die drei oben verschieben Größenverhältnisse. Diese zwei nehmen
+   etwas GANZ weg — und dafür gibt es einen sehr praktischen Grund:
+   In OBS liegt Filipes Kamera ohnehin als eigene Quelle (schärfer,
+   frei zu schieben). Die Bühnenseite soll dann nur noch das Video
+   zeigen, sonst steht sein Gesicht zweimal im Bild. Umgekehrt beim
+   Reden zwischen zwei Videos: Dann soll das stehengebliebene
+   YouTube-Bild verschwinden und nicht nur kleiner werden.
+
+   `display: none` UND NICHT `opacity: 0`. Ein unsichtbares
+   Videofenster spielt weiter, verbraucht Rechenzeit und — der
+   eigentliche Punkt — hält bei einem `iframe` den Ton. Man hörte
+   dann ein Video, das niemand sieht. */
+.kino[data-layout="nur_video"] .kameras { display: none; }
+.kino[data-layout="nur_kamera"] .leinwand__video { display: none; }
+.kino[data-layout="nur_kamera"] .leinwand__warte { display: none; }
+/* Die Kameras füllen die ganze Leinwand, nebeneinander und gleich
+   groß.
+
+   ==== WARUM `absolute` UND `flex: 1 1 0` UND NICHT DAS NAHELIEGENDE
+
+   Der erste Versuch war `position: static; width: 100%; height: 100%`
+   und an den Fenstern `height: 100%; aspect-ratio: 4/3;
+   max-width: calc(50% - 8px)`. Klingt richtig. GEMESSEN war der
+   Behälter dann 2175 px breit in einer 1072 px breiten Leinwand, und
+   von zwei Gästen stand nur einer im Bild — der zweite lag komplett
+   außerhalb, hinter `overflow: hidden`.
+
+   Zwei Fehler auf einmal, und beide sind lehrreich:
+
+   1. `.leinwand` ist ein Raster mit einer Spalte nach Inhaltsbreite.
+      Ein im Fluss stehendes Kind, das zu breit wird, ZIEHT DIE SPALTE
+      MIT — und `width: 100%` bezieht sich danach auf die gewachsene
+      Spalte. Die Begrenzung wuchs also mit dem, was sie begrenzen
+      sollte. `position: absolute; inset: 0` nimmt das Kind aus dem
+      Fluss: Es kann das Raster nicht mehr aufziehen.
+
+   2. `max-width: calc(50% - 8px)` rechnete gegen denselben
+      gewachsenen Behälter und war damit wirkungslos.
+
+   `flex: 1 1 0` mit `min-width: 0` kann gar nicht überlaufen: Jedes
+   Fenster bekommt denselben Anteil des vorhandenen Platzes, bei
+   einem Gesicht alles, bei zweien die Hälfte. Das feste 4:3 fällt
+   dafür weg — das Bild darin steht auf `object-fit: cover` und füllt
+   den Rahmen, egal wie er steht. Eine Regel, die nicht rechnet,
+   kann sich nicht verrechnen. */
+.kino[data-layout="nur_kamera"] .kameras {
+  position: absolute; inset: 0;
+  right: auto; bottom: auto;
+  width: 100%; height: 100%;
+  flex-direction: row;
+  justify-content: center; align-items: stretch;
+  gap: 12px;
+  padding: 16px;
+  background: #050408;
+}
+.kino[data-layout="nur_kamera"] .kamera {
+  flex: 1 1 0;
+  min-width: 0;
+  width: auto; height: auto;
+  aspect-ratio: auto;
+  max-width: none;
+}
+
 /* ---- Die Chatschiene ------------------------------------------------- */
 .schiene {
   display: grid;
@@ -1095,6 +1180,48 @@
   background: rgba(154, 183, 255, .12);
   color: #cfe0ff;
 }
+/* Der Umschalter zwischen den beiden Videos. In Gold und nicht in
+   Blau: „Nächstes" geht vorwärts und ist endgültig, „Wechseln" geht
+   hin und her. Zwei Knöpfe nebeneinander, die gleich aussehen und
+   Verschiedenes tun, sind im Live ein Griff daneben. */
+.spur__knopf--tausch {
+  border-color: rgba(224, 161, 58, .36);
+  background: rgba(224, 161, 58, .13);
+  color: #f0cf9a;
+  max-width: 24rem;
+  overflow: hidden;
+}
+.spur__knopf--tausch span {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.spur__knopf--tausch[hidden] { display: none; }
+
+/* ---- 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);
+}
+.tempo { display: flex; gap: 4px; flex-wrap: wrap; }
+.tempo__knopf {
+  appearance: none; cursor: pointer;
+  min-height: 34px; min-width: 44px; padding: 0 9px;
+  border-radius: 9px;
+  border: 1px solid var(--rand);
+  background: rgba(255, 255, 255, .04);
+  color: var(--schrift-leise);
+  font-size: .76rem; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.tempo__knopf[aria-pressed="true"] {
+  background: rgba(154, 183, 255, .14);
+  border-color: rgba(154, 183, 255, .38);
+  color: #cfe0ff;
+}
 .spur__knopf[disabled] { opacity: .35; cursor: default; }
 .spur__zeit {
   font-size: .78rem; font-variant-numeric: tabular-nums;