From 8b2289f573cae743412ffea7cf8c6abad4177b10 Mon Sep 17 00:00:00 2001 From: ofava Date: Thu, 20 Nov 2025 15:07:08 +0100 Subject: [PATCH 01/17] Refactor WaitingRoom component: remove unused viewport hook, replace div with Box for improved layout and responsiveness --- frontend/src/pages/WaitingRoom/WaitingRoom.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/WaitingRoom/WaitingRoom.tsx b/frontend/src/pages/WaitingRoom/WaitingRoom.tsx index 5f4c90bf..a99e78bc 100644 --- a/frontend/src/pages/WaitingRoom/WaitingRoom.tsx +++ b/frontend/src/pages/WaitingRoom/WaitingRoom.tsx @@ -10,7 +10,6 @@ import UsernameInput from '../../components/WaitingRoom/UserNameInput'; import { DEVICE_ACCESS_STATUS } from '../../utils/constants'; import DeviceAccessAlert from '../../components/DeviceAccessAlert'; import { getStorageItem, STORAGE_KEYS } from '../../utils/storage'; -import useIsSmallViewport from '../../hooks/useIsSmallViewport'; import useBackgroundPublisherContext from '../../hooks/useBackgroundPublisherContext'; import { BackgroundEffectsDialogProvider } from '../../Context/BackgroundEffectsDialog'; @@ -40,7 +39,6 @@ const WaitingRoom = (): ReactElement => { const [openVideoInput, setOpenVideoInput] = useState(false); const [openAudioOutput, setOpenAudioOutput] = useState(false); const [username, setUsername] = useState(getStorageItem(STORAGE_KEYS.USERNAME) ?? ''); - const isSmallViewport = useIsSmallViewport(); useEffect(() => { if (!publisher) { @@ -104,8 +102,13 @@ const WaitingRoom = (): ReactElement => { -
{accessStatus === DEVICE_ACCESS_STATUS.ACCEPTED && ( @@ -120,7 +123,7 @@ const WaitingRoom = (): ReactElement => { anchorEl={anchorEl} /> )} -
+
From 5bdbc8abca70e38beb404d41e06885032fe5a72a Mon Sep 17 00:00:00 2001 From: ofava Date: Fri, 21 Nov 2025 09:05:22 +0100 Subject: [PATCH 02/17] Refactor VideoContainer and VignetteEffect components: replace divs with Box for improved styling, integrate custom theme, and define VIDEO_CONTAINER_HEIGHT_WR constant for consistent height management. --- .../VideoContainer/VideoContainer.tsx | 59 +++++++++++++------ .../VignetteEffect/VignetteEffect.tsx | 20 ++++++- frontend/src/utils/constants.tsx | 5 ++ 3 files changed, 63 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/WaitingRoom/VideoContainer/VideoContainer.tsx b/frontend/src/components/WaitingRoom/VideoContainer/VideoContainer.tsx index 7ae71d4a..a2b4ef79 100644 --- a/frontend/src/components/WaitingRoom/VideoContainer/VideoContainer.tsx +++ b/frontend/src/components/WaitingRoom/VideoContainer/VideoContainer.tsx @@ -1,5 +1,8 @@ import { useRef, useState, useEffect, ReactElement } from 'react'; -import { Stack } from '@mui/material'; +import Box from '@ui/Box'; +import Stack from '@ui/Stack'; +import useCustomTheme from '@Context/Theme'; +import { VIDEO_CONTAINER_HEIGHT_WR } from '@utils/constants'; import MicButton from '../MicButton'; import CameraButton from '../CameraButton'; import VideoLoading from '../VideoLoading'; @@ -37,6 +40,7 @@ const VideoContainer = ({ username }: VideoContainerProps): ReactElement => { usePreviewPublisherContext(); const initials = getInitials(username); const isSmallViewport = useIsSmallViewport(); + const theme = useCustomTheme(); useEffect(() => { if (publisherVideoElement && containerRef.current && isVideoEnabled) { @@ -45,15 +49,13 @@ const VideoContainer = ({ username }: VideoContainerProps): ReactElement => { myVideoElement.classList.add('video__element'); myVideoElement.title = 'publisher-preview'; myVideoElement.style.borderRadius = isSmallViewport ? '0px' : '12px'; - myVideoElement.style.height = isSmallViewport ? '' : '328px'; + myVideoElement.style.height = isSmallViewport ? '' : `${VIDEO_CONTAINER_HEIGHT_WR}px`; myVideoElement.style.width = isSmallViewport ? '100dvw' : '584px'; myVideoElement.style.marginLeft = 'auto'; myVideoElement.style.marginRight = 'auto'; myVideoElement.style.transform = 'scaleX(-1)'; myVideoElement.style.objectFit = 'contain'; myVideoElement.style.aspectRatio = '16 / 9'; - myVideoElement.style.boxShadow = - '0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15)'; waitUntilPlaying(publisherVideoElement).then(() => { setIsVideoLoading(false); @@ -62,15 +64,25 @@ const VideoContainer = ({ username }: VideoContainerProps): ReactElement => { }, [isSmallViewport, publisherVideoElement, isVideoEnabled]); return ( -