Ahoyapps 47 create participant filmstrip

jest.config.js

@@ -5,4 +5,6 @@ module.exports = {
   },
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFiles: ['<rootDir>/src/setupTests.ts']
 };

package.json

@@ -7,6 +7,8 @@
     "@material-ui/icons": "^4.5.1",
     "@testing-library/react": "^9.3.0",
     "@testing-library/react-hooks": "^3.1.1",
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "24.0.19",
     "@types/node": "12.11.1",
     "@types/react": "16.9.9",
@@ -15,6 +17,9 @@
     "@types/twilio-video": "^2.0.9",
     "body-parser": "^1.19.0",
     "concurrently": "^5.0.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-to-json": "^3.4.3",
     "express": "^4.17.1",
     "husky": "^3.0.9",
     "lint-staged": "^9.4.2",

src/App.tsx

@@ -3,9 +3,9 @@ import { styled } from '@material-ui/core/styles';
 
 import LocalVideoPreview from './components/LocalVideoPreview/LocalVideoPreview';
 import Menu from './components/Menu/Menu';
+import Room from './components/Room/Room';
 
 import useRoomState from './hooks/useRoomState/useRoomState';
-import { useVideoContext } from './hooks/context';
 
 const Container = styled('div')({
   display: 'flex',
@@ -17,19 +17,14 @@ const Main = styled('main')({
   height: '100%',
 });
 
-export default function Room() {
+export default function App() {
   const roomState = useRoomState();
-  const { room } = useVideoContext();
 
   return (
     <Container>
       <Menu />
       <Main>
-        {roomState === 'disconnected' ? (
-          <LocalVideoPreview />
-        ) : (
-          <p>You have joined room {room.name}</p>
-        )}
+        {roomState === 'disconnected' ? <LocalVideoPreview /> : <Room />}
       </Main>
     </Container>
   );

src/components/AudioTrack/AudioTrack.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AudioTrack from './AudioTrack';
+
+describe('the AudioTrack component', () => {
+  it('should call the attach method when the component mounts', () => {
+    const mockTrack = { attach: jest.fn(), detach: jest.fn() } as any;
+    render(<AudioTrack track={mockTrack} />);
+    expect(mockTrack.attach).toHaveBeenCalledWith(
+      expect.any(window.HTMLAudioElement)
+    );
+    expect(mockTrack.detach).not.toHaveBeenCalled();
+  });
+
+  it('it should call the detach method when the component unmounts', () => {
+    const mockTrack = { attach: jest.fn(), detach: jest.fn() } as any;
+    const { unmount } = render(<AudioTrack track={mockTrack} />);
+    unmount();
+    expect(mockTrack.detach).toHaveBeenCalledWith(
+      expect.any(window.HTMLAudioElement)
+    );
+  });
+});

src/components/AudioTrack/AudioTrack.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect, useRef } from 'react';
+import { AudioTrack as IAudioTrack } from 'twilio-video';
+
+interface AudioTrackProps {
+  track: IAudioTrack;
+}
+
+export default function AudioTrack({ track }: AudioTrackProps) {
+  const ref = useRef<HTMLAudioElement>(null!);
+
+  useEffect(() => {
+    const el = ref.current;
+    track.attach(el);
+    return () => {
+      track.detach(el);
+    };
+  }, [track]);
+
+  return <audio ref={ref} />;
+}

src/components/NewtorkQualityLevel/NetworkQualityLevel.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import NetworkQualityLevel from './NetworkQualityLevel';
+
+describe('the NetworkQualityLevel component', () => {
+  it('should render correctly for level 5', () => {
+    const tree = renderer
+      .create(<NetworkQualityLevel qualityLevel={5} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render correctly for level 3', () => {
+    const tree = renderer
+      .create(<NetworkQualityLevel qualityLevel={3} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render correctly for level 0', () => {
+    const tree = renderer
+      .create(<NetworkQualityLevel qualityLevel={0} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/NewtorkQualityLevel/NetworkQualityLevel.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled } from '@material-ui/core/styles';
+
+const Container = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  '& div': {
+    width: '2px',
+    border: '1px solid black',
+    boxSizing: 'content-box',
+    '&:not(:last-child)': {
+      borderRight: 'none',
+    },
+  },
+});
+
+const STEP = 3;
+
+export default function NetworkQualityLevel({
+  qualityLevel,
+}: {
+  qualityLevel: number | null;
+}) {
+  if (qualityLevel === null) return null;
+  return (
+    <Container>
+      {[0, 1, 2, 3, 4].map(level => (
+        <div
+          key={level}
+          style={{
+            height: `${STEP * (level + 1)}px`,
+            background: qualityLevel > level ? '#0c0' : '#040',
+          }}
+        />
+      ))}
+    </Container>
+  );
+}

src/components/NewtorkQualityLevel/__snapshots__/NetworkQualityLevel.test.tsx.snap

@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the NetworkQualityLevel component should render correctly for level 0 1`] = `
+<div
+  className="div-root-1"
+>
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "3px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "6px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "9px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "12px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "15px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`the NetworkQualityLevel component should render correctly for level 3 1`] = `
+<div
+  className="div-root-1"
+>
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "3px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "6px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "9px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "12px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "15px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`the NetworkQualityLevel component should render correctly for level 5 1`] = `
+<div
+  className="div-root-1"
+>
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "3px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "6px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "9px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "12px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "15px",
+      }
+    }
+  />
+</div>
+`;

src/components/Participant/Participant.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ParticipantInfo from '../ParticipantInfo/ParticipantInfo';
+import ParticipantTracks from '../ParticipantTracks/ParticipantTracks';
+import { LocalParticipant, RemoteParticipant } from 'twilio-video';
+
+interface ParticipantProps {
+  participant: LocalParticipant | RemoteParticipant;
+}
+
+export default function Participant({ participant }: ParticipantProps) {
+  return (
+    <ParticipantInfo participant={participant}>
+      <ParticipantTracks participant={participant} />
+    </ParticipantInfo>
+  );
+}

src/components/ParticipantInfo/ParticipantInfo.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ParticipantInfo from './ParticipantInfo';
+import { shallow } from 'enzyme';
+
+jest.mock(
+  '../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel',
+  () => () => 4
+);
+
+describe('the ParticipantInfo component', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(
+      <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>
+        mock children
+      </ParticipantInfo>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/ParticipantInfo/ParticipantInfo.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { styled } from '@material-ui/core/styles';
+import { LocalParticipant, RemoteParticipant } from 'twilio-video';
+import NetworkQualityLevel from '../NewtorkQualityLevel/NetworkQualityLevel';
+import useParticipantNetworkQualityLevel from '../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel';
+
+const Container = styled('div')({
+  position: 'relative',
+});
+
+const InfoContainer = styled('div')({
+  position: 'absolute',
+  zIndex: 1,
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0.3em',
+  width: '100%',
+});
+
+const Identity = styled('h4')({
+  background: 'rgba(0, 0, 0, 0.7)',
+  padding: '0.1em 0.3em',
+  margin: 0,
+});
+
+interface ParticipantInfoProps {
+  participant: LocalParticipant | RemoteParticipant;
+  children: React.ReactNode;
+}
+
+export default function ParticipantInfo({
+  participant,
+  children,
+}: ParticipantInfoProps) {
+  const networkQualityLevel = useParticipantNetworkQualityLevel(participant);
+
+  return (
+    <Container>
+      <InfoContainer>
+        <Identity>{participant.identity}</Identity>
+        <NetworkQualityLevel qualityLevel={networkQualityLevel} />
+      </InfoContainer>
+      {children}
+    </Container>
+  );
+}