✨(frontend) add fullscreen mode on desktop

Added an option allowing users to trigger the fullscreen mode while on desktop.
Heavily inspired by the PR #279 from @sylvinus.

Yet, this option allow user to enable/disable the fullscreen mode on the whole
ui, in the next iteration I'll add the same feature but for a given video track.

This is on purpose that the feature is available on desktop only.
The hook code has been partially written by Claude and inspired by @sylvinus
first suggestion.

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -1,5 +1,7 @@
 import {
   RiAccountBoxLine,
+  RiFullscreenExitLine,
+  RiFullscreenLine,
   RiMegaphoneLine,
   RiSettings3Line,
 } from '@remixicon/react'
@@ -10,12 +12,17 @@ import { useSidePanel } from '../../../hooks/useSidePanel'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { useSettingsDialog } from '../SettingsDialogContext'
 import { GRIST_FORM } from '@/utils/constants'
+import { useFullScreen } from '../../../hooks/useFullScreen'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
   const { toggleEffects } = useSidePanel()
   const { setDialogOpen } = useSettingsDialog()
+
+  const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
+    useFullScreen()
+
   return (
     <RACMenu
       style={{
@@ -24,6 +31,24 @@ export const OptionsMenuItems = () => {
       }}
     >
       <MenuSection>
+        {isFullscreenAvailable && (
+          <MenuItem
+            onAction={() => toggleFullScreen()}
+            className={menuRecipe({ icon: true, variant: 'dark' }).item}
+          >
+            {isCurrentlyFullscreen ? (
+              <>
+                <RiFullscreenExitLine size={20} />
+                {t('fullscreen.exit')}
+              </>
+            ) : (
+              <>
+                <RiFullscreenLine size={20} />
+                {t('fullscreen.enter')}
+              </>
+            )}
+          </MenuItem>
+        )}
         <MenuItem
           onAction={() => toggleEffects()}
           className={menuRecipe({ icon: true, variant: 'dark' }).item}

src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts

@@ -0,0 +1,68 @@
+// We use vendor prefix properties
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { useState } from 'react'
+
+export function useFullScreen() {
+  const getIsFullscreen = () => {
+    return !!(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    )
+  }
+
+  const [isFullscreenAvailable] = useState(
+    () =>
+      document.fullscreenEnabled ||
+      document.webkitFullscreenEnabled ||
+      document.mozFullScreenEnabled ||
+      document.msFullscreenEnabled
+  )
+
+  const enterFullscreen = async () => {
+    try {
+      const docEl = document.documentElement
+      if (docEl.requestFullscreen) {
+        await docEl.requestFullscreen()
+      } else if (docEl.webkitRequestFullscreen) {
+        await docEl.webkitRequestFullscreen()
+      } else if (docEl.msRequestFullscreen) {
+        await docEl.msRequestFullscreen()
+      }
+    } catch (error) {
+      console.error('Error entering fullscreen:', error)
+    }
+  }
+
+  const exitFullscreen = async () => {
+    try {
+      if (document.exitFullscreen) {
+        await document.exitFullscreen()
+      } else if (document.webkitExitFullscreen) {
+        await document.webkitExitFullscreen()
+      } else if (document.msExitFullscreen) {
+        await document.msExitFullscreen()
+      }
+    } catch (error) {
+      console.error('Error exiting fullscreen:', error)
+    }
+  }
+
+  const toggleFullScreen = async () => {
+    const isCurrentlyFullscreen = getIsFullscreen()
+    if (isCurrentlyFullscreen) {
+      await exitFullscreen()
+    } else {
+      await enterFullscreen()
+    }
+  }
+
+  return {
+    isCurrentlyFullscreen: getIsFullscreen(),
+    isFullscreenAvailable,
+    toggleFullScreen,
+  }
+}

src/frontend/src/locales/de/rooms.json

@@ -88,7 +88,11 @@
       "settings": "",
       "username": "",
       "effects": "",
-      "switchCamera": ""
+      "switchCamera": "",
+      "fullscreen": {
+        "enter": "",
+        "exit": ""
+      }
     }
   },
   "effects": {

src/frontend/src/locales/en/rooms.json

@@ -87,7 +87,11 @@
       "settings": "Settings",
       "username": "Update Your Name",
       "effects": "Apply effects",
-      "switchCamera": "Switch camera"
+      "switchCamera": "Switch camera",
+      "fullscreen": {
+        "enter": "Fullscreen",
+        "exit": "Exit fullscreen mode"
+      }
     }
   },
   "effects": {

src/frontend/src/locales/fr/rooms.json

@@ -87,7 +87,11 @@
       "settings": "Paramètres",
       "username": "Choisir votre nom",
       "effects": "Appliquer des effets",
-      "switchCamera": "Changer de caméra"
+      "switchCamera": "Changer de caméra",
+      "fullscreen": {
+        "enter": "Plein écran",
+        "exit": "Quitter le mode plein écran"
+      }
     }
   },
   "effects": {