DogFatherGit
079cf8c74f
Filipe: "ich will das alles auch so perfekt dass ich es ganz einfach
und easy mit obs oder mit tiktok studio verbinden kann. also so dass
man dan nur die kamera und das video sieht."
WARUM OHNE ANMELDUNG -- nachgesehen, nicht angenommen
OBS speichert die Anmeldung einer Browser-Quelle NICHT zuverlaessig;
im OBS-Forum stehen dazu Meldungen bis in die aktuelle Fassung 31.
Eine Quelle, bei der man sich nach jedem Programmstart neu anmelden
muss, ist mitten in einer Sendung unbrauchbar.
Deshalb ein SCHLUESSEL in der Adresse -- derselbe Weg, den jedes
Alert-Werkzeug im Netz geht. 32 Byte aus dem Zufall des Systems,
verglichen wird zeitgleich (`timingSafeEqual`): Ein gewoehnlicher
Vergleich bricht beim ersten falschen Zeichen ab, und aus den
Bruchteilen einer Millisekunde laesst sich ein Schluessel Zeichen
fuer Zeichen erraten.
DREI QUELLEN, WEIL DREI DINGE VERSCHIEDEN SIND
buehne.html Das laufende YouTube-Video, auf die Sekunde genau wie
bei allen anderen. Stumm (der Ton kommt aus dem
Mischpult) und ohne jede Bedienung -- was hier zu
sehen ist, geht in den Stream.
DIE EIGENE KAMERA IST ABSICHTLICH NICHT DRIN. Sie ist
in OBS direkt als Geraet verfuegbar, in besserer
Qualitaet und frei in Groesse und Lage -- genau das,
was Filipe will ("meine kamera groesser machen video
kleiner"). Den Umweg ueber den Browser zu nehmen
hiesse, Qualitaet gegen nichts einzutauschen und die
Groesse festzulegen statt sie freizugeben.
tafel.html Nur die Spendenkarten, auf DURCHSICHTIGEM Grund.
Groesse und Lage stehen in der Adresse (`&g=1.6`,
`&pos=or`): Wer in OBS eine Quelle einrichtet, hat die
Adresse ohnehin vor sich -- ein Wert, den man
stattdessen im Regiepult suchen muesste, waere ein
Fensterwechsel mitten im Einrichten. Alles rechnet in
`rem`, ein Wert nimmt Schrift, Bild und Polsterung
gleichmaessig mit.
Buehnenmodus `reaktion.html?nur=buehne` -- dieselbe Seite, nur ohne
alles Bedienbare. Fuer den Fall, dass GAESTE im Bild
sind: Deren Kameras kommen ueber eine
Direktverbindung an, und die braucht eine angemeldete
Seite. Diese eine wird als Fenster aufgenommen.
ES IST DIESELBE SEITE UND NICHT EINE ZWEITE. Eine
eigene muesste Video, Kameras, Verbindungsaufbau und
Nachfuehrung noch einmal enthalten -- und beim
naechsten Umbau saehe eine von beiden anders aus.
WAS HERAUSKOMMT, IST DIE EIGENTLICHE FRAGE
Wer den Schluessel hat, sieht genau das, was ohnehin im Stream
steht: Video, Stand, Sekunde, Titel -- und die Spendenkarten. Kein
Chat, keine Namen von Zusehenden, keine Zahlen ueber das Haus. Die
Pruefung zaehlt die Felder der Auskunft EINZELN auf und weist jedes
verbotene namentlich nach; eine Auskunft, die "ungefaehr das
Richtige" enthaelt, ist bei einem Weg ohne Anmeldung keine.
Ein neuer Schluessel macht die alten Adressen sofort tot -- und
schliesst die laufenden Quellen. Sonst liefe eine mit dem alten
weiter, obwohl er zurueckgezogen ist, und man haelt sich fuer
sicher, ohne es zu sein.
SIE MUESSEN TAGE LAUFEN, OHNE DASS JEMAND HINSIEHT
Das ist der Unterschied zu einer Seite im Browser: Wer eine Seite
offen hat, merkt, wenn sie haengt. Eine Quelle in OBS laeuft im
Hintergrund, und ein Stillstand faellt erst auf, wenn die erste
Spende nicht erscheint -- mitten in der Sendung. Deshalb ein
Lebenszeichen alle 25 Sekunden, eine eigene Wache (70 Sekunden ohne
alles = neu verbinden) und ein sofortiger Neuaufbau, wenn der
Rechner aus dem Ruhezustand kommt.
Und: Ein Fehler wird angezeigt, aber nur der, der etwas bedeutet --
ein falscher Schluessel. Alles andere bleibt still, weil jede
Flaeche hier im Stream zu sehen waere.
ZWEI EIGENE FEHLER, BEIDE VON DER MESSUNG GEFUNDEN
1. Die Quellen kamen mit 401 zurueck, obwohl die Seiten laengst
geladen waren: `aufgabenRouter` haengt eine Schranke ueber ALLE
Pfade unter /workspace/api. Genau dafuer stehen `sicherungRouter`
und der Weg fuers Profilbild schon davor -- die Buehne ist der
dritte Fall derselben Art und steht jetzt dort.
2. `waitUntil: "networkidle"` auf einer Seite mit Ereignisstrom. Der
Strom endet absichtlich nie; die Messung wartete auf einen
Zustand, der nicht eintreten kann, und brach nach 30 Sekunden ab.
Dieselbe Falle wie am 06.09. beim Regressionslauf.
ZWEI PRUEFUNGEN WURDEN DABEI GENAUER
`pruef-struktur` verlangte von den zwei OBS-Quellen ein Symbol fuer
den Startbildschirm, ein Manifest und eine Leistenfarbe. Sie
laufen in einem Programmfenster und werden nie installiert -- sie
fallen aus dieser Frage heraus, benannt und mit Grund.
Die Namensstreit-Regel zaehlte jede Klasse, die irgendwo in einem
Selektor vorkommt. Damit galt auch
`body[data-nur="buehne"] .kopfleiste { display: none }` als eigene
Klasse -- dabei ist das das Gegenteil: eine absichtliche
Bezugnahme, um sie im Buehnenmodus wegzunehmen. Gezaehlt wird
jetzt nur, was am ANFANG einer Regel steht, also als eigenes
Bauteil gemeint ist. Mit Gegenprobe in beide Richtungen -- sonst
haette ich eine Regel nur so lange geschaerft, bis sie schweigt.
GEMESSEN
mess-buehne (neu) Ein Browserfenster OHNE jeden Keks: beide
Quellen arbeiten, 0 Kekse, Grund durchsichtig
(rgba(0,0,0,0)), Karte laeuft an (25 EUR,
Rudel-Legende, 348x178). Falscher Schluessel: kein
Inhalt, Grund im Bild. Neuer Schluessel: alter 404,
neuer 200. Buehnenmodus: Kopf, Chat, Pult und
Schild weg, Leinwand da, Saal 720 von 720.
pruef-buehne (neu) 36 Punkte, 0 Fehler
pruef-reaktion 156 (war 154), spenden 46, haus-trennung 100,
haus-seiten 38, struktur 35, css-klassen 33,
verborgen 25, rechtetafel 19, portnummern 15,
ports 8 -- alle 0 Fehler.
2274 lines
90 KiB
JavaScript
2274 lines
90 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
|
||
================================================================= */
|
||
function zeichnen() {
|
||
if (!lage) return;
|
||
saal.dataset.stand = lage.stand;
|
||
document.body.dataset.stand = lage.stand;
|
||
meineId = lage.ich.id;
|
||
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';
|
||
kamerasZeichnen();
|
||
senderleisteZeichnen();
|
||
chatStufeZeichnen();
|
||
|
||
/* ---- Das Pult ---- */
|
||
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';
|
||
/* `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');
|
||
if (s.id === meineId && meinStrom && v.srcObject !== meinStrom) {
|
||
v.srcObject = meinStrom;
|
||
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));
|
||
$('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. */
|
||
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);
|
||
return;
|
||
}
|
||
/* 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 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) {
|
||
for (const spur of meinStrom.getTracks()) pc.addTrack(spur, 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));
|
||
}
|
||
}
|
||
|
||
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;
|
||
feld.placeholder = darf ? 'Sag was …'
|
||
: (lage.chat_modus === 'team'
|
||
? 'Gerade schreibt nur das Team'
|
||
: 'Der Chat ist gerade zu');
|
||
$('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 */ }
|
||
}
|
||
|
||
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));
|
||
/* 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);
|
||
}
|
||
li.append(kopf);
|
||
li.append(el('div', null, b.text));
|
||
return li;
|
||
}
|
||
|
||
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 ---- */
|
||
for (const knopf of $('reiter').children) {
|
||
knopf.addEventListener('click', () => reiterWechseln(knopf.dataset.tafel));
|
||
}
|
||
|
||
/* ---- 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 ---- */
|
||
const layouts = [
|
||
['kino', 'Video groß'],
|
||
['gleich', 'Gleich groß'],
|
||
['kamera', 'Kameras groß'],
|
||
];
|
||
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);
|
||
}
|
||
|
||
/* ---- Die Videospur ---- */
|
||
/* ---- Bühne ---- */
|
||
$('obs-neu').addEventListener('click', buehneNeu);
|
||
buehneHolen();
|
||
|
||
/* ---- Spenden ---- */
|
||
$('sp-zeigen').addEventListener('click', spendeEintragen);
|
||
$('sp-betrag').addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter') { e.preventDefault(); spendeEintragen(); }
|
||
});
|
||
|
||
$('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
|
||
}
|
||
|
||
function reiterWechseln(name) {
|
||
for (const knopf of $('reiter').children) {
|
||
knopf.setAttribute('aria-selected', String(knopf.dataset.tafel === name));
|
||
}
|
||
for (const tafel of document.querySelectorAll('.pult-tafel')) {
|
||
tafel.hidden = tafel.dataset.tafel !== name;
|
||
}
|
||
}
|
||
|
||
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();
|
||
}
|
||
|
||
async function layoutSetzen(schluessel) {
|
||
const a = await hole('/workspace/api/reaktion/layout', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ layout: schluessel }),
|
||
});
|
||
if (!a.ok) melde(await a.json().catch(() => null), 'Die Anordnung ging nicht.');
|
||
}
|
||
|
||
/* ---- 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 === '1') { e.preventDefault(); layoutSetzen('kino'); return; }
|
||
if (taste === '2') { e.preventDefault(); layoutSetzen('gleich'); return; }
|
||
if (taste === '3') { e.preventDefault(); layoutSetzen('kamera'); }
|
||
});
|
||
}
|
||
|
||
/* ---- 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 = '';
|
||
}
|
||
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';
|
||
|
||
for (const k of $('layout-reihe').children) {
|
||
k.setAttribute('aria-pressed', String(k.dataset.layout === (lage.layout || 'kino')));
|
||
}
|
||
|
||
/* ---- 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';
|
||
}
|
||
$('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');
|
||
zeile.append(el('strong', 'spendenzeile__betrag',
|
||
window.Spendenkarte.alsGeld(k.betrag_cent, k.waehrung)));
|
||
const mitte = el('div', 'spendenzeile__mitte');
|
||
mitte.append(el('span', 'spendenzeile__wer', k.name || 'Jemand'));
|
||
if (k.gruss) mitte.append(el('span', 'spendenzeile__gruss', k.gruss));
|
||
zeile.append(mitte);
|
||
|
||
const ja = el('button', 'spendenzeile__ja', 'Stimmt – zeigen');
|
||
ja.type = 'button';
|
||
ja.addEventListener('click', () => spendeEntscheiden(k.id, true));
|
||
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');
|
||
zeile.append(el('strong', 'spendenzeile__betrag',
|
||
window.Spendenkarte.alsGeld(k.betrag_cent, k.waehrung)));
|
||
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.'));
|
||
}
|
||
|
||
$('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) {
|
||
/* 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, { method: 'POST' });
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
spendenHolen();
|
||
}
|
||
|
||
async function spendeEintragen() {
|
||
const cent = eurosInCent($('sp-betrag').value);
|
||
if (!cent) { sagFehler('Erst einen Betrag eintragen.'); return; }
|
||
const name = $('sp-name').value.trim();
|
||
if (!name) { sagFehler('Wer hat gegeben? Der Name steht auf der Karte.'); return; }
|
||
const a = await hole('/workspace/api/spenden', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ betrag_cent: cent, name, gruss: $('sp-gruss').value.trim() }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
|
||
$('sp-betrag').value = ''; $('sp-name').value = ''; $('sp-gruss').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';
|
||
|
||
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); return; }
|
||
if (d.was === 'layout') { $('teil-live').dataset.layout = d.layout; 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();
|
||
} 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();
|
||
}
|
||
} 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;
|
||
|
||
async function spendenHolen() {
|
||
try {
|
||
const a = await hole('/workspace/api/spenden');
|
||
if (!a.ok) return;
|
||
spendenLage = await a.json();
|
||
gebenZeichnen();
|
||
if (lage && lage.ich.host) spendenPultZeichnen();
|
||
} 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', window.Spendenkarte.alsGeld(b.cent, 'EUR'));
|
||
k.href = b.ziel;
|
||
k.target = '_blank';
|
||
k.rel = 'noopener noreferrer';
|
||
k.addEventListener('click', () => nachgefragt(b.cent));
|
||
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. */
|
||
function nachgefragt(cent) {
|
||
gemeldeterBetrag = cent;
|
||
$('geben-danke').hidden = true;
|
||
$('geben-nach').hidden = false;
|
||
$('geben-frage').textContent = cent
|
||
? `Hat es geklappt? Dann sag es — ${window.Spendenkarte.alsGeld(cent, 'EUR')}.`
|
||
: 'Hat es geklappt? Dann sag kurz, wie viel.';
|
||
$('geben-melden').textContent = cent
|
||
? `Ja, ${window.Spendenkarte.alsGeld(cent, 'EUR')}` : 'Ja, melden';
|
||
}
|
||
|
||
async function spendeMelden() {
|
||
let cent = gemeldeterBetrag;
|
||
if (!cent) {
|
||
const wort = window.frageNachText
|
||
? await window.frageNachText({ titel: 'Wie viel war es?', knopf: 'Melden' })
|
||
: prompt('Wie viel war es? (in Euro)');
|
||
cent = eurosInCent(wort);
|
||
if (!cent) return;
|
||
}
|
||
try {
|
||
const a = await hole('/workspace/api/spenden/melden', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ betrag_cent: cent }),
|
||
});
|
||
if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging gerade nicht.'); return; }
|
||
$('geben-nach').hidden = true;
|
||
const d = $('geben-danke');
|
||
d.hidden = false;
|
||
d.textContent = 'Danke! Sobald DogFather es bestätigt, steht es im Bild.';
|
||
} catch { sagFehler('Das ging gerade nicht.'); }
|
||
}
|
||
|
||
/** „5", „5,50", „5.50", „5 €" — alles dasselbe.
|
||
*
|
||
* GERECHNET WIRD IN CENT. Eine Kommazahl für Geld ist der
|
||
* zuverlässigste Weg zu einem Betrag, der um einen Cent daneben
|
||
* liegt — und bei Geld fällt das irgendwann jemandem auf. */
|
||
function eurosInCent(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 * 100);
|
||
}
|
||
|
||
/* =================================================================
|
||
LOS
|
||
================================================================= */
|
||
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; });
|
||
|
||
/* 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));
|
||
|
||
/* Die Chat-Stufe -- nur fuer die zwei */
|
||
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();
|
||
}
|
||
})();
|