Add video.play() after each rerender (Android Chrome Fix)

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',

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());

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 => {

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;
       }
     }