From 45e0665cf0f10badeda6acce6e696df316e9ef57 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Wed, 25 Mar 2026 17:15:01 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20extract=20layout?= =?UTF-8?q?=20components=20into=20a=20dedicated=20feature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Group layout-related components under a single feature directory to improve structure and readability. This is a first step toward cleaning up the project and clarifying the organization of the video call layout. --- .../components}/CarouselLayout.tsx | 0 .../components}/GridLayout.tsx | 6 ++-- .../layout/components/LayoutWrapper.tsx | 24 +++++++++++++++ .../components}/PaginationControl.tsx | 0 .../components}/PaginationIndicator.tsx | 0 .../livekit => layout}/hooks/useGridLayout.ts | 0 .../rooms/livekit/prefabs/VideoConference.tsx | 29 ++----------------- 7 files changed, 30 insertions(+), 29 deletions(-) rename src/frontend/src/features/{rooms/livekit/components/layout => layout/components}/CarouselLayout.tsx (100%) rename src/frontend/src/features/{rooms/livekit/components/layout => layout/components}/GridLayout.tsx (91%) create mode 100644 src/frontend/src/features/layout/components/LayoutWrapper.tsx rename src/frontend/src/features/{rooms/livekit/components/controls => layout/components}/PaginationControl.tsx (100%) rename src/frontend/src/features/{rooms/livekit/components/controls => layout/components}/PaginationIndicator.tsx (100%) rename src/frontend/src/features/{rooms/livekit => layout}/hooks/useGridLayout.ts (100%) diff --git a/src/frontend/src/features/rooms/livekit/components/layout/CarouselLayout.tsx b/src/frontend/src/features/layout/components/CarouselLayout.tsx similarity index 100% rename from src/frontend/src/features/rooms/livekit/components/layout/CarouselLayout.tsx rename to src/frontend/src/features/layout/components/CarouselLayout.tsx diff --git a/src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx b/src/frontend/src/features/layout/components/GridLayout.tsx similarity index 91% rename from src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx rename to src/frontend/src/features/layout/components/GridLayout.tsx index 6718c00e..02939129 100644 --- a/src/frontend/src/features/rooms/livekit/components/layout/GridLayout.tsx +++ b/src/frontend/src/features/layout/components/GridLayout.tsx @@ -7,9 +7,9 @@ import { useSwipe, } from '@livekit/components-react' import { mergeProps } from '@/utils/mergeProps' -import { PaginationIndicator } from '../controls/PaginationIndicator' -import { useGridLayout } from '../../hooks/useGridLayout' -import { PaginationControl } from '../controls/PaginationControl' +import { PaginationIndicator } from './PaginationIndicator' +import { useGridLayout } from '../hooks/useGridLayout' +import { PaginationControl } from './PaginationControl' /** @public */ export interface GridLayoutProps diff --git a/src/frontend/src/features/layout/components/LayoutWrapper.tsx b/src/frontend/src/features/layout/components/LayoutWrapper.tsx new file mode 100644 index 00000000..7e012a1b --- /dev/null +++ b/src/frontend/src/features/layout/components/LayoutWrapper.tsx @@ -0,0 +1,24 @@ +import { styled } from '@/styled-system/jsx' +import { cva } from '@/styled-system/css' + +export const LayoutWrapper = styled( + 'div', + cva({ + base: { + position: 'relative', + display: 'flex', + width: '100%', + transition: 'height .5s cubic-bezier(0.4,0,0.2,1) 5ms', + }, + variants: { + areSubtitlesOpen: { + true: { + height: 'calc(100% - 12rem)', + }, + false: { + height: '100%', + }, + }, + }, + }) +) diff --git a/src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx b/src/frontend/src/features/layout/components/PaginationControl.tsx similarity index 100% rename from src/frontend/src/features/rooms/livekit/components/controls/PaginationControl.tsx rename to src/frontend/src/features/layout/components/PaginationControl.tsx diff --git a/src/frontend/src/features/rooms/livekit/components/controls/PaginationIndicator.tsx b/src/frontend/src/features/layout/components/PaginationIndicator.tsx similarity index 100% rename from src/frontend/src/features/rooms/livekit/components/controls/PaginationIndicator.tsx rename to src/frontend/src/features/layout/components/PaginationIndicator.tsx diff --git a/src/frontend/src/features/rooms/livekit/hooks/useGridLayout.ts b/src/frontend/src/features/layout/hooks/useGridLayout.ts similarity index 100% rename from src/frontend/src/features/rooms/livekit/hooks/useGridLayout.ts rename to src/frontend/src/features/layout/hooks/useGridLayout.ts diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx index 0c846e2f..b7d8247d 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx @@ -20,8 +20,6 @@ import { import { useTranslation } from 'react-i18next' import { ControlBar } from './ControlBar/ControlBar' -import { styled } from '@/styled-system/jsx' -import { cva } from '@/styled-system/css' import { MainNotificationToast } from '@/features/notifications/MainNotificationToast' import { FocusLayout } from '../components/FocusLayout' import { ParticipantTile } from '../components/ParticipantTile' @@ -39,34 +37,13 @@ import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubsc import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider' import { useSubtitles } from '@/features/subtitle/hooks/useSubtitles' import { Subtitles } from '@/features/subtitle/component/Subtitles' -import { CarouselLayout } from '../components/layout/CarouselLayout' -import { GridLayout } from '../components/layout/GridLayout' import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal' import { getParticipantName } from '@/features/rooms/utils/getParticipantName' import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce' import { ReactionPortals } from '@/features/reactions/components/ReactionPortals' - -const LayoutWrapper = styled( - 'div', - cva({ - base: { - position: 'relative', - display: 'flex', - width: '100%', - transition: 'height .5s cubic-bezier(0.4,0,0.2,1) 5ms', - }, - variants: { - areSubtitlesOpen: { - true: { - height: 'calc(100% - 12rem)', - }, - false: { - height: '100%', - }, - }, - }, - }) -) +import { CarouselLayout } from '@/features/layout/components/CarouselLayout' +import { GridLayout } from '@/features/layout/components/GridLayout' +import { LayoutWrapper } from '@/features/layout/components/LayoutWrapper' /** * @public