Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x 359x | 'use client'
import { useEffect, useMemo, useRef } from 'react'
import { useTTS } from '@/hooks/useTTS'
import { useAudioManager } from '@/hooks/useAudioManager'
interface UseTutorialAudioHelpOptions {
currentStepIndex: number
stepTitle: string | undefined
}
export function useTutorialAudioHelp({ currentStepIndex, stepTitle }: UseTutorialAudioHelpOptions) {
const { isEnabled, stop } = useAudioManager()
const lastStepIndexRef = useRef<number>(-1)
const sayWelcome = useTTS('tutorial-welcome', {
tone: 'tutorial-instruction',
say: { en: 'Welcome to the tutorial!' },
})
const sayLookAtAbacus = useTTS('tutorial-look-at-abacus', {
tone: 'tutorial-instruction',
say: { en: 'Look at the abacus.' },
})
const sayTapTheBead = useTTS('tutorial-tap-the-bead', {
tone: 'tutorial-instruction',
say: { en: 'Tap the bead.' },
})
const sayThisIsOne = useTTS('tutorial-this-is-one', {
tone: 'tutorial-instruction',
say: { en: 'This is one.' },
})
const sayMoveBeadUp = useTTS('tutorial-move-bead-up', {
tone: 'tutorial-instruction',
say: { en: 'Move the bead up.' },
})
const sayThisIsFive = useTTS('tutorial-this-is-five', {
tone: 'tutorial-instruction',
say: { en: 'This is five.' },
})
// For unmapped steps, use a synthetic clip ID with the step title as say text
const synthClipId = stepTitle ? `tutorial-step-${currentStepIndex}` : ''
const saySynth = useTTS(synthClipId, {
tone: 'tutorial-instruction',
say: stepTitle ? { en: stepTitle } : undefined,
})
const steps = useMemo(
() => [sayWelcome, sayLookAtAbacus, sayTapTheBead, sayThisIsOne, sayMoveBeadUp, sayThisIsFive],
[sayWelcome, sayLookAtAbacus, sayTapTheBead, sayThisIsOne, sayMoveBeadUp, sayThisIsFive]
)
useEffect(() => {
if (!isEnabled) return
if (currentStepIndex === lastStepIndexRef.current) return
lastStepIndexRef.current = currentStepIndex
const stepFn = steps[currentStepIndex]
if (stepFn) {
stepFn()
} else if (stepTitle) {
saySynth()
}
}, [isEnabled, currentStepIndex, stepTitle, steps, saySynth])
// Cleanup on unmount
useEffect(() => {
return () => stop()
}, [stop])
}
|