All files / web/src/hooks useAudioManager.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useCallback, useSyncExternalStore } from 'react'
import { useAudioManagerInstance } from '@/contexts/AudioManagerContext'
import type { ManagerSnapshot, SubtitleAnchor } from '@/lib/audio/TtsAudioManager'

const LS_KEY_ENABLED = 'audio-help-enabled'
const LS_KEY_VOLUME = 'audio-help-volume'
const LS_KEY_SUBTITLE_SPEED = 'audio-subtitle-speed'

export interface UseAudioManagerReturn extends ManagerSnapshot {
  stop: () => void
  setEnabled: (enabled: boolean) => void
  setVolume: (volume: number) => void
  dismissSubtitle: () => void
  setSubtitleDurationMultiplier: (multiplier: number) => void
  setSubtitleBottomOffset: (offset: number) => void
  setSubtitleAnchor: (anchor: SubtitleAnchor) => void
}

export function useAudioManager(): UseAudioManagerReturn {
  const manager = useAudioManagerInstance()

  const snapshot = useSyncExternalStore(manager.subscribe, manager.getSnapshot, manager.getSnapshot)

  const stop = useCallback(() => manager.stop(), [manager])

  const setEnabled = useCallback(
    (enabled: boolean) => {
      manager.configure({ enabled })
      try {
        localStorage.setItem(LS_KEY_ENABLED, String(enabled))
      } catch {}
    },
    [manager]
  )

  const setVolume = useCallback(
    (v: number) => {
      const clamped = Math.max(0, Math.min(1, v))
      manager.configure({ volume: clamped })
      try {
        localStorage.setItem(LS_KEY_VOLUME, String(Math.round(clamped * 100)))
      } catch {}
    },
    [manager]
  )

  const dismissSubtitle = useCallback(() => manager.dismissSubtitle(), [manager])

  const setSubtitleDurationMultiplier = useCallback(
    (multiplier: number) => {
      manager.configure({ subtitleDurationMultiplier: multiplier })
      try {
        localStorage.setItem(LS_KEY_SUBTITLE_SPEED, String(multiplier))
      } catch {}
    },
    [manager]
  )

  const setSubtitleBottomOffset = useCallback(
    (offset: number) => {
      manager.configure({ subtitleBottomOffset: offset })
    },
    [manager]
  )

  const setSubtitleAnchor = useCallback(
    (anchor: SubtitleAnchor) => {
      manager.configure({ subtitleAnchor: anchor })
    },
    [manager]
  )

  return {
    ...snapshot,
    stop,
    setEnabled,
    setVolume,
    dismissSubtitle,
    setSubtitleDurationMultiplier,
    setSubtitleBottomOffset,
    setSubtitleAnchor,
  }
}