Ahoyapps 46 dominant speaker area

src/components/Participant/Participant.tsx

@@ -5,12 +5,19 @@ import { LocalParticipant, RemoteParticipant } from 'twilio-video';
 
 interface ParticipantProps {
   participant: LocalParticipant | RemoteParticipant;
+  disableAudio?: boolean;
 }
 
-export default function Participant({ participant }: ParticipantProps) {
+export default function Participant({
+  participant,
+  disableAudio,
+}: ParticipantProps) {
   return (
     <ParticipantInfo participant={participant}>
-      <ParticipantTracks participant={participant} />
+      <ParticipantTracks
+        participant={participant}
+        disableAudio={disableAudio}
+      />
     </ParticipantInfo>
   );
 }

src/components/ParticipantStrip/ParticipantStrip.tsx

@@ -4,14 +4,14 @@ import { styled } from '@material-ui/core/styles';
 import useParticipants from '../../hooks/useParticipants/useParticipants';
 import { useVideoContext } from '../../hooks/context';
 
-const Container = styled('aside')({
+const Container = styled('aside')(({ theme }) => ({
   position: 'absolute',
   top: 0,
   bottom: 0,
-  right: '85%',
+  right: `calc(100% - ${theme.sidebarPosition})`,
   left: 0,
   padding: '0.5em',
-});
+}));
 
 export default function ParticipantStrip() {
   const { room } = useVideoContext();

src/components/ParticipantTracks/ParticipantTracks.tsx

@@ -6,10 +6,12 @@ import { useVideoContext } from '../../hooks/context';
 
 interface ParticipantTracksProps {
   participant: LocalParticipant | RemoteParticipant;
+  disableAudio?: boolean;
 }
 
 export default function ParticipantTracks({
   participant,
+  disableAudio,
 }: ParticipantTracksProps) {
   const { room } = useVideoContext();
   const publications = usePublications(participant);
@@ -23,6 +25,7 @@ export default function ParticipantTracks({
           publication={publication}
           participant={participant}
           isLocal={isLocal}
+          disableAudio={disableAudio}
         />
       ))}
     </>

src/components/Publication/Publication.test.tsx

@@ -33,6 +33,20 @@ describe('the Publication component', () => {
     expect(wrapper.find('AudioTrack').length).toBe(1);
   });
 
+  it('should render null when the track has name "microphone" and disableAudio is true', () => {
+    mockUseTrack.mockImplementation(() => ({ name: 'microphone' }));
+    const wrapper = shallow(
+      <Publication
+        isLocal
+        publication={'mockPublication' as any}
+        participant={'mockParticipant' as any}
+        disableAudio={true}
+      />
+    );
+    expect(useTrack).toHaveBeenCalledWith('mockPublication');
+    expect(wrapper.find('AudioTrack').length).toBe(0);
+  });
+
   it('should render null when there is no track', () => {
     mockUseTrack.mockImplementation(() => null);
     const wrapper = shallow(

src/components/Publication/Publication.tsx

@@ -14,11 +14,13 @@ interface PublicationProps {
   publication: LocalTrackPublication | RemoteTrackPublication;
   participant: Participant;
   isLocal: boolean;
+  disableAudio?: boolean;
 }
 
 export default function Publication({
   publication,
   isLocal,
+  disableAudio,
 }: PublicationProps) {
   const track = useTrack(publication);
 
@@ -28,7 +30,7 @@ export default function Publication({
     case 'camera':
       return <VideoTrack track={track as IVideoTrack} isLocal={isLocal} />;
     case 'microphone':
-      return <AudioTrack track={track as IAudioTrack} />;
+      return disableAudio ? null : <AudioTrack track={track as IAudioTrack} />;
     default:
       return null;
   }

src/components/Room/Room.tsx

@@ -1,16 +1,33 @@
 import React from 'react';
 import ParticipantStrip from '../ParticipantStrip/ParticipantStrip';
 import { styled } from '@material-ui/core/styles';
+import useMainSpeaker from '../../hooks/useMainSpeaker/useMainSpeaker';
+import Participant from '../Participant/Participant';
 
 const Container = styled('div')({
   position: 'relative',
   height: '100%',
 });
 
+const MainParticipantContainer = styled('div')(({ theme }) => ({
+  position: 'absolute',
+  left: theme.sidebarPosition,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  '& > div': {
+    height: '100%',
+  },
+}));
+
 export default function Room() {
+  const mainParticipant = useMainSpeaker();
   return (
     <Container>
       <ParticipantStrip />
+      <MainParticipantContainer>
+        <Participant participant={mainParticipant} disableAudio />
+      </MainParticipantContainer>
     </Container>
   );
 }

src/hooks/useDominantSpeaker/useDominantSpeaker.test.tsx

@@ -0,0 +1,32 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import EventEmitter from 'events';
+import useDominantSpeaker from './useDominantSpeaker';
+import { useVideoContext } from '../context';
+
+jest.mock('../context');
+const mockUseVideoContext = useVideoContext as jest.Mock<any>;
+
+describe('the useDominantSpeaker hook', () => {
+  const mockRoom: any = new EventEmitter();
+  mockRoom.dominantSpeaker = 'mockDominantSpeaker';
+  mockUseVideoContext.mockImplementation(() => ({ room: mockRoom }));
+
+  it('should return room.dominantSpeaker by default', () => {
+    const { result } = renderHook(useDominantSpeaker);
+    expect(result.current).toBe('mockDominantSpeaker');
+  });
+
+  it('should return respond to "dominantSpeakerChanged" events', async () => {
+    const { result } = renderHook(useDominantSpeaker);
+    act(() => {
+      mockRoom.emit('dominantSpeakerChanged', 'newDominantSpeaker');
+    });
+    expect(result.current).toBe('newDominantSpeaker');
+  });
+
+  it('should clean up listeners on unmount', () => {
+    const { unmount } = renderHook(useDominantSpeaker);
+    unmount();
+    expect(mockRoom.listenerCount('dominantSpeakerChanged')).toBe(0);
+  });
+});

src/hooks/useDominantSpeaker/useDominantSpeaker.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { useVideoContext } from '../context';
+
+export default function useDominantSpeaker() {
+  const { room } = useVideoContext();
+  const [dominantSpeaker, setDominantSpeaker] = useState(room.dominantSpeaker);
+
+  useEffect(() => {
+    room.on('dominantSpeakerChanged', setDominantSpeaker);
+    return () => {
+      room.off('dominantSpeakerChanged', setDominantSpeaker);
+    };
+  }, [room]);
+
+  return dominantSpeaker;
+}

src/hooks/useMainSpeaker/useMainSpeaker.test.tsx

@@ -0,0 +1,42 @@
+import useMainSpeaker from './useMainSpeaker';
+import { renderHook } from '@testing-library/react-hooks';
+import { useVideoContext } from '../context';
+import { EventEmitter } from 'events';
+
+jest.mock('../context');
+const mockUseVideoContext = useVideoContext as jest.Mock<any>;
+
+describe('the useMainSpeaker hook', () => {
+  it('should return the dominant speaker if it exists', () => {
+    const mockRoom: any = new EventEmitter();
+    mockRoom.dominantSpeaker = 'dominantSpeaker';
+    mockRoom.participants = new Map([[0, 'participant']]) as any;
+    mockRoom.localParticipant = 'localParticipant';
+    mockUseVideoContext.mockImplementation(() => ({ room: mockRoom }));
+    const { result } = renderHook(useMainSpeaker);
+    expect(result.current).toBe('dominantSpeaker');
+  });
+
+  it('should return the first remote participant if it exists', () => {
+    const mockRoom: any = new EventEmitter();
+    mockRoom.dominantSpeaker = null;
+    mockRoom.participants = new Map([
+      [0, 'participant'],
+      [1, 'secondParticipant'],
+    ]) as any;
+    mockRoom.localParticipant = 'localParticipant';
+    mockUseVideoContext.mockImplementation(() => ({ room: mockRoom }));
+    const { result } = renderHook(useMainSpeaker);
+    expect(result.current).toBe('participant');
+  });
+
+  it('should return the local participant if it exists', () => {
+    const mockRoom: any = new EventEmitter();
+    mockRoom.dominantSpeaker = null;
+    mockRoom.participants = new Map() as any;
+    mockRoom.localParticipant = 'localParticipant';
+    mockUseVideoContext.mockImplementation(() => ({ room: mockRoom }));
+    const { result } = renderHook(useMainSpeaker);
+    expect(result.current).toBe('localParticipant');
+  });
+});

src/hooks/useMainSpeaker/useMainSpeaker.tsx

@@ -0,0 +1,11 @@
+import { useVideoContext } from '../context';
+import useDominantSpeaker from '../useDominantSpeaker/useDominantSpeaker';
+import useParticipants from '../useParticipants/useParticipants';
+
+export default function useMainSpeaker() {
+  const { room } = useVideoContext();
+  const participants = useParticipants();
+  const dominantSpeaker = useDominantSpeaker();
+
+  return dominantSpeaker || participants[0] || room.localParticipant;
+}

src/theme.ts

@@ -1,10 +1,22 @@
 import { createMuiTheme } from '@material-ui/core';
 
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    sidebarPosition: string;
+  }
+
+  // allow configuration using `createMuiTheme`
+  interface ThemeOptions {
+    sidebarPosition?: string;
+  }
+}
+
 export default createMuiTheme({
   palette: {
     type: 'dark',
     primary: {
       main: '#cc2b33',
     },
   },
+  sidebarPosition: '15%',
 });