From 22a13cdd3182b0af6c24219858c9ab3123f3783b Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 11:01:17 -0500 Subject: [PATCH 01/10] seems to work so far? --- .../src/components/MeetingRoom/Chat/Chat.tsx | 2 +- .../ParticipantList/ParticipantList.tsx | 2 +- .../MeetingRoom/RightPanel/RightPanel.tsx | 21 ++++++++++--------- frontend/src/hooks/useRightPanel.tsx | 2 +- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/MeetingRoom/Chat/Chat.tsx b/frontend/src/components/MeetingRoom/Chat/Chat.tsx index 7ab1074f..c1007967 100644 --- a/frontend/src/components/MeetingRoom/Chat/Chat.tsx +++ b/frontend/src/components/MeetingRoom/Chat/Chat.tsx @@ -22,7 +22,7 @@ export type ChatProps = { */ const Chat = ({ handleClose, isOpen }: ChatProps): ReactElement | false => { const { messages } = useSessionContext(); - const heightClass = '@apply h-[calc(100vh_-_240px)]'; + const heightClass = '@apply h-[calc(100dvh_-_240px)]'; return ( isOpen && ( diff --git a/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx b/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx index edce87e2..3b6992b8 100644 --- a/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx +++ b/frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx @@ -86,7 +86,7 @@ const ParticipantList = ({ handleClose, isOpen }: ParticipantListProps): ReactEl - + void; @@ -21,16 +22,16 @@ export type RightPanelProps = { * @returns {ReactElement} RightPanel Component */ const RightPanel = ({ activeTab, handleClose }: RightPanelProps): ReactElement => { + const isSmallViewport = useIsSmallViewport(); + const width = isSmallViewport ? 'w-dvw' : 'v-dvw'; + const margins = isSmallViewport ? 'm-0' : 'mr-4 mt-4'; + const className = `${height} absolute top-0 ${margins} ${width} overflow-hidden rounded bg-white transition-[right] ${activeTab === 'closed' ? 'right-[-380px] hidden' : 'right-0'}`; + return ( -
-
- - - -
+
+ + +
); }; diff --git a/frontend/src/hooks/useRightPanel.tsx b/frontend/src/hooks/useRightPanel.tsx index 039923ef..a2847bd3 100644 --- a/frontend/src/hooks/useRightPanel.tsx +++ b/frontend/src/hooks/useRightPanel.tsx @@ -22,7 +22,7 @@ export type UseRightPanel = { */ const useRightPanel = (): UseRightPanel => { const [rightPanelState, setRightPanelState] = useState({ - activeTab: 'closed', + activeTab: 'chat', unreadCount: 0, }); From 4626d469d74b22d69e846b2a285ae33cca210f4e Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 11:03:10 -0500 Subject: [PATCH 02/10] typo --- frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx b/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx index ff27cbde..05f4480e 100644 --- a/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx +++ b/frontend/src/components/MeetingRoom/RightPanel/RightPanel.tsx @@ -23,7 +23,7 @@ export type RightPanelProps = { */ const RightPanel = ({ activeTab, handleClose }: RightPanelProps): ReactElement => { const isSmallViewport = useIsSmallViewport(); - const width = isSmallViewport ? 'w-dvw' : 'v-dvw'; + const width = isSmallViewport ? 'w-dvw' : 'w-[360px]'; const margins = isSmallViewport ? 'm-0' : 'mr-4 mt-4'; const className = `${height} absolute top-0 ${margins} ${width} overflow-hidden rounded bg-white transition-[right] ${activeTab === 'closed' ? 'right-[-380px] hidden' : 'right-0'}`; From 05e549172701af55af0521e779655b4fd261702e Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 11:10:48 -0500 Subject: [PATCH 03/10] wip, capture does not work on safari --- .../ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx | 3 +++ frontend/src/hooks/useRightPanel.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx index 2650a5c6..4d1b2b45 100644 --- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx @@ -2,6 +2,7 @@ import { ChangeEvent, useRef, useState, ReactElement } from 'react'; import { Button, IconButton, Tooltip, Typography } from '@mui/material'; import { Delete } from '@mui/icons-material'; import captureScreenshot from '../../../../../utils/captureScreenshot'; +import { isMobile } from '../../../../../utils/util'; // Setting the maximum file size to 20MB const maxFileSize = 2e7; @@ -97,6 +98,8 @@ const FilePicker = ({ variant="outlined" component="label" onClick={processScreenshot} + // Not actually hiding ATM + hidden={!!isMobile} > Capture screenshot diff --git a/frontend/src/hooks/useRightPanel.tsx b/frontend/src/hooks/useRightPanel.tsx index a2847bd3..a70d8667 100644 --- a/frontend/src/hooks/useRightPanel.tsx +++ b/frontend/src/hooks/useRightPanel.tsx @@ -22,7 +22,7 @@ export type UseRightPanel = { */ const useRightPanel = (): UseRightPanel => { const [rightPanelState, setRightPanelState] = useState({ - activeTab: 'chat', + activeTab: 'issues', unreadCount: 0, }); From 3f0ce1dcc691a5ce8f0651abd2cf761498d586d2 Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 13:08:55 -0500 Subject: [PATCH 04/10] that looks good --- .../ReportIssue/FeedbackForm/FeedbackForm.tsx | 10 ++++++---- .../ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx | 9 ++++++--- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx index 83009437..4ac75e1c 100644 --- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FeedbackForm.tsx @@ -7,6 +7,7 @@ import { REPORT_NAME_LIMIT, } from '../../../../utils/constants'; import HelperText from './HelperText'; +import useIsSmallViewport from '../../../../hooks/useIsSmallViewport'; export type FormType = { title: string; @@ -58,7 +59,9 @@ const FeedbackForm = ({ loading, onFileSelect, }: FeedbackFormType): ReactElement => { - const heightClass = '@apply h-[calc(100vh_-_240px)]'; + const isSmallViewport = useIsSmallViewport(); + const heightClass = '@apply h-[calc(100dvh_-_240px)]'; + const widthClass = isSmallViewport ? '@apply w-[calc(100dvw_-_48px)]' : ''; const getColorStyle = (value: string, maxLength: number) => { return value.length >= maxLength || value.length === 0 ? 'red' : 'inherit'; @@ -66,7 +69,7 @@ const FeedbackForm = ({ return loading ? ( @@ -196,7 +199,7 @@ const FeedbackForm = ({
-
+
From 80a669f204889570ffaa405146c1f6ebd5164220 Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 13:09:24 -0500 Subject: [PATCH 05/10] so we can test --- frontend/src/hooks/useRightPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/hooks/useRightPanel.tsx b/frontend/src/hooks/useRightPanel.tsx index a70d8667..039923ef 100644 --- a/frontend/src/hooks/useRightPanel.tsx +++ b/frontend/src/hooks/useRightPanel.tsx @@ -22,7 +22,7 @@ export type UseRightPanel = { */ const useRightPanel = (): UseRightPanel => { const [rightPanelState, setRightPanelState] = useState({ - activeTab: 'issues', + activeTab: 'closed', unreadCount: 0, }); From 099d8b024d6d881d152d990f6a1d4004e69140ff Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 14:39:37 -0500 Subject: [PATCH 06/10] helpful comment and some tests --- .../FilePicker/FilePicker.spec.tsx | 26 +++++++++++++++---- .../FeedbackForm/FilePicker/FilePicker.tsx | 2 ++ 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx index 2c618e08..6314021d 100644 --- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx @@ -1,21 +1,37 @@ import { render, screen, fireEvent } from '@testing-library/react'; -import { describe, expect, it, vi, Mock } from 'vitest'; +import { describe, expect, it, vi, Mock, beforeEach } from 'vitest'; +import useIsSmallViewport from '../../../../../hooks/useIsSmallViewport'; import FilePicker from './FilePicker'; import '@testing-library/jest-dom'; +vi.mock('../../../../../hooks/useIsSmallViewport'); +const mockUseIsSmallViewport = useIsSmallViewport as Mock<[], boolean>; + describe('FilePicker component', () => { const mockFileSelect = vi.fn(); + beforeEach(() => { + mockUseIsSmallViewport.mockReturnValue(false); + }); + it('renders the "Add screenshot" button initially', () => { render(); const addButton = screen.getByText(/add screenshot/i); expect(addButton).toBeInTheDocument(); }); - it('renders the "Capture screenshot" button initially', () => { - render(); - const addButton = screen.getByText(/capture screenshot/i); - expect(addButton).toBeInTheDocument(); + describe('"Capture screenshot" button', () => { + it('is rendered on desktop viewports', () => { + render(); + const addButton = screen.getByText(/capture screenshot/i); + expect(addButton).toBeInTheDocument(); + }); + + it('is not rendered on small viewports', () => { + mockUseIsSmallViewport.mockReturnValue(true); + const addButton = screen.queryByText(/capture screenshot/i); + expect(addButton).not.toBeInTheDocument(); + }); }); it('uploads and previews a valid image file', async () => { diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx index 72fc7ebb..d5f2ffc1 100644 --- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx @@ -98,6 +98,8 @@ const FilePicker = ({ width: '100%', textTransform: 'none', mb: 1, + // The screenshot capture relies on the getDisplayMedia browser API which is unsupported on mobile devices + // See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#browser_compatibility display: isMobile() ? 'none' : '', }} variant="outlined" From e3ec03b6f603b87b6ac48ab77996cecd2c01ebd8 Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 14:46:31 -0500 Subject: [PATCH 07/10] fixed --- .../FeedbackForm/FilePicker/FilePicker.spec.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx index 6314021d..34432dde 100644 --- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.spec.tsx @@ -1,17 +1,16 @@ import { render, screen, fireEvent } from '@testing-library/react'; import { describe, expect, it, vi, Mock, beforeEach } from 'vitest'; -import useIsSmallViewport from '../../../../../hooks/useIsSmallViewport'; import FilePicker from './FilePicker'; +import * as util from '../../../../../utils/util'; import '@testing-library/jest-dom'; -vi.mock('../../../../../hooks/useIsSmallViewport'); -const mockUseIsSmallViewport = useIsSmallViewport as Mock<[], boolean>; +vi.mock('../../../../../utils/util', () => ({ isMobile: vi.fn() })); describe('FilePicker component', () => { const mockFileSelect = vi.fn(); beforeEach(() => { - mockUseIsSmallViewport.mockReturnValue(false); + (util.isMobile as Mock).mockImplementation(() => false); }); it('renders the "Add screenshot" button initially', () => { @@ -21,14 +20,14 @@ describe('FilePicker component', () => { }); describe('"Capture screenshot" button', () => { - it('is rendered on desktop viewports', () => { + it('is rendered on desktop devices', () => { render(); const addButton = screen.getByText(/capture screenshot/i); expect(addButton).toBeInTheDocument(); }); - it('is not rendered on small viewports', () => { - mockUseIsSmallViewport.mockReturnValue(true); + it('is not rendered on mobile devices', () => { + (util.isMobile as Mock).mockImplementation(() => true); const addButton = screen.queryByText(/capture screenshot/i); expect(addButton).not.toBeInTheDocument(); }); From 8356fff96e8ce0eb01ac1041953a85648c11a0fe Mon Sep 17 00:00:00 2001 From: Christian Pettet <71297280+cpettet@users.noreply.github.com> Date: Tue, 25 Feb 2025 15:01:42 -0500 Subject: [PATCH 08/10] better to not render --- .../FeedbackForm/FilePicker/FilePicker.tsx | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx index d5f2ffc1..a43ff859 100644 --- a/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx +++ b/frontend/src/components/MeetingRoom/ReportIssue/FeedbackForm/FilePicker/FilePicker.tsx @@ -93,21 +93,22 @@ const FilePicker = ({ )} {!imageSrc ? ( <> - + {!isMobile() && ( + // The screenshot capture relies on the getDisplayMedia browser API which is unsupported on mobile devices + // See: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#browser_compatibility + + )}