From d2f239e6a2dbc596aa4cb53da9a26c285a7acee5 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 28 Nov 2024 09:57:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7(frontend)=20add=20a=20temporary=20?=
 =?UTF-8?q?items=20to=20interact=20with=20transcription?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is totally temporary, only to test transcription recording.
In the upcoming commits, a proper side panel with all activities
will be created.
---
 .../controls/Options/OptionsMenuItems.tsx     |  2 +
 .../controls/Options/TranscriptMenuItem.tsx   | 60 +++++++++++++++++++
 src/frontend/src/locales/de/rooms.json        |  6 +-
 src/frontend/src/locales/en/rooms.json        |  6 +-
 src/frontend/src/locales/fr/rooms.json        |  6 +-
 5 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/components/controls/Options/TranscriptMenuItem.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
index 72f5fc54..8e36b030 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
@@ -10,6 +10,7 @@ import { DialogState } from './OptionsButton'
 import { Separator } from '@/primitives/Separator'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { TranscriptMenuItem } from './TranscriptMenuItem'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({
@@ -34,6 +35,7 @@ export const OptionsMenuItems = ({
           <RiAccountBoxLine size={20} />
           {t('effects')}
         </MenuItem>
+        <TranscriptMenuItem />
       </Section>
       <Separator />
       <Section>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/TranscriptMenuItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/TranscriptMenuItem.tsx
new file mode 100644
index 00000000..c9f57ad2
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/TranscriptMenuItem.tsx
@@ -0,0 +1,60 @@
+import { RiRecordCircleLine, RiStopCircleLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { MenuItem } from 'react-aria-components'
+import {
+  RecordingMode,
+  useStartRecording,
+} from '@/features/rooms/api/startRecording'
+import { useStopRecording } from '@/features/rooms/api/stopRecording'
+import { useRoomContext } from '@livekit/components-react'
+import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+
+export const TranscriptMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+
+  const data = useRoomData()
+
+  const { mutateAsync: startRecordingRoom } = useStartRecording()
+  const { mutateAsync: stopRecordingRoom } = useStopRecording()
+
+  const room = useRoomContext()
+
+  const handleTranscript = async () => {
+    const roomId = data?.livekit?.room
+
+    if (!roomId) {
+      console.warn('No room ID found')
+      return
+    }
+
+    try {
+      if (room.isRecording) {
+        await stopRecordingRoom({ id: roomId })
+      } else {
+        await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript })
+      }
+    } catch (error) {
+      console.error('Failed to handle transcript:', error)
+    }
+  }
+
+  return (
+    <MenuItem
+      className={menuRecipe({ icon: true }).item}
+      onAction={async () => await handleTranscript()}
+    >
+      {room.isRecording ? (
+        <>
+          <RiRecordCircleLine size={20} />
+          {t('transcript.stop')}
+        </>
+      ) : (
+        <>
+          <RiStopCircleLine size={20} />
+          {t('transcript.start')}
+        </>
+      )}
+    </MenuItem>
+  )
+}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index e4bab587..1531db47 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -79,7 +79,11 @@
       "support": "",
       "settings": "",
       "username": "",
-      "effects": ""
+      "effects": "",
+      "transcript": {
+        "start": "",
+        "stop": ""
+      }
     }
   },
   "effects": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index d935af54..24d96555 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -78,7 +78,11 @@
       "support": "Get Help on Tchap",
       "settings": "Settings",
       "username": "Update Your Name",
-      "effects": "Apply effects"
+      "effects": "Apply effects",
+      "transcript": {
+        "start": "Start meeting transcription",
+        "stop": "Stop ongoing transcription"
+      }
     }
   },
   "effects": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index c2a82eab..3c82c328 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -78,7 +78,11 @@
       "support": "Obtenir de l'aide sur Tchap",
       "settings": "Paramètres",
       "username": "Choisir votre nom",
-      "effects": "Appliquer des effets"
+      "effects": "Appliquer des effets",
+      "transcript": {
+        "start": "Démarrer la transcription",
+        "stop": "Arrêter la transcription en cours"
+      }
     }
   },
   "effects": {