From d8a8254916260d3987110097a669d72f3b6edb88 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 05:44:12 +0200
Subject: [PATCH] Make YouTube lofi player autoplay on entering the rain page

---
 src/components/SubpageRain.astro | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/SubpageRain.astro b/src/components/SubpageRain.astro
index 89a7ed4..61885ac 100644
--- a/src/components/SubpageRain.astro
+++ b/src/components/SubpageRain.astro
@@ -8,6 +8,7 @@ window.rainData = function() {
         wind: 0,
         lofiFilter: 800,
         musicVolume: 30,
+        lofiSrc: '',
         drops: [], 
         audioCtx: null,
         noiseNode: null,
@@ -103,7 +104,7 @@ window.rainData = function() {
 <!-- Subpage: Rain Detail -->
 <div x-show="currentPage === 'page-rain'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8 bg-stone-950 relative overflow-hidden" 
     x-data="window.rainData()" 
-    x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => { generateDrops(value); updateAudio() }); $watch('lofiFilter', value => updateAudio()); $watch('currentPage', val => { if(val === 'page-rain') initAudio(); })">
+    x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => { generateDrops(value); updateAudio() }); $watch('lofiFilter', value => updateAudio()); $watch('currentPage', val => { if(val === 'page-rain') { initAudio(); lofiSrc = 'https://www.youtube.com/embed/jfKfPfyJRdk?autoplay=1'; } else { lofiSrc = ''; } })">
     
     <!-- Rain Container (Full Screen on this page) -->
     <div class="absolute inset-0 pointer-events-none z-0">
@@ -163,7 +164,7 @@ window.rainData = function() {
                 <span class="text-xs text-stone-400">Lofi Hip Hop Groove (YouTube Stream)</span>
             </div>
             <div class="rounded-lg overflow-hidden border border-stone-800">
-                <iframe width="100%" height="80" src="https://www.youtube.com/embed/jfKfPfyJRdk" title="Lofi Hip Hop" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                <iframe width="100%" height="80" :src="lofiSrc" title="Lofi Hip Hop" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
             </div>
         </div>