https://trialog-8a95b.web.app/src/shared/presentation/ladevilla.js?v=5.340.0

1/** Die 60-fps-Aufnahme nutzt den Video-Decoder statt animierter Einzelbilder. */
2export function verbindeLadevilla(szene, bewegung, uhr = () => performance.now()) {
3  const video = szene?.querySelector('[data-ladevilla-video]');
4  const bild = szene?.querySelector('[data-ladevilla-bild]');
5  const buehne = szene?.querySelector('.ladebuehne');
6  const schirm = szene?.closest('.loading-screen');
7  if (!video || !bild || !buehne || !schirm) return;
8
9  const animationen = buehne.getAnimations({ subtree: true });
10  const beginn = uhr() - (animationen[0]?.currentTime ?? 0);
11  let beendet = false;
12  let startversucht = false;
13  const still = () => bewegung.matches || schirm.classList.contains('is-schnell');
14  const anhalten = () => animationen.forEach(a => a.pause());
15  const zurueck = () => {
16    video.pause();
17    szene.classList.remove('is-video-bereit');
18    if (!still()) {
19      szene.classList.remove('is-blender-bereit');
20      animationen.forEach(a => { a.currentTime = uhr() - beginn; a.play(); });
21    }
22  };
23  const standbild = () => {
24    video.pause();
25    szene.classList.remove('is-video-bereit');
26    if (bild.complete && bild.naturalWidth > 0) {
27      szene.classList.add('is-blender-bereit');
28      anhalten();
29    }
30  };
31  const starten = () => {
32    if (beendet || startversucht || still()) return;
33    // 3,47 s bis zum fertigen Modell + hoechstens 0,8 s Anlaufzeit.
34    if (uhr() - beginn > 800) return;
35    startversucht = true;
36    anhalten();
37    video.play().catch(zurueck);
38  };
39  const modus = () => {
40    if (still()) { standbild(); return; }
41    zurueck();
42    if (!video.getAttribute('src')) video.src = video.dataset.src;
43    if (video.readyState >= 3) starten();
44  };
45  video.addEventListener('canplay', starten);
46  video.addEventListener('playing', () => {
47    if (beendet || still()) { video.pause(); return; }
48    if (uhr() - beginn > 800) { zurueck(); return; }
49    szene.classList.add('is-blender-bereit', 'is-video-bereit');
50  });
51  video.addEventListener('error', zurueck);
52  bild.addEventListener('load', () => { if (still()) standbild(); });
53  bewegung.addEventListener('change', modus);
54  const beobachter = new MutationObserver(() => {

55    if (schirm.classList.contains('is-fertig') || !schirm.isConnected) {
56      beendet = true;
57      video.pause();
58      bewegung.removeEventListener('change', modus);
59      beobachter.disconnect();
60    } else modus();
61  });
62  beobachter.observe(schirm, { attributes: true, attributeFilter: ['class'] });
63  modus();
64}
65
66if (typeof document !== 'undefined') {
67  verbindeLadevilla(document.querySelector('.ladeszene'), window.matchMedia('(prefers-reduced-motion: reduce)'));
68}