} onClick={onStop} />
+ {streamable ? : null}
} />
@@ -129,5 +137,6 @@ export default connect(
state => ({
playing: state.player.playing,
loaded: state.player.loaded,
- })
+ streamable: state.player.source === 'file',
+ }),
)(Controls);
diff --git a/src/client/components/Player.js b/src/client/components/Player.js
index 3f74237..5b8d52e 100644
--- a/src/client/components/Player.js
+++ b/src/client/components/Player.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { get } from '@client/container';
-import { setShowtime } from '@client/store/player';
+import { setShowtime, setTimeline } from '@client/store/player';
import { Video, YoutubeVideo } from '@client/components/video';
import Controls from '@client/components/Controls';
import Timeline from '@client/components/Timeline';
@@ -13,12 +13,21 @@ class Player extends Component {
static propTypes = {
source: PropTypes.string.isRequired,
setShowtime: PropTypes.func.isRequired,
+ setTimeline: PropTypes.func.isRequired,
+ duration: PropTypes.number,
+ currentTime: PropTypes.number,
+ };
+
+ static defaultProps = {
+ duration: 0,
+ currentTime: 0,
};
constructor(props) {
super(props);
this.api = get('api');
+ this.peer = get('peer');
this.showtime = new Showtime(props.setShowtime);
this.video = null;
this.timeline = null;
@@ -34,6 +43,40 @@ class Player extends Component {
this.onBackward = this.onBackward.bind(this);
this.onForward = this.onForward.bind(this);
this.onSeek = this.onSeek.bind(this);
+ this.onStream = this.onStream.bind(this);
+ this.toggleStream = this.toggleStream.bind(this);
+ }
+
+ get duration() {
+ if (this.props.source === 'peer') {
+ return this.props.duration;
+ }
+
+ return this.video.duration;
+ }
+
+ get currentTime() {
+ if (this.props.source === 'peer') {
+ return this.props.currentTime;
+ }
+
+ return this.video.currentTime;
+ }
+
+ componentDidMount() {
+ this.peer.addEventListener('stream', this.onStream);
+ }
+
+ componentWillUnmount() {
+ this.peer.removeEventListener('stream', this.onStream);
+ }
+
+ componentDidUpdate(prevProps) {
+ const { source } = this.props;
+
+ if (source !== prevProps.source && prevProps.source === 'peer') {
+ this.peer.clear();
+ }
}
setVideo(video) {
@@ -46,12 +89,18 @@ class Player extends Component {
onTimeUpdate() {
if (this.timeline) {
- this.timeline.setTime(this.video.currentTime, this.video.duration);
+ if (this.props.source !== 'peer') {
+ this.props.setTimeline(this.video.currentTime, this.video.duration);
+ }
+
+ if (this.peer.isStreaming()) {
+ this.api.setTimeline(this.video.currentTime, this.video.duration);
+ }
}
}
onProgress() {
- if (this.timeline) {
+ if (this.timeline && this.props.source !== 'peer') {
this.timeline.setLoadedParts(this.video.buffered, this.video.duration);
}
}
@@ -63,16 +112,16 @@ class Player extends Component {
onSeek(progress) {
if (typeof progress === 'number' && !isNaN(progress)) {
- this.api.seek(progress * this.video.duration);
+ this.api.seek(progress * this.duration);
}
}
onPlay() {
- this.api.play(this.video.currentTime);
+ this.api.play(this.currentTime);
}
onPause() {
- this.api.pause(this.video.currentTime);
+ this.api.pause(this.currentTime);
}
onStop() {
@@ -80,16 +129,40 @@ class Player extends Component {
}
onBackward() {
- this.api.seek(Math.max(this.video.currentTime - 10, 0));
+ this.api.seek(Math.max(this.currentTime - 10, 0));
}
onForward() {
- this.api.seek(Math.min(this.video.currentTime + 10, this.video.duration));
+ this.api.seek(Math.min(this.currentTime + 10, this.duration));
+ }
+
+ onStream() {
+ this.video.loadStream(this.peer.spectator.stream);
+ }
+
+ toggleStream() {
+ if (!this.peer.isStreaming()) {
+ this.peer.distribute(this.video.captureStream());
+ this.api.setTimeline(this.video.currentTime, this.video.duration);
+ } else {
+ this.peer.clear();
+ this.api.stopStreaming();
+ }
+ }
+
+ getVideoComponent(source) {
+ switch (source) {
+ case 'youtube':
+ return YoutubeVideo;
+
+ default:
+ return Video;
+ }
}
render() {
const { source } = this.props;
- const VideoComponent = source === 'youtube' ? YoutubeVideo : Video;
+ const VideoComponent = this.getVideoComponent(source);
return (
@@ -117,6 +190,7 @@ class Player extends Component {
onPause={this.onPause}
onBackward={this.onBackward}
onForward={this.onForward}
+ toggleStream={source === 'file' ? this.toggleStream : undefined}
/>
@@ -127,8 +201,11 @@ class Player extends Component {
export default connect(
state => ({
source: state.player.source,
+ duration: state.player.duration,
+ currentTime: state.player.currentTime,
}),
dispatch => ({
setShowtime: showtime => dispatch(setShowtime(showtime)),
+ setTimeline: (currentTime, duration) => dispatch(setTimeline(currentTime, duration)),
})
)(Player);
diff --git a/src/client/components/Socket.js b/src/client/components/Socket.js
index 23f752f..7bf2c93 100644
--- a/src/client/components/Socket.js
+++ b/src/client/components/Socket.js
@@ -2,9 +2,8 @@ import { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { get } from '@client/container';
-import { socketOpen, socketClose, me, userAdd, userRemove, userReady } from '@client/store/room';
-import { loadVideoFromServer } from '@client/store/player';
-import { play, pause, seek, stop } from '@client/store/player';
+import { socketOpen, socketClose, me, userAdd, userRemove, userReady, userStreaming } from '@client/store/room';
+import { play, pause, seek, stop, loadVideoFromServer, setTimeline, unloadStream } from '@client/store/player';
class Socket extends Component {
static propTypes = {
@@ -23,11 +22,14 @@ class Socket extends Component {
onUserAdd: PropTypes.func.isRequired,
onUserRemove: PropTypes.func.isRequired,
onUserReady: PropTypes.func.isRequired,
+ onUserStreaming: PropTypes.func.isRequired,
onControlPlay: PropTypes.func.isRequired,
onControlPause: PropTypes.func.isRequired,
onControlSeek: PropTypes.func.isRequired,
onControlStop: PropTypes.func.isRequired,
onVideo: PropTypes.func.isRequired,
+ setTimeline: PropTypes.func.isRequired,
+ unloadStream: PropTypes.func.isRequired,
};
static defaultProps = {
@@ -38,11 +40,17 @@ class Socket extends Component {
super(props);
this.api = get('api');
+ this.peer = get('peer');
this.onError = this.onError.bind(this);
this.onVideoFile = this.onVideoFile.bind(this);
this.onVideoUrl = this.onVideoUrl.bind(this);
this.onVideoYoutube = this.onVideoYoutube.bind(this);
+ this.onPeerOffer = this.onPeerOffer.bind(this);
+ this.onPeerAnswer = this.onPeerAnswer.bind(this);
+ this.onPeerCandidate = this.onPeerCandidate.bind(this);
+ this.onPeerTimeline = this.onPeerTimeline.bind(this);
+ this.onPeerStop = this.onPeerStop.bind(this);
}
componentDidMount() {
@@ -58,6 +66,7 @@ class Socket extends Component {
this.api.addEventListener('user:add', this.props.onUserAdd);
this.api.addEventListener('user:remove', this.props.onUserRemove);
this.api.addEventListener('user:ready', this.props.onUserReady);
+ this.api.addEventListener('user:streaming', this.props.onUserStreaming);
this.api.addEventListener('control:play', this.props.onControlPlay);
this.api.addEventListener('control:pause', this.props.onControlPause);
this.api.addEventListener('control:stop', this.props.onControlStop);
@@ -65,6 +74,11 @@ class Socket extends Component {
this.api.addEventListener('video:file', this.onVideoFile);
this.api.addEventListener('video:url', this.onVideoUrl);
this.api.addEventListener('video:youtube', this.onVideoYoutube);
+ this.api.addEventListener('peer:offer', this.onPeerOffer);
+ this.api.addEventListener('peer:answer', this.onPeerAnswer);
+ this.api.addEventListener('peer:candidate', this.onPeerCandidate);
+ this.api.addEventListener('peer:timeline', this.onPeerTimeline);
+ this.api.addEventListener('peer:stop', this.onPeerStop);
}
componentWillUnmount() {
@@ -78,6 +92,7 @@ class Socket extends Component {
this.api.removeEventListener('user:add', this.props.onUserAdd);
this.api.removeEventListener('user:remove', this.props.onUserRemove);
this.api.removeEventListener('user:ready', this.props.onUserReady);
+ this.api.removeEventListener('user:streaming', this.props.onUserStreaming);
this.api.removeEventListener('control:play', this.props.onControlPlay);
this.api.removeEventListener('control:pause', this.props.onControlPause);
this.api.removeEventListener('control:stop', this.props.onControlStop);
@@ -85,6 +100,11 @@ class Socket extends Component {
this.api.removeEventListener('video:file', this.onVideoFile);
this.api.removeEventListener('video:url', this.onVideoUrl);
this.api.removeEventListener('video:youtube', this.onVideoYoutube);
+ this.api.removeEventListener('peer:offer', this.onPeerOffer);
+ this.api.removeEventListener('peer:answer', this.onPeerAnswer);
+ this.api.removeEventListener('peer:candidate', this.onPeerCandidate);
+ this.api.removeEventListener('peer:timeline', this.onPeerTimeline);
+ this.api.removeEventListener('peer:stop', this.onPeerStop);
// Close connection
this.api.leave();
@@ -107,22 +127,45 @@ class Socket extends Component {
onVideoUrl(event) {
const { name, url } = event.detail;
-
this.props.onVideo('url', name, url);
}
onVideoYoutube(event) {
const { name, url } = event.detail;
-
this.props.onVideo('youtube', name, url);
}
onVideoFile(event) {
const { name } = event.detail;
-
this.props.onVideo('file', name);
}
+ onPeerOffer(event) {
+ const { description, sender } = event.detail;
+ this.peer.spectate(JSON.parse(description), sender);
+ this.props.onVideo('peer');
+ }
+
+ onPeerAnswer(event) {
+ const { sender, description } = event.detail;
+ this.peer.answer(sender, JSON.parse(description));
+ }
+
+ onPeerCandidate(event) {
+ const { sender, description } = event.detail;
+ this.peer.addCandidate(sender, JSON.parse(description));
+ }
+
+ onPeerTimeline(event) {
+ const { currentTime, duration } = event.detail;
+ this.props.setTimeline(currentTime, duration);
+ }
+
+ onPeerStop() {
+ this.props.unloadStream();
+ this.peer.clear();
+ }
+
/**
* On error
*
@@ -154,10 +197,13 @@ export default connect(
onUserAdd: event => dispatch(userAdd(event.detail)),
onUserRemove: event => dispatch(userRemove(event.detail)),
onUserReady: event => dispatch(userReady(event.detail)),
+ onUserStreaming: event => dispatch(userStreaming(event.detail)),
onControlPlay: event => dispatch(play(event.detail)),
onControlPause: event => dispatch(pause(event.detail)),
onControlSeek: event => dispatch(seek(event.detail)),
onControlStop: event => dispatch(stop(event.detail)),
onVideo: (source, name, url = null) => dispatch(loadVideoFromServer(source, name, url)),
+ unloadStream: () => dispatch(unloadStream()),
+ setTimeline: (currentTime, duration) => dispatch(setTimeline(currentTime, duration)),
})
)(Socket);
diff --git a/src/client/components/StreamButton.js b/src/client/components/StreamButton.js
new file mode 100644
index 0000000..0af6cb9
--- /dev/null
+++ b/src/client/components/StreamButton.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Button from '@client/components/Button';
+
+class StreamButton extends Component {
+ static propTypes = {
+ disabled: PropTypes.bool,
+ active: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired,
+ };
+
+ static defaultProps = {
+ disabled: false,
+ };
+
+ render() {
+ const { active, disabled, onClick } = this.props;
+
+ return
}
+ className={active ? 'active' : ''}
+ onClick={onClick}
+ />;
+ }
+}
+
+export default connect(
+ state => ({
+ active: state.room.streaming === state.room.me,
+ }),
+)(StreamButton);
+
diff --git a/src/client/components/Timeline.js b/src/client/components/Timeline.js
index d4411ef..87b82cd 100644
--- a/src/client/components/Timeline.js
+++ b/src/client/components/Timeline.js
@@ -1,21 +1,44 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
-export default class Timeline extends Component {
+class Timeline extends Component {
static propTypes = {
onSeek: PropTypes.func.isRequired,
+ played: PropTypes.string,
+ time: PropTypes.string,
+ duration: PropTypes.string,
};
+ static defaultProps = {
+ time: '',
+ duration: '',
+ played: '',
+ };
+
+ static formatPercent(time, duration) {
+ return (time / duration * 100).toFixed(3);
+ }
+
+ static formatTime(time) {
+ const hours = Math.floor(time / 3600);
+ const minutes = Math.floor(time / 60) % 60;
+ const seconds = time % 60;
+
+ if (hours) {
+ return `${hours}:${minutes.toFixed(0).padStart(2, 0)}:${seconds.toFixed(0).padStart(2, 0)}`;
+ }
+
+ return `${minutes}:${seconds.toFixed(0).padStart(2, 0)}`;
+ }
+
constructor(props) {
super(props);
this.container = null;
this.state = {
- time: '',
- duration: '',
loaded: [],
- played: 0,
};
this.setContainer = this.setContainer.bind(this);
@@ -27,44 +50,26 @@ export default class Timeline extends Component {
this.container = container;
}
- setTime(time, duration) {
- this.setState({
- played: this.formetPercent(time, duration),
- time: this.formatTime(time),
- duration: this.formatTime(duration),
- });
- }
-
setLoadedParts(buffered, duration) {
const { length } = buffered;
+
+ // Is streaming?
+ if (duration === Infinity || length === 0) {
+ return;
+ }
+
const parts = new Array(length);
for (let i = 0; i < length; i++) {
parts[i] = [
- this.formetPercent(buffered.start(i), duration),
- this.formetPercent(buffered.end(i), duration)
+ this.constructor.formatPercent(buffered.start(i), duration),
+ this.constructor.formatPercent(buffered.end(i), duration)
];
}
this.setState({ loaded: parts });
}
- formetPercent(time, duration) {
- return (time / duration * 100).toFixed(3);
- }
-
- formatTime(time) {
- const hours = Math.floor(time / 3600);
- const minutes = Math.floor(time / 60) % 60;
- const seconds = time % 60;
-
- if (hours) {
- return `${hours}:${minutes.toFixed(0).padStart(2, 0)}:${seconds.toFixed(0).padStart(2, 0)}`;
- }
-
- return `${minutes}:${seconds.toFixed(0).padStart(2, 0)}`;
- }
-
onMouseDown(event) {
this.props.onSeek(this.getPosition(event.nativeEvent));
}
@@ -80,7 +85,8 @@ export default class Timeline extends Component {
}
render() {
- const { played, loaded, time, duration } = this.state;
+ const { played, time, duration } = this.props;
+ const { loaded } = this.state;
return (
@@ -96,3 +102,14 @@ export default class Timeline extends Component {
);
}
}
+
+export default connect(
+ state => ({
+ played: Timeline.formatPercent(state.player.currentTime, state.player.duration),
+ time: Timeline.formatTime(state.player.currentTime),
+ duration: Timeline.formatTime(state.player.duration),
+ }),
+ null,
+ null,
+ { forwardRef: true }
+)(Timeline);
diff --git a/src/client/components/User.js b/src/client/components/User.js
index fd60d25..0c30fc3 100644
--- a/src/client/components/User.js
+++ b/src/client/components/User.js
@@ -6,6 +6,7 @@ export default class User extends Component {
id: PropTypes.number.isRequired,
me: PropTypes.bool.isRequired,
ready: PropTypes.bool.isRequired,
+ streaming: PropTypes.bool.isRequired,
name: PropTypes.string,
};
@@ -14,11 +15,12 @@ export default class User extends Component {
};
render() {
- const { me, ready } = this.props;
+ const { me, ready, streaming } = this.props;
const classNames = [
'user',
ready ? 'ready' : 'loading',
me ? 'me' : '',
+ streaming ? 'streaming' : '',
];
return (
@@ -27,6 +29,7 @@ export default class User extends Component {
+ {streaming ?
: null}
);
}
diff --git a/src/client/components/UserList.js b/src/client/components/UserList.js
index b2a086c..4212684 100644
--- a/src/client/components/UserList.js
+++ b/src/client/components/UserList.js
@@ -6,6 +6,7 @@ import User from '@client/components/User';
class UserList extends Component {
static propTypes = {
me: PropTypes.number,
+ streaming: PropTypes.number,
users: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
@@ -15,6 +16,7 @@ class UserList extends Component {
static defaultProps = {
me: null,
+ streaming: null,
};
constructor(props) {
@@ -29,9 +31,14 @@ class UserList extends Component {
}
renderUser(user) {
- const { me } = this.props;
-
- return createElement(User, { key: user.id, me: me === user.id, ...user });
+ const { me, streaming } = this.props;
+
+ return createElement(User, {
+ key: user.id,
+ me: me === user.id,
+ streaming: streaming === user.id,
+ ...user
+ });
}
render() {
@@ -49,5 +56,6 @@ export default connect(
state => ({
users: state.room.users,
me: state.room.me,
+ streaming: state.room.streaming,
})
)(UserList);
diff --git a/src/client/components/video/Video.js b/src/client/components/video/Video.js
index 65e4ece..1762365 100644
--- a/src/client/components/video/Video.js
+++ b/src/client/components/video/Video.js
@@ -4,7 +4,7 @@ import Subtitles from '@client/components/Subtitles';
export default class Video extends Component {
static propTypes = {
- src: PropTypes.string.isRequired,
+ src: PropTypes.string,
playing: PropTypes.bool.isRequired,
time: PropTypes.number.isRequired,
authorized: PropTypes.bool.isRequired,
@@ -20,11 +20,14 @@ export default class Video extends Component {
onPaused: PropTypes.func.isRequired,
onEnded: PropTypes.func.isRequired,
preload: PropTypes.string,
+ autoplay: PropTypes.bool,
volume: PropTypes.number.isRequired,
};
static defaultProps = {
preload: 'auto',
+ autoplay: false,
+ src: undefined,
};
constructor(props) {
@@ -36,9 +39,11 @@ export default class Video extends Component {
this.setElement = this.setElement.bind(this);
this.play = this.play.bind(this);
this.onLoadStart = this.onLoadStart.bind(this);
+ this.onProgress = this.onProgress.bind(this);
this.onCanPlay = this.onCanPlay.bind(this);
this.onCanPlayThrough = this.onCanPlayThrough.bind(this);
this.onDurationChange = this.onDurationChange.bind(this);
+ this.onLoadedMetadata = this.onLoadedMetadata.bind(this);
this.onNotAuthorized = this.onNotAuthorized.bind(this);
this.onEnded = this.onEnded.bind(this);
this.onAuthorized = this.onAuthorized.bind(this);
@@ -67,7 +72,7 @@ export default class Video extends Component {
setElement(element) {
this.element = element;
- if (element) {
+ if (this.element) {
this.element.volume = this.props.volume;
}
}
@@ -100,11 +105,27 @@ export default class Video extends Component {
}
seek(time) {
- if (typeof time === 'number') {
+ if (typeof time === 'number' && this.element.seekable.length) {
this.element.currentTime = time;
}
}
+ captureStream() {
+ if (typeof this.element.mozCaptureStream === 'function') {
+ return this.element.mozCaptureStream();
+ }
+
+ if (typeof this.element.captureStream === 'function') {
+ return this.element.captureStream();
+ }
+
+ return null;
+ }
+
+ loadStream(stream) {
+ this.element.srcObject = stream;
+ }
+
onAuthorized() {
if (!this.props.authorized) {
this.props.setAuthorized(true);
@@ -118,11 +139,17 @@ export default class Video extends Component {
}
onLoadStart() {
- if (this.props.loaded) {
+ if (typeof this.props.src === 'undefined') {
+ this.props.setLoaded(true);
+ } else {
this.props.setLoaded(false);
}
}
+ onProgress() {
+ this.props.onProgress();
+ }
+
onCanPlay() {
if (!this.props.loaded) {
this.props.setLoaded(true);
@@ -134,12 +161,17 @@ export default class Video extends Component {
}
onCanPlayThrough() {
+ this.props.setLoaded(true);
+ }
+ onLoadedMetadata() {
}
onDurationChange() {
- this.props.setDuration(this.element.duration);
- this.props.onDurationChange();
+ if (this.element.duration !== Infinity) {
+ this.props.setDuration(this.element.duration);
+ this.props.onDurationChange();
+ }
}
onEnded() {
@@ -151,19 +183,21 @@ export default class Video extends Component {
console.error(error);
}
- render(){
- const { src, preload } = this.props;
+ render() {
+ const { src, preload, autoplay } = this.props;
return (