Make rain controls and music player modules toggleable
This commit is contained in:
Felix Brabetz
@@ -13,6 +13,8 @@ window.rainData = function() {
|
||||
filterNode: null,
|
||||
gainNode: null,
|
||||
player: null,
|
||||
rainOpen: true,
|
||||
musicOpen: true,
|
||||
|
||||
generateDrops(val) {
|
||||
this.drops = [];
|
||||
@@ -61,7 +63,6 @@ window.rainData = function() {
|
||||
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];
|
||||
@@ -88,21 +89,16 @@ window.rainData = function() {
|
||||
},
|
||||
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();
|
||||
@@ -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>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="glass p-8 rounded-2xl border border-stone-800 space-y-6">
|
||||
<!-- Intensity -->
|
||||
<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>
|
||||
<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">
|
||||
<!-- Controls (Togglebar) -->
|
||||
<div class="glass p-8 rounded-2xl border border-stone-800">
|
||||
<div class="flex justify-between items-center cursor-pointer select-none" @click="rainOpen = !rainOpen">
|
||||
<div>
|
||||
<span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Regen-Steuerung</span>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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">
|
||||
<!-- Intensity -->
|
||||
<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>
|
||||
<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 -->
|
||||
<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>
|
||||
<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 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 class="text-emerald-400">Realtime Web Audio Rain</span>
|
||||
<!-- Lofi Filter -->
|
||||
<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>
|
||||
<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 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 class="text-emerald-400">Realtime Web Audio Rain</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- YouTube Player with Vocals/Diverse Beats -->
|
||||
<div class="glass p-6 rounded-2xl border border-stone-800 space-y-4">
|
||||
<div>
|
||||
<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>
|
||||
<!-- YouTube Player (Togglebar) -->
|
||||
<div class="glass p-6 rounded-2xl border border-stone-800">
|
||||
<div class="flex justify-between items-center cursor-pointer select-none" @click="musicOpen = !musicOpen">
|
||||
<div>
|
||||
<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 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 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 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>
|
||||
<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 -->
|
||||
|
||||
Reference in New Issue
Block a user