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
+246
-4
@@ -2372,6 +2372,234 @@ if (!rausgesetzt.da || !rausgesetzt.markiert
|
||||
await bild(zuschauer.seite, "14-aus-der-sendung");
|
||||
await roh(`/workspace/api/reaktion/massnahme/${IDS.gast}`, { method: "DELETE", keks: k.admin });
|
||||
|
||||
/* =====================================================================
|
||||
DIE WERBEEINBLENDUNG -- beim Zuschauer, nicht beim Host
|
||||
===================================================================== */
|
||||
console.log("");
|
||||
console.log("=== Die Werbeeinblendung ===");
|
||||
{
|
||||
/* DER ZUSCHAUER WAR EBEN NOCH AUS DER SENDUNG GENOMMEN, und die
|
||||
Massnahme ist zurueckgenommen -- der Vorhang steht trotzdem
|
||||
noch. Das ist Absicht und kein Fehler: `rausgenommen()`
|
||||
schliesst den Ereignisstrom, damit niemand die Sendung
|
||||
weiterverfolgt, waehrend er draussen ist. Genau deshalb kommt
|
||||
die Ruecknahme dort nicht mehr an.
|
||||
|
||||
Gemessen wird deshalb nach einem Neuladen -- das ist auch das,
|
||||
was ein Mensch taete. Dass der Vorhang OHNE Neuladen stehen
|
||||
bleibt, steht als offener Punkt in der Liste; hier still darum
|
||||
herumzumessen waere das Verstecken eines Befunds. */
|
||||
await zuschauer.seite.reload({ waitUntil: "domcontentloaded" });
|
||||
await zuschauer.seite.waitForFunction(
|
||||
() => !document.querySelector(".raus__titel")
|
||||
&& !!document.getElementById("leinwand"),
|
||||
null, { timeout: 15000 });
|
||||
await zuschauer.seite.waitForTimeout(600);
|
||||
|
||||
const setz = (felder) => host.seite.evaluate(async (f) => {
|
||||
const a = await fetch("/workspace/api/reaktion/werbung", {
|
||||
method: "POST", credentials: "same-origin",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(f),
|
||||
});
|
||||
return { code: a.status, text: (await a.text()).slice(0, 120) };
|
||||
}, felder);
|
||||
|
||||
/* ---- 1. Das Laufband ---- */
|
||||
const an = await setz({ art: "laufband", tempo: 12 });
|
||||
console.log(` Band einschalten: ${an.code}`);
|
||||
await host.seite.waitForTimeout(700);
|
||||
await zuschauer.seite.waitForTimeout(900);
|
||||
|
||||
const band = await zuschauer.seite.evaluate(() => {
|
||||
const w = document.querySelector(".werbung");
|
||||
const b = document.querySelector(".werbung__band");
|
||||
if (!w || !b) return null;
|
||||
const r = b.getBoundingClientRect();
|
||||
const lein = document.getElementById("leinwand")?.getBoundingClientRect();
|
||||
const stuecke = [...document.querySelectorAll(".werbung__stueck")];
|
||||
const bilder = [...document.querySelectorAll(".werbung__stueck img")];
|
||||
return {
|
||||
art: w.dataset.art,
|
||||
sichtbar: !b.hidden && r.width > 10 && r.height > 10,
|
||||
hoch: Math.round(r.height),
|
||||
/* STEHT ES IM BILD? Ein Band, das rechnerisch existiert und
|
||||
unter dem Rand der Leinwand liegt, ist kein Band. */
|
||||
imBild: !!lein && r.bottom <= lein.bottom + 2 && r.top >= lein.top - 2,
|
||||
stuecke: stuecke.length,
|
||||
/* `naturalWidth` und nicht „gibt es das Element": Ein Bild,
|
||||
das 404 antwortet, steht genauso im Dokument wie eines,
|
||||
das laedt -- auf dem Bildschirm ist dort nichts. */
|
||||
bilderGeladen: bilder.filter((i) => i.naturalWidth > 0).length,
|
||||
bilderGesamt: bilder.length,
|
||||
/* ZEILE UND UNTERZEILE GETRENNT ABLESEN. `textContent` des
|
||||
ganzen Stuecks klebt beides aneinander
|
||||
(„dogfather-universe.comAlles ueber das Rudel") -- im Bild
|
||||
stehen sie untereinander, im Protokoll sah es nach einem
|
||||
fehlenden Leerzeichen aus. Eine Messung, die einen Fehler
|
||||
ERFINDET, kostet genauso viel Zeit wie eine, die einen
|
||||
verschweigt. */
|
||||
texte: stuecke.slice(0, 2).map((z) => [
|
||||
z.querySelector(".werbung__text")?.textContent.trim() || "",
|
||||
z.querySelector(".werbung__unter")?.textContent.trim() || "",
|
||||
].filter(Boolean).join(" / ")),
|
||||
code: document.querySelector(".werbung__code")?.textContent || "",
|
||||
};
|
||||
});
|
||||
if (!band) {
|
||||
console.log(" ACHTUNG: beim Zuschauer gibt es gar keine Einblendung.");
|
||||
ausgang = 1;
|
||||
} else {
|
||||
console.log(` Band: ${band.art}, ${band.hoch} px hoch, ${band.stuecke} Stuecke, `
|
||||
+ `Bilder ${band.bilderGeladen}/${band.bilderGesamt}`);
|
||||
console.log(` Texte: ${band.texte.join(" | ")}`);
|
||||
console.log(` Rabattcode hervorgehoben: „${band.code}"`);
|
||||
if (!band.sichtbar) { console.log(" ACHTUNG: das Band ist nicht zu sehen."); ausgang = 1; }
|
||||
if (!band.imBild) { console.log(" ACHTUNG: das Band liegt ausserhalb der Leinwand."); ausgang = 1; }
|
||||
if (band.bilderGesamt && band.bilderGeladen < band.bilderGesamt) {
|
||||
console.log(" ACHTUNG: ein Bild im Band laedt nicht.");
|
||||
ausgang = 1;
|
||||
}
|
||||
/* DAS LAUFBAND TRAEGT ZWEIMAL DIESELBE FOLGE. Ohne die zweite
|
||||
entstuende am Ende jedes Durchlaufs eine leere Flaeche -- und
|
||||
das sieht aus, als sei die Einblendung abgestuerzt. */
|
||||
if (band.stuecke !== 4) {
|
||||
console.log(` ACHTUNG: zwei Botschaften, zweimal -- erwartet 4 Stuecke, gezaehlt ${band.stuecke}.`);
|
||||
ausgang = 1;
|
||||
}
|
||||
if (!band.code) {
|
||||
console.log(" ACHTUNG: DOGI10 wurde nicht als Code erkannt.");
|
||||
ausgang = 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 2. Die Ecken ---- */
|
||||
const ecken = await setz({ ecke_dogi: "ol", ecke_hase: "ur", ecke_gross: 1.4 });
|
||||
console.log(` Ecken setzen: ${ecken.code}`);
|
||||
await zuschauer.seite.waitForTimeout(800);
|
||||
|
||||
const lage = await zuschauer.seite.evaluate(() => {
|
||||
const lein = document.getElementById("leinwand")?.getBoundingClientRect();
|
||||
const lies = (welches) => {
|
||||
const e = document.querySelector(`.werbung__ecke--${welches}`);
|
||||
if (!e || e.hidden) return null;
|
||||
const r = e.getBoundingClientRect();
|
||||
const bild = e.querySelector("img");
|
||||
return {
|
||||
platz: e.dataset.platz,
|
||||
breit: Math.round(r.width),
|
||||
geladen: !!bild && bild.naturalWidth > 0,
|
||||
/* GEMESSEN WIRD DER ABSTAND ZU DEN VIER KANTEN, nicht der
|
||||
Name der Ecke. Eine Pruefung, die nur ihren eigenen
|
||||
Namen bestaetigt, bestaetigt nichts. */
|
||||
l: Math.round(r.left - lein.left), r: Math.round(lein.right - r.right),
|
||||
o: Math.round(r.top - lein.top), u: Math.round(lein.bottom - r.bottom),
|
||||
};
|
||||
};
|
||||
return { dogi: lies("dogi"), hase: lies("hase") };
|
||||
});
|
||||
for (const [welches, soll] of [["dogi", "ol"], ["hase", "ur"]]) {
|
||||
const e = lage[welches];
|
||||
if (!e) { console.log(` ACHTUNG: ${welches} steht nicht im Bild.`); ausgang = 1; continue; }
|
||||
console.log(` ${welches}: ${e.platz}, ${e.breit} px, `
|
||||
+ `Abstaende l/r/o/u ${e.l}/${e.r}/${e.o}/${e.u}, Bild ${e.geladen ? "laedt" : "FEHLT"}`);
|
||||
if (!e.geladen) { console.log(` ACHTUNG: das Bild von ${welches} laedt nicht.`); ausgang = 1; }
|
||||
const linksOben = e.l < e.r && e.o < e.u;
|
||||
const rechtsUnten = e.r < e.l && e.u < e.o;
|
||||
if (soll === "ol" && !linksOben) {
|
||||
console.log(" ACHTUNG: dogi sollte oben links stehen."); ausgang = 1;
|
||||
}
|
||||
if (soll === "ur" && !rechtsUnten) {
|
||||
console.log(" ACHTUNG: hase sollte unten rechts stehen."); ausgang = 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 3. Zwei Bilder auf denselben Platz ---- */
|
||||
const doppelt = await setz({ ecke_hase: "ol" });
|
||||
console.log(` Beide auf denselben Platz: ${doppelt.code} `
|
||||
+ `(400 erwartet -- ein Bild auf dem anderen ist keine Absicht)`);
|
||||
if (doppelt.code !== 400) {
|
||||
console.log(" ACHTUNG: zwei Bilder duerfen nicht auf demselben Platz landen.");
|
||||
ausgang = 1;
|
||||
}
|
||||
|
||||
/* ---- 4. Der Wechsel ---- */
|
||||
await setz({ art: "wechsel", tempo: 8 });
|
||||
await zuschauer.seite.waitForTimeout(900);
|
||||
const wechsel = await zuschauer.seite.evaluate(() => {
|
||||
const w = document.querySelector(".werbung");
|
||||
const alle = [...document.querySelectorAll(".werbung__stueck--wechsel")];
|
||||
const sichtbar = alle.filter((z) => z.dataset.dran === "ja");
|
||||
return {
|
||||
art: w?.dataset.art,
|
||||
wieviele: alle.length,
|
||||
dran: sichtbar.length,
|
||||
/* UEBEREINANDER, NICHT NACHEINANDER -- gefragt ist, ob die
|
||||
Hoehe des Bandes springt, wenn eine laengere Botschaft
|
||||
kommt. Deshalb wird die HOEHE gemessen und keine
|
||||
Koordinate: Liegen die Botschaften in derselben
|
||||
Gitterzelle, ist ihr Traeger so hoch wie die hoechste von
|
||||
ihnen; liegen sie untereinander, so hoch wie ihre Summe.
|
||||
|
||||
Zwei frueherre Fassungen haben hier Oberkanten und Mitten
|
||||
verglichen und beide Male die ANIMATION abgelesen: Die
|
||||
ruhende Botschaft steht um genau die sechs Pixel tiefer,
|
||||
mit denen sie hereingleitet. Eine Hoehe kennt kein
|
||||
`translateY`. */
|
||||
traeger: (() => {
|
||||
const l = document.querySelector(".werbung__lauf");
|
||||
return l ? Math.round(l.getBoundingClientRect().height) : 0;
|
||||
})(),
|
||||
hoehen: alle.map((z) => Math.round(z.getBoundingClientRect().height)),
|
||||
};
|
||||
});
|
||||
{
|
||||
const h = wechsel.hoehen;
|
||||
const summe = h.reduce((a, b) => a + b, 0);
|
||||
const hoechste = Math.max(0, ...h);
|
||||
/* `summe > hoechste + 10` ist die Gegenprobe: Gaebe es nur eine
|
||||
Botschaft, waere „der Traeger ist so hoch wie die hoechste"
|
||||
zwangslaeufig erfuellt -- gruen, ohne etwas ueber das
|
||||
Uebereinanderliegen zu wissen. */
|
||||
wechsel.summe = summe;
|
||||
wechsel.hoechste = hoechste;
|
||||
wechsel.gleicheStelle = summe > hoechste + 10
|
||||
&& wechsel.traeger <= hoechste + 2;
|
||||
}
|
||||
console.log(` Wechsel: ${wechsel.wieviele} Botschaften, ${wechsel.dran} sichtbar, `
|
||||
+ `Traeger ${wechsel.traeger} px bei Hoehen ${wechsel.hoehen.join("+")} `
|
||||
+ `(uebereinander ${wechsel.hoechste}, untereinander ${wechsel.summe}), `
|
||||
+ `uebereinander: ${wechsel.gleicheStelle}`);
|
||||
if (wechsel.art !== "wechsel" || wechsel.dran !== 1) {
|
||||
console.log(" ACHTUNG: beim Wechsel muss genau eine Botschaft dastehen.");
|
||||
ausgang = 1;
|
||||
}
|
||||
if (!wechsel.gleicheStelle) {
|
||||
console.log(" ACHTUNG: die Botschaften liegen nicht uebereinander -- die Hoehe springt.");
|
||||
ausgang = 1;
|
||||
}
|
||||
|
||||
/* ---- 5. Ein Bild davon ---- */
|
||||
await setz({ art: "laufband", ecke_hase: "ur" });
|
||||
await zuschauer.seite.waitForTimeout(900);
|
||||
await bild(zuschauer.seite, "24-werbung");
|
||||
|
||||
/* ---- 6. Wieder aus ---- */
|
||||
const aus = await setz({ art: "aus", ecke_dogi: "aus", ecke_hase: "aus" });
|
||||
await zuschauer.seite.waitForTimeout(700);
|
||||
const weg = await zuschauer.seite.evaluate(() => {
|
||||
const b = document.querySelector(".werbung__band");
|
||||
const e = [...document.querySelectorAll(".werbung__ecke")].filter((x) => !x.hidden);
|
||||
return { band: !!b && !b.hidden, ecken: e.length };
|
||||
});
|
||||
console.log(` Nach dem Abschalten: Band ${weg.band ? "STEHT NOCH" : "weg"}, `
|
||||
+ `${weg.ecken} Ecken uebrig`);
|
||||
if (weg.band || weg.ecken) {
|
||||
console.log(" ACHTUNG: abgeschaltete Werbung steht weiter im Bild.");
|
||||
ausgang = 1;
|
||||
}
|
||||
}
|
||||
|
||||
await modi.kontext.close();
|
||||
await host.kontext.close();
|
||||
await gast2.kontext.close();
|
||||
@@ -2397,6 +2625,12 @@ await zuschauer.kontext.close();
|
||||
hoch: Math.round(le.getBoundingClientRect().height),
|
||||
zeilen: new Set(k.map((x) => Math.round(x.getBoundingClientRect().top))).size,
|
||||
rollt: r.scrollWidth > r.clientWidth + 1,
|
||||
/* WIE VIELE ES GIBT, ZAEHLT DIE SEITE SELBST. Hier stand
|
||||
frueher die feste Zahl 7; als ein achtes Register dazukam,
|
||||
meldete die Pruefung „nur 8 von 7". Eine Zahl, die jemand
|
||||
abschreibt, veraltet in dem Moment, in dem jemand anders
|
||||
weiterbaut. */
|
||||
wieviele: k.length,
|
||||
sichtbar: k.filter((x) => {
|
||||
const q = x.getBoundingClientRect();
|
||||
return q.left >= rr.left - 1 && q.right <= rr.right + 1;
|
||||
@@ -2426,7 +2660,8 @@ await zuschauer.kontext.close();
|
||||
ausgang = 1;
|
||||
} else {
|
||||
console.log(` Handy-Regie: ${l.hoch} px, ${l.zeilen} Zeile(n), rollt=${l.rollt}, `
|
||||
+ `${l.sichtbar} von 7 im Bild, Schild=${l.schild}, seitlich ${l.ueber} px`);
|
||||
+ `${l.sichtbar} von ${l.wieviele} im Bild, Schild=${l.schild}, `
|
||||
+ `seitlich ${l.ueber} px`);
|
||||
if (l.ueber > 0) console.log(` ueber die Kante: ${l.wer}`);
|
||||
/* SIE BRICHT UM, SEIT DEM 28.09.2026 -- UND DAS IST DER SINN.
|
||||
Vorher verlangte diese Stelle `rollt === true` und `zeilen
|
||||
@@ -2438,10 +2673,16 @@ await zuschauer.kontext.close();
|
||||
swippen müssen." Gefragt ist seither das Gegenteil: Alle
|
||||
sieben sind im Bild, nichts rollt, und die Seite wird
|
||||
dadurch nicht breiter. */
|
||||
if (l.rollt || l.sichtbar !== 7 || l.ueber > 0 || l.schild) {
|
||||
/* `wieviele >= 7` ist keine zweite feste Zahl, sondern die
|
||||
Untergrenze gegen den leeren Fall: Faende die Messung gar
|
||||
keine Register, waere `sichtbar === wieviele` mit 0 === 0
|
||||
erfuellt und die Pruefung gruen, ohne etwas angesehen zu
|
||||
haben. */
|
||||
if (l.rollt || l.wieviele < 7 || l.sichtbar !== l.wieviele
|
||||
|| l.ueber > 0 || l.schild) {
|
||||
console.log(` ACHTUNG: Die Regieleiste am Handy rollt (${l.rollt}), `
|
||||
+ `zeigt nur ${l.sichtbar} von 7 Registern oder schiebt die Seite `
|
||||
+ `${l.ueber} px breiter.`);
|
||||
+ `zeigt nur ${l.sichtbar} von ${l.wieviele} Registern oder schiebt `
|
||||
+ `die Seite ${l.ueber} px breiter.`);
|
||||
ausgang = 1;
|
||||
}
|
||||
}
|
||||
@@ -2568,5 +2809,6 @@ if (offenePunkte.length) {
|
||||
console.log(`\n=== ${offenePunkte.length} bekannte(r) offene(r) Punkt(e) ===`);
|
||||
for (const z of offenePunkte) console.log(` OFFEN: ${z}`);
|
||||
}
|
||||
|
||||
console.log("\nFertig.");
|
||||
process.exit(ausgang);
|
||||
|
||||
Reference in New Issue
Block a user