Phil/philflow.io
1
0
Fork 0
Code Issues 21 Pull requests Projects Releases Packages Wiki Activity Actions

feat(startseite): Video-Testimonials von Kai und Wolfgang live bringen #65

Merged
Phil merged 2 commits from feat/video-testimonials into main 2026-09-06 21:14:00 +00:00
Conversation 0 Commits 2 Files changed 19 +720 -78
Phil commented 2026-09-06 20:53:03 +00:00
Owner
Copy link

Die Sektion "Stimmen" war seit dem Relaunch fertig gestaltet, stand aber nur in der internen Vorschau preview/v2-kette. Sie sitzt jetzt als Craft-Block auf der deutschen Startseite, direkt hinter der Partner-Sektion.

Was drin ist

Gestaltung — pl_videoTestimonialSection.twig traegt die Bauform aus dem Rohbau: zwei Buehnen nebeneinander ab 700 px, darunter gestapelt, Farbband durch beide Standbilder, Name plus verlinkte eigene Domain plus Laufzeit. CSS als src/styles/components/video-testimonial.scss, Klick-Fassade als src/scripts/modules/VideoTestimonials.js. Muster: die Partner-Sektion (ab712e4).

Inhalte im CMS — der Datentyp videoTestimonial hat drei neue Felder (testimonialSiteUrl, testimonialDuration, captionsFile), der Bearbeitungs-Bildschirm der Sektion nutzt jetzt titleBlock + textBlock wie die uebrigen Live-Bloecke. Eine neue Stimme ist ein Backend-Eintrag, kein Deploy.

Untertitel — beide Clips sind per Parakeet transkribiert und als WebVTT abgelegt. Der <track> haengt ohne default: die Spur ist beim Start aus und wird ueber das Bedienfeld des Browsers zugeschaltet.

Zwei Korrekturen gegenueber dem Rohbau

  • Domainlink erreicht 44 px Tapziel-Hoehe (Rohbau: 120x24 px)
  • Farbband animiert transform statt width/height (Rohbau: s09-stimmen.stil.twig:162)

Geprueft (lokale Instanz des Arbeitszweigs, Port 8091)

  • Sektion rendert bei 1440x900 zweispaltig (671 px je Saeule), bei 390x844 gestapelt, kein horizontaler Overflow
  • Klick tauscht Standbild gegen Abspieler; zweites Video pausiert das erste (gemessen: Kai paused=true bei 9,9 s, waehrend Wolfgang laeuft)
  • Untertitelspur laedt, 9 Cues, mode=disabled beim Start, nach Einschalten korrekt getimter Text
  • Tapziele beider Domainlinks 44 px in beiden Breiten (vorher gemessene 42 px, deshalb min-height statt Innenabstand — die Schriftgroesse haengt an clamp())
  • Sichtvergleich gegen den Rohbau preview/v2-kette: gleiche Komposition, gleiche Bandfuehrung; die Typografie folgt der Live-Seite statt dem Rohbau
  • design-gates: overflow, slop_scan, no_placeholders, landmarks PASS. typo_ladder, balance, tap_targets, section_forms sind unveraendert gegenueber der Messung ohne diese Sektion — Altbestand der Seite.

Der reduced_motion-Befund gehoert nicht dieser Sektion

Das Gate meldet FAIL. Nachgemessen mit Playwright unter reducedMotion: 'reduce', Viewport 390x844, Zustand nach 1 s ohne Scroll:

aosGesamt:        50
verstecktGesamt:  50    (opacity < 0.9)
vtOpacity:        1     ← diese Sektion

Alle 50 AOS-Elemente der Seite sind unsichtbar, diese Sektion als einzige nicht. Zusaetzlich: ihr Ausschnitt ist bei 1 s pixelgleich zum 7-s-Zustand (gleiche Hoehe, gleiche Position, beide Poster complete). Sie verlaengert die Seite lediglich, wodurch mehr AOS-Sektionen unterhalb des Anfangsfensters landen — das verschiebt den Messwert, verursacht ihn aber nicht.

Zwei Reparaturversuche wurden im Rahmen dieses PR gemacht und wieder zurueckgenommen, weil beide messbar verschlimmern (fehlende Tinte stieg von 2,4 % auf 16-20 %): AOS.init({ disable: ... }) verhindert nur das Animieren, nicht das Verstecken; ein globales [data-aos] { opacity: 1 !important } ueberschreibt legitime Dauer-Transformationen anderer Sektionen. Der saubere Fix braucht eine eigene Runde mit Sichtpruefung ueber alle Sektionen: #67.

Nicht geprueft

Produktion. Der Deploy zieht Code, aber nicht den Content — die Bloecke leben in der Datenbank und muessen nach docs/DEPLOYMENT.md separat nachgezogen werden. Ebenso ungeprueft: Wiedergabe in Safari (nur Chromium gemessen).

Closes #61

🤖 Generated with Claude Code

https://claude.ai/code/session_01D5iRaq181cv8X8eHW5JEWb

