feat(WebexInMeeting): implement one

src/components/WebexInMeeting/README.md

@@ -0,0 +1,35 @@
+# Webex In-Meeting Component
+
+Webex In-Meeting component displays the [Webex Local Media](../WebexLocalMedia) component on top of the [Webex Remote Media](../WebexRemoteMedia) component for the in meeting media experience.
+
+<p align="center">
+  <img src="./WebexInMeeting.png" alt="Default Webex InMeeting" />
+</p>
+
+## Preview
+
+To see all the different possible states of the Webex Interstitial Meeting component, you can run our Storybook:
+
+```shell
+  npm start
+```
+
+## Embed
+
+1.  Create a component adapter from which the data will be retrieved (See [adapters](../../adapters)). For instance:
+
+    ```js
+    const jsonAdapter = new WebexJSONAdapter(jsonData);
+    ```
+
+2.  Create a component instance by passing the meeting ID as a string and
+    enclose it within [a data provider](../WebexDataProvider/WebexDataProvider.js)
+    that takes the [component data adapter](../../adapters/WebexJSONAdapter.js) that we created previously
+
+    ```js
+    <WebexDataProvider adapter={jsonAdapter}>
+      <WebexInMeeting meetingID="meetingID" />
+    </WebexDataProvider>
+    ```
+
+The component knows how to manage its data. If anything changes in the data source that the adapter manages, the component will also update on its own.

src/components/WebexInMeeting/WebexInMeeting.css

@@ -0,0 +1,20 @@
+.in-meeting {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.in-meeting .remote-media {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.in-meeting .local-media {
+  position: absolute;
+  bottom: 25%;
+  right: 3%;
+  width: 20%;
+  height: 20%;
+  z-index: 1;
+}

src/components/WebexInMeeting/WebexInMeeting.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {WebexLocalMedia, WebexRemoteMedia} from '..';
+
+import './WebexInMeeting.css';
+
+/**
+ * Webex In-Meeting component displays the remote stream plus
+ * the local stream at the bottom right corner.
+ *
+ * @param {object} props
+ * @returns {object} JSX of the component
+ */
+export default function WebexInMeeting({meetingID}) {
+  return (
+    <div className="in-meeting">
+      <WebexRemoteMedia meetingID={meetingID} />
+      <WebexLocalMedia meetingID={meetingID} />
+    </div>
+  );
+}
+
+WebexInMeeting.propTypes = {
+  meetingID: PropTypes.string.isRequired,
+};

src/components/WebexInMeeting/WebexInMeeting.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+
+import jsonData from '../../data';
+import {WebexJSONAdapter} from '../../adapters';
+
+import {WebexInMeeting, WebexDataProvider} from '..';
+
+// Setup for the stories
+const stories = storiesOf('Webex InMeeting', module);
+const webexAdapter = new WebexJSONAdapter(jsonData);
+const wrapperStyle = {height: '500px', width: '800px', border: '1px solid black'};
+
+stories.add('remote and local media enabled', () => (
+  <div style={wrapperStyle}>
+    <WebexDataProvider adapter={webexAdapter}>
+      <WebexInMeeting meetingID="remote&localMedia" />
+    </WebexDataProvider>
+  </div>
+));
+
+stories.add('only remote media enabled', () => (
+  <div style={wrapperStyle}>
+    <WebexDataProvider adapter={webexAdapter}>
+      <WebexInMeeting meetingID="remoteMedia" />
+    </WebexDataProvider>
+  </div>
+));

src/components/WebexInMeeting/WebexInMeeting.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import WebexInMeeting from '../WebexInMeeting/WebexInMeeting';
+
+jest.mock('../hooks/useMeeting');
+
+describe('Webex InMeeting component', () => {
+  describe('snapshot', () => {
+    test('matches snapshot of meeting', () => {
+      expect(shallow(<WebexInMeeting meetingID="remoteMedia" />)).toMatchSnapshot();
+    });
+  });
+});

src/components/WebexInMeeting/__snapshots__/WebexInMeeting.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Webex InMeeting component snapshot matches snapshot of meeting 1`] = `
+<div
+  className="in-meeting"
+>
+  <WebexRemoteMedia
+    meetingID="remoteMedia"
+  />
+  <WebexLocalMedia
+    meetingID="remoteMedia"
+  />
+</div>
+`;

src/components/index.js

@@ -2,6 +2,7 @@ export {default as WebexAvatar} from './WebexAvatar/WebexAvatar';
 export {default as WebexActivity} from './WebexActivity/WebexActivity';
 export {default as WebexActivityStream} from './WebexActivityStream/WebexActivityStream';
 export {default as WebexDataProvider, AdapterContext} from './WebexDataProvider/WebexDataProvider';
+export {default as WebexInMeeting} from './WebexInMeeting/WebexInMeeting';
 export {default as WebexInterstitialMeeting} from './WebexInterstitialMeeting/WebexInterstitialMeeting';
 export {default as WebexLocalMedia} from './WebexLocalMedia/WebexLocalMedia';
 export {default as WebexMeetingControl} from './WebexMeetingControl/WebexMeetingControl';