homeai/homeai-dashboard/src/hooks/useTtsPlayback.js

import { useState, useRef, useCallback } from 'react'
import { synthesize } from '../lib/api'

export function useTtsPlayback(voice) {
  const [isPlaying, setIsPlaying] = useState(false)
  const audioCtxRef = useRef(null)
  const sourceRef = useRef(null)

  const getAudioContext = () => {
    if (!audioCtxRef.current || audioCtxRef.current.state === 'closed') {
      audioCtxRef.current = new AudioContext()
    }
    return audioCtxRef.current
  }

  const speak = useCallback(async (text) => {
    if (!text) return

    // Stop any current playback
    if (sourceRef.current) {
      try { sourceRef.current.stop() } catch {}
    }

    setIsPlaying(true)
    try {
      const audioData = await synthesize(text, voice)
      const ctx = getAudioContext()
      if (ctx.state === 'suspended') await ctx.resume()

      const audioBuffer = await ctx.decodeAudioData(audioData)
      const source = ctx.createBufferSource()
      source.buffer = audioBuffer
      source.connect(ctx.destination)
      sourceRef.current = source

      source.onended = () => {
        setIsPlaying(false)
        sourceRef.current = null
      }
      source.start()
    } catch (err) {
      console.error('TTS playback error:', err)
      setIsPlaying(false)
    }
  }, [voice])

  const stop = useCallback(() => {
    if (sourceRef.current) {
      try { sourceRef.current.stop() } catch {}
      sourceRef.current = null
    }
    setIsPlaying(false)
  }, [])

  return { isPlaying, speak, stop }
}