From 6f533819acd9974c9157204bad6092b4b67a53a6 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 06:07:47 +0200
Subject: [PATCH] Use YouTube Iframe API for smart autoplay with fallback to
 muted

---
 src/components/SubpageRain.astro | 70 ++++++++++++++++++++++++++++++--
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/components/SubpageRain.astro b/src/components/SubpageRain.astro
index 9fddc9b..320b74f 100644
--- a/src/components/SubpageRain.astro
+++ b/src/components/SubpageRain.astro
@@ -12,6 +12,7 @@ window.rainData = function() {
         noiseNode: null,
         filterNode: null,
         gainNode: null,
+        player: null,
         
         generateDrops(val) { 
             this.drops = []; 
@@ -48,11 +49,72 @@ window.rainData = function() {
                 
                 this.noiseNode.start();
                 
+                // --- YOUTUBE API ---
+                this.loadYouTubeAPI();
+                
             } catch(e) {
                 console.log('Audio failed', e);
             }
         },
         
+        loadYouTubeAPI() {
+            if (window.YT && window.YT.Player) {
+                this.initPlayer();
+            } else {
+                // Skript dynamisch laden
+                let tag = document.createElement('script');
+                tag.src = "https://www.youtube.com/iframe_api";
+                let firstScriptTag = document.getElementsByTagName('script')[0];
+                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+                
+                window.onYouTubeIframeAPIReady = () => {
+                    this.initPlayer();
+                };
+            }
+        },
+        
+        initPlayer() {
+            this.player = new YT.Player('lofi-player', {
+                height: '100%',
+                width: '100%',
+                videoId: 'jfKfPfyJRdk',
+                playerVars: {
+                    'autoplay': 1,
+                    'mute': 0,
+                    'controls': 1,
+                    'rel': 0,
+                    'modestbranding': 1,
+                    'enablejsapi': 1
+                },
+                events: {
+                    'onReady': (event) => {
+                        // Versuche unmuted abzuspielen
+                        let promise = event.target.playVideo();
+                        // Manche Browser geben ein Promise zurück
+                        if (promise && promise.catch) {
+                            promise.catch(() => {
+                                // Blockiert! Versuche gemutet.
+                                event.target.mute();
+                                event.target.playVideo();
+                            });
+                        }
+                    },
+                    'onStateChange': (event) => {
+                        // Wenn der Player nicht spielt obwohl er sollte
+                        if (event.data === YT.PlayerState.UNSTARTED || event.data === YT.PlayerState.PAUSED) {
+                            // Erneuter Versuch, falls geblockt
+                            setTimeout(() => {
+                                if (this.player.getPlayerState() !== YT.PlayerState.PLAYING) {
+                                    this.player.mute();
+                                    this.player.playVideo();
+                                }
+                            }, 1000);
+                        }
+                    }
+                }
+            });
+        },
+        
         updateAudio() {
             if (this.gainNode) {
                 this.gainNode.gain.linearRampToValueAtTime(this.rainIntensity / 200 * 0.05, this.audioCtx.currentTime + 0.2);
@@ -121,11 +183,11 @@ window.rainData = function() {
                 <span class="block text-xs font-mono text-stone-500 uppercase mb-1 tracking-widest">Musik (Lofi mit Vocals)</span>
                 <span class="text-xs text-stone-400">Echte Tracks für mehr Vielfalt & Gesang</span>
             </div>
-            <div class="rounded-lg overflow-hidden border border-stone-800 aspect-video">
-                <!-- Größerer Player für bessere Bedienung -->
-                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/jfKfPfyJRdk?autoplay=1" title="Lofi Hip Hop" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            <div class="rounded-lg overflow-hidden border border-stone-800 aspect-video bg-stone-900">
+                <!-- Der Player wird hier von der API eingefügt -->
+                <div id="lofi-player"></div>
             </div>
-            <p class="text-xs text-stone-500 leading-relaxed">Da echte Vocals und komplexe Beats nicht im Browser generiert werden können, nutzen wir diesen Stream. Spiele ihn ab und nutze die Regler oben für den Regensound!</p>
+            <p class="text-xs text-stone-500 leading-relaxed">Browser blockieren Autoplay oft. Die KI versucht zuerst mit Ton abzuspielen. Falls das fehlschlägt, wird das Video stummgeschaltet automatisch gestartet. Du kannst den Ton dann einfach am Player aktivieren!</p>
         </div>
 
         <!-- Content -->