diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx index 8d8ce8c1..ce69c763 100644 --- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx +++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx @@ -13,11 +13,7 @@ import { import { useEffect, useMemo, useState } from 'react' import { ConnectionState, RoomEvent } from 'livekit-client' import { useTranslation } from 'react-i18next' -import { - RecordingLanguage, - RecordingStatus, - recordingStore, -} from '@/stores/recording' +import { RecordingStatus, recordingStore } from '@/stores/recording' import { NotificationType, @@ -32,6 +28,7 @@ import { FeatureFlags } from '@/features/analytics/enums' import { NoAccessView } from './NoAccessView' import { HStack, VStack } from '@/styled-system/jsx' import { Checkbox } from '@/primitives/Checkbox' +import { useTranscriptionLanguage } from '@/features/settings' export const ScreenRecordingSidePanel = () => { const { data } = useConfig() @@ -51,6 +48,8 @@ export const ScreenRecordingSidePanel = () => { ) const { notifyParticipants } = useNotifyParticipants() + const { selectedLanguageKey, isLanguageSetToAuto } = + useTranscriptionLanguage() const roomId = useRoomId() @@ -109,8 +108,8 @@ export const ScreenRecordingSidePanel = () => { ) } else { const recordingOptions = { - ...(recordingSnap.language != RecordingLanguage.AUTOMATIC && { - language: recordingSnap.language, + ...(!isLanguageSetToAuto && { + language: selectedLanguageKey, }), ...(includeTranscript && { transcribe: true }), } diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx index 5c6c5a8c..d72442e9 100644 --- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx +++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx @@ -14,11 +14,7 @@ import { import { useEffect, useMemo, useState } from 'react' import { ConnectionState, RoomEvent } from 'livekit-client' import { useTranslation } from 'react-i18next' -import { - RecordingLanguage, - RecordingStatus, - recordingStore, -} from '@/stores/recording' +import { RecordingStatus } from '@store/recording' import { FeatureFlags } from '@/features/analytics/enums' import { NotificationType, @@ -35,7 +31,7 @@ import { Checkbox } from '@/primitives/Checkbox.tsx' import { useSettingsDialog, SettingsDialogExtendedKey, - useTranscriptionLanguageOptions, + useTranscriptionLanguage, } from '@/features/settings' import { NoAccessView } from './NoAccessView' @@ -52,7 +48,8 @@ export const TranscriptSidePanel = () => { const recordingSnap = useSnapshot(recordingStore) const { notifyParticipants } = useNotifyParticipants() - const languageOptions = useTranscriptionLanguageOptions() + const { selectedLanguageKey, selectedLanguageLabel, isLanguageSetToAuto } = + useTranscriptionLanguage() const { openSettingsDialog } = useSettingsDialog() @@ -125,8 +122,9 @@ export const TranscriptSidePanel = () => { : RecordingMode.Transcript const recordingOptions = { - ...(recordingSnap.language != RecordingLanguage.AUTOMATIC && { - language: recordingSnap.language, + ...(!isLanguageSetToAuto && { + language: selectedLanguageKey, + }), }), ...(includeScreenRecording && { transcribe: true }), } @@ -327,11 +325,7 @@ export const TranscriptSidePanel = () => { openSettingsDialog(SettingsDialogExtendedKey.TRANSCRIPTION) } > - { - languageOptions.find( - (option) => option.key == recordingSnap.language - )?.label - } + {selectedLanguageLabel} diff --git a/src/frontend/src/features/settings/components/tabs/TranscriptionTab.tsx b/src/frontend/src/features/settings/components/tabs/TranscriptionTab.tsx index 3e859b0a..d52eaf16 100644 --- a/src/frontend/src/features/settings/components/tabs/TranscriptionTab.tsx +++ b/src/frontend/src/features/settings/components/tabs/TranscriptionTab.tsx @@ -3,7 +3,7 @@ import { Field, H } from '@/primitives' import { useTranslation } from 'react-i18next' import { RecordingLanguage, recordingStore } from '@/stores/recording' import { useSnapshot } from 'valtio' -import { useTranscriptionLanguageOptions } from '../../hook/useTranscriptionLanguageOptions' +import { useTranscriptionLanguage } from '@/features/settings' export type TranscriptionTabProps = Pick @@ -11,7 +11,7 @@ export const TranscriptionTab = ({ id }: TranscriptionTabProps) => { const { t } = useTranslation('settings', { keyPrefix: 'transcription' }) const recordingSnap = useSnapshot(recordingStore) - const languageOptions = useTranscriptionLanguageOptions() + const { languageOptions } = useTranscriptionLanguage() return ( diff --git a/src/frontend/src/features/settings/hook/useTranscriptionLanguage.ts b/src/frontend/src/features/settings/hook/useTranscriptionLanguage.ts new file mode 100644 index 00000000..36e11470 --- /dev/null +++ b/src/frontend/src/features/settings/hook/useTranscriptionLanguage.ts @@ -0,0 +1,53 @@ +import { useMemo } from 'react' +import { RecordingLanguage, recordingStore } from '@/stores/recording' +import { useTranslation } from 'react-i18next' +import { useSnapshot } from 'valtio/index' + +export const useTranscriptionLanguage = () => { + const { t } = useTranslation('settings', { keyPrefix: 'transcription' }) + + const recordingSnap = useSnapshot(recordingStore) + + const languages = useMemo( + () => [ + { + key: RecordingLanguage.FRENCH, + label: t('language.options.french'), + }, + { + key: RecordingLanguage.ENGLISH, + label: t('language.options.english'), + }, + { + key: RecordingLanguage.AUTOMATIC, + label: t('language.options.auto'), + }, + ], + [t] + ) + + const languageOptions = useMemo(() => { + return languages.map((i) => ({ + key: i.key, + value: i.key, + label: i.label, + })) + }, [languages]) + + const { selectedLanguageKey, selectedLanguageLabel } = useMemo(() => { + const selectedLanguageLabel = languages.find( + (option) => option.key === recordingSnap.language + )?.label + + const selectedLanguageKey = recordingSnap.language + + return { selectedLanguageKey, selectedLanguageLabel } + }, [recordingSnap.language, languages]) + + return { + languageOptions, + selectedLanguageKey, + selectedLanguageLabel, + isLanguageSetToAuto: selectedLanguageKey === RecordingLanguage.AUTOMATIC, + } +} diff --git a/src/frontend/src/features/settings/hook/useTranscriptionLanguageOptions.ts b/src/frontend/src/features/settings/hook/useTranscriptionLanguageOptions.ts deleted file mode 100644 index f0dfc336..00000000 --- a/src/frontend/src/features/settings/hook/useTranscriptionLanguageOptions.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { useMemo } from 'react' -import { RecordingLanguage } from '@/stores/recording' -import { useTranslation } from 'react-i18next' - -export const useTranscriptionLanguageOptions = () => { - const { t } = useTranslation('settings', { keyPrefix: 'transcription' }) - - return useMemo( - () => [ - { - key: RecordingLanguage.FRENCH, - value: RecordingLanguage.FRENCH, - label: t('language.options.french'), - }, - { - key: RecordingLanguage.ENGLISH, - value: RecordingLanguage.ENGLISH, - label: t('language.options.english'), - }, - { - key: RecordingLanguage.AUTOMATIC, - value: RecordingLanguage.AUTOMATIC, - label: t('language.options.auto'), - }, - ], - [t] - ) -} diff --git a/src/frontend/src/features/settings/index.ts b/src/frontend/src/features/settings/index.ts index 1c198824..6a293ea3 100644 --- a/src/frontend/src/features/settings/index.ts +++ b/src/frontend/src/features/settings/index.ts @@ -1,7 +1,7 @@ export { SettingsButton } from './components/SettingsButton' export { SettingsDialog } from './components/SettingsDialog' -export { useTranscriptionLanguageOptions } from './hook/useTranscriptionLanguageOptions' +export { useTranscriptionLanguage } from './hook/useTranscriptionLanguage' export { useSettingsDialog } from './hook/useSettingsDialog' export { SettingsDialogExtendedKey } from './type.ts'