From 137a2c7f6f4e67214f6d0609a769823d4a1108a8 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 7 Jan 2026 23:40:50 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20close=20subtitles=20on?=
 =?UTF-8?q?=20room=20disconnections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Subtitles were still visible when leaving and rejoining a meeting, even though
the backend API call to start them was not triggered again.

Introduce a hook that closes the subtitles layout on unmount, ensuring users
must explicitly click the button to restart subtitles when they rejoin a room.
---
 .../src/features/subtitle/hooks/useSubtitles.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/frontend/src/features/subtitle/hooks/useSubtitles.tsx b/src/frontend/src/features/subtitle/hooks/useSubtitles.tsx
index b93eea47..4a309d0b 100644
--- a/src/frontend/src/features/subtitle/hooks/useSubtitles.tsx
+++ b/src/frontend/src/features/subtitle/hooks/useSubtitles.tsx
@@ -2,10 +2,14 @@ import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
 import { useStartSubtitle } from '../api/startSubtitle'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect } from 'react'
+import { RoomEvent } from 'livekit-client'
 
 export const useSubtitles = () => {
   const layoutSnap = useSnapshot(layoutStore)
 
+  const room = useRoomContext()
   const apiRoomData = useRoomData()
   const { mutateAsync: startSubtitleRoom, isPending } = useStartSubtitle()
 
@@ -20,6 +24,18 @@ export const useSubtitles = () => {
     layoutStore.showSubtitles = !layoutSnap.showSubtitles
   }
 
+  useEffect(() => {
+    if (!room) return
+
+    const closeSubtitles = () => {
+      layoutStore.showSubtitles = false
+    }
+    room.on(RoomEvent.Disconnected, closeSubtitles)
+    return () => {
+      room.off(RoomEvent.Disconnected, closeSubtitles)
+    }
+  }, [room])
+
   return {
     areSubtitlesOpen: layoutSnap.showSubtitles,
     toggleSubtitles,