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 44bb780f..68be037a 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 @@ -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 ( { }} > + {isFullscreenAvailable && ( + toggleFullScreen()} + className={menuRecipe({ icon: true, variant: 'dark' }).item} + > + {isCurrentlyFullscreen ? ( + <> + + {t('fullscreen.exit')} + + ) : ( + <> + + {t('fullscreen.enter')} + + )} + + )} toggleEffects()} className={menuRecipe({ icon: true, variant: 'dark' }).item} diff --git a/src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts b/src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts new file mode 100644 index 00000000..f4b5f369 --- /dev/null +++ b/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, + } +} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 961271d9..c11cdfdd 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -88,7 +88,11 @@ "settings": "", "username": "", "effects": "", - "switchCamera": "" + "switchCamera": "", + "fullscreen": { + "enter": "", + "exit": "" + } } }, "effects": { diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index cd7a3a4e..103d1b03 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/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": { diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 7b6bf917..7888a93f 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/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": {