openreader/src/components/player/VoicesControl.tsx

43 lines
1.4 KiB
TypeScript

'use client';
import { useConfig } from '@/contexts/ConfigContext';
import { useTTS } from '@/contexts/TTSContext';
import { useCallback } from 'react';
import { VoicesControlBase } from '@/components/player/VoicesControlBase';
import { InfoIcon } from '@/components/icons/Icons';
import { getTtsLanguageCompatibilityWarnings } from '@/lib/shared/language';
export const VoicesControl = ({ availableVoices, setVoiceAndRestart }: {
availableVoices: string[];
setVoiceAndRestart: (voice: string) => void;
}) => {
const { ttsModel, providerType } = useConfig();
const { voice, resolvedLanguage } = useTTS();
const onChangeVoice = useCallback((nextVoice: string) => setVoiceAndRestart(nextVoice), [setVoiceAndRestart]);
const languageWarnings = getTtsLanguageCompatibilityWarnings({
model: ttsModel,
voice,
documentLanguage: resolvedLanguage,
});
return (
<div className="flex items-center gap-1">
<VoicesControlBase
availableVoices={availableVoices}
voice={voice || ''}
onChangeVoice={onChangeVoice}
providerType={providerType}
ttsModel={ttsModel}
/>
{languageWarnings.length > 0 ? (
<span
aria-label="Voice language warning"
title={languageWarnings.join(' ')}
className="text-warning"
>
<InfoIcon className="h-3.5 w-3.5" />
</span>
) : null}
</div>
);
}