Merge pull request #257 from nordeck/nic/feat/PB-3562-Avatars-of-coll…

…aborators-are-shown-in-every-mode

Avatars of collaborators are shown in every mode

.changeset/eight-lions-lick.md

@@ -0,0 +1,5 @@
+---
+'@nordeck/matrix-neoboard-widget': minor
+---
+
+Show collaborators avatars in presentation mode

public/locales/de/translation.json

@@ -166,8 +166,6 @@
   "presentBar": {
     "disableEditing": "Bearbeitung sperren",
     "enableEditing": "Bearbeitung freigeben",
-    "isPresenting": "präsentiert",
-    "isPresentingUser": "{{displayName}} präsentiert",
     "startPresentation": "Präsentation starten",
     "stopPresentation": "Präsentation beenden",
     "title": "Präsentieren"
@@ -202,6 +200,8 @@
   "toolbar": {
     "toolbarAvatar": {
       "label_you": "{{displayName}} (Du)",
+      "labelPresenter": "{{displayName}} präsentiert",
+      "labelPresenting_you": "{{displayName}} (Du) präsentiert",
       "more": "+{{furtherCount}}"
     }
   },

public/locales/en/translation.json

@@ -166,8 +166,6 @@
   "presentBar": {
     "disableEditing": "Disable editing",
     "enableEditing": "Enable editing",
-    "isPresenting": "is presenting",
-    "isPresentingUser": "{{displayName}} is presenting",
     "startPresentation": "Start presentation",
     "stopPresentation": "Stop presentation",
     "title": "Present"
@@ -202,6 +200,8 @@
   "toolbar": {
     "toolbarAvatar": {
       "label_you": "{{displayName}} (You)",
+      "labelPresenter": "{{displayName}} is presenting",
+      "labelPresenting_you": "{{displayName}} (You) are presenting",
       "more": "+{{furtherCount}}"
     }
   },

src/components/CollaborationBar/CollaborationBar.tsx

@@ -25,7 +25,6 @@ export function CollaborationBar() {
   const { state: presentationState } = usePresentationMode();
   const isEditEnabled =
     presentationState.type === 'idle' || presentationState.isEditMode;
-  const isViewingPresentation = presentationState.type === 'presentation';
   const toolbarTitle = t('collaborationBar.title', 'Collaboration');
 
   return (
@@ -35,7 +34,7 @@ export function CollaborationBar() {
       data-guided-tour-target="collaborationbar"
     >
       {isEditEnabled && <ShowCollaboratorsCursorsToggle />}
-      {!isViewingPresentation && <Collaborators />}
+      <Collaborators />
     </Toolbar>
   );
 }

src/components/CollaborationBar/Collaborators/Collaborators.test.tsx

@@ -39,9 +39,10 @@ describe('<Collaborators>', () => {
   let Wrapper: ComponentType<PropsWithChildren<{}>>;
   let whiteboardManager: jest.Mocked<WhiteboardManager>;
   let statistics: WhiteboardStatistics;
+  let setPresentationMode: (enable: boolean) => void;
 
   beforeEach(() => {
-    ({ whiteboardManager } = mockWhiteboardManager());
+    ({ whiteboardManager, setPresentationMode } = mockWhiteboardManager());
 
     widgetApi.mockSendStateEvent(mockRoomMember({ state_key: '@user-id' }));
     widgetApi.mockSendStateEvent(
@@ -148,6 +149,20 @@ describe('<Collaborators>', () => {
     );
   });
 
+  it('should always display the presenter in presentation mode', async () => {
+    setPresentationMode(true);
+
+    render(<Collaborators />, { wrapper: Wrapper });
+
+    const group = screen.getByRole('group', { name: 'Collaborators' });
+
+    expect(
+      within(group).getByRole('button', {
+        name: '@user-alice is presenting',
+      }),
+    ).toBeInTheDocument();
+  });
+
   it('should have no accessibility violations', async () => {
     const { container } = render(<Collaborators />, { wrapper: Wrapper });
 

src/components/CollaborationBar/Collaborators/Collaborators.tsx

@@ -28,6 +28,7 @@ import { useTranslation } from 'react-i18next';
 import {
   ActiveWhiteboardMember,
   useActiveWhiteboardMembers,
+  usePresentationMode,
 } from '../../../state';
 import { useUserDetails } from '../../../store';
 import { CollaboratorAvatar } from '../../common/CollaboratorAvatar';
@@ -41,14 +42,25 @@ import { orderMembersByState } from './orderMembersByState';
 
 export function Collaborators() {
   const { t } = useTranslation();
+  const { state } = usePresentationMode();
   const ownUserId = useWidgetApi().widgetParameters.userId;
+  const presenterUserId =
+    state.type === 'presentation'
+      ? state.presenterUserId
+      : state.type === 'presenting'
+        ? ownUserId
+        : undefined;
 
   if (!ownUserId) {
     throw new Error('Unknown user id');
   }
 
   const activeMembers = useActiveWhiteboardMembers();
-  const orderedMembers = orderMembersByState(activeMembers, ownUserId);
+  const orderedMembers = orderMembersByState(
+    activeMembers,
+    ownUserId,
+    presenterUserId,
+  );
   const maxAvatars = 5;
   const furtherMembers = orderedMembers.slice(maxAvatars);
 
@@ -91,8 +103,17 @@ export function Collaborators() {
           />
         }
       >
-        {orderedMembers.map((m) => (
-          <ToolbarAvatar key={m.userId} member={m} />
+        {orderedMembers.map((m, index) => (
+          <ToolbarAvatar
+            key={m.userId}
+            member={m}
+            presenter={index === 0 && presenterUserId !== undefined}
+            sx={
+              index === 1 && presenterUserId !== undefined
+                ? { marginLeft: 2 }
+                : undefined
+            }
+          />
         ))}
       </ToolbarAvatarGroup>
 

src/components/CollaborationBar/Collaborators/orderMembersByState.test.ts

@@ -17,7 +17,7 @@
 import { orderMembersByState } from './orderMembersByState';
 
 describe('orderMembersByState', () => {
-  it('should order own user first, followed by connected and recently active users', () => {
+  it('should order own user first, followed by connected users', () => {
     expect(
       orderMembersByState(
         [
@@ -43,4 +43,49 @@ describe('orderMembersByState', () => {
       { userId: '@user-id' },
     ]);
   });
+
+  it('should order presenter user first then own user, followed by connected users', () => {
+    expect(
+      orderMembersByState(
+        [
+          { userId: '@user-alice' },
+          { userId: '@user-bob' },
+          { userId: '@user-charlie' },
+          { userId: '@user-dave' },
+          { userId: '@user-id' },
+        ],
+        '@user-id',
+        '@user-paul',
+      ),
+    ).toEqual([
+      { userId: '@user-paul' },
+      { userId: '@user-id' },
+      { userId: '@user-alice' },
+      { userId: '@user-bob' },
+      { userId: '@user-charlie' },
+      { userId: '@user-dave' },
+    ]);
+  });
+
+  it('should order own user when he is presenter, followed by connected users', () => {
+    expect(
+      orderMembersByState(
+        [
+          { userId: '@user-alice' },
+          { userId: '@user-bob' },
+          { userId: '@user-charlie' },
+          { userId: '@user-dave' },
+          { userId: '@user-id' },
+        ],
+        '@user-id',
+        '@user-id',
+      ),
+    ).toEqual([
+      { userId: '@user-id' },
+      { userId: '@user-alice' },
+      { userId: '@user-bob' },
+      { userId: '@user-charlie' },
+      { userId: '@user-dave' },
+    ]);
+  });
 });

src/components/CollaborationBar/Collaborators/orderMembersByState.ts

@@ -19,9 +19,17 @@ import { ActiveWhiteboardMember } from '../../../state';
 export function orderMembersByState(
   activeMembers: ActiveWhiteboardMember[],
   ownUserId: string,
+  presenterUserId?: string,
 ): ActiveWhiteboardMember[] {
   const ownUser = { userId: ownUserId };
-  const connectedUsers = activeMembers.filter((u) => u.userId !== ownUserId);
 
-  return [ownUser, ...connectedUsers];
+  const firstUsers =
+    presenterUserId === undefined || presenterUserId === ownUserId
+      ? [ownUser]
+      : [{ userId: presenterUserId }, ownUser];
+  const connectedUsers = activeMembers.filter(
+    (u) => u.userId !== ownUserId && u.userId !== presenterUserId,
+  );
+
+  return [...firstUsers, ...connectedUsers];
 }

src/components/Layout/Layout.tsx

@@ -116,8 +116,6 @@ function ContentArea() {
   const isViewingPresentation = presentationState.type === 'presentation';
   const isViewingPresentationInEditMode =
     isViewingPresentation && presentationState.isEditMode;
-  const isEditEnabled =
-    presentationState.type === 'idle' || presentationState.isEditMode;
 
   return (
     <>
@@ -129,8 +127,8 @@ function ContentArea() {
         top={(theme) => theme.spacing(1)}
       >
         {!isViewingPresentation && <BoardBar />}
-        {(isEditEnabled || !isViewingPresentation) && <CollaborationBar />}
-        <PresentBar />
+        <CollaborationBar />
+        {!isViewingPresentation && <PresentBar />}
       </ToolbarContainer>
 
       <WhiteboardHost />

src/components/PresentBar/PresentBar.test.tsx

@@ -91,10 +91,6 @@ describe('<PresentBar/>', () => {
 
     const { container } = render(<PresentBar />, { wrapper: Wrapper });
 
-    expect(
-      await screen.findByRole('button', { name: 'Alice is presenting' }),
-    ).toBeInTheDocument();
-
     expect(await axe(container)).toHaveNoViolations();
   });
 
@@ -153,20 +149,6 @@ describe('<PresentBar/>', () => {
     ).toBeInTheDocument();
   });
 
-  it('should show the active presenter', async () => {
-    setPresentationMode(true);
-
-    render(<PresentBar />, { wrapper: Wrapper });
-
-    const toolbar = screen.getByRole('toolbar', { name: 'Present' });
-
-    expect(
-      await within(toolbar).findByRole('button', {
-        name: 'Alice is presenting',
-      }),
-    ).toBeInTheDocument();
-  });
-
   it('should change to the next slide', async () => {
     render(<PresentBar />, { wrapper: Wrapper });
 

src/components/PresentBar/PresentBar.tsx

@@ -18,22 +18,14 @@ import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
 import PresentToAllIcon from '@mui/icons-material/PresentToAll';
-import { Box } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  PresentationState,
   useActiveSlide,
   useActiveWhiteboardInstance,
   usePresentationMode,
 } from '../../state';
-import { useUserDetails } from '../../store';
-import {
-  Toolbar,
-  ToolbarAvatar,
-  ToolbarButton,
-  ToolbarToggle,
-} from '../common/Toolbar';
+import { Toolbar, ToolbarButton, ToolbarToggle } from '../common/Toolbar';
 
 export function PresentBar() {
   const { t } = useTranslation();
@@ -121,36 +113,6 @@ export function PresentBar() {
           />
         </>
       )}
-
-      {state.type === 'presentation' && <PresenterAvatar state={state} />}
     </Toolbar>
   );
 }
-
-function PresenterAvatar({
-  state,
-}: {
-  state: Extract<PresentationState, { type: 'presentation' }>;
-}) {
-  const { t } = useTranslation();
-
-  const { getUserDisplayName } = useUserDetails();
-  const displayName = getUserDisplayName(state.presenterUserId);
-
-  const presenterTitle = t(
-    'presentBar.isPresentingUser',
-    '{{displayName}} is presenting',
-    { displayName },
-  );
-
-  return (
-    <ToolbarAvatar
-      title={presenterTitle}
-      member={{ userId: state.presenterUserId }}
-    >
-      <Box component="span" ml={1} fontSize="medium">
-        {t('presentBar.isPresenting', 'is presenting')}
-      </Box>
-    </ToolbarAvatar>
-  );
-}

src/components/common/CollaboratorAvatar.tsx

@@ -24,22 +24,25 @@ export type CollaboratorAvatarProps = {
   displayName?: string;
   /** The url of the avatar. */
   avatarUrl?: string;
+  /** The presenter flag. */
+  presenter?: boolean;
 };
 
 export function CollaboratorAvatar({
   userId,
   displayName,
   avatarUrl,
+  presenter,
 }: CollaboratorAvatarProps) {
   return (
     <ElementAvatar
       userId={userId}
       displayName={displayName}
       avatarUrl={avatarUrl}
       sx={(theme) => ({
-        // We are using a box shadow instead of an outline as it doesn't work
-        // together with borderRadius in Safari
-        boxShadow: `0 0 0 2px ${getUserColor(userId)}`,
+        outline: `${getUserColor(userId)} ${
+          presenter ? 'dashed' : 'solid'
+        } 2px`,
         border: `2px solid ${theme.palette.background.default}`,
       })}
     />