From 487340efcae12ea52e70ac3d534770f02c01ba3a Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 2 Mar 2026 10:24:17 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20move=20fullscree?=
 =?UTF-8?q?n=20and=20recording=20shortcuts=20to=20their=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Register Ctrl+Shift+F in DesktopControlBar, Ctrl+Shift+L in ToolsToggle
---
 .../rooms/livekit/components/controls/ToolsToggle.tsx  |  6 ++++++
 .../livekit/prefabs/ControlBar/DesktopControlBar.tsx   | 10 ++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx
index 782377c1..668c7251 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 
 export const ToolsToggle = ({
   variant = 'primaryTextDark',
@@ -15,6 +16,11 @@ export const ToolsToggle = ({
   const { isToolsOpen, toggleTools } = useSidePanel()
   const tooltipLabel = isToolsOpen ? 'open' : 'closed'
 
+  useRegisterKeyboardShortcut({
+    id: 'recording',
+    handler: toggleTools,
+  })
+
   return (
     <div
       className={css({
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
index de7897f2..83c9a43e 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
@@ -12,6 +12,7 @@ import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
 import { useRef } from 'react'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useFullScreen } from '../../hooks/useFullScreen'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 
@@ -21,6 +22,8 @@ export function DesktopControlBar({
   const browserSupportsScreenSharing = supportsScreenSharing()
   const desktopControlBarEl = useRef<HTMLDivElement>(null)
 
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({})
+
   useRegisterKeyboardShortcut({
     id: 'focus-toolbar',
     handler: () => {
@@ -32,6 +35,13 @@ export function DesktopControlBar({
       firstButton?.focus()
     },
   })
+
+  useRegisterKeyboardShortcut({
+    id: 'fullscreen',
+    handler: toggleFullScreen,
+    isDisabled: !isFullscreenAvailable,
+  })
+
   return (
     <div
       ref={desktopControlBarEl}