Die Regie wird eine Regie -- und das Video lief bei niemandem
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).
This commit is contained in:
@@ -207,6 +207,17 @@
|
||||
'Es sind schon zwei Gäste dabei. Nimm erst jemanden heraus.',
|
||||
layout_unbekannt:
|
||||
'Diese Anordnung gibt es nicht.',
|
||||
liste_voll:
|
||||
'Die Warteschlange ist voll. Nimm erst etwas heraus – '
|
||||
+ 'mehr überblickt im Live sowieso niemand.',
|
||||
liste_doppelt:
|
||||
'Dieses Video steht schon in der Warteschlange.',
|
||||
liste_leer:
|
||||
'Die Warteschlange ist leer. Häng erst etwas an, '
|
||||
+ 'dann gibt es ein Nächstes.',
|
||||
nicht_in_der_liste:
|
||||
'Dieser Eintrag steht nicht mehr in der Warteschlange – '
|
||||
+ 'vielleicht hat ihn jemand anderes gerade genommen.',
|
||||
zu_schnell:
|
||||
'Das war viel auf einmal. Warte eine Minute – danach geht es weiter.',
|
||||
nicht_dabei:
|
||||
|
||||
+720
-45
@@ -115,7 +115,21 @@
|
||||
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' };
|
||||
@@ -151,6 +165,15 @@
|
||||
|| (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';
|
||||
@@ -233,6 +256,21 @@
|
||||
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;
|
||||
}
|
||||
@@ -324,6 +362,13 @@
|
||||
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. */
|
||||
@@ -334,10 +379,30 @@
|
||||
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();
|
||||
else folgen(lage);
|
||||
},
|
||||
onStateChange: () => { if (lage && lage.ich.host) hostMelden(); },
|
||||
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();
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -411,8 +476,27 @@
|
||||
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
|
||||
@@ -435,7 +519,10 @@
|
||||
let d = drähte.get(anderer);
|
||||
if (d) return d;
|
||||
const pc = new RTCPeerConnection({ iceServers: eisAdressen });
|
||||
d = { pc, strom: null };
|
||||
/* 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) => {
|
||||
@@ -480,11 +567,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** 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);
|
||||
@@ -506,6 +620,7 @@
|
||||
const d = drähte.get(anderer);
|
||||
if (d) { try { d.pc.close(); } catch { /* egal */ } drähte.delete(anderer); }
|
||||
} finally {
|
||||
clearTimeout(notbremse);
|
||||
ruftGerade.delete(anderer);
|
||||
}
|
||||
}
|
||||
@@ -519,10 +634,18 @@
|
||||
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) {
|
||||
/* Eine halbfertige Verbindung wegwerfen: Der andere hat
|
||||
gerade gesagt, dass er nichts bekommen hat. */
|
||||
/* Jetzt ist es wirklich eine Leiche: fertig verhandelt und
|
||||
trotzdem ohne Bild. Weg damit. */
|
||||
try { alt.pc.close(); } catch { /* egal */ }
|
||||
drähte.delete(von);
|
||||
}
|
||||
@@ -530,6 +653,21 @@
|
||||
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);
|
||||
@@ -580,16 +718,74 @@
|
||||
for (const g of lage.gaeste) sollen.add(g.id);
|
||||
}
|
||||
|
||||
for (const id of sollen) {
|
||||
if (drähte.has(id) || ruftGerade.has(id)) continue;
|
||||
if (ichRufeAn(id)) anrufen(id);
|
||||
else bitten(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();
|
||||
}
|
||||
@@ -604,6 +800,19 @@
|
||||
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();
|
||||
@@ -674,7 +883,20 @@
|
||||
}
|
||||
|
||||
/* =================================================================
|
||||
DAS REGIEPULT
|
||||
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' },
|
||||
@@ -682,9 +904,166 @@
|
||||
{ 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 = '';
|
||||
@@ -692,6 +1071,7 @@
|
||||
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';
|
||||
@@ -703,29 +1083,23 @@
|
||||
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', () => {
|
||||
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 (r.schluessel === 'mikro' && meinStrom) {
|
||||
for (const s of meinStrom.getAudioTracks()) s.enabled = !jetztStumm;
|
||||
}
|
||||
});
|
||||
stumm.addEventListener('click', () => stummSchalten(r.schluessel));
|
||||
kasten.append(stumm);
|
||||
reihe.append(kasten);
|
||||
}
|
||||
|
||||
const hinweis = el('p', 'pult__klein',
|
||||
'Die Regler gelten für das, was DU hörst. Nur „Mein Mikro" und '
|
||||
+ 'der Stummschalter an einem Gast gelten für alle.');
|
||||
reihe.parentElement.append(hinweis);
|
||||
$('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 = [
|
||||
@@ -739,18 +1113,39 @@
|
||||
const k = el('button', 'layout-knopf', wort);
|
||||
k.type = 'button';
|
||||
k.dataset.layout = schluessel;
|
||||
k.addEventListener('click', async () => {
|
||||
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.');
|
||||
});
|
||||
k.addEventListener('click', () => layoutSetzen(schluessel));
|
||||
lreihe.append(k);
|
||||
}
|
||||
|
||||
/* ---- Die Knöpfe ---- */
|
||||
/* ---- 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'));
|
||||
@@ -768,17 +1163,166 @@
|
||||
$('p-holen').addEventListener('click', gastHolen);
|
||||
|
||||
$('pult-griff').addEventListener('click', () => {
|
||||
const pult = $('pult');
|
||||
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 = $('regler').querySelector('.regler[data-was="video"]')?.dataset.stumm === 'ja';
|
||||
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. */
|
||||
@@ -786,15 +1330,54 @@
|
||||
.filter((k) => k.dataset.wer !== String(meineId));
|
||||
fremde.forEach((k, i) => {
|
||||
const schluessel = i === 0 ? 'gast1' : 'gast2';
|
||||
const kasten = $('regler').querySelector(`.regler[data-was="${schluessel}"]`);
|
||||
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() {
|
||||
$('p-titel').value = lage.titel || '';
|
||||
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')) {
|
||||
@@ -819,7 +1402,7 @@
|
||||
k.setAttribute('aria-pressed', String(k.dataset.layout === (lage.layout || 'kino')));
|
||||
}
|
||||
|
||||
/* Gäste */
|
||||
/* ---- Gäste ---- */
|
||||
$('gast-zahl').textContent = `${lage.gaeste.length} von ${lage.gaeste_max}`;
|
||||
const greihe = $('gast-reihe');
|
||||
greihe.textContent = '';
|
||||
@@ -871,6 +1454,82 @@
|
||||
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
|
||||
@@ -937,13 +1596,24 @@
|
||||
beides gehört nur dem Empfänger. Was hier ankommt, wird
|
||||
daher ÜBER den eigenen Stand gelegt, nicht an seine
|
||||
Stelle gesetzt. */
|
||||
lage = { ...lage, ...d.lage, ich: lage.ich, zuschauer: lage.zuschauer };
|
||||
/* `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 */ }
|
||||
});
|
||||
@@ -1086,11 +1756,16 @@
|
||||
|
||||
/* 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;
|
||||
const stumme = document.querySelectorAll('#kameras video[data-fremd="ja"]').length;
|
||||
knopf.hidden = tonFrei || !stumme || !lage || lage.stand !== 'live';
|
||||
knopf.hidden = tonFrei || !lage || lage.stand !== 'live';
|
||||
}, 1200);
|
||||
|
||||
/* KEINE LADE MEHR AM HANDY (28.09.2026). Der Chat steht dort
|
||||
|
||||
Reference in New Issue
Block a user