From a537aa9b84d77a6689959468693f789428830c70 Mon Sep 17 00:00:00 2001
From: Bernie Zang <bernie.zang@gmail.com>
Date: Mon, 3 Apr 2017 11:31:43 -0400
Subject: [PATCH 1/2] feat(widget-meet): Render video srcObject instead of url

---
 .../react-component-video/src/index.js        | 13 ++++++++++--
 .../redux-module-media/src/reducer.js         | 10 ++++++++--
 .../src/components/call-active/index.js       | 20 +++++++++----------
 .../@ciscospark/widget-meet/src/container.js  |  8 ++++----
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/packages/node_modules/@ciscospark/react-component-video/src/index.js b/packages/node_modules/@ciscospark/react-component-video/src/index.js
index 3ce006c52..e80985cd5 100644
--- a/packages/node_modules/@ciscospark/react-component-video/src/index.js
+++ b/packages/node_modules/@ciscospark/react-component-video/src/index.js
@@ -3,13 +3,21 @@ import classNames from 'classnames';
 
 import styles from './styles.css';
 
-export default function Video({src, audioMuted}) {
+export default function Video({src, srcObject, audioMuted}) {
   // Need autoPlay to start the video automagically
+
+  function getEl(el) {
+    if (el && srcObject) {
+      el.srcObject = srcObject;
+    }
+  }
+
   return (
     <video
       autoPlay
       className={classNames(styles.video)}
       muted={audioMuted}
+      ref={getEl}
       src={src}
     />
   );
@@ -17,5 +25,6 @@ export default function Video({src, audioMuted}) {
 
 Video.propTypes = {
   audioMuted: PropTypes.bool,
-  src: PropTypes.string.isRequired
+  src: PropTypes.string,
+  srcObject: PropTypes.object
 };
diff --git a/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js b/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js
index baee1d5c5..cf148cbaa 100644
--- a/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js
+++ b/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js
@@ -65,6 +65,8 @@ export default function reducer(state = initialState, action) {
       localVideoDirection: call.localVideoDirection,
       remoteMediaStreamUrl: call.remoteMediaStreamUrl,
       localMediaStreamUrl: call.localMediaStreamUrl,
+      remoteMediaStream: call.remoteMediaStream,
+      localMediaStream: call.localMediaStream,
       remoteAudioMuted,
       remoteVideoMuted
     };
@@ -75,7 +77,8 @@ export default function reducer(state = initialState, action) {
     const mediaState = {
       localAudioDirection: call.localAudioDirection,
       localVideoDirection: call.localVideoDirection,
-      localMediaStreamUrl: call.localMediaStreamUrl
+      localMediaStreamUrl: call.localMediaStreamUrl,
+      localMediaStream: call.localMediaStream
     };
     return state.mergeIn([`callState`], mediaState);
   }
@@ -86,7 +89,8 @@ export default function reducer(state = initialState, action) {
       receivingVideo: call.receivingVideo,
       sendingAudio: call.sendingAudio,
       sendingVideo: call.sendingVideo,
-      remoteMediaStreamUrl: call.remoteMediaStreamUrl
+      remoteMediaStreamUrl: call.remoteMediaStreamUrl,
+      remoteMediaStream: call.remoteMediaStream
     };
     return state.mergeIn([`callState`], mediaState);
   }
@@ -119,6 +123,8 @@ export default function reducer(state = initialState, action) {
       .setIn([`status`, `isDialing`], false)
       .setIn([`callState`, `localMediaStreamUrl`], call.localMediaStreamUrl)
       .setIn([`callState`, `remoteMediaStreamUrl`], call.remoteMediaStreamUrl)
+      .setIn([`callState`, `localMediaStream`], call.localMediaStream)
+      .setIn([`callState`, `remoteMediaStream`], call.remoteMediaStream)
       .set(`callStartTime`, Date.parse(call.locus.fullState.lastActive));
   }
   case CALL_DISCONNECTED: {
diff --git a/packages/node_modules/@ciscospark/widget-meet/src/components/call-active/index.js b/packages/node_modules/@ciscospark/widget-meet/src/components/call-active/index.js
index 587c88ccb..5ca3fc668 100644
--- a/packages/node_modules/@ciscospark/widget-meet/src/components/call-active/index.js
+++ b/packages/node_modules/@ciscospark/widget-meet/src/components/call-active/index.js
@@ -19,12 +19,12 @@ export default function ActiveCall({
   onStartSendingVideo,
   onStopSendingAudio,
   onStopSendingVideo,
-  localMediaStreamUrl,
-  remoteMediaStreamUrl,
+  localMediaStream,
+  remoteMediaStream,
   toPersonAvatar,
   toPersonName
 }) {
-  const connectedClass = remoteMediaStreamUrl && styles.callConnected;
+  const connectedClass = remoteMediaStream && remoteMediaStream.active && styles.callConnected;
   const {
     sendingAudio,
     sendingVideo
@@ -54,8 +54,8 @@ export default function ActiveCall({
     </div>
   );
 
-  if (remoteMediaStreamUrl && !callState.remoteVideoMuted) {
-    remoteView = <Video src={remoteMediaStreamUrl} />;
+  if (remoteMediaStream && remoteMediaStream.active && !callState.remoteVideoMuted) {
+    remoteView = <Video srcObject={remoteMediaStream} />;
   }
 
   return (
@@ -64,7 +64,7 @@ export default function ActiveCall({
         { remoteView }
       </div>
       {
-        localMediaStreamUrl && sendingVideo &&
+        localMediaStream && localMediaStream.active && sendingVideo &&
         <Draggable
           bounds="parent"
           defaultClassNameDragging={styles.reactDraggableDragging}
@@ -72,12 +72,12 @@ export default function ActiveCall({
           position={localVideoPosition}
         >
           <div className={classNames(styles.localVideo, `local-video`)}>
-            <Video audioMuted src={localMediaStreamUrl} />
+            <Video audioMuted srcObject={localMediaStream} />
           </div>
         </Draggable>
       }
       {
-        localMediaStreamUrl &&
+        localMediaStream && localMediaStream.active &&
         <div className={classNames(styles.callControls, `call-controls`)}>
           <ButtonControls buttons={buttons} showLabels={false} />
         </div>
@@ -88,7 +88,7 @@ export default function ActiveCall({
 
 ActiveCall.propTypes = {
   callState: PropTypes.object,
-  localMediaStreamUrl: PropTypes.string,
+  localMediaStream: PropTypes.object,
   localVideoPosition: PropTypes.object,
   onHangupClick: PropTypes.func.isRequired,
   onLocalVideoDragStop: PropTypes.func,
@@ -96,7 +96,7 @@ ActiveCall.propTypes = {
   onStartSendingVideo: PropTypes.func.isRequired,
   onStopSendingAudio: PropTypes.func.isRequired,
   onStopSendingVideo: PropTypes.func.isRequired,
-  remoteMediaStreamUrl: PropTypes.string,
+  remoteMediaStream: PropTypes.object,
   toPersonAvatar: PropTypes.string,
   toPersonName: PropTypes.string
 };
diff --git a/packages/node_modules/@ciscospark/widget-meet/src/container.js b/packages/node_modules/@ciscospark/widget-meet/src/container.js
index a1c8d13f3..dc41f61ab 100644
--- a/packages/node_modules/@ciscospark/widget-meet/src/container.js
+++ b/packages/node_modules/@ciscospark/widget-meet/src/container.js
@@ -218,8 +218,8 @@ export class MeetWidget extends Component {
       } = this;
 
       const callState = media.get(`callState`).toJS();
-      const remoteUrl = media.getIn([`callState`, `remoteMediaStreamUrl`]);
-      const localUrl = media.getIn([`callState`, `localMediaStreamUrl`]);
+      const remoteMediaStream = media.getIn([`callState`, `remoteMediaStream`]);
+      const localMediaStream = media.getIn([`callState`, `localMediaStream`]);
       const isConnected = media.getIn([`status`, `isConnected`]);
       const isDialing = media.getIn([`status`, `isDialing`]);
       const isActiveCall = isDialing || isConnected;
@@ -255,7 +255,7 @@ export class MeetWidget extends Component {
               callState={callState}
               intl={intl}
               isConnected={isConnected}
-              localMediaStreamUrl={localUrl}
+              localMediaStream={localMediaStream}
               localVideoPosition={widgetMeet.get(`localVideoPosition`)}
               onHangupClick={handleHangup}
               onLocalVideoDragStop={handleLocalVideoDragStop}
@@ -263,7 +263,7 @@ export class MeetWidget extends Component {
               onStartSendingVideo={handleStartSendingVideo}
               onStopSendingAudio={handleStopSendingAudio}
               onStopSendingVideo={handleStopSendingVideo}
-              remoteMediaStreamUrl={remoteUrl}
+              remoteMediaStream={remoteMediaStream}
               toPersonAvatar={toPersonAvatar}
               toPersonName={toPersonName}
             />

From b7e5296a9441892e8375cec4ffec85876ed2fb05 Mon Sep 17 00:00:00 2001
From: Bernie Zang <bernie.zang@gmail.com>
Date: Mon, 3 Apr 2017 11:59:04 -0400
Subject: [PATCH 2/2] chore(redux-module-media): Remove unused streamURLs

---
 .../@ciscospark/redux-module-media/src/reducer.js           | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js b/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js
index cf148cbaa..48c9e07b4 100644
--- a/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js
+++ b/packages/node_modules/@ciscospark/redux-module-media/src/reducer.js
@@ -63,8 +63,6 @@ export default function reducer(state = initialState, action) {
       sendingVideo: call.sendingVideo,
       localAudioDirection: call.localAudioDirection,
       localVideoDirection: call.localVideoDirection,
-      remoteMediaStreamUrl: call.remoteMediaStreamUrl,
-      localMediaStreamUrl: call.localMediaStreamUrl,
       remoteMediaStream: call.remoteMediaStream,
       localMediaStream: call.localMediaStream,
       remoteAudioMuted,
@@ -77,7 +75,6 @@ export default function reducer(state = initialState, action) {
     const mediaState = {
       localAudioDirection: call.localAudioDirection,
       localVideoDirection: call.localVideoDirection,
-      localMediaStreamUrl: call.localMediaStreamUrl,
       localMediaStream: call.localMediaStream
     };
     return state.mergeIn([`callState`], mediaState);
@@ -89,7 +86,6 @@ export default function reducer(state = initialState, action) {
       receivingVideo: call.receivingVideo,
       sendingAudio: call.sendingAudio,
       sendingVideo: call.sendingVideo,
-      remoteMediaStreamUrl: call.remoteMediaStreamUrl,
       remoteMediaStream: call.remoteMediaStream
     };
     return state.mergeIn([`callState`], mediaState);
@@ -121,8 +117,6 @@ export default function reducer(state = initialState, action) {
       .set(`call`, call)
       .setIn([`status`, `isConnected`], true)
       .setIn([`status`, `isDialing`], false)
-      .setIn([`callState`, `localMediaStreamUrl`], call.localMediaStreamUrl)
-      .setIn([`callState`, `remoteMediaStreamUrl`], call.remoteMediaStreamUrl)
       .setIn([`callState`, `localMediaStream`], call.localMediaStream)
       .setIn([`callState`, `remoteMediaStream`], call.remoteMediaStream)
       .set(`callStartTime`, Date.parse(call.locus.fullState.lastActive));