DogFatherGitandClaude Opus 5
a43bc565ec
Filipe: „ich will dass du auch perfektionierst dass ich einen banner durchlaufen kann, oder erscheinen lassen kann mit werbung drauf ... und ich will auch das dogfather logo oben rechts links unten rechts links genau wie oben unten mittig, so dass ich es wegmachen und hinzufuegen kann." DAS BAND Zwei Arten: „Laufband" zieht die Botschaften von rechts nach links, „Wechsel" blendet sie nacheinander ein. Ein Rabattcode gehoert in den Wechsel -- wer „DOGI10" lesen will, waehrend es wandert, hat es gesehen und nicht behalten. Die Dauer ist einstellbar (8-40 s). Das Band ist Glas, kein Balken: ein Verlauf, unten dicht genug, dass jede Schrift traegt, oben offen. Man sieht das Video weiter. Das Laufband traegt die Folge ZWEIMAL. Wandert es um 50 % seiner Breite, steht die zweite dort, wo die erste war, und der Sprung zurueck ist unsichtbar. Ohne sie entstuende am Ende jedes Durchlaufs eine leere Flaeche -- das sieht aus, als sei die Einblendung abgestuerzt. Wer weniger Bewegung eingestellt hat, bekommt den Wechsel statt des Laufbands -- nicht „aus". Die Werbung soll auch dann wirken. DER RABATTCODE Ein Wort in Grossbuchstaben mit einer Ziffer darin bekommt eine eigene Flaeche in Bernstein: „DOGI10" ja, „VANVAN" nicht. Er ist der einzige Teil der Botschaft, den jemand ABSCHREIBEN soll. Der Text wird NIE als HTML eingesetzt -- die Kennzeichnung baut echte Elemente. Sonst waere ein Eingabefeld im Regiepult ein Weg, fremdes Markup in den Stream zu bringen. DIE ZWEI BILDER Der Husky und der Haekelhase aus der Zusammenarbeit mit VanVan, jeweils an einem von sechs Plaetzen: oben und unten, je links, mittig, rechts -- oder aus. Links und rechts mittig gibt es mit Absicht nicht: dort liegen bei jedem Videodienst die Bedienelemente. Zwei Bilder auf denselben Platz werden abgelehnt (400 ecke_belegt) -- sie laegen uebereinander, und man saehe von beiden nichts. Wer unten steht, weicht dem Band aus, und die Spendentafel rueckt hoch. Beides im Stilblatt ueber `:has`, nicht im Programm: Das Band kennt die Tafel nicht und die Tafel kennt das Band nicht. Der Husky ist schwarz und laege auf dunklem Videobild als Silhouette in der Nacht. Zwei weiche helle Schatten legen eine Kontur darum -- dieselbe Loesung, die jeder Sender fuer sein Wasserzeichen nimmt. IM STREAM, NICHT NUR IM SAAL Beides laeuft in der Buehnenquelle mit, die OBS abfilmt, mit groesserer Schrift (24 statt 18 px) -- ein Stream wird auf einem Handy gesehen, oft in einem Viertel des Bildes. Gemessen: die OFFENE Quelle zieht eine Umschaltung nach, ohne dass die Szene neu geladen werden muss. EINE QUELLE, NICHT DREI `werbungStand()` steht in `reaktion-tabellen.js` und wird von Saal, Regie und Buehne aufgerufen. Erst standen dort drei Abschriften derselben Abfrage; beim Entfernen der Datenbank-Kennung habe ich eine davon geaendert, und die anderen lieferten sie weiter. WAS DIE PRUEFUNGEN DABEI GEFUNDEN HABEN - pruef-buehne: Die Botschaften trugen ihre Datenbank-Kennung in die OBS-Auskunft, die nur mit einem Schluessel geschuetzt ist. Die Feldliste geht jetzt zwei Ebenen tief -- eine abschliessende Liste, die nur die oberste kennt, laesst sich umgehen, indem man ein Feld in ein vorhandenes Objekt legt. - pruef-reaktion: Acht Fehlerwoerter ohne deutschen Satz. Nachgetragen im Hausstil: was nicht geht UND was stattdessen. - pruef-struktur: Die Suche nach totem CSS las `buehne.html` und `tafel.html` nicht -- eine Ausnahme, die fuer eine ganz andere Frage gemacht war (Startbildschirm-Symbol). Sie haette verlangt, `.obs-buehne` zu loeschen, also die Regel, die den Stream traegt. - pruef-tippziele: Erkannte als Anhebung nur `min-height`/`min-width`. Ein `height: 44px` im Fingerblock hebt genauso -- Fehlalarm, und ein Fehlalarm an einer Pruefung, die nach jeder Aenderung laeuft, wird weggeklickt. Zwei Gegenproben dazu. - mess-reaktion: Die Regieleiste am Handy wurde gegen die feste Zahl SIEBEN geprueft und meldete „zeigt nur 8 von 7". Sie zaehlt jetzt selbst. - mess-buehne: Die Konsolenmeldung zeigte dauerhaft vier Fehlschlaege, alle von den Pruefungen selbst bestellt. Jetzt eng gefiltert, benannt, mit Gegenprobe -- und ein UNERWARTETER Fehlschlag in der Quelle, die in den Stream geht, faellt ab sofort durch. Gemessen: mess-reaktion 0, mess-buehne 0, pruef-reaktion 383/0, pruef-buehne 38/0, pruef-tippziele 13/0, pruef-struktur 44/0, pruef-css-klassen 0, pruef-haus-trennung 100/0, pruef-haus-seiten 38/0. Co-Authored-By: Claude Opus 5 <[email protected]>
4100 lines
166 KiB
JavaScript
4100 lines
166 KiB
JavaScript
/* =====================================================================
|
||
DIE REACTION (28.09.2026)
|
||
|
||
Filipes Kurznotiz, von links nach rechts:
|
||
|
||
Kachel sichtbar -> geschlossen -> Vorbereitung ->
|
||
Wartebereich/Chat -> Countdown -> LIVE ->
|
||
Reaction + Gäste + Chat + PayPal -> Ende
|
||
|
||
---------------------------------------------------------------------
|
||
DREI DINGE LAUFEN HIER GLEICHZEITIG, UND KEINES DARF DAS ANDERE
|
||
ANHALTEN
|
||
|
||
1. DAS VIDEO. Jeder lädt es selbst von YouTube. Übertragen wird
|
||
nur der Spielstand -- Kennung, läuft/pausiert, Sekunde. Das
|
||
ist nicht nur sparsam, es ist der einzige zulässige Weg: Ein
|
||
YouTube-Video weiterzusenden ist eine öffentliche Wiedergabe.
|
||
|
||
2. DIE KAMERAS. Direkt von Mensch zu Mensch, über denselben Weg
|
||
wie die Anrufe im Haus (assets/js/anruf.js seit 18.09.).
|
||
Jeder, der sendet, baut zu jedem, der zusieht, eine eigene
|
||
Verbindung auf.
|
||
|
||
3. DER CHAT. Über den Ereignisstrom, den es im Haus schon gibt.
|
||
Kein zweiter Strom: Manche Browser lassen nur sechs
|
||
gleichzeitige Verbindungen je Adresse zu.
|
||
|
||
---------------------------------------------------------------------
|
||
WER RUFT WEN AN -- UND WARUM DAS EINE REGEL BRAUCHT
|
||
|
||
Wenn zwei Seiten gleichzeitig ein Angebot schicken, scheitern
|
||
beide. In der Fachsprache heißt das „glare", und man löst es
|
||
entweder mit einem aufwendigen Aushandeln oder mit einer Regel,
|
||
die vorher feststeht. Hier steht sie fest:
|
||
|
||
Wer sendet, ruft jeden an, der nur zusieht.
|
||
Rufen sich zwei Sender an, ruft der mit der KLEINEREN Nummer.
|
||
Wer nur zusieht, ruft nie an.
|
||
|
||
Damit gibt es zu jedem Paar genau einen Anrufer, immer, ohne
|
||
Absprache. Die Nummer ist die Personennummer -- sie ist auf beiden
|
||
Seiten dieselbe und ändert sich nie.
|
||
===================================================================== */
|
||
(() => {
|
||
'use strict';
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
const el = (art, klasse, text) => {
|
||
const n = document.createElement(art);
|
||
if (klasse) n.className = klasse;
|
||
if (text !== undefined) n.textContent = text;
|
||
return n;
|
||
};
|
||
|
||
/* ==== DER BUEHNENMODUS ===========================================
|
||
|
||
`?nur=buehne` nimmt alles Bedienbare weg: Kopfleiste, Chat,
|
||
Regie, Schild, Senderleiste. Uebrig bleibt, was in den Stream
|
||
gehoert -- das Video und die Kameras.
|
||
|
||
DIE SEITE ARBEITET GENAUSO WEITER. Nur das Aussehen aendert
|
||
sich; Verbindungen, Nachfuehrung und Chat laufen im Hintergrund
|
||
unveraendert. Sonst waere es eine zweite Seite, und die saehe
|
||
nach dem naechsten Umbau anders aus als diese. */
|
||
if (new URLSearchParams(location.search).get('nur') === 'buehne') {
|
||
document.body.dataset.nur = 'buehne';
|
||
}
|
||
|
||
const saal = $('saal');
|
||
const schild = $('schild');
|
||
const fehlerFeld = $('fehler');
|
||
|
||
let lage = null; // die letzte Antwort des Servers
|
||
let meineId = 0;
|
||
let binSender = false; // Host oder Gast -> ich schicke Bild
|
||
let meinStrom = null; // meine Kamera
|
||
let pults = false;
|
||
|
||
/* Die Verbindungen, je Gegenüber eine. Sie stehen in einer Map und
|
||
nicht in Einzelvariablen: Mit einer Variablen hat man genau eine
|
||
Verbindung, und das ist der Fall, den es hier nie gibt. */
|
||
const drähte = new Map(); // personId -> { pc, video }
|
||
|
||
/* WER GERADE ANGERUFEN WIRD -- und zwar ab der ERSTEN Zeile von
|
||
`anrufen()`, nicht erst wenn die Verbindung steht.
|
||
|
||
Dazwischen liegt ein `await` (die Kamera muss erst freigegeben
|
||
werden), und in dieser Lücke läuft alles andere weiter: der Takt
|
||
alle 30 Sekunden, jede Chatnachricht, jede Änderung an der Lage.
|
||
Jedes Mal stand wieder „den kenne ich noch nicht", und es ging
|
||
ein zweites Angebot hinaus. Der Empfänger antwortete auf beide,
|
||
und die zweite Antwort traf eine Verbindung, die längst stand:
|
||
„Failed to set remote answer sdp: Called in wrong state: stable".
|
||
|
||
Gefunden hat das der echte Browser, nicht das Lesen. */
|
||
const ruftGerade = new Set();
|
||
|
||
/* ---------------------------------------------------------------
|
||
Reden mit dem Server
|
||
--------------------------------------------------------------- */
|
||
async function hole(pfad, einstellungen) {
|
||
const a = await fetch(pfad, { credentials: 'same-origin', ...einstellungen });
|
||
if (a.status === 401) { location.href = '/workspace/'; throw new Error('weg'); }
|
||
return a;
|
||
}
|
||
|
||
function sagFehler(text) {
|
||
if (!fehlerFeld) return;
|
||
fehlerFeld.textContent = text;
|
||
fehlerFeld.hidden = false;
|
||
clearTimeout(sagFehler.uhr);
|
||
sagFehler.uhr = setTimeout(() => { fehlerFeld.hidden = true; }, 6000);
|
||
}
|
||
|
||
function melde(antwort, ersatz) {
|
||
/* Maschinenworte werden übersetzt -- dieselbe Tafel wie überall
|
||
im Haus. Wo sie nichts kennt, steht ein Satz und nicht ein
|
||
Schlüssel. */
|
||
const wort = antwort && antwort.fehler;
|
||
const satz = (window.sagWas && wort) ? window.sagWas(wort) : null;
|
||
sagFehler(satz || ersatz || 'Das hat gerade nicht geklappt.');
|
||
}
|
||
|
||
/* =================================================================
|
||
DER ZUSTAND AUF DEM BILDSCHIRM
|
||
================================================================= */
|
||
/* ==== DAS REGISTER „WERBUNG" =============================
|
||
|
||
ALLES KOMMT VOM SERVER -- die Arten, die Tempi, die Plaetze,
|
||
die Groessen. Eine zweite Liste hier waere eine, die
|
||
irgendwann von der ersten abweicht; dann steht ein Knopf da,
|
||
den der Server mit 400 ablehnt, und niemand weiss warum. */
|
||
const ECKEN_WORT = {
|
||
aus: 'aus', ol: 'oben links', om: 'oben mittig', or: 'oben rechts',
|
||
ul: 'unten links', um: 'unten mittig', ur: 'unten rechts',
|
||
};
|
||
const ART_WORT = { aus: 'Aus', laufband: 'Laufband', wechsel: 'Wechsel' };
|
||
let neuesBild = 'keins';
|
||
|
||
/* Ein Aufruf an die Werbe-Wege. Fuenf Bedienelemente schicken
|
||
dasselbe Muster; einmal geschrieben kann es nicht an vier
|
||
Stellen abweichen. */
|
||
async function werbungRuf(pfad, koerper, methode) {
|
||
const a = await hole(pfad, {
|
||
method: methode || 'POST',
|
||
...(koerper ? {
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(koerper),
|
||
} : {}),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return false; }
|
||
await standHolen();
|
||
return true;
|
||
}
|
||
|
||
const werbungSetzen = (felder) =>
|
||
werbungRuf('/workspace/api/reaktion/werbung', felder);
|
||
|
||
function werbungPultBauen() {
|
||
if (!lage?.ich?.host) return;
|
||
|
||
/* ---- Die Art ---- */
|
||
const areihe = $('bandart-reihe');
|
||
if (areihe) {
|
||
areihe.textContent = '';
|
||
for (const art of (lage.banner_arten || ['aus'])) {
|
||
const k = el('button', 'bandart__knopf', ART_WORT[art] || art);
|
||
k.type = 'button';
|
||
k.dataset.art = art;
|
||
k.addEventListener('click', () => werbungSetzen({ art }));
|
||
areihe.append(k);
|
||
}
|
||
}
|
||
|
||
/* ---- Wie lange ---- */
|
||
const treihe = $('bandtempo-reihe');
|
||
if (treihe) {
|
||
treihe.textContent = '';
|
||
for (const t of (lage.banner_tempi || [16])) {
|
||
const k = el('button', 'bandtempo__knopf', `${t} s`);
|
||
k.type = 'button';
|
||
k.dataset.tempo = String(t);
|
||
k.addEventListener('click', () => werbungSetzen({ tempo: t }));
|
||
treihe.append(k);
|
||
}
|
||
}
|
||
|
||
/* ---- Welches Bild an einer neuen Botschaft ---- */
|
||
const breihe = $('bandbild-reihe');
|
||
if (breihe) {
|
||
breihe.textContent = '';
|
||
const worte = { keins: 'ohne Bild', dogi: 'Husky', hase: 'Häkelhase' };
|
||
for (const b of (lage.banner_bilder || ['keins'])) {
|
||
const k = el('button', 'bandbild__knopf', worte[b] || b);
|
||
k.type = 'button';
|
||
k.dataset.bild = b;
|
||
k.setAttribute('aria-pressed', String(b === neuesBild));
|
||
k.addEventListener('click', () => {
|
||
neuesBild = b;
|
||
for (const g of breihe.children) {
|
||
g.setAttribute('aria-pressed', String(g.dataset.bild === b));
|
||
}
|
||
});
|
||
breihe.append(k);
|
||
}
|
||
}
|
||
|
||
/* ---- Die zwei Ecken ---- */
|
||
for (const [welches, feld, wort] of [
|
||
['dogi', 'ecke_dogi', 'Der Husky'],
|
||
['hase', 'ecke_hase', 'Der Häkelhase'],
|
||
]) {
|
||
const kasten = $(`eckenwahl-${welches}`);
|
||
if (!kasten) continue;
|
||
kasten.textContent = '';
|
||
kasten.append(el('span', 'eckenwahl__wort', wort));
|
||
const gitter = el('div', 'eckenwahl__gitter');
|
||
for (const platz of (lage.ecken_plaetze || ['aus'])) {
|
||
/* JEDER KNOPF IST EIN ABBILD DER LEINWAND mit einem Feld
|
||
dort, wo das Bild landet. Sechs Knoepfe mit „oben links",
|
||
„oben mittig" … waeren sechs Zeilen Text, die man lesen
|
||
muss; ein Bild erkennt man. Das Wort bleibt trotzdem
|
||
dran -- fuer Vorleseprogramme und fuer den, der Farben
|
||
schlecht unterscheidet. */
|
||
const k = el('button', 'eckenwahl__knopf');
|
||
k.type = 'button';
|
||
k.dataset.platz = platz;
|
||
k.title = ECKEN_WORT[platz] || platz;
|
||
k.setAttribute('aria-label', `${wort}: ${ECKEN_WORT[platz] || platz}`);
|
||
if (platz === 'aus') {
|
||
k.append(el('span', 'eckenwahl__aus', 'aus'));
|
||
} else {
|
||
k.append(el('span', 'eckenwahl__punkt'));
|
||
}
|
||
k.addEventListener('click', () => werbungSetzen({ [feld]: platz }));
|
||
gitter.append(k);
|
||
}
|
||
kasten.append(gitter);
|
||
}
|
||
|
||
/* ---- Wie gross ---- */
|
||
const greihe = $('eckengroesse-reihe');
|
||
if (greihe) {
|
||
greihe.textContent = '';
|
||
for (const g of (lage.ecken_groessen || [1])) {
|
||
const k = el('button', 'eckengroesse__knopf',
|
||
g === 1 ? '1×' : `${String(g).replace('.', ',')}×`);
|
||
k.type = 'button';
|
||
k.dataset.gross = String(g);
|
||
k.addEventListener('click', () => werbungSetzen({ ecke_gross: g }));
|
||
greihe.append(k);
|
||
}
|
||
}
|
||
|
||
/* ---- Eine neue Botschaft ---- */
|
||
const anlegen = $('band-anlegen');
|
||
if (anlegen && !anlegen.dataset.bereit) {
|
||
anlegen.dataset.bereit = 'ja';
|
||
anlegen.addEventListener('click', async () => {
|
||
const text = $('band-neu').value.trim();
|
||
if (!text) { melde(null, 'Schreib erst, was dastehen soll.'); return; }
|
||
const ok = await werbungRuf('/workspace/api/reaktion/banner', {
|
||
text, unterzeile: $('band-neu-unter').value.trim(), bild: neuesBild,
|
||
});
|
||
if (!ok) return;
|
||
$('band-neu').value = '';
|
||
$('band-neu-unter').value = '';
|
||
});
|
||
}
|
||
}
|
||
|
||
/* Die Liste der Botschaften -- sie aendert sich haeufiger als die
|
||
Knopfreihen und wird deshalb getrennt gezeichnet. */
|
||
function bandlisteZeichnen() {
|
||
const liste = $('bandliste');
|
||
if (!liste || !lage?.ich?.host) return;
|
||
const alle = lage.banner_alle || [];
|
||
liste.textContent = '';
|
||
if (!alle.length) {
|
||
const leer = el('li', 'bandliste__leer',
|
||
'Noch keine Botschaft. Trag unten eine ein.');
|
||
liste.append(leer);
|
||
return;
|
||
}
|
||
alle.forEach((b, i) => {
|
||
const z = el('li', 'bandzeile');
|
||
z.dataset.aktiv = b.aktiv ? 'ja' : 'nein';
|
||
|
||
const an = el('button', 'bandzeile__an');
|
||
an.type = 'button';
|
||
an.setAttribute('aria-pressed', String(!!b.aktiv));
|
||
an.setAttribute('aria-label', b.aktiv ? 'läuft — abschalten' : 'aus — einschalten');
|
||
an.title = b.aktiv ? 'läuft' : 'aus';
|
||
an.addEventListener('click', async () => {
|
||
await werbungRuf(`/workspace/api/reaktion/banner/${b.id}`, { aktiv: !b.aktiv });
|
||
});
|
||
z.append(an);
|
||
|
||
const texte = el('div', 'bandzeile__texte');
|
||
texte.append(el('div', 'bandzeile__text', b.text));
|
||
if (b.unterzeile) texte.append(el('div', 'bandzeile__unter', b.unterzeile));
|
||
z.append(texte);
|
||
|
||
if (b.bild && b.bild !== 'keins') {
|
||
const bild = el('img', 'bandzeile__bild');
|
||
bild.src = `assets/img/werbung-${b.bild}.webp`;
|
||
bild.alt = b.bild === 'dogi' ? 'Husky' : 'Häkelhase';
|
||
z.append(bild);
|
||
}
|
||
|
||
const tun = el('div', 'bandzeile__tun');
|
||
for (const [wohin, zeichen, wort] of [['hoch', '▲', 'nach oben'], ['runter', '▼', 'nach unten']]) {
|
||
const k = el('button', 'bandzeile__schieb', zeichen);
|
||
k.type = 'button';
|
||
k.setAttribute('aria-label', wort);
|
||
k.title = wort;
|
||
k.disabled = (wohin === 'hoch' && i === 0) || (wohin === 'runter' && i === alle.length - 1);
|
||
k.addEventListener('click', async () => {
|
||
await werbungRuf(`/workspace/api/reaktion/banner/${b.id}/schieben`, { wohin });
|
||
});
|
||
tun.append(k);
|
||
}
|
||
const weg = el('button', 'bandzeile__weg', '×');
|
||
weg.type = 'button';
|
||
weg.setAttribute('aria-label', 'Botschaft löschen');
|
||
weg.title = 'löschen';
|
||
weg.addEventListener('click', async () => {
|
||
/* EINE RUECKFRAGE, WEIL ES NICHT ZURUECKGEHT. Bei „lösen"
|
||
im Chat steht hier keine -- das laesst sich rueckgaengig
|
||
machen. Eine Botschaft ist danach weg samt ihrem Text. */
|
||
const ja = await window.frageNach?.({
|
||
titel: 'Botschaft löschen?',
|
||
text: `„${b.text}" wird aus dem Band genommen. Das geht nicht zurück.`,
|
||
ja: 'Löschen', nein: 'Behalten',
|
||
});
|
||
if (ja === false || ja === undefined) return;
|
||
await werbungRuf(`/workspace/api/reaktion/banner/${b.id}`, null, 'DELETE');
|
||
});
|
||
tun.append(weg);
|
||
z.append(tun);
|
||
liste.append(z);
|
||
});
|
||
}
|
||
|
||
/* ==== DIE WERBEEINBLENDUNG ===============================
|
||
Sie haengt an der Leinwand und nicht am Saal: Sie gehoert ueber
|
||
das Bild, und nur dort. Eingehaengt wird sie EINMAL -- ein
|
||
Band, das bei jedem Rundruf neu entstuende, finge mitten im
|
||
Satz wieder von vorn an. */
|
||
let werbung = null;
|
||
function werbungZeichnen() {
|
||
if (!window.Werbung) return;
|
||
const kasten = $('leinwand');
|
||
if (!kasten) return;
|
||
if (!werbung) werbung = window.Werbung.einhaengen(kasten);
|
||
werbung.setzen(lage?.werbung);
|
||
}
|
||
|
||
function zeichnen() {
|
||
if (!lage) return;
|
||
saal.dataset.stand = lage.stand;
|
||
document.body.dataset.stand = lage.stand;
|
||
meineId = lage.ich.id;
|
||
werbungZeichnen();
|
||
|
||
/* WER RAUS IST, SIEHT AB HIER NICHTS MEHR. Die Prüfung steht ganz
|
||
oben und nicht am Ende: Alles darunter baut den Saal auf, und
|
||
ein Saal, der sich noch aufbaut, während darüber steht „du bist
|
||
raus", ist eine widersprüchliche Auskunft. */
|
||
if (lage.ich.massnahme && lage.ich.massnahme.art === 'raus') {
|
||
rausgenommen('aus_der_sendung');
|
||
return;
|
||
}
|
||
|
||
const warSender = binSender;
|
||
binSender = lage.ich.host || lage.ich.gast;
|
||
/* WER GERADE ZUM SENDER GEWORDEN IST, BAUT SEINE LEITUNGEN NEU AUF.
|
||
|
||
Solange ich Zuschauer war, sind meine Verbindungen OHNE Spur
|
||
entstanden -- ich hatte ja nichts zu senden. Eine bestehende
|
||
Verbindung nachträglich zu füllen ginge nur mit einer neuen
|
||
Verhandlung; sie wegzuwerfen ist kürzer und sicher.
|
||
|
||
Ohne das blieb das Bild eines frisch dazugeholten Gastes beim
|
||
Host für immer schwarz, ohne eine einzige Fehlermeldung. */
|
||
if (binSender && !warSender && drähte.size) {
|
||
console.info('[reaktion] Ich sende jetzt -- Leitungen neu aufbauen.');
|
||
leitungenNeu();
|
||
}
|
||
|
||
/* ---- Das Schild ---- */
|
||
const worte = { zu: 'Geschlossen', vorbereitung: 'Gleich', live: 'Auf Sendung' };
|
||
$('schild-wort').textContent = worte[lage.stand] || '…';
|
||
const zahl = $('schild-zahl');
|
||
if (lage.stand === 'zu') {
|
||
zahl.hidden = true;
|
||
} else {
|
||
zahl.hidden = false;
|
||
zahl.textContent = lage.dabei === 1 ? '1 dabei' : `${lage.dabei} dabei`;
|
||
}
|
||
|
||
/* ---- Zu ---- */
|
||
const naechste = $('zu-naechste');
|
||
if (lage.beginnt_am && lage.stand === 'zu') {
|
||
const d = new Date(lage.beginnt_am);
|
||
naechste.hidden = Number.isNaN(d.getTime());
|
||
if (!naechste.hidden) {
|
||
naechste.textContent = 'Als Nächstes: ' + (lage.titel || 'Reaction') + ' · '
|
||
+ d.toLocaleString('de-DE', { weekday: 'long', hour: '2-digit', minute: '2-digit' });
|
||
}
|
||
} else {
|
||
naechste.hidden = true;
|
||
}
|
||
|
||
/* ---- Vorbereitung ---- */
|
||
$('warte-titel').textContent = lage.titel || 'Reaction startet bald';
|
||
const bild = $('warte-bild');
|
||
/* Kein eigenes Vorschaubild? Dann das von YouTube. Das ist keine
|
||
Notlösung, sondern meistens das bessere Bild -- es zeigt genau
|
||
das Video, um das es geht. */
|
||
const quelle = lage.vorschau
|
||
|| (lage.video ? `https://i.ytimg.com/vi/${lage.video}/maxresdefault.jpg` : '');
|
||
bild.style.backgroundImage = quelle ? `url("${quelle}")` : '';
|
||
|
||
/* WAS ALS NÄCHSTES KOMMT, steht auf der Wartetafel -- für alle.
|
||
Nicht die ganze Liste: Der Abend soll nicht vorher im Netz
|
||
stehen. Aber etwas, das Lust macht, gehört dorthin. */
|
||
const gleich = $('warte-naechstes');
|
||
if (gleich) {
|
||
gleich.hidden = !(lage.naechstes && lage.stand !== 'zu');
|
||
if (!gleich.hidden) gleich.textContent = 'Danach: ' + lage.naechstes;
|
||
}
|
||
|
||
/* ---- Live ---- */
|
||
const kino = $('teil-live');
|
||
kino.dataset.layout = lage.layout || 'kino';
|
||
/* Größe und Ecke der Kamerafenster. Sie stehen am Kino und nicht
|
||
an jedem Fenster einzeln -- ein Wert, eine Stelle, und die
|
||
Fenster erben ihn. */
|
||
kino.dataset.ecke = lage.kamera_ecke || 'ur';
|
||
kino.style.setProperty('--kam-gross', String(lage.kamera_gross || 1));
|
||
/* 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();
|
||
|
||
/* ---- Das Pult ---- */
|
||
/* DIE LEISTE ZUERST. Sie steht über dem Saal und muss sichtbar
|
||
sein, BEVOR `pultAufbauen()` die Marke misst -- ein verborgenes
|
||
Element hat kein Rechteck, und die Marke säße auf null. */
|
||
/* DER TRANSPORT GEHOERT DENEN, DIE SENDEN -- wie die
|
||
Registerleiste. Er steht seit dem 28.09. unter dem Saal und
|
||
nicht mehr im Register „Sendung": Der Play-Knopf ist der
|
||
eine, den man mitten in einer Sendung blind treffen muss, und
|
||
in einem Register ist er weg, sobald man auf „Ton" geht. */
|
||
const transport = $('transport');
|
||
if (transport) transport.hidden = !lage.ich.host;
|
||
|
||
const leiste = $('regieleiste');
|
||
if (leiste) leiste.hidden = !lage.ich.host;
|
||
const pult = $('pult');
|
||
pult.hidden = !lage.ich.host;
|
||
if (lage.ich.host && !pults) { pultAufbauen(); pults = true; }
|
||
if (lage.ich.host) pultFuellen();
|
||
|
||
countdownTakt();
|
||
}
|
||
|
||
/* ---- Die Kamerafenster ------------------------------------------
|
||
Für jeden Sender ein Fenster. Es entsteht EINMAL und bleibt dann
|
||
stehen -- ein Fenster, das bei jedem Zeichnen neu gebaut wird,
|
||
verliert seinen Videostrom, und das Bild fängt von vorn an zu
|
||
ruckeln. */
|
||
function kamerasZeichnen() {
|
||
const behaelter = $('kameras');
|
||
const sollen = [];
|
||
if (lage.host) sollen.push({ ...lage.host, host: true, stumm: false, platz: 0 });
|
||
for (const g of lage.gaeste) sollen.push({ ...g, host: false });
|
||
|
||
const da = new Set();
|
||
for (const s of sollen) {
|
||
da.add(String(s.id));
|
||
let fenster = behaelter.querySelector(`.kamera[data-wer="${s.id}"]`);
|
||
if (!fenster) {
|
||
fenster = el('div', 'kamera');
|
||
fenster.dataset.wer = String(s.id);
|
||
const v = el('video');
|
||
v.autoplay = true; v.playsInline = true;
|
||
/* ALLES STARTET STUMM -- auch die fremden Kameras.
|
||
|
||
Ein Videoelement mit Ton darf nicht von allein losgehen;
|
||
das verbietet jeder Browser, und zwar ohne Meldung. Das
|
||
Ergebnis wäre ein schwarzes Rechteck, obwohl die
|
||
Verbindung steht. Gemessen genau so: `videoWidth` 640 und
|
||
trotzdem kein Bild.
|
||
|
||
Stumm darf losgehen. Den Ton schaltet `tonAn()` frei --
|
||
entweder über den Knopf oder bei der ersten Berührung der
|
||
Seite. Das EIGENE Bild bleibt für immer stumm: Sich selbst
|
||
mit Verzögerung zu hören ist der schnellste Weg, dass
|
||
jemand aufhört zu reden. */
|
||
v.muted = true;
|
||
if (s.id !== meineId) v.dataset.fremd = 'ja';
|
||
fenster.append(v);
|
||
fenster.append(el('span', 'kamera__name', s.name));
|
||
behaelter.append(fenster);
|
||
}
|
||
fenster.dataset.host = s.host ? 'ja' : 'nein';
|
||
/* EIN ABGESCHALTETES BILD IST NICHT DASSELBE WIE EIN KAPUTTES.
|
||
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. */
|
||
fenster.dataset.stumm = (s.stumm || s.mikro_aus) ? 'ja' : 'nein';
|
||
let schild = fenster.querySelector('.kamera__aus');
|
||
if (s.kamera_aus && !schild) {
|
||
schild = el('span', 'kamera__aus', 'Kamera aus');
|
||
fenster.append(schild);
|
||
} else if (!s.kamera_aus && schild) {
|
||
schild.remove();
|
||
}
|
||
const draht = drähte.get(s.id);
|
||
const v = fenster.querySelector('video');
|
||
/* 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) {
|
||
v.srcObject = draht.strom;
|
||
if (tonFrei) v.muted = false;
|
||
v.play().catch(() => { /* der Knopf hilft nach */ });
|
||
}
|
||
}
|
||
for (const alt of [...behaelter.querySelectorAll('.kamera')]) {
|
||
if (!da.has(alt.dataset.wer)) alt.remove();
|
||
}
|
||
}
|
||
|
||
/* ---- Die Senderleiste --------------------------------------------
|
||
Kamera und Mikro gehoeren dem, der sendet -- Host wie Gast. Sie
|
||
liegen ueber dem Bild, weil man waehrend einer Sendung dorthin
|
||
sieht und nicht auf ein Register.
|
||
|
||
DER ZUSTAND STEHT AM SERVER, NICHT NUR IM BROWSER. Die Spur
|
||
abzuschalten reicht technisch (`track.enabled = false`), aber
|
||
dann sehen die anderen ein schwarzes Fenster ohne Grund. Der
|
||
Server sagt es weiter, damit „Kamera aus" darin steht. */
|
||
function senderleisteZeichnen() {
|
||
const leiste = $('senderleiste');
|
||
if (!leiste) return;
|
||
const sende = !!(lage && binSender && lage.stand === 'live');
|
||
leiste.hidden = !sende;
|
||
if (!sende) return;
|
||
|
||
const kAus = !!lage.ich.kamera_aus;
|
||
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';
|
||
$('s-mikro').title = mAus ? 'Mikro wieder einschalten' : 'Mikro abschalten';
|
||
}
|
||
|
||
/** Kamera oder Mikro schalten -- Geraet UND Ansage in einem Zug.
|
||
*
|
||
* 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'
|
||
? meinStrom.getVideoTracks() : meinStrom.getAudioTracks();
|
||
for (const sp of spuren) sp.enabled = !aus;
|
||
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/senden', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(was === 'kamera' ? { kamera_aus: aus } : { mikro_aus: aus }),
|
||
});
|
||
if (!a.ok) {
|
||
/* Die Ansage ging nicht durch -- also auch das Geraet zurueck.
|
||
Ein Knopf, der halb wirkt, ist schlimmer als einer, der gar
|
||
nicht wirkt: Man weiss nicht, woran man ist. */
|
||
for (const sp of spuren) sp.enabled = aus;
|
||
melde(await a.json().catch(() => null), 'Das ging gerade nicht.');
|
||
return;
|
||
}
|
||
lage = { ...(await a.json()) };
|
||
zeichnen();
|
||
} catch {
|
||
for (const sp of spuren) sp.enabled = aus;
|
||
sagFehler('Das ging gerade nicht.');
|
||
}
|
||
}
|
||
|
||
/* ---- Der Ton ----------------------------------------------------
|
||
Er wird EINMAL freigegeben und bleibt dann frei. */
|
||
let tonFrei = false;
|
||
function tonAn() {
|
||
if (tonFrei) return;
|
||
tonFrei = true;
|
||
for (const v of document.querySelectorAll('#kameras video[data-fremd="ja"]')) {
|
||
v.muted = false;
|
||
v.play().catch(() => { /* dann eben beim nächsten Tippen */ });
|
||
}
|
||
/* DER PLAYER GEHÖRT DAZU. Ein Knopf, der die Kameras laut macht
|
||
und das Video stumm lässt, ist schlimmer als keiner: Man drückt
|
||
ihn, etwas passiert, und trotzdem hört man den Film nicht. */
|
||
if (spielerBereit) {
|
||
try {
|
||
spieler.unMute();
|
||
spieler.setVolume(staende.video);
|
||
spieler.playVideo();
|
||
} catch { /* der nächste Takt richtet es */ }
|
||
}
|
||
/* DER KLANGRAUM AUCH. Ein AudioContext startet angehalten und
|
||
darf erst nach einer Handlung des Menschen laufen -- dieselbe
|
||
Regel wie beim Ton. Ohne das stehen die Pegel bei null, und
|
||
der Host denkt, sein Mikro sei tot. */
|
||
try { klangRaumHolen()?.resume(); } catch { /* dann eben nicht */ }
|
||
const knopf = $('ton-an');
|
||
if (knopf) knopf.hidden = true;
|
||
}
|
||
|
||
/* Die erste Berührung irgendwo auf der Seite reicht dem Browser als
|
||
Handlung. Deshalb hängt der Ton auch daran -- die meisten Leute
|
||
tippen ohnehin sofort irgendwo hin, und dann ist der Knopf schon
|
||
weg, bevor er stört. */
|
||
for (const art of ['pointerdown', 'keydown']) {
|
||
window.addEventListener(art, tonAn, { once: true, capture: true });
|
||
}
|
||
|
||
/* =================================================================
|
||
DER COUNTDOWN
|
||
|
||
Er zählt in Sekunden und wird jede Sekunde neu geschrieben --
|
||
nicht jede Minute. Wer bei 4:59 dazukommt, soll nicht bis 3:59
|
||
auf die erste Änderung warten.
|
||
================================================================= */
|
||
let countdownUhr = null;
|
||
function countdownTakt() {
|
||
clearInterval(countdownUhr);
|
||
const kasten = $('countdown');
|
||
if (!lage || lage.stand !== 'vorbereitung' || !lage.beginnt_am) {
|
||
kasten.hidden = true;
|
||
return;
|
||
}
|
||
const ziel = Date.parse(lage.beginnt_am);
|
||
if (!Number.isFinite(ziel)) { kasten.hidden = true; return; }
|
||
kasten.hidden = false;
|
||
|
||
const schreiben = () => {
|
||
const rest = Math.round((ziel - Date.now()) / 1000);
|
||
const zahl = $('countdown-zahl');
|
||
const wort = $('countdown-wort');
|
||
if (rest <= 0) {
|
||
zahl.textContent = 'gleich';
|
||
wort.textContent = 'es geht los';
|
||
clearInterval(countdownUhr);
|
||
return;
|
||
}
|
||
const std = Math.floor(rest / 3600);
|
||
const min = Math.floor((rest % 3600) / 60);
|
||
const sek = rest % 60;
|
||
zahl.textContent = std > 0
|
||
? `${std}:${String(min).padStart(2, '0')}:${String(sek).padStart(2, '0')}`
|
||
: `${min}:${String(sek).padStart(2, '0')}`;
|
||
wort.textContent = 'bis zum Start';
|
||
};
|
||
schreiben();
|
||
countdownUhr = setInterval(schreiben, 1000);
|
||
}
|
||
|
||
/* =================================================================
|
||
DAS VIDEO
|
||
|
||
Die Einbett-API von YouTube wird EINMAL geladen und danach
|
||
fremdgesteuert. Der Host schickt seinen Spielstand; alle anderen
|
||
folgen ihm.
|
||
|
||
NACHGEFUEHRT WIRD NUR BEI ECHTER ABWEICHUNG. Ein Player, dem man
|
||
jede Sekunde eine neue Position gibt, ruckelt sichtbar. Erst ab
|
||
anderthalb Sekunden Unterschied wird gesprungen -- darunter
|
||
merkt es niemand, darüber merkt es jeder.
|
||
================================================================= */
|
||
let spieler = null;
|
||
let spielerBereit = false;
|
||
let letztesVideo = '';
|
||
|
||
function apiLaden() {
|
||
if (window.YT && window.YT.Player) { spielerBauen(); return; }
|
||
if (document.getElementById('yt-api')) return;
|
||
const s = document.createElement('script');
|
||
s.id = 'yt-api';
|
||
s.src = 'https://www.youtube.com/iframe_api';
|
||
window.onYouTubeIframeAPIReady = () => spielerBauen();
|
||
document.head.append(s);
|
||
}
|
||
|
||
function spielerBauen() {
|
||
if (spieler || !lage || !lage.video) return;
|
||
const platz = $('video-platz');
|
||
const halter = el('div');
|
||
halter.id = 'yt-spieler';
|
||
platz.append(halter);
|
||
letztesVideo = lage.video;
|
||
spieler = new window.YT.Player('yt-spieler', {
|
||
videoId: lage.video,
|
||
host: 'https://www.youtube-nocookie.com',
|
||
playerVars: {
|
||
rel: 0, modestbranding: 1, playsinline: 1,
|
||
/* STUMM STARTEN -- sonst startet es gar nicht.
|
||
Ein Player mit Ton darf ohne Handlung des Menschen nicht
|
||
losgehen. Gemessen: `onStateChange` ist nie ausgelöst
|
||
worden, bei niemandem. Für einen Zuschauer wäre das eine
|
||
Sackgasse gewesen -- er hat keine Bedienung und hätte nie
|
||
eine Möglichkeit gehabt, es zu starten. */
|
||
mute: 1,
|
||
/* Der Host steuert. Alle anderen sehen keine Bedienung --
|
||
wer mitten in einer gemeinsamen Sendung zurückspult,
|
||
spult nur für sich zurück und wundert sich dann. */
|
||
controls: lage.ich.host ? 1 : 0,
|
||
disablekb: lage.ich.host ? 0 : 1,
|
||
},
|
||
events: {
|
||
onReady: () => {
|
||
spielerBereit = true;
|
||
$('video-warte').hidden = true;
|
||
/* JEDER RICHTET SICH ZUERST NACH DEM STAND -- auch der Host.
|
||
|
||
Vorher stand hier `if (host) takt(); else folgen()`. Der
|
||
Host hat damit nur GEMELDET, wo er steht, und nie selbst
|
||
begonnen. Sein Player blieb unangetastet, `getPlayerState()`
|
||
gab „nicht gestartet", er meldete „laeuft nicht" -- und
|
||
alle anderen folgten ihm brav ins Stehen. Gemessen: bei
|
||
niemandem lief etwas, nicht eine Sekunde.
|
||
|
||
Und es ist auch fuer sich richtig: Laedt der Host mitten
|
||
in der Sendung neu, soll er dort weitermachen, wo die
|
||
Sendung steht, und nicht bei null. */
|
||
folgen(lage);
|
||
if (lage.ich.host) hostTakt();
|
||
},
|
||
onStateChange: (e) => {
|
||
/* Der Zustand steht am Element -- ablesbar von aussen, ohne
|
||
in den fremden Rahmen greifen zu muessen. Genau das
|
||
braucht die Messung, um zu sagen: Es LAEUFT wirklich. */
|
||
const worte = { '-1': 'unklar', 0: 'ende', 1: 'laeuft', 2: 'pause',
|
||
3: 'puffert', 5: 'bereit' };
|
||
$('video-platz').dataset.spieler = worte[String(e.data)] || String(e.data);
|
||
if (lage && lage.ich.host) hostMelden();
|
||
},
|
||
},
|
||
});
|
||
}
|
||
|
||
/** Der Host sagt alle fünf Sekunden, wo er steht.
|
||
*
|
||
* Fünf Sekunden und nicht jede: Der Spielstand ändert sich
|
||
* vorhersagbar weiter, jeder rechnet selbst mit -- gemeldet werden
|
||
* muss nur, wenn jemand springt oder pausiert. Der Takt ist das
|
||
* Netz darunter, falls eine Meldung verlorengeht. */
|
||
let hostUhr = null;
|
||
function hostTakt() {
|
||
clearInterval(hostUhr);
|
||
hostUhr = setInterval(hostMelden, 5000);
|
||
}
|
||
async function hostMelden() {
|
||
if (!spielerBereit || !lage || lage.stand !== 'live') return;
|
||
try {
|
||
const laeuft = spieler.getPlayerState() === 1;
|
||
const sekunde = spieler.getCurrentTime();
|
||
await hole('/workspace/api/reaktion/video', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ laeuft, sekunde }),
|
||
});
|
||
} catch { /* der nächste Takt versucht es wieder */ }
|
||
}
|
||
|
||
/** Alle anderen folgen. */
|
||
function folgen(stand) {
|
||
if (!spielerBereit || !stand) return;
|
||
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;
|
||
const soll = (stand.sekunde || 0) + (stand.laeuft ? unterwegs : 0);
|
||
const ist = spieler.getCurrentTime();
|
||
if (Math.abs(ist - soll) > 1.5) spieler.seekTo(soll, true);
|
||
if (stand.laeuft && spieler.getPlayerState() !== 1) spieler.playVideo();
|
||
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
|
||
================================================================= */
|
||
let eisAdressen = [{ urls: 'stun:stun.l.google.com:19302' }];
|
||
|
||
async function adressenHolen() {
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/adressen');
|
||
if (!a.ok) return;
|
||
const d = await a.json();
|
||
if (Array.isArray(d.adressen) && d.adressen.length) eisAdressen = d.adressen;
|
||
} catch { /* die Vorgabe reicht im eigenen Netz */ }
|
||
}
|
||
|
||
function istSender(id) {
|
||
if (!lage) return false;
|
||
if (lage.host && lage.host.id === id) return true;
|
||
return lage.gaeste.some((g) => g.id === id);
|
||
}
|
||
|
||
/** Die Regel gegen das gleichzeitige Anrufen -- siehe Kopf der Datei. */
|
||
function ichRufeAn(anderer) {
|
||
if (!binSender) return false;
|
||
if (!istSender(anderer)) return true;
|
||
return meineId < anderer;
|
||
}
|
||
|
||
/* WER ALS ERSTER FRAGT, FRAGT FUER ALLE.
|
||
|
||
Die Wache `if (meinStrom)` wirkt erst, wenn die Kamera DA ist.
|
||
Solange die erste Anfrage laeuft, ist `meinStrom` noch null --
|
||
und jeder weitere Anruf stellte eine zweite Anfrage an dasselbe
|
||
Geraet. Gemessen: fuenf Anfragen beim Host. Der Browser gibt ein
|
||
Geraet nicht beliebig oft gleichzeitig heraus; eine davon blieb
|
||
liegen, und mit ihr der Anruf, der darauf wartete. Der Platz in
|
||
`ruftGerade` blieb belegt, und zwischen Host und Gast kam nie
|
||
wieder eine Leitung zustande.
|
||
|
||
Jetzt bekommen alle DASSELBE Versprechen zurueck. */
|
||
let kameraLaeuft = null;
|
||
async function kameraHolen() {
|
||
if (meinStrom) return meinStrom;
|
||
if (kameraLaeuft) return kameraLaeuft;
|
||
kameraLaeuft = kameraWirklichHolen();
|
||
try { return await kameraLaeuft; } finally { kameraLaeuft = null; }
|
||
}
|
||
|
||
async function kameraWirklichHolen() {
|
||
try {
|
||
meinStrom = await navigator.mediaDevices.getUserMedia({
|
||
/* 360p reicht für ein Fenster von 200 Pixeln Breite -- und es
|
||
ist der Unterschied zwischen zwölf Zuschauern und dreien.
|
||
Die Zahl steht hier und nicht in einer Einstellung, weil
|
||
sie zur Fenstergröße gehört, nicht zum Geschmack. */
|
||
video: { width: { ideal: 640 }, height: { ideal: 480 }, frameRate: { ideal: 24 } },
|
||
audio: { echoCancellation: true, noiseSuppression: true },
|
||
});
|
||
kamerasZeichnen();
|
||
return meinStrom;
|
||
} catch (f) {
|
||
sagFehler('Kamera oder Mikrofon sind nicht freigegeben. '
|
||
+ 'Im Browser oben in der Adresszeile lässt sich das erlauben.');
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function draht(anderer) {
|
||
let d = drähte.get(anderer);
|
||
if (d) return d;
|
||
const pc = new RTCPeerConnection({ iceServers: eisAdressen });
|
||
/* WANN DIESER DRAHT ENTSTANDEN IST. Ohne den Zeitpunkt lässt
|
||
sich „steht seit zehn Sekunden und liefert nichts" nicht von
|
||
„ist gerade erst losgegangen" unterscheiden. */
|
||
d = { pc, strom: null, seit: Date.now() };
|
||
drähte.set(anderer, d);
|
||
|
||
pc.onicecandidate = (e) => {
|
||
if (e.candidate) signalSenden(anderer, { typ: 'eis', eis: e.candidate });
|
||
};
|
||
pc.ontrack = (e) => {
|
||
d.strom = e.streams[0];
|
||
kamerasZeichnen();
|
||
};
|
||
pc.onconnectionstatechange = () => {
|
||
if (pc.connectionState === 'failed' || pc.connectionState === 'closed') {
|
||
try { pc.close(); } catch { /* egal */ }
|
||
drähte.delete(anderer);
|
||
kamerasZeichnen();
|
||
}
|
||
};
|
||
if (binSender && 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;
|
||
}
|
||
|
||
/** Schickt eine Verbindungsangabe -- und sagt, ob sie ANGEKOMMEN
|
||
* ist.
|
||
*
|
||
* Die Zahl kommt vom Server: Er weiss, wie viele offene Ströme die
|
||
* Gegenseite gerade hat. Null heißt, dass gerade niemand zuhört --
|
||
* und das ist der Unterschied zwischen „unterwegs" und „verloren".
|
||
*/
|
||
async function signalSenden(an, daten) {
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/signal', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ an, daten }),
|
||
});
|
||
if (!a.ok) return false;
|
||
const j = await a.json().catch(() => null);
|
||
return (j && j.zugestellt > 0);
|
||
} catch {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
/** Wird an dieser Leitung gerade gearbeitet?
|
||
*
|
||
* ZWEI DINGE MUESSEN GELTEN, und das zweite ist das wichtigere:
|
||
* Der Browser steht nicht auf `stable` (Angebot und Antwort sind
|
||
* noch nicht beide da) UND es ist noch nicht lange her.
|
||
*
|
||
* Ohne die Uhr wird aus „wird verhandelt" ein Dauerzustand: Eine
|
||
* Leitung, deren Antwort nie ankommt, waere vor dem Wachhund UND
|
||
* vor der Bitte um einen Anruf sicher -- fuer immer. Genau das
|
||
* ist passiert, und es hat den Fehler nur von einer Seite auf die
|
||
* andere geschoben. */
|
||
const VERHANDLUNG_MS = 5000;
|
||
function verhandeltNoch(d) {
|
||
return d.pc.signalingState !== 'stable'
|
||
&& Date.now() - d.seit < VERHANDLUNG_MS;
|
||
}
|
||
|
||
/* Ein Anruf, der nie zurueckkommt, sperrt den Platz fuer immer --
|
||
`draehteNachziehen()` ueberspringt jeden, der in `ruftGerade`
|
||
steht. Zwanzig Sekunden sind fuer Angebot und Absenden reichlich;
|
||
was laenger braucht, ist haengengeblieben. */
|
||
const RUF_FRIST = 20000;
|
||
async function anrufen(anderer) {
|
||
if (!ichRufeAn(anderer)) return;
|
||
/* Der Platz wird belegt, BEVOR irgendetwas wartet. */
|
||
if (drähte.has(anderer) || ruftGerade.has(anderer)) return;
|
||
ruftGerade.add(anderer);
|
||
const notbremse = setTimeout(() => {
|
||
if (ruftGerade.delete(anderer)) {
|
||
console.warn('[reaktion] Anruf an', anderer, 'blieb haengen -- Platz freigegeben.');
|
||
}
|
||
}, RUF_FRIST);
|
||
try {
|
||
if (!meinStrom) await kameraHolen();
|
||
const d = draht(anderer);
|
||
const angebot = await d.pc.createOffer();
|
||
await d.pc.setLocalDescription(angebot);
|
||
const kam = await signalSenden(anderer, { typ: 'angebot', sdp: d.pc.localDescription });
|
||
if (!kam) {
|
||
/* NIEMAND HAT ZUGEHOERT. Die halbfertige Verbindung muss weg,
|
||
sonst sagt der nächste Takt „den kenne ich schon" und ruft
|
||
nie wieder an -- das Bild bliebe für immer schwarz.
|
||
Gemessen: genau das ist passiert, weil der Ereignisstrom
|
||
des Empfängers ein paar hundert Millisekunden nach seiner
|
||
Anmeldung aufgeht. */
|
||
try { d.pc.close(); } catch { /* egal */ }
|
||
drähte.delete(anderer);
|
||
}
|
||
} catch (f) {
|
||
console.error('[reaktion] Anruf:', f && f.message);
|
||
const d = drähte.get(anderer);
|
||
if (d) { try { d.pc.close(); } catch { /* egal */ } drähte.delete(anderer); }
|
||
} finally {
|
||
clearTimeout(notbremse);
|
||
ruftGerade.delete(anderer);
|
||
}
|
||
}
|
||
|
||
async function signalEmpfangen(von, daten) {
|
||
try {
|
||
if (daten.typ === 'bitte-anrufen') {
|
||
/* Jemand sagt: „Ich bin jetzt bereit, ruf mich an."
|
||
Nur wer sendet, kann dem nachkommen -- und nur, wenn er
|
||
nach der Regel ohnehin der Anrufer waere. Sonst haette man
|
||
zwei Anrufer und genau das Durcheinander zurueck, das die
|
||
Regel verhindert. */
|
||
if (!binSender || !ichRufeAn(von)) return;
|
||
|
||
/* ES LAEUFT SCHON. Der Bittende weiss das nicht -- er hat ja
|
||
noch nichts -- und fragt deshalb alle drei Sekunden weiter.
|
||
Wer hier weitermacht, wirft seine eigene, halbfertige
|
||
Verhandlung weg und fängt ewig von vorn an. */
|
||
if (ruftGerade.has(von)) return;
|
||
const alt = drähte.get(von);
|
||
if (alt && verhandeltNoch(alt)) return;
|
||
|
||
if (alt) {
|
||
/* Jetzt ist es wirklich eine Leiche: fertig verhandelt und
|
||
trotzdem ohne Bild. Weg damit. */
|
||
try { alt.pc.close(); } catch { /* egal */ }
|
||
drähte.delete(von);
|
||
}
|
||
anrufen(von);
|
||
return;
|
||
}
|
||
if (daten.typ === 'angebot') {
|
||
/* ==== ERST NACHSEHEN, DANN ANTWORTEN ====================
|
||
|
||
Halte ich mich fuer einen Zuschauer, kann das eine Sekunde
|
||
alt sein: Wer gerade als Gast dazugeholt wurde, bekommt
|
||
den Anruf des Hosts oft frueher als seine eigene neue
|
||
Lage. Er baute dann eine Verbindung OHNE Spur, antwortete
|
||
freundlich -- und beim Host blieb das Fenster schwarz.
|
||
|
||
Eine Anfrage in genau dem Moment, in dem ohnehin etwas
|
||
Neues passiert. Die Alternative waere, sechs Sekunden auf
|
||
den Wachhund zu warten; den behalten wir als Netz, aber
|
||
er soll nicht der Normalfall sein. */
|
||
if (!binSender && lage && lage.stand === 'live') {
|
||
await standHolen().catch(() => { /* dann eben mit dem alten Stand */ });
|
||
}
|
||
if (binSender && !meinStrom) await kameraHolen();
|
||
const d = draht(von);
|
||
await d.pc.setRemoteDescription(daten.sdp);
|
||
const antwort = await d.pc.createAnswer();
|
||
await d.pc.setLocalDescription(antwort);
|
||
signalSenden(von, { typ: 'antwort', sdp: d.pc.localDescription });
|
||
} else if (daten.typ === 'antwort') {
|
||
const d = drähte.get(von);
|
||
/* NUR ANNEHMEN, WENN AUCH GEWARTET WIRD. `have-local-offer`
|
||
heisst: Ich habe gefragt und warte auf die Antwort. Steht
|
||
dort `stable`, ist die Verbindung längst fertig -- eine
|
||
zweite Antwort ist dann ein Nachzügler und kein Ereignis.
|
||
Ohne diese Zeile wirft der Browser, und der Wurf reisst die
|
||
ganze Signalbehandlung mit. */
|
||
if (d && d.pc.signalingState === 'have-local-offer') {
|
||
await d.pc.setRemoteDescription(daten.sdp);
|
||
}
|
||
} else if (daten.typ === 'eis') {
|
||
const d = drähte.get(von);
|
||
if (d && daten.eis) await d.pc.addIceCandidate(daten.eis).catch(() => {});
|
||
}
|
||
} catch (f) {
|
||
console.error('[reaktion] Signal:', f && f.message);
|
||
}
|
||
}
|
||
|
||
/** Nach jeder Änderung: zu allen verbinden, die dazugekommen sind,
|
||
* und alle abbauen, die weg sind. */
|
||
function draehteNachziehen() {
|
||
if (!lage || lage.stand !== 'live') return;
|
||
if (!binSender && !lage.ich.sicht) return; // kein Kameraplatz: nur Ton und Video
|
||
|
||
const sollen = new Set();
|
||
if (binSender) {
|
||
/* Wer sendet, ruft ALLE an, die zusehen -- und die anderen
|
||
Sender dazu. Den anderen Sender ruft nur der mit der
|
||
kleineren Nummer (siehe Kopf), sonst rufen beide.
|
||
|
||
Dass ein Gast die Liste der Zusehenden überhaupt bekommt,
|
||
ist kein Zufall: Ohne sie wüsste er nicht, wen er anrufen
|
||
soll, und weil Zuschauer grundsätzlich nie anrufen, käme
|
||
sein Bild bei niemandem an. */
|
||
if (lage.host && lage.host.id !== meineId) sollen.add(lage.host.id);
|
||
for (const g of lage.gaeste) if (g.id !== meineId) sollen.add(g.id);
|
||
if (lage.zuschauer) for (const z of lage.zuschauer) if (z.sicht && z.id !== meineId) sollen.add(z.id);
|
||
} else {
|
||
if (lage.host) sollen.add(lage.host.id);
|
||
for (const g of lage.gaeste) sollen.add(g.id);
|
||
}
|
||
|
||
/* ERST AUFRAEUMEN, DANN ANRUFEN -- und nicht umgekehrt.
|
||
|
||
Stand die Reihenfolge andersherum, merkte der Aufräumer eine
|
||
tote Leitung zwar, aber der Anrufer war schon vorbei: Neu
|
||
angerufen wurde erst im nächsten Durchgang, zweieinhalb
|
||
Sekunden später. Jemand sieht in dieser Zeit ein schwarzes
|
||
Fenster und weiß nicht, ob es noch kommt. */
|
||
for (const [id, d] of [...drähte]) {
|
||
if (!sollen.has(id)) {
|
||
try { d.pc.close(); } catch { /* egal */ }
|
||
drähte.delete(id);
|
||
continue;
|
||
}
|
||
/* ==== DIE STILLE LEITUNG ====================================
|
||
|
||
Von einem SENDER erwarte ich ein Bild. Kommt nach neun
|
||
Sekunden keins, ist der Draht tot -- auch wenn der Browser
|
||
ihn „connecting" nennt. Er wird weggeworfen, und der
|
||
nächste Durchgang ruft neu an.
|
||
|
||
WARUM NEUN SEKUNDEN: Ein Verbindungsaufbau über STUN
|
||
braucht im eigenen Netz unter einer Sekunde, über TURN
|
||
selten mehr als drei. Neun ist reichlich und trotzdem kurz
|
||
genug, dass es niemandem auffällt.
|
||
|
||
WARUM NUR BEI SENDERN: Ein Zuschauer schickt nichts. Bei
|
||
ihm ist „kein Bild" der Normalfall und kein Befund. */
|
||
/* ==== WER NOCH VERHANDELT, WIRD IN RUHE GELASSEN =========
|
||
|
||
Zwei Zeichen dafuer, und beide muessen gelten:
|
||
|
||
`ruftGerade` -- ein Angebot ist unterwegs. Zwischen dem
|
||
Anlegen der Leitung und dem Absenden liegen drei await;
|
||
genau darin hat der Wachhund zugeschlagen.
|
||
|
||
`signalingState !== 'stable'` -- Angebot und Antwort sind
|
||
noch nicht beide da. Eine Leitung ohne Bild ist in diesem
|
||
Zustand kein Befund, sondern der Normalfall. */
|
||
if (ruftGerade.has(id) || verhandeltNoch(d)) continue;
|
||
|
||
const erwarteBild = istSender(id);
|
||
const zustand = d.pc.connectionState;
|
||
/* SECHS SEKUNDEN. Ein Aufbau über STUN braucht im eigenen Netz
|
||
unter einer Sekunde, über TURN selten mehr als drei. Sechs
|
||
ist reichlich -- und kurz genug, dass niemand anfängt, an
|
||
seinem Browser zu zweifeln. */
|
||
const langGenug = Date.now() - d.seit > 6000;
|
||
const tot = (erwarteBild && !d.strom && langGenug)
|
||
|| (zustand === 'disconnected' && langGenug)
|
||
/* Steckengeblieben: nicht mehr in Verhandlung (die Uhr ist
|
||
abgelaufen) und trotzdem nicht fertig. Ohne diese Zeile
|
||
bleibt so eine Leitung ewig stehen und blockiert den
|
||
Platz. */
|
||
|| d.pc.signalingState !== 'stable';
|
||
if (tot) {
|
||
console.warn('[reaktion] Stille Leitung zu', id, '(' + zustand + ') -- neu aufbauen.');
|
||
try { d.pc.close(); } catch { /* egal */ }
|
||
drähte.delete(id);
|
||
/* Auch die Bremse lösen: Sonst wartet die nächste Bitte
|
||
noch drei Sekunden, obwohl gerade etwas kaputtging. */
|
||
zuletztGebeten.delete(id);
|
||
}
|
||
}
|
||
|
||
for (const id of sollen) {
|
||
if (drähte.has(id) || ruftGerade.has(id)) continue;
|
||
if (ichRufeAn(id)) anrufen(id);
|
||
else bitten(id);
|
||
}
|
||
kamerasZeichnen();
|
||
}
|
||
|
||
/* Hoechstens alle drei Sekunden je Gegenueber -- eine Bitte, die
|
||
jede Sekunde wiederholt wird, ist eine Flut und keine Bitte. */
|
||
const zuletztGebeten = new Map();
|
||
function bitten(anderer) {
|
||
const jetzt2 = Date.now();
|
||
if (jetzt2 - (zuletztGebeten.get(anderer) || 0) < 3000) return;
|
||
zuletztGebeten.set(anderer, jetzt2);
|
||
signalSenden(anderer, { typ: 'bitte-anrufen' });
|
||
}
|
||
|
||
/** Alle Leitungen weg, die Kamera bleibt.
|
||
*
|
||
* Unterschied zu `draehteWeg()`: Dort endet die Sendung, hier
|
||
* fängt sie für mich erst an. Die Kamera noch einmal freigeben zu
|
||
* lassen wäre eine zweite Abfrage im Browser -- und die kommt
|
||
* mitten in der Sendung. */
|
||
function leitungenNeu() {
|
||
for (const [, d] of drähte) { try { d.pc.close(); } catch { /* egal */ } }
|
||
drähte.clear();
|
||
ruftGerade.clear();
|
||
zuletztGebeten.clear();
|
||
}
|
||
|
||
function draehteWeg() {
|
||
for (const [, d] of drähte) { try { d.pc.close(); } catch { /* egal */ } }
|
||
drähte.clear();
|
||
ruftGerade.clear();
|
||
zuletztGebeten.clear();
|
||
if (meinStrom) {
|
||
for (const s of meinStrom.getTracks()) s.stop();
|
||
meinStrom = null;
|
||
}
|
||
}
|
||
|
||
/* =================================================================
|
||
DER LIVE-CHAT
|
||
================================================================= */
|
||
/* ---- Die Chat-Stufe ----------------------------------------------
|
||
Drei Schalter fuer die zwei, die die Sendung fuehren; fuer alle
|
||
anderen die Auskunft, warum das Feld gerade nicht geht.
|
||
|
||
EIN GESPERRTES FELD MUSS SAGEN, WARUM. Ein Feld, das sich nicht
|
||
beschreiben laesst und schweigt, sieht kaputt aus -- und dann
|
||
schreibt jemand in den Hauschat, dass die Reaction hakt. */
|
||
function chatStufeZeichnen() {
|
||
const stufen = $('chat-stufen');
|
||
if (!stufen) return;
|
||
stufen.hidden = !lage.ich.host;
|
||
if (lage.ich.host) {
|
||
for (const k of stufen.children) {
|
||
k.setAttribute('aria-pressed', String(k.dataset.modus === lage.chat_modus));
|
||
}
|
||
}
|
||
|
||
meldungenZeichnen();
|
||
|
||
const feld = $('chat-feld');
|
||
const senden = document.querySelector('.schiene__senden');
|
||
const darf = lage.ich.darf_schreiben !== false;
|
||
feld.disabled = !darf;
|
||
if (senden) senden.disabled = !darf;
|
||
/* DER GRUND KOMMT VOM SERVER, er wird hier nicht erraten.
|
||
Vorher stand hier eine Ableitung aus der Chat-Stufe -- und die
|
||
war für jemanden, der stummgeschaltet war, während der Chat
|
||
offen stand, schlicht falsch („Der Chat ist gerade zu"). Wer
|
||
die Antwort hat, muss sie nicht rekonstruieren. */
|
||
const GRUENDE = {
|
||
stumm_geschaltet: 'Du bist gerade stumm geschaltet',
|
||
aus_der_sendung: 'Du bist aus dieser Sendung',
|
||
treff_massnahme: 'Im Treff läuft eine Maßnahme gegen dich',
|
||
chat_nur_team: 'Gerade schreibt nur das Team',
|
||
chat_zu: 'Der Chat ist gerade zu',
|
||
saal_zu: 'Der Saal ist zu',
|
||
};
|
||
feld.placeholder = darf
|
||
? 'Sag was …'
|
||
: (GRUENDE[lage.ich.schreib_grund] || 'Gerade geht das nicht');
|
||
$('schiene').dataset.chat = lage.chat_modus || 'offen';
|
||
}
|
||
|
||
async function chatLaden() {
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/chat');
|
||
if (!a.ok) return;
|
||
const d = await a.json();
|
||
const liste = $('chat-liste');
|
||
liste.textContent = '';
|
||
for (const b of d.beitraege) liste.append(beitragBauen(b));
|
||
liste.scrollTop = liste.scrollHeight;
|
||
$('chat-zahl').textContent = String(d.beitraege.length);
|
||
} catch { /* der Chat kommt gleich per Strom nach */ }
|
||
}
|
||
|
||
/* ==== WER SPRICHT ================================================
|
||
|
||
Filipe: „die modis, linke hand und rechte hand soll im chat
|
||
extra aussehen."
|
||
|
||
EIN ABZEICHEN, KEINE FARBE ALLEIN. Farbe allein ist für rund
|
||
acht Prozent der Männer keine Auskunft -- und im Live-Chat ist
|
||
genau das die Frage, auf die es ankommt: Ist das jemand vom
|
||
Team oder irgendwer?
|
||
|
||
Die Wörter sind kurz, weil die Schiene schmal ist, und sie
|
||
sagen den RANG nicht. „Team" für die Hände, „Modi" für die
|
||
Moderation, „Dogi" für den, der sendet. Wer was darf, steht in
|
||
der Rechtetafel; hier geht es nur darum, wen man vor sich hat. */
|
||
const ABZEICHEN = {
|
||
admin: ['Dogi', 'dogi'],
|
||
hand: ['Team', 'team'],
|
||
linke: ['Team', 'team'],
|
||
modi: ['Modi', 'modi'],
|
||
};
|
||
|
||
function beitragBauen(b) {
|
||
const li = el('li', 'beitrag');
|
||
li.dataset.id = String(b.id);
|
||
if (lage && lage.host && b.person_id === lage.host.id) li.dataset.host = 'ja';
|
||
else if (b.rolle && b.rolle !== 'gast') li.dataset.team = 'ja';
|
||
|
||
const kopf = el('div', 'beitrag__wer');
|
||
kopf.append(el('span', null, b.name));
|
||
|
||
const abz = ABZEICHEN[b.rolle];
|
||
if (abz) {
|
||
const marke = el('span', 'beitrag__rolle', abz[0]);
|
||
marke.dataset.rolle = abz[1];
|
||
kopf.append(marke);
|
||
}
|
||
|
||
/* Wegnehmen darf, wem der Beitrag gehört -- und wer moderiert.
|
||
Der Knopf steht nur dort, wo er auch wirkt; ein Knopf, der mit
|
||
403 antwortet, ist eine Falle. */
|
||
const darf = lage && (lage.ich.moderiert || b.person_id === lage.ich.id);
|
||
if (darf) {
|
||
const weg = el('button', 'beitrag__weg', 'weg');
|
||
weg.type = 'button';
|
||
weg.addEventListener('click', () => beitragWeg(b.id));
|
||
kopf.append(weg);
|
||
}
|
||
|
||
/* MELDEN DARF JEDER -- ausser bei sich selbst.
|
||
Das ist der Punkt daran: Die Moderation sieht nicht alles, wer
|
||
mitliest schon. Ohne einen Weg für die Zusehenden bliebe
|
||
Moderation auf das beschränkt, was zufällig jemand vom Team
|
||
gerade gelesen hat. */
|
||
if (lage && b.person_id !== lage.ich.id && !lage.ich.moderiert) {
|
||
const m = el('button', 'beitrag__melden', 'melden');
|
||
m.type = 'button';
|
||
m.title = 'Der Moderation zeigen';
|
||
m.addEventListener('click', () => beitragMelden(b.id, m));
|
||
kopf.append(m);
|
||
}
|
||
|
||
/* DIE MODERATION GREIFT AM NAMEN AN. So machen es alle großen
|
||
Chats, und aus gutem Grund: Man sieht den Beitrag, will etwas
|
||
gegen die PERSON tun, und der Name ist das, worauf man
|
||
ohnehin zeigt. */
|
||
if (lage && lage.ich.moderiert && b.person_id && b.person_id !== lage.ich.id) {
|
||
kopf.firstChild.replaceWith(namensknopf(b));
|
||
}
|
||
|
||
li.append(kopf);
|
||
li.append(el('div', null, b.text));
|
||
return li;
|
||
}
|
||
|
||
function namensknopf(b) {
|
||
const k = el('button', 'beitrag__name', b.name);
|
||
k.type = 'button';
|
||
k.title = 'Was tun?';
|
||
k.addEventListener('click', () => moderationsMenue(k, b));
|
||
return k;
|
||
}
|
||
|
||
/** Das kleine Menü am Namen. Drei Dinge, mehr nicht.
|
||
*
|
||
* WARUM NICHT MEHR: Im Live entscheidet man in Sekunden. Eine
|
||
* Liste mit sieben Möglichkeiten liest niemand zu Ende -- und was
|
||
* länger gelten soll als diese Sendung, gehört ohnehin in die
|
||
* Maßnahmen des Treffs, wo es eine Begründungspflicht gibt. Der
|
||
* Weg dorthin steht als letzter Punkt. */
|
||
function moderationsMenue(knopf, b) {
|
||
document.querySelector('.modmenue')?.remove();
|
||
const menue = el('div', 'modmenue');
|
||
menue.setAttribute('role', 'menu');
|
||
|
||
const tun = (wort, was) => {
|
||
const k = el('button', 'modmenue__knopf', wort);
|
||
k.type = 'button';
|
||
k.addEventListener('click', async () => { menue.remove(); await was(); });
|
||
menue.append(k);
|
||
};
|
||
|
||
tun('Beitrag wegnehmen', () => beitragWeg(b.id));
|
||
tun('10 Minuten stumm', () => massnahme(b.person_id, 'stumm', 10));
|
||
tun('Aus der Sendung', async () => {
|
||
const ja = window.frageNach
|
||
? await window.frageNach({
|
||
titel: `${b.name} aus der Sendung nehmen?`,
|
||
text: 'Die Person kann bis zum Ende der Sendung nicht mehr zusehen. '
|
||
+ 'Für länger nimm die Maßnahmen im Treff.',
|
||
knopf: 'Rausnehmen',
|
||
})
|
||
: confirm(`${b.name} aus der Sendung nehmen?`);
|
||
if (ja) massnahme(b.person_id, 'raus');
|
||
});
|
||
|
||
const treff = el('a', 'modmenue__knopf modmenue__knopf--weg', 'Im Treff sperren …');
|
||
treff.href = '/workspace/treff-moderation.html';
|
||
treff.target = '_blank';
|
||
treff.rel = 'noopener';
|
||
menue.append(treff);
|
||
|
||
menueHinstellen(menue, knopf);
|
||
}
|
||
|
||
/* ==== WARUM DAS MENUE AM KOERPER HAENGT UND NICHT AM KNOPF =========
|
||
|
||
GEMESSEN, NICHT ÜBERLEGT. Zuerst stand es als Kind der
|
||
Beitragszeile da, mit `position: absolute`. Die Rechnung ging
|
||
auf: 216 px breit, x=1099..1315 im 1440er Fenster, y=652..840 bei
|
||
900 px Höhe — komplett im Bild. Das Bildschirmfoto zeigte
|
||
trotzdem einen abgeschnittenen Streifen hinter dem Eingabefeld.
|
||
|
||
Der Grund: Die Chatliste rollt (`overflow-y: auto`). Ein
|
||
absolut gesetztes Kind wird von einem rollenden Vorfahren
|
||
BESCHNITTEN, ganz gleich, wo es im Fenster liegt. „Im Fenster"
|
||
und „sichtbar" sind zwei verschiedene Fragen, und ich hatte die
|
||
falsche gemessen.
|
||
|
||
Also: fest am Fenster (`position: fixed`), Lage aus dem
|
||
tatsächlichen Rechteck des Knopfes gerechnet, und wo unten oder
|
||
rechts kein Platz ist, klappt es nach oben bzw. nach links. Und
|
||
es geht zu, sobald jemand rollt — sonst stünde es gleich neben
|
||
einem ganz anderen Namen. */
|
||
function menueHinstellen(menue, anker) {
|
||
menue.style.position = 'fixed';
|
||
menue.style.visibility = 'hidden';
|
||
document.body.append(menue);
|
||
|
||
const a = anker.getBoundingClientRect();
|
||
const m = menue.getBoundingClientRect();
|
||
const luft = 8;
|
||
|
||
let links = a.left;
|
||
if (links + m.width > window.innerWidth - luft) links = window.innerWidth - m.width - luft;
|
||
if (links < luft) links = luft;
|
||
|
||
let oben = a.bottom + 6;
|
||
/* Passt es unten nicht, klappt es über den Knopf. Passt es auch
|
||
dort nicht (kleines Fenster, langes Menü), wird es oben
|
||
angesetzt und rollt in sich selbst. */
|
||
if (oben + m.height > window.innerHeight - luft) {
|
||
const darueber = a.top - m.height - 6;
|
||
oben = darueber >= luft ? darueber : luft;
|
||
}
|
||
menue.style.left = `${Math.round(links)}px`;
|
||
menue.style.top = `${Math.round(oben)}px`;
|
||
menue.style.maxHeight = `${Math.round(window.innerHeight - oben - luft)}px`;
|
||
menue.style.visibility = '';
|
||
|
||
const zumachen = () => {
|
||
menue.remove();
|
||
document.removeEventListener('click', beiKlick, true);
|
||
window.removeEventListener('resize', zumachen);
|
||
document.removeEventListener('scroll', zumachen, true);
|
||
};
|
||
function beiKlick(e) { if (!menue.contains(e.target) && e.target !== anker) zumachen(); }
|
||
setTimeout(() => {
|
||
document.addEventListener('click', beiKlick, true);
|
||
window.addEventListener('resize', zumachen);
|
||
/* `true` -- Rollen steigt nicht auf, es muss beim Einfangen
|
||
abgeholt werden, sonst merkt man das Rollen der Chatliste
|
||
nicht. */
|
||
document.addEventListener('scroll', zumachen, true);
|
||
}, 0);
|
||
}
|
||
|
||
async function massnahme(personId, art, minuten) {
|
||
const a = await hole('/workspace/api/reaktion/massnahme', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ person_id: personId, art, minuten }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = { ...(await a.json()) };
|
||
zeichnen();
|
||
sagFehler(art === 'stumm' ? 'Für 10 Minuten stumm.' : 'Aus der Sendung genommen.');
|
||
}
|
||
|
||
async function beitragMelden(id, knopf) {
|
||
const a = await hole(`/workspace/api/reaktion/chat/${id}/melden`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({}),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
knopf.textContent = 'gemeldet';
|
||
knopf.disabled = true;
|
||
}
|
||
|
||
/* ---- Die Meldungen im Kopf der Schiene ----------------------------
|
||
Nur für die Moderation, und nur, wenn etwas offen ist. Eine Zahl,
|
||
die immer dasteht und meistens null ist, wird nach drei Tagen
|
||
nicht mehr gelesen. */
|
||
function meldungenZeichnen() {
|
||
const knopf = $('chat-meldungen');
|
||
if (!knopf) return;
|
||
const offen = lage.meldungen || [];
|
||
knopf.hidden = !lage.ich.moderiert || offen.length === 0;
|
||
knopf.textContent = offen.length === 1 ? '1 Meldung' : `${offen.length} Meldungen`;
|
||
}
|
||
|
||
function meldungenZeigen() {
|
||
const offen = lage.meldungen || [];
|
||
if (!offen.length) return;
|
||
document.querySelector('.modmenue')?.remove();
|
||
const menue = el('div', 'modmenue modmenue--liste');
|
||
for (const m of offen) {
|
||
const zeile = el('div', 'modmeldung');
|
||
zeile.append(el('span', 'modmeldung__wer', `${m.wer} — gemeldet von ${m.melder || 'jemandem'}`));
|
||
zeile.append(el('span', 'modmeldung__text', m.text));
|
||
if (m.weg_am) zeile.append(el('span', 'modmeldung__schon', 'schon weggenommen'));
|
||
const reihe = el('div', 'modmeldung__knoepfe');
|
||
|
||
if (!m.weg_am) {
|
||
const weg = el('button', 'modmenue__knopf', 'Wegnehmen');
|
||
weg.type = 'button';
|
||
weg.addEventListener('click', async () => {
|
||
await beitragWeg(m.beitrag_id);
|
||
await erledigt(m.id);
|
||
});
|
||
reihe.append(weg);
|
||
}
|
||
const stumm = el('button', 'modmenue__knopf', '10 Min stumm');
|
||
stumm.type = 'button';
|
||
stumm.addEventListener('click', async () => {
|
||
await massnahme(m.wer_id, 'stumm', 10);
|
||
await erledigt(m.id);
|
||
});
|
||
reihe.append(stumm);
|
||
|
||
const ok = el('button', 'modmenue__knopf modmenue__knopf--weg', 'Passt schon');
|
||
ok.type = 'button';
|
||
ok.addEventListener('click', () => erledigt(m.id));
|
||
reihe.append(ok);
|
||
zeile.append(reihe);
|
||
menue.append(zeile);
|
||
}
|
||
menueHinstellen(menue, $('chat-meldungen'));
|
||
}
|
||
|
||
async function erledigt(id) {
|
||
const a = await hole(`/workspace/api/reaktion/meldung/${id}/erledigt`, { method: 'POST' });
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = { ...(await a.json()) };
|
||
document.querySelector('.modmenue')?.remove();
|
||
zeichnen();
|
||
}
|
||
|
||
async function beitragWeg(id) {
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/chat/' + id, { method: 'DELETE' });
|
||
if (!a.ok) melde(await a.json().catch(() => null), 'Wegnehmen ging nicht.');
|
||
} catch { /* der Strom holt den Stand nach */ }
|
||
}
|
||
|
||
function chatAnhaengen(b) {
|
||
const liste = $('chat-liste');
|
||
/* Nur nachfahren, wenn man ohnehin unten stand. Wer nach oben
|
||
gescrollt hat, liest etwas -- und soll nicht bei jedem neuen
|
||
Satz herausgerissen werden. */
|
||
const unten = liste.scrollHeight - liste.scrollTop - liste.clientHeight < 60;
|
||
liste.append(beitragBauen(b));
|
||
while (liste.children.length > 200) liste.firstElementChild.remove();
|
||
$('chat-zahl').textContent = String(liste.children.length);
|
||
if (unten) liste.scrollTop = liste.scrollHeight;
|
||
}
|
||
|
||
/* =================================================================
|
||
DIE REGIE
|
||
|
||
Sie ist nach dem Vorbild eines Regieplatzes gebaut, nicht nach
|
||
dem eines Formulars. Vier Dinge machen den Unterschied:
|
||
|
||
1. Eine Leiste, die IMMER steht -- Lampe, Laufzeit, Zahlen und
|
||
die drei grossen Knoepfe liegen ausserhalb des
|
||
einklappbaren Teils.
|
||
2. Register statt Stapel.
|
||
3. Eine Videospur mit echter Bedienung.
|
||
4. PEGEL an den Reglern. Sie beantworten die Frage, die man
|
||
sich sonst erst nach der Sendung stellt: „War mein Mikro
|
||
ueberhaupt an?" Ein Regler auf 100 sagt darueber nichts --
|
||
er sagt nur, wo der Knopf steht.
|
||
================================================================= */
|
||
const REGLER = [
|
||
/* `schalter: true` heisst: kein Schieber, nur an/aus und Pegel.
|
||
Die eigene Lautstaerke laesst sich nicht am Regler aendern --
|
||
dafuer muesste der Ton umgerechnet und die Spur in jeder
|
||
Verbindung ausgetauscht werden. Ein Schieber, der sich bewegen
|
||
laesst und nichts tut, ist schlimmer als keiner. */
|
||
{ schluessel: 'mikro', wort: 'Mein Mikro', schalter: true },
|
||
{ schluessel: 'gast1', wort: 'Gast 1' },
|
||
{ schluessel: 'gast2', wort: 'Gast 2' },
|
||
{ schluessel: 'video', wort: 'YouTube' },
|
||
];
|
||
/* Die Regler-Staende. Sie stehen HIER und nicht im Pult: Der
|
||
YouTube-Regler gilt auch fuer jemanden, der gar kein Pult hat --
|
||
`tonAn()` setzt damit die Lautstaerke des Players. */
|
||
const staende = { mikro: 100, gast1: 100, gast2: 100, video: 100 };
|
||
|
||
/* Solange jemand am Positionsband zieht, wird es NICHT von der Uhr
|
||
ueberschrieben -- sonst rutscht der Griff unter dem Finger weg. */
|
||
let bandZieht = false;
|
||
|
||
/* ---- Die Pegel ---------------------------------------------------
|
||
Gemessen wird mit der Klanganalyse des Browsers: Ein
|
||
`AnalyserNode` je Quelle, alle 90 ms der lauteste Ausschlag.
|
||
|
||
DER YOUTUBE-REGLER HAT KEINEN ECHTEN PEGEL, und das steht auch
|
||
dabei. Der Ton kommt aus einem fremden Rahmen; ihn zu messen
|
||
hiesse, in eine fremde Seite zu greifen, und das laesst kein
|
||
Browser zu. Dort zeigt der Balken deshalb grau die EINGESTELLTE
|
||
Lautstaerke. Einen erfundenen Ausschlag zu zeichnen waere
|
||
schlimmer als keiner -- man wuerde ihm glauben. */
|
||
let klangRaum = null;
|
||
let q2spitze = 0; // die Spitze fuer die Senderleiste
|
||
const pegelQuellen = new Map(); // schluessel -> { analyse, feld, spitze }
|
||
|
||
function klangRaumHolen() {
|
||
if (klangRaum) return klangRaum;
|
||
const Bau = window.AudioContext || window.webkitAudioContext;
|
||
if (!Bau) return null;
|
||
try { klangRaum = new Bau(); } catch { return null; }
|
||
return klangRaum;
|
||
}
|
||
|
||
function pegelAnschliessen(schluessel, strom) {
|
||
if (!strom || !strom.getAudioTracks || !strom.getAudioTracks().length) return;
|
||
const raum = klangRaumHolen();
|
||
if (!raum) return;
|
||
const vorher = pegelQuellen.get(schluessel);
|
||
if (vorher && vorher.strom === strom) return;
|
||
try {
|
||
const quelle = raum.createMediaStreamSource(strom);
|
||
const analyse = raum.createAnalyser();
|
||
analyse.fftSize = 512;
|
||
analyse.smoothingTimeConstant = .5;
|
||
quelle.connect(analyse);
|
||
/* NICHT an den Lautsprecher weiterreichen. Der Ton laeuft
|
||
ueber das Videoelement; ein zweiter Weg hiesse, alles
|
||
doppelt zu hoeren. */
|
||
pegelQuellen.set(schluessel, {
|
||
strom, analyse, feld: new Uint8Array(analyse.frequencyBinCount), spitze: 0,
|
||
});
|
||
} catch { /* dann bleibt der Balken dunkel, und das ist ehrlich */ }
|
||
}
|
||
|
||
function pegelTakt() {
|
||
/* Der Pegel in der Senderleiste -- fuer jeden, der sendet. Ein
|
||
Gast hat kein Pult, an dem er nachsehen koennte, ob sein Ton
|
||
ankommt; er braucht ihn am dringendsten. */
|
||
const leistenPegel = $('s-pegel');
|
||
if (leistenPegel) {
|
||
const q = pegelQuellen.get('mikro');
|
||
let hoch = 0;
|
||
if (q && !(lage && lage.ich.mikro_aus)) {
|
||
q.analyse.getByteTimeDomainData(q.feld);
|
||
let summe = 0;
|
||
for (let i = 0; i < q.feld.length; i++) {
|
||
const w = (q.feld[i] - 128) / 128;
|
||
summe += w * w;
|
||
}
|
||
hoch = Math.min(100, Math.round(Math.sqrt(Math.sqrt(summe / q.feld.length)) * 165));
|
||
}
|
||
q2spitze = hoch > q2spitze ? hoch : Math.max(hoch, q2spitze - 7);
|
||
leistenPegel.style.setProperty('--stand', q2spitze + '%');
|
||
}
|
||
|
||
for (const r of REGLER) {
|
||
const kasten = document.querySelector(`.regler[data-was="${r.schluessel}"]`);
|
||
if (!kasten) continue;
|
||
const balken = kasten.querySelector('.pegel');
|
||
if (!balken) continue;
|
||
|
||
if (r.schluessel === 'video') {
|
||
/* KEIN MESSWERT -- die eingestellte Lautstärke, und zwar
|
||
GRAU. Im ersten Bild stand hier ein grün-gelb-roter
|
||
Vollausschlag, und der sah aus wie ein Signal. Genau das
|
||
sollte er nie: Einen erfundenen Pegel zu zeichnen ist
|
||
schlimmer als keiner, weil man ihm glaubt. */
|
||
const aus = kasten.dataset.stumm === 'ja';
|
||
balken.dataset.still = 'ja';
|
||
balken.style.setProperty('--stand', (aus ? 0 : staende.video) + '%');
|
||
continue;
|
||
}
|
||
|
||
const q = pegelQuellen.get(r.schluessel);
|
||
if (!q) { balken.style.setProperty('--stand', '0%'); continue; }
|
||
q.analyse.getByteTimeDomainData(q.feld);
|
||
let summe = 0;
|
||
for (let i = 0; i < q.feld.length; i++) {
|
||
const w = (q.feld[i] - 128) / 128;
|
||
summe += w * w;
|
||
}
|
||
const mittel = Math.sqrt(summe / q.feld.length);
|
||
/* Auf eine Skala, die dem Ohr entspricht: leise Sprache soll
|
||
sichtbar ausschlagen, nicht erst Geschrei. */
|
||
const hoch = Math.min(100, Math.round(Math.sqrt(mittel) * 165));
|
||
/* Schnell hoch, langsam runter -- ein Balken, der sofort
|
||
abfaellt, flackert und ist unlesbar. */
|
||
q.spitze = hoch > q.spitze ? hoch : Math.max(hoch, q.spitze - 7);
|
||
balken.style.setProperty('--stand', q.spitze + '%');
|
||
balken.dataset.still = kasten.dataset.stumm === 'ja' ? 'ja' : 'nein';
|
||
}
|
||
}
|
||
|
||
/** Woher kommt der Ton fuer welchen Regler? */
|
||
function pegelNachziehen() {
|
||
if (meinStrom) pegelAnschliessen('mikro', meinStrom);
|
||
const fremde = [...document.querySelectorAll('#kameras .kamera')]
|
||
.filter((k) => k.dataset.wer !== String(meineId));
|
||
fremde.forEach((k, i) => {
|
||
if (i > 1) return;
|
||
const v = k.querySelector('video');
|
||
if (v && v.srcObject) pegelAnschliessen(i === 0 ? 'gast1' : 'gast2', v.srcObject);
|
||
});
|
||
}
|
||
|
||
/* ---- Was die eigene Leitung traegt --------------------------------
|
||
GEMESSEN, NICHT GERECHNET. „Zwoelf mal 350 kbit/s" ist eine
|
||
Schaetzung aus der Planung; was wirklich hinausgeht, weiss nur
|
||
die Verbindung selbst. Der Unterschied zwischen „es ruckelt bei
|
||
euch?" und „ich sehe, dass es zu viel wird" sind genau diese
|
||
zwei Zeilen. */
|
||
let letzteBytes = 0;
|
||
let letzteZeit = 0;
|
||
async function lastMessen() {
|
||
if (!drähte.size) {
|
||
letzteBytes = 0; letzteZeit = 0;
|
||
const f = $('z-last'); if (f) f.textContent = '–';
|
||
return;
|
||
}
|
||
let bytes = 0;
|
||
for (const { pc } of drähte.values()) {
|
||
try {
|
||
const bericht = await pc.getStats();
|
||
bericht.forEach((e) => {
|
||
if (e.type === 'outbound-rtp' && !e.isRemote) bytes += e.bytesSent || 0;
|
||
});
|
||
} catch { /* eine Verbindung im Aufbau hat noch keine Zahlen */ }
|
||
}
|
||
const jetzt = Date.now();
|
||
if (letzteZeit && jetzt > letzteZeit && bytes >= letzteBytes) {
|
||
const bit = (bytes - letzteBytes) * 8 / ((jetzt - letzteZeit) / 1000);
|
||
const f = $('z-last');
|
||
if (f) {
|
||
f.textContent = bit > 900_000
|
||
? (bit / 1_000_000).toFixed(1).replace('.', ',') + ' Mbit/s'
|
||
: Math.round(bit / 1000) + ' kbit/s';
|
||
}
|
||
}
|
||
letzteBytes = bytes; letzteZeit = jetzt;
|
||
}
|
||
|
||
/* ---- Zeiten in Worte --------------------------------------------- */
|
||
function alsZeit(sekunden) {
|
||
const s = Math.max(0, Math.floor(sekunden || 0));
|
||
const st = Math.floor(s / 3600);
|
||
const m = Math.floor((s % 3600) / 60);
|
||
const r = s % 60;
|
||
const zwei = (n) => String(n).padStart(2, '0');
|
||
return st ? `${st}:${zwei(m)}:${zwei(r)}` : `${m}:${zwei(r)}`;
|
||
}
|
||
|
||
/* =================================================================
|
||
DAS PULT AUFBAUEN -- einmal, beim ersten Zeichnen
|
||
================================================================= */
|
||
function pultAufbauen() {
|
||
const pult = $('pult');
|
||
pult.dataset.auf = 'ja';
|
||
|
||
/* ---- Die Register ----
|
||
Sie stehen seit dem 28.09. oben über dem Saal und nicht mehr
|
||
im einklappbaren Teil. Verdrahtet werden sie trotzdem hier:
|
||
Sie gehören zur Regie, und wer kein Pult hat, hat auch keine
|
||
Register. */
|
||
for (const knopf of reiterKnoepfe()) {
|
||
knopf.addEventListener('click', () => reiterWechseln(knopf.dataset.tafel));
|
||
}
|
||
reiterTastatur();
|
||
/* DIE MARKE BRAUCHT EINE GEMESSENE BREITE. Beim ersten Zeichnen
|
||
ist die Hausschrift oft noch nicht da; ein Knopf ist dann
|
||
schmaler als gleich darauf. Also einmal jetzt und einmal,
|
||
sobald die Schriften stehen. */
|
||
reiterMarke();
|
||
if (document.fonts && document.fonts.ready) {
|
||
document.fonts.ready.then(() => reiterMarke()).catch(() => { });
|
||
}
|
||
window.addEventListener('resize', reiterMarke);
|
||
|
||
/* ---- Die Regler ---- */
|
||
const reihe = $('regler');
|
||
reihe.textContent = '';
|
||
for (const r of REGLER) {
|
||
const kasten = el('div', 'regler' + (r.schalter ? ' regler--schalter' : ''));
|
||
kasten.dataset.was = r.schluessel;
|
||
kasten.append(el('span', 'regler__wort', r.wort));
|
||
|
||
if (!r.schalter) {
|
||
const schieber = document.createElement('input');
|
||
schieber.type = 'range';
|
||
schieber.min = '0'; schieber.max = '100'; schieber.value = '100';
|
||
schieber.setAttribute('aria-label', r.wort);
|
||
const zahl = el('span', 'regler__zahl', '100');
|
||
schieber.addEventListener('input', () => {
|
||
staende[r.schluessel] = Number(schieber.value);
|
||
zahl.textContent = schieber.value;
|
||
tonNachziehen();
|
||
});
|
||
kasten.append(schieber);
|
||
const balken = el('div', 'pegel');
|
||
balken.append(el('i'));
|
||
kasten.append(balken);
|
||
kasten.append(zahl);
|
||
} else {
|
||
const balken = el('div', 'pegel');
|
||
balken.append(el('i'));
|
||
kasten.append(balken);
|
||
}
|
||
|
||
const stumm = el('button', 'regler__stumm', r.schalter ? 'aus' : 'stumm');
|
||
stumm.type = 'button';
|
||
stumm.addEventListener('click', () => stummSchalten(r.schluessel));
|
||
kasten.append(stumm);
|
||
reihe.append(kasten);
|
||
}
|
||
$('ton-hinweis').textContent =
|
||
'Die Regler gelten für das, was DU hörst. Nur „Mein Mikro" und der '
|
||
+ 'Stummschalter an einer Gastkarte gelten für alle. Der Balken zeigt '
|
||
+ 'den gemessenen Pegel — beim YouTube-Regler die eingestellte '
|
||
+ 'Lautstärke, denn Ton aus einem fremden Rahmen lässt sich nicht messen.';
|
||
|
||
/* ---- 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'],
|
||
];
|
||
werbungPultBauen();
|
||
|
||
const lreihe = $('layout-reihe');
|
||
lreihe.textContent = '';
|
||
for (const [schluessel, wort] of layouts) {
|
||
const k = el('button', 'layout-knopf', wort);
|
||
k.type = 'button';
|
||
k.dataset.layout = schluessel;
|
||
k.addEventListener('click', () => layoutSetzen(schluessel));
|
||
lreihe.append(k);
|
||
}
|
||
|
||
/* ---- Größe der Kamerafenster ----
|
||
Zwischen „Video groß" (208 px) und „Kameras groß" (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.
|
||
|
||
Die Werte kommen vom Server (`lage.kamera_groessen`). Eine
|
||
zweite Liste hier wäre eine, die irgendwann von der ersten
|
||
abweicht -- und dann steht ein Knopf da, den der Server
|
||
ablehnt. */
|
||
const greihe = $('kamgroesse');
|
||
greihe.textContent = '';
|
||
for (const wert of (lage.kamera_groessen || [1])) {
|
||
const k = el('button', 'kamgroesse__knopf',
|
||
wert === 1 ? '1×' : `${String(wert).replace('.', ',')}×`);
|
||
k.type = 'button';
|
||
k.dataset.gross = String(wert);
|
||
k.title = wert === 1 ? 'Normale Größe'
|
||
: `${String(wert).replace('.', ',')}-fache Größe`;
|
||
k.addEventListener('click', () => bildSetzen({ kamera_gross: wert }));
|
||
greihe.append(k);
|
||
}
|
||
|
||
/* ---- Ecke ----
|
||
Vier Knöpfe mit einem kleinen Feld darin, das die Ecke zeigt.
|
||
Ein Wort wie „oben links" wäre länger zu lesen, als das Bild
|
||
zu erfassen ist -- und vier Wörter nebeneinander passen am
|
||
Handy nicht in eine Zeile. Der Name steht trotzdem da, als
|
||
`aria-label` und als Hinweis unter dem Zeiger. */
|
||
const ECKENWORT = {
|
||
ol: 'Oben links', or: 'Oben rechts',
|
||
ul: 'Unten links', ur: 'Unten rechts',
|
||
};
|
||
const ereihe = $('kamecke');
|
||
ereihe.textContent = '';
|
||
for (const ecke of (lage.kamera_ecken || ['ur'])) {
|
||
const k = el('button', 'kamecke__knopf');
|
||
k.type = 'button';
|
||
k.dataset.ecke = ecke;
|
||
k.title = ECKENWORT[ecke] || ecke;
|
||
k.setAttribute('aria-label', ECKENWORT[ecke] || ecke);
|
||
k.append(el('i', 'kamecke__feld'));
|
||
k.addEventListener('click', () => bildSetzen({ kamera_ecke: ecke }));
|
||
ereihe.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);
|
||
}
|
||
|
||
/* ---- Die Tempo-Gruppe klappt am Fingergerät ----
|
||
Der Zustand liegt im Browser und nicht an der Sendung: Ob
|
||
ICH die sechs Stufen sehen will, geht die anderen nichts an
|
||
-- anders als das Tempo selbst, das für alle gilt. */
|
||
$('tempo-auf').addEventListener('click', () => {
|
||
const teil = $('tempo-teil');
|
||
const auf = teil.dataset.auf !== 'auf';
|
||
teil.dataset.auf = auf ? 'auf' : 'zu';
|
||
$('tempo-auf').setAttribute('aria-expanded', String(auf));
|
||
try { localStorage.setItem('reaktion-tempo-auf', auf ? 'auf' : 'zu'); } catch { /* egal */ }
|
||
});
|
||
try {
|
||
if (localStorage.getItem('reaktion-tempo-auf') === 'auf') {
|
||
$('tempo-teil').dataset.auf = 'auf';
|
||
$('tempo-auf').setAttribute('aria-expanded', 'true');
|
||
}
|
||
} catch { /* ohne Gedächtnis bleibt sie zu -- das ist die sichere Seite */ }
|
||
|
||
/* ---- 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);
|
||
buehneHolen();
|
||
|
||
/* ---- Gestaltung ---- */
|
||
$('stufe-neu').addEventListener('click', stufeDazu);
|
||
$('stufen-sichern').addEventListener('click', stufenSichern);
|
||
$('zeichen-datei').addEventListener('change', (e) => zeichenHoch(e.target));
|
||
$('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));
|
||
$('v-vor').addEventListener('click', () => springen(10));
|
||
$('v-naechstes').addEventListener('click', () => weiterSchalten(0));
|
||
const band = $('v-band');
|
||
band.addEventListener('pointerdown', () => { bandZieht = true; });
|
||
band.addEventListener('input', () => {
|
||
bandZieht = true;
|
||
if (!spielerBereit) return;
|
||
const dauer = spieler.getDuration() || 0;
|
||
$('v-zeit').textContent = `${alsZeit(dauer * band.value / 1000)} / ${alsZeit(dauer)}`;
|
||
band.style.setProperty('--fortschritt', (band.value / 10) + '%');
|
||
});
|
||
band.addEventListener('change', () => {
|
||
bandZieht = false;
|
||
if (!spielerBereit) return;
|
||
const dauer = spieler.getDuration() || 0;
|
||
spieler.seekTo(dauer * band.value / 1000, true);
|
||
hostMelden();
|
||
});
|
||
|
||
/* ---- Die Warteschlange ---- */
|
||
$('l-anhaengen').addEventListener('click', anhaengen);
|
||
$('l-neu').addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') { e.preventDefault(); anhaengen(); }
|
||
});
|
||
|
||
/* ---- Die grossen Knoepfe ---- */
|
||
$('p-sichern').addEventListener('click', einstellen);
|
||
$('p-vorbereiten').addEventListener('click', () => standSetzen('vorbereitung'));
|
||
$('p-starten').addEventListener('click', () => standSetzen('live'));
|
||
$('p-beenden').addEventListener('click', async () => {
|
||
const ja = window.frageNach
|
||
? await window.frageNach({
|
||
titel: 'Sendung beenden?',
|
||
text: 'Der Saal geht zu, der Live-Chat dieser Sendung wird abgeräumt '
|
||
+ 'und die Gäste werden entlassen.',
|
||
knopf: 'Beenden',
|
||
})
|
||
: confirm('Sendung beenden?');
|
||
if (ja) standSetzen('zu');
|
||
});
|
||
$('p-holen').addEventListener('click', gastHolen);
|
||
|
||
$('pult-griff').addEventListener('click', () => {
|
||
const auf = pult.dataset.auf !== 'ja';
|
||
pult.dataset.auf = auf ? 'ja' : 'nein';
|
||
$('pult-griff').setAttribute('aria-expanded', String(auf));
|
||
});
|
||
|
||
tastaturAnhaengen();
|
||
|
||
/* Zwei Takte, die nur das Pult braucht. Die Pegel laufen
|
||
woanders -- sie gehoeren jedem, der sendet. */
|
||
setInterval(leisteTakt, 500); // Uhr und Positionsband
|
||
setInterval(lastMessen, 2500); // was die eigene Leitung traegt
|
||
}
|
||
|
||
/* =================================================================
|
||
DIE REGIELEISTE
|
||
|
||
Filipe, 28.09.2026: „ich hätte das gerne oben also nicht in
|
||
dieser kachel sondern über der kachel wo die videos laufen."
|
||
|
||
Sie steht damit über dem Saal und ist der einzige Teil der
|
||
Regie, der auch bei zugeklapptem Pult sichtbar bleibt.
|
||
================================================================= */
|
||
|
||
/** Die Register -- ohne die Marke, die mit im Behälter liegt. */
|
||
function reiterKnoepfe() {
|
||
return [...$('reiter').querySelectorAll('.reiter__knopf')];
|
||
}
|
||
|
||
function reiterWechseln(name, vomMenschen = true) {
|
||
const knoepfe = reiterKnoepfe();
|
||
for (const knopf of knoepfe) {
|
||
const gewaehlt = knopf.dataset.tafel === name;
|
||
knopf.setAttribute('aria-selected', String(gewaehlt));
|
||
/* WANDERNDER TABULATOR. In einer Registerleiste liegt genau
|
||
EIN Register in der Tabulatorfolge; zwischen ihnen wandert
|
||
man mit den Pfeiltasten. Sieben Tabulatorschritte durch
|
||
Register, bevor man an den Inhalt kommt, sind das Gegenteil
|
||
von bedienbar. */
|
||
knopf.tabIndex = gewaehlt ? 0 : -1;
|
||
}
|
||
for (const tafel of document.querySelectorAll('.pult-tafel')) {
|
||
tafel.hidden = tafel.dataset.tafel !== name;
|
||
}
|
||
|
||
/* EIN REGISTER ANZUTIPPEN MACHT DIE REGIE AUF.
|
||
Seit die Leiste oben steht, kann das Pult zugeklappt sein,
|
||
während man ein Register wählt -- der Reiter wechselte dann,
|
||
und auf dem Bildschirm passierte nichts. Genau die Sorte
|
||
Knopf, die man für kaputt hält.
|
||
|
||
NUR AUF, NIE ZU: Zugemacht wird mit dem Griff am Pult. Ein
|
||
Knopf, der beim zweiten Druck das Gegenteil tut, versteckt
|
||
irgendwann etwas, das jemand gerade lesen wollte. */
|
||
if (vomMenschen) {
|
||
const pult = $('pult');
|
||
if (pult && pult.dataset.auf !== 'ja') {
|
||
pult.dataset.auf = 'ja';
|
||
$('pult-griff')?.setAttribute('aria-expanded', 'true');
|
||
}
|
||
}
|
||
|
||
reiterMarke();
|
||
/* Das gewählte Register in den sichtbaren Bereich rollen -- auf
|
||
dem Handy liegen von sieben Registern nur drei im Bild. */
|
||
const aktiv = knoepfe.find((k) => k.dataset.tafel === name);
|
||
aktiv?.scrollIntoView({ block: 'nearest', inline: 'center', behavior: 'smooth' });
|
||
}
|
||
|
||
/** Die Marke unter das gewählte Register schieben.
|
||
*
|
||
* GEMESSEN UND NICHT GERECHNET: `offsetLeft` und `offsetWidth`
|
||
* gegen den Behälter, der `position: relative` trägt. Damit ist
|
||
* es gleichgültig, wie breit ein Wort ist, wie weit die Leiste
|
||
* gerollt wurde oder welche Schrift gerade geladen ist.
|
||
*
|
||
* Und wenn hier etwas schiefgeht, bleibt die gefüllte Pille als
|
||
* zweite, rechnungsfreie Anzeige stehen. */
|
||
function reiterMarke() {
|
||
const marke = $('reiter-marke');
|
||
if (!marke) return;
|
||
const aktiv = reiterKnoepfe().find((k) => k.getAttribute('aria-selected') === 'true');
|
||
if (!aktiv || !aktiv.offsetWidth) { marke.hidden = true; return; }
|
||
marke.hidden = false;
|
||
/* Breite UND Höhe aus dem gemessenen Knopf. Die Höhe könnte man
|
||
auch über `top`/`bottom` erschlagen -- dann bezöge sie sich
|
||
aber auf die Polsterbox der Leiste und wäre elf Pixel zu
|
||
hoch. Zwei gemessene Zahlen sind ehrlicher als eine
|
||
Annahme über das Polster. */
|
||
marke.style.width = `${aktiv.offsetWidth}px`;
|
||
marke.style.height = `${aktiv.offsetHeight}px`;
|
||
marke.style.transform = `translate(${aktiv.offsetLeft}px, ${aktiv.offsetTop}px)`;
|
||
}
|
||
|
||
/** Was eine Registerleiste versprochen hat, muss sie auch tun.
|
||
*
|
||
* `role="tablist"` sagt Hilfsmitteln zu: Pfeiltasten wandern,
|
||
* Pos1 und Ende springen. Steht das Versprechen im Markup und
|
||
* löst es das Programm nicht ein, sagt der Vorleser etwas an, was
|
||
* nicht stimmt -- schlimmer als gar keine Rolle. */
|
||
function reiterTastatur() {
|
||
const leiste = $('reiter');
|
||
if (!leiste) return;
|
||
leiste.addEventListener('keydown', (e) => {
|
||
const knoepfe = reiterKnoepfe();
|
||
const jetzt = knoepfe.indexOf(document.activeElement);
|
||
if (jetzt < 0) return;
|
||
let ziel = -1;
|
||
if (e.key === 'ArrowRight') ziel = (jetzt + 1) % knoepfe.length;
|
||
else if (e.key === 'ArrowLeft') ziel = (jetzt - 1 + knoepfe.length) % knoepfe.length;
|
||
else if (e.key === 'Home') ziel = 0;
|
||
else if (e.key === 'End') ziel = knoepfe.length - 1;
|
||
if (ziel < 0) return;
|
||
e.preventDefault();
|
||
reiterWechseln(knoepfe[ziel].dataset.tafel);
|
||
knoepfe[ziel].focus();
|
||
});
|
||
}
|
||
|
||
function stummSchalten(schluessel) {
|
||
/* DAS EIGENE MIKRO IST DERSELBE SCHALTER WIE IN DER SENDERLEISTE
|
||
-- ein Zustand, zwei Stellen, die ihn zeigen. Zwei getrennte
|
||
Zustaende waeren zwei, die auseinanderlaufen koennen. */
|
||
if (schluessel === 'mikro') {
|
||
sendenSchalten('mikro', !lage.ich.mikro_aus);
|
||
return;
|
||
}
|
||
const kasten = document.querySelector(`.regler[data-was="${schluessel}"]`);
|
||
if (!kasten) return;
|
||
const jetztStumm = kasten.dataset.stumm !== 'ja';
|
||
kasten.dataset.stumm = jetztStumm ? 'ja' : 'nein';
|
||
tonNachziehen();
|
||
}
|
||
|
||
/** Anordnung, Größe und Ecke gehen denselben Weg.
|
||
*
|
||
* EIN WEG FÜR DAS GANZE BILD: Drei getrennte Aufrufe wären drei
|
||
* Rundrufe, und zwischen ihnen sähen die Zusehenden eine
|
||
* Mischung -- neue Anordnung, alte Ecke.
|
||
*
|
||
* UND DER EIGENE STAND WIRD GLEICH NACHGEZOGEN. Vorher verließ
|
||
* sich `layoutSetzen` allein auf den Rundruf, der auf dem Weg
|
||
* über den Server zurückkommt. Das ging gut, solange nur ein
|
||
* Wert im Spiel war; bei dreien sieht man in der Zwischenzeit
|
||
* die eigene Änderung noch nicht und drückt ein zweites Mal. */
|
||
async function bildSetzen(was) {
|
||
const a = await hole('/workspace/api/reaktion/layout', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(was),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
const d = await a.json();
|
||
lage = {
|
||
...lage,
|
||
layout: d.layout,
|
||
kamera_gross: d.kamera_gross,
|
||
kamera_ecke: d.kamera_ecke,
|
||
};
|
||
zeichnen();
|
||
}
|
||
|
||
function layoutSetzen(schluessel) {
|
||
return bildSetzen({ layout: schluessel });
|
||
}
|
||
|
||
/* ---- Die Videospur bedienen -------------------------------------- */
|
||
function spielPause() {
|
||
if (!spielerBereit) return;
|
||
if (spieler.getPlayerState() === 1) spieler.pauseVideo();
|
||
else spieler.playVideo();
|
||
hostMelden();
|
||
}
|
||
function springen(um) {
|
||
if (!spielerBereit) return;
|
||
spieler.seekTo(Math.max(0, spieler.getCurrentTime() + um), true);
|
||
hostMelden();
|
||
}
|
||
async function weiterSchalten(id) {
|
||
const a = await hole('/workspace/api/reaktion/weiter', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ id: id || 0 }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = { ...(await a.json()) };
|
||
zeichnen();
|
||
}
|
||
|
||
async function anhaengen() {
|
||
const feld = $('l-neu');
|
||
const roh = feld.value.trim();
|
||
if (!roh) { sagFehler('Erst eine YouTube-Adresse einfügen.'); return; }
|
||
$('l-anhaengen').disabled = true;
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/liste', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ video: roh }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = { ...(await a.json()) };
|
||
feld.value = '';
|
||
zeichnen();
|
||
} catch { sagFehler('Das ging gerade nicht.'); }
|
||
finally { $('l-anhaengen').disabled = false; }
|
||
}
|
||
|
||
async function listeRuf(pfad, einstellungen) {
|
||
const a = await hole(pfad, einstellungen);
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = { ...(await a.json()) };
|
||
zeichnen();
|
||
}
|
||
|
||
/* ---- Die Tastatur -------------------------------------------------
|
||
EIN KUERZEL, DAS NIEMAND KENNT, IST KEINS -- deshalb steht die
|
||
Legende unter dem Pult und nicht in einer Hilfe.
|
||
|
||
UND: Wer in einem Feld tippt, tippt. Die Leertaste gehoert dann
|
||
dem Text und nicht dem Video. Ohne diese Abfrage waere das
|
||
Titelfeld unbenutzbar, und zwar auf eine Art, die man sich nicht
|
||
erklaeren kann. */
|
||
function tastaturAnhaengen() {
|
||
document.addEventListener('keydown', (e) => {
|
||
if (!lage || !lage.ich.host) return;
|
||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||
if (e.target && e.target.closest('input, textarea, select, [contenteditable="true"]')) return;
|
||
|
||
const taste = e.key;
|
||
if (taste === ' ' || taste === 'Spacebar') { e.preventDefault(); spielPause(); return; }
|
||
if (taste === 'ArrowLeft') { e.preventDefault(); springen(-10); return; }
|
||
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'); 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;
|
||
|
||
/* Die Laufzeit */
|
||
const uhr = $('pult-uhr');
|
||
if (lage.stand === 'live' && lage.gestartet_am) {
|
||
const seit = Date.parse(lage.gestartet_am);
|
||
uhr.hidden = !Number.isFinite(seit);
|
||
if (!uhr.hidden) $('pult-zeit').textContent = alsZeit((Date.now() - seit) / 1000);
|
||
} else {
|
||
uhr.hidden = true;
|
||
}
|
||
|
||
/* Das Positionsband */
|
||
if (!spielerBereit) return;
|
||
const laeuft = spieler.getPlayerState() === 1;
|
||
$('spur').dataset.laeuft = laeuft ? 'ja' : 'nein';
|
||
$('spur-marke').textContent = laeuft ? 'Läuft' : 'Pause';
|
||
$('v-spiel-bild').innerHTML = laeuft
|
||
? '<path d="M8 5h3v14H8zm5 0h3v14h-3z" />'
|
||
: '<path d="M8 5l11 7-11 7z" />';
|
||
$('v-spiel').title = laeuft ? 'Pause (Leertaste)' : 'Abspielen (Leertaste)';
|
||
|
||
if (bandZieht) return;
|
||
const dauer = spieler.getDuration() || 0;
|
||
const jetzt = spieler.getCurrentTime() || 0;
|
||
$('v-zeit').textContent = `${alsZeit(jetzt)} / ${alsZeit(dauer)}`;
|
||
const band = $('v-band');
|
||
const anteil = dauer ? Math.min(1000, Math.round(jetzt / dauer * 1000)) : 0;
|
||
band.value = String(anteil);
|
||
band.style.setProperty('--fortschritt', (anteil / 10) + '%');
|
||
}
|
||
|
||
function tonNachziehen() {
|
||
/* YouTube */
|
||
if (spielerBereit) {
|
||
const aus = document.querySelector('.regler[data-was="video"]')?.dataset.stumm === 'ja';
|
||
spieler.setVolume(aus ? 0 : staende.video);
|
||
}
|
||
/* Die Gäste: das erste und zweite Kamerafenster, das nicht mir gehört. */
|
||
const fremde = [...document.querySelectorAll('#kameras .kamera')]
|
||
.filter((k) => k.dataset.wer !== String(meineId));
|
||
fremde.forEach((k, i) => {
|
||
const schluessel = i === 0 ? 'gast1' : 'gast2';
|
||
const kasten = document.querySelector(`.regler[data-was="${schluessel}"]`);
|
||
const aus = kasten && kasten.dataset.stumm === 'ja';
|
||
const v = k.querySelector('video');
|
||
if (v) v.volume = aus ? 0 : (staende[schluessel] / 100);
|
||
});
|
||
}
|
||
|
||
/* =================================================================
|
||
DAS PULT FUELLEN -- bei jeder Aenderung
|
||
================================================================= */
|
||
function pultFuellen() {
|
||
const pult = $('pult');
|
||
pult.dataset.stand = lage.stand;
|
||
|
||
/* Der Mikro-Schalter im Pult zeigt denselben Zustand wie der in
|
||
der Senderleiste -- er wird hier nur nachgefuehrt, nicht
|
||
zweitgefuehrt. */
|
||
const mikro = document.querySelector('.regler[data-was="mikro"]');
|
||
if (mikro) {
|
||
mikro.dataset.stumm = lage.ich.mikro_aus ? 'ja' : 'nein';
|
||
const k = mikro.querySelector('.regler__stumm');
|
||
if (k) k.textContent = lage.ich.mikro_aus ? 'an' : 'aus';
|
||
}
|
||
|
||
/* ---- Die Leiste ---- */
|
||
const worte = { zu: 'Geschlossen', vorbereitung: 'Gleich', live: 'Auf Sendung' };
|
||
$('pult-wort').textContent = worte[lage.stand] || '…';
|
||
$('z-dabei').textContent = String(lage.dabei);
|
||
const mitBild = (lage.zuschauer || []).filter((z) => z.sicht).length;
|
||
const sichtFeld = $('z-sicht');
|
||
sichtFeld.textContent = `${mitBild} / ${lage.plaetze}`;
|
||
sichtFeld.dataset.eng = mitBild >= lage.plaetze ? 'voll'
|
||
: (mitBild >= lage.plaetze - 2 ? 'ja' : 'nein');
|
||
$('z-gaeste').textContent = `${lage.gaeste.length} / ${lage.gaeste_max}`;
|
||
|
||
/* ---- Die Videospur ---- */
|
||
const titel = $('spur-titel');
|
||
if (lage.video) {
|
||
titel.textContent = lage.video_titel || lage.video;
|
||
titel.dataset.roh = lage.video_titel ? 'nein' : 'ja';
|
||
titel.title = lage.video_titel
|
||
? lage.video_titel
|
||
: 'YouTube hat den Namen nicht herausgerückt — hier steht die Kennung.';
|
||
} else {
|
||
titel.textContent = 'Noch kein Video eingetragen';
|
||
titel.dataset.roh = 'nein';
|
||
titel.title = '';
|
||
}
|
||
|
||
/* ==== DAS VORSCHAUBILD IN DER LINKEN KACHEL ================
|
||
|
||
Die erste Fassung zeigte dort nur einen Titel -- und wenn
|
||
keiner da war, stand ein grosses schwarzes Loch neben einer
|
||
vollen Spalte. Mit dem Bild ist die Kachel immer gefuellt.
|
||
|
||
EIGENES BILD SCHLAEGT YOUTUBE. Wer eines eintraegt, meint es.
|
||
Laedt es nicht, tritt YouTubes eigenes Vorschaubild ein -- und
|
||
ohne Video der Satz, der sagt, was zu tun ist. */
|
||
const kasten = $('laufbild');
|
||
const vorschau = $('spur-bild');
|
||
if (kasten && vorschau) {
|
||
const quelle = String(lage.vorschau || '').trim()
|
||
|| (lage.video ? 'https://i.ytimg.com/vi/' + lage.video + '/mqdefault.jpg' : '');
|
||
if (quelle) {
|
||
if (vorschau.getAttribute('src') !== quelle) vorschau.setAttribute('src', quelle);
|
||
kasten.dataset.bild = 'ja';
|
||
/* Ein Bild, das 404 antwortet, steht genauso im Dokument wie
|
||
eines, das laedt -- auf dem Bildschirm ist an seiner
|
||
Stelle nichts. Dann lieber der Platzhaltersatz. */
|
||
vorschau.onerror = () => { kasten.dataset.bild = 'nein'; };
|
||
} else {
|
||
vorschau.removeAttribute('src');
|
||
kasten.dataset.bild = 'nein';
|
||
}
|
||
$('laufbild-leer').textContent = lage.video
|
||
? 'Für dieses Video gibt es kein Vorschaubild.'
|
||
: 'Noch kein Video — trag rechts eine YouTube-Adresse ein.';
|
||
}
|
||
for (const id of ['v-spiel', 'v-zurueck', 'v-vor', 'v-band']) {
|
||
$(id).disabled = !lage.video || lage.stand !== 'live';
|
||
}
|
||
$('v-naechstes').disabled = !(lage.liste && lage.liste.length);
|
||
|
||
/* ---- Die Warteschlange ---- */
|
||
listeZeichnen();
|
||
|
||
/* ---- Die Felder ---- */
|
||
if (document.activeElement !== $('p-titel')) $('p-titel').value = lage.titel || '';
|
||
if (document.activeElement !== $('p-video')) $('p-video').value = lage.video || '';
|
||
if (document.activeElement !== $('p-vorschau')) $('p-vorschau').value = lage.vorschau || '';
|
||
if (lage.beginnt_am && document.activeElement !== $('p-beginn')) {
|
||
const d = new Date(lage.beginnt_am);
|
||
if (!Number.isNaN(d.getTime())) {
|
||
const p = (n) => String(n).padStart(2, '0');
|
||
$('p-beginn').value = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`
|
||
+ `T${p(d.getHours())}:${p(d.getMinutes())}`;
|
||
}
|
||
}
|
||
|
||
/* Die Knöpfe sagen, was als Nächstes dran ist -- und was nicht
|
||
geht, ist ausgegraut statt unsichtbar. Ein Knopf, der
|
||
verschwindet, lässt einen suchen; einer, der grau ist,
|
||
erklärt sich. */
|
||
$('p-vorbereiten').disabled = lage.stand === 'vorbereitung';
|
||
$('p-starten').disabled = lage.stand === 'live' || !lage.video;
|
||
$('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.';
|
||
|
||
/* ---- Die Werbung nachziehen ---- */
|
||
if (lage.ich?.host && lage.werbung) {
|
||
const w = lage.werbung;
|
||
for (const k of ($('bandart-reihe')?.children || [])) {
|
||
k.setAttribute('aria-pressed', String(k.dataset.art === (w.art || 'aus')));
|
||
}
|
||
for (const k of ($('bandtempo-reihe')?.children || [])) {
|
||
k.setAttribute('aria-pressed', String(Number(k.dataset.tempo) === (w.tempo || 16)));
|
||
}
|
||
for (const k of ($('eckengroesse-reihe')?.children || [])) {
|
||
k.setAttribute('aria-pressed', String(Number(k.dataset.gross) === (w.ecke_gross || 1)));
|
||
}
|
||
for (const [welches, feld] of [['dogi', 'ecke_dogi'], ['hase', 'ecke_hase']]) {
|
||
const gitter = $(`eckenwahl-${welches}`)?.querySelector('.eckenwahl__gitter');
|
||
for (const k of (gitter?.children || [])) {
|
||
k.setAttribute('aria-pressed', String(k.dataset.platz === (w[feld] || 'aus')));
|
||
}
|
||
}
|
||
/* DAS TEMPO GILT NUR, WENN ETWAS LAEUFT. Ein Knopf, der
|
||
nichts bewirken kann, ist schlimmer als keiner -- man
|
||
drueckt ihn und sucht den Fehler bei sich. */
|
||
const tfeld = $('bandtempo-feld');
|
||
if (tfeld) tfeld.dataset.still = (w.art === 'aus') ? 'ja' : 'nein';
|
||
bandlisteZeichnen();
|
||
}
|
||
|
||
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 KLAPPKNOPF TRAEGT DEN AKTUELLEN WERT. Zugeklappt ist er
|
||
die einzige Auskunft darüber, wie schnell es läuft -- ein
|
||
Knopf, der dazu schweigt, zwingt zum Aufklappen, nur um
|
||
nachzusehen. */
|
||
{
|
||
const t = lage.tempo || 1;
|
||
const k = $('tempo-auf');
|
||
if (k) k.textContent = t === 1 ? '1×' : `${String(t).replace('.', ',')}×`;
|
||
}
|
||
for (const k of $('kamgroesse').children) {
|
||
k.setAttribute('aria-pressed',
|
||
String(Number(k.dataset.gross) === (lage.kamera_gross || 1)));
|
||
}
|
||
/* ==== EIN KNOPF, DER NICHTS TUN KANN, SIEHT AUCH SO AUS ====
|
||
|
||
Die GRÖSSE wirkt überall, wo es Kamerafenster gibt — nur bei
|
||
„Nur Video" gibt es gar keine. Wer dort auf 2× drückt, sieht
|
||
nichts passieren und sucht den Fehler bei sich.
|
||
|
||
Die ECKE wirkt nur bei „Video groß"; in den anderen
|
||
Anordnungen stehen die Fenster mittig oder füllen die Fläche.
|
||
|
||
Beide werden nicht versteckt, sondern grau. Ein Knopf, der
|
||
verschwindet, lässt einen suchen; einer, der grau ist,
|
||
erklärt sich — derselbe Grundsatz wie bei den drei großen
|
||
Knöpfen im Pult. */
|
||
const anordnung = lage.layout || 'kino';
|
||
const kamerasDa = anordnung !== 'nur_video';
|
||
const eckeGilt = anordnung === 'kino';
|
||
for (const k of $('kamgroesse').children) k.disabled = !kamerasDa;
|
||
for (const k of $('kamecke').children) {
|
||
k.setAttribute('aria-pressed', String(k.dataset.ecke === (lage.kamera_ecke || 'ur')));
|
||
k.disabled = !eckeGilt;
|
||
}
|
||
/* EIN SATZ, NICHT DREI. Es gibt immer nur einen Grund
|
||
gleichzeitig, und drei Zeilen untereinander liest mitten in
|
||
einer Sendung niemand. */
|
||
$('kamecke-hinweis').textContent = !kamerasDa
|
||
? 'Bei „Nur Video" sind die Kamerafenster ganz weg — Größe und Ecke '
|
||
+ 'gelten wieder, sobald sie zurückkommen.'
|
||
: eckeGilt
|
||
? 'Unten rechts liegt bei TikTok die Knopfreihe — such dir eine freie Ecke.'
|
||
: 'Die Ecke gilt bei „Video groß" — gerade stehen die Fenster in der Mitte.';
|
||
|
||
/* ---- 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}`;
|
||
const greihe = $('gast-reihe');
|
||
greihe.textContent = '';
|
||
if (!lage.gaeste.length) {
|
||
greihe.append(el('p', 'gast-leer', 'Noch niemand dabei.'));
|
||
}
|
||
for (const g of lage.gaeste) {
|
||
const karte = el('div', 'gast-karte');
|
||
karte.append(el('span', 'gast-karte__platz', 'G' + g.platz));
|
||
karte.append(el('span', null, g.name));
|
||
const stumm = el('button', null, g.stumm ? 'laut' : 'stumm');
|
||
stumm.type = 'button';
|
||
stumm.title = g.stumm ? 'Wieder hörbar machen' : 'Für alle stummschalten';
|
||
stumm.addEventListener('click', async () => {
|
||
const a = await hole(`/workspace/api/reaktion/gast/${g.id}/stumm`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ stumm: !g.stumm }),
|
||
});
|
||
if (!a.ok) melde(await a.json().catch(() => null), 'Das ging nicht.');
|
||
});
|
||
const weg = el('button', null, '×');
|
||
weg.type = 'button';
|
||
weg.title = 'Aus der Sendung nehmen';
|
||
weg.addEventListener('click', async () => {
|
||
const a = await hole('/workspace/api/reaktion/gast/' + g.id, { method: 'DELETE' });
|
||
if (!a.ok) melde(await a.json().catch(() => null), 'Das ging nicht.');
|
||
});
|
||
karte.append(stumm);
|
||
karte.append(weg);
|
||
greihe.append(karte);
|
||
}
|
||
|
||
/* Wen kann ich holen? Nur wer gerade zusieht -- jemanden zu
|
||
holen, der gar nicht da ist, ergibt eine Kachel ohne Bild. */
|
||
const wahl = $('p-wen');
|
||
const vorher = wahl.value;
|
||
wahl.textContent = '';
|
||
const leer = el('option', null, 'Wer gerade dabei ist …');
|
||
leer.value = '';
|
||
wahl.append(leer);
|
||
for (const z of (lage.zuschauer || [])) {
|
||
if (z.id === meineId) continue;
|
||
if (lage.gaeste.some((g) => g.id === z.id)) continue;
|
||
const o = el('option', null, z.name);
|
||
o.value = String(z.id);
|
||
wahl.append(o);
|
||
}
|
||
if (vorher) wahl.value = vorher;
|
||
}
|
||
|
||
/* ---- Die Bühnenquellen --------------------------------------------
|
||
Drei Adressen zum Kopieren. Der Schlüssel darin ist ein
|
||
Geheimnis: Wer ihn hat, sieht das laufende Video und die
|
||
Spendenkarten -- also genau das, was ohnehin im Stream steht,
|
||
aber eben ohne Anmeldung.
|
||
|
||
DESHALB STEHT ER NIE AUSGESCHRIEBEN DA. Die Zeile zeigt die
|
||
Adresse gekürzt; der Knopf legt sie vollständig in die
|
||
Zwischenablage. Ein Schlüssel, der offen auf dem Bildschirm
|
||
steht, ist einen Screenshot davon entfernt, keiner mehr zu
|
||
sein -- und dieser Bildschirm wird gestreamt. */
|
||
let buehneAdressen = null;
|
||
|
||
async function buehneHolen() {
|
||
try {
|
||
const a = await hole('/workspace/api/buehne/adressen');
|
||
if (!a.ok) return;
|
||
buehneAdressen = await a.json();
|
||
buehneZeichnen();
|
||
} catch { /* ohne Adressen ist die Regie vollständig */ }
|
||
}
|
||
|
||
function buehneZeichnen() {
|
||
const kasten = $('quellen');
|
||
if (!kasten || !buehneAdressen) return;
|
||
$('obs-quellen').textContent = buehneAdressen.quellen === 1
|
||
? '1 Quelle verbunden' : `${buehneAdressen.quellen} Quellen verbunden`;
|
||
|
||
const zeilen = [
|
||
['Video', 'Das laufende Video als Browser-Quelle', buehneAdressen.video],
|
||
['Spenden', 'Nur die Karten, durchsichtiger Grund', buehneAdressen.tafel],
|
||
['Mit Gästen', 'Diese Seite ohne Bedienung — als Fenster aufnehmen',
|
||
buehneAdressen.buehnenmodus],
|
||
];
|
||
kasten.textContent = '';
|
||
for (const [name, was, adresse] of zeilen) {
|
||
const zeile = el('div', 'quelle');
|
||
const links = el('div', 'quelle__text');
|
||
links.append(el('span', 'quelle__name', name));
|
||
links.append(el('span', 'quelle__was', was));
|
||
zeile.append(links);
|
||
|
||
const knopf = el('button', 'quelle__kopie', 'Kopieren');
|
||
knopf.type = 'button';
|
||
knopf.addEventListener('click', async () => {
|
||
try {
|
||
await navigator.clipboard.writeText(adresse);
|
||
knopf.textContent = 'Kopiert';
|
||
knopf.dataset.fertig = 'ja';
|
||
setTimeout(() => { knopf.textContent = 'Kopieren'; knopf.dataset.fertig = 'nein'; }, 2200);
|
||
} catch {
|
||
/* Kein Zugriff auf die Zwischenablage -- dann die Adresse
|
||
zeigen, damit sie sich wenigstens markieren lässt. Ein
|
||
Knopf, der nichts tut und nichts sagt, ist das
|
||
Schlimmste von beidem. */
|
||
const feld = document.createElement('input');
|
||
feld.className = 'quelle__feld';
|
||
feld.value = adresse;
|
||
feld.readOnly = true;
|
||
zeile.append(feld);
|
||
feld.select();
|
||
knopf.hidden = true;
|
||
}
|
||
});
|
||
zeile.append(knopf);
|
||
kasten.append(zeile);
|
||
}
|
||
}
|
||
|
||
async function buehneNeu() {
|
||
const ja = window.frageNach
|
||
? await window.frageNach({
|
||
titel: 'Schlüssel neu erzeugen?',
|
||
text: 'Die alten Adressen hören sofort auf zu arbeiten. Du musst '
|
||
+ 'die Quellen in OBS einmal neu eintragen.',
|
||
knopf: 'Neu erzeugen',
|
||
})
|
||
: confirm('Schlüssel neu erzeugen? Die alten Adressen gehen dann nicht mehr.');
|
||
if (!ja) return;
|
||
const a = await hole('/workspace/api/buehne/schluessel', { method: 'POST' });
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
const d = await a.json();
|
||
buehneAdressen = { ...buehneAdressen, ...d };
|
||
buehneZeichnen();
|
||
sagFehler('Neuer Schlüssel. Trag die Quellen in OBS neu ein.');
|
||
}
|
||
|
||
/* ---- Die Spenden im Pult ------------------------------------------
|
||
Drei Dinge: von Hand eintragen (geht immer), die offenen
|
||
Meldungen bestaetigen, und eine Karte noch einmal zeigen. */
|
||
function spendenPultZeichnen() {
|
||
if (!spendenLage || !spendenLage.ich?.darf) return;
|
||
const offen = spendenLage.offen || [];
|
||
const zahl = $('reiter-spenden-zahl');
|
||
if (zahl) {
|
||
zahl.textContent = String(offen.length);
|
||
zahl.dataset.leer = offen.length ? 'nein' : 'ja';
|
||
/* DIE ZAHL AENDERT DIE BREITE DES REGISTERS. Aus „0" wird
|
||
„12" -- der Knopf wird breiter, und die Marke darunter
|
||
stünde falsch, wenn sie nicht nachgezogen wird. */
|
||
reiterMarke();
|
||
}
|
||
$('sp-offen-zahl').textContent = offen.length === 1 ? '1 Meldung' : `${offen.length} Meldungen`;
|
||
|
||
const kasten = $('sp-offen');
|
||
kasten.textContent = '';
|
||
if (!offen.length) {
|
||
kasten.append(el('li', 'spendenliste__leer',
|
||
'Nichts offen. Wer über die Knöpfe spendet und es meldet, landet hier.'));
|
||
}
|
||
for (const k of offen) {
|
||
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 =========================
|
||
|
||
Der Text kommt jetzt von dem, der gibt (Filipe: „es sollen
|
||
personalisierte texte sein von den leuten selbst") — und
|
||
damit steht zum ersten Mal ein fremder Satz kurz davor, im
|
||
Livestream zu erscheinen.
|
||
|
||
Er läuft ohnehin durch diese Bestätigung. Neu ist, dass er
|
||
sich HIER ÄNDERN lässt: Ohne das bliebe nur „ganz
|
||
ablehnen", und dann fiele wegen eines einzigen Wortes eine
|
||
echte Spende unter den Tisch. Ein Feld ist die mildere und
|
||
die schnellere Antwort. */
|
||
const mitte = el('div', 'spendenzeile__mitte');
|
||
const wer = document.createElement('input');
|
||
wer.type = 'text';
|
||
wer.className = 'spendenzeile__feld';
|
||
wer.maxLength = spendenLage.name_max || 40;
|
||
wer.value = k.name || '';
|
||
wer.setAttribute('aria-label', 'Name auf der Karte');
|
||
mitte.append(wer);
|
||
|
||
const text = document.createElement('input');
|
||
text.type = 'text';
|
||
text.className = 'spendenzeile__feld spendenzeile__feld--gruss';
|
||
text.maxLength = spendenLage.gruss_max || 140;
|
||
text.value = k.gruss || '';
|
||
text.placeholder = 'Kein Text dabei';
|
||
text.setAttribute('aria-label', 'Text auf der Karte');
|
||
mitte.append(text);
|
||
zeile.append(mitte);
|
||
|
||
const ja = el('button', 'spendenzeile__ja', 'Stimmt – zeigen');
|
||
ja.type = 'button';
|
||
ja.addEventListener('click', () => spendeEntscheiden(k.id, true, {
|
||
name: wer.value.trim(), gruss: text.value.trim(),
|
||
}));
|
||
const nein = el('button', 'spendenzeile__nein', 'Stimmt nicht');
|
||
nein.type = 'button';
|
||
nein.addEventListener('click', () => spendeEntscheiden(k.id, false));
|
||
zeile.append(ja); zeile.append(nein);
|
||
kasten.append(zeile);
|
||
}
|
||
|
||
const letzte = $('sp-letzte');
|
||
letzte.textContent = '';
|
||
for (const k of (spendenLage.letzte || [])) {
|
||
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'));
|
||
if (k.stufe?.name) mitte.append(el('span', 'spendenzeile__gruss', k.stufe.name));
|
||
zeile.append(mitte);
|
||
const nochmal = el('button', 'spendenzeile__nochmal', 'Nochmal');
|
||
nochmal.type = 'button';
|
||
nochmal.title = 'Die Karte noch einmal zeigen';
|
||
nochmal.addEventListener('click', async () => {
|
||
const a = await hole(`/workspace/api/spenden/${k.id}/nochmal`, { method: 'POST' });
|
||
if (!a.ok) melde(await a.json().catch(() => null), 'Das ging nicht.');
|
||
});
|
||
zeile.append(nochmal);
|
||
letzte.append(zeile);
|
||
}
|
||
if (!(spendenLage.letzte || []).length) {
|
||
letzte.append(el('li', 'spendenliste__leer', 'Noch nichts gezeigt.'));
|
||
}
|
||
|
||
/* ---- Wer wie viele Dogen hat ----
|
||
Nur die Leitung sieht das. Wer nichts hat, steht nicht drin --
|
||
eine Liste mit lauter Nullen ist keine Auskunft, sondern eine
|
||
Personenliste mit einer Spalte daneben. */
|
||
const staende = $('sp-staende');
|
||
staende.textContent = '';
|
||
for (const p of (spendenLage.staende || [])) {
|
||
const zeile = el('li', 'dogenzeile');
|
||
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);
|
||
}
|
||
if (!(spendenLage.staende || []).length) {
|
||
staende.append(el('li', 'spendenliste__leer',
|
||
'Noch niemand hat Dogen. Sie kommen dazu, sobald eine Spende '
|
||
+ 'einer Person zugeordnet ist.'));
|
||
}
|
||
|
||
/* ---- Wem die nächste Handeintragung gutgeschrieben wird ----
|
||
Die Auswahl wird nur neu gebaut, wenn sich die Namen geändert
|
||
haben: `spendenPultZeichnen()` läuft bei jeder Meldung, und
|
||
wer gerade eine Person ausgewählt hat, verlöre sie sonst
|
||
mitten im Eintragen. */
|
||
const wem = $('sp-wem');
|
||
const namen = (spendenLage.personen || []).map((p) => `${p.id}:${p.name}`).join('|');
|
||
if (wem.dataset.stand !== namen) {
|
||
wem.dataset.stand = namen;
|
||
const vorher = wem.value;
|
||
wem.textContent = '';
|
||
const leer = document.createElement('option');
|
||
leer.value = '';
|
||
leer.textContent = 'Niemandem';
|
||
wem.append(leer);
|
||
for (const p of (spendenLage.personen || [])) {
|
||
const o = document.createElement('option');
|
||
o.value = String(p.id);
|
||
o.textContent = p.name;
|
||
wem.append(o);
|
||
}
|
||
if (vorher) wem.value = vorher;
|
||
}
|
||
|
||
zeichenZeichnen();
|
||
|
||
$('sp-hinweis').textContent = spendenLage.paypal
|
||
? 'PayPal meldet uns nichts von selbst — die Karte läuft, wenn du sie '
|
||
+ 'einträgst oder eine Meldung bestätigst.'
|
||
: 'Auf der Unterstützen-Seite ist kein PayPal-Weg hinterlegt. '
|
||
+ 'Ohne ihn gibt es hier keine Spendenknöpfe.';
|
||
}
|
||
|
||
async function spendeEntscheiden(id, ja, felder) {
|
||
/* BEIDE WEGE STEHEN AUSGESCHRIEBEN DA. Aus einer Verzweigung
|
||
zusammengesetzt liessen sie sich nicht nachpruefen -- und ein
|
||
Tippfehler im selteneren Zweig („ablehnen") faellt erst auf,
|
||
wenn er mitten in einer Sendung gebraucht wird. */
|
||
const weg = ja
|
||
? `/workspace/api/spenden/${id}/bestaetigen`
|
||
: `/workspace/api/spenden/${id}/ablehnen`;
|
||
const a = await hole(weg, felder
|
||
? {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(felder),
|
||
}
|
||
: { method: 'POST' });
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
spendenHolen();
|
||
}
|
||
|
||
async function spendeEintragen() {
|
||
const mille = dogenInMille($('sp-betrag').value);
|
||
if (!mille) { sagFehler('Erst eine Zahl in Dogen eintragen.'); return; }
|
||
const name = $('sp-name').value.trim();
|
||
if (!name) { sagFehler('Wer hat gegeben? Der Name steht auf der Karte.'); return; }
|
||
const wem = $('sp-wem').value;
|
||
const a = await hole('/workspace/api/spenden', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
dogen_mille: mille, name, gruss: $('sp-gruss').value.trim(),
|
||
/* Nur mitschicken, wenn jemand ausgewählt ist. Eine leere
|
||
Kennung wäre eine Angabe über eine Person, die niemand
|
||
gemacht hat. */
|
||
...(wem ? { person_id: Number(wem) } : {}),
|
||
}),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
$('sp-betrag').value = ''; $('sp-name').value = ''; $('sp-gruss').value = '';
|
||
$('sp-wem').value = '';
|
||
spendenHolen();
|
||
}
|
||
|
||
function listeZeichnen() {
|
||
const liste = lage.liste || [];
|
||
const zahl = $('reiter-liste-zahl');
|
||
zahl.textContent = String(liste.length);
|
||
zahl.dataset.leer = liste.length ? 'nein' : 'ja';
|
||
/* Siehe oben: eine breitere Zahl verschiebt die Marke. */
|
||
reiterMarke();
|
||
|
||
const kasten = $('warteliste');
|
||
kasten.textContent = '';
|
||
if (!liste.length) {
|
||
const leer = el('li');
|
||
leer.append(el('p', 'warte-leer',
|
||
'Nichts vorbereitet. Häng oben eine YouTube-Adresse an — dann '
|
||
+ 'reicht im Live ein Druck auf „Nächstes".'));
|
||
kasten.append(leer);
|
||
return;
|
||
}
|
||
liste.forEach((z, i) => {
|
||
const zeile = el('li', 'warte-zeile');
|
||
zeile.append(el('span', 'warte-zeile__nr', String(i + 1)));
|
||
|
||
const bild = document.createElement('img');
|
||
bild.className = 'warte-zeile__bild';
|
||
bild.src = `https://i.ytimg.com/vi/${z.video}/mqdefault.jpg`;
|
||
bild.alt = '';
|
||
bild.loading = 'lazy';
|
||
bild.decoding = 'async';
|
||
zeile.append(bild);
|
||
|
||
const name = el('span', 'warte-zeile__titel', z.titel || z.video);
|
||
name.dataset.roh = z.titel ? 'nein' : 'ja';
|
||
name.title = z.titel || ('Kennung ' + z.video);
|
||
zeile.append(name);
|
||
|
||
const knoepfe = el('div', 'warte-zeile__knoepfe');
|
||
const jetzt = el('button', null, 'Jetzt');
|
||
jetzt.type = 'button';
|
||
jetzt.dataset.was = 'jetzt';
|
||
jetzt.title = 'Sofort dieses Video spielen';
|
||
jetzt.addEventListener('click', () => weiterSchalten(z.id));
|
||
|
||
const hoch = el('button', null, '↑');
|
||
hoch.type = 'button';
|
||
hoch.title = 'Nach oben';
|
||
hoch.disabled = i === 0;
|
||
hoch.addEventListener('click', () => listeRuf(
|
||
`/workspace/api/reaktion/liste/${z.id}/schieben`,
|
||
{
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ richtung: 'hoch' }),
|
||
}));
|
||
|
||
const runter = el('button', null, '↓');
|
||
runter.type = 'button';
|
||
runter.title = 'Nach unten';
|
||
runter.disabled = i === liste.length - 1;
|
||
runter.addEventListener('click', () => listeRuf(
|
||
`/workspace/api/reaktion/liste/${z.id}/schieben`,
|
||
{
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ richtung: 'runter' }),
|
||
}));
|
||
|
||
const weg = el('button', null, '×');
|
||
weg.type = 'button';
|
||
weg.title = 'Aus der Warteschlange nehmen';
|
||
weg.addEventListener('click', () => listeRuf(
|
||
'/workspace/api/reaktion/liste/' + z.id, { method: 'DELETE' }));
|
||
|
||
knoepfe.append(jetzt, hoch, runter, weg);
|
||
zeile.append(knoepfe);
|
||
kasten.append(zeile);
|
||
});
|
||
}
|
||
|
||
async function einstellen() {
|
||
try {
|
||
const beginn = $('p-beginn').value
|
||
? new Date($('p-beginn').value).toISOString() : null;
|
||
const a = await hole('/workspace/api/reaktion', {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
titel: $('p-titel').value,
|
||
video: $('p-video').value,
|
||
vorschau: $('p-vorschau').value,
|
||
beginnt_am: beginn,
|
||
}),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = await a.json();
|
||
zeichnen();
|
||
sagFehler('Übernommen.');
|
||
} catch { sagFehler('Das ging gerade nicht.'); }
|
||
}
|
||
|
||
async function standSetzen(stand) {
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/stand', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ stand }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = await a.json();
|
||
if (stand === 'zu') { draehteWeg(); }
|
||
zeichnen();
|
||
anschliessen();
|
||
} catch { sagFehler('Das ging gerade nicht.'); }
|
||
}
|
||
|
||
async function gastHolen() {
|
||
const id = Number($('p-wen').value);
|
||
if (!id) { sagFehler('Erst jemanden auswählen.'); return; }
|
||
const a = await hole('/workspace/api/reaktion/gast', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ person_id: id }),
|
||
});
|
||
if (!a.ok) melde(await a.json().catch(() => null), 'Das ging nicht.');
|
||
}
|
||
|
||
/* =================================================================
|
||
DER STROM — was der Server von sich aus schickt
|
||
================================================================= */
|
||
let strom = null;
|
||
let stromOffen = false;
|
||
function stromAuf() {
|
||
if (strom) return;
|
||
strom = new EventSource('/workspace/api/chat/strom');
|
||
strom.addEventListener('open', () => { stromOffen = true; });
|
||
strom.addEventListener('reaktion', (e) => {
|
||
try {
|
||
const d = JSON.parse(e.data);
|
||
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') {
|
||
/* DER RUNDRUF BRINGT DAS GANZE BILD, nicht nur die
|
||
Anordnung. Vorher stand hier eine Zeile für `layout`;
|
||
als Größe und Ecke dazukamen, hätten die Zusehenden die
|
||
neue Anordnung mit der alten Ecke gesehen -- bis zum
|
||
nächsten Mal, wenn zufällig etwas anderes den ganzen
|
||
Stand nachzieht. */
|
||
if (lage) {
|
||
lage = {
|
||
...lage,
|
||
layout: d.layout,
|
||
kamera_gross: d.kamera_gross ?? lage.kamera_gross,
|
||
kamera_ecke: d.kamera_ecke ?? lage.kamera_ecke,
|
||
};
|
||
zeichnen();
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (d.was === 'werbung') {
|
||
/* DER RUNDRUF BRINGT DIE GANZE EINBLENDUNG -- Art, Tempo,
|
||
beide Ecken UND die Botschaften. Nur die Kennungen zu
|
||
schicken waere kuerzer und falsch: Wer eine Botschaft
|
||
aendert, saehe sie erst beim naechsten Neuladen, und ein
|
||
Zuschauer laedt eine Stunde lang nicht neu.
|
||
|
||
`banner_alle` ist NICHT dabei -- die Verwaltungsliste
|
||
samt abgeschalteten Entwuerfen gehoert nur der Regie.
|
||
Wer sie braucht, holt den Stand. */
|
||
if (lage) {
|
||
lage = { ...lage, werbung: {
|
||
art: d.art, tempo: d.tempo, ecke_dogi: d.ecke_dogi,
|
||
ecke_hase: d.ecke_hase, ecke_gross: d.ecke_gross, band: d.band,
|
||
} };
|
||
werbungZeichnen();
|
||
if (lage.ich?.host) standHolen();
|
||
}
|
||
return;
|
||
}
|
||
|
||
/* ==== MODERATION ==========================================
|
||
|
||
Drei Meldungen ohne Stand im Gepäck, und alle drei aus
|
||
demselben Grund: Was sie betrifft, steht NICHT im Rundruf.
|
||
`meldungen` und `massnahmen` sind aus `oeffentlich()`
|
||
ausgenommen, weil dort der gemeldete Text und der Name des
|
||
Melders stehen. Wer sie sehen darf, holt sie sich selbst. */
|
||
if (d.was === 'massnahme') { standHolen(); return; }
|
||
if (d.was === 'meldung') {
|
||
if (lage && lage.ich.moderiert) standHolen();
|
||
return;
|
||
}
|
||
if (d.was === 'moderation') {
|
||
if (lage && lage.ich.moderiert) standHolen();
|
||
/* Für alle anderen ist trotzdem etwas passiert: Wer gerade
|
||
stumm geschaltet wurde, erfährt es über den eigenen
|
||
Stand, und wer rausgenommen wurde, muss es sofort sehen. */
|
||
return;
|
||
}
|
||
if (d.lage) {
|
||
/* Der Rundruf enthält keine Namensliste und kein „ich" --
|
||
beides gehört nur dem Empfänger. Was hier ankommt, wird
|
||
daher ÜBER den eigenen Stand gelegt, nicht an seine
|
||
Stelle gesetzt. */
|
||
/* `ich`, `zuschauer` und `liste` stehen NICHT im Rundruf --
|
||
sie gehen nur an den, der sie sehen darf (siehe
|
||
`oeffentlich()` im Server). Würden sie hier nicht
|
||
hinübergerettet, verlöre die Regie bei jeder fremden
|
||
Änderung ihre Warteschlange und ihre Namensliste. */
|
||
lage = {
|
||
...lage, ...d.lage,
|
||
ich: lage.ich, zuschauer: lage.zuschauer, liste: lage.liste,
|
||
};
|
||
zeichnen();
|
||
anschliessen();
|
||
/* Die eigene Rolle kann sich geändert haben (dazugeholt oder
|
||
entlassen). Das steht nur im eigenen Stand. */
|
||
if (d.was === 'du_bist_gast' || d.was === 'du_bist_kein_gast') standHolen();
|
||
if (d.was === 'dabei' || d.was === 'weg') { if (lage.ich.host) standHolen(); }
|
||
/* Hat die andere Regie etwas an der Warteschlange geändert,
|
||
muss ich sie neu holen -- im Rundruf steht sie nicht. */
|
||
if (d.was === 'liste' && lage.ich.host) standHolen();
|
||
}
|
||
} catch { /* eine kaputte Meldung darf die Seite nicht kippen */ }
|
||
});
|
||
strom.addEventListener('reaktion_chat', (e) => {
|
||
try {
|
||
const d = JSON.parse(e.data);
|
||
if (d.was === 'neu') chatAnhaengen(d.beitrag);
|
||
if (d.was === 'weg') {
|
||
const w = $('chat-liste').querySelector(`.beitrag[data-id="${d.id}"]`);
|
||
if (w) w.remove();
|
||
}
|
||
} catch { /* siehe oben */ }
|
||
});
|
||
/* ==== DIE SPENDENKARTEN ========================================
|
||
|
||
Der Strom bringt zwei Sorten: „zeigen" laesst die Karte
|
||
laufen -- bei ALLEN, die zusehen --, „offen" sagt der Leitung,
|
||
dass eine Meldung wartet. */
|
||
strom.addEventListener('spende', (e) => {
|
||
try {
|
||
const d = JSON.parse(e.data);
|
||
if (d.was === 'zeigen' && window.Spendenkarte) {
|
||
window.Spendenkarte.zeigen($('spendentafel'), d.karte);
|
||
if (lage && lage.ich.host) spendenHolen();
|
||
}
|
||
if (d.was === 'offen') spendenHolen();
|
||
/* Ein gewechselter Muenzsatz gilt fuer alle -- auch fuer
|
||
die, die gerade keine Spende sehen. */
|
||
if (d.was === 'zeichen') spendenHolen();
|
||
} catch { /* eine kaputte Meldung darf den Strom nicht reissen */ }
|
||
});
|
||
|
||
/* MEIN EIGENER DOGEN-STAND. Er kommt als eigene Meldung und nur
|
||
an mich -- eine Zahl, die niemanden sonst etwas angeht. */
|
||
strom.addEventListener('dogen', (e) => {
|
||
try {
|
||
const d = JSON.parse(e.data);
|
||
if (!spendenLage) return;
|
||
spendenLage.ich = { ...(spendenLage.ich || {}), dogen_mille: d.mille };
|
||
standZeigen();
|
||
} catch { /* eine kaputte Meldung darf den Strom nicht reissen */ }
|
||
});
|
||
|
||
strom.addEventListener('reaktion_signal', (e) => {
|
||
try {
|
||
const d = JSON.parse(e.data);
|
||
signalEmpfangen(d.von, d.daten);
|
||
} catch { /* siehe oben */ }
|
||
});
|
||
}
|
||
|
||
/* =================================================================
|
||
DER TAKT — ich bin noch da
|
||
================================================================= */
|
||
let dabeiUhr = null;
|
||
let draehteUhr = null;
|
||
|
||
/** Wartet, bis der Ereignisstrom offen ist -- höchstens drei
|
||
* Sekunden.
|
||
*
|
||
* ERST ZUHÖREN, DANN BESCHEID SAGEN: Wer sich mit `/dabei`
|
||
* anmeldet, bevor sein Strom steht, bekommt das Angebot des Hosts
|
||
* nicht -- der schickt es nämlich sofort, sobald er von ihm
|
||
* erfährt. Gemessen: genau so blieb jedes Kamerafenster schwarz.
|
||
*
|
||
* DREI SEKUNDEN UND DANN TROTZDEM WEITER. Ein Strom, der nicht
|
||
* aufgeht, darf die Seite nicht anhalten -- Chat und Video laufen
|
||
* auch ohne ihn, und die Rücknahme oben heilt den Rest. */
|
||
async function stromAbwarten(frist = 3000) {
|
||
const bis = Date.now() + frist;
|
||
while (!stromOffen && Date.now() < bis) {
|
||
await new Promise((r) => setTimeout(r, 80));
|
||
}
|
||
return stromOffen;
|
||
}
|
||
|
||
async function anschliessen() {
|
||
clearInterval(dabeiUhr);
|
||
if (!lage || lage.stand === 'zu') {
|
||
clearInterval(draehteUhr);
|
||
draehteWeg();
|
||
return;
|
||
}
|
||
await stromAbwarten();
|
||
|
||
const melden = async () => {
|
||
try {
|
||
const a = await hole('/workspace/api/reaktion/dabei', { method: 'POST' });
|
||
if (a.ok) {
|
||
const neu = await a.json();
|
||
lage = neu;
|
||
zeichnen();
|
||
draehteNachziehen();
|
||
return;
|
||
}
|
||
/* HINAUSGENOMMEN ODER GESPERRT. Ohne diesen Zweig läuft das
|
||
Video weiter, der Saal sieht normal aus, und nur die
|
||
Anwesenheit schlägt still fehl -- die Person wäre
|
||
„rausgenommen" und würde davon nichts merken. Das ist
|
||
dieselbe Sorte Fehler wie ein stummes Eingabefeld: Es sieht
|
||
aus wie ein Defekt, nicht wie eine Entscheidung. */
|
||
if (a.status === 403) {
|
||
const wort = (await a.json().catch(() => null))?.fehler;
|
||
if (wort === 'aus_der_sendung' || wort === 'treff_massnahme') rausgenommen(wort);
|
||
}
|
||
} catch { /* der nächste Takt versucht es wieder */ }
|
||
};
|
||
melden();
|
||
dabeiUhr = setInterval(melden, 30_000);
|
||
|
||
/* EIN EIGENER, SCHNELLER TAKT FUER DIE VERBINDUNGEN.
|
||
|
||
Die Anwesenheit reicht alle 30 Sekunden -- eine fehlende
|
||
Verbindung nicht. Wer 30 Sekunden auf ein schwarzes Fenster
|
||
schaut, glaubt, es sei kaputt. Dieser Takt kostet nichts,
|
||
solange alles steht: `draehteNachziehen` schickt nur dann
|
||
etwas, wenn wirklich jemand fehlt. */
|
||
clearInterval(draehteUhr);
|
||
draehteUhr = setInterval(draehteNachziehen, 2500);
|
||
|
||
if (lage.stand === 'live') {
|
||
apiLaden();
|
||
if (binSender) kameraHolen();
|
||
}
|
||
}
|
||
|
||
/* =================================================================
|
||
PAYPAL
|
||
|
||
Der Weg kommt aus der Unterstützen-Seite -- derselbe Eintrag,
|
||
dieselbe Pflege, eine Wahrheit. Ist dort nichts hinterlegt oder
|
||
ist er auf unsichtbar gestellt, erscheint hier kein Knopf. Das
|
||
ist Absicht: Eine geratene Adresse ist an dieser Stelle die
|
||
gefährlichste aller Abkürzungen.
|
||
================================================================= */
|
||
let spendenLage = null;
|
||
let gemeldeterBetrag = 0;
|
||
|
||
/* =================================================================
|
||
DIE STUFENLEITER
|
||
|
||
Filipe: „mach paar fertige und so dass ich auch hochladen kann.
|
||
auch so dass ich das anders gestalten kann oder die größe
|
||
verändern kann. ... auch spezielle sachen bei speziellen spenden."
|
||
|
||
ALLES AUF EINMAL SPEICHERN UND NICHT ZEILE FÜR ZEILE. Eine
|
||
Stufenleiter ist keine Liste unabhängiger Zeilen — sie muss als
|
||
GANZES stimmen: aufsteigende Grenzen, keine zwei mit demselben
|
||
Betrag, mindestens eine. Wer einzeln speichert, geht durch
|
||
Zwischenzustände, in denen sie das nicht tut, und mitten in einer
|
||
Sendung fiele dann eine Spende in die falsche Stufe.
|
||
|
||
Das Bild ist die Ausnahme: Es wird sofort hochgeladen. Eine
|
||
Datei in einem Formular zwischenzuhalten, bis jemand
|
||
„Übernehmen" drückt, heißt, sie bei jedem Versehen wieder zu
|
||
verlieren. */
|
||
let stufen = null;
|
||
|
||
function stufenZeichnen() {
|
||
const kasten = $('stufen');
|
||
if (!kasten || !stufen) return;
|
||
const g = stufen.gestaltung;
|
||
kasten.textContent = '';
|
||
|
||
stufen.liste.forEach((st, i) => {
|
||
const zeile = el('div', 'stufe-zeile');
|
||
zeile.dataset.platz = String(i);
|
||
|
||
const feld = (wort, knoten) => {
|
||
const l = el('label', 'stufe-feld');
|
||
l.append(el('span', null, wort));
|
||
l.append(knoten);
|
||
return l;
|
||
};
|
||
const eingabe = (art, wert, wie) => {
|
||
const e = document.createElement('input');
|
||
e.type = art;
|
||
e.value = wert;
|
||
Object.assign(e, wie || {});
|
||
e.addEventListener('input', () => { stufenGeaendert(); });
|
||
return e;
|
||
};
|
||
|
||
/* Die Grenze steht in DOGEN — im Feld wie in der Leitung.
|
||
Diese Seite kennt keinen anderen Wert mehr. */
|
||
/* ==== 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' })));
|
||
|
||
const wahl = document.createElement('select');
|
||
wahl.className = 'stufe-vorlage';
|
||
for (const v of g.vorlagen) {
|
||
const o = document.createElement('option');
|
||
o.value = v;
|
||
o.textContent = v.charAt(0).toUpperCase() + v.slice(1);
|
||
wahl.append(o);
|
||
}
|
||
wahl.value = st.vorlage;
|
||
wahl.addEventListener('change', stufenGeaendert);
|
||
zeile.append(feld('Zeichen', wahl));
|
||
|
||
zeile.append(feld('Farbe', eingabe('color', st.farbe, { className: 'stufe-farbe' })));
|
||
zeile.append(feld('Sekunden', eingabe('number', String(Math.round(st.dauer_ms / 1000)), {
|
||
min: String(Math.round(g.dauer_min / 1000)),
|
||
max: String(Math.round(g.dauer_max / 1000)),
|
||
step: '1', className: 'stufe-dauer',
|
||
})));
|
||
zeile.append(feld('Größe', eingabe('number', String(st.groesse), {
|
||
min: String(g.groesse_min), max: String(g.groesse_max),
|
||
step: '0.05', className: 'stufe-groesse',
|
||
})));
|
||
|
||
/* ---- Das eigene Bild ---- */
|
||
const bildTeil = el('div', 'stufe-bild');
|
||
if (st.bild) {
|
||
const b = document.createElement('img');
|
||
b.src = st.bild;
|
||
b.alt = '';
|
||
bildTeil.append(b);
|
||
}
|
||
const hoch = el('label', 'stufe-tun', st.bild ? 'Anderes Bild' : 'Bild hochladen');
|
||
const wahlfeld = document.createElement('input');
|
||
wahlfeld.type = 'file';
|
||
wahlfeld.accept = 'image/jpeg,image/png,image/webp';
|
||
wahlfeld.hidden = true;
|
||
wahlfeld.addEventListener('change', () => bildHoch(st, wahlfeld));
|
||
hoch.append(wahlfeld);
|
||
/* NUR WER SCHON GESPEICHERT IST, KANN EIN BILD BEKOMMEN. Eine
|
||
frische Zeile hat noch keine Kennung, an der es hängen
|
||
könnte -- der Knopf sagt das, statt ins Leere zu greifen. */
|
||
if (!st.id) {
|
||
hoch.classList.add('stufe-tun--aus');
|
||
hoch.textContent = 'Erst übernehmen';
|
||
wahlfeld.disabled = true;
|
||
}
|
||
bildTeil.append(hoch);
|
||
if (st.bild) {
|
||
const weg = el('button', 'stufe-tun stufe-tun--weg', 'Bild weg');
|
||
weg.type = 'button';
|
||
weg.addEventListener('click', () => bildWeg(st));
|
||
bildTeil.append(weg);
|
||
}
|
||
zeile.append(bildTeil);
|
||
|
||
const probe = el('button', 'stufe-tun', 'Ausprobieren');
|
||
probe.type = 'button';
|
||
probe.title = 'Zeigt dir eine Karte — es wird keine Spende daraus';
|
||
probe.addEventListener('click', () => stufeProbe(st));
|
||
zeile.append(probe);
|
||
|
||
const weg = el('button', 'stufe-tun stufe-tun--weg', 'Stufe weg');
|
||
weg.type = 'button';
|
||
weg.addEventListener('click', () => { stufen.liste.splice(i, 1); stufenZeichnen(); stufenGeaendert(); });
|
||
zeile.append(weg);
|
||
|
||
kasten.append(zeile);
|
||
});
|
||
|
||
$('stufe-neu').disabled = stufen.liste.length >= stufen.gestaltung.stufen_max;
|
||
}
|
||
|
||
function stufenGeaendert() {
|
||
const st = $('stufen-stand');
|
||
if (st) { st.textContent = 'Noch nicht übernommen'; st.dataset.offen = 'ja'; }
|
||
}
|
||
|
||
function stufeDazu() {
|
||
if (!stufen || stufen.liste.length >= stufen.gestaltung.stufen_max) return;
|
||
const hoechste = stufen.liste.reduce((a, b) => Math.max(a, b.ab_mille), 0);
|
||
stufen.liste.push({
|
||
id: 0, ab_mille: hoechste ? hoechste * 2 : 100, name: 'Neue Stufe',
|
||
vorlage: 'stern', bild: '', farbe: '#8ec9ff', dauer_ms: 7000, groesse: 1,
|
||
});
|
||
stufenZeichnen();
|
||
stufenGeaendert();
|
||
}
|
||
|
||
/** Was in den Feldern steht, zurück in Zahlen. */
|
||
function stufenAusFeldern() {
|
||
return [...$('stufen').children].map((zeile, i) => ({
|
||
id: stufen.liste[i]?.id || 0,
|
||
ab_mille: dogenInMille(zeile.querySelector('.stufe-ab').value),
|
||
name: zeile.querySelector('.stufe-name').value.trim(),
|
||
vorlage: zeile.querySelector('.stufe-vorlage').value,
|
||
farbe: zeile.querySelector('.stufe-farbe').value,
|
||
dauer_ms: Math.round(Number(zeile.querySelector('.stufe-dauer').value) * 1000),
|
||
groesse: Number(zeile.querySelector('.stufe-groesse').value),
|
||
}));
|
||
}
|
||
|
||
async function stufenSichern() {
|
||
const liste = stufenAusFeldern();
|
||
const a = await hole('/workspace/api/spenden/stufen', {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ stufen: liste }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
const d = await a.json();
|
||
stufen.liste = d.stufen;
|
||
stufenZeichnen();
|
||
const st = $('stufen-stand');
|
||
st.textContent = 'Übernommen';
|
||
st.dataset.offen = 'nein';
|
||
}
|
||
|
||
async function bildHoch(stufe, feld) {
|
||
const datei = feld.files && feld.files[0];
|
||
if (!datei) return;
|
||
feld.value = '';
|
||
const a = await hole(`/workspace/api/spenden/stufe/${stufe.id}/bild`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': datei.type || 'application/octet-stream' },
|
||
body: datei,
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das Bild ging nicht.'); return; }
|
||
const d = await a.json();
|
||
stufen.liste = d.stufen;
|
||
stufenZeichnen();
|
||
}
|
||
|
||
async function bildWeg(stufe) {
|
||
const a = await hole(`/workspace/api/spenden/stufe/${stufe.id}/bild`, { method: 'DELETE' });
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
const d = await a.json();
|
||
stufen.liste = d.stufen;
|
||
stufenZeichnen();
|
||
}
|
||
|
||
/** Einmal ansehen -- ohne dass eine Spende daraus wird.
|
||
*
|
||
* DER NAHELIEGENDE WEG WÄRE FALSCH GEWESEN: eine Spende von Hand
|
||
* eintragen und danach löschen. In ein laufendes System kommen
|
||
* keine Testdaten, und „gelöscht" heißt bei Geld nicht „war nie
|
||
* da" -- der Eintrag stünde im Verlauf und in der Aufbewahrung. */
|
||
async function stufeProbe(stufe) {
|
||
const a = await hole('/workspace/api/spenden/probe', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ dogen_mille: stufe.ab_mille }),
|
||
});
|
||
if (!a.ok) melde(await a.json().catch(() => null), 'Das ging nicht.');
|
||
}
|
||
|
||
/* ==== DIE DREI MÜNZSÄTZE =========================================
|
||
|
||
Filipe: „alle drei varianten will ich drauf so dass ich sie
|
||
aussuchen kann wie ich will."
|
||
|
||
Jeder Satz steht mit seinen DREI Münzen da, von links nach
|
||
rechts aufsteigend. Ein Satz, der nur mit einer Münze
|
||
vorgestellt wird, sagt nichts über den Unterschied zwischen
|
||
niedrig und hoch — und genau der ist hier die Aussage. */
|
||
function zeichenZeichnen() {
|
||
const kasten = $('muenzwahl');
|
||
if (!kasten || !spendenLage) return;
|
||
const jetzt = spendenLage.zeichen?.satz || '';
|
||
kasten.textContent = '';
|
||
for (const satz of (spendenLage.saetze || [])) {
|
||
const k = el('button', 'muenzsatz');
|
||
k.type = 'button';
|
||
k.dataset.satz = satz.schluessel;
|
||
k.setAttribute('aria-pressed', String(satz.schluessel === jetzt));
|
||
|
||
const reihe = el('div', 'muenzsatz__reihe');
|
||
for (const stufe of ['niedrig', 'mittel', 'hoch']) {
|
||
const b = document.createElement('img');
|
||
b.className = 'muenzsatz__bild';
|
||
b.src = satz.bilder?.[stufe] || '';
|
||
b.alt = '';
|
||
/* Erst laden, wenn das Register „Gestaltung" offen ist. Neun
|
||
Münzen beim Seitenaufbau wären knapp ein halbes Megabyte
|
||
für etwas, das die meisten nie ansehen. */
|
||
b.loading = 'lazy';
|
||
reihe.append(b);
|
||
}
|
||
k.append(reihe);
|
||
|
||
const text = el('div', 'muenzsatz__text');
|
||
text.append(el('strong', 'muenzsatz__name', satz.name));
|
||
text.append(el('span', 'muenzsatz__wort', satz.wort));
|
||
k.append(text);
|
||
|
||
k.addEventListener('click', () => satzSetzen(satz.schluessel));
|
||
kasten.append(k);
|
||
}
|
||
$('zeichen-weg').hidden = !spendenLage.zeichen?.eigen;
|
||
$('zeichen-hoch').firstChild.textContent = spendenLage.zeichen?.eigen
|
||
? 'Anderes eigenes Zeichen ' : 'Eigenes Zeichen hochladen ';
|
||
}
|
||
|
||
async function satzSetzen(satz) {
|
||
const a = await hole('/workspace/api/spenden/zeichen/satz', {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ satz }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
/* FRISCH HOLEN. Die Münze steht an sechs Stellen gleichzeitig --
|
||
auf den Karten, in beiden Listen, an den Knöpfen, beim eigenen
|
||
Stand und in dieser Auswahl. Sie einzeln nachzuziehen wäre die
|
||
Gelegenheit, eine zu vergessen. */
|
||
spendenHolen();
|
||
}
|
||
|
||
async function zeichenHoch(feld) {
|
||
const datei = feld.files && feld.files[0];
|
||
if (!datei) return;
|
||
feld.value = '';
|
||
const a = await hole('/workspace/api/spenden/zeichen', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': datei.type || 'application/octet-stream' },
|
||
body: datei,
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das Bild ging nicht.'); return; }
|
||
/* FRISCH HOLEN UND NICHT NUR HIER EINSETZEN. Das Zeichen steht an
|
||
fünf Stellen gleichzeitig — auf den Karten, in beiden Listen,
|
||
an den Knöpfen und beim eigenen Stand. Sie alle einzeln
|
||
nachzuziehen wäre die Gelegenheit, eine zu vergessen. */
|
||
spendenHolen();
|
||
}
|
||
|
||
async function zeichenWeg() {
|
||
const a = await hole('/workspace/api/spenden/zeichen', { method: 'DELETE' });
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
spendenHolen();
|
||
}
|
||
|
||
async function spendenHolen() {
|
||
try {
|
||
const a = await hole('/workspace/api/spenden');
|
||
if (!a.ok) return;
|
||
spendenLage = await a.json();
|
||
gebenZeichnen();
|
||
standZeigen();
|
||
if (lage && lage.ich.host) spendenPultZeichnen();
|
||
/* DIE STUFENLEITER NUR BEIM ERSTEN MAL AUS DER LEITUNG NEHMEN.
|
||
Wer gerade an den Feldern tippt und dabei eine Spende
|
||
hereinbekommt, verlöre sonst mitten im Satz, was er
|
||
eingetragen hat -- `spendenHolen()` läuft bei jeder
|
||
Meldung. */
|
||
if (lage && lage.ich.host && spendenLage.gestaltung && !stufen) {
|
||
stufen = { liste: spendenLage.stufen, gestaltung: spendenLage.gestaltung };
|
||
stufenZeichnen();
|
||
}
|
||
} catch { /* ohne Feld ist die Seite vollständig */ }
|
||
}
|
||
|
||
/** Vier Beträge, ein freier Weg — und danach EINE Frage.
|
||
*
|
||
* Mehr können wir von hier aus nicht wissen: PayPal sagt uns
|
||
* nichts, solange kein Webhook eingerichtet ist. So zu tun, als
|
||
* wüssten wir es, wäre gelogen — also fragt das Feld, und die
|
||
* Antwort wartet im Pult auf eine Bestätigung. */
|
||
function gebenZeichnen() {
|
||
const kasten = $('geben');
|
||
if (!kasten || !spendenLage) return;
|
||
if (!spendenLage.paypal) { kasten.hidden = true; return; }
|
||
kasten.hidden = false;
|
||
$('geben-titel').textContent = spendenLage.paypal.knopf || 'Dogi was ausgeben';
|
||
|
||
const reihe = $('geben-betraege');
|
||
if (!reihe.children.length) {
|
||
for (const b of (spendenLage.knoepfe || [])) {
|
||
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';
|
||
k.addEventListener('click', () => nachgefragt(b.mille));
|
||
reihe.append(k);
|
||
}
|
||
const frei = $('geben-frei');
|
||
frei.href = spendenLage.paypal.ziel;
|
||
frei.hidden = false;
|
||
frei.addEventListener('click', () => nachgefragt(0));
|
||
}
|
||
}
|
||
|
||
/** Nach dem Tippen auf einen Betrag: die eine Frage — und das
|
||
* Feld für den eigenen Text.
|
||
*
|
||
* ==== WARUM DER TEXT ERST HIER KOMMT
|
||
*
|
||
* Er könnte auch vor dem Tippen dastehen. Dann schriebe ihn aber
|
||
* auch, wer danach gar nicht spendet — und die Leitung bekäme
|
||
* Texte ohne Spenden zu sehen. Hier steht er an der einzigen
|
||
* Stelle, an der er sicher gemeint ist. */
|
||
function nachgefragt(mille) {
|
||
gemeldeterBetrag = mille;
|
||
$('geben-danke').hidden = true;
|
||
$('geben-nach').hidden = false;
|
||
const wieviel = mille
|
||
? `${window.Spendenkarte.alsDogen(mille)} ${window.Spendenkarte.dogenWort(mille)}`
|
||
: '';
|
||
$('geben-frage').textContent = mille
|
||
? `Hat es geklappt? Dann sag es — ${wieviel}.`
|
||
: 'Hat es geklappt? Dann sag kurz, wie viele Dogen.';
|
||
$('geben-melden').textContent = mille ? `Ja, ${wieviel}` : 'Ja, melden';
|
||
/* Der eigene Name steht schon drin — wer ihn so will, muss
|
||
nichts tun. */
|
||
const nf = $('geben-name');
|
||
if (!nf.value && lage?.ich?.name) nf.value = lage.ich.name;
|
||
restZeigen();
|
||
nf.focus();
|
||
}
|
||
|
||
/** Wie viel noch übrig ist.
|
||
*
|
||
* DIE ZAHL STEHT ERST DA, WENN ES ENG WIRD. Ein Zähler, der von
|
||
* Anfang an mitläuft, macht aus einem Gruß eine Aufgabe. Ab
|
||
* dreißig übrigen Zeichen ist er eine Hilfe, vorher eine
|
||
* Aufsicht. */
|
||
function restZeigen() {
|
||
const feld = $('geben-text');
|
||
const rest = (feld.maxLength || 140) - feld.value.length;
|
||
const wort = $('geben-rest');
|
||
wort.textContent = rest <= 30 ? `noch ${rest}` : '';
|
||
wort.dataset.eng = rest <= 10 ? 'ja' : 'nein';
|
||
}
|
||
|
||
/** Was ich selbst gesammelt habe.
|
||
*
|
||
* Filipe: „ich will dass die den leuten auch als punkte
|
||
* hinzugefügt werden."
|
||
*
|
||
* NUR WENN ETWAS DA IST. Eine Null zu zeigen ist keine Auskunft,
|
||
* sondern eine Aufforderung — und die gehört nicht neben einen
|
||
* Spendenknopf. */
|
||
function standZeigen() {
|
||
const p = $('geben-stand');
|
||
if (!p) return;
|
||
const mille = spendenLage?.ich?.dogen_mille || 0;
|
||
p.textContent = '';
|
||
p.hidden = mille <= 0;
|
||
if (mille <= 0) return;
|
||
p.append(document.createTextNode('Du hast '));
|
||
p.append(window.Spendenkarte.dogenStueck(mille, spendenLage.zeichen));
|
||
}
|
||
|
||
async function spendeMelden() {
|
||
let mille = gemeldeterBetrag;
|
||
if (!mille) {
|
||
const wort = window.frageNachText
|
||
? await window.frageNachText({ titel: 'Wie viele Dogen waren es?', knopf: 'Melden' })
|
||
: prompt('Wie viele Dogen waren es?');
|
||
mille = dogenInMille(wort);
|
||
if (!mille) return;
|
||
}
|
||
try {
|
||
const a = await hole('/workspace/api/spenden/melden', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
dogen_mille: mille,
|
||
name: $('geben-name').value.trim(),
|
||
gruss: $('geben-text').value.trim(),
|
||
}),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging gerade nicht.'); return; }
|
||
$('geben-nach').hidden = true;
|
||
$('geben-text').value = '';
|
||
restZeigen();
|
||
const d = $('geben-danke');
|
||
d.hidden = false;
|
||
d.textContent = 'Danke! Sobald DogFather es bestätigt, steht dein Text im Bild.';
|
||
} catch { sagFehler('Das ging gerade nicht.'); }
|
||
}
|
||
|
||
/** „0,5", „0.5", „1", „2,5 Dogen" — alles dasselbe.
|
||
*
|
||
* ==== GERECHNET WIRD IN TAUSENDSTELN
|
||
*
|
||
* Eine Kommazahl ist der zuverlässigste Weg zu einem Wert, der um
|
||
* ein Tausendstel danebenliegt — und bei etwas, das Leute
|
||
* sammeln, fällt das irgendwann dem auf, der am meisten hat.
|
||
*
|
||
* UND HIER STEHT KEIN KURS. Diese Datei weiß nicht, was ein Doge
|
||
* in Geld wert ist, und soll es nicht wissen: Der Kurs steht
|
||
* einmal auf dem Server. Was hier hereingeht und hinausgeht, sind
|
||
* Dogen. */
|
||
function dogenInMille(wort) {
|
||
const t = String(wort || '').replace(/[^0-9,.]/g, '').replace(',', '.');
|
||
if (!t) return 0;
|
||
const zahl = Number(t);
|
||
if (!Number.isFinite(zahl) || zahl <= 0) return 0;
|
||
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('.', ',');
|
||
}
|
||
|
||
/* =================================================================
|
||
LOS
|
||
================================================================= */
|
||
/** Aus der Sendung -- und das wird auch gesagt.
|
||
*
|
||
* Drei Dinge müssen zusammen passieren, sonst bleibt ein Rest:
|
||
* Der Takt hört auf (sonst klopft er alle 30 Sekunden gegen eine
|
||
* geschlossene Tür), die Leitungen gehen weg (sonst stünde die
|
||
* eigene Kamera weiter im Bild der anderen), und das Video hält an
|
||
* (sonst läuft die Sendung hinter der Meldung weiter). */
|
||
function rausgenommen(wort) {
|
||
if (document.body.dataset.raus === 'ja') return;
|
||
document.body.dataset.raus = 'ja';
|
||
clearInterval(dabeiUhr);
|
||
try { draehteWeg(); } catch { /* es gab vielleicht keine */ }
|
||
try { if (spieler && spielerBereit) spieler.pauseVideo(); } catch { /* egal */ }
|
||
try { if (strom) strom.close(); } catch { /* war schon zu */ }
|
||
|
||
const kasten = el('div', 'raus');
|
||
kasten.setAttribute('role', 'alert');
|
||
kasten.append(el('h2', 'raus__titel',
|
||
wort === 'treff_massnahme' ? 'Du bist gerade gesperrt' : 'Du bist aus der Sendung'));
|
||
kasten.append(el('p', 'raus__text',
|
||
wort === 'treff_massnahme'
|
||
? 'Im Treff läuft eine Maßnahme gegen dich. Solange sie läuft, bist du '
|
||
+ 'bei der Reaction nicht dabei. Was los ist, steht im Treff unter „Meine Maßnahmen".'
|
||
: 'Die Moderation hat dich aus dieser Sendung genommen. Das gilt nur für heute — '
|
||
+ 'bei der nächsten Reaction bist du wieder dabei.'));
|
||
document.body.append(kasten);
|
||
}
|
||
|
||
async function standHolen() {
|
||
const a = await hole('/workspace/api/reaktion');
|
||
if (!a.ok) { sagFehler('Die Reaction ist gerade nicht erreichbar.'); return; }
|
||
lage = await a.json();
|
||
zeichnen();
|
||
}
|
||
|
||
async function los() {
|
||
/* DIE PEGEL LAUFEN FUER JEDEN, DER SENDET -- und nicht nur fuer
|
||
das Pult. Vorher wurden sie in `pultAufbauen()` gestartet, und
|
||
das Pult hat nur, wer die Sendung fuehrt: Ein Gast haette
|
||
seinen Pegel nie gesehen. */
|
||
setInterval(pegelTakt, 90); // 90 ms -- darunter sieht das Auge nichts mehr
|
||
setInterval(pegelNachziehen, 2500);
|
||
|
||
/* Spenden melden */
|
||
$('geben-melden').addEventListener('click', spendeMelden);
|
||
$('geben-abbruch').addEventListener('click', () => { $('geben-nach').hidden = true; });
|
||
$('geben-text').addEventListener('input', restZeigen);
|
||
|
||
/* Kamera und Mikro -- fuer jeden, der sendet */
|
||
$('s-kamera').addEventListener('click',
|
||
() => 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);
|
||
|
||
for (const k of $('chat-stufen').children) {
|
||
k.addEventListener('click', async () => {
|
||
const a = await hole('/workspace/api/reaktion/chatmodus', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ modus: k.dataset.modus }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
lage = { ...(await a.json()) };
|
||
zeichnen();
|
||
});
|
||
}
|
||
|
||
/* Der Chat: absenden */
|
||
$('chat-form').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
const feld = $('chat-feld');
|
||
const text = feld.value.trim();
|
||
if (!text) return;
|
||
feld.value = '';
|
||
const a = await hole('/workspace/api/reaktion/chat', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ text }),
|
||
});
|
||
if (!a.ok) {
|
||
feld.value = text;
|
||
melde(await a.json().catch(() => null), 'Das ging nicht.');
|
||
}
|
||
});
|
||
|
||
$('ton-an').addEventListener('click', tonAn);
|
||
|
||
/* Der Knopf steht nur da, solange er gebraucht wird -- und nur,
|
||
wenn überhaupt jemand sendet. */
|
||
/* DER KNOPF HÄNGT AN DER SENDUNG, NICHT AN DEN KAMERAS.
|
||
|
||
Vorher fragte er „gibt es fremde Kamerafenster?". Läuft eine
|
||
Sendung, in der noch niemand die Kamera an hat, wäre der Ton
|
||
des Videos stumm geblieben -- ohne dass irgendwo ein Knopf
|
||
gestanden hätte. */
|
||
setInterval(() => {
|
||
const knopf = $('ton-an');
|
||
if (!knopf) return;
|
||
knopf.hidden = tonFrei || !lage || lage.stand !== 'live';
|
||
}, 1200);
|
||
|
||
/* KEINE LADE MEHR AM HANDY (28.09.2026). Der Chat steht dort
|
||
jetzt einfach unter dem Video -- siehe reaktion.css. Ein
|
||
Zustand weniger ist besser als ein Zustand, der funktioniert. */
|
||
|
||
await standHolen();
|
||
await adressenHolen();
|
||
stromAuf();
|
||
chatLaden();
|
||
spendenHolen();
|
||
anschliessen();
|
||
|
||
/* Wer die Seite verlässt, ist weg -- sofort und nicht erst nach
|
||
zwei Minuten. `pagehide` und nicht `unload`: Auf dem Handy wird
|
||
`unload` oft gar nicht mehr ausgelöst. */
|
||
window.addEventListener('pagehide', () => {
|
||
try {
|
||
navigator.sendBeacon('/workspace/api/reaktion/dabei-weg');
|
||
} catch { /* dann räumt die Zwei-Minuten-Grenze auf */ }
|
||
draehteWeg();
|
||
});
|
||
}
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', los, { once: true });
|
||
} else {
|
||
los();
|
||
}
|
||
})();
|