Werbeeinblendung fuer die Reaction: Laufband, Wechsel und zwei Bilder in sechs Ecken
Filipe: „ich will dass du auch perfektionierst dass ich einen banner durchlaufen kann, oder erscheinen lassen kann mit werbung drauf ... und ich will auch das dogfather logo oben rechts links unten rechts links genau wie oben unten mittig, so dass ich es wegmachen und hinzufuegen kann." DAS BAND Zwei Arten: „Laufband" zieht die Botschaften von rechts nach links, „Wechsel" blendet sie nacheinander ein. Ein Rabattcode gehoert in den Wechsel -- wer „DOGI10" lesen will, waehrend es wandert, hat es gesehen und nicht behalten. Die Dauer ist einstellbar (8-40 s). Das Band ist Glas, kein Balken: ein Verlauf, unten dicht genug, dass jede Schrift traegt, oben offen. Man sieht das Video weiter. Das Laufband traegt die Folge ZWEIMAL. Wandert es um 50 % seiner Breite, steht die zweite dort, wo die erste war, und der Sprung zurueck ist unsichtbar. Ohne sie entstuende am Ende jedes Durchlaufs eine leere Flaeche -- das sieht aus, als sei die Einblendung abgestuerzt. Wer weniger Bewegung eingestellt hat, bekommt den Wechsel statt des Laufbands -- nicht „aus". Die Werbung soll auch dann wirken. DER RABATTCODE Ein Wort in Grossbuchstaben mit einer Ziffer darin bekommt eine eigene Flaeche in Bernstein: „DOGI10" ja, „VANVAN" nicht. Er ist der einzige Teil der Botschaft, den jemand ABSCHREIBEN soll. Der Text wird NIE als HTML eingesetzt -- die Kennzeichnung baut echte Elemente. Sonst waere ein Eingabefeld im Regiepult ein Weg, fremdes Markup in den Stream zu bringen. DIE ZWEI BILDER Der Husky und der Haekelhase aus der Zusammenarbeit mit VanVan, jeweils an einem von sechs Plaetzen: oben und unten, je links, mittig, rechts -- oder aus. Links und rechts mittig gibt es mit Absicht nicht: dort liegen bei jedem Videodienst die Bedienelemente. Zwei Bilder auf denselben Platz werden abgelehnt (400 ecke_belegt) -- sie laegen uebereinander, und man saehe von beiden nichts. Wer unten steht, weicht dem Band aus, und die Spendentafel rueckt hoch. Beides im Stilblatt ueber `:has`, nicht im Programm: Das Band kennt die Tafel nicht und die Tafel kennt das Band nicht. Der Husky ist schwarz und laege auf dunklem Videobild als Silhouette in der Nacht. Zwei weiche helle Schatten legen eine Kontur darum -- dieselbe Loesung, die jeder Sender fuer sein Wasserzeichen nimmt. IM STREAM, NICHT NUR IM SAAL Beides laeuft in der Buehnenquelle mit, die OBS abfilmt, mit groesserer Schrift (24 statt 18 px) -- ein Stream wird auf einem Handy gesehen, oft in einem Viertel des Bildes. Gemessen: die OFFENE Quelle zieht eine Umschaltung nach, ohne dass die Szene neu geladen werden muss. EINE QUELLE, NICHT DREI `werbungStand()` steht in `reaktion-tabellen.js` und wird von Saal, Regie und Buehne aufgerufen. Erst standen dort drei Abschriften derselben Abfrage; beim Entfernen der Datenbank-Kennung habe ich eine davon geaendert, und die anderen lieferten sie weiter. WAS DIE PRUEFUNGEN DABEI GEFUNDEN HABEN - pruef-buehne: Die Botschaften trugen ihre Datenbank-Kennung in die OBS-Auskunft, die nur mit einem Schluessel geschuetzt ist. Die Feldliste geht jetzt zwei Ebenen tief -- eine abschliessende Liste, die nur die oberste kennt, laesst sich umgehen, indem man ein Feld in ein vorhandenes Objekt legt. - pruef-reaktion: Acht Fehlerwoerter ohne deutschen Satz. Nachgetragen im Hausstil: was nicht geht UND was stattdessen. - pruef-struktur: Die Suche nach totem CSS las `buehne.html` und `tafel.html` nicht -- eine Ausnahme, die fuer eine ganz andere Frage gemacht war (Startbildschirm-Symbol). Sie haette verlangt, `.obs-buehne` zu loeschen, also die Regel, die den Stream traegt. - pruef-tippziele: Erkannte als Anhebung nur `min-height`/`min-width`. Ein `height: 44px` im Fingerblock hebt genauso -- Fehlalarm, und ein Fehlalarm an einer Pruefung, die nach jeder Aenderung laeuft, wird weggeklickt. Zwei Gegenproben dazu. - mess-reaktion: Die Regieleiste am Handy wurde gegen die feste Zahl SIEBEN geprueft und meldete „zeigt nur 8 von 7". Sie zaehlt jetzt selbst. - mess-buehne: Die Konsolenmeldung zeigte dauerhaft vier Fehlschlaege, alle von den Pruefungen selbst bestellt. Jetzt eng gefiltert, benannt, mit Gegenprobe -- und ein UNERWARTETER Fehlschlag in der Quelle, die in den Stream geht, faellt ab sofort durch. Gemessen: mess-reaktion 0, mess-buehne 0, pruef-reaktion 383/0, pruef-buehne 38/0, pruef-tippziele 13/0, pruef-struktur 44/0, pruef-css-klassen 0, pruef-haus-trennung 100/0, pruef-haus-seiten 38/0. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -51,6 +51,15 @@ import {
|
||||
KAMERA_GROESSEN, KAMERA_ECKEN,
|
||||
MELDUNG_TAGE,
|
||||
VERLAUF_TAGE, LISTE_MAX, CHAT_MODI, STUMM_MAX_MINUTEN, MASSNAHMEN,
|
||||
BANNER_ARTEN,
|
||||
BANNER_TEMPI,
|
||||
BANNER_MAX,
|
||||
BANNER_TEXT_MAX,
|
||||
BANNER_UNTER_MAX,
|
||||
BANNER_BILDER,
|
||||
ECKEN_PLAETZE,
|
||||
ECKEN_GROESSEN,
|
||||
werbungStand,
|
||||
} from "./reaktion-tabellen.js";
|
||||
/* DIE SPERREN DES TREFFS GELTEN AUCH HIER. Ein zweites System
|
||||
daneben hiesse, dass jemand im Treff gesperrt ist und in der
|
||||
@@ -298,6 +307,27 @@ function lage(person) {
|
||||
})),
|
||||
chat_modus: s.chat_modus || "offen",
|
||||
chat_modi: CHAT_MODI,
|
||||
/* ==== DIE WERBUNG SIEHT JEDER =============================
|
||||
Sie ist das Einzige auf dieser Seite, das ausdruecklich fuer
|
||||
alle gedacht ist -- eine Einblendung, die nur der Host sieht,
|
||||
waere ein Zettel am eigenen Bildschirm.
|
||||
|
||||
ZWEI LISTEN, UND DAS MIT GRUND: `band` sind die Botschaften,
|
||||
die gerade laufen -- die bekommt jeder. `banner_alle` ist die
|
||||
Verwaltung samt abgeschalteter Eintraege; die geht nur an den,
|
||||
der sie bearbeiten darf. Wer einen Entwurf abschaltet, will
|
||||
ihn nicht trotzdem im Stream haben. */
|
||||
werbung: werbungStand(db()),
|
||||
banner_alle: HOST_ROLLEN.has(person.rolle)
|
||||
? db().prepare(`SELECT id, text, unterzeile, bild, aktiv, reihung
|
||||
FROM reaktion_banner ORDER BY reihung, id`).all()
|
||||
.map((z) => ({ ...z, aktiv: !!z.aktiv }))
|
||||
: undefined,
|
||||
banner_arten: BANNER_ARTEN,
|
||||
banner_tempi: BANNER_TEMPI,
|
||||
banner_bilder: BANNER_BILDER,
|
||||
ecken_plaetze: ECKEN_PLAETZE,
|
||||
ecken_groessen: ECKEN_GROESSEN,
|
||||
/* WAS DIE MODERATION SEHEN MUSS -- und niemand sonst. Eine Liste
|
||||
von Massnahmen gegen andere ist fuer einen Zuschauer eine
|
||||
Liste darueber, wer sich danebenbenommen hat. */
|
||||
@@ -1404,6 +1434,206 @@ reaktionRouter.post("/workspace/api/reaktion/layout", nurHost, express.json({ li
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Die Werbeeinblendung ---------------------------------------- */
|
||||
|
||||
/* ==== EIN WEG FUER DAS GANZE AUSSEHEN ==============================
|
||||
|
||||
Art, Tempo und die beiden Ecken beantworten zusammen eine Frage:
|
||||
„Was steht gerade ueber dem Bild?" Vier Wege dafuer waeren vier
|
||||
Rundrufe -- und zwischen ihnen saehen die Zusehenden eine
|
||||
Mischung aus neuem Band und alter Ecke.
|
||||
|
||||
Dasselbe Muster wie beim Bild (Anordnung, Groesse, Ecke). */
|
||||
reaktionRouter.post("/workspace/api/reaktion/werbung", nurHost,
|
||||
express.json({ limit: "2kb" }), (req, res) => {
|
||||
try {
|
||||
const aendern = [];
|
||||
const werte = [];
|
||||
|
||||
if (req.body?.art !== undefined) {
|
||||
const a = String(req.body.art);
|
||||
if (!BANNER_ARTEN.includes(a)) return res.status(400).json({ fehler: "bannerart_unklar" });
|
||||
aendern.push("banner_art = ?"); werte.push(a);
|
||||
}
|
||||
if (req.body?.tempo !== undefined) {
|
||||
const t = Number(req.body.tempo);
|
||||
if (!BANNER_TEMPI.includes(t)) return res.status(400).json({ fehler: "bannertempo_unklar" });
|
||||
aendern.push("banner_tempo = ?"); werte.push(t);
|
||||
}
|
||||
for (const [feld, spalte] of [["ecke_dogi", "ecke_dogi"], ["ecke_hase", "ecke_hase"]]) {
|
||||
if (req.body?.[feld] === undefined) continue;
|
||||
const e = String(req.body[feld]);
|
||||
if (!ECKEN_PLAETZE.includes(e)) return res.status(400).json({ fehler: "eckenplatz_unklar" });
|
||||
aendern.push(`${spalte} = ?`); werte.push(e);
|
||||
}
|
||||
if (req.body?.ecke_gross !== undefined) {
|
||||
const g = Number(req.body.ecke_gross);
|
||||
if (!ECKEN_GROESSEN.includes(g)) return res.status(400).json({ fehler: "eckengroesse_unklar" });
|
||||
aendern.push("ecke_gross = ?"); werte.push(g);
|
||||
}
|
||||
if (!aendern.length) return res.status(400).json({ fehler: "nichts_zu_tun" });
|
||||
|
||||
/* ZWEI BILDER AUF DEMSELBEN PLATZ waeren ein Bild auf dem
|
||||
anderen. Gemeldet wird es, statt es stillschweigend zu
|
||||
verschieben: Wer es nicht wollte, korrigiert; wer es
|
||||
wollte, findet seine Absicht nicht heimlich geaendert. */
|
||||
const probe = { ...sendung() };
|
||||
for (let i = 0; i < aendern.length; i++) {
|
||||
const feld = aendern[i].split(" ")[0];
|
||||
probe[feld] = werte[i];
|
||||
}
|
||||
if (probe.ecke_dogi !== "aus" && probe.ecke_dogi === probe.ecke_hase) {
|
||||
return res.status(400).json({ fehler: "ecke_belegt" });
|
||||
}
|
||||
|
||||
db().prepare(`UPDATE reaktion SET ${aendern.join(", ")} WHERE id = 1`).run(...werte);
|
||||
melden("reaktion", { was: "werbung", ...werbungJetzt() });
|
||||
res.json({ ok: true, ...werbungJetzt() });
|
||||
} catch (fehler) {
|
||||
console.error("[reaktion] Werbung:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* Der Stand der Einblendung -- an EINER Stelle gerechnet. Drei
|
||||
Aufrufer (setzen, anlegen, aendern) brauchen dasselbe Ergebnis;
|
||||
dreimal abgeschrieben waere die Gelegenheit, dass einer davon
|
||||
das Band vergisst. */
|
||||
function werbungJetzt() {
|
||||
return werbungStand(db());
|
||||
}
|
||||
|
||||
/* Alle Botschaften samt den abgeschalteten -- nur fuer die Regie. */
|
||||
function bannerAlle() {
|
||||
return db().prepare(`SELECT id, text, unterzeile, bild, aktiv, reihung
|
||||
FROM reaktion_banner ORDER BY reihung, id`).all()
|
||||
.map((z) => ({ ...z, aktiv: !!z.aktiv }));
|
||||
}
|
||||
|
||||
/* Text pruefen -- einmal fuer Anlegen und Aendern.
|
||||
|
||||
LEERZEICHEN WERDEN GESTUTZT, Zeilenumbrueche fallen weg: Ein
|
||||
Band ist eine Zeile. Ein hineinkopierter Absatz wuerde es
|
||||
auseinanderreissen, und man saehe es erst im Stream. */
|
||||
function bandText(roh, max) {
|
||||
return String(roh ?? "").replace(/\s+/g, " ").trim().slice(0, max);
|
||||
}
|
||||
|
||||
reaktionRouter.post("/workspace/api/reaktion/banner", nurHost,
|
||||
express.json({ limit: "4kb" }), (req, res) => {
|
||||
try {
|
||||
const text = bandText(req.body?.text, BANNER_TEXT_MAX);
|
||||
if (!text) return res.status(400).json({ fehler: "text_fehlt" });
|
||||
const unter = bandText(req.body?.unterzeile, BANNER_UNTER_MAX);
|
||||
const bild = BANNER_BILDER.includes(String(req.body?.bild))
|
||||
? String(req.body.bild) : "keins";
|
||||
|
||||
const wieviele = db().prepare("SELECT COUNT(*) AS n FROM reaktion_banner").get().n;
|
||||
if (wieviele >= BANNER_MAX) return res.status(400).json({ fehler: "banner_voll" });
|
||||
|
||||
const naechste = db().prepare(
|
||||
"SELECT COALESCE(MAX(reihung), -1) + 1 AS r FROM reaktion_banner").get().r;
|
||||
db().prepare(`INSERT INTO reaktion_banner
|
||||
(text, unterzeile, bild, aktiv, reihung, erstellt) VALUES (?,?,?,1,?,?)`)
|
||||
.run(text, unter, bild, naechste, new Date().toISOString());
|
||||
|
||||
melden("reaktion", { was: "werbung", ...werbungJetzt() });
|
||||
res.json({ ok: true, banner: bannerAlle() });
|
||||
} catch (fehler) {
|
||||
console.error("[reaktion] Banner anlegen:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
reaktionRouter.post("/workspace/api/reaktion/banner/:id(\\d+)", nurHost,
|
||||
express.json({ limit: "4kb" }), (req, res) => {
|
||||
try {
|
||||
const id = Number(req.params.id);
|
||||
const da = db().prepare("SELECT id FROM reaktion_banner WHERE id = ?").get(id);
|
||||
if (!da) return res.status(404).json({ fehler: "nicht_gefunden" });
|
||||
|
||||
const aendern = [];
|
||||
const werte = [];
|
||||
if (req.body?.text !== undefined) {
|
||||
const t = bandText(req.body.text, BANNER_TEXT_MAX);
|
||||
if (!t) return res.status(400).json({ fehler: "text_fehlt" });
|
||||
aendern.push("text = ?"); werte.push(t);
|
||||
}
|
||||
if (req.body?.unterzeile !== undefined) {
|
||||
aendern.push("unterzeile = ?");
|
||||
werte.push(bandText(req.body.unterzeile, BANNER_UNTER_MAX));
|
||||
}
|
||||
if (req.body?.bild !== undefined) {
|
||||
const b = String(req.body.bild);
|
||||
if (!BANNER_BILDER.includes(b)) return res.status(400).json({ fehler: "bild_unklar" });
|
||||
aendern.push("bild = ?"); werte.push(b);
|
||||
}
|
||||
if (req.body?.aktiv !== undefined) {
|
||||
aendern.push("aktiv = ?"); werte.push(req.body.aktiv ? 1 : 0);
|
||||
}
|
||||
if (!aendern.length) return res.status(400).json({ fehler: "nichts_zu_tun" });
|
||||
|
||||
db().prepare(`UPDATE reaktion_banner SET ${aendern.join(", ")} WHERE id = ?`)
|
||||
.run(...werte, id);
|
||||
melden("reaktion", { was: "werbung", ...werbungJetzt() });
|
||||
res.json({ ok: true, banner: bannerAlle() });
|
||||
} catch (fehler) {
|
||||
console.error("[reaktion] Banner aendern:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
reaktionRouter.delete("/workspace/api/reaktion/banner/:id(\\d+)", nurHost, (req, res) => {
|
||||
try {
|
||||
const weg = db().prepare("DELETE FROM reaktion_banner WHERE id = ?")
|
||||
.run(Number(req.params.id));
|
||||
if (!weg.changes) return res.status(404).json({ fehler: "nicht_gefunden" });
|
||||
melden("reaktion", { was: "werbung", ...werbungJetzt() });
|
||||
res.json({ ok: true, banner: bannerAlle() });
|
||||
} catch (fehler) {
|
||||
console.error("[reaktion] Banner loeschen:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* Die Reihenfolge. Getauscht wird mit dem Nachbarn -- so wie in der
|
||||
Warteschlange der Videos, damit man nicht zwei Bedienungen fuer
|
||||
dasselbe lernen muss. */
|
||||
reaktionRouter.post("/workspace/api/reaktion/banner/:id(\\d+)/schieben", nurHost,
|
||||
express.json({ limit: "1kb" }), (req, res) => {
|
||||
try {
|
||||
const id = Number(req.params.id);
|
||||
const wohin = String(req.body?.wohin || "");
|
||||
if (!["hoch", "runter"].includes(wohin)) {
|
||||
return res.status(400).json({ fehler: "richtung_unklar" });
|
||||
}
|
||||
const alle = db().prepare(
|
||||
"SELECT id, reihung FROM reaktion_banner ORDER BY reihung, id").all();
|
||||
const i = alle.findIndex((z) => z.id === id);
|
||||
if (i < 0) return res.status(404).json({ fehler: "nicht_gefunden" });
|
||||
const j = wohin === "hoch" ? i - 1 : i + 1;
|
||||
if (j < 0 || j >= alle.length) return res.status(400).json({ fehler: "nichts_zu_tun" });
|
||||
|
||||
/* IN EINEM ZUG. Zwei einzelne Schreibvorgaenge liessen
|
||||
dazwischen zwei Botschaften auf derselben Zahl stehen --
|
||||
und die Reihenfolge waere dann Zufall. */
|
||||
const setz = db().prepare("UPDATE reaktion_banner SET reihung = ? WHERE id = ?");
|
||||
db().exec("BEGIN IMMEDIATE");
|
||||
try {
|
||||
alle.forEach((z, k) => setz.run(k, z.id));
|
||||
setz.run(j, alle[i].id);
|
||||
setz.run(i, alle[j].id);
|
||||
db().exec("COMMIT");
|
||||
} catch (f) { db().exec("ROLLBACK"); throw f; }
|
||||
|
||||
melden("reaktion", { was: "werbung", ...werbungJetzt() });
|
||||
res.json({ ok: true, banner: bannerAlle() });
|
||||
} catch (fehler) {
|
||||
console.error("[reaktion] Banner schieben:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Der Live-Chat ----------------------------------------------- */
|
||||
|
||||
reaktionRouter.get("/workspace/api/reaktion/chat", (req, res) => {
|
||||
@@ -1561,7 +1791,13 @@ function oeffentlich(l) {
|
||||
ist die Rueckhand fuer den Fall, dass etwas nicht laeuft -- die
|
||||
verraet man nicht vorher, und sie gehoert genau wie die
|
||||
Warteschlange nur denen, die die Sendung fuehren. */
|
||||
const { zuschauer, ich, liste, meldungen, massnahmen, zweit, ...rest } = l;
|
||||
/* `banner_alle` KAM AM 29.09. DAZU. Es ist die Verwaltungsliste
|
||||
der Werbung -- mit den ABGESCHALTETEN Eintraegen darin. Die
|
||||
laufenden Botschaften stehen ohnehin unter `werbung.band` und
|
||||
gehoeren allen; ein Entwurf, den jemand bewusst ausgeschaltet
|
||||
hat, gehoert niemandem. */
|
||||
const { zuschauer, ich, liste, meldungen, massnahmen, zweit,
|
||||
banner_alle: _verwaltung, ...rest } = l;
|
||||
return rest;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user