VIDSOL-28: On the participants list, on muting the publisher the muted icon is not displayed (#211)

Author: behei-vonage

docs/KNOWN_ISSUES.md

@@ -1,6 +1,5 @@
 # Known Issues
 - `VIDSOL-32`: When using an iPhone camera as your video input device, disconnecting your iPhone camera may cause your video to freeze and the video input may not automatically switch.
-- `VIDSOL-28`: The publisher does not display a muted icon in the participant list when their audio is muted.
 - `VIDSOL-5`: Subscriber videos may be disabled without warning.
 - `VIDSOL-19`: The maximum number of displayed users is 10, even when the screen can accommodate more.
 - `VIDSOL-127`: New video input devices added to the user's machine do not prompt the user to switch devices.

frontend/src/components/MeetingRoom/ParticipantList/ParticipantList.tsx

@@ -11,6 +11,7 @@ import { SubscriberWrapper } from '../../../types/session';
 import getParticipantColor from '../../../utils/getParticipantColor';
 import useRoomShareUrl from '../../../hooks/useRoomShareUrl';
 import RightPanelTitle from '../RightPanel/RightPanelTitle';
+import usePublisherContext from '../../../hooks/usePublisherContext';
 
 const compareNameAlphabetically = (a: SubscriberWrapper, b: SubscriberWrapper) => {
   const nameA = a.subscriber?.stream?.name;
@@ -49,6 +50,8 @@ const ParticipantList = ({ handleClose, isOpen }: ParticipantListProps): ReactEl
     },
   } = useUserContext();
   const roomShareUrl = useRoomShareUrl();
+  const { isAudioEnabled } = usePublisherContext();
+
   const copyUrl = () => {
     navigator.clipboard.writeText(roomShareUrl);
 
@@ -90,7 +93,8 @@ const ParticipantList = ({ handleClose, isOpen }: ParticipantListProps): ReactEl
           <ParticipantListItem
             key="you"
             dataTestId="participant-list-item-you"
-            audioLevel={publisherAudio}
+            hasAudio={isAudioEnabled}
+            audioLevel={isAudioEnabled ? publisherAudio : undefined}
             name={`${name} (You)`}
             initials={getInitials(name)}
             avatarColor={getParticipantColor(name)}

frontend/src/components/MeetingRoom/ParticipantListItem/ParticipantListItem.spec.tsx

@@ -1,7 +1,16 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, beforeEach, vi, Mock } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Stream } from '@vonage/client-sdk-video';
 import ParticipantListItem, { ParticipantListItemProps } from './ParticipantListItem';
+import useAudioLevels from '../../../hooks/useAudioLevels';
+import usePublisherContext from '../../../hooks/usePublisherContext';
+import { PublisherContextType } from '../../../Context/PublisherProvider';
+
+vi.mock('../../../hooks/useAudioLevels');
+vi.mock('../../../hooks/usePublisherContext');
+
+const mockUseAudioLevels = useAudioLevels as Mock<[], number | undefined>;
+const mockUsePublisherContext = usePublisherContext as Mock<[], PublisherContextType>;
 
 describe('ParticipantListItem', () => {
   const mockStream: Stream = {
@@ -72,4 +81,47 @@ describe('ParticipantListItem', () => {
       fontSize: '14px',
     });
   });
+
+  describe('Publisher audio state handling', () => {
+    let publisherContext: PublisherContextType;
+    beforeEach(() => {
+      publisherContext = {
+        isAudioEnabled: true,
+      } as unknown as PublisherContextType;
+      mockUsePublisherContext.mockImplementation(() => publisherContext);
+      mockUseAudioLevels.mockReturnValue(50);
+    });
+
+    it('shows active audio state for publisher when microphone is enabled', () => {
+      mockUsePublisherContext.mockImplementation(() => ({
+        ...publisherContext,
+        isAudioEnabled: true,
+      }));
+      mockUseAudioLevels.mockReturnValue(75);
+
+      render(<ParticipantListItem {...defaultProps} audioLevel={undefined} hasAudio />);
+
+      const participantItem = screen.getByTestId('participant-list-item');
+      expect(participantItem).toBeInTheDocument();
+
+      const audioIndicator = screen.getByTestId('audio-indicator');
+      expect(audioIndicator).toBeInTheDocument();
+
+      const micIcon = screen.getByTestId('MicIcon');
+      expect(micIcon).toBeInTheDocument();
+    });
+
+    it('shows muted state when hasAudio is false', () => {
+      render(<ParticipantListItem {...defaultProps} audioLevel={undefined} hasAudio={false} />);
+
+      const participantItem = screen.getByTestId('participant-list-item');
+      expect(participantItem).toBeInTheDocument();
+
+      const audioIndicator = screen.getByTestId('audio-indicator');
+      expect(audioIndicator).toBeInTheDocument();
+
+      const micOffIcon = screen.getByTestId('MicOffIcon');
+      expect(micOffIcon).toBeInTheDocument();
+    });
+  });
 });