Working click event on full screen video

package.json

@@ -40,6 +40,7 @@
   "jest": {
     "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
     "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/debug",
       "<rootDir>/node_modules/react",
       "<rootDir>/node_modules/react-dom",
       "<rootDir>/node_modules/react-addons-test-utils",

src/js/components/app.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const _ = require('underscore');
 const activeStore = require('../store/activeStore.js');
-const createObjectURL = require('../browser/createObjectURL');
+const debug = require('debug')('peer-calls:app');
 const dispatcher = require('../dispatcher/dispatcher.js');
 const streamStore = require('../store/streamStore.js');
 
@@ -9,18 +9,21 @@ function app() {
   let streams = streamStore.getStreams();
 
   function play(event) {
-    event.target.play();
+    try {
+      event.target.play();
+    } catch (e) {
+      debug('error starting video: %s', e.name);
+    }
   }
 
   let videos = _.map(streams, (stream, userId) => {
-    let url = createObjectURL(stream);
+    let url = stream.url;
 
     function markActive(event) {
-      event.target.play();
+      play(event);
-      if (activeStore.isActive(userId)) return;
       dispatcher.dispatch({
         type: 'mark-active',
-        userId
+        userId: activeStore.isActive(userId) ? undefined : userId
       });
     }
 

src/js/index.js

@@ -2,6 +2,7 @@
 if (window.localStorage && !window.localStorage.debug) {
   window.localStorage.debug = 'peer-calls:*';
 }
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {};
 
 const App = require('./components/app.js');
 const React = require('react');
@@ -18,7 +19,11 @@ function play() {
   let videos = window.document.querySelectorAll('video');
   Array.prototype.forEach.call(videos, (video, index) => {
     debug('playing video: %s', index);
-    video.play();
+    try {
+      video.play();
+    } catch (e) {
+      debug('error playing video: %s', e.name);
+    }
   });
 }
 

src/js/store/__tests__/streamStore-test.js

@@ -1,6 +1,7 @@
 jest.dontMock('../streamStore.js');
 jest.dontMock('debug');
 
+const createObjectUrl = require('../../browser/createObjectURL.js');
 const dispatcher = require('../../dispatcher/dispatcher.js');
 const streamStore = require('../streamStore.js');
 
@@ -20,9 +21,16 @@ describe('streamStore', () => {
     it('should add a stream', () => {
       let stream = {};
 
+      createObjectUrl.mockImplementation(str => {
+        if (str === stream) return 'url1';
+      });
+
       handleAction({ type: 'add-stream', userId: 'user1', stream });
 
-      expect(streamStore.getStream('user1')).toBe(stream);
+      expect(streamStore.getStream('user1')).toEqual({
+        stream,
+        url: 'url1'
+      });
       expect(onChange.mock.calls.length).toEqual(1);
     });
 
@@ -30,14 +38,31 @@ describe('streamStore', () => {
       let stream1 = {};
       let stream2 = {};
 
+      createObjectUrl.mockImplementation(stream => {
+        if (stream === stream1) return 'url1';
+        if (stream === stream2) return 'url2';
+      });
+
       handleAction({ type: 'add-stream', userId: 'user1', stream: stream1 });
       handleAction({ type: 'add-stream', userId: 'user2', stream: stream2 });
 
-      expect(streamStore.getStream('user1')).toBe(stream1);
+      expect(streamStore.getStream('user1')).toEqual({
-      expect(streamStore.getStream('user2')).toBe(stream2);
+        stream: stream1,
+        url: 'url1'
+      });
+      expect(streamStore.getStream('user2')).toEqual({
+        stream: stream2,
+        url: 'url2'
+      });
       expect(streamStore.getStreams()).toEqual({
-        user1: stream1,
+        user1: {
-        user2: stream2
+          stream: stream1,
+          url: 'url1'
+        },
+        user2: {
+          stream: stream2,
+          url: 'url2'
+        }
       });
       expect(onChange.mock.calls.length).toEqual(2);
     });

src/js/store/streamStore.js

@@ -1,5 +1,6 @@
 'use strict';
 const EventEmitter = require('events');
+const createObjectURL = require('../browser/createObjectURL');
 const debug = require('debug')('peer-calls:streamStore');
 const dispatcher = require('../dispatcher/dispatcher.js');
 
@@ -12,7 +13,10 @@ const streams = {};
 const handlers = {
   'add-stream': ({ userId, stream }) => {
     debug('add-stream, user: %s', userId);
-    streams[userId] = stream;
+    streams[userId] = {
+      stream,
+      url: createObjectURL(stream)
+    };
   },
   'remove-stream': ({ userId }) => {
     debug('remove-stream, user: %s', userId);

src/less/main.less

@@ -14,20 +14,20 @@
 html, body {
   width: 100%;
   height: 100%;
+  z-index: -99;
 }
 
 body {
   background-color: @color-bg;
+  background-image: url('/res/peer-calls.svg');
+  background-size: 200px;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
   color: @color-fg;
   margin: 0 0;
   font-family: sans-serif;
 }
 
-#container {
-  width: 100%;
-  height: 100%;
-}
-
 #form {
   padding-top: 3em;
   text-align: center;
@@ -88,12 +88,9 @@ body {
 }
 
 .app {
-  width: 100%;
-  height: 100%;
-  position: relative;
 
   .videos {
-    position: absolute;
+    position: fixed;
     height: 100px;
     bottom: 15px;
     right: 0px;
@@ -101,17 +98,17 @@ body {
 
     .video-container {
       background-color: black;
-      box-shadow: 0px 0px 5px #333;
+      box-shadow: 0px 0px 5px black;
-      border-radius: 30px;
+      border-radius: 50px;
       display: inline-block;
       margin-right: 10px;
-      width: 150px;
+      width: 100px;
       height: 100%;
       z-index: 2;
 
       video {
-        border-radius: 30px;
+        border-radius: 50px;
-        pointer: cursor;
+        cursor: pointer;
         object-fit: cover;
         width: 100%;
         height: 100%;
@@ -132,7 +129,7 @@ body {
 
       video {
         border-radius: 0;
-        pointer: inherit;
+        cursor: inherit;
       }
     }
   }