<template>
  <div class="p-4">
    <h1 class="text-xl font-bold mb-4">Howler → MediaStream + volume Fade-In</h1>
    <h3>Startet, Kontrolle der Lautstärke über volume-API, aber erst kommt 100% Lautstärke Audio, bevor es verstummt und dann einfaded</h3>
    <button
      class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition"
      @click="startCaptureWithVolumeRamp"
    >
      Starten & Lautstärke einblenden
    </button>
    <div v-if="mediaStream" class="mt-4 text-green-700 font-mono">
      ✅ MediaStream erzeugt!
    </div>
    <p v-if="error" class="text-red-600 mt-2">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Howl } from 'howler'
import tracksConfig from '~/tracks.config'

const mediaStream = ref(null)
const error = ref(null)

const startCaptureWithVolumeRamp = async () => {
  try {
    const sound = new Howl({
      src: [tracksConfig.lagoon_48_mp3_src],
      html5: true,
      preload: true,
      muted: true
    })

    await new Promise(resolve => sound.once('load', resolve))

    const audioElement = sound._sounds[0]._node

    // Volume auf 0 (mute) setzen
    audioElement.volume = 0

    // captureStream vor play aufrufen
    const stream = audioElement.captureStream()

    // Starte Audio
    sound.play()

    // Starte Volume-Ramp (linear über ~3 Sekunden)
    let volume = 0
    const step = 0.05 // Schrittgröße
    const interval = 150 // ms zwischen Schritten

    const ramp = setInterval(() => {
      volume += step
      audioElement.volume = Math.min(1, volume)

      if (volume >= 1) {
        clearInterval(ramp)
      }
    }, interval)

    mediaStream.value = stream
  } catch (err) {
    useNuxtApp().$logger.error(err)
    error.value = 'Fehler beim Start: ' + err.message
  }
}
</script>
