From 8d3c64313b64c787d241de91edee05795205e034 Mon Sep 17 00:00:00 2001 From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> Date: Thu, 9 Nov 2023 12:55:09 +0100 Subject: [PATCH 01/12] Enable button for visibility of collaborator's cursor in presentation mode with enabled editing Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> --- .changeset/selfish-pans-switch.md | 5 +++ .../CollaborationBar.test.tsx | 38 ++++++++++++++++++- .../CollaborationBar/CollaborationBar.tsx | 29 ++++++++++---- src/components/Layout/Layout.tsx | 8 +--- src/components/Whiteboard/WhiteboardHost.tsx | 13 ++++--- src/lib/testUtils/documentTestUtils.tsx | 11 ++++-- 6 files changed, 81 insertions(+), 23 deletions(-) create mode 100644 .changeset/selfish-pans-switch.md diff --git a/.changeset/selfish-pans-switch.md b/.changeset/selfish-pans-switch.md new file mode 100644 index 00000000..6a3167e2 --- /dev/null +++ b/.changeset/selfish-pans-switch.md @@ -0,0 +1,5 @@ +--- +'@nordeck/matrix-neoboard-widget': minor +--- + +Show the collaborators cursor in presentation mode if edit slide active diff --git a/src/components/CollaborationBar/CollaborationBar.test.tsx b/src/components/CollaborationBar/CollaborationBar.test.tsx index cc691a66..9fe7158b 100644 --- a/src/components/CollaborationBar/CollaborationBar.test.tsx +++ b/src/components/CollaborationBar/CollaborationBar.test.tsx @@ -37,9 +37,10 @@ beforeEach(() => (widgetApi = mockWidgetApi())); describe('', () => { let Wrapper: ComponentType>; let whiteboardManager: jest.Mocked; + let setPresentationMode: (enable: boolean, enableEdit: boolean) => void; beforeEach(() => { - ({ whiteboardManager } = mockWhiteboardManager()); + ({ whiteboardManager, setPresentationMode } = mockWhiteboardManager()); Wrapper = ({ children }) => ( @@ -103,4 +104,39 @@ describe('', () => { }), ).toBeInTheDocument(); }); + + it('should show cursors in presentation mode if edit slide active', async () => { + setPresentationMode(true, true); + + render(, { wrapper: Wrapper }); + + await userEvent.click( + screen.getByRole('checkbox', { + name: "Show collaborators' cursors", + checked: false, + }), + ); + + expect( + screen.getByRole('checkbox', { + name: "Hide collaborators' cursors", + checked: true, + }), + ).toBeInTheDocument(); + }); + + it('should hide cursors in presentation mode if edit slide not active', async () => { + render(, { wrapper: Wrapper }); + + const toggleCollaboratorsCursors = screen.getByRole('checkbox', { + name: "Show collaborators' cursors", + checked: false, + }); + + expect(toggleCollaboratorsCursors).toBeInTheDocument(); + + setPresentationMode(true, false); + + expect(toggleCollaboratorsCursors).not.toBeInTheDocument(); + }); }); diff --git a/src/components/CollaborationBar/CollaborationBar.tsx b/src/components/CollaborationBar/CollaborationBar.tsx index fe498608..87f681e7 100644 --- a/src/components/CollaborationBar/CollaborationBar.tsx +++ b/src/components/CollaborationBar/CollaborationBar.tsx @@ -15,22 +15,35 @@ */ import { useTranslation } from 'react-i18next'; +import { usePresentationMode } from '../../state'; import { Toolbar } from '../common/Toolbar'; import { Collaborators } from './Collaborators'; import { ShowCollaboratorsCursorsToggle } from './ShowCollaboratorsCursorsToggle'; export function CollaborationBar() { const { t } = useTranslation(); + const { state } = usePresentationMode(); + const isPresenting = state.type === 'presenting'; + const isViewingPresentation = state.type === 'presentation'; + const isViewingPresentationInEditMode = + (isPresenting || isViewingPresentation) && state.isEditMode; const toolbarTitle = t('collaborationBar.title', 'Collaboration'); + const showToolbar = + !isViewingPresentation || + (isViewingPresentation && isViewingPresentationInEditMode); return ( - - - - + <> + {showToolbar && ( + + + {!isViewingPresentation && } + + )} + ); } diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index e893c831..651c334d 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -126,12 +126,8 @@ function ContentArea() { justifyContent="end" top={(theme) => theme.spacing(1)} > - {!isViewingPresentation && ( - <> - - - - )} + {!isViewingPresentation && } + diff --git a/src/components/Whiteboard/WhiteboardHost.tsx b/src/components/Whiteboard/WhiteboardHost.tsx index 816b3a3a..ad171ebe 100644 --- a/src/components/Whiteboard/WhiteboardHost.tsx +++ b/src/components/Whiteboard/WhiteboardHost.tsx @@ -110,11 +110,14 @@ export const WhiteboardHostConnected = () => { const { loading } = useIsWhiteboardLoading(); const isLocked = useSlideIsLocked(); const elementIds = useSlideElementIds(); - const { state: presentationState } = usePresentationMode(); - const isPresenting = presentationState.type === 'presenting'; - const isViewingPresentation = presentationState.type === 'presentation'; + const { state } = usePresentationMode(); + const isPresenting = state.type === 'presenting'; + const isViewingPresentation = state.type === 'presentation'; const isViewingPresentationInEditMode = - isViewingPresentation && presentationState.isEditMode; + (isPresenting || isViewingPresentation) && state.isEditMode; + const showCollaboratorsCursorsInPresentation = + !isViewingPresentation || + (isViewingPresentation && isViewingPresentationInEditMode); if (loading) { return ; @@ -126,7 +129,7 @@ export const WhiteboardHostConnected = () => { readOnly={ isLocked || (isViewingPresentation && !isViewingPresentationInEditMode) } - hideCursors={isViewingPresentation} + hideCursors={!showCollaboratorsCursorsInPresentation} hideDotGrid={isPresenting || isViewingPresentation} withOutline={isPresenting} /> diff --git a/src/lib/testUtils/documentTestUtils.tsx b/src/lib/testUtils/documentTestUtils.tsx index 9a3aeb98..6c4fa1a1 100644 --- a/src/lib/testUtils/documentTestUtils.tsx +++ b/src/lib/testUtils/documentTestUtils.tsx @@ -59,7 +59,7 @@ export function mockWhiteboardManager( whiteboardManager: jest.Mocked; communicationChannel: jest.Mocked; messageSubject: Subject; - setPresentationMode: (enable: boolean) => void; + setPresentationMode: (enable: boolean, enableEdit?: boolean) => void; } { const document = createWhiteboardDocument(); @@ -142,13 +142,18 @@ export function mockWhiteboardManager( whiteboardManager, communicationChannel, messageSubject, - setPresentationMode: (enable) => { + setPresentationMode: (enable, enableEdit) => { messageSubject.next({ senderUserId: '@user-alice', senderSessionId: 'other', type: 'net.nordeck.whiteboard.present_slide', content: { - view: enable ? { isEditMode: false, slideId: 'slide-0' } : undefined, + view: enable + ? { + isEditMode: enableEdit ? enableEdit : false, + slideId: 'slide-0', + } + : undefined, }, }); }, From 27fae92217a39866e601359b1e4ab58198fdfe61 Mon Sep 17 00:00:00 2001 From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> Date: Fri, 10 Nov 2023 08:02:57 +0100 Subject: [PATCH 02/12] hide hideCollaborationBarPresenter for presenter if the edit not active Signed-off-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> --- src/components/CollaborationBar/CollaborationBar.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/CollaborationBar/CollaborationBar.tsx b/src/components/CollaborationBar/CollaborationBar.tsx index 87f681e7..71b27775 100644 --- a/src/components/CollaborationBar/CollaborationBar.tsx +++ b/src/components/CollaborationBar/CollaborationBar.tsx @@ -28,13 +28,14 @@ export function CollaborationBar() { const isViewingPresentationInEditMode = (isPresenting || isViewingPresentation) && state.isEditMode; const toolbarTitle = t('collaborationBar.title', 'Collaboration'); - const showToolbar = + const showCollaborationBarViewer = !isViewingPresentation || (isViewingPresentation && isViewingPresentationInEditMode); + const hideCollaborationBarPresenter = isPresenting && !state.isEditMode; return ( <> - {showToolbar && ( + {showCollaborationBarViewer && !hideCollaborationBarPresenter && ( Date: Mon, 13 Nov 2023 13:17:39 +0100 Subject: [PATCH 03/12] fix collaborators cursors when edit mode is not enabled Signed-off-by: nurjinn jafar --- .../CollaborationBar.test.tsx | 4 +-- .../CollaborationBar/CollaborationBar.tsx | 34 +++++++++---------- src/components/Whiteboard/WhiteboardHost.tsx | 13 +++---- .../common/Toolbar/ToolbarAvatar.tsx | 1 + 4 files changed, 24 insertions(+), 28 deletions(-) diff --git a/src/components/CollaborationBar/CollaborationBar.test.tsx b/src/components/CollaborationBar/CollaborationBar.test.tsx index 9fe7158b..70bcd04a 100644 --- a/src/components/CollaborationBar/CollaborationBar.test.tsx +++ b/src/components/CollaborationBar/CollaborationBar.test.tsx @@ -105,7 +105,7 @@ describe('', () => { ).toBeInTheDocument(); }); - it('should show cursors in presentation mode if edit slide active', async () => { + it('should show cursors in presentation mode if edit mode is enabled', async () => { setPresentationMode(true, true); render(, { wrapper: Wrapper }); @@ -125,7 +125,7 @@ describe('', () => { ).toBeInTheDocument(); }); - it('should hide cursors in presentation mode if edit slide not active', async () => { + it('should hide cursors in presentation mode if edit mode is not enabled', async () => { render(, { wrapper: Wrapper }); const toggleCollaboratorsCursors = screen.getByRole('checkbox', { diff --git a/src/components/CollaborationBar/CollaborationBar.tsx b/src/components/CollaborationBar/CollaborationBar.tsx index 71b27775..c4c42a6f 100644 --- a/src/components/CollaborationBar/CollaborationBar.tsx +++ b/src/components/CollaborationBar/CollaborationBar.tsx @@ -23,28 +23,26 @@ import { ShowCollaboratorsCursorsToggle } from './ShowCollaboratorsCursorsToggle export function CollaborationBar() { const { t } = useTranslation(); const { state } = usePresentationMode(); + const isCollaboratorsCursorsActive = + state.type === 'idle' || state.isEditMode; const isPresenting = state.type === 'presenting'; const isViewingPresentation = state.type === 'presentation'; - const isViewingPresentationInEditMode = - (isPresenting || isViewingPresentation) && state.isEditMode; + const isCollaborationBarActive = + state.type === 'idle' || + isPresenting || + (isViewingPresentation && state.isEditMode); const toolbarTitle = t('collaborationBar.title', 'Collaboration'); - const showCollaborationBarViewer = - !isViewingPresentation || - (isViewingPresentation && isViewingPresentationInEditMode); - const hideCollaborationBarPresenter = isPresenting && !state.isEditMode; return ( - <> - {showCollaborationBarViewer && !hideCollaborationBarPresenter && ( - - - {!isViewingPresentation && } - - )} - + isCollaborationBarActive && ( + + {isCollaboratorsCursorsActive && } + {!isViewingPresentation && } + + ) ); } diff --git a/src/components/Whiteboard/WhiteboardHost.tsx b/src/components/Whiteboard/WhiteboardHost.tsx index ad171ebe..8771fcb6 100644 --- a/src/components/Whiteboard/WhiteboardHost.tsx +++ b/src/components/Whiteboard/WhiteboardHost.tsx @@ -110,14 +110,11 @@ export const WhiteboardHostConnected = () => { const { loading } = useIsWhiteboardLoading(); const isLocked = useSlideIsLocked(); const elementIds = useSlideElementIds(); - const { state } = usePresentationMode(); - const isPresenting = state.type === 'presenting'; - const isViewingPresentation = state.type === 'presentation'; + const { state: presentationState } = usePresentationMode(); + const isPresenting = presentationState.type === 'presenting'; + const isViewingPresentation = presentationState.type === 'presentation'; const isViewingPresentationInEditMode = - (isPresenting || isViewingPresentation) && state.isEditMode; - const showCollaboratorsCursorsInPresentation = - !isViewingPresentation || - (isViewingPresentation && isViewingPresentationInEditMode); + isViewingPresentation && presentationState.isEditMode; if (loading) { return ; @@ -129,7 +126,7 @@ export const WhiteboardHostConnected = () => { readOnly={ isLocked || (isViewingPresentation && !isViewingPresentationInEditMode) } - hideCursors={!showCollaboratorsCursorsInPresentation} + hideCursors={!presentationState.isEditMode} hideDotGrid={isPresenting || isViewingPresentation} withOutline={isPresenting} /> diff --git a/src/components/common/Toolbar/ToolbarAvatar.tsx b/src/components/common/Toolbar/ToolbarAvatar.tsx index f28f955a..dcbe33cb 100644 --- a/src/components/common/Toolbar/ToolbarAvatar.tsx +++ b/src/components/common/Toolbar/ToolbarAvatar.tsx @@ -53,6 +53,7 @@ export function ToolbarAvatar({ member, title, children }: ToolbarAvatarProps) { background: theme.palette.background.default, borderRadius: '50%', paddingY: '2px', + minHeight: '34px', '&:hover': { background: theme.palette.background.default, From fbb554ed606692a8f452e68d2ebdb78edf7b2f33 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Thu, 16 Nov 2023 12:14:04 +0100 Subject: [PATCH 04/12] refactor state definition Signed-off-by: nurjinn jafar --- src/components/CollaborationBar/CollaborationBar.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CollaborationBar/CollaborationBar.tsx b/src/components/CollaborationBar/CollaborationBar.tsx index c4c42a6f..042a0407 100644 --- a/src/components/CollaborationBar/CollaborationBar.tsx +++ b/src/components/CollaborationBar/CollaborationBar.tsx @@ -22,15 +22,15 @@ import { ShowCollaboratorsCursorsToggle } from './ShowCollaboratorsCursorsToggle export function CollaborationBar() { const { t } = useTranslation(); - const { state } = usePresentationMode(); + const { presentationState } = usePresentationMode(); const isCollaboratorsCursorsActive = - state.type === 'idle' || state.isEditMode; - const isPresenting = state.type === 'presenting'; - const isViewingPresentation = state.type === 'presentation'; + presentationState.type === 'idle' || presentationState.isEditMode; + const isPresenting = presentationState.type === 'presenting'; + const isViewingPresentation = presentationState.type === 'presentation'; const isCollaborationBarActive = - state.type === 'idle' || + presentationState.type === 'idle' || isPresenting || - (isViewingPresentation && state.isEditMode); + (isViewingPresentation && presentationState.isEditMode); const toolbarTitle = t('collaborationBar.title', 'Collaboration'); return ( From 25c1beb7b3f9b7f150fd1c056388598398586005 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Thu, 16 Nov 2023 12:16:45 +0100 Subject: [PATCH 05/12] refactor state definition Signed-off-by: nurjinn jafar --- src/components/CollaborationBar/CollaborationBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CollaborationBar/CollaborationBar.tsx b/src/components/CollaborationBar/CollaborationBar.tsx index 042a0407..8ecf1b68 100644 --- a/src/components/CollaborationBar/CollaborationBar.tsx +++ b/src/components/CollaborationBar/CollaborationBar.tsx @@ -22,7 +22,7 @@ import { ShowCollaboratorsCursorsToggle } from './ShowCollaboratorsCursorsToggle export function CollaborationBar() { const { t } = useTranslation(); - const { presentationState } = usePresentationMode(); + const { state: presentationState } = usePresentationMode(); const isCollaboratorsCursorsActive = presentationState.type === 'idle' || presentationState.isEditMode; const isPresenting = presentationState.type === 'presenting'; From e62726206bd81d7b3220e659a8c968bdcd3f4bf3 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Mon, 20 Nov 2023 08:48:14 +0100 Subject: [PATCH 06/12] fix tye checking Signed-off-by: nurjinn jafar --- .../CollaborationBar/CollaborationBar.tsx | 23 +++++++------------ src/components/Layout/Layout.tsx | 14 +++++++---- src/components/Whiteboard/WhiteboardHost.tsx | 11 ++++----- 3 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/components/CollaborationBar/CollaborationBar.tsx b/src/components/CollaborationBar/CollaborationBar.tsx index 8ecf1b68..3c265b6b 100644 --- a/src/components/CollaborationBar/CollaborationBar.tsx +++ b/src/components/CollaborationBar/CollaborationBar.tsx @@ -25,24 +25,17 @@ export function CollaborationBar() { const { state: presentationState } = usePresentationMode(); const isCollaboratorsCursorsActive = presentationState.type === 'idle' || presentationState.isEditMode; - const isPresenting = presentationState.type === 'presenting'; const isViewingPresentation = presentationState.type === 'presentation'; - const isCollaborationBarActive = - presentationState.type === 'idle' || - isPresenting || - (isViewingPresentation && presentationState.isEditMode); const toolbarTitle = t('collaborationBar.title', 'Collaboration'); return ( - isCollaborationBarActive && ( - - {isCollaboratorsCursorsActive && } - {!isViewingPresentation && } - - ) + + {isCollaboratorsCursorsActive && } + {!isViewingPresentation && } + ); } diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 651c334d..6fa6ddab 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -112,11 +112,15 @@ function AnimatedSidebar({ } function ContentArea() { - const { state } = usePresentationMode(); - const isViewingPresentation = state.type === 'presentation'; + const { state: presentationState } = usePresentationMode(); + const isViewingPresentation = presentationState.type === 'presentation'; const isViewingPresentationInEditMode = - isViewingPresentation && state.isEditMode; - + isViewingPresentation && presentationState.isEditMode; + const isPresenting = presentationState.type === 'presenting'; + const isCollaborationBarActive = + presentationState.type === 'idle' || + isPresenting || + (isViewingPresentation && presentationState.isEditMode); return ( <> @@ -127,7 +131,7 @@ function ContentArea() { top={(theme) => theme.spacing(1)} > {!isViewingPresentation && } - + {isCollaborationBarActive && } diff --git a/src/components/Whiteboard/WhiteboardHost.tsx b/src/components/Whiteboard/WhiteboardHost.tsx index 8771fcb6..b11a778d 100644 --- a/src/components/Whiteboard/WhiteboardHost.tsx +++ b/src/components/Whiteboard/WhiteboardHost.tsx @@ -113,8 +113,9 @@ export const WhiteboardHostConnected = () => { const { state: presentationState } = usePresentationMode(); const isPresenting = presentationState.type === 'presenting'; const isViewingPresentation = presentationState.type === 'presentation'; - const isViewingPresentationInEditMode = - isViewingPresentation && presentationState.isEditMode; + + const isInEditMode = + presentationState.type !== 'idle' && presentationState.isEditMode; if (loading) { return ; @@ -123,10 +124,8 @@ export const WhiteboardHostConnected = () => { return ( From 2d9f609517ac678b98d45b1bc5995cb6013cc0d5 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Wed, 22 Nov 2023 10:40:29 +0100 Subject: [PATCH 07/12] fix check for edit mode Signed-off-by: nurjinn jafar --- src/components/Whiteboard/WhiteboardHost.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Whiteboard/WhiteboardHost.tsx b/src/components/Whiteboard/WhiteboardHost.tsx index b11a778d..3942d1a8 100644 --- a/src/components/Whiteboard/WhiteboardHost.tsx +++ b/src/components/Whiteboard/WhiteboardHost.tsx @@ -114,8 +114,8 @@ export const WhiteboardHostConnected = () => { const isPresenting = presentationState.type === 'presenting'; const isViewingPresentation = presentationState.type === 'presentation'; - const isInEditMode = - presentationState.type !== 'idle' && presentationState.isEditMode; + const isEditModeEnabled = + presentationState.type === 'idle' || presentationState.isEditMode; if (loading) { return ; @@ -124,8 +124,8 @@ export const WhiteboardHostConnected = () => { return ( From 357c533aba08ca2870bc58bbd623aa1976964e50 Mon Sep 17 00:00:00 2001 From: nurjin jafar Date: Thu, 23 Nov 2023 11:02:08 +0100 Subject: [PATCH 08/12] Update .changeset/selfish-pans-switch.md Co-authored-by: maheichyk Signed-off-by: nurjin jafar --- .changeset/selfish-pans-switch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/selfish-pans-switch.md b/.changeset/selfish-pans-switch.md index 6a3167e2..00d2fee5 100644 --- a/.changeset/selfish-pans-switch.md +++ b/.changeset/selfish-pans-switch.md @@ -2,4 +2,4 @@ '@nordeck/matrix-neoboard-widget': minor --- -Show the collaborators cursor in presentation mode if edit slide active +Allows collaborators cursors to be shown in presentation mode if slide editing is enabled From 90aa12fde629c66f6302821c405c4fdb04a2ff31 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Thu, 23 Nov 2023 22:11:32 +0100 Subject: [PATCH 09/12] refactor conditions and adjust CollaborationBar.test.tsx Signed-off-by: nurjinn jafar --- .../CollaborationBar.test.tsx | 22 ++++++++++++++++--- .../CollaborationBar/CollaborationBar.tsx | 4 ++-- src/components/Layout/Layout.tsx | 9 +++----- src/components/Whiteboard/WhiteboardHost.tsx | 6 ++--- 4 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/components/CollaborationBar/CollaborationBar.test.tsx b/src/components/CollaborationBar/CollaborationBar.test.tsx index 70bcd04a..ce46a976 100644 --- a/src/components/CollaborationBar/CollaborationBar.test.tsx +++ b/src/components/CollaborationBar/CollaborationBar.test.tsx @@ -128,15 +128,31 @@ describe('', () => { it('should hide cursors in presentation mode if edit mode is not enabled', async () => { render(, { wrapper: Wrapper }); - const toggleCollaboratorsCursors = screen.getByRole('checkbox', { + const ShowCollaboratorsCursors = screen.getByRole('checkbox', { name: "Show collaborators' cursors", checked: false, }); - expect(toggleCollaboratorsCursors).toBeInTheDocument(); + setPresentationMode(true, false); + + expect(ShowCollaboratorsCursors).not.toBeInTheDocument(); + + setPresentationMode(true, true); + + await userEvent.click( + screen.getByRole('checkbox', { + name: "Show collaborators' cursors", + checked: false, + }), + ); + + const hideCollaboratorsCursors = screen.getByRole('checkbox', { + name: "Hide collaborators' cursors", + checked: true, + }); setPresentationMode(true, false); - expect(toggleCollaboratorsCursors).not.toBeInTheDocument(); + expect(hideCollaboratorsCursors).not.toBeInTheDocument(); }); }); diff --git a/src/components/CollaborationBar/CollaborationBar.tsx b/src/components/CollaborationBar/CollaborationBar.tsx index 3c265b6b..ef784b17 100644 --- a/src/components/CollaborationBar/CollaborationBar.tsx +++ b/src/components/CollaborationBar/CollaborationBar.tsx @@ -23,7 +23,7 @@ import { ShowCollaboratorsCursorsToggle } from './ShowCollaboratorsCursorsToggle export function CollaborationBar() { const { t } = useTranslation(); const { state: presentationState } = usePresentationMode(); - const isCollaboratorsCursorsActive = + const isEditEnabled = presentationState.type === 'idle' || presentationState.isEditMode; const isViewingPresentation = presentationState.type === 'presentation'; const toolbarTitle = t('collaborationBar.title', 'Collaboration'); @@ -34,7 +34,7 @@ export function CollaborationBar() { sx={{ pointerEvents: 'initial' }} data-guided-tour-target="collaborationbar" > - {isCollaboratorsCursorsActive && } + {isEditEnabled && } {!isViewingPresentation && } ); diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 6fa6ddab..ce7f2e63 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -116,11 +116,8 @@ function ContentArea() { const isViewingPresentation = presentationState.type === 'presentation'; const isViewingPresentationInEditMode = isViewingPresentation && presentationState.isEditMode; - const isPresenting = presentationState.type === 'presenting'; - const isCollaborationBarActive = - presentationState.type === 'idle' || - isPresenting || - (isViewingPresentation && presentationState.isEditMode); + const isEditEnabled = + presentationState.type === 'idle' || presentationState.isEditMode; return ( <> @@ -131,7 +128,7 @@ function ContentArea() { top={(theme) => theme.spacing(1)} > {!isViewingPresentation && } - {isCollaborationBarActive && } + {(isEditEnabled || !isViewingPresentation) && } diff --git a/src/components/Whiteboard/WhiteboardHost.tsx b/src/components/Whiteboard/WhiteboardHost.tsx index 3942d1a8..6056c35f 100644 --- a/src/components/Whiteboard/WhiteboardHost.tsx +++ b/src/components/Whiteboard/WhiteboardHost.tsx @@ -114,7 +114,7 @@ export const WhiteboardHostConnected = () => { const isPresenting = presentationState.type === 'presenting'; const isViewingPresentation = presentationState.type === 'presentation'; - const isEditModeEnabled = + const isEditEnabled = presentationState.type === 'idle' || presentationState.isEditMode; if (loading) { @@ -124,8 +124,8 @@ export const WhiteboardHostConnected = () => { return ( From c4dd148c477548e4d8d44c826bc9dd7f08fc5f12 Mon Sep 17 00:00:00 2001 From: nurjin jafar Date: Mon, 27 Nov 2023 09:37:13 +0100 Subject: [PATCH 10/12] Update src/components/CollaborationBar/CollaborationBar.test.tsx Co-authored-by: maheichyk Signed-off-by: nurjin jafar --- .../CollaborationBar.test.tsx | 29 +++---------------- 1 file changed, 4 insertions(+), 25 deletions(-) diff --git a/src/components/CollaborationBar/CollaborationBar.test.tsx b/src/components/CollaborationBar/CollaborationBar.test.tsx index ce46a976..6b802cb4 100644 --- a/src/components/CollaborationBar/CollaborationBar.test.tsx +++ b/src/components/CollaborationBar/CollaborationBar.test.tsx @@ -126,33 +126,12 @@ describe('', () => { }); it('should hide cursors in presentation mode if edit mode is not enabled', async () => { - render(, { wrapper: Wrapper }); - - const ShowCollaboratorsCursors = screen.getByRole('checkbox', { - name: "Show collaborators' cursors", - checked: false, - }); - setPresentationMode(true, false); - expect(ShowCollaboratorsCursors).not.toBeInTheDocument(); - - setPresentationMode(true, true); - - await userEvent.click( - screen.getByRole('checkbox', { - name: "Show collaborators' cursors", - checked: false, - }), - ); - - const hideCollaboratorsCursors = screen.getByRole('checkbox', { - name: "Hide collaborators' cursors", - checked: true, - }); - - setPresentationMode(true, false); + render(, { wrapper: Wrapper }); - expect(hideCollaboratorsCursors).not.toBeInTheDocument(); + expect( + screen.queryByRole('checkbox', { name: /cursors$/ }), + ).not.toBeInTheDocument(); }); }); From a62fd5e4ca2f26a1b7b1322a2a874056962f7680 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Mon, 27 Nov 2023 09:38:12 +0100 Subject: [PATCH 11/12] fix linting Signed-off-by: nurjinn jafar --- src/components/Whiteboard/WhiteboardHost.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Whiteboard/WhiteboardHost.tsx b/src/components/Whiteboard/WhiteboardHost.tsx index 6056c35f..b06e6437 100644 --- a/src/components/Whiteboard/WhiteboardHost.tsx +++ b/src/components/Whiteboard/WhiteboardHost.tsx @@ -113,7 +113,6 @@ export const WhiteboardHostConnected = () => { const { state: presentationState } = usePresentationMode(); const isPresenting = presentationState.type === 'presenting'; const isViewingPresentation = presentationState.type === 'presentation'; - const isEditEnabled = presentationState.type === 'idle' || presentationState.isEditMode; From 78b10f19bf1855aaf320cc8609378f0e3ea38e59 Mon Sep 17 00:00:00 2001 From: nurjinn jafar Date: Mon, 27 Nov 2023 09:42:40 +0100 Subject: [PATCH 12/12] add extra line Signed-off-by: nurjinn jafar --- src/components/Layout/Layout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index ce7f2e63..e183f0ae 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -118,6 +118,7 @@ function ContentArea() { isViewingPresentation && presentationState.isEditMode; const isEditEnabled = presentationState.type === 'idle' || presentationState.isEditMode; + return ( <>