♻️(frontend) encapsulate transcript language logic in a hook

Provide a clear interface to handle transcription language selection and
behavior, reducing code duplication across the codebase.

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 }),
         }

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}
               </Button>
             </Text>
           </div>

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<TabPanelProps, 'id'>
 
@@ -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 (
     <TabPanel padding={'md'} flex id={id}>

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,
+  }
+}

src/frontend/src/features/settings/hook/useTranscriptionLanguageOptions.ts

@@ -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]
-  )
-}

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'