fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make rain controls and music player modules toggleable

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 06:11:12 +02:00
parent 6f533819ac
commit 3f59fa78cd
1 changed files with 46 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageRain.astro
+46 -35
View File
@@ -13,6 +13,8 @@ window.rainData = function() {
filterNode: null, filterNode: null,
gainNode: null, gainNode: null,
player: null, player: null,
rainOpen: true,
musicOpen: true,
generateDrops(val) { generateDrops(val) {
this.drops = []; this.drops = [];
@@ -61,7 +63,6 @@ window.rainData = function() {
if (window.YT && window.YT.Player) { if (window.YT && window.YT.Player) {
this.initPlayer(); this.initPlayer();
} else { } else {
// Skript dynamisch laden
let tag = document.createElement('script'); let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api"; tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0]; let firstScriptTag = document.getElementsByTagName('script')[0];
@@ -88,21 +89,16 @@ window.rainData = function() {
}, },
events: { events: {
'onReady': (event) => { 'onReady': (event) => {
// Versuche unmuted abzuspielen
let promise = event.target.playVideo(); let promise = event.target.playVideo();
// Manche Browser geben ein Promise zurück
if (promise && promise.catch) { if (promise && promise.catch) {
promise.catch(() => { promise.catch(() => {
// Blockiert! Versuche gemutet.
event.target.mute(); event.target.mute();
event.target.playVideo(); event.target.playVideo();
}); });
} }
}, },
'onStateChange': (event) => { 'onStateChange': (event) => {
// Wenn der Player nicht spielt obwohl er sollte
if (event.data === YT.PlayerState.UNSTARTED || event.data === YT.PlayerState.PAUSED) { if (event.data === YT.PlayerState.UNSTARTED || event.data === YT.PlayerState.PAUSED) {
// Erneuter Versuch, falls geblockt
setTimeout(() => { setTimeout(() => {
if (this.player.getPlayerState() !== YT.PlayerState.PLAYING) { if (this.player.getPlayerState() !== YT.PlayerState.PLAYING) {
this.player.mute(); this.player.mute();
@@ -151,43 +147,58 @@ window.rainData = function() {
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Regen für Gemütlichkeit</h1> <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Regen für Gemütlichkeit</h1>
</div> </div>
<!-- Controls --> <!-- Controls (Togglebar) -->
<div class="glass p-8 rounded-2xl border border-stone-800 space-y-6"> <div class="glass p-8 rounded-2xl border border-stone-800">
<!-- Intensity --> <div class="flex justify-between items-center cursor-pointer select-none" @click="rainOpen = !rainOpen">
<div> <div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Regen-Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span> Tropfen</label> <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Regen-Steuerung</span>
<input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500"> <span class="text-xs text-stone-500 block mt-1">Intensität, Wind und Filter</span>
</div>
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': rainOpen }"></i>
</div> </div>
<!-- Wind --> <div x-show="rainOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-6 mt-6 pt-6 border-t border-stone-800">
<div> <!-- Intensity -->
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Windstärke (Neigung): <span x-text="wind" class="text-emerald-400"></span>°</label> <div>
<input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500"> <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Regen-Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span> Tropfen</label>
</div> <input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div>
<!-- Wind -->
<div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Windstärke (Neigung): <span x-text="wind" class="text-emerald-400"></span>°</label>
<input type="range" min="-45" max="45" x-model="wind" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div>
<!-- Lofi Filter --> <!-- Lofi Filter -->
<div> <div>
<label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Lofi-Filter (Muffigkeit): <span x-text="lofiFilter" class="text-emerald-400"></span> Hz</label> <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Lofi-Filter (Muffigkeit): <span x-text="lofiFilter" class="text-emerald-400"></span> Hz</label>
<input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500"> <input type="range" min="200" max="2000" x-model="lofiFilter" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
</div> </div>
<div class="flex justify-between text-xs text-stone-600 font-mono pt-4 border-t border-stone-800"> <div class="flex justify-between text-xs text-stone-600 font-mono pt-4 border-t border-stone-800">
<span>Sound läuft automatisch</span> <span>Sound läuft automatisch</span>
<span class="text-emerald-400">Realtime Web Audio Rain</span> <span class="text-emerald-400">Realtime Web Audio Rain</span>
</div>
</div> </div>
</div> </div>
<!-- YouTube Player with Vocals/Diverse Beats --> <!-- YouTube Player (Togglebar) -->
<div class="glass p-6 rounded-2xl border border-stone-800 space-y-4"> <div class="glass p-6 rounded-2xl border border-stone-800">
<div> <div class="flex justify-between items-center cursor-pointer select-none" @click="musicOpen = !musicOpen">
<span class="block text-xs font-mono text-stone-500 uppercase mb-1 tracking-widest">Musik (Lofi mit Vocals)</span> <div>
<span class="text-xs text-stone-400">Echte Tracks für mehr Vielfalt & Gesang</span> <span class="block text-xs font-mono text-emerald-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>
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180': musicOpen }"></i>
</div> </div>
<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 x-show="musicOpen" x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-4 mt-6 pt-6 border-t border-stone-800">
<div id="lofi-player"></div> <div class="rounded-lg overflow-hidden border border-stone-800 aspect-video bg-stone-900">
<div id="lofi-player"></div>
</div>
<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> </div>
<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> </div>
<!-- Content --> <!-- Content -->