From 1cdb662b285c57d2050968d6ceb4726fd71e9b64 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@nyumc.org>
Date: Fri, 1 Apr 2016 15:29:12 -0400
Subject: [PATCH] Add video.play() after each rerender (Android Chrome Fix)

---
 src/js/components/app.js |  3 ++-
 src/js/index.js          | 13 +++++++++++++
 src/js/peer/handshake.js |  1 +
 src/less/main.less       |  8 ++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/js/components/app.js b/src/js/components/app.js
index 7f9998d..3c0a6fc 100644
--- a/src/js/components/app.js
+++ b/src/js/components/app.js
@@ -15,7 +15,8 @@ function app() {
   let videos = _.map(streams, (stream, userId) => {
     let url = createObjectURL(stream);
 
-    function markActive() {
+    function markActive(event) {
+      event.target.play();
       if (activeStore.isActive(userId)) return;
       dispatcher.dispatch({
         type: 'mark-active',
diff --git a/src/js/index.js b/src/js/index.js
index bc51216..82bde02 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -14,10 +14,23 @@ const handshake = require('./peer/handshake.js');
 const socket = require('./socket.js');
 const streamStore = require('./store/streamStore.js');
 
+function play() {
+  let videos = window.document.querySelectorAll('video');
+  Array.prototype.forEach.call(videos, (video, index) => {
+    debug('playing video: %s', index);
+    video.play();
+  });
+}
+
 function render() {
   ReactDom.render(<App />, document.querySelector('#container'));
+  play();
 }
 
+dispatcher.register(action => {
+  if (action.type === 'play') play();
+});
+
 streamStore.addListener(() => () => {
   debug('streamStore - change');
   debug(streamStore.getStreams());
diff --git a/src/js/peer/handshake.js b/src/js/peer/handshake.js
index 5ea8ff1..269a15d 100644
--- a/src/js/peer/handshake.js
+++ b/src/js/peer/handshake.js
@@ -39,6 +39,7 @@ function init(socket, roomName, stream) {
 
     peer.once('connect', () => {
       debug('peer: %s, connect', user.id);
+      dispatcher.dispatch({ type: 'play' });
     });
 
     peer.on('stream', stream => {
diff --git a/src/less/main.less b/src/less/main.less
index 5418f71..fe3fb92 100644
--- a/src/less/main.less
+++ b/src/less/main.less
@@ -100,6 +100,9 @@ body {
     text-align: right;
 
     .video-container {
+      background-color: black;
+      box-shadow: 0px 0px 5px #333;
+      border-radius: 30px;
       display: inline-block;
       margin-right: 10px;
       width: 150px;
@@ -107,6 +110,7 @@ body {
       z-index: 2;
 
       video {
+        border-radius: 30px;
         pointer: cursor;
         object-fit: cover;
         width: 100%;
@@ -115,6 +119,9 @@ body {
     }
 
     .video-container.active {
+      background-color: transparent;
+      box-shadow: none;
+      border-radius: 0;
       position: fixed;
       width: 100%;
       left: 0;
@@ -124,6 +131,7 @@ body {
       z-index: -1;
 
       video {
+        border-radius: 0;
         pointer: inherit;
       }
     }