From a47f1f92c494b194dfb8b223ab4db6800528b9c4 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Mon, 14 Oct 2024 17:56:22 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20enhance=20useSid?= =?UTF-8?q?ePanel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Encapsulate all interactions with the layout store concerning the side panel into a hook. This hook exposes a clear interface. Each variable has a single responsability, with a clear naming. --- .../rooms/livekit/components/SidePanel.tsx | 20 ++++++++++--------- .../rooms/livekit/hooks/useSidePanel.ts | 19 ++++++++++-------- .../rooms/livekit/prefabs/VideoConference.tsx | 12 ++++------- src/frontend/src/stores/layout.ts | 6 +++--- 4 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx index 023659dc..9a7c0488 100644 --- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx +++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx @@ -1,4 +1,3 @@ -import { useSnapshot } from 'valtio' import { layoutStore } from '@/stores/layout' import { css } from '@/styled-system/css' import { Heading } from 'react-aria-components' @@ -100,20 +99,23 @@ const Panel = ({ isOpen, children }: PanelProps) => ( ) export const SidePanel = () => { - const layoutSnap = useSnapshot(layoutStore) - const sidePanel = layoutSnap.sidePanel - - const { isParticipantsOpen, isEffectsOpen, isChatOpen } = useSidePanel() + const { + activePanelId, + isParticipantsOpen, + isEffectsOpen, + isChatOpen, + isSidePanelOpen, + } = useSidePanel() const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' }) return ( (layoutStore.sidePanel = null)} + title={t(`heading.${activePanelId}`)} + onClose={() => (layoutStore.activePanelId = null)} closeButtonTooltip={t('closeButton', { - content: t(`content.${sidePanel}`), + content: t(`content.${activePanelId}`), })} - isClosed={!sidePanel} + isClosed={!isSidePanelOpen} > diff --git a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts index 14daec0f..41ca8a9c 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts +++ b/src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts @@ -1,7 +1,7 @@ import { useSnapshot } from 'valtio' import { layoutStore } from '@/stores/layout' -export enum SidePanel { +export enum PanelId { PARTICIPANTS = 'participants', EFFECTS = 'effects', CHAT = 'chat', @@ -9,30 +9,33 @@ export enum SidePanel { export const useSidePanel = () => { const layoutSnap = useSnapshot(layoutStore) - const sidePanel = layoutSnap.sidePanel + const activePanelId = layoutSnap.activePanelId - const isParticipantsOpen = sidePanel == SidePanel.PARTICIPANTS - const isEffectsOpen = sidePanel == SidePanel.EFFECTS - const isChatOpen = sidePanel == SidePanel.CHAT + const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS + const isEffectsOpen = activePanelId == PanelId.EFFECTS + const isChatOpen = activePanelId == PanelId.CHAT + const isSidePanelOpen = !!activePanelId const toggleParticipants = () => { - layoutStore.sidePanel = isParticipantsOpen ? null : SidePanel.PARTICIPANTS + layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS } const toggleChat = () => { - layoutStore.sidePanel = isChatOpen ? null : SidePanel.CHAT + layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT } const toggleEffects = () => { - layoutStore.sidePanel = isEffectsOpen ? null : SidePanel.EFFECTS + layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS } return { + activePanelId, toggleParticipants, toggleChat, toggleEffects, isChatOpen, isParticipantsOpen, isEffectsOpen, + isSidePanelOpen, } } diff --git a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx index 8a1d8b69..ff81b297 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx @@ -23,12 +23,11 @@ import { import { ControlBar } from './ControlBar' import { styled } from '@/styled-system/jsx' import { cva } from '@/styled-system/css' -import { useSnapshot } from 'valtio' -import { layoutStore } from '@/stores/layout' +import { MainNotificationToast } from '@/features/notifications/MainNotificationToast' import { FocusLayout } from '../components/FocusLayout' import { ParticipantTile } from '../components/ParticipantTile' import { SidePanel } from '../components/SidePanel' -import { MainNotificationToast } from '@/features/notifications/MainNotificationToast' +import { useSidePanel } from '../hooks/useSidePanel' const LayoutWrapper = styled( 'div', @@ -147,10 +146,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) { ]) /* eslint-enable react-hooks/exhaustive-deps */ - const layoutSnap = useSnapshot(layoutStore) - - // todo - rename this variable - const sidePanel = layoutSnap.sidePanel + const { isSidePanelOpen } = useSidePanel() return (
@@ -163,7 +159,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) { // todo - extract these magic values into constant style={{ position: 'absolute', - inset: sidePanel + inset: isSidePanelOpen ? 'var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px' : 'var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))', transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms', diff --git a/src/frontend/src/stores/layout.ts b/src/frontend/src/stores/layout.ts index 867d7d9c..f270a36c 100644 --- a/src/frontend/src/stores/layout.ts +++ b/src/frontend/src/stores/layout.ts @@ -1,12 +1,12 @@ import { proxy } from 'valtio' -import { SidePanel } from '@/features/rooms/livekit/hooks/useSidePanel' +import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel' type State = { showHeader: boolean - sidePanel: SidePanel | null + activePanelId: PanelId | null } export const layoutStore = proxy({ showHeader: false, - sidePanel: null, + activePanelId: null, })