Die Sektion "Stimmen" war seit dem Relaunch fertig gestaltet, stand aber nur in der internen Vorschau `preview/v2-kette`. Sie sitzt jetzt als Craft-Block auf der deutschen Startseite, direkt hinter der Partner-Sektion. ## Was drin ist **Gestaltung** — `pl_videoTestimonialSection.twig` traegt die Bauform aus dem Rohbau: zwei Buehnen nebeneinander ab 700 px, darunter gestapelt, Farbband durch beide Standbilder, Name plus verlinkte eigene Domain plus Laufzeit. CSS als `src/styles/components/video-testimonial.scss`, Klick-Fassade als `src/scripts/modules/VideoTestimonials.js`. Muster: die Partner-Sektion (`ab712e4`). **Inhalte im CMS** — der Datentyp `videoTestimonial` hat drei neue Felder (`testimonialSiteUrl`, `testimonialDuration`, `captionsFile`), der Bearbeitungs-Bildschirm der Sektion nutzt jetzt `titleBlock` + `textBlock` wie die uebrigen Live-Bloecke. Eine neue Stimme ist ein Backend-Eintrag, kein Deploy. **Untertitel** — beide Clips sind per Parakeet transkribiert und als WebVTT abgelegt. Der `<track>` haengt **ohne** `default`: die Spur ist beim Start aus und wird ueber das Bedienfeld des Browsers zugeschaltet. ## Zwei Korrekturen gegenueber dem Rohbau - Domainlink erreicht 44 px Tapziel-Hoehe (Rohbau: 120x24 px) - Farbband animiert `transform` statt `width`/`height` (Rohbau: `s09-stimmen.stil.twig:162`) ## Geprueft (lokale Instanz des Arbeitszweigs, Port 8091) - Sektion rendert bei 1440x900 zweispaltig (671 px je Saeule), bei 390x844 gestapelt, kein horizontaler Overflow - Klick tauscht Standbild gegen Abspieler; zweites Video pausiert das erste (gemessen: Kai `paused=true` bei 9,9 s, waehrend Wolfgang laeuft) - Untertitelspur laedt, 9 Cues, `mode=disabled` beim Start, nach Einschalten korrekt getimter Text - Tapziele beider Domainlinks 44 px in beiden Breiten (vorher gemessene 42 px, deshalb `min-height` statt Innenabstand — die Schriftgroesse haengt an `clamp()`) - Sichtvergleich gegen den Rohbau `preview/v2-kette`: gleiche Komposition, gleiche Bandfuehrung; die Typografie folgt der Live-Seite statt dem Rohbau - design-gates: `overflow`, `slop_scan`, `no_placeholders`, `landmarks` PASS. `typo_ladder`, `balance`, `tap_targets`, `section_forms` sind unveraendert gegenueber der Messung ohne diese Sektion — Altbestand der Seite. ## Der reduced_motion-Befund gehoert nicht dieser Sektion Das Gate meldet FAIL. Nachgemessen mit Playwright unter `reducedMotion: 'reduce'`, Viewport 390x844, Zustand nach 1 s ohne Scroll: ``` aosGesamt: 50 verstecktGesamt: 50 (opacity < 0.9) vtOpacity: 1 ← diese Sektion ``` **Alle** 50 AOS-Elemente der Seite sind unsichtbar, diese Sektion als einzige nicht. Zusaetzlich: ihr Ausschnitt ist bei 1 s pixelgleich zum 7-s-Zustand (gleiche Hoehe, gleiche Position, beide Poster `complete`). Sie verlaengert die Seite lediglich, wodurch mehr AOS-Sektionen unterhalb des Anfangsfensters landen — das verschiebt den Messwert, verursacht ihn aber nicht. Zwei Reparaturversuche wurden im Rahmen dieses PR gemacht **und wieder zurueckgenommen**, weil beide messbar verschlimmern (fehlende Tinte stieg von 2,4 % auf 16-20 %): `AOS.init({ disable: ... })` verhindert nur das Animieren, nicht das Verstecken; ein globales `[data-aos] { opacity: 1 !important }` ueberschreibt legitime Dauer-Transformationen anderer Sektionen. Der saubere Fix braucht eine eigene Runde mit Sichtpruefung ueber alle Sektionen: **#67**. ## Nicht geprueft Produktion. Der Deploy zieht Code, aber **nicht** den Content — die Bloecke leben in der Datenbank und muessen nach `docs/DEPLOYMENT.md` separat nachgezogen werden. Ebenso ungeprueft: Wiedergabe in Safari (nur Chromium gemessen). Closes #61 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01D5iRaq181cv8X8eHW5JEWb
Der Block "Video Testimonial Section" bekommt statt des eigenen
heading-Sonderwegs die globalen Felder titleBlock und textBlock,
identisch zum partnerSection-Block. Damit hat die Sektion neben der
Ueberschrift auch einen Vorspann.

Neu fuer den verschachtelten Eintrag "Video Testimonial":
testimonialSiteUrl (Pflicht), testimonialDuration und captionsFile
(Assets, Volume Videos, Untertitel-Dateikind). posterImage zeigt jetzt
auf ein eigenes Assets-Feld im Volume Videos statt auf das globale
image-Feld, das auf das Volume Images beschraenkt ist und die
Posterbilder darum nicht zur Auswahl angeboten hat.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D5iRaq181cv8X8eHW5JEWb
Die Sektion "Stimmen" lag seit dem Relaunch nur im Rohbau unter
_components/relaunch/v2/ und war ueber die interne Vorschau erreichbar.
Sie wandert nach dem Muster der Partner-Sektion (ab712e4) in den
Craft-Block: Bauform in pl_videoTestimonialSection.twig, CSS als
components/video-testimonial.scss, Klick-Fassade als eigenes JS-Modul.

Zwei Korrekturen gegenueber dem Rohbau, beide aus gemessenen Befunden:
der Domainlink erreicht jetzt 44 px Tapziel-Hoehe (Rohbau 120x24), und
das Farbband animiert transform statt width/height.

Untertitel: der track wird ohne default angehaengt, damit die Spur beim
Start aus ist und ueber das Bedienfeld des Browsers zugeschaltet wird.

Refs #61
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01D5iRaq181cv8X8eHW5JEWb
Phil merged commit 666827c5fe into main 2026-09-06 21:14:00 +00:00
Phil deleted branch feat/video-testimonials 2026-09-06 21:14:00 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Phil/philflow.io!65
No description provided.