From e03670b81c224b89ae69807a3be623ce977dff51 Mon Sep 17 00:00:00 2001 From: Jerko Steiner Date: Fri, 1 Apr 2016 19:44:09 -0400 Subject: [PATCH] Working click event on full screen video --- package.json | 1 + src/js/components/app.js | 15 ++++++---- src/js/index.js | 7 ++++- src/js/store/__tests__/streamStore-test.js | 35 ++++++++++++++++++---- src/js/store/streamStore.js | 6 +++- src/less/main.less | 27 ++++++++--------- 6 files changed, 63 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 61114e7..ccb0ffa 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "jest": { "scriptPreprocessor": "/node_modules/babel-jest", "unmockedModulePathPatterns": [ + "/node_modules/debug", "/node_modules/react", "/node_modules/react-dom", "/node_modules/react-addons-test-utils", diff --git a/src/js/components/app.js b/src/js/components/app.js index 3c0a6fc..866852c 100644 --- a/src/js/components/app.js +++ b/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(); - if (activeStore.isActive(userId)) return; + play(event); dispatcher.dispatch({ type: 'mark-active', - userId + userId: activeStore.isActive(userId) ? undefined : userId }); } diff --git a/src/js/index.js b/src/js/index.js index 82bde02..ad81065 100644 --- a/src/js/index.js +++ b/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); + } }); } diff --git a/src/js/store/__tests__/streamStore-test.js b/src/js/store/__tests__/streamStore-test.js index 75cafc1..c133376 100644 --- a/src/js/store/__tests__/streamStore-test.js +++ b/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('user2')).toBe(stream2); + expect(streamStore.getStream('user1')).toEqual({ + stream: stream1, + url: 'url1' + }); + expect(streamStore.getStream('user2')).toEqual({ + stream: stream2, + url: 'url2' + }); expect(streamStore.getStreams()).toEqual({ - user1: stream1, - user2: stream2 + user1: { + stream: stream1, + url: 'url1' + }, + user2: { + stream: stream2, + url: 'url2' + } }); expect(onChange.mock.calls.length).toEqual(2); }); diff --git a/src/js/store/streamStore.js b/src/js/store/streamStore.js index 7aa513e..c4ce63d 100644 --- a/src/js/store/streamStore.js +++ b/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); diff --git a/src/less/main.less b/src/less/main.less index fe3fb92..390a4e8 100644 --- a/src/less/main.less +++ b/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; - border-radius: 30px; + box-shadow: 0px 0px 5px black; + border-radius: 50px; display: inline-block; margin-right: 10px; - width: 150px; + width: 100px; height: 100%; z-index: 2; video { - border-radius: 30px; - pointer: cursor; + border-radius: 50px; + cursor: pointer; object-fit: cover; width: 100%; height: 100%; @@ -132,7 +129,7 @@ body { video { border-radius: 0; - pointer: inherit; + cursor: inherit; } } }