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]>
This commit is contained in:
Claude Opus 5
@@ -84,15 +84,35 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* DIE GESCHWINDIGKEIT MUSS MIT -- sonst liefe der Stream anders
|
||||
als der Saal. Stellt die Regie auf 1,5, wäre die Quelle nach fünf
|
||||
Minuten zweieinhalb Minuten hinterher: Filipe kommentiert eine
|
||||
Stelle, die die Zuschauer noch gar nicht gesehen haben. Und das
|
||||
Nachspringen könnte es nicht auffangen, es würde nur alle paar
|
||||
Sekunden sichtbar ruckeln. */
|
||||
function tempoNachziehen(wert) {
|
||||
if (!bereit || !wert) return;
|
||||
try {
|
||||
const kann = spieler.getAvailablePlaybackRates?.() || [];
|
||||
if (kann.length && !kann.includes(wert)) return;
|
||||
if (Math.abs((spieler.getPlaybackRate() || 1) - wert) > 0.01) {
|
||||
spieler.setPlaybackRate(wert);
|
||||
}
|
||||
} catch { /* ein Spieler, der noch lädt, kann das noch nicht */ }
|
||||
}
|
||||
|
||||
function folgen(s) {
|
||||
if (!bereit || !s) return;
|
||||
if (s.video && s.video !== letztesVideo) {
|
||||
letztesVideo = s.video;
|
||||
spieler.loadVideoById(s.video, s.sekunde || 0);
|
||||
spieler.mute();
|
||||
/* YouTube setzt die Geschwindigkeit beim Laden auf 1 zurück. */
|
||||
if (s.tempo) setTimeout(() => tempoNachziehen(s.tempo), 900);
|
||||
return;
|
||||
}
|
||||
if (!s.video) return;
|
||||
if (s.tempo) tempoNachziehen(s.tempo);
|
||||
/* Die Laufzeit der Meldung wird dazugerechnet -- sonst wäre die
|
||||
Quelle genau so weit hinten, wie das Netz langsam ist. */
|
||||
const unterwegs = s.gesendet ? Math.max(0, (Date.now() - s.gesendet) / 1000) : 0;
|
||||
|
||||
@@ -212,6 +212,14 @@
|
||||
'Es sind schon zwei Gäste dabei. Nimm erst jemanden heraus.',
|
||||
layout_unbekannt:
|
||||
'Diese Anordnung gibt es nicht.',
|
||||
tempo_unklar:
|
||||
'Diese Geschwindigkeit gibt es nicht. Möglich sind 0,5 bis 2-fach.',
|
||||
schon_im_bild:
|
||||
'Das läuft gerade schon. Ein Umschalter braucht zwei verschiedene Videos – '
|
||||
+ 'sonst passiert beim Drücken nichts.',
|
||||
kein_zweites:
|
||||
'Es liegt kein zweites Video bereit. Trag eins unter „Sendung" ein, '
|
||||
+ 'dann kannst du hin und her wechseln.',
|
||||
betrag_unklar:
|
||||
'Dieser Betrag ergibt keinen Sinn. Schreib ihn in Euro, '
|
||||
+ 'zum Beispiel 5 oder 7,50.',
|
||||
|
||||
@@ -201,6 +201,16 @@
|
||||
/* ---- Live ---- */
|
||||
const kino = $('teil-live');
|
||||
kino.dataset.layout = lage.layout || 'kino';
|
||||
/* Das Tempo steht am Kino und nicht nur im Pult: Der Zuschauer
|
||||
soll sehen, warum es schneller läuft -- sonst sucht er den
|
||||
Fehler bei seiner Leitung. */
|
||||
const tempo = lage.tempo || 1;
|
||||
kino.dataset.tempo = String(tempo);
|
||||
const schild = $('leinwand-tempo');
|
||||
if (schild) {
|
||||
schild.hidden = tempo === 1;
|
||||
schild.textContent = `${String(tempo).replace('.', ',')}× Geschwindigkeit`;
|
||||
}
|
||||
kamerasZeichnen();
|
||||
senderleisteZeichnen();
|
||||
chatStufeZeichnen();
|
||||
@@ -536,8 +546,13 @@
|
||||
if (stand.video && stand.video !== letztesVideo) {
|
||||
letztesVideo = stand.video;
|
||||
spieler.loadVideoById(stand.video, stand.sekunde || 0);
|
||||
/* YouTube setzt die Geschwindigkeit beim Laden auf 1 zurück.
|
||||
Ein kurzer Nachschlag, sobald das neue Video bereit ist --
|
||||
sonst liefe jedes zweite Video im falschen Tempo. */
|
||||
if (stand.tempo) setTimeout(() => tempoNachziehen(stand.tempo), 900);
|
||||
return;
|
||||
}
|
||||
if (stand.tempo) tempoNachziehen(stand.tempo);
|
||||
/* Die Laufzeit der Meldung wird dazugerechnet. Ohne das wäre
|
||||
jeder genau so weit hinten, wie sein Netz langsam ist. */
|
||||
const unterwegs = stand.gesendet ? Math.max(0, (Date.now() - stand.gesendet) / 1000) : 0;
|
||||
@@ -548,6 +563,30 @@
|
||||
if (!stand.laeuft && spieler.getPlayerState() === 1) spieler.pauseVideo();
|
||||
}
|
||||
|
||||
/** Die Geschwindigkeit nachziehen.
|
||||
*
|
||||
* EIGENE FUNKTION UND NICHT EINE ZEILE IN `folgen()`, weil sie
|
||||
* auch bei einem frisch geladenen Video gebraucht wird: `folgen()`
|
||||
* steigt beim Videowechsel vorher aus (`return` nach
|
||||
* `loadVideoById`), und genau dann ist die Geschwindigkeit wieder
|
||||
* auf 1 — YouTube setzt sie beim Laden zurück. Ohne diesen Aufruf
|
||||
* fiele das Tempo bei jedem Videowechsel still auf normal.
|
||||
*
|
||||
* UND NICHT AUF EINEN WERT SETZEN, DEN DER SPIELER NICHT KANN.
|
||||
* `getAvailablePlaybackRates()` sagt, was dieses Video hergibt;
|
||||
* ein unmöglicher Wert wird schweigend ignoriert, und dann steht
|
||||
* der Knopf auf 1,5 und es läuft 1,0. */
|
||||
function tempoNachziehen(wert) {
|
||||
if (!spielerBereit || !wert) return;
|
||||
try {
|
||||
const kann = spieler.getAvailablePlaybackRates?.() || [];
|
||||
if (kann.length && !kann.includes(wert)) return;
|
||||
if (Math.abs((spieler.getPlaybackRate() || 1) - wert) > 0.01) {
|
||||
spieler.setPlaybackRate(wert);
|
||||
}
|
||||
} catch { /* ein Spieler, der noch lädt, kann das noch nicht */ }
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
DIE KAMERAS
|
||||
================================================================= */
|
||||
@@ -1519,11 +1558,16 @@
|
||||
+ 'den gemessenen Pegel — beim YouTube-Regler die eingestellte '
|
||||
+ 'Lautstärke, denn Ton aus einem fremden Rahmen lässt sich nicht messen.';
|
||||
|
||||
/* ---- Anordnung ---- */
|
||||
/* ---- Anordnung ----
|
||||
Die ersten drei sind Größenverhältnisse, die letzten zwei ein
|
||||
Weglassen. Filipe: „nur mein bild, nur das video, möglichkeit
|
||||
zwischen allem zu wechseln so wie ich will." */
|
||||
const layouts = [
|
||||
['kino', 'Video groß'],
|
||||
['gleich', 'Gleich groß'],
|
||||
['kamera', 'Kameras groß'],
|
||||
['nur_video', 'Nur Video'],
|
||||
['nur_kamera', 'Nur Kamera'],
|
||||
];
|
||||
const lreihe = $('layout-reihe');
|
||||
lreihe.textContent = '';
|
||||
@@ -1535,6 +1579,29 @@
|
||||
lreihe.append(k);
|
||||
}
|
||||
|
||||
/* ---- Geschwindigkeit ----
|
||||
Die möglichen Werte kommen vom Server (`lage.tempi`) und
|
||||
stehen nicht hier. Eine zweite Liste an einer zweiten Stelle
|
||||
ist eine Liste, die irgendwann auseinanderläuft -- und dann
|
||||
steht hier ein Knopf, den der Server ablehnt. */
|
||||
const treihe = $('tempo');
|
||||
treihe.textContent = '';
|
||||
for (const wert of (lage.tempi || [0.5, 0.75, 1, 1.25, 1.5, 2])) {
|
||||
const k = el('button', 'tempo__knopf', wert === 1 ? '1×' : `${String(wert).replace('.', ',')}×`);
|
||||
k.type = 'button';
|
||||
k.dataset.tempo = String(wert);
|
||||
k.title = wert === 1 ? 'Normal' : `${String(wert).replace('.', ',')}-fache Geschwindigkeit`;
|
||||
k.addEventListener('click', () => tempoSetzen(wert));
|
||||
treihe.append(k);
|
||||
}
|
||||
|
||||
/* ---- Das zweite Video ---- */
|
||||
$('p-zweit-sichern').addEventListener('click', zweitSichern);
|
||||
$('p-zweit').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); zweitSichern(); }
|
||||
});
|
||||
$('v-tauschen').addEventListener('click', tauschen);
|
||||
|
||||
/* ---- Die Videospur ---- */
|
||||
/* ---- Bühne ---- */
|
||||
$('obs-neu').addEventListener('click', buehneNeu);
|
||||
@@ -1706,12 +1773,77 @@
|
||||
if (taste === 'ArrowRight') { e.preventDefault(); springen(10); return; }
|
||||
if (taste === 'm' || taste === 'M') { e.preventDefault(); stummSchalten('mikro'); return; }
|
||||
if (taste === 'n' || taste === 'N') { e.preventDefault(); weiterSchalten(0); return; }
|
||||
if (taste === 't' || taste === 'T') { e.preventDefault(); tauschen(); return; }
|
||||
if (taste === '1') { e.preventDefault(); layoutSetzen('kino'); return; }
|
||||
if (taste === '2') { e.preventDefault(); layoutSetzen('gleich'); return; }
|
||||
if (taste === '3') { e.preventDefault(); layoutSetzen('kamera'); }
|
||||
if (taste === '3') { e.preventDefault(); layoutSetzen('kamera'); return; }
|
||||
if (taste === '4') { e.preventDefault(); layoutSetzen('nur_video'); return; }
|
||||
if (taste === '5') { e.preventDefault(); layoutSetzen('nur_kamera'); return; }
|
||||
/* SCHNELLER UND LANGSAMER SCHIEBEN IN DER LISTE, sie rechnen
|
||||
nicht. Eine Rechnung („mal 1,25") träfe Werte, die es nicht
|
||||
gibt, und der Server lehnte sie ab. */
|
||||
if (taste === '+' || taste === '-' || taste === '−') {
|
||||
e.preventDefault();
|
||||
const liste = lage.tempi || [];
|
||||
const i = liste.indexOf(lage.tempo || 1);
|
||||
if (i < 0) return;
|
||||
const ziel = liste[taste === '+' ? Math.min(liste.length - 1, i + 1) : Math.max(0, i - 1)];
|
||||
if (ziel !== lage.tempo) tempoSetzen(ziel);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Die Geschwindigkeit umstellen -- für alle.
|
||||
*
|
||||
* ERST DER EIGENE SPIELER, DANN DER SERVER. Der Knopf muss sofort
|
||||
* wirken; die Meldung an die anderen darf eine Netzrunde dauern.
|
||||
* Andersherum säße Filipe vor einem Knopf, der sich zwei
|
||||
* Zehntelsekunden lang nicht entscheidet -- und drückt ihn ein
|
||||
* zweites Mal. */
|
||||
async function tempoSetzen(wert) {
|
||||
tempoNachziehen(wert);
|
||||
const a = await hole('/workspace/api/reaktion/video', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
tempo: wert,
|
||||
laeuft: spielerBereit && spieler.getPlayerState() === 1,
|
||||
sekunde: spielerBereit ? spieler.getCurrentTime() : 0,
|
||||
}),
|
||||
});
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das Tempo ging nicht.'); return; }
|
||||
lage = { ...lage, tempo: wert };
|
||||
zeichnen();
|
||||
}
|
||||
|
||||
async function zweitSichern() {
|
||||
const a = await hole('/workspace/api/reaktion/zweitvideo', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ video: $('p-zweit').value.trim() }),
|
||||
});
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||||
lage = { ...(await a.json()) };
|
||||
zeichnen();
|
||||
/* Der Name kommt von YouTube nach -- nach anderthalb Sekunden
|
||||
steht er da, ohne dass jemand neu laden muss. */
|
||||
setTimeout(standHolen, 1600);
|
||||
}
|
||||
|
||||
async function tauschen() {
|
||||
if (!lage || !lage.ich.host || !lage.zweit) return;
|
||||
const a = await hole('/workspace/api/reaktion/tauschen', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
/* Die Stelle kommt von hier und nicht aus der Datenbank: Dort
|
||||
steht der Stand vom letzten Fünf-Sekunden-Takt. */
|
||||
body: JSON.stringify({ sekunde: spielerBereit ? spieler.getCurrentTime() : 0 }),
|
||||
});
|
||||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das Wechseln ging nicht.'); return; }
|
||||
lage = { ...(await a.json()) };
|
||||
zeichnen();
|
||||
}
|
||||
|
||||
/* ---- Der halbsekündliche Takt: Uhr und Positionsband -------------- */
|
||||
function leisteTakt() {
|
||||
if (!lage || !lage.ich.host) return;
|
||||
@@ -1838,6 +1970,25 @@
|
||||
for (const k of $('layout-reihe').children) {
|
||||
k.setAttribute('aria-pressed', String(k.dataset.layout === (lage.layout || 'kino')));
|
||||
}
|
||||
for (const k of $('tempo').children) {
|
||||
k.setAttribute('aria-pressed', String(Number(k.dataset.tempo) === (lage.tempo || 1)));
|
||||
}
|
||||
|
||||
/* ---- Der Umschalter ----
|
||||
Er steht nur da, wenn es etwas zum Umschalten GIBT. Ein Knopf,
|
||||
der „kein_zweites" antwortet, ist eine Falle -- und im Live
|
||||
eine, die man erst merkt, wenn man ihn braucht. */
|
||||
const tausch = $('v-tauschen');
|
||||
tausch.hidden = !lage.zweit;
|
||||
if (lage.zweit) {
|
||||
const wort = lage.zweit.titel || lage.zweit.video;
|
||||
$('v-tausch-titel').textContent = wort.length > 34 ? wort.slice(0, 33) + '…' : wort;
|
||||
tausch.title = `Wechseln zu „${wort}"`
|
||||
+ (lage.zweit.sekunde > 2 ? ` — weiter bei ${alsZeit(lage.zweit.sekunde)}` : '');
|
||||
}
|
||||
if (document.activeElement !== $('p-zweit')) {
|
||||
$('p-zweit').value = lage.zweit ? lage.zweit.video : '';
|
||||
}
|
||||
|
||||
/* ---- Gäste ---- */
|
||||
$('gast-zahl').textContent = `${lage.gaeste.length} von ${lage.gaeste_max}`;
|
||||
@@ -2210,7 +2361,19 @@
|
||||
strom.addEventListener('reaktion', (e) => {
|
||||
try {
|
||||
const d = JSON.parse(e.data);
|
||||
if (d.was === 'video') { folgen(d); return; }
|
||||
if (d.was === 'video') {
|
||||
folgen(d);
|
||||
/* DAS SCHILD MUSS MIT. `folgen()` stellt den Spieler, aber
|
||||
der Rundruf geht hier mit `return` heraus -- ohne diese
|
||||
zwei Zeilen stuende beim Zuschauer weiter „1x", waehrend
|
||||
das Video schon auf 1,5 laeuft. Genau die Sorte
|
||||
Widerspruch, die man fuer einen Defekt haelt. */
|
||||
if (lage && d.tempo && d.tempo !== lage.tempo) {
|
||||
lage = { ...lage, tempo: d.tempo };
|
||||
zeichnen();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (d.was === 'layout') { $('teil-live').dataset.layout = d.layout; return; }
|
||||
|
||||
/* ==== MODERATION ==========================================
|
||||
|
||||
Reference in New Issue
Block a user