fix(audio): restore host/viewer playback and web chat

Author: ralyodio

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairux/desktop",
-  "version": "0.5.39",
+  "version": "0.5.40",
   "private": true,
   "description": "PairUX Desktop - Screen sharing with remote control",
   "author": "PairUX Team <hello@pairux.com>",

apps/desktop/src/renderer/components/video/VideoViewer.tsx

@@ -171,7 +171,6 @@ export function VideoViewer({
                 .play()
                 .then(() => {
                   setRequiresUnmute(false);
-                  setMutedState(false);
                   console.log('[VideoViewer] Audio unmuted after user gesture');
                 })
                 .catch((err: unknown) => {

apps/desktop/src/renderer/hooks/useWebRTCHostAPI.test.ts

@@ -52,6 +52,7 @@ class MockRTCPeerConnection {
   remoteDescription: RTCSessionDescriptionInit | null = null;
   onicecandidate: ((event: { candidate: unknown }) => void) | null = null;
   onconnectionstatechange: (() => void) | null = null;
+  ontrack: ((event: { track: MediaStreamTrack }) => void) | null = null;
 
   createOffer = vi.fn().mockResolvedValue({ type: 'offer', sdp: 'test-sdp' });
   createAnswer = vi.fn().mockResolvedValue({ type: 'answer', sdp: 'test-answer-sdp' });
@@ -113,7 +114,20 @@ describe('useWebRTCHostAPI', () => {
     (globalThis as Record<string, unknown>).EventSource = MockEventSource;
     (globalThis as Record<string, unknown>).RTCPeerConnection = MockRTCPeerConnection;
     (globalThis as Record<string, unknown>).RTCIceCandidate = vi.fn((c: unknown) => c);
+    (globalThis as Record<string, unknown>).MediaStream = vi.fn((tracks: unknown[]) => ({
+      getTracks: () => tracks,
+      getAudioTracks: () => tracks.filter((track) => (track as { kind?: string }).kind === 'audio'),
+      getVideoTracks: () => tracks.filter((track) => (track as { kind?: string }).kind === 'video'),
+    }));
     (globalThis as Record<string, unknown>).fetch = mockFetch;
+    (globalThis as Record<string, unknown>).Audio = vi.fn(() => ({
+      srcObject: null,
+      autoplay: false,
+      volume: 1,
+      muted: false,
+      play: vi.fn().mockResolvedValue(undefined),
+      pause: vi.fn(),
+    }));
   });
 
   afterEach(() => {
@@ -383,6 +397,47 @@ describe('useWebRTCHostAPI', () => {
       const mockPC = viewer?.peerConnection as unknown as MockRTCPeerConnection;
       expect(mockPC.createDataChannel).toHaveBeenCalledWith('control', { ordered: true });
     });
+
+    it('should create a local audio element when a viewer audio track is received', async () => {
+      const { result } = renderHook(() => useWebRTCHostAPI(defaultOptions));
+
+      await act(async () => {
+        await result.current.startHosting();
+      });
+
+      const es = MockEventSource.instances[0];
+      act(() => {
+        es.emit('connected', JSON.stringify({ sessionId: 'session-1' }));
+      });
+
+      await act(async () => {
+        es.emit(
+          'presence-join',
+          JSON.stringify({
+            presences: [{ user_id: 'viewer-1', role: 'viewer' }],
+          })
+        );
+      });
+
+      await act(async () => {
+        await vi.waitFor(() => {
+          expect(result.current.viewerCount).toBe(1);
+        });
+      });
+
+      const viewer = result.current.viewers.get('viewer-1');
+      const mockPC = viewer?.peerConnection as unknown as MockRTCPeerConnection;
+      const audioTrack = { kind: 'audio' } as MediaStreamTrack;
+
+      await act(async () => {
+        mockPC.ontrack?.({ track: audioTrack });
+      });
+
+      const updatedViewer = result.current.viewers.get('viewer-1');
+      expect(updatedViewer?.audioTrack).toBe(audioTrack);
+      expect(updatedViewer?.audioElement).toBeTruthy();
+      expect((globalThis as Record<string, unknown>).Audio).toHaveBeenCalled();
+    });
   });
 
   describe('signal handling', () => {

apps/desktop/src/renderer/hooks/useWebRTCHostAPI.ts

@@ -454,6 +454,17 @@ export function useWebRTCHostAPI({
           if (viewer) {
             viewer.audioTrack = event.track;
 
+            // Play viewer audio locally so the host can hear participants
+            const audioEl = new Audio();
+            audioEl.srcObject = new MediaStream([event.track]);
+            audioEl.autoplay = true;
+            audioEl.volume = 1.0;
+            audioEl.muted = viewer.isMuted;
+            void audioEl.play().catch((err: unknown) => {
+              console.warn('[WebRTCHost] Failed to play viewer audio:', err);
+            });
+            viewer.audioElement = audioEl;
+
             setViewers(new Map(viewersRef.current));
 
             // Relay this viewer's audio to all other viewers

apps/installer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairux/installer",
-  "version": "0.5.39",
+  "version": "0.5.40",
   "private": true,
   "description": "PairUX Desktop App Installer Service",
   "type": "module",

apps/turn/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairux/turn",
-  "version": "0.5.39",
+  "version": "0.5.40",
   "private": true,
   "description": "PairUX TURN/STUN Server (coturn)",
   "scripts": {

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairux/web",
-  "version": "0.5.39",
+  "version": "0.5.40",
   "private": true,
   "type": "module",
   "scripts": {

apps/web/src/app/session/[id]/page.tsx

@@ -246,7 +246,7 @@ interface SessionViewerContentProps {
 function SessionViewerContent({
   sessionId,
   session,
-  participantId,
+  participantId: _participantId,
   remoteCursors,
   connectionState,
   remoteStream,
@@ -478,7 +478,6 @@ function SessionViewerContent({
             {activePanel === 'chat' && (
               <ChatPanel
                 sessionId={sessionId}
-                participantId={participantId}
                 isCollapsed={false}
                 onToggleCollapse={() => {
                   setActivePanel(null);

apps/web/src/components/video/VideoViewer.test.tsx

@@ -98,6 +98,36 @@ describe('VideoViewer', () => {
     expect(screen.getByTitle('Turn speaker on (M)')).toBeInTheDocument();
   });
 
+  it('honors controlled speakerMuted state and calls onSpeakerMutedChange', () => {
+    const mockStream = createMockStream(['audio', 'video']);
+    const onSpeakerMutedChange = vi.fn();
+
+    const { rerender } = render(
+      <VideoViewer
+        {...defaultProps}
+        stream={mockStream}
+        connectionState="connected"
+        speakerMuted={false}
+        onSpeakerMutedChange={onSpeakerMutedChange}
+      />
+    );
+
+    fireEvent.click(screen.getByTitle('Mute (M)'));
+    expect(onSpeakerMutedChange).toHaveBeenCalledWith(true);
+
+    rerender(
+      <VideoViewer
+        {...defaultProps}
+        stream={mockStream}
+        connectionState="connected"
+        speakerMuted={true}
+        onSpeakerMutedChange={onSpeakerMutedChange}
+      />
+    );
+
+    expect(screen.getByTitle('Unmute (M)')).toBeInTheDocument();
+  });
+
   it('applies custom className', () => {
     const { container } = render(<VideoViewer {...defaultProps} className="custom-class" />);
     expect(container.firstChild).toHaveClass('custom-class');

apps/web/src/components/video/VideoViewer.tsx

@@ -66,7 +66,6 @@ export function VideoViewer({
         .play()
         .then(() => {
           setNeedsAudioGesture(false);
-          setMutedState(false);
         })
         .catch(() => {
           // Unmuted play blocked (iOS) — retry muted