DogFatherGit
711a5470ab
Filipe: "perfektionier das auch mit den videoos. pefektionier auch das
aussehen und das layout von der regie. ich will dass du das viel
hochwertiger und profissioneller machst."
DAS VIDEO LIEF BEI NIEMANDEM -- AUCH NICHT BEIM HOST
Gemessen ueber ein neues Merkmal am Rahmen: `onStateChange` ist nie
ausgeloest worden, bei keinem der drei Browser. Zwei Ursachen, die
sich gegenseitig verdeckt haben:
Ein Player mit Ton darf ohne Handlung des Menschen nicht losgehen.
Ohne `mute: 1` greift `playVideo()` nicht -- und ein Zuschauer hat
keine Bedienung (mit Absicht), haette also NIE eine Moeglichkeit
gehabt, es zu starten. Eine Stunde Standbild.
`onReady` tat `if (host) takt(); else folgen();`. Der Host hat damit
nur GEMELDET, wo er steht, und nie selbst begonnen. Er meldete
"laeuft nicht", und alle anderen folgten ihm brav ins Stehen.
Die Messung bricht ab jetzt ab, wenn der Player nicht bei beiden
laeuft. Ein gruener Haken ueber einem Standbild ist wertlos.
DIE WARTESCHLANGE
Vorher gab es genau EIN Videofeld. Wer zwei Sachen hintereinander
schauen wollte, tippte mitten in der Sendung eine YouTube-Adresse ein
-- vor Publikum, mit laufender Kamera, ein Tippfehler von einem
schwarzen Rechteck entfernt. Jetzt wird vorher eingeraeumt und im Live
nur weitergeschaltet: anhaengen, schieben, "Jetzt", "Naechstes".
Die Titel kommen von YouTube selbst (oEmbed, kein Schluessel, kein
Kontingent) und werden EINMAL geholt und hingelegt. Klappt der Abruf
nicht, steht dort die Kennung -- kein erfundener Name. Die Grenze ist
ueber die Umgebung veraenderbar, damit die Pruefung den vollen Fall in
Sekunden erreicht statt dreissig Videos anzuhaengen.
DIE REGIE
Vorher fuenf Kaesten untereinander in einem Bereich, der hoechstens
die halbe Bildschirmhoehe hat -- man sah fuenf halbe Dinge. Die drei
grossen Knoepfe lagen ganz unten, hinter acht Feldern und vier
Reglern. Wer mitten in der Sendung "Beenden" drueckt, drueckt es, weil
etwas passiert ist; das darf nicht hinter einer Bewegung liegen.
Eine Leiste, die IMMER steht: Lampe, Laufzeit, Zuschauer, wie viele
davon Bild bekommen, Gaeste, gemessener Upload -- und rechts die
drei Knoepfe.
Register statt Stapel: Sendung, Warteschlange, Ton, Gaeste, Bild.
Eine Videospur mit echter Bedienung: Pause, +/-10 s, Positionsband,
Restzeit, "Naechstes". Vorher musste man ins YouTube-Bild fassen --
und was dort passiert, passiert nur bei einem selbst.
PEGEL an den Reglern, aus einer echten Messung (AnalyserNode). 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. Beim YouTube-Regler steht dabei, dass dort nichts
zu messen ist -- Ton aus einem fremden Rahmen laesst sich nicht
abgreifen, und ein erfundener Ausschlag waere schlimmer als keiner.
Der Upload wird an der Verbindung gemessen (`getStats`), nicht aus
"zwoelf mal 350 kbit/s" gerechnet.
Tastaturkuerzel -- und die Legende steht darunter. Ein Kuerzel, das
niemand kennt, ist keins.
VIER FEHLER, DIE NUR DIE MESSUNG GEZEIGT HAT
1. `.tafel` WAR SCHON VERGEBEN. Die Anmeldeseite hat diese Klasse und
setzt sie `position: absolute`; reaktion.html laedt beide
Stilvorlagen. Die Register-Tafel trug damit NICHTS zur Hoehe bei
(114 px Raster, 294 px Inhalt) und malte quer ueber Register und
Kuerzel -- 197 Pixel, um die die Seite ueberlief. Auf dem Bild sah
es aus wie ein Anzeigefehler; es war ein Namensstreit. Dritter
Fall dieser Art nach .knopf-still und .schalter, deshalb steht er
ab jetzt in einer Pruefung: keine Klasse aus reaktion.css darf in
gate/start/module/haus.css vorkommen.
2. `node:sqlite` kennt kein `.transaction()`. Von Hand geklammert.
3. Das Schild war auf dem Handy 10,24 px gross -- unter der
Hausgrenze von 11,5 px. Gefunden von `pruef-handy`, das die
GEZEICHNETE Groesse misst; die Stilvorlagen-Pruefung haette die
Zeile in der Medienabfrage durchgelassen.
4. Die Messung klickte blind auf den Griff des Pults ("umschalten")
und machte es damit ZU, seit es aufgeklappt startet. Sie stellt
den Zustand jetzt her, statt ihn umzuschalten.
UND DIE HARTNAECKIGSTE: DAS BILD DES GASTES KAM BEIM HOST NICHT AN
Erst in einem von drei Laeufen, dann in drei von drei -- und zwar
SCHLIMMER, nachdem ich einen Wachhund dagegen gebaut hatte. Vier
Ursachen, hintereinander gemessen statt geraten:
a) `kameraHolen()` wurde beim Host FUENFMAL betreten. Die Wache
`if (meinStrom) return` wirkt erst, wenn die Kamera DA ist --
solange die erste Anfrage laeuft, geht jede weitere als zweite
Anfrage an dasselbe Geraet. Eine blieb liegen, und mit ihr der
Anruf, der darauf wartete. Der Platz in `ruftGerade` blieb
belegt, und damit kam nie wieder eine Leitung zustande. Jetzt
bekommen alle dasselbe Versprechen zurueck.
b) Der Wachhund riss Leitungen ab, die gerade verhandelt wurden --
zwischen "Leitung angelegt" und "Angebot abgeschickt" liegen
drei await.
c) "Ruf mich an" brach dasselbe ab: Der Bittende weiss nicht, dass
es schon laeuft, und fragt alle drei Sekunden weiter.
d) Meine Reparatur von (b) und (c) war "signalingState !== stable
heisst: in Arbeit" -- ohne Uhr. Damit war eine Leitung, deren
Antwort nie ankommt, vor BEIDEN Aufraeumwegen sicher, dauerhaft.
Der Zuschauer bekam daraufhin gar nichts mehr; ich hatte den
Fehler nur von einer Seite auf die andere geschoben. "Wird
verhandelt" ist ein Zustand MIT DAUER und steht jetzt an genau
einer Stelle.
Dazu ein eigener Fehler beim Aufraeumen: Mit der Messspur ist
`ruftGerade` mit herausgefallen. Vier Laeufe ohne jedes Bild -- und
`node --check` sieht das nicht, eine fehlende Variable ist
syntaktisch tadellos.
GEMESSEN
mess-reaktion fuenf Laeufe hintereinander ohne Beanstandung;
beide Kameras 640 px bei Host UND Zuschauerin,
Video laeuft bei beiden, Upload 0,9 Mbit/s,
Warteschlange 2 Zeilen mit Vorschaubildern,
kein Ueberlauf (4 px statt 197)
pruef-reaktion 132 Punkte, 0 Fehler (vorher 88)
pruef-handy 180 Punkte, 0 Fehler
dazu gruen css-klassen 33, struktur 35, tippziele 11,
meldungen 8, kamera-richtlinie 10
SCHEMA: neue Tabelle `reaktion_liste`, neue Spalte
`reaktion.video_titel` (ALTER TABLE, keine Abschrift der Spalten).
1799 lines
70 KiB
JavaScript
1799 lines
70 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;
|
||
};
|
||
|
||
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();
|
||
|
||
/* ---- 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';
|
||
fenster.dataset.stumm = s.stumm ? 'ja' : 'nein';
|
||
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();
|
||
}
|
||
}
|
||
|
||
/* ---- 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
|
||
================================================================= */
|
||
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 = [
|
||
{ schluessel: 'mikro', wort: 'Mein Mikro' },
|
||
{ 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;
|
||
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() {
|
||
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');
|
||
kasten.dataset.was = r.schluessel;
|
||
kasten.append(el('span', 'regler__wort', r.wort));
|
||
|
||
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);
|
||
|
||
const stumm = el('button', 'regler__stumm', '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 ---- */
|
||
$('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();
|
||
|
||
/* Drei Takte, drei Geschwindigkeiten -- jeder so schnell, wie er
|
||
sein muss, und keiner schneller. */
|
||
setInterval(pegelTakt, 90); // Pegel: das Auge sieht darunter nichts mehr
|
||
setInterval(leisteTakt, 500); // Uhr und Positionsband
|
||
setInterval(() => { pegelNachziehen(); lastMessen(); }, 2500);
|
||
}
|
||
|
||
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) {
|
||
const kasten = document.querySelector(`.regler[data-was="${schluessel}"]`);
|
||
if (!kasten) return;
|
||
const jetztStumm = kasten.dataset.stumm !== 'ja';
|
||
kasten.dataset.stumm = jetztStumm ? 'ja' : 'nein';
|
||
tonNachziehen();
|
||
/* Beim eigenen Mikro gilt das für ALLE -- die Spur wird
|
||
abgeschaltet, und dann kommt beim Empfänger nichts mehr an.
|
||
Bei den Gästen gilt es nur hier; für alle stummschalten geht
|
||
über den Knopf an der Gastkarte. */
|
||
if (schluessel === 'mikro' && meinStrom) {
|
||
for (const s of meinStrom.getAudioTracks()) s.enabled = !jetztStumm;
|
||
}
|
||
}
|
||
|
||
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;
|
||
|
||
/* ---- 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;
|
||
}
|
||
|
||
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 */ }
|
||
});
|
||
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.
|
||
================================================================= */
|
||
async function dankeHolen() {
|
||
try {
|
||
const a = await hole('/workspace/api/unterstuetzung');
|
||
if (!a.ok) return;
|
||
const d = await a.json();
|
||
const wege = d.wege || d.liste || [];
|
||
const pp = wege.find((w) => w.schluessel === 'paypal' && w.sichtbar && w.ziel);
|
||
if (!pp) return;
|
||
const knopf = $('danke');
|
||
knopf.href = pp.ziel;
|
||
knopf.querySelector('span').textContent = pp.knopf || 'Dogi was ausgeben';
|
||
knopf.hidden = false;
|
||
} catch { /* ohne Knopf ist die Seite vollständig */ }
|
||
}
|
||
|
||
/* =================================================================
|
||
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() {
|
||
/* 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();
|
||
dankeHolen();
|
||
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();
|
||
}
|
||
})();
|