From b3e5a2d9050ec6c8517083fd9a3f000293537378 Mon Sep 17 00:00:00 2001
From: Thomas Jarrand <thomas.jarrand@gmail.com>
Date: Tue, 12 Jan 2021 00:14:59 +0100
Subject: [PATCH 1/6] WIP

---
 package-lock.json                    |  55 ++++++++++++++-
 package.json                         |   3 +-
 src/client/components/Controls.js    |   8 ++-
 src/client/components/Player.js      |  22 ++++++
 src/client/components/Socket.js      |  28 ++++++++
 src/client/components/video/Video.js |  17 ++++-
 src/client/container.js              |   2 +
 src/client/peer/Distributor.js       |  88 +++++++++++++++++++++++
 src/client/peer/PeerManager.js       |  67 ++++++++++++++++++
 src/client/peer/Spectator.js         | 100 +++++++++++++++++++++++++++
 src/client/scenes/Room.js            |   2 +-
 src/client/service/Api.js            |  15 ++++
 src/client/store/player.js           |   6 +-
 src/client/translations/fr.json      |   3 +-
 src/events/index.js                  |   4 ++
 src/server/core/Server.js            |   2 +-
 src/server/room/Room.js              |  34 +++++++++
 17 files changed, 443 insertions(+), 13 deletions(-)
 create mode 100644 src/client/peer/Distributor.js
 create mode 100644 src/client/peer/PeerManager.js
 create mode 100644 src/client/peer/Spectator.js

diff --git a/package-lock.json b/package-lock.json
index dfcea74..e108eb1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "redux": "^4.1.0",
         "redux-logger": "^3.0.6",
         "reset-css": "^5.0.1",
-        "tom32i-event-emitter.js": "^2.0.5"
+        "tom32i-event-emitter.js": "^2.0.5",
+        "webrtc-adapter": "^7.7.0"
       },
       "devDependencies": {
         "@babel/core": "^7.14.0",
@@ -5494,6 +5495,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "dependencies": {
+        "sdp": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -5578,6 +5591,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -6439,6 +6457,19 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz",
+      "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==",
+      "dependencies": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -10530,6 +10561,14 @@
         "glob": "^7.1.3"
       }
     },
+    "rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "requires": {
+        "sdp": "^2.6.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -10577,6 +10616,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -11199,6 +11243,15 @@
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "dev": true
     },
+    "webrtc-adapter": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz",
+      "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==",
+      "requires": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 8e310cb..b6672e1 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "reset-css": "^5.0.1",
-    "tom32i-event-emitter.js": "^2.0.5"
+    "tom32i-event-emitter.js": "^2.0.5",
+    "webrtc-adapter": "^7.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",
diff --git a/src/client/components/Controls.js b/src/client/components/Controls.js
index 8328744..5118a73 100644
--- a/src/client/components/Controls.js
+++ b/src/client/components/Controls.js
@@ -13,6 +13,11 @@ class Controls extends Component {
         onStop: PropTypes.func.isRequired,
         onBackward: PropTypes.func.isRequired,
         onForward: PropTypes.func.isRequired,
+        onStream: PropTypes.func,
+    };
+
+    static defaultProps = {
+        onStream: null,
     };
 
     constructor(props) {
@@ -102,7 +107,7 @@ class Controls extends Component {
     }
 
     render() {
-        const { playing, loaded, onStop, onBackward, onForward } = this.props;
+        const { playing, loaded, onStop, onBackward, onForward, onStream } = this.props;
         const playIcon = loaded ? playing ? 'icon-pause' : 'icon-play' : 'icon-loader';
         const screenIcon = this.fullscreen ? 'icon-minimise' : 'icon-maximise';
 
@@ -110,6 +115,7 @@ class Controls extends Component {
             <div className="player-controls">
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-stop" />} onClick={onStop} />
+                    {onStream ? <Button disabled={!loaded} label="&#8682;" onClick={onStream} /> : null}
                 </div>
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-backward" onClick={onBackward} />} />
diff --git a/src/client/components/Player.js b/src/client/components/Player.js
index 3f74237..e4a561a 100644
--- a/src/client/components/Player.js
+++ b/src/client/components/Player.js
@@ -19,6 +19,7 @@ class Player extends Component {
         super(props);
 
         this.api = get('api');
+        this.peer = get('peer');
         this.showtime = new Showtime(props.setShowtime);
         this.video = null;
         this.timeline = null;
@@ -34,10 +35,25 @@ 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);
+    }
+
+    componentDidUpdate(prevProps) {
+        const { source } = this.props;
+
+            console.log('componentDidUpdate', source);
+        if (source !== prevProps.source && source === 'peer') {
+            console.log(this.video);
+            this.peer.spectator.setVideo(this.video);
+        }
     }
 
     setVideo(video) {
         this.video = video;
+
+        if (this.peer.spectator) {
+            this.peer.spectator.setVideo(this.video);
+        }
     }
 
     setTimeline(timeline) {
@@ -87,6 +103,10 @@ class Player extends Component {
         this.api.seek(Math.min(this.video.currentTime + 10, this.video.duration));
     }
 
+    onStream() {
+        this.peer.distribute(this.video);
+    }
+
     render() {
         const { source } = this.props;
         const VideoComponent = source === 'youtube' ? YoutubeVideo : Video;
@@ -96,6 +116,7 @@ class Player extends Component {
                 <AuthorizationModal />
                 <VideoComponent
                     ref={this.setVideo}
+                    //srcObject={this.peer.spectator ? this.peer.spectator.stream : null}
                     onTimeUpdate={this.onTimeUpdate}
                     onDurationChange={this.onTimeUpdate}
                     onProgress={this.onProgress}
@@ -117,6 +138,7 @@ class Player extends Component {
                         onPause={this.onPause}
                         onBackward={this.onBackward}
                         onForward={this.onForward}
+                        onStream={source === 'file' ? this.onStream : undefined}
                     />
                 </div>
             </figure>
diff --git a/src/client/components/Socket.js b/src/client/components/Socket.js
index 23f752f..5fbf8bb 100644
--- a/src/client/components/Socket.js
+++ b/src/client/components/Socket.js
@@ -38,11 +38,15 @@ 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);
     }
 
     componentDidMount() {
@@ -65,6 +69,9 @@ 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);
     }
 
     componentWillUnmount() {
@@ -85,6 +92,9 @@ 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);
 
         // Close connection
         this.api.leave();
@@ -123,6 +133,24 @@ class Socket extends Component {
         this.props.onVideo('file', name);
     }
 
+    onPeerOffer(event) {
+        const description = event.detail;
+
+        this.peer.spectate(description);
+
+        this.props.onVideo('peer');
+    }
+
+    onPeerAnswer(event) {
+        const description = event.detail;
+        this.peer.distributor.answer(description);
+    }
+
+    onPeerCandidate(event) {
+        const candidate = JSON.parse(event.detail);
+        this.peer.candidate(candidate);
+    }
+
     /**
      * On error
      *
diff --git a/src/client/components/video/Video.js b/src/client/components/video/Video.js
index 65e4ece..34a9d6b 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,
@@ -25,6 +25,7 @@ export default class Video extends Component {
 
     static defaultProps = {
         preload: 'auto',
+        src: null,
     };
 
     constructor(props) {
@@ -105,6 +106,18 @@ export default class Video extends Component {
         }
     }
 
+    captureStream() {
+        if (typeof this.element.mozCaptureStream === 'function') {
+            return this.element.mozCaptureStream();
+        }
+
+        if (typeof this.element.captureStream === 'function') {
+            return this.element.captureStream();
+        }
+
+        return null;
+    }
+
     onAuthorized() {
         if (!this.props.authorized) {
             this.props.setAuthorized(true);
@@ -157,7 +170,7 @@ export default class Video extends Component {
         return (
             <video
                 ref={this.setElement}
-                src={src}
+                src={src || undefined}
                 preload={preload}
                 onLoadStart={this.onLoadStart}
                 onProgress={this.props.onProgress}
diff --git a/src/client/container.js b/src/client/container.js
index db327a4..02cd03a 100644
--- a/src/client/container.js
+++ b/src/client/container.js
@@ -8,6 +8,7 @@ import Youtube from '@client/service/Youtube';
 import StoreWatcher from '@client/service/StoreWatcher';
 import Storage from '@client/service/Storage';
 import StorageListener from '@client/listener/StorageListener';
+import PeerManager from '@client/peer/PeerManager';
 
 const container = new Container();
 
@@ -31,6 +32,7 @@ container.registerService('api', Api, ['config:host', 'config:protocol']);
 container.registerService('youtube', Youtube, ['config:host']);
 container.registerService('watcher', StoreWatcher, ['store']);
 container.registerService('storage', Storage);
+container.registerService('peer', PeerManager, ['api']);
 
 // Listeners
 container.registerService('listener:storage', StorageListener, ['store', 'storage', 'config:debug']);
diff --git a/src/client/peer/Distributor.js b/src/client/peer/Distributor.js
new file mode 100644
index 0000000..46da50e
--- /dev/null
+++ b/src/client/peer/Distributor.js
@@ -0,0 +1,88 @@
+export default class Distributor {
+    constructor(api) {
+        this.api = api;
+        this.connection = new RTCPeerConnection();
+
+        this.onStatusChange = this.onStatusChange.bind(this);
+        this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);
+        this.onError = this.onError.bind(this);
+
+        this.connection.addEventListener('icecandidate', this.handleICECandidateEvent);
+        this.connection.addEventListener('track', this.handleTrackEvent.bind(this));
+        this.connection.addEventListener('negotiationneeded', this.handleNegotiationNeededEvent.bind(this));
+        this.connection.addEventListener('removetrack', this.handleRemoveTrackEvent.bind(this));
+        this.connection.addEventListener('iceconnectionstatechange', this.handleICEConnectionStateChangeEvent.bind(this));
+        this.connection.addEventListener('icegatheringstatechange', this.handleICEGatheringStateChangeEvent.bind(this));
+        this.connection.addEventListener('signalingstatechange', this.handleSignalingStateChangeEvent.bind(this));
+
+        //this.channel = this.connection.createDataChannel('video-send');
+        //this.channel.addEventListner('open', this.onStatusChange);
+        //this.channel.addEventListner('close', this.onStatusChange);
+    }
+
+    load(video, success) {
+        const stream = video.captureStream();
+
+        stream.getTracks().forEach(track => this.connection.addTrack(track, stream));
+
+        /*const mirror = document.createElement('video');
+        mirror.className = 'mirror';
+        mirror.width = 480;
+        mirror.height = 320;
+        mirror.autoplay = true;
+        document.body.appendChild(mirror);
+        mirror.srcObject = stream;*/
+
+        this.connection.createOffer()
+            .then(offer => this.connection.setLocalDescription(offer))
+            .then(() => success(this.connection.localDescription))
+            .catch(this.onError);
+    }
+
+    answer(sdp) {
+        console.log('answer', sdp.length);
+
+        const description = new RTCSessionDescription({ type: 'answer', sdp });
+
+        this.connection.setRemoteDescription(description).catch(this.onError);
+    }
+
+    candidate(sdp) {
+        const candidate = new RTCIceCandidate(sdp);
+
+        this.connection.addIceCandidate(candidate)
+    }
+
+    handleICECandidateEvent(event) {
+        console.log('handleICECandidateEvent', event);
+        if (event.candidate) {
+            this.api.newIceCandidate(event.candidate);
+        }
+    }
+    handleTrackEvent(event) {
+        console.log('handleTrackEvent', event);
+    }
+    handleNegotiationNeededEvent(event) {
+        console.log('handleNegotiationNeededEvent', event);
+    }
+    handleRemoveTrackEvent(event) {
+        console.log('handleRemoveTrackEvent', event);
+    }
+    handleICEConnectionStateChangeEvent(event) {
+        console.log('handleICEConnectionStateChangeEvent', event, this.connection.iceConnectionState);
+    }
+    handleICEGatheringStateChangeEvent(event) {
+        console.log('handleICEGatheringStateChangeEvent', event);
+    }
+    handleSignalingStateChangeEvent(event) {
+        console.log('handleSignalingStateChangeEvent', event, this.connection.signalingState);
+    }
+
+    onStatusChange(event) {
+
+    }
+
+    onError(error) {
+        console.error(error);
+    }
+}
diff --git a/src/client/peer/PeerManager.js b/src/client/peer/PeerManager.js
new file mode 100644
index 0000000..ddd3920
--- /dev/null
+++ b/src/client/peer/PeerManager.js
@@ -0,0 +1,67 @@
+import Distributor from '@client/peer/Distributor';
+import Spectator from '@client/peer/Spectator';
+import 'webrtc-adapter';
+
+export default class PeerManager {
+    constructor(api) {
+        this.api = api;
+        this.distributor = null;
+        this.spectator = null;
+
+        this.onOffer = this.onOffer.bind(this);
+        this.onAnswer = this.onAnswer.bind(this);
+    }
+
+    distribute(video) {
+        this.ensureIsFree();
+
+        this.distributor = new Distributor(this.api);
+        this.distributor.load(video, this.onOffer);
+    }
+
+    spectate(sdp) {
+        this.ensureIsFree();
+
+        console.log('spectate', sdp.length);
+
+        this.spectator = new Spectator(this.api);
+        this.spectator.load(sdp, this.onAnswer);
+    }
+
+    candidate(candidate) {
+        if (this.distributor) {
+            return this.distributor.candidate(candidate);
+        }
+
+        if (this.spectator) {
+            return this.spectator.candidate(candidate);
+        }
+    }
+
+    onOffer(localDescription) {
+        this.api.offer(localDescription.sdp);
+    }
+
+    onAnswer(localDescription) {
+        this.api.answer(localDescription.sdp);
+    }
+
+    onCandidate(candidate) {
+        this.api.answer(localDescription.sdp);
+    }
+
+    ensureIsFree() {
+        if (this.distributor) {
+            throw new Error('Already distributing.');
+        }
+
+        if (this.spectator) {
+            throw new Error('Already spectating.');
+        }
+    }
+
+    clear() {
+        this.distributor = null;
+        this.spectator = null;
+    }
+}
diff --git a/src/client/peer/Spectator.js b/src/client/peer/Spectator.js
new file mode 100644
index 0000000..0f99648
--- /dev/null
+++ b/src/client/peer/Spectator.js
@@ -0,0 +1,100 @@
+export default class Spectator {
+    constructor(api) {
+        this.api = api;
+        this.connection = new RTCPeerConnection();
+        this.stream = null;//new MediaStream();
+        this.video = null;
+
+        this.onReceive = this.onReceive.bind(this);
+        this.handleTrackEvent = this.handleTrackEvent.bind(this);
+
+        this.connection.addEventListener('datachannel', this.onReceive);
+
+        this.connection.addEventListener('icecandidate', this.handleICECandidateEvent.bind(this));
+        this.connection.addEventListener('track', this.handleTrackEvent);
+        this.connection.addEventListener('negotiationneeded', this.handleNegotiationNeededEvent.bind(this));
+        this.connection.addEventListener('removetrack', this.handleRemoveTrackEvent.bind(this));
+        this.connection.addEventListener('iceconnectionstatechange', this.handleICEConnectionStateChangeEvent.bind(this));
+        this.connection.addEventListener('icegatheringstatechange', this.handleICEGatheringStateChangeEvent.bind(this));
+        this.connection.addEventListener('signalingstatechange', this.handleSignalingStateChangeEvent.bind(this));
+    }
+
+    load(sdp, success) {
+        console.log('load', sdp.length);
+
+        const description = new RTCSessionDescription({ type: 'offer', sdp });
+
+        this.connection.setRemoteDescription(description)
+            .then(() => this.connection.createAnswer())
+            .then(answer => this.connection.setLocalDescription(answer))
+            .then(() => success(this.connection.localDescription))
+            .catch(this.onError);
+    }
+
+    candidate(sdp) {
+        const candidate = new RTCIceCandidate(sdp);
+
+        this.connection.addIceCandidate(candidate)
+    }
+
+    setVideo(video) {
+        console.log('setVideo', video);
+        this.video = video;
+        this.playStreamOnVideo();
+    }
+
+    setStream(stream) {
+        console.log('setStream', stream);
+        this.stream = stream;
+        this.playStreamOnVideo();
+    }
+
+    onReceive(event) {
+        console.log('onReceive', event);
+    }
+
+    handleICECandidateEvent(event) {
+        console.log('handleICECandidateEvent', event);
+        if (event.candidate) {
+            this.api.newIceCandidate(event.candidate);
+        };
+    }
+
+    handleTrackEvent(event) {
+        console.log('handleTrackEvent', event);
+
+        if (!this.stream) {
+            this.setStream(event.streams[0]);
+        }
+    }
+
+    handleNegotiationNeededEvent(event) {
+        console.log('handleNegotiationNeededEvent', event);
+    }
+    handleRemoveTrackEvent(event) {
+        console.log('handleRemoveTrackEvent', event);
+    }
+    handleICEConnectionStateChangeEvent(event) {
+        console.log('handleICEConnectionStateChangeEvent', event, this.connection.iceConnectionState);
+    }
+    handleICEGatheringStateChangeEvent(event) {
+        console.log('handleICEGatheringStateChangeEvent', event);
+    }
+    handleSignalingStateChangeEvent(event) {
+        console.log('handleSignalingStateChangeEvent', event, this.connection.signalingState);
+    }
+
+    playStreamOnVideo() {
+        console.log('playStreamOnVideo', !!this.video, !!this.stream);
+
+        if (this.video && this.stream) {
+            this.video.autoplay = true;
+            this.video.srcObject = this.stream;
+            console.log('srcObject set', this.stream);
+        }
+    }
+
+    onError(error) {
+        console.error(error);
+    }
+}
diff --git a/src/client/scenes/Room.js b/src/client/scenes/Room.js
index afc69fe..4bf8987 100644
--- a/src/client/scenes/Room.js
+++ b/src/client/scenes/Room.js
@@ -32,7 +32,7 @@ class Room extends Component {
     renderContent() {
         const { source, url, name } = this.props;
 
-        if (url) {
+        if (url || source === 'peer') {
             return <Player />;
         }
 
diff --git a/src/client/service/Api.js b/src/client/service/Api.js
index 6f9736e..7f01dee 100644
--- a/src/client/service/Api.js
+++ b/src/client/service/Api.js
@@ -62,4 +62,19 @@ export default class Api {
     loadVideo(source, name, url) {
         this.client.send(`video:${source}`, { url, name });
     }
+
+    offer(sdp) {
+        console.log('offer', sdp.length);
+        this.client.send('peer:offer', sdp);
+    }
+
+    answer(sdp) {
+        console.log('answer', sdp.length);
+        this.client.send('peer:answer', sdp);
+    }
+
+    newIceCandidate(candidate) {
+        console.log(JSON.stringify(candidate).length, candidate);
+        this.client.send('peer:candidate', JSON.stringify(candidate));
+    }
 }
diff --git a/src/client/store/player.js b/src/client/store/player.js
index 88e7c6e..9e5cb5b 100644
--- a/src/client/store/player.js
+++ b/src/client/store/player.js
@@ -127,7 +127,6 @@ export default function player(state = initialState, action) {
             return {
                 ...state,
                 url: payload.url,
-                sources: [],
                 name: payload.name,
                 type: payload.type,
                 source: payload.source,
@@ -141,7 +140,6 @@ export default function player(state = initialState, action) {
             return {
                 ...state,
                 url: payload.url,
-                sources: [],
                 source: payload.source,
                 fromServer: false,
                 playing: false,
@@ -153,7 +151,6 @@ export default function player(state = initialState, action) {
             return {
                 ...state,
                 url: payload.url,
-                sources: [],
                 name: payload.name,
                 type: payload.type,
                 source: payload.source,
@@ -167,8 +164,7 @@ export default function player(state = initialState, action) {
             return {
                 ...state,
                 url: payload.url,
-                sources: [],
-                name: payload.name,
+                name: payload.name || state.name,
                 source: payload.source,
                 fromServer: true,
             };
diff --git a/src/client/translations/fr.json b/src/client/translations/fr.json
index f00b620..ceb75de 100644
--- a/src/client/translations/fr.json
+++ b/src/client/translations/fr.json
@@ -11,7 +11,8 @@
     },
     "room": {
         "drop_to_start": "Déposez un fichier vidéo ou un lien pour commencer !",
-        "drop_file": "Déposer le fichier \"{{name}}\" pour rejoindre"
+        "drop_file": "Déposer le fichier \"{{name}}\" pour rejoindre.",
+        "stream_file": "Initialisation du stream \"{{name}}\"."
     },
     "about": {
         "button": "À propos",
diff --git a/src/events/index.js b/src/events/index.js
index 31f0b1e..22d1ded 100644
--- a/src/events/index.js
+++ b/src/events/index.js
@@ -1,5 +1,6 @@
 import Codec from 'netcode/src/encoder/codec/Codec';
 import Int8Codec from 'netcode/src/encoder/codec/Int8Codec';
+import LongStringCodec from 'netcode/src/encoder/codec/LongStringCodec';
 import FileVideoCodec from '@events/FileVideoCodec';
 import UrlVideoCodec from '@events/UrlVideoCodec';
 import UserReadyCodec from '@events/UserReadyCodec';
@@ -18,4 +19,7 @@ export default [
     ['video:file', new FileVideoCodec()],
     ['video:url', new UrlVideoCodec()],
     ['video:youtube', new UrlVideoCodec()],
+    ['peer:offer', new LongStringCodec()],
+    ['peer:answer', new LongStringCodec()],
+    ['peer:candidate', new LongStringCodec()],
 ];
diff --git a/src/server/core/Server.js b/src/server/core/Server.js
index 833656c..456dad7 100644
--- a/src/server/core/Server.js
+++ b/src/server/core/Server.js
@@ -5,7 +5,7 @@ import RoomManager from '@server/room/RoomManager';
 
 export default class Server extends NetcodeServer {
     constructor(port = 8001, hostname = '0.0.0.0') {
-        super(port, hostname, new BinaryEncoder(events), 30, Math.pow(2, 12), undefined, false);
+        super(port, hostname, new BinaryEncoder(events), 30, Math.pow(2, 14), undefined, false);
 
         this.joinMatcher = new RegExp('^/([^/]+)/?$');
         this.rooms = new RoomManager();
diff --git a/src/server/room/Room.js b/src/server/room/Room.js
index dc9f4da..5b4bb92 100644
--- a/src/server/room/Room.js
+++ b/src/server/room/Room.js
@@ -9,6 +9,7 @@ export default class Room {
         this.users = new Map();
         this.emptyResolver = new TimedEvent(this.checkEmpty.bind(this), 5000);
         this.video = null;
+        this.distributor = null;
 
         this.addClient = this.addClient.bind(this);
         this.removeClient = this.removeClient.bind(this);
@@ -26,6 +27,9 @@ export default class Room {
         this.onVideoPause = this.onVideoPause.bind(this);
         this.onVideoSeek = this.onVideoSeek.bind(this);
         this.onVideoStop = this.onVideoStop.bind(this);
+        this.onPeerOffer = this.onPeerOffer.bind(this);
+        this.onPeerAnswer = this.onPeerAnswer.bind(this);
+        this.onPeerCandidate = this.onPeerCandidate.bind(this);
     }
 
     addClient(client) {
@@ -41,6 +45,9 @@ export default class Room {
         client.on('video:file', this.onClientVideoFile);
         client.on('video:url', this.onClientVideoUrl);
         client.on('video:youtube', this.onClientVideoYoutube);
+        client.on('peer:offer', this.onPeerOffer);
+        client.on('peer:answer', this.onPeerAnswer);
+        client.on('peer:candidate', this.onPeerCandidate);
     }
 
     removeClient(client) {
@@ -56,6 +63,9 @@ export default class Room {
         client.off('video:file', this.onClientVideoFile);
         client.off('video:url', this.onClientVideoUrl);
         client.off('video:youtube', this.onClientVideoYoutube);
+        client.off('peer:offer', this.onPeerOffer);
+        client.off('peer:answer', this.onPeerAnswer);
+        client.off('peer:candidate', this.onPeerCandidate);
     }
 
     createUser(client) {
@@ -86,6 +96,10 @@ export default class Room {
             this.video.pause();
         }
 
+        if (this.distributor === client) {
+            this.distributor = null;
+        }
+
         this.emptyResolver.schedule();
     }
 
@@ -151,6 +165,26 @@ export default class Room {
         this.setVideo(new Video('youtube', data.url, data.name), client);
     }
 
+    onPeerOffer(sdp, client) {
+        if (!this.distributor) {
+            console.log('offer', sdp.length);
+            this.distributor = client;
+            this.sendToOther(client, 'peer:offer', sdp);
+        }
+    }
+
+    onPeerAnswer(sdp, client) {
+        if (this.distributor) {
+            console.log('answer', sdp.length);
+            this.distributor.send('peer:answer', sdp);
+        }
+    }
+
+    onPeerCandidate(candidate, client) {
+        console.log('candidate', candidate.length);
+        this.sendToOther(client, 'peer:candidate', candidate);
+    }
+
     unloadVideo() {
         if (this.video) {
             this.video.off('play', this.onVideoPlay);

From 84ad458753a1b67738a724de39d9ebc1d8ca40f7 Mon Sep 17 00:00:00 2001
From: Thomas Jarrand <thomas.jarrand@elao.com>
Date: Tue, 12 Jan 2021 13:59:23 +0100
Subject: [PATCH 2/6] Debuging

---
 Makefile                             |  4 +-
 src/client/components/Player.js      | 28 +++++----
 src/client/components/Socket.js      | 11 +---
 src/client/components/video/Video.js | 51 +++++++++++++---
 src/client/components/video/index.js |  2 +-
 src/client/debug/DebugCanvas.js      | 42 +++++++++++++
 src/client/debug/DebugVideo.js       | 53 ++++++++++++++++
 src/client/peer/AbstractPeer.js      | 52 ++++++++++++++++
 src/client/peer/Distributor.js       | 86 ++++----------------------
 src/client/peer/PeerManager.js       | 35 ++++-------
 src/client/peer/Spectator.js         | 91 +++++++---------------------
 src/client/service/Api.js            | 13 ++--
 src/server/room/Room.js              | 11 ++--
 13 files changed, 266 insertions(+), 213 deletions(-)
 create mode 100644 src/client/debug/DebugCanvas.js
 create mode 100644 src/client/debug/DebugVideo.js
 create mode 100644 src/client/peer/AbstractPeer.js

diff --git a/Makefile b/Makefile
index 4c4c6ba..3d1470b 100644
--- a/Makefile
+++ b/Makefile
@@ -18,10 +18,10 @@ lint:
 	npx eslint src/* --ext .js,.json --fix
 
 start-client:
-	php -S 0.0.0.0:8000 -t build
+	php -S 0.0.0.0:8020 -t build
 
 start-server:
-	node bin/server.js 8001
+	node bin/server.js 8021
 
 # Publish package
 publish: build
diff --git a/src/client/components/Player.js b/src/client/components/Player.js
index e4a561a..31ca6b3 100644
--- a/src/client/components/Player.js
+++ b/src/client/components/Player.js
@@ -38,21 +38,11 @@ class Player extends Component {
         this.onStream = this.onStream.bind(this);
     }
 
-    componentDidUpdate(prevProps) {
-        const { source } = this.props;
-
-            console.log('componentDidUpdate', source);
-        if (source !== prevProps.source && source === 'peer') {
-            console.log(this.video);
-            this.peer.spectator.setVideo(this.video);
-        }
-    }
-
     setVideo(video) {
         this.video = video;
 
         if (this.peer.spectator) {
-            this.peer.spectator.setVideo(this.video);
+            this.peer.spectator.setVideo(this.video.element);
         }
     }
 
@@ -107,16 +97,28 @@ class Player extends Component {
         this.peer.distribute(this.video);
     }
 
+    getVideoComponent(source) {
+        switch (source) {
+            case 'youtube':
+                return YoutubeVideo;
+
+                // case: 'peer':
+                //    return StreamVideo;
+
+            default:
+                return Video;
+        }
+    }
+
     render() {
         const { source } = this.props;
-        const VideoComponent = source === 'youtube' ? YoutubeVideo : Video;
+        const VideoComponent = this.getVideoComponent(source);
 
         return (
             <figure className="player">
                 <AuthorizationModal />
                 <VideoComponent
                     ref={this.setVideo}
-                    //srcObject={this.peer.spectator ? this.peer.spectator.stream : null}
                     onTimeUpdate={this.onTimeUpdate}
                     onDurationChange={this.onTimeUpdate}
                     onProgress={this.onProgress}
diff --git a/src/client/components/Socket.js b/src/client/components/Socket.js
index 5fbf8bb..4541d27 100644
--- a/src/client/components/Socket.js
+++ b/src/client/components/Socket.js
@@ -134,21 +134,16 @@ class Socket extends Component {
     }
 
     onPeerOffer(event) {
-        const description = event.detail;
-
-        this.peer.spectate(description);
-
+        this.peer.spectate(JSON.parse(event.detail));
         this.props.onVideo('peer');
     }
 
     onPeerAnswer(event) {
-        const description = event.detail;
-        this.peer.distributor.answer(description);
+        this.peer.answer(JSON.parse(event.detail));
     }
 
     onPeerCandidate(event) {
-        const candidate = JSON.parse(event.detail);
-        this.peer.candidate(candidate);
+        this.peer.addCandidate(JSON.parse(event.detail));
     }
 
     /**
diff --git a/src/client/components/video/Video.js b/src/client/components/video/Video.js
index 34a9d6b..0bc096a 100644
--- a/src/client/components/video/Video.js
+++ b/src/client/components/video/Video.js
@@ -20,12 +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',
-        src: null,
+        autoplay: false,
+        src: undefined,
     };
 
     constructor(props) {
@@ -37,9 +39,12 @@ 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.onResize = this.onResize.bind(this);
         this.onNotAuthorized = this.onNotAuthorized.bind(this);
         this.onEnded = this.onEnded.bind(this);
         this.onAuthorized = this.onAuthorized.bind(this);
@@ -65,11 +70,18 @@ export default class Video extends Component {
         }
     }
 
+    componentWillUnmount() {
+        if (this.element) {
+            this.element.removeEventListener('resize', this.onResize);
+        }
+    }
+
     setElement(element) {
         this.element = element;
 
-        if (element) {
+        if (this.element) {
             this.element.volume = this.props.volume;
+            this.element.addEventListener('resize', this.onResize);
         }
     }
 
@@ -101,17 +113,19 @@ 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') {
+            console.log(this.element.readyState);
             return this.element.mozCaptureStream();
         }
 
         if (typeof this.element.captureStream === 'function') {
+            console.log(this.element.readyState);
             return this.element.captureStream();
         }
 
@@ -119,24 +133,33 @@ export default class Video extends Component {
     }
 
     onAuthorized() {
+        console.log('onAuthorized');
         if (!this.props.authorized) {
             this.props.setAuthorized(true);
         }
     }
 
     onNotAuthorized(error) {
+        console.log('onNotAuthorized');
         if (error instanceof DOMException && error.name === 'NotAllowedError' && this.props.authorized) {
             this.props.setAuthorized(false);
         }
     }
 
     onLoadStart() {
+        console.log('onLoadStart');
         if (this.props.loaded) {
             this.props.setLoaded(false);
         }
     }
 
+    onProgress() {
+        console.log('onProgress');
+        this.props.onProgress();
+    }
+
     onCanPlay() {
+        console.log('onCanPlay');
         if (!this.props.loaded) {
             this.props.setLoaded(true);
 
@@ -147,12 +170,22 @@ export default class Video extends Component {
     }
 
     onCanPlayThrough() {
+        console.log('onCanPlayThrough');
+    }
+
+    onLoadedMetadata(event) {
+        console.log('onLoadedMetadata', event);
+    }
 
+    onResize(event) {
+        console.log('onResize', event);
     }
 
     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() {
@@ -165,18 +198,20 @@ export default class Video extends Component {
     }
 
     render(){
-        const { src, preload } = this.props;
+        const { src, preload, autoplay } = this.props;
 
         return (
             <video
                 ref={this.setElement}
-                src={src || undefined}
+                src={src}
                 preload={preload}
+                autoPlay={autoplay}
                 onLoadStart={this.onLoadStart}
-                onProgress={this.props.onProgress}
+                onProgress={this.onProgress}
                 onCanPlay={this.onCanPlay}
                 onCanPlayThrough={this.onCanPlayThrough}
                 onDurationChange={this.onDurationChange}
+                onLoadedMetadata={this.onLoadedMetadata}
                 onTimeUpdate={this.props.onTimeUpdate}
                 onPlay={this.props.onPlayed}
                 onPause={this.props.onPaused}
diff --git a/src/client/components/video/index.js b/src/client/components/video/index.js
index 6097c39..f436877 100644
--- a/src/client/components/video/index.js
+++ b/src/client/components/video/index.js
@@ -6,7 +6,7 @@ import YoutubeVideoComponent from '@client/components/video/YoutubeVideo';
 export default function Wrapper(Component) {
     return connect(
         state => ({
-            src: state.player.url,
+            src: state.player.source === 'peer' ? undefined : state.player.url,
             playing: state.player.playing,
             time: state.player.time,
             authorized: state.player.authorized,
diff --git a/src/client/debug/DebugCanvas.js b/src/client/debug/DebugCanvas.js
new file mode 100644
index 0000000..cd341ed
--- /dev/null
+++ b/src/client/debug/DebugCanvas.js
@@ -0,0 +1,42 @@
+import Loop from '@client/common/Loop';
+
+export default class DebugCanvas {
+    constructor() {
+        this.element = document.createElement('canvas');
+        this.context = this.element.getContext('2d');
+        this.loop = new Loop(this.update.bind(this));
+        this.speed = 5000;
+
+        this.element.width = 160;
+        this.element.height = 90;
+        this.element.style.position = 'absolute';
+        this.element.style.top = 0;
+        this.element.style.left = 0;
+
+        this.loop.start();
+
+        this.attach();
+    }
+
+    attach(parent = document.body) {
+        parent.appendChild(this.element);
+    }
+
+    setColor(color) {
+        this.context.fillStyle = color;
+    }
+
+    fill() {
+        this.context.fillRect(0, 0, this.element.width, this.element.height);
+    }
+
+    update() {
+        this.setColor(`hsl(${Math.floor(((1 + Date.now() / this.speed) / 2) * 360)}, 100%, 50%)`);
+        this.fill();
+    }
+
+    getStream(fps = 10) {
+        return this.element.captureStream(fps);
+    }
+}
+
diff --git a/src/client/debug/DebugVideo.js b/src/client/debug/DebugVideo.js
new file mode 100644
index 0000000..cb8cb6e
--- /dev/null
+++ b/src/client/debug/DebugVideo.js
@@ -0,0 +1,53 @@
+export default class DebugVideo {
+    constructor() {
+        this.element = document.createElement('video');
+        this.element.width = 160;
+        this.element.height = 90;
+        this.element.autoplay = true;
+        this.element.style.position = 'absolute';
+        this.element.style.top = 0;
+        this.element.style.right = 0;
+
+        this.element.addEventListener('loadStart', e => console.info(e.type, e));
+        this.element.addEventListener('progress', e => console.info(e.type));
+        this.element.addEventListener('timeupdate', e => console.info(e.type, this.element.playing, this.element.currentTime));
+        this.element.addEventListener('canplay', e => console.info(e.type, e, this.element.play()));
+        this.element.addEventListener('canplaythrough', e => console.info(e.type, e));
+        this.element.addEventListener('durationchange', e => console.info(e.type, this.element.duration));
+        this.element.addEventListener('loadeddata', e => console.info(e.type, e));
+        this.element.addEventListener('loadedmetadata', e => console.info(e.type, e));
+        this.element.addEventListener('timeUpdate', e => console.info(e.type, e));
+        this.element.addEventListener('play', e => console.info(e.type, e));
+        this.element.addEventListener('playing', e => console.info(e.type, e));
+        this.element.addEventListener('ratechange', e => console.info(e.type, e));
+        this.element.addEventListener('pause', e => console.info(e.type, e));
+        this.element.addEventListener('ended', e => console.info(e.type, e));
+        this.element.addEventListener('emptied', e => console.info(e.type, e));
+        this.element.addEventListener('complete', e => console.info(e.type, e));
+        this.element.addEventListener('waiting', e => console.info(e.type, e));
+        this.element.addEventListener('suspend', e => console.info(e.type, e));
+        this.element.addEventListener('stalled', e => console.info(e.type, e));
+        this.element.addEventListener('resize', (e) => console.info(e.type, this.element.videoWidth, this.element.videoHeight));
+
+        this.attach();
+    }
+
+    attach(parent = document.body) {
+        parent.appendChild(this.element);
+    }
+
+    display(stream) {
+        // this.element.autoplay = true;
+        this.element.srcObject = stream;
+    }
+
+    getStream() {
+        if (typeof this.element.captureStream === 'function') {
+            return this.element.captureStream();
+        }
+
+        if (typeof this.element.mozCaptureStream === 'function') {
+            return this.element.mozCaptureStream();
+        }
+    }
+}
diff --git a/src/client/peer/AbstractPeer.js b/src/client/peer/AbstractPeer.js
new file mode 100644
index 0000000..1625836
--- /dev/null
+++ b/src/client/peer/AbstractPeer.js
@@ -0,0 +1,52 @@
+export default class AbstractPeer {
+    constructor(api) {
+        this.api = api;
+        this.connection = new RTCPeerConnection(/* {
+            iceServers:[
+                {url:'stun:stun.l.google.com:19302'},
+                {url:'stun:stun1.l.google.com:19302'},
+                {url:'stun:stun2.l.google.com:19302'},
+                {url:'stun:stun3.l.google.com:19302'},
+                {url:'stun:stun4.l.google.com:19302'},
+            ]
+        }*/);
+
+        this.loadLocalDescription = this.loadLocalDescription.bind(this);
+        this.onIceCandidate = this.onIceCandidate.bind(this);
+        this.onIceStateChange = this.onIceStateChange.bind(this);
+        this.onError = this.onError.bind(this);
+
+        this.connection.addEventListener('icecandidate', this.onIceCandidate);
+        this.connection.addEventListener('iceconnectionstatechange', this.onIceStateChange);
+    }
+
+    addCandidate(data) {
+        const candidate = new RTCIceCandidate(data);
+
+        this.connection.addIceCandidate(candidate).catch(this.onError);
+    }
+
+    loadLocalDescription(description) {
+        return this.connection.setLocalDescription(description);
+    }
+
+    loadRemoteDescription(data) {
+        const description = new RTCSessionDescription(data);
+
+        this.connection.setRemoteDescription(description).catch(this.onError);
+    }
+
+    onIceCandidate(event) {
+        if (event.candidate) {
+            this.api.newIceCandidate(event.candidate);
+        }
+    }
+
+    onIceStateChange() {
+        console.log('onIceStateChange', this.connection.iceConnectionState);
+    }
+
+    onError(error) {
+        console.error(error);
+    }
+}
diff --git a/src/client/peer/Distributor.js b/src/client/peer/Distributor.js
index 46da50e..ee31033 100644
--- a/src/client/peer/Distributor.js
+++ b/src/client/peer/Distributor.js
@@ -1,85 +1,23 @@
-export default class Distributor {
-    constructor(api) {
-        this.api = api;
-        this.connection = new RTCPeerConnection();
+import AbstractPeer from '@client/peer/AbstractPeer';
+import DebugCanvas from '@client/debug/DebugCanvas';
 
-        this.onStatusChange = this.onStatusChange.bind(this);
-        this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);
-        this.onError = this.onError.bind(this);
-
-        this.connection.addEventListener('icecandidate', this.handleICECandidateEvent);
-        this.connection.addEventListener('track', this.handleTrackEvent.bind(this));
-        this.connection.addEventListener('negotiationneeded', this.handleNegotiationNeededEvent.bind(this));
-        this.connection.addEventListener('removetrack', this.handleRemoveTrackEvent.bind(this));
-        this.connection.addEventListener('iceconnectionstatechange', this.handleICEConnectionStateChangeEvent.bind(this));
-        this.connection.addEventListener('icegatheringstatechange', this.handleICEGatheringStateChangeEvent.bind(this));
-        this.connection.addEventListener('signalingstatechange', this.handleSignalingStateChangeEvent.bind(this));
-
-        //this.channel = this.connection.createDataChannel('video-send');
-        //this.channel.addEventListner('open', this.onStatusChange);
-        //this.channel.addEventListner('close', this.onStatusChange);
-    }
-
-    load(video, success) {
+export default class Distributor extends AbstractPeer {
+    loadVideo(video) {
+        // const stream = new DebugCanvas().getStream();
         const stream = video.captureStream();
 
-        stream.getTracks().forEach(track => this.connection.addTrack(track, stream));
+        this.onLocalDescriptionLoaded = this.onLocalDescriptionLoaded.bind(this);
 
-        /*const mirror = document.createElement('video');
-        mirror.className = 'mirror';
-        mirror.width = 480;
-        mirror.height = 320;
-        mirror.autoplay = true;
-        document.body.appendChild(mirror);
-        mirror.srcObject = stream;*/
+        stream.getTracks().forEach(track => this.connection.addTrack(track, stream));
 
-        this.connection.createOffer()
-            .then(offer => this.connection.setLocalDescription(offer))
-            .then(() => success(this.connection.localDescription))
+        this.connection.createOffer({ offerToReceiveAudio: 1, offerToReceiveVideo: 1 })
+            .then(this.loadLocalDescription)
+            .then(this.onLocalDescriptionLoaded)
             .catch(this.onError);
     }
 
-    answer(sdp) {
-        console.log('answer', sdp.length);
-
-        const description = new RTCSessionDescription({ type: 'answer', sdp });
-
-        this.connection.setRemoteDescription(description).catch(this.onError);
-    }
-
-    candidate(sdp) {
-        const candidate = new RTCIceCandidate(sdp);
-
-        this.connection.addIceCandidate(candidate)
-    }
-
-    handleICECandidateEvent(event) {
-        console.log('handleICECandidateEvent', event);
-        if (event.candidate) {
-            this.api.newIceCandidate(event.candidate);
-        }
-    }
-    handleTrackEvent(event) {
-        console.log('handleTrackEvent', event);
-    }
-    handleNegotiationNeededEvent(event) {
-        console.log('handleNegotiationNeededEvent', event);
-    }
-    handleRemoveTrackEvent(event) {
-        console.log('handleRemoveTrackEvent', event);
-    }
-    handleICEConnectionStateChangeEvent(event) {
-        console.log('handleICEConnectionStateChangeEvent', event, this.connection.iceConnectionState);
-    }
-    handleICEGatheringStateChangeEvent(event) {
-        console.log('handleICEGatheringStateChangeEvent', event);
-    }
-    handleSignalingStateChangeEvent(event) {
-        console.log('handleSignalingStateChangeEvent', event, this.connection.signalingState);
-    }
-
-    onStatusChange(event) {
-
+    onLocalDescriptionLoaded() {
+        this.api.offer(this.connection.localDescription);
     }
 
     onError(error) {
diff --git a/src/client/peer/PeerManager.js b/src/client/peer/PeerManager.js
index ddd3920..1e80110 100644
--- a/src/client/peer/PeerManager.js
+++ b/src/client/peer/PeerManager.js
@@ -7,49 +7,38 @@ export default class PeerManager {
         this.api = api;
         this.distributor = null;
         this.spectator = null;
-
-        this.onOffer = this.onOffer.bind(this);
-        this.onAnswer = this.onAnswer.bind(this);
     }
 
     distribute(video) {
         this.ensureIsFree();
 
         this.distributor = new Distributor(this.api);
-        this.distributor.load(video, this.onOffer);
+        this.distributor.loadVideo(video);
     }
 
-    spectate(sdp) {
+    spectate(description) {
         this.ensureIsFree();
 
-        console.log('spectate', sdp.length);
-
         this.spectator = new Spectator(this.api);
-        this.spectator.load(sdp, this.onAnswer);
+
+        this.spectator.loadRemoteDescription(description);
+        this.spectator.answer();
     }
 
-    candidate(candidate) {
+    answer(description) {
+        this.distributor.loadRemoteDescription(description);
+    }
+
+    addCandidate(candidate) {
         if (this.distributor) {
-            return this.distributor.candidate(candidate);
+            return this.distributor.addCandidate(candidate);
         }
 
         if (this.spectator) {
-            return this.spectator.candidate(candidate);
+            return this.spectator.addCandidate(candidate);
         }
     }
 
-    onOffer(localDescription) {
-        this.api.offer(localDescription.sdp);
-    }
-
-    onAnswer(localDescription) {
-        this.api.answer(localDescription.sdp);
-    }
-
-    onCandidate(candidate) {
-        this.api.answer(localDescription.sdp);
-    }
-
     ensureIsFree() {
         if (this.distributor) {
             throw new Error('Already distributing.');
diff --git a/src/client/peer/Spectator.js b/src/client/peer/Spectator.js
index 0f99648..8eeb203 100644
--- a/src/client/peer/Spectator.js
+++ b/src/client/peer/Spectator.js
@@ -1,100 +1,53 @@
-export default class Spectator {
+import AbstractPeer from '@client/peer/AbstractPeer';
+
+export default class Spectator extends AbstractPeer {
     constructor(api) {
-        this.api = api;
-        this.connection = new RTCPeerConnection();
-        this.stream = null;//new MediaStream();
-        this.video = null;
+        super(api);
 
-        this.onReceive = this.onReceive.bind(this);
-        this.handleTrackEvent = this.handleTrackEvent.bind(this);
+        this.stream = null;
+        this.video = null;
 
-        this.connection.addEventListener('datachannel', this.onReceive);
+        this.onTrack = this.onTrack.bind(this);
+        this.onLocalDescriptionLoaded = this.onLocalDescriptionLoaded.bind(this);
 
-        this.connection.addEventListener('icecandidate', this.handleICECandidateEvent.bind(this));
-        this.connection.addEventListener('track', this.handleTrackEvent);
-        this.connection.addEventListener('negotiationneeded', this.handleNegotiationNeededEvent.bind(this));
-        this.connection.addEventListener('removetrack', this.handleRemoveTrackEvent.bind(this));
-        this.connection.addEventListener('iceconnectionstatechange', this.handleICEConnectionStateChangeEvent.bind(this));
-        this.connection.addEventListener('icegatheringstatechange', this.handleICEGatheringStateChangeEvent.bind(this));
-        this.connection.addEventListener('signalingstatechange', this.handleSignalingStateChangeEvent.bind(this));
+        this.connection.addEventListener('track', this.onTrack);
+        // this.connection.addEventListener('negotiationneeded', this.handleNegotiationNeededEvent.bind(this));
+        // this.connection.addEventListener('removetrack', this.handleRemoveTrackEvent.bind(this));
+        // this.connection.addEventListener('icegatheringstatechange', this.handleICEGatheringStateChangeEvent.bind(this));
+        // this.connection.addEventListener('signalingstatechange', this.handleSignalingStateChangeEvent.bind(this));
     }
 
-    load(sdp, success) {
-        console.log('load', sdp.length);
-
-        const description = new RTCSessionDescription({ type: 'offer', sdp });
-
-        this.connection.setRemoteDescription(description)
-            .then(() => this.connection.createAnswer())
-            .then(answer => this.connection.setLocalDescription(answer))
-            .then(() => success(this.connection.localDescription))
+    answer() {
+        this.connection.createAnswer()
+            .then(this.loadLocalDescription)
+            .then(this.onLocalDescriptionLoaded)
             .catch(this.onError);
     }
 
-    candidate(sdp) {
-        const candidate = new RTCIceCandidate(sdp);
-
-        this.connection.addIceCandidate(candidate)
-    }
-
     setVideo(video) {
-        console.log('setVideo', video);
         this.video = video;
+
         this.playStreamOnVideo();
     }
 
     setStream(stream) {
-        console.log('setStream', stream);
         this.stream = stream;
         this.playStreamOnVideo();
     }
 
-    onReceive(event) {
-        console.log('onReceive', event);
-    }
-
-    handleICECandidateEvent(event) {
-        console.log('handleICECandidateEvent', event);
-        if (event.candidate) {
-            this.api.newIceCandidate(event.candidate);
-        };
+    onLocalDescriptionLoaded() {
+        this.api.answer(this.connection.localDescription);
     }
 
-    handleTrackEvent(event) {
-        console.log('handleTrackEvent', event);
-
+    onTrack(event) {
         if (!this.stream) {
             this.setStream(event.streams[0]);
         }
     }
 
-    handleNegotiationNeededEvent(event) {
-        console.log('handleNegotiationNeededEvent', event);
-    }
-    handleRemoveTrackEvent(event) {
-        console.log('handleRemoveTrackEvent', event);
-    }
-    handleICEConnectionStateChangeEvent(event) {
-        console.log('handleICEConnectionStateChangeEvent', event, this.connection.iceConnectionState);
-    }
-    handleICEGatheringStateChangeEvent(event) {
-        console.log('handleICEGatheringStateChangeEvent', event);
-    }
-    handleSignalingStateChangeEvent(event) {
-        console.log('handleSignalingStateChangeEvent', event, this.connection.signalingState);
-    }
-
     playStreamOnVideo() {
-        console.log('playStreamOnVideo', !!this.video, !!this.stream);
-
-        if (this.video && this.stream) {
-            this.video.autoplay = true;
+        if (!!this.video && !!this.stream) {
             this.video.srcObject = this.stream;
-            console.log('srcObject set', this.stream);
         }
     }
-
-    onError(error) {
-        console.error(error);
-    }
 }
diff --git a/src/client/service/Api.js b/src/client/service/Api.js
index 7f01dee..5f8abc1 100644
--- a/src/client/service/Api.js
+++ b/src/client/service/Api.js
@@ -63,18 +63,15 @@ export default class Api {
         this.client.send(`video:${source}`, { url, name });
     }
 
-    offer(sdp) {
-        console.log('offer', sdp.length);
-        this.client.send('peer:offer', sdp);
+    offer(description) {
+        this.client.send('peer:offer', JSON.stringify(description.toJSON()));
     }
 
-    answer(sdp) {
-        console.log('answer', sdp.length);
-        this.client.send('peer:answer', sdp);
+    answer(description) {
+        this.client.send('peer:answer', JSON.stringify(description.toJSON()));
     }
 
     newIceCandidate(candidate) {
-        console.log(JSON.stringify(candidate).length, candidate);
-        this.client.send('peer:candidate', JSON.stringify(candidate));
+        this.client.send('peer:candidate', JSON.stringify(candidate.toJSON()));
     }
 }
diff --git a/src/server/room/Room.js b/src/server/room/Room.js
index 5b4bb92..b27877e 100644
--- a/src/server/room/Room.js
+++ b/src/server/room/Room.js
@@ -165,23 +165,20 @@ export default class Room {
         this.setVideo(new Video('youtube', data.url, data.name), client);
     }
 
-    onPeerOffer(sdp, client) {
+    onPeerOffer(data, client) {
         if (!this.distributor) {
-            console.log('offer', sdp.length);
             this.distributor = client;
-            this.sendToOther(client, 'peer:offer', sdp);
+            this.sendToOther(client, 'peer:offer', data);
         }
     }
 
-    onPeerAnswer(sdp, client) {
+    onPeerAnswer(data/* , client*/) {
         if (this.distributor) {
-            console.log('answer', sdp.length);
-            this.distributor.send('peer:answer', sdp);
+            this.distributor.send('peer:answer', data);
         }
     }
 
     onPeerCandidate(candidate, client) {
-        console.log('candidate', candidate.length);
         this.sendToOther(client, 'peer:candidate', candidate);
     }
 

From 701f1c0ded8760d4efe9932b9faac4145c16a025 Mon Sep 17 00:00:00 2001
From: Thomas Jarrand <thomas.jarrand@gmail.com>
Date: Tue, 12 Jan 2021 23:32:13 +0100
Subject: [PATCH 3/6] Added stream icon

---
 assets/css/core/icons.scss        |   1 +
 assets/fonts/icons.svg            |   1 +
 assets/fonts/icons.ttf            | Bin 4776 -> 4948 bytes
 assets/fonts/icons.woff           | Bin 4852 -> 5024 bytes
 assets/fonts/selection.json       |   2 +-
 src/client/components/Controls.js |   2 +-
 src/client/peer/AbstractPeer.js   |   4 ++--
 7 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/assets/css/core/icons.scss b/assets/css/core/icons.scss
index da78951..7e1e5f0 100644
--- a/assets/css/core/icons.scss
+++ b/assets/css/core/icons.scss
@@ -22,6 +22,7 @@ $icons: (
   "volume-low": "\e911",
   "volume-medium": "\e912",
   "volume-none": "\e910",
+  "stream": "\e90f",
 );
 
 @font-face {
diff --git a/assets/fonts/icons.svg b/assets/fonts/icons.svg
index bb065e0..84027b1 100644
--- a/assets/fonts/icons.svg
+++ b/assets/fonts/icons.svg
@@ -22,6 +22,7 @@
 <glyph unicode="&#xe90c;" glyph-name="forward" d="M642.261 643.755c-13.824 13.397-32.64 21.845-53.461 21.845-42.411 0-76.8-34.432-76.8-76.843v-384c0-42.411 34.389-76.757 76.8-76.757 20.821 0 39.68 8.32 53.461 21.845 101.589 98.731 253.739 246.912 253.739 246.912s-152.149 148.224-253.739 246.997zM258.261 643.755c-13.824 13.397-32.64 21.845-53.461 21.845-42.411 0-76.8-34.432-76.8-76.843v-384c0-42.411 34.389-76.757 76.8-76.757 20.821 0 39.68 8.32 53.461 21.845 101.589 98.731 253.739 246.912 253.739 246.912s-152.149 148.224-253.739 246.997z" />
 <glyph unicode="&#xe90d;" glyph-name="eject" d="M725.333 256h-426.667c-47.104 0-85.333-38.187-85.333-85.333 0-47.104 38.229-85.333 85.333-85.333h426.667c47.104 0 85.333 38.229 85.333 85.333 0 47.147-38.229 85.333-85.333 85.333zM786.475 486.23c-109.824 112.683-274.475 281.771-274.475 281.771s-164.651-169.088-274.475-281.771c-14.891-15.488-24.192-36.395-24.192-59.563 0-47.104 38.229-85.333 85.333-85.333h426.667c47.104 0 85.333 38.229 85.333 85.333 0 23.168-9.301 44.075-24.192 59.563z" />
 <glyph unicode="&#xe90e;" glyph-name="loader" d="M469.333 853.334v-170.667c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v170.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM469.333 170.667v-170.667c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v170.667c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667zM180.181 698.155l120.747-120.747c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-120.747 120.747c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331zM662.741 215.595l120.747-120.747c16.683-16.683 43.691-16.683 60.331 0s16.683 43.691 0 60.331l-120.747 120.747c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331zM85.333 384h170.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-170.667c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM768 384h170.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667h-170.667c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667zM240.512 94.848l120.747 120.747c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-120.747-120.747c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0zM723.072 577.408l120.747 120.747c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0l-120.747-120.747c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0z" />
+<glyph unicode="&#xe90f;" glyph-name="stream" d="M256.085 256.043c-47.232 0-85.504-38.272-85.419-85.376 0-47.104 38.229-85.376 85.419-85.291 47.061-0.085 85.333 38.144 85.248 85.291 0.085 47.232-38.187 85.461-85.248 85.376zM256 768c-47.104 0-85.333-38.229-85.333-85.333s38.229-85.333 85.333-85.333c235.264 0 426.667-191.403 426.667-426.667 0-47.104 38.229-85.333 85.333-85.333s85.333 38.229 85.333 85.333c0 329.387-267.947 597.333-597.333 597.333zM256 512c-47.104 0-85.333-38.229-85.333-85.333s38.229-85.333 85.333-85.333c94.080 0 170.667-76.544 170.667-170.667 0-47.104 38.229-85.333 85.333-85.333s85.333 38.229 85.333 85.333c0 188.203-153.131 341.333-341.333 341.333z" />
 <glyph unicode="&#xe910;" glyph-name="volume-none" d="M960 319.519v-84.852h-84.852l-107.148 107.148-107.148-107.148h-84.852v84.852l107.148 107.148-107.148 107.148v84.852h84.852l107.148-107.148 107.148 107.148h84.852v-84.852l-107.148-107.148 107.148-107.148zM416.006-21.333c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
 <glyph unicode="&#xe911;" glyph-name="volume-low" d="M549.020 197.647c-12.286 0-24.566 4.686-33.942 14.058-18.746 18.746-18.746 49.134 0 67.88 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882s49.136 18.744 67.882 0c118.53-118.53 118.53-311.392 0-429.922-9.372-9.368-21.656-14.054-33.94-14.054zM416.006-21.333c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
 <glyph unicode="&#xe912;" glyph-name="volume-medium" d="M719.53 107.137c-12.286 0-24.566 4.686-33.942 14.056-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.59 126.53-190.074 126.53-305.466 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060v0zM549.020 197.647c-12.286 0-24.566 4.686-33.942 14.058-18.746 18.746-18.746 49.134 0 67.88 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882s49.136 18.744 67.882 0c118.53-118.53 118.53-311.392 0-429.922-9.372-9.368-21.656-14.054-33.94-14.054zM416.006-21.333c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
diff --git a/assets/fonts/icons.ttf b/assets/fonts/icons.ttf
index 4407077d2fb37abd4a0f1eac52c8cee4966098c8..f81f36046533c2dfd721c1fe235b9ef435b708e0 100644
GIT binary patch
delta 500
zcmZ3XdPS|CfsuiMft#U$ftkU;KUm+0Ux-Z$D6$8L6OwZi3&g`N&1PU=lmYTX(i4jd
zfV2RR5288Jb1KuamCQ?k{0asJev6FM#1!deuU-R{YyireWdH>@m{_EM{1-sJN=9x;
zMU(>%P^};jke`y1pX`{ZY^I(E6aX1$lABmjz@Ws?1LQ9O@)hzDb5k!i<<121j{q&n
zE66V{0Xh^2giS#549v`LCLXBPwg7Ut7&sW1fRK?v;ibs`zyJS(lmXccU^e6b$KotN
zt&E%V7%y|yGc&Aa2xSfh8pX|^#$XFHTZv6nM9kR8%+y4U8Oj!yV-y#IiK^={s;emr
zLZ#4z85xv~jFe$G!q2ZnQ3=G?*I$&IQv(urPXY0zrDE;u+!+}RjFeT3j8v43m>57T
zMWqs7zX*^>b#Cq=ef|Gn(G)k3h?|{#jI{J-2kr|jGNzMKzQ*(0d}ZKf0ekL_@?{?o
u14K{O5in<zoSY)y&$xQ>1_4_^3)U*u3v5yBD(rKBVZy*5x%r>KDn<bI5p7fe

delta 329
zcmcbjwnDX@fsuiMft#U$ftkU;KUm+0Ux-Z;D6$8L6OwZi3tk4iJjcMmC<Eljq$d^^
z0BHdrzXC{eq~}zodA@DD1mrg`Fz|I`q$Z|F`^UKhm2d#%%`$)j984^dK)wTzuac2l
zQW56BeHO@10rC@a@{=7Cm5UUdfC5K=0!F!s6$K263_U>p4<KJ5FEKauVpHx+1_nV1
zpe1<)`NbtbhXR362S}cQnfdj^1J%Y3Kn@QB2LlrW3(!9bFZo`I{Qvv^KTs5?=q1BT
z0Wgp8|6_3$ab}<aKtFFzW4z3{`6c&x7MVK^7lh;aZN4&avw(Hn{=xGL!~oHguLzhk
jN=)Vv^q(9rXeFq`TEWJ|c81*rC=CiYiOs77S1|$r>!MK;

diff --git a/assets/fonts/icons.woff b/assets/fonts/icons.woff
index 5f88f37476db932f93380fdcb03e3687c82627ac..05cc7ceb07cb1b2c20dc1b9669b149abead0a816 100644
GIT binary patch
delta 544
zcmeyOx<Fm5+~3WOfsp|SgcmSygXs_k#>o$bgePi>)oUf^CKfO-FlGQHLO@tN?9%M?
z#A1-x9w46siUrbhD${^sM;I9REkHP1$-E>ZH8F*OLEsNijTs0_FMIVm11QMAAZP;Q
ztAH>E6N^+vZb=1DECR>}s%J=va^R`R$xjBV^AiMF0#a<EY^I)<n^*y~SnvaouK>nM
z3_W>?xv2~cLIOa`^Fa7wQ|`=y{NfUze;VNGn1L*2<~Ngh7^}5`&ST&LI-Cgz85tB_
ziv0ik|36R+Xy!`>Fq`rJV{sM+W(LO1yBIHX)-yA#W(Z{t1)9OlpvGVev_y$bR7A|!
z$jsD4jTy=omtzzcgNdr^F{-O63qqyPgc%u>jf|9GIKt1bL{SOE*VkW^n^OZ4cTWNF
zrKMu+?A#d{42+ajjEq#2jhGlfEJdXfU%v>DNOf-RB7Ob;V9^vekcgX|eT=m9<{s_~
zEHb8(QohFX+k9o<W&wNdj`C$65CcR{t`IP1l$^Xlz@KsT<Uazof)=b*tQXj#*j3o)
P0K<fVL2|Q~;3`G{>w<E_

delta 367
zcmZ3W{zX-!+~3WOfsp|SguXCvgXt9$MYQWRlXDXb7#J8cfI=}K{4(I>x%9+hkk}C*
zp96{o(sL@)fMRDD82CCs*z;}UrHs_X6b1%?5TF_}5SI3jbI$+@0>yfOd=(JpU}BNX
z$StV=ifsV$6F@l3f%|Muelk#<pP&FxzzBquixix46Dxog3%UUL3Sg|r(36*#n+g;I
zTEv(K!WWxzXBOlamjHco1+I=6$YN%GJ(-8G+Smce<^ejKiGc;^V}+M|FGc?U{r?{*
z3N-a4!%G1$kMaLwaTalA24<idhRvH8FLQ1-<vGtHbI0L=a6G@wR|aktu#Ve5cz%Hx
pAbPTbpgE(&<Oo6k$*Tpe1eI7T*qGSPu!EcnG=xE7^Ebg&i~vmdRNepp

diff --git a/assets/fonts/selection.json b/assets/fonts/selection.json
index 8bf4b3c..50895a1 100644
--- a/assets/fonts/selection.json
+++ b/assets/fonts/selection.json
@@ -1 +1 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M448 304c0-26.4 21.6-48 48-48h32c26.4 0 48 21.6 48 48v32c0 26.4-21.6 48-48 48h-32c-26.4 0-48-21.6-48-48v-32z","M640 768h-256v-64h64v-192h-64v-64h192v256h64z","M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM512 928c-229.75 0-416-186.25-416-416s186.25-416 416-416 416 186.25 416 416-186.25 416-416 416z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["info","information"],"grid":24},"attrs":[{},{},{}],"properties":{"order":1,"id":0,"prevSize":32,"code":59668,"name":"info"},"setIdx":0,"setId":4,"iconIdx":0},{"icon":{"paths":["M469.333 85.333v170.667c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667v-170.667c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667zM469.333 768v170.667c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667v-170.667c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667zM180.181 240.512l120.747 120.747c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331l-120.747-120.747c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331zM662.741 723.072l120.747 120.747c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331l-120.747-120.747c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331zM85.333 554.667h170.667c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-170.667c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM768 554.667h170.667c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-170.667c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM240.512 843.819l120.747-120.747c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-120.747 120.747c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0zM723.072 361.259l120.747-120.747c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-120.747 120.747c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["loader"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"name":"loader","prevSize":32,"code":59662},"setIdx":3,"setId":1,"iconIdx":0},{"icon":{"paths":["M960 619.148v84.852h-84.852l-107.148-107.148-107.148 107.148h-84.852v-84.852l107.148-107.148-107.148-107.148v-84.852h84.852l107.148 107.148 107.148-107.148h84.852v84.852l-107.148 107.148 107.148 107.148z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume-mute","volume","audio","player"],"grid":24},"attrs":[{},{}],"properties":{"order":1,"id":3,"prevSize":32,"code":59664,"name":"volume-none"},"setIdx":3,"setId":1,"iconIdx":1},{"icon":{"paths":["M549.020 741.020c-12.286 0-24.566-4.686-33.942-14.058-18.746-18.746-18.746-49.134 0-67.88 81.1-81.1 81.1-213.058 0-294.156-18.746-18.746-18.746-49.138 0-67.882s49.136-18.744 67.882 0c118.53 118.53 118.53 311.392 0 429.922-9.372 9.368-21.656 14.054-33.94 14.054z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume-low","volume","audio","speaker","player"],"grid":24},"attrs":[{},{}],"properties":{"order":2,"id":2,"prevSize":32,"code":59665,"name":"volume-low"},"setIdx":3,"setId":1,"iconIdx":2},{"icon":{"paths":["M719.53 831.53c-12.286 0-24.566-4.686-33.942-14.056-18.744-18.744-18.744-49.136 0-67.882 131.006-131.006 131.006-344.17 0-475.176-18.744-18.746-18.744-49.138 0-67.882 18.744-18.742 49.138-18.744 67.882 0 81.594 81.59 126.53 190.074 126.53 305.466 0 115.39-44.936 223.876-126.53 305.47-9.372 9.374-21.656 14.060-33.94 14.060v0zM549.020 741.020c-12.286 0-24.566-4.686-33.942-14.058-18.746-18.746-18.746-49.134 0-67.88 81.1-81.1 81.1-213.058 0-294.156-18.746-18.746-18.746-49.138 0-67.882s49.136-18.744 67.882 0c118.53 118.53 118.53 311.392 0 429.922-9.372 9.368-21.656 14.054-33.94 14.054z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume-medium","volume","audio","speaker","player"],"grid":24},"attrs":[{},{}],"properties":{"order":3,"id":1,"prevSize":32,"code":59666,"name":"volume-medium"},"setIdx":3,"setId":1,"iconIdx":3},{"icon":{"paths":["M890.040 922.040c-12.286 0-24.566-4.686-33.942-14.056-18.744-18.746-18.744-49.136 0-67.882 87.638-87.642 135.904-204.16 135.904-328.1 0-123.938-48.266-240.458-135.904-328.098-18.744-18.746-18.744-49.138 0-67.882s49.138-18.744 67.882 0c105.77 105.772 164.022 246.4 164.022 395.98s-58.252 290.208-164.022 395.98c-9.372 9.372-21.656 14.058-33.94 14.058zM719.53 831.53c-12.286 0-24.566-4.686-33.942-14.056-18.744-18.744-18.744-49.136 0-67.882 131.006-131.006 131.006-344.17 0-475.176-18.744-18.746-18.744-49.138 0-67.882 18.744-18.742 49.138-18.744 67.882 0 81.594 81.59 126.53 190.074 126.53 305.466 0 115.39-44.936 223.876-126.53 305.47-9.372 9.374-21.656 14.060-33.94 14.060v0zM549.020 741.020c-12.286 0-24.568-4.686-33.942-14.058-18.746-18.746-18.746-49.134 0-67.88 81.1-81.1 81.1-213.058 0-294.156-18.746-18.746-18.746-49.138 0-67.882s49.136-18.744 67.882 0c118.53 118.53 118.53 311.392 0 429.922-9.372 9.368-21.656 14.054-33.94 14.054z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"width":1088,"isMulticolor":false,"isMulticolor2":false,"tags":["volume-high","volume","audio","speaker","player"],"grid":24},"attrs":[{},{}],"properties":{"order":4,"id":0,"prevSize":32,"code":59667,"name":"volume-high"},"setIdx":3,"setId":1,"iconIdx":4},{"icon":{"paths":["M742.997 281.003c-33.28-33.323-87.381-33.323-120.661 0l-110.336 110.336-110.336-110.336c-33.28-33.323-87.381-33.323-120.661 0-33.323 33.323-33.323 87.339 0 120.661l110.293 110.336-110.293 110.336c-33.323 33.323-33.323 87.339 0 120.661 16.64 16.683 38.485 25.003 60.331 25.003s43.691-8.32 60.331-25.003l110.336-110.336 110.336 110.336c16.64 16.683 38.485 25.003 60.331 25.003s43.691-8.32 60.331-25.003c33.323-33.323 33.323-87.339 0-120.661l-110.293-110.336 110.293-110.336c33.323-33.323 33.323-87.339 0-120.661z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["times"],"grid":24},"attrs":[],"properties":{"id":1,"order":39,"prevSize":32,"code":59648,"name":"cross"},"setIdx":3,"setId":1,"iconIdx":5},{"icon":{"paths":["M724.139 266.709c-41.259-22.955-93.227-8.021-116.053 33.152l-158.421 285.099-90.667-90.667c-33.323-33.323-87.339-33.323-120.661 0s-33.323 87.339 0 120.661l170.667 170.667c16.128 16.171 37.888 25.045 60.331 25.045 3.925 0 7.893-0.256 11.819-0.853 26.496-3.712 49.749-19.627 62.763-43.051l213.333-384c22.912-41.216 8.064-93.141-33.109-116.053z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["tick"],"grid":24},"attrs":[],"properties":{"id":2,"order":35,"prevSize":32,"code":59649,"name":"check"},"setIdx":3,"setId":1,"iconIdx":6},{"icon":{"paths":["M785.664 454.656c-33.323-33.323-87.339-33.323-120.661 0l-67.669 67.669v-308.992c0-47.147-38.229-85.333-85.333-85.333-47.147 0-85.333 38.187-85.333 85.333v308.992l-67.669-67.669c-33.323-33.323-87.339-33.323-120.661 0s-33.323 87.339 0 120.661l273.664 273.664 273.664-273.664c33.323-33.323 33.323-87.296 0-120.661z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-down-thick"],"grid":24},"attrs":[],"properties":{"id":23,"order":42,"prevSize":32,"code":59650,"name":"arrow-down"},"setIdx":3,"setId":1,"iconIdx":7},{"icon":{"paths":["M725.333 384c0-58.923-23.893-112.256-62.464-150.827-38.613-38.613-91.947-62.507-150.869-62.507s-112.256 23.893-150.869 62.507c-38.571 38.571-62.464 91.904-62.464 150.827s23.893 112.256 62.464 150.827c38.613 38.613 91.947 62.507 150.869 62.507s112.256-23.893 150.869-62.507c38.571-38.571 62.464-91.904 62.464-150.827z","M256 810.667c0 42.667 96 85.333 256 85.333 150.101 0 256-42.667 256-85.333 0-85.333-100.437-170.667-256-170.667-160 0-256 85.333-256 170.667z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["user"],"grid":24},"attrs":[],"properties":{"id":40,"order":26,"prevSize":32,"code":59651,"name":"user"},"setIdx":3,"setId":1,"iconIdx":8},{"icon":{"paths":["M384 597.333c58.923 0 112.256-23.893 150.869-62.507 38.571-38.571 62.464-91.904 62.464-150.827s-23.893-112.256-62.464-150.827c-38.613-38.613-91.947-62.507-150.869-62.507s-112.256 23.893-150.869 62.507c-38.571 38.571-62.464 91.904-62.464 150.827s23.893 112.256 62.464 150.827c38.613 38.613 91.947 62.507 150.869 62.507z","M384 896c150.101 0 256-42.667 256-85.333 0-85.333-100.437-170.667-256-170.667-160 0-256 85.333-256 170.667 0 42.667 96 85.333 256 85.333z","M896 512h-85.333v-85.333c0-23.595-19.072-42.667-42.667-42.667s-42.667 19.072-42.667 42.667v85.333h-85.333c-23.595 0-42.667 19.072-42.667 42.667s19.072 42.667 42.667 42.667h85.333v85.333c0 23.595 19.072 42.667 42.667 42.667s42.667-19.072 42.667-42.667v-85.333h85.333c23.595 0 42.667-19.072 42.667-42.667s-19.072-42.667-42.667-42.667z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["user-add"],"grid":24},"attrs":[],"properties":{"id":47,"order":37,"prevSize":32,"code":59652,"name":"user-add"},"setIdx":3,"setId":1,"iconIdx":9},{"icon":{"paths":["M341.333 256c-47.104 0-85.333 38.229-85.333 85.333v341.333c0 47.104 38.229 85.333 85.333 85.333s85.333-38.229 85.333-85.333v-341.333c0-47.104-38.229-85.333-85.333-85.333z","M640 256c-47.104 0-85.333 38.229-85.333 85.333v341.333c0 47.104 38.229 85.333 85.333 85.333s85.333-38.229 85.333-85.333v-341.333c0-47.104-38.229-85.333-85.333-85.333z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-pause"],"grid":24},"attrs":[],"properties":{"id":48,"order":36,"prevSize":32,"code":59653,"name":"pause"},"setIdx":3,"setId":1,"iconIdx":10},{"icon":{"paths":["M400.512 748.715l15.829 63.232c5.675 22.741 29.525 41.387 52.992 41.387h42.667c23.467 0 47.317-18.645 52.992-41.387l15.829-63.232c5.675-22.741 28.8-36.096 51.328-29.611l62.592 17.92c22.571 6.443 50.688-4.864 62.379-25.216l21.333-36.992c11.691-20.352 7.552-50.304-9.344-66.645l-46.848-45.269c-16.896-16.341-16.896-43.008 0.043-59.307l46.763-45.269c16.896-16.299 21.077-46.251 9.387-66.603l-21.376-36.992c-11.733-20.352-39.808-31.659-62.336-25.216l-62.592 17.92c-22.571 6.443-45.653-6.869-51.371-29.611l-15.787-63.147c-5.675-22.699-29.525-41.344-52.992-41.344h-42.667c-23.467 0-47.317 18.645-52.992 41.387l-15.787 63.147c-5.717 22.741-28.8 36.096-51.371 29.653l-62.592-17.92c-22.571-6.485-50.688 4.864-62.379 25.173l-21.333 36.992c-11.691 20.352-7.552 50.304 9.387 66.645l46.763 45.184c16.853 16.341 16.853 43.008 0 59.349l-46.848 45.269c-16.853 16.341-21.077 46.293-9.344 66.645l21.376 36.992c11.691 20.352 39.808 31.659 62.379 25.216l62.592-17.92c22.528-6.528 45.653 6.827 51.328 29.568zM490.667 448c47.104 0 85.333 38.187 85.333 85.333 0 47.104-38.229 85.333-85.333 85.333s-85.333-38.229-85.333-85.333c0-47.147 38.229-85.333 85.333-85.333z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["cog"],"grid":24},"attrs":[],"properties":{"id":59,"order":38,"prevSize":32,"code":59654,"name":"cog"},"setIdx":3,"setId":1,"iconIdx":11},{"icon":{"paths":["M261.163 554.667c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h62.507l-140.501 140.501c-16.683 16.683-16.683 43.648 0 60.331 8.32 8.32 19.243 12.501 30.165 12.501s21.845-4.181 30.165-12.501l145.664-145.664v72.832c0 23.552 19.072 42.667 42.667 42.667s37.504-19.115 37.504-42.667v-213.333h-208.171z","M298.667 469.333c23.552 0 42.667-19.115 42.667-42.667v-85.333h85.333c23.595 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-170.624l-0.043 170.667c0 23.552 19.072 42.667 42.667 42.667z","M725.333 554.667c-23.595 0-42.667 19.115-42.667 42.667v85.333h-85.333c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h170.667v-170.667c0-23.552-19.072-42.667-42.667-42.667z","M780.501 183.168l-140.501 140.501v-67.669c0-23.552-19.072-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v213.333h213.333c23.552 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-67.669l140.501-140.459c16.683-16.683 16.683-43.648 0-60.331s-43.648-16.725-60.331-0.043z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-minimise"],"grid":24},"attrs":[],"properties":{"id":82,"order":28,"prevSize":32,"code":59655,"name":"minimise"},"setIdx":3,"setId":1,"iconIdx":12},{"icon":{"paths":["M640 170.667c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h67.669l-140.501 140.501c-16.683 16.683-16.683 43.648 0 60.331 8.32 8.32 19.243 12.501 30.165 12.501s21.845-4.181 30.165-12.501l140.501-140.501v67.669c0 23.552 19.072 42.667 42.667 42.667s42.667-19.115 42.667-42.667v-213.333h-213.333z","M396.501 567.168l-140.501 140.501v-67.669c0-23.552-19.072-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v213.291h42.496c0.341 0 170.837 0.043 170.837 0.043 23.552 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-67.669l140.501-140.459c16.683-16.683 16.683-43.648 0-60.331s-43.648-16.725-60.331-0.043z","M298.667 512c23.552 0 42.667-19.115 42.667-42.667v-128h128c23.595 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-213.291l-0.043 213.333c0 23.552 19.072 42.667 42.667 42.667z","M725.333 512c-23.595 0-42.667 19.115-42.667 42.667v128h-128c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h213.333v-213.333c0-23.552-19.072-42.667-42.667-42.667z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-maximise"],"grid":24},"attrs":[],"properties":{"id":83,"order":27,"prevSize":32,"code":59656,"name":"maximise"},"setIdx":3,"setId":1,"iconIdx":13},{"icon":{"paths":["M435.2 273.067c-20.821 0-39.723 8.405-53.461 21.845-101.589 98.773-253.739 246.997-253.739 246.997s152.149 148.181 253.611 246.997c13.909 13.44 32.768 21.76 53.589 21.76 42.411 0 76.8-34.347 76.8-76.757v-192-192c0-42.411-34.389-76.843-76.8-76.843z","M819.2 273.067c-20.821 0-39.723 8.405-53.461 21.845-101.589 98.773-253.739 246.997-253.739 246.997s152.149 148.181 253.611 246.997c13.909 13.44 32.768 21.76 53.589 21.76 42.411 0 76.8-34.347 76.8-76.757v-384c0-42.411-34.389-76.843-76.8-76.843z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-rewind"],"grid":24},"attrs":[],"properties":{"id":93,"order":34,"prevSize":32,"code":59657,"name":"backward"},"setIdx":3,"setId":1,"iconIdx":14},{"icon":{"paths":["M682.667 256h-341.333c-46.933 0-85.333 38.4-85.333 85.333v341.333c0 46.933 38.4 85.333 85.333 85.333h341.333c46.933 0 85.333-38.4 85.333-85.333v-341.333c0-46.933-38.4-85.333-85.333-85.333z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-stop"],"grid":24},"attrs":[],"properties":{"id":100,"order":29,"prevSize":32,"code":59658,"name":"stop"},"setIdx":3,"setId":1,"iconIdx":15},{"icon":{"paths":["M443.563 786.475c112.683-109.824 281.771-274.475 281.771-274.475s-169.088-164.651-281.771-274.475c-15.488-14.891-36.395-24.192-59.563-24.192-47.104 0-85.333 38.229-85.333 85.333v426.667c0 47.104 38.229 85.333 85.333 85.333 23.168 0 44.075-9.301 59.563-24.192z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-play"],"grid":24},"attrs":[],"properties":{"id":102,"order":31,"prevSize":32,"code":59659,"name":"play"},"setIdx":3,"setId":1,"iconIdx":16},{"icon":{"paths":["M642.261 294.912c-13.824-13.397-32.64-21.845-53.461-21.845-42.411 0-76.8 34.432-76.8 76.843v192 192c0 42.411 34.389 76.757 76.8 76.757 20.821 0 39.68-8.32 53.461-21.845 101.589-98.731 253.739-246.912 253.739-246.912s-152.149-148.224-253.739-246.997z","M258.261 294.912c-13.824-13.397-32.64-21.845-53.461-21.845-42.411 0-76.8 34.432-76.8 76.843v384c0 42.411 34.389 76.757 76.8 76.757 20.821 0 39.68-8.32 53.461-21.845 101.589-98.731 253.739-246.912 253.739-246.912s-152.149-148.224-253.739-246.997z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-fast-forward"],"grid":24},"attrs":[],"properties":{"id":103,"order":32,"prevSize":32,"code":59660,"name":"forward"},"setIdx":3,"setId":1,"iconIdx":17},{"icon":{"paths":["M725.333 682.667h-426.667c-47.104 0-85.333 38.187-85.333 85.333 0 47.104 38.229 85.333 85.333 85.333h426.667c47.104 0 85.333-38.229 85.333-85.333 0-47.147-38.229-85.333-85.333-85.333z","M786.475 452.437c-109.824-112.683-274.475-281.771-274.475-281.771s-164.651 169.088-274.475 281.771c-14.891 15.488-24.192 36.395-24.192 59.563 0 47.104 38.229 85.333 85.333 85.333h426.667c47.104 0 85.333-38.229 85.333-85.333 0-23.168-9.301-44.075-24.192-59.563z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-eject"],"grid":24},"attrs":[],"properties":{"id":104,"order":33,"prevSize":32,"code":59661,"name":"eject"},"setIdx":3,"setId":1,"iconIdx":18}],"height":1024,"metadata":{"name":"icons"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icons","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"cssVars":true,"cssVarsFormat":"scss","showSelector":false,"showMetrics":false,"showMetadata":false,"showVersion":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215},"historySize":50,"gridSize":16,"showGrid":false}}
\ No newline at end of file
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M256.085 682.624c-47.232 0-85.504 38.272-85.419 85.376 0 47.104 38.229 85.376 85.419 85.291 47.061 0.085 85.333-38.144 85.248-85.291 0.085-47.232-38.187-85.461-85.248-85.376z","M256 170.667c-47.104 0-85.333 38.229-85.333 85.333s38.229 85.333 85.333 85.333c235.264 0 426.667 191.403 426.667 426.667 0 47.104 38.229 85.333 85.333 85.333s85.333-38.229 85.333-85.333c0-329.387-267.947-597.333-597.333-597.333z","M256 426.667c-47.104 0-85.333 38.229-85.333 85.333s38.229 85.333 85.333 85.333c94.080 0 170.667 76.544 170.667 170.667 0 47.104 38.229 85.333 85.333 85.333s85.333-38.229 85.333-85.333c0-188.203-153.131-341.333-341.333-341.333z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["rss"],"grid":24},"attrs":[],"properties":{"id":18,"order":46,"prevSize":24,"code":59663,"name":"stream"},"setIdx":0,"setId":4,"iconIdx":17},{"icon":{"paths":["M448 304c0-26.4 21.6-48 48-48h32c26.4 0 48 21.6 48 48v32c0 26.4-21.6 48-48 48h-32c-26.4 0-48-21.6-48-48v-32z","M640 768h-256v-64h64v-192h-64v-64h192v256h64z","M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM512 928c-229.75 0-416-186.25-416-416s186.25-416 416-416 416 186.25 416 416-186.25 416-416 416z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["info","information"],"grid":24},"attrs":[{},{},{}],"properties":{"order":1,"id":0,"prevSize":24,"code":59668,"name":"info"},"setIdx":3,"setId":1,"iconIdx":0},{"icon":{"paths":["M469.333 85.333v170.667c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667v-170.667c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667zM469.333 768v170.667c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667v-170.667c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667zM180.181 240.512l120.747 120.747c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331l-120.747-120.747c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331zM662.741 723.072l120.747 120.747c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331l-120.747-120.747c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331zM85.333 554.667h170.667c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-170.667c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM768 554.667h170.667c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-170.667c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM240.512 843.819l120.747-120.747c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-120.747 120.747c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0zM723.072 361.259l120.747-120.747c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-120.747 120.747c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["loader"],"grid":24},"attrs":[{}],"properties":{"order":1,"id":0,"name":"loader","prevSize":24,"code":59662},"setIdx":3,"setId":1,"iconIdx":1},{"icon":{"paths":["M960 619.148v84.852h-84.852l-107.148-107.148-107.148 107.148h-84.852v-84.852l107.148-107.148-107.148-107.148v-84.852h84.852l107.148 107.148 107.148-107.148h84.852v84.852l-107.148 107.148 107.148 107.148z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume-mute","volume","audio","player"],"grid":24},"attrs":[{},{}],"properties":{"order":1,"id":3,"prevSize":24,"code":59664,"name":"volume-none"},"setIdx":3,"setId":1,"iconIdx":2},{"icon":{"paths":["M549.020 741.020c-12.286 0-24.566-4.686-33.942-14.058-18.746-18.746-18.746-49.134 0-67.88 81.1-81.1 81.1-213.058 0-294.156-18.746-18.746-18.746-49.138 0-67.882s49.136-18.744 67.882 0c118.53 118.53 118.53 311.392 0 429.922-9.372 9.368-21.656 14.054-33.94 14.054z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume-low","volume","audio","speaker","player"],"grid":24},"attrs":[{},{}],"properties":{"order":2,"id":2,"prevSize":24,"code":59665,"name":"volume-low"},"setIdx":3,"setId":1,"iconIdx":3},{"icon":{"paths":["M719.53 831.53c-12.286 0-24.566-4.686-33.942-14.056-18.744-18.744-18.744-49.136 0-67.882 131.006-131.006 131.006-344.17 0-475.176-18.744-18.746-18.744-49.138 0-67.882 18.744-18.742 49.138-18.744 67.882 0 81.594 81.59 126.53 190.074 126.53 305.466 0 115.39-44.936 223.876-126.53 305.47-9.372 9.374-21.656 14.060-33.94 14.060v0zM549.020 741.020c-12.286 0-24.566-4.686-33.942-14.058-18.746-18.746-18.746-49.134 0-67.88 81.1-81.1 81.1-213.058 0-294.156-18.746-18.746-18.746-49.138 0-67.882s49.136-18.744 67.882 0c118.53 118.53 118.53 311.392 0 429.922-9.372 9.368-21.656 14.054-33.94 14.054z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["volume-medium","volume","audio","speaker","player"],"grid":24},"attrs":[{},{}],"properties":{"order":3,"id":1,"prevSize":24,"code":59666,"name":"volume-medium"},"setIdx":3,"setId":1,"iconIdx":4},{"icon":{"paths":["M890.040 922.040c-12.286 0-24.566-4.686-33.942-14.056-18.744-18.746-18.744-49.136 0-67.882 87.638-87.642 135.904-204.16 135.904-328.1 0-123.938-48.266-240.458-135.904-328.098-18.744-18.746-18.744-49.138 0-67.882s49.138-18.744 67.882 0c105.77 105.772 164.022 246.4 164.022 395.98s-58.252 290.208-164.022 395.98c-9.372 9.372-21.656 14.058-33.94 14.058zM719.53 831.53c-12.286 0-24.566-4.686-33.942-14.056-18.744-18.744-18.744-49.136 0-67.882 131.006-131.006 131.006-344.17 0-475.176-18.744-18.746-18.744-49.138 0-67.882 18.744-18.742 49.138-18.744 67.882 0 81.594 81.59 126.53 190.074 126.53 305.466 0 115.39-44.936 223.876-126.53 305.47-9.372 9.374-21.656 14.060-33.94 14.060v0zM549.020 741.020c-12.286 0-24.568-4.686-33.942-14.058-18.746-18.746-18.746-49.134 0-67.88 81.1-81.1 81.1-213.058 0-294.156-18.746-18.746-18.746-49.138 0-67.882s49.136-18.744 67.882 0c118.53 118.53 118.53 311.392 0 429.922-9.372 9.368-21.656 14.054-33.94 14.054z","M416.006 960c-8.328 0-16.512-3.25-22.634-9.374l-246.626-246.626h-114.746c-17.672 0-32-14.326-32-32v-320c0-17.672 14.328-32 32-32h114.746l246.626-246.628c9.154-9.154 22.916-11.89 34.874-6.936 11.958 4.952 19.754 16.622 19.754 29.564v832c0 12.944-7.796 24.612-19.754 29.564-3.958 1.64-8.118 2.436-12.24 2.436z"],"attrs":[{},{}],"width":1088,"isMulticolor":false,"isMulticolor2":false,"tags":["volume-high","volume","audio","speaker","player"],"grid":24},"attrs":[{},{}],"properties":{"order":4,"id":0,"prevSize":24,"code":59667,"name":"volume-high"},"setIdx":3,"setId":1,"iconIdx":5},{"icon":{"paths":["M742.997 281.003c-33.28-33.323-87.381-33.323-120.661 0l-110.336 110.336-110.336-110.336c-33.28-33.323-87.381-33.323-120.661 0-33.323 33.323-33.323 87.339 0 120.661l110.293 110.336-110.293 110.336c-33.323 33.323-33.323 87.339 0 120.661 16.64 16.683 38.485 25.003 60.331 25.003s43.691-8.32 60.331-25.003l110.336-110.336 110.336 110.336c16.64 16.683 38.485 25.003 60.331 25.003s43.691-8.32 60.331-25.003c33.323-33.323 33.323-87.339 0-120.661l-110.293-110.336 110.293-110.336c33.323-33.323 33.323-87.339 0-120.661z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["times"],"grid":24},"attrs":[],"properties":{"id":1,"order":39,"prevSize":24,"code":59648,"name":"cross"},"setIdx":3,"setId":1,"iconIdx":6},{"icon":{"paths":["M724.139 266.709c-41.259-22.955-93.227-8.021-116.053 33.152l-158.421 285.099-90.667-90.667c-33.323-33.323-87.339-33.323-120.661 0s-33.323 87.339 0 120.661l170.667 170.667c16.128 16.171 37.888 25.045 60.331 25.045 3.925 0 7.893-0.256 11.819-0.853 26.496-3.712 49.749-19.627 62.763-43.051l213.333-384c22.912-41.216 8.064-93.141-33.109-116.053z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["tick"],"grid":24},"attrs":[],"properties":{"id":2,"order":35,"prevSize":24,"code":59649,"name":"check"},"setIdx":3,"setId":1,"iconIdx":7},{"icon":{"paths":["M785.664 454.656c-33.323-33.323-87.339-33.323-120.661 0l-67.669 67.669v-308.992c0-47.147-38.229-85.333-85.333-85.333-47.147 0-85.333 38.187-85.333 85.333v308.992l-67.669-67.669c-33.323-33.323-87.339-33.323-120.661 0s-33.323 87.339 0 120.661l273.664 273.664 273.664-273.664c33.323-33.323 33.323-87.296 0-120.661z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-down-thick"],"grid":24},"attrs":[],"properties":{"id":23,"order":42,"prevSize":24,"code":59650,"name":"arrow-down"},"setIdx":3,"setId":1,"iconIdx":8},{"icon":{"paths":["M725.333 384c0-58.923-23.893-112.256-62.464-150.827-38.613-38.613-91.947-62.507-150.869-62.507s-112.256 23.893-150.869 62.507c-38.571 38.571-62.464 91.904-62.464 150.827s23.893 112.256 62.464 150.827c38.613 38.613 91.947 62.507 150.869 62.507s112.256-23.893 150.869-62.507c38.571-38.571 62.464-91.904 62.464-150.827z","M256 810.667c0 42.667 96 85.333 256 85.333 150.101 0 256-42.667 256-85.333 0-85.333-100.437-170.667-256-170.667-160 0-256 85.333-256 170.667z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["user"],"grid":24},"attrs":[],"properties":{"id":40,"order":26,"prevSize":24,"code":59651,"name":"user"},"setIdx":3,"setId":1,"iconIdx":9},{"icon":{"paths":["M384 597.333c58.923 0 112.256-23.893 150.869-62.507 38.571-38.571 62.464-91.904 62.464-150.827s-23.893-112.256-62.464-150.827c-38.613-38.613-91.947-62.507-150.869-62.507s-112.256 23.893-150.869 62.507c-38.571 38.571-62.464 91.904-62.464 150.827s23.893 112.256 62.464 150.827c38.613 38.613 91.947 62.507 150.869 62.507z","M384 896c150.101 0 256-42.667 256-85.333 0-85.333-100.437-170.667-256-170.667-160 0-256 85.333-256 170.667 0 42.667 96 85.333 256 85.333z","M896 512h-85.333v-85.333c0-23.595-19.072-42.667-42.667-42.667s-42.667 19.072-42.667 42.667v85.333h-85.333c-23.595 0-42.667 19.072-42.667 42.667s19.072 42.667 42.667 42.667h85.333v85.333c0 23.595 19.072 42.667 42.667 42.667s42.667-19.072 42.667-42.667v-85.333h85.333c23.595 0 42.667-19.072 42.667-42.667s-19.072-42.667-42.667-42.667z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["user-add"],"grid":24},"attrs":[],"properties":{"id":47,"order":37,"prevSize":24,"code":59652,"name":"user-add"},"setIdx":3,"setId":1,"iconIdx":10},{"icon":{"paths":["M341.333 256c-47.104 0-85.333 38.229-85.333 85.333v341.333c0 47.104 38.229 85.333 85.333 85.333s85.333-38.229 85.333-85.333v-341.333c0-47.104-38.229-85.333-85.333-85.333z","M640 256c-47.104 0-85.333 38.229-85.333 85.333v341.333c0 47.104 38.229 85.333 85.333 85.333s85.333-38.229 85.333-85.333v-341.333c0-47.104-38.229-85.333-85.333-85.333z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-pause"],"grid":24},"attrs":[],"properties":{"id":48,"order":36,"prevSize":24,"code":59653,"name":"pause"},"setIdx":3,"setId":1,"iconIdx":11},{"icon":{"paths":["M400.512 748.715l15.829 63.232c5.675 22.741 29.525 41.387 52.992 41.387h42.667c23.467 0 47.317-18.645 52.992-41.387l15.829-63.232c5.675-22.741 28.8-36.096 51.328-29.611l62.592 17.92c22.571 6.443 50.688-4.864 62.379-25.216l21.333-36.992c11.691-20.352 7.552-50.304-9.344-66.645l-46.848-45.269c-16.896-16.341-16.896-43.008 0.043-59.307l46.763-45.269c16.896-16.299 21.077-46.251 9.387-66.603l-21.376-36.992c-11.733-20.352-39.808-31.659-62.336-25.216l-62.592 17.92c-22.571 6.443-45.653-6.869-51.371-29.611l-15.787-63.147c-5.675-22.699-29.525-41.344-52.992-41.344h-42.667c-23.467 0-47.317 18.645-52.992 41.387l-15.787 63.147c-5.717 22.741-28.8 36.096-51.371 29.653l-62.592-17.92c-22.571-6.485-50.688 4.864-62.379 25.173l-21.333 36.992c-11.691 20.352-7.552 50.304 9.387 66.645l46.763 45.184c16.853 16.341 16.853 43.008 0 59.349l-46.848 45.269c-16.853 16.341-21.077 46.293-9.344 66.645l21.376 36.992c11.691 20.352 39.808 31.659 62.379 25.216l62.592-17.92c22.528-6.528 45.653 6.827 51.328 29.568zM490.667 448c47.104 0 85.333 38.187 85.333 85.333 0 47.104-38.229 85.333-85.333 85.333s-85.333-38.229-85.333-85.333c0-47.147 38.229-85.333 85.333-85.333z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["cog"],"grid":24},"attrs":[],"properties":{"id":59,"order":38,"prevSize":24,"code":59654,"name":"cog"},"setIdx":3,"setId":1,"iconIdx":12},{"icon":{"paths":["M261.163 554.667c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h62.507l-140.501 140.501c-16.683 16.683-16.683 43.648 0 60.331 8.32 8.32 19.243 12.501 30.165 12.501s21.845-4.181 30.165-12.501l145.664-145.664v72.832c0 23.552 19.072 42.667 42.667 42.667s37.504-19.115 37.504-42.667v-213.333h-208.171z","M298.667 469.333c23.552 0 42.667-19.115 42.667-42.667v-85.333h85.333c23.595 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-170.624l-0.043 170.667c0 23.552 19.072 42.667 42.667 42.667z","M725.333 554.667c-23.595 0-42.667 19.115-42.667 42.667v85.333h-85.333c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h170.667v-170.667c0-23.552-19.072-42.667-42.667-42.667z","M780.501 183.168l-140.501 140.501v-67.669c0-23.552-19.072-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v213.333h213.333c23.552 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-67.669l140.501-140.459c16.683-16.683 16.683-43.648 0-60.331s-43.648-16.725-60.331-0.043z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-minimise"],"grid":24},"attrs":[],"properties":{"id":82,"order":28,"prevSize":24,"code":59655,"name":"minimise"},"setIdx":3,"setId":1,"iconIdx":13},{"icon":{"paths":["M640 170.667c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h67.669l-140.501 140.501c-16.683 16.683-16.683 43.648 0 60.331 8.32 8.32 19.243 12.501 30.165 12.501s21.845-4.181 30.165-12.501l140.501-140.501v67.669c0 23.552 19.072 42.667 42.667 42.667s42.667-19.115 42.667-42.667v-213.333h-213.333z","M396.501 567.168l-140.501 140.501v-67.669c0-23.552-19.072-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v213.291h42.496c0.341 0 170.837 0.043 170.837 0.043 23.552 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-67.669l140.501-140.459c16.683-16.683 16.683-43.648 0-60.331s-43.648-16.725-60.331-0.043z","M298.667 512c23.552 0 42.667-19.115 42.667-42.667v-128h128c23.595 0 42.667-19.115 42.667-42.667s-19.072-42.667-42.667-42.667h-213.291l-0.043 213.333c0 23.552 19.072 42.667 42.667 42.667z","M725.333 512c-23.595 0-42.667 19.115-42.667 42.667v128h-128c-23.595 0-42.667 19.115-42.667 42.667s19.072 42.667 42.667 42.667h213.333v-213.333c0-23.552-19.072-42.667-42.667-42.667z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["arrow-maximise"],"grid":24},"attrs":[],"properties":{"id":83,"order":27,"prevSize":24,"code":59656,"name":"maximise"},"setIdx":3,"setId":1,"iconIdx":14},{"icon":{"paths":["M435.2 273.067c-20.821 0-39.723 8.405-53.461 21.845-101.589 98.773-253.739 246.997-253.739 246.997s152.149 148.181 253.611 246.997c13.909 13.44 32.768 21.76 53.589 21.76 42.411 0 76.8-34.347 76.8-76.757v-192-192c0-42.411-34.389-76.843-76.8-76.843z","M819.2 273.067c-20.821 0-39.723 8.405-53.461 21.845-101.589 98.773-253.739 246.997-253.739 246.997s152.149 148.181 253.611 246.997c13.909 13.44 32.768 21.76 53.589 21.76 42.411 0 76.8-34.347 76.8-76.757v-384c0-42.411-34.389-76.843-76.8-76.843z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-rewind"],"grid":24},"attrs":[],"properties":{"id":93,"order":34,"prevSize":24,"code":59657,"name":"backward"},"setIdx":3,"setId":1,"iconIdx":15},{"icon":{"paths":["M682.667 256h-341.333c-46.933 0-85.333 38.4-85.333 85.333v341.333c0 46.933 38.4 85.333 85.333 85.333h341.333c46.933 0 85.333-38.4 85.333-85.333v-341.333c0-46.933-38.4-85.333-85.333-85.333z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-stop"],"grid":24},"attrs":[],"properties":{"id":100,"order":29,"prevSize":24,"code":59658,"name":"stop"},"setIdx":3,"setId":1,"iconIdx":16},{"icon":{"paths":["M443.563 786.475c112.683-109.824 281.771-274.475 281.771-274.475s-169.088-164.651-281.771-274.475c-15.488-14.891-36.395-24.192-59.563-24.192-47.104 0-85.333 38.229-85.333 85.333v426.667c0 47.104 38.229 85.333 85.333 85.333 23.168 0 44.075-9.301 59.563-24.192z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-play"],"grid":24},"attrs":[],"properties":{"id":102,"order":31,"prevSize":24,"code":59659,"name":"play"},"setIdx":3,"setId":1,"iconIdx":17},{"icon":{"paths":["M642.261 294.912c-13.824-13.397-32.64-21.845-53.461-21.845-42.411 0-76.8 34.432-76.8 76.843v192 192c0 42.411 34.389 76.757 76.8 76.757 20.821 0 39.68-8.32 53.461-21.845 101.589-98.731 253.739-246.912 253.739-246.912s-152.149-148.224-253.739-246.997z","M258.261 294.912c-13.824-13.397-32.64-21.845-53.461-21.845-42.411 0-76.8 34.432-76.8 76.843v384c0 42.411 34.389 76.757 76.8 76.757 20.821 0 39.68-8.32 53.461-21.845 101.589-98.731 253.739-246.912 253.739-246.912s-152.149-148.224-253.739-246.997z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-fast-forward"],"grid":24},"attrs":[],"properties":{"id":103,"order":32,"prevSize":24,"code":59660,"name":"forward"},"setIdx":3,"setId":1,"iconIdx":18},{"icon":{"paths":["M725.333 682.667h-426.667c-47.104 0-85.333 38.187-85.333 85.333 0 47.104 38.229 85.333 85.333 85.333h426.667c47.104 0 85.333-38.229 85.333-85.333 0-47.147-38.229-85.333-85.333-85.333z","M786.475 452.437c-109.824-112.683-274.475-281.771-274.475-281.771s-164.651 169.088-274.475 281.771c-14.891 15.488-24.192 36.395-24.192 59.563 0 47.104 38.229 85.333 85.333 85.333h426.667c47.104 0 85.333-38.229 85.333-85.333 0-23.168-9.301-44.075-24.192-59.563z"],"attrs":[],"isMulticolor":false,"isMulticolor2":false,"tags":["media-eject"],"grid":24},"attrs":[],"properties":{"id":104,"order":33,"prevSize":24,"code":59661,"name":"eject"},"setIdx":3,"setId":1,"iconIdx":19}],"height":1024,"metadata":{"name":"icons"},"preferences":{"showGlyphs":true,"showCodes":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icons","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"noie8":true,"ie7":false,"cssVars":true,"cssVarsFormat":"scss","showSelector":false,"showMetrics":false,"showMetadata":false,"showVersion":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215},"historySize":50,"gridSize":16,"showGrid":false}}
\ No newline at end of file
diff --git a/src/client/components/Controls.js b/src/client/components/Controls.js
index 5118a73..b9e2e9b 100644
--- a/src/client/components/Controls.js
+++ b/src/client/components/Controls.js
@@ -115,7 +115,7 @@ class Controls extends Component {
             <div className="player-controls">
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-stop" />} onClick={onStop} />
-                    {onStream ? <Button disabled={!loaded} label="&#8682;" onClick={onStream} /> : null}
+                    {onStream ? <Button disabled={!loaded} label={<span className="icon-stream" />} onClick={onStream} /> : null}
                 </div>
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-backward" onClick={onBackward} />} />
diff --git a/src/client/peer/AbstractPeer.js b/src/client/peer/AbstractPeer.js
index 1625836..c8e922d 100644
--- a/src/client/peer/AbstractPeer.js
+++ b/src/client/peer/AbstractPeer.js
@@ -1,7 +1,7 @@
 export default class AbstractPeer {
     constructor(api) {
         this.api = api;
-        this.connection = new RTCPeerConnection(/* {
+        this.connection = new RTCPeerConnection({
             iceServers:[
                 {url:'stun:stun.l.google.com:19302'},
                 {url:'stun:stun1.l.google.com:19302'},
@@ -9,7 +9,7 @@ export default class AbstractPeer {
                 {url:'stun:stun3.l.google.com:19302'},
                 {url:'stun:stun4.l.google.com:19302'},
             ]
-        }*/);
+        });
 
         this.loadLocalDescription = this.loadLocalDescription.bind(this);
         this.onIceCandidate = this.onIceCandidate.bind(this);

From 991725d31e5a4c7f3e5449373334ca310ce770ee Mon Sep 17 00:00:00 2001
From: Thomas Jarrand <thomas.jarrand@gmail.com>
Date: Fri, 15 Jan 2021 00:10:11 +0100
Subject: [PATCH 4/6] Support multiple clients

---
 .eslintrc.json                        |   7 +-
 assets/css/components/buttons.scss    |   4 +
 src/client/components/Controls.js     |  13 +--
 src/client/components/Player.js       |  46 ++++++++---
 src/client/components/Socket.js       |  14 +++-
 src/client/components/StreamButton.js |  50 ++++++++++++
 src/client/components/video/Video.js  |  22 +-----
 src/client/container.js               |   9 ++-
 src/client/peer/AbstractPeer.js       |  40 ++++++----
 src/client/peer/Distributor.js        |  31 ++++++--
 src/client/peer/PeerManager.js        | 110 ++++++++++++++++++++++----
 src/client/peer/Spectator.js          |  34 +++-----
 src/client/service/Api.js             |  14 ++--
 src/client/store/player.js            |   9 +++
 src/events/PeerCodec.js               |  42 ++++++++++
 src/events/index.js                   |   7 +-
 src/server/room/Room.js               |  51 ++++++++++--
 17 files changed, 389 insertions(+), 114 deletions(-)
 create mode 100644 src/client/components/StreamButton.js
 create mode 100644 src/events/PeerCodec.js

diff --git a/.eslintrc.json b/.eslintrc.json
index 9e1dbaa..95f0666 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -53,12 +53,15 @@
             "error",
             "always"
         ],
+        "no-unused-vars": [
+            "warn"
+        ],
         "no-console": [
-            "error",
+            "warn",
             { "allow": ["info", "warn", "error"] }
         ],
         "no-inline-comments": [
-            "error"
+            "warn"
         ],
         "spaced-comment": [
             "error",
diff --git a/assets/css/components/buttons.scss b/assets/css/components/buttons.scss
index e6987ba..998bbe1 100644
--- a/assets/css/components/buttons.scss
+++ b/assets/css/components/buttons.scss
@@ -37,4 +37,8 @@
     &[disabled] .icon-loader {
         color: $color-primary;
     }
+
+    &.active, &.active:hover {
+        color: $color-primary;
+    }
 }
diff --git a/src/client/components/Controls.js b/src/client/components/Controls.js
index b9e2e9b..218bd66 100644
--- a/src/client/components/Controls.js
+++ b/src/client/components/Controls.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Button from '@client/components/Button';
 import VolumeControl from '@client/components/VolumeControl';
+import StreamButton from '@client/components/StreamButton';
 
 class Controls extends Component {
     static propTypes = {
@@ -13,11 +14,12 @@ class Controls extends Component {
         onStop: PropTypes.func.isRequired,
         onBackward: PropTypes.func.isRequired,
         onForward: PropTypes.func.isRequired,
-        onStream: PropTypes.func,
+        toggleStream: PropTypes.func,
+        streamable: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
-        onStream: null,
+        toggleStream: null,
     };
 
     constructor(props) {
@@ -107,7 +109,7 @@ class Controls extends Component {
     }
 
     render() {
-        const { playing, loaded, onStop, onBackward, onForward, onStream } = this.props;
+        const { playing, loaded, streamable, onStop, onBackward, onForward, toggleStream } = this.props;
         const playIcon = loaded ? playing ? 'icon-pause' : 'icon-play' : 'icon-loader';
         const screenIcon = this.fullscreen ? 'icon-minimise' : 'icon-maximise';
 
@@ -115,7 +117,7 @@ class Controls extends Component {
             <div className="player-controls">
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-stop" />} onClick={onStop} />
-                    {onStream ? <Button disabled={!loaded} label={<span className="icon-stream" />} onClick={onStream} /> : null}
+                    {streamable ? <StreamButton disabled={!loaded} toggleStream={toggleStream} /> : null}
                 </div>
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-backward" onClick={onBackward} />} />
@@ -135,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 31ca6b3..9fd8961 100644
--- a/src/client/components/Player.js
+++ b/src/client/components/Player.js
@@ -2,17 +2,20 @@ 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, setStreaming } from '@client/store/player';
 import { Video, YoutubeVideo } from '@client/components/video';
 import Controls from '@client/components/Controls';
 import Timeline from '@client/components/Timeline';
 import AuthorizationModal from '@client/components/AuthorizationModal';
 import Showtime from '@client/common/Showtime';
+import DebugCanvas from '@client/debug/DebugCanvas';
 
 class Player extends Component {
     static propTypes = {
         source: PropTypes.string.isRequired,
+        streaming: PropTypes.bool.isRequired,
         setShowtime: PropTypes.func.isRequired,
+        setStreaming: PropTypes.func.isRequired,
     };
 
     constructor(props) {
@@ -36,16 +39,29 @@ class Player extends Component {
         this.onForward = this.onForward.bind(this);
         this.onSeek = this.onSeek.bind(this);
         this.onStream = this.onStream.bind(this);
+        this.toggleStream = this.toggleStream.bind(this);
     }
 
-    setVideo(video) {
-        this.video = video;
+    componentDidMount() {
+        this.peer.addEventListener('stream', this.onStream);
+    }
 
-        if (this.peer.spectator) {
-            this.peer.spectator.setVideo(this.video.element);
+    componentWillUnmount() {
+        this.peer.removeEventListener('stream', this.onStream);
+    }
+
+    componentDidUpdate(prevProps) {
+        const { source, streaming } = this.props;
+
+        if (source !== prevProps.source && prevProps.source === 'peer') {
+            this.peer.clear();
         }
     }
 
+    setVideo(video) {
+        this.video = video;
+    }
+
     setTimeline(timeline) {
         this.timeline = timeline;
     }
@@ -94,7 +110,18 @@ class Player extends Component {
     }
 
     onStream() {
-        this.peer.distribute(this.video);
+        this.video.loadStream(this.peer.spectator.stream);
+    }
+
+    toggleStream(streaming) {
+        if (streaming) {
+            this.peer.distribute(
+                // this.video.captureStream()
+                new DebugCanvas().getStream()
+            );
+        } else {
+            this.peer.clear();
+        }
     }
 
     getVideoComponent(source) {
@@ -102,9 +129,6 @@ class Player extends Component {
             case 'youtube':
                 return YoutubeVideo;
 
-                // case: 'peer':
-                //    return StreamVideo;
-
             default:
                 return Video;
         }
@@ -140,7 +164,7 @@ class Player extends Component {
                         onPause={this.onPause}
                         onBackward={this.onBackward}
                         onForward={this.onForward}
-                        onStream={source === 'file' ? this.onStream : undefined}
+                        toggleStream={source === 'file' ? this.toggleStream : undefined}
                     />
                 </div>
             </figure>
@@ -151,8 +175,10 @@ class Player extends Component {
 export default connect(
     state => ({
         source: state.player.source,
+        streaming: state.player.streaming,
     }),
     dispatch => ({
         setShowtime: showtime => dispatch(setShowtime(showtime)),
+        setStreaming: streming => dispatch(setStreaming(streming)),
     })
 )(Player);
diff --git a/src/client/components/Socket.js b/src/client/components/Socket.js
index 4541d27..5b01650 100644
--- a/src/client/components/Socket.js
+++ b/src/client/components/Socket.js
@@ -134,16 +134,23 @@ class Socket extends Component {
     }
 
     onPeerOffer(event) {
-        this.peer.spectate(JSON.parse(event.detail));
+        console.log('onPeerOffer', event.detail);
+        const { sender, description } = event.detail;
+        this.peer.spectate(JSON.parse(description));
+        // this.props.onUserDistributor(sender);
         this.props.onVideo('peer');
     }
 
     onPeerAnswer(event) {
-        this.peer.answer(JSON.parse(event.detail));
+        console.log('onPeerAnswer', event.detail);
+        const { sender, description } = event.detail;
+        this.peer.answer(sender, JSON.parse(description));
     }
 
     onPeerCandidate(event) {
-        this.peer.addCandidate(JSON.parse(event.detail));
+        console.log('onPeerCandidate', event.detail);
+        const { sender, description } = event.detail;
+        this.peer.addCandidate(sender, JSON.parse(description));
     }
 
     /**
@@ -177,6 +184,7 @@ export default connect(
         onUserAdd: event => dispatch(userAdd(event.detail)),
         onUserRemove: event => dispatch(userRemove(event.detail)),
         onUserReady: event => dispatch(userReady(event.detail)),
+        // onUserDistributor: event => dispatch(userReady(event.detail)),
         onControlPlay: event => dispatch(play(event.detail)),
         onControlPause: event => dispatch(pause(event.detail)),
         onControlSeek: event => dispatch(seek(event.detail)),
diff --git a/src/client/components/StreamButton.js b/src/client/components/StreamButton.js
new file mode 100644
index 0000000..9b1a09e
--- /dev/null
+++ b/src/client/components/StreamButton.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Button from '@client/components/Button';
+import { setStreaming } from '@client/store/player';
+
+class StreamButton extends Component {
+    static propTypes = {
+        disabled: PropTypes.bool,
+        streaming: PropTypes.bool.isRequired,
+        toggleStream: PropTypes.func.isRequired,
+    };
+
+    static defaultProps = {
+        disabled: false,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.toggleStream = this.toggleStream.bind(this);
+    }
+
+    toggleStream() {
+        const { streaming, toggleStream } = this.props;
+
+        toggleStream(!streaming);
+    }
+
+    render() {
+        const { streaming, disabled } = this.props;
+
+        return <Button
+            disabled={disabled}
+            label={<span className="icon-stream" />}
+            className={streaming ? 'active' : ''}
+            onClick={this.toggleStream}
+        />;
+    }
+}
+
+export default connect(
+    state => ({
+        streaming: state.player.streaming,
+    }),
+    /* dispatch => ({
+        toggleStream: streaming => dispatch(setStreaming(streaming)),
+    })*/
+)(StreamButton);
+
diff --git a/src/client/components/video/Video.js b/src/client/components/video/Video.js
index 0bc096a..571e613 100644
--- a/src/client/components/video/Video.js
+++ b/src/client/components/video/Video.js
@@ -44,7 +44,6 @@ export default class Video extends Component {
         this.onCanPlayThrough = this.onCanPlayThrough.bind(this);
         this.onDurationChange = this.onDurationChange.bind(this);
         this.onLoadedMetadata = this.onLoadedMetadata.bind(this);
-        this.onResize = this.onResize.bind(this);
         this.onNotAuthorized = this.onNotAuthorized.bind(this);
         this.onEnded = this.onEnded.bind(this);
         this.onAuthorized = this.onAuthorized.bind(this);
@@ -70,18 +69,11 @@ export default class Video extends Component {
         }
     }
 
-    componentWillUnmount() {
-        if (this.element) {
-            this.element.removeEventListener('resize', this.onResize);
-        }
-    }
-
     setElement(element) {
         this.element = element;
 
         if (this.element) {
             this.element.volume = this.props.volume;
-            this.element.addEventListener('resize', this.onResize);
         }
     }
 
@@ -120,41 +112,39 @@ export default class Video extends Component {
 
     captureStream() {
         if (typeof this.element.mozCaptureStream === 'function') {
-            console.log(this.element.readyState);
             return this.element.mozCaptureStream();
         }
 
         if (typeof this.element.captureStream === 'function') {
-            console.log(this.element.readyState);
             return this.element.captureStream();
         }
 
         return null;
     }
 
+    loadStream(stream) {
+        this.element.srcObject = stream;
+    }
+
     onAuthorized() {
-        console.log('onAuthorized');
         if (!this.props.authorized) {
             this.props.setAuthorized(true);
         }
     }
 
     onNotAuthorized(error) {
-        console.log('onNotAuthorized');
         if (error instanceof DOMException && error.name === 'NotAllowedError' && this.props.authorized) {
             this.props.setAuthorized(false);
         }
     }
 
     onLoadStart() {
-        console.log('onLoadStart');
         if (this.props.loaded) {
             this.props.setLoaded(false);
         }
     }
 
     onProgress() {
-        console.log('onProgress');
         this.props.onProgress();
     }
 
@@ -177,10 +167,6 @@ export default class Video extends Component {
         console.log('onLoadedMetadata', event);
     }
 
-    onResize(event) {
-        console.log('onResize', event);
-    }
-
     onDurationChange() {
         if (this.element.duration !== Infinity) {
             this.props.setDuration(this.element.duration);
diff --git a/src/client/container.js b/src/client/container.js
index 02cd03a..ff04b92 100644
--- a/src/client/container.js
+++ b/src/client/container.js
@@ -20,6 +20,13 @@ const { hostname, port, protocol } = window.location;
 container.registerParameter('config:host', port ? `${hostname}:${parseInt(port, 10) + 1}` : `server.${hostname}`);
 container.registerParameter('config:protocol', protocol.replace('http', 'ws'));
 container.registerParameter('config:debug', process.env.NODE_ENV === 'development');
+container.registerParameter('config:ice-servers', [
+    {url:'stun:stun.l.google.com:19302'},
+    {url:'stun:stun1.l.google.com:19302'},
+    {url:'stun:stun2.l.google.com:19302'},
+    {url:'stun:stun3.l.google.com:19302'},
+    {url:'stun:stun4.l.google.com:19302'},
+]);
 
 // Redux store:
 container.registerCallback('store', createStore, ['config:debug']);
@@ -32,7 +39,7 @@ container.registerService('api', Api, ['config:host', 'config:protocol']);
 container.registerService('youtube', Youtube, ['config:host']);
 container.registerService('watcher', StoreWatcher, ['store']);
 container.registerService('storage', Storage);
-container.registerService('peer', PeerManager, ['api']);
+container.registerService('peer', PeerManager, ['api', 'store', 'config:ice-servers']);
 
 // Listeners
 container.registerService('listener:storage', StorageListener, ['store', 'storage', 'config:debug']);
diff --git a/src/client/peer/AbstractPeer.js b/src/client/peer/AbstractPeer.js
index c8e922d..e2bf2a7 100644
--- a/src/client/peer/AbstractPeer.js
+++ b/src/client/peer/AbstractPeer.js
@@ -1,15 +1,10 @@
-export default class AbstractPeer {
-    constructor(api) {
-        this.api = api;
-        this.connection = new RTCPeerConnection({
-            iceServers:[
-                {url:'stun:stun.l.google.com:19302'},
-                {url:'stun:stun1.l.google.com:19302'},
-                {url:'stun:stun2.l.google.com:19302'},
-                {url:'stun:stun3.l.google.com:19302'},
-                {url:'stun:stun4.l.google.com:19302'},
-            ]
-        });
+import EventEmitter from 'tom32i-event-emitter.js';
+
+export default class AbstractPeer extends EventEmitter {
+    constructor(iceServers = undefined) {
+        super();
+
+        this.connection = new RTCPeerConnection({ iceServers });
 
         this.loadLocalDescription = this.loadLocalDescription.bind(this);
         this.onIceCandidate = this.onIceCandidate.bind(this);
@@ -31,6 +26,7 @@ export default class AbstractPeer {
     }
 
     loadRemoteDescription(data) {
+        console.log('loadRemoteDescription');
         const description = new RTCSessionDescription(data);
 
         this.connection.setRemoteDescription(description).catch(this.onError);
@@ -38,15 +34,31 @@ export default class AbstractPeer {
 
     onIceCandidate(event) {
         if (event.candidate) {
-            this.api.newIceCandidate(event.candidate);
+            this.emit('icecandidate', {
+                target: this.target,
+                description: event.candidate,
+            });
         }
     }
 
     onIceStateChange() {
-        console.log('onIceStateChange', this.connection.iceConnectionState);
+        const { iceConnectionState } = this.connection;
+
+        switch (iceConnectionState) {
+            case 'connected':
+                this.emit('ready');
+                break;
+
+            default:
+                console.info('ICE connection status: ', iceConnectionState);
+        }
     }
 
     onError(error) {
         console.error(error);
     }
+
+    clear() {
+        this.connection.close();
+    }
 }
diff --git a/src/client/peer/Distributor.js b/src/client/peer/Distributor.js
index ee31033..a2ddab1 100644
--- a/src/client/peer/Distributor.js
+++ b/src/client/peer/Distributor.js
@@ -2,13 +2,18 @@ import AbstractPeer from '@client/peer/AbstractPeer';
 import DebugCanvas from '@client/debug/DebugCanvas';
 
 export default class Distributor extends AbstractPeer {
-    loadVideo(video) {
-        // const stream = new DebugCanvas().getStream();
-        const stream = video.captureStream();
+    constructor(target, iceServers) {
+        super(iceServers);
+
+        this.target = target;
+        this.stream = null;
 
         this.onLocalDescriptionLoaded = this.onLocalDescriptionLoaded.bind(this);
+    }
 
-        stream.getTracks().forEach(track => this.connection.addTrack(track, stream));
+    setStream(stream) {
+        this.stream = stream;
+        this.stream.getTracks().forEach(track => this.connection.addTrack(track, this.stream));
 
         this.connection.createOffer({ offerToReceiveAudio: 1, offerToReceiveVideo: 1 })
             .then(this.loadLocalDescription)
@@ -17,10 +22,22 @@ export default class Distributor extends AbstractPeer {
     }
 
     onLocalDescriptionLoaded() {
-        this.api.offer(this.connection.localDescription);
+        this.emit('offer', {
+            target: this.target,
+            description: this.connection.localDescription,
+        });
     }
 
-    onError(error) {
-        console.error(error);
+    clear() {
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => {
+                this.connection.removeTrack(track, this.stream);
+                track.stop();
+            });
+
+            this.stream = null;
+        }
+
+        super.close();
     }
 }
diff --git a/src/client/peer/PeerManager.js b/src/client/peer/PeerManager.js
index 1e80110..944dd45 100644
--- a/src/client/peer/PeerManager.js
+++ b/src/client/peer/PeerManager.js
@@ -1,46 +1,110 @@
+import EventEmitter from 'tom32i-event-emitter.js';
 import Distributor from '@client/peer/Distributor';
 import Spectator from '@client/peer/Spectator';
 import 'webrtc-adapter';
 
-export default class PeerManager {
-    constructor(api) {
+export default class PeerManager extends EventEmitter {
+    constructor(api, store, iceServers) {
+        super();
+
         this.api = api;
-        this.distributor = null;
+        this.store = store;
+        this.iceServers = undefined;// iceServers;
+        this.distributors = null;
         this.spectator = null;
+
+        this.createDistributor = this.createDistributor.bind(this);
+        this.onOffer = this.onOffer.bind(this);
+        this.onAnswer = this.onAnswer.bind(this);
+        this.onIceCandidate = this.onIceCandidate.bind(this);
+        this.onStream = this.onStream.bind(this);
+        this.onReady = this.onReady.bind(this);
     }
 
-    distribute(video) {
+    distribute(stream) {
         this.ensureIsFree();
+        console.log('distribute', this.getOthers());
+        this.distributors = this.getOthers().map(this.createDistributor);
+        console.log(this.distributors);
+        this.distributors.forEach(distributor => distributor.setStream(stream));
+    }
+
+    getOthers() {
+        const { me, users } = this.store.getState().room;
+
+        return users.map(user => user.id).filter(id => id !== me);
+    }
+
+    createDistributor(target) {
+        const distributor = new Distributor(target, this.iceServers);
+
+        distributor.addEventListener('offer', this.onOffer);
+        distributor.addEventListener('icecandidate', this.onIceCandidate);
+        distributor.addEventListener('ready', this.onReady);
 
-        this.distributor = new Distributor(this.api);
-        this.distributor.loadVideo(video);
+        return distributor;
     }
 
     spectate(description) {
         this.ensureIsFree();
 
-        this.spectator = new Spectator(this.api);
+        this.spectator = new Spectator(this.iceServers);
+
+        this.spectator.addEventListener('answer', this.onAnswer);
+        this.spectator.addEventListener('icecandidate', this.onIceCandidate);
+        this.spectator.addEventListener('stream', this.onStream);
+        this.spectator.addEventListener('ready', this.onReady);
 
         this.spectator.loadRemoteDescription(description);
         this.spectator.answer();
     }
 
-    answer(description) {
-        this.distributor.loadRemoteDescription(description);
+    answer(sender, description) {
+        this.getDistributorById(sender).loadRemoteDescription(description);
     }
 
-    addCandidate(candidate) {
-        if (this.distributor) {
-            return this.distributor.addCandidate(candidate);
-        }
-
+    addCandidate(sender, candidate) {
         if (this.spectator) {
             return this.spectator.addCandidate(candidate);
         }
+
+        return this.getDistributorById(sender).addCandidate(candidate);
+    }
+
+    onOffer(event) {
+        console.log('onOffer', event);
+        const { description, target } = event.detail;
+        this.api.offer(description, target);
+    }
+
+    onAnswer(event) {
+        console.log('onAnswer');
+        const { description, target } = event.detail;
+
+        this.api.answer(description);
+    }
+
+    onIceCandidate(event) {
+        const { description, target } = event.detail;
+
+        this.api.newIceCandidate(description, target);
+    }
+
+    onStream() {
+        this.emit('stream');
+    }
+
+    onReady() {
+        this.emit('ready');
+    }
+
+    getDistributorById(id) {
+        console.log('getDistributorById', id);
+        return this.distributors.find(distributor => distributor.target === id);
     }
 
     ensureIsFree() {
-        if (this.distributor) {
+        if (this.distributors) {
             throw new Error('Already distributing.');
         }
 
@@ -50,7 +114,19 @@ export default class PeerManager {
     }
 
     clear() {
-        this.distributor = null;
-        this.spectator = null;
+        if (this.spectator) {
+            this.spectator.removeEventListener('answer', this.onAnswer);
+            this.spectator.removeEventListener('icecandidate', this.onIceCandidate);
+            this.spectator.clear();
+            this.spectator = null;
+        }
+
+        this.distributors.forEach(distributor => {
+            distributor.removeEventListener('offer', this.onOffer);
+            distributor.removeEventListener('icecandidate', this.onIceCandidate);
+            distributor.clear();
+        });
+
+        this.distributors = null;
     }
 }
diff --git a/src/client/peer/Spectator.js b/src/client/peer/Spectator.js
index 8eeb203..a1ebb3d 100644
--- a/src/client/peer/Spectator.js
+++ b/src/client/peer/Spectator.js
@@ -1,20 +1,15 @@
 import AbstractPeer from '@client/peer/AbstractPeer';
 
 export default class Spectator extends AbstractPeer {
-    constructor(api) {
-        super(api);
+    constructor(iceServers) {
+        super(iceServers);
 
         this.stream = null;
-        this.video = null;
 
         this.onTrack = this.onTrack.bind(this);
         this.onLocalDescriptionLoaded = this.onLocalDescriptionLoaded.bind(this);
 
         this.connection.addEventListener('track', this.onTrack);
-        // this.connection.addEventListener('negotiationneeded', this.handleNegotiationNeededEvent.bind(this));
-        // this.connection.addEventListener('removetrack', this.handleRemoveTrackEvent.bind(this));
-        // this.connection.addEventListener('icegatheringstatechange', this.handleICEGatheringStateChangeEvent.bind(this));
-        // this.connection.addEventListener('signalingstatechange', this.handleSignalingStateChangeEvent.bind(this));
     }
 
     answer() {
@@ -24,30 +19,23 @@ export default class Spectator extends AbstractPeer {
             .catch(this.onError);
     }
 
-    setVideo(video) {
-        this.video = video;
-
-        this.playStreamOnVideo();
-    }
-
-    setStream(stream) {
-        this.stream = stream;
-        this.playStreamOnVideo();
-    }
-
     onLocalDescriptionLoaded() {
-        this.api.answer(this.connection.localDescription);
+        this.emit('answer', { description: this.connection.localDescription });
     }
 
     onTrack(event) {
         if (!this.stream) {
-            this.setStream(event.streams[0]);
+            this.stream = event.streams[0];
+            this.emit('stream');
         }
     }
 
-    playStreamOnVideo() {
-        if (!!this.video && !!this.stream) {
-            this.video.srcObject = this.stream;
+    clear() {
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
         }
+
+        super.close();
     }
 }
diff --git a/src/client/service/Api.js b/src/client/service/Api.js
index 5f8abc1..c83f023 100644
--- a/src/client/service/Api.js
+++ b/src/client/service/Api.js
@@ -63,15 +63,19 @@ export default class Api {
         this.client.send(`video:${source}`, { url, name });
     }
 
-    offer(description) {
-        this.client.send('peer:offer', JSON.stringify(description.toJSON()));
+    offer(description, target) {
+        console.log('offer', description, target);
+        this.client.send('peer:offer', { target, description: JSON.stringify(description.toJSON()) });
     }
 
     answer(description) {
-        this.client.send('peer:answer', JSON.stringify(description.toJSON()));
+        console.log('answer', description);
+        this.client.send('peer:answer', { description: JSON.stringify(description.toJSON()) });
     }
 
-    newIceCandidate(candidate) {
-        this.client.send('peer:candidate', JSON.stringify(candidate.toJSON()));
+    newIceCandidate(description, target) {
+        console.log('newIceCandidate', description, target);
+
+        this.client.send('peer:candidate', { target, description: JSON.stringify(description.toJSON()) });
     }
 }
diff --git a/src/client/store/player.js b/src/client/store/player.js
index 9e5cb5b..833b3ef 100644
--- a/src/client/store/player.js
+++ b/src/client/store/player.js
@@ -16,6 +16,7 @@ export const PLAYER_SEEK = 'PLAYER_SEEK';
 export const PLAYER_END = 'PLAYER_END';
 export const PLAYER_STOP = 'PLAYER_STOP';
 export const PLAYER_SHOWTIME = 'PLAYER_SHOWTIME';
+export const PLAYER_STREAM = 'PLAYER_STREAM';
 
 export function loadVideoFromFile(url, name, type) {
     return { type: PLAYER_LOAD_FROM_FILE, payload: { url, name, type, source: 'file' } };
@@ -81,6 +82,10 @@ export function setShowtime(active) {
     return { type: PLAYER_SHOWTIME, payload: { active } };
 }
 
+export function setStreaming(active) {
+    return { type: PLAYER_STREAM, payload: { active } };
+}
+
 const initialState = {
     url: null,
     source: null,
@@ -94,6 +99,7 @@ const initialState = {
     fromServer: false,
     time: 0,
     showtime: false,
+    streaming: false,
 };
 
 const inititalSubtitleState = {
@@ -210,6 +216,9 @@ export default function player(state = initialState, action) {
         case PLAYER_SHOWTIME:
             return { ...state, showtime: payload.active };
 
+        case PLAYER_STREAM:
+            return { ...state, streaming: payload.active };
+
         case ROOM_LEAVE:
             return initialState;
 
diff --git a/src/events/PeerCodec.js b/src/events/PeerCodec.js
new file mode 100644
index 0000000..6aee545
--- /dev/null
+++ b/src/events/PeerCodec.js
@@ -0,0 +1,42 @@
+import { Codec, Int8Codec, LongStringCodec } from 'netcode/src/encoder/codec';
+
+export default class PeerCodec extends Codec {
+    constructor() {
+        super();
+
+        this.int8Codec = new Int8Codec();
+        this.longStringCodec = new LongStringCodec();
+    }
+
+    getByteLength(data) {
+        return this.int8Codec.getByteLength() * 2 + this.longStringCodec.getByteLength(data.description);
+    }
+
+    encode(buffer, offset, data) {
+        const { sender, target, description } = data;
+
+        this.int8Codec.encode(buffer, offset, sender || 0);
+
+        offset += this.int8Codec.getByteLength();
+
+        this.int8Codec.encode(buffer, offset, target || 0);
+
+        offset += this.int8Codec.getByteLength();
+
+        this.longStringCodec.encode(buffer, offset, description);
+    }
+
+    decode(buffer, offset) {
+        const sender = this.int8Codec.decode(buffer, offset);
+
+        offset += this.int8Codec.getByteLength();
+
+        const target = this.int8Codec.decode(buffer, offset);
+
+        offset += this.int8Codec.getByteLength();
+
+        const description = this.longStringCodec.decode(buffer, offset);
+
+        return { sender, target, description };
+    }
+}
diff --git a/src/events/index.js b/src/events/index.js
index 22d1ded..b40ca7f 100644
--- a/src/events/index.js
+++ b/src/events/index.js
@@ -5,6 +5,7 @@ import FileVideoCodec from '@events/FileVideoCodec';
 import UrlVideoCodec from '@events/UrlVideoCodec';
 import UserReadyCodec from '@events/UserReadyCodec';
 import SeekCodec from '@events/SeekCodec';
+import PeerCodec from '@events/PeerCodec';
 
 export default [
     ['user:me', new Int8Codec()],
@@ -19,7 +20,7 @@ export default [
     ['video:file', new FileVideoCodec()],
     ['video:url', new UrlVideoCodec()],
     ['video:youtube', new UrlVideoCodec()],
-    ['peer:offer', new LongStringCodec()],
-    ['peer:answer', new LongStringCodec()],
-    ['peer:candidate', new LongStringCodec()],
+    ['peer:offer', new PeerCodec()],
+    ['peer:answer', new PeerCodec()],
+    ['peer:candidate', new PeerCodec()],
 ];
diff --git a/src/server/room/Room.js b/src/server/room/Room.js
index b27877e..73efcc7 100644
--- a/src/server/room/Room.js
+++ b/src/server/room/Room.js
@@ -167,19 +167,50 @@ export default class Room {
 
     onPeerOffer(data, client) {
         if (!this.distributor) {
+            console.log('set distributor', client.id);
             this.distributor = client;
-            this.sendToOther(client, 'peer:offer', data);
+        }
+
+        if (this.distributor === client) {
+            const target = this.getClientFromUserId(data.target);
+
+            if (!target) {
+                console.error('Invalid target');
+                return;
+            }
+
+            const user = this.users.get(client);
+            const { description } = data;
+
+            target.send('peer:offer', { description, sender: user.id });
         }
     }
 
-    onPeerAnswer(data/* , client*/) {
-        if (this.distributor) {
-            this.distributor.send('peer:answer', data);
+    onPeerAnswer(data, client) {
+        if (this.distributor && client !== this.distributor) {
+            const user = this.users.get(client);
+            const { description } = data;
+
+            this.distributor.send('peer:answer', { description, sender: user.id });
         }
     }
 
-    onPeerCandidate(candidate, client) {
-        this.sendToOther(client, 'peer:candidate', candidate);
+    onPeerCandidate(data, client) {
+        if (!this.distributor) {
+            return;
+        }
+
+        const target = this.getClientFromUserId(data.target);
+
+        if (!target) {
+            console.error('Invalid target');
+            return;
+        }
+
+        const user = this.users.get(client);
+        const { description } = data;
+
+        target.send('peer:candidate', { description, sender: user.id });
     }
 
     unloadVideo() {
@@ -234,6 +265,14 @@ export default class Room {
         this.send('control:stop');
     }
 
+    getClientFromUserId(id) {
+        for (let [client, user] of this.users.entries()) {
+            if (user.id === id) {
+                return client;
+            }
+        }
+    }
+
     /**
      * Send data to all clients
      *

From d1e8664328e9b0a4dc7ee60cf289d5dfaee24a01 Mon Sep 17 00:00:00 2001
From: Thomas Jarrand <thomas.jarrand@gmail.com>
Date: Fri, 30 Apr 2021 00:49:16 +0200
Subject: [PATCH 5/6] Improving streaming experience

---
 assets/css/components/user-list.scss  | 16 ++++-
 src/client/components/Player.js       | 66 +++++++++++++------
 src/client/components/Socket.js       | 29 +++++----
 src/client/components/StreamButton.js |  6 +-
 src/client/components/Timeline.js     | 79 ++++++++++++++---------
 src/client/components/User.js         |  5 +-
 src/client/components/UserList.js     | 14 +++-
 src/client/components/video/Video.js  |  7 +-
 src/client/container.js               |  9 ++-
 src/client/http/HeadRequest.js        |  2 +-
 src/client/index.js                   |  5 +-
 src/client/listener/PeerListener.js   | 34 ++++++++++
 src/client/peer/AbstractPeer.js       |  1 -
 src/client/peer/Distributor.js        |  3 +-
 src/client/peer/PeerManager.js        | 83 ++++++++++++++----------
 src/client/service/Api.js             |  8 +--
 src/client/store/player.js            | 16 +++--
 src/client/store/room.js              | 12 ++++
 src/events/PeerTimelineCodec.js       | 37 +++++++++++
 src/events/index.js                   |  4 +-
 src/server/room/Room.js               | 92 ++++++++++++++++++---------
 src/server/room/Video.js              | 57 ++++++++++-------
 webpack.config.js                     | 15 +++--
 23 files changed, 410 insertions(+), 190 deletions(-)
 create mode 100644 src/client/listener/PeerListener.js
 create mode 100644 src/events/PeerTimelineCodec.js

diff --git a/assets/css/components/user-list.scss b/assets/css/components/user-list.scss
index 0755995..8296d85 100644
--- a/assets/css/components/user-list.scss
+++ b/assets/css/components/user-list.scss
@@ -19,9 +19,17 @@
         border-radius: 100%;
 
         sup {
-            font-size: 0.6em;
+            font-size: 0.5em;
             position: absolute;
-            top: 0;
+            top: -0.2em;
+            right: 0;
+            text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.66);
+        }
+
+        sub {
+            font-size: 0.4em;
+            position: absolute;
+            bottom: -0.2em;
             right: 0;
             text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.66);
         }
@@ -34,6 +42,10 @@
             color: green;
         }
 
+        &.streaming sub {
+            color: $color-primary;
+        }
+
         &.loading sup {
             color: red;
         }
diff --git a/src/client/components/Player.js b/src/client/components/Player.js
index 9fd8961..ad62494 100644
--- a/src/client/components/Player.js
+++ b/src/client/components/Player.js
@@ -2,20 +2,25 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { get } from '@client/container';
-import { setShowtime, setStreaming } 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';
 import AuthorizationModal from '@client/components/AuthorizationModal';
 import Showtime from '@client/common/Showtime';
-import DebugCanvas from '@client/debug/DebugCanvas';
 
 class Player extends Component {
     static propTypes = {
         source: PropTypes.string.isRequired,
-        streaming: PropTypes.bool.isRequired,
         setShowtime: PropTypes.func.isRequired,
-        setStreaming: PropTypes.func.isRequired,
+        setTimeline: PropTypes.func.isRequired,
+        duration: PropTypes.number,
+        currentTime: PropTypes.number,
+    };
+
+    static defaultProps = {
+        duration: 0,
+        currentTime: 0,
     };
 
     constructor(props) {
@@ -42,6 +47,22 @@ class Player extends Component {
         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);
     }
@@ -51,7 +72,7 @@ class Player extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        const { source, streaming } = this.props;
+        const { source } = this.props;
 
         if (source !== prevProps.source && prevProps.source === 'peer') {
             this.peer.clear();
@@ -68,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);
         }
     }
@@ -85,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() {
@@ -102,23 +129,21 @@ 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(streaming) {
-        if (streaming) {
-            this.peer.distribute(
-                // this.video.captureStream()
-                new DebugCanvas().getStream()
-            );
+    toggleStream() {
+        if (!this.peer.isStreaming()) {
+            this.peer.distribute(this.video.captureStream());
+            this.api.setTimeline(this.video.currentTime, this.video.duration);
         } else {
             this.peer.clear();
         }
@@ -175,10 +200,11 @@ class Player extends Component {
 export default connect(
     state => ({
         source: state.player.source,
-        streaming: state.player.streaming,
+        duration: state.player.duration,
+        currentTime: state.player.currentTime,
     }),
     dispatch => ({
         setShowtime: showtime => dispatch(setShowtime(showtime)),
-        setStreaming: streming => dispatch(setStreaming(streming)),
+        setTimeline: (currentTime, duration) => dispatch(setTimeline(currentTime, duration)),
     })
 )(Player);
diff --git a/src/client/components/Socket.js b/src/client/components/Socket.js
index 5b01650..da8a33b 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 } from '@client/store/player';
 
 class Socket extends Component {
     static propTypes = {
@@ -23,11 +22,13 @@ 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,
     };
 
     static defaultProps = {
@@ -47,6 +48,7 @@ class Socket extends Component {
         this.onPeerOffer = this.onPeerOffer.bind(this);
         this.onPeerAnswer = this.onPeerAnswer.bind(this);
         this.onPeerCandidate = this.onPeerCandidate.bind(this);
+        this.onPeerTimeline = this.onPeerTimeline.bind(this);
     }
 
     componentDidMount() {
@@ -62,6 +64,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);
@@ -72,6 +75,7 @@ class Socket extends Component {
         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);
     }
 
     componentWillUnmount() {
@@ -85,6 +89,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);
@@ -95,6 +100,7 @@ class Socket extends Component {
         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);
 
         // Close connection
         this.api.leave();
@@ -117,42 +123,40 @@ 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) {
-        console.log('onPeerOffer', event.detail);
-        const { sender, description } = event.detail;
+        const { description } = event.detail;
         this.peer.spectate(JSON.parse(description));
-        // this.props.onUserDistributor(sender);
         this.props.onVideo('peer');
     }
 
     onPeerAnswer(event) {
-        console.log('onPeerAnswer', event.detail);
         const { sender, description } = event.detail;
         this.peer.answer(sender, JSON.parse(description));
     }
 
     onPeerCandidate(event) {
-        console.log('onPeerCandidate', event.detail);
         const { sender, description } = event.detail;
         this.peer.addCandidate(sender, JSON.parse(description));
     }
 
+    onPeerTimeline(event) {
+        const { currentTime, duration } = event.detail;
+        this.props.setTimeline(currentTime, duration);
+    }
+
     /**
      * On error
      *
@@ -184,11 +188,12 @@ export default connect(
         onUserAdd: event => dispatch(userAdd(event.detail)),
         onUserRemove: event => dispatch(userRemove(event.detail)),
         onUserReady: event => dispatch(userReady(event.detail)),
-        // onUserDistributor: 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)),
+        setTimeline: (currentTime, duration) => dispatch(setTimeline(currentTime, duration)),
     })
 )(Socket);
diff --git a/src/client/components/StreamButton.js b/src/client/components/StreamButton.js
index 9b1a09e..de323fb 100644
--- a/src/client/components/StreamButton.js
+++ b/src/client/components/StreamButton.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Button from '@client/components/Button';
-import { setStreaming } from '@client/store/player';
 
 class StreamButton extends Component {
     static propTypes = {
@@ -41,10 +40,7 @@ class StreamButton extends Component {
 
 export default connect(
     state => ({
-        streaming: state.player.streaming,
+        streaming: state.room.streaming === state.room.me,
     }),
-    /* dispatch => ({
-        toggleStream: streaming => dispatch(setStreaming(streaming)),
-    })*/
 )(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 (
             <div className="player-timeline">
@@ -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 {
                 <sup>
                     <span className={ready ? 'icon-check' : 'icon-cross'} />
                 </sup>
+                {streaming ? <sub><span className="icon-stream" /></sub> : null}
             </li>
         );
     }
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 571e613..732bb58 100644
--- a/src/client/components/video/Video.js
+++ b/src/client/components/video/Video.js
@@ -149,7 +149,6 @@ export default class Video extends Component {
     }
 
     onCanPlay() {
-        console.log('onCanPlay');
         if (!this.props.loaded) {
             this.props.setLoaded(true);
 
@@ -160,11 +159,11 @@ export default class Video extends Component {
     }
 
     onCanPlayThrough() {
-        console.log('onCanPlayThrough');
+        // console.log('onCanPlayThrough');
     }
 
-    onLoadedMetadata(event) {
-        console.log('onLoadedMetadata', event);
+    onLoadedMetadata() {
+        // console.log('onLoadedMetadata', event);
     }
 
     onDurationChange() {
diff --git a/src/client/container.js b/src/client/container.js
index ff04b92..e4d34b6 100644
--- a/src/client/container.js
+++ b/src/client/container.js
@@ -8,6 +8,7 @@ import Youtube from '@client/service/Youtube';
 import StoreWatcher from '@client/service/StoreWatcher';
 import Storage from '@client/service/Storage';
 import StorageListener from '@client/listener/StorageListener';
+import PeerListener from '@client/listener/PeerListener';
 import PeerManager from '@client/peer/PeerManager';
 
 const container = new Container();
@@ -20,13 +21,14 @@ const { hostname, port, protocol } = window.location;
 container.registerParameter('config:host', port ? `${hostname}:${parseInt(port, 10) + 1}` : `server.${hostname}`);
 container.registerParameter('config:protocol', protocol.replace('http', 'ws'));
 container.registerParameter('config:debug', process.env.NODE_ENV === 'development');
-container.registerParameter('config:ice-servers', [
+container.registerParameter('config:ice-servers', undefined);
+/* container.registerParameter('config:ice-servers', [
     {url:'stun:stun.l.google.com:19302'},
     {url:'stun:stun1.l.google.com:19302'},
     {url:'stun:stun2.l.google.com:19302'},
     {url:'stun:stun3.l.google.com:19302'},
     {url:'stun:stun4.l.google.com:19302'},
-]);
+]);*/
 
 // Redux store:
 container.registerCallback('store', createStore, ['config:debug']);
@@ -39,9 +41,10 @@ container.registerService('api', Api, ['config:host', 'config:protocol']);
 container.registerService('youtube', Youtube, ['config:host']);
 container.registerService('watcher', StoreWatcher, ['store']);
 container.registerService('storage', Storage);
-container.registerService('peer', PeerManager, ['api', 'store', 'config:ice-servers']);
+container.registerService('peer', PeerManager, ['api', 'config:ice-servers']);
 
 // Listeners
 container.registerService('listener:storage', StorageListener, ['store', 'storage', 'config:debug']);
+container.registerService('listener:peer', PeerListener, ['peer', 'config:debug']);
 
 export default container;
diff --git a/src/client/http/HeadRequest.js b/src/client/http/HeadRequest.js
index d0979b0..8190880 100644
--- a/src/client/http/HeadRequest.js
+++ b/src/client/http/HeadRequest.js
@@ -46,7 +46,7 @@ export default class HeadRequest {
    */
     onResponse() {
         const headers = this.headers.map(name => this.request.getResponseHeader(name));
-        // console.log(this.request.getAllResponseHeaders());
+
         return this.onSuccess(headers);
     }
 
diff --git a/src/client/index.js b/src/client/index.js
index 98a04fa..3b536fd 100644
--- a/src/client/index.js
+++ b/src/client/index.js
@@ -17,7 +17,10 @@ get('drop-handler').start();
 
 // Register listeners
 get('watcher')
-    .subscribeAll(['listener:storage'].map(get))
+    .subscribeAll([
+        'listener:storage',
+        'listener:peer',
+    ].map(get))
     .start();
 
 // Load options from storage
diff --git a/src/client/listener/PeerListener.js b/src/client/listener/PeerListener.js
new file mode 100644
index 0000000..9eede29
--- /dev/null
+++ b/src/client/listener/PeerListener.js
@@ -0,0 +1,34 @@
+export default class PeerListener {
+    constructor(peer, debug) {
+        this.peer = peer;
+        this.debug = debug;
+
+        this.props = null;
+    }
+
+    static getProps(state) {
+        const { me, users } = state.room;
+
+        return {
+            others: users.map(user => user.id).filter(id => id !== me),
+        };
+    }
+
+    load() {
+        this.peer.setOthers(this.props.others);
+    }
+
+    update(prevProps) {
+        const { others } = this.props;
+
+        if (others.length !== prevProps.others.length) {
+            this.peer.setOthers(others);
+        }
+    }
+
+    log(...args) {
+        if (this.debug) {
+            console.info(...args);
+        }
+    }
+}
diff --git a/src/client/peer/AbstractPeer.js b/src/client/peer/AbstractPeer.js
index e2bf2a7..3f0f060 100644
--- a/src/client/peer/AbstractPeer.js
+++ b/src/client/peer/AbstractPeer.js
@@ -26,7 +26,6 @@ export default class AbstractPeer extends EventEmitter {
     }
 
     loadRemoteDescription(data) {
-        console.log('loadRemoteDescription');
         const description = new RTCSessionDescription(data);
 
         this.connection.setRemoteDescription(description).catch(this.onError);
diff --git a/src/client/peer/Distributor.js b/src/client/peer/Distributor.js
index a2ddab1..8d486e1 100644
--- a/src/client/peer/Distributor.js
+++ b/src/client/peer/Distributor.js
@@ -1,8 +1,7 @@
 import AbstractPeer from '@client/peer/AbstractPeer';
-import DebugCanvas from '@client/debug/DebugCanvas';
 
 export default class Distributor extends AbstractPeer {
-    constructor(target, iceServers) {
+    constructor(target, iceServers = undefined) {
         super(iceServers);
 
         this.target = target;
diff --git a/src/client/peer/PeerManager.js b/src/client/peer/PeerManager.js
index 944dd45..d3dc675 100644
--- a/src/client/peer/PeerManager.js
+++ b/src/client/peer/PeerManager.js
@@ -4,16 +4,18 @@ import Spectator from '@client/peer/Spectator';
 import 'webrtc-adapter';
 
 export default class PeerManager extends EventEmitter {
-    constructor(api, store, iceServers) {
+    constructor(api, iceServers = undefined) {
         super();
 
         this.api = api;
-        this.store = store;
-        this.iceServers = undefined;// iceServers;
-        this.distributors = null;
+        this.iceServers = iceServers;
+        this.stream = null;
         this.spectator = null;
+        this.distributors = new Map();
+        this.others = [];
 
         this.createDistributor = this.createDistributor.bind(this);
+        this.removeDistributor = this.removeDistributor.bind(this);
         this.onOffer = this.onOffer.bind(this);
         this.onAnswer = this.onAnswer.bind(this);
         this.onIceCandidate = this.onIceCandidate.bind(this);
@@ -21,28 +23,54 @@ export default class PeerManager extends EventEmitter {
         this.onReady = this.onReady.bind(this);
     }
 
+    isStreaming() {
+        return this.stream !== null;
+    }
+
+    setOthers(others) {
+        this.others = others;
+
+        if (this.stream) {
+            this.others.forEach(target => {
+                if (!this.distributors.has(target)) {
+                    this.createDistributor(target);
+                }
+            });
+
+            this.distributors.forEach((distributor, target) => {
+                if (!this.others.includes(target)) {
+                    this.removeDistributor(distributor);
+                }
+            });
+        }
+    }
+
     distribute(stream) {
         this.ensureIsFree();
-        console.log('distribute', this.getOthers());
-        this.distributors = this.getOthers().map(this.createDistributor);
-        console.log(this.distributors);
-        this.distributors.forEach(distributor => distributor.setStream(stream));
-    }
 
-    getOthers() {
-        const { me, users } = this.store.getState().room;
+        this.stream = stream;
 
-        return users.map(user => user.id).filter(id => id !== me);
+        this.others.forEach(this.createDistributor);
     }
 
     createDistributor(target) {
         const distributor = new Distributor(target, this.iceServers);
 
+        this.distributors.set(target, distributor);
+
         distributor.addEventListener('offer', this.onOffer);
         distributor.addEventListener('icecandidate', this.onIceCandidate);
         distributor.addEventListener('ready', this.onReady);
 
-        return distributor;
+        distributor.setStream(this.stream);
+    }
+
+    removeDistributor(distributor) {
+        distributor.removeEventListener('offer', this.onOffer);
+        distributor.removeEventListener('icecandidate', this.onIceCandidate);
+        distributor.clear();
+
+        this.distributors.delete(distributor.target);
     }
 
     spectate(description) {
@@ -60,7 +88,7 @@ export default class PeerManager extends EventEmitter {
     }
 
     answer(sender, description) {
-        this.getDistributorById(sender).loadRemoteDescription(description);
+        this.distributors.get(sender).loadRemoteDescription(description);
     }
 
     addCandidate(sender, candidate) {
@@ -68,18 +96,17 @@ export default class PeerManager extends EventEmitter {
             return this.spectator.addCandidate(candidate);
         }
 
-        return this.getDistributorById(sender).addCandidate(candidate);
+        return this.distributors.get(sender).addCandidate(candidate);
     }
 
     onOffer(event) {
-        console.log('onOffer', event);
         const { description, target } = event.detail;
+
         this.api.offer(description, target);
     }
 
     onAnswer(event) {
-        console.log('onAnswer');
-        const { description, target } = event.detail;
+        const { description } = event.detail;
 
         this.api.answer(description);
     }
@@ -98,35 +125,27 @@ export default class PeerManager extends EventEmitter {
         this.emit('ready');
     }
 
-    getDistributorById(id) {
-        console.log('getDistributorById', id);
-        return this.distributors.find(distributor => distributor.target === id);
-    }
-
     ensureIsFree() {
-        if (this.distributors) {
+        if (this.stream !== null) {
             throw new Error('Already distributing.');
         }
 
-        if (this.spectator) {
+        if (this.spectator !== null) {
             throw new Error('Already spectating.');
         }
     }
 
     clear() {
-        if (this.spectator) {
+        if (this.spectator !== null) {
             this.spectator.removeEventListener('answer', this.onAnswer);
             this.spectator.removeEventListener('icecandidate', this.onIceCandidate);
             this.spectator.clear();
             this.spectator = null;
         }
 
-        this.distributors.forEach(distributor => {
-            distributor.removeEventListener('offer', this.onOffer);
-            distributor.removeEventListener('icecandidate', this.onIceCandidate);
-            distributor.clear();
-        });
+        this.distributors.forEach(this.removeDistributor);
+        this.distributors.clear();
 
-        this.distributors = null;
+        this.stream = null;
     }
 }
diff --git a/src/client/service/Api.js b/src/client/service/Api.js
index c83f023..901380b 100644
--- a/src/client/service/Api.js
+++ b/src/client/service/Api.js
@@ -59,23 +59,23 @@ export default class Api {
         this.client.send('user:ready', { id: 0, ready });
     }
 
+    setTimeline(currentTime, duration) {
+        this.client.send('peer:timeline', { currentTime, duration });
+    }
+
     loadVideo(source, name, url) {
         this.client.send(`video:${source}`, { url, name });
     }
 
     offer(description, target) {
-        console.log('offer', description, target);
         this.client.send('peer:offer', { target, description: JSON.stringify(description.toJSON()) });
     }
 
     answer(description) {
-        console.log('answer', description);
         this.client.send('peer:answer', { description: JSON.stringify(description.toJSON()) });
     }
 
     newIceCandidate(description, target) {
-        console.log('newIceCandidate', description, target);
-
         this.client.send('peer:candidate', { target, description: JSON.stringify(description.toJSON()) });
     }
 }
diff --git a/src/client/store/player.js b/src/client/store/player.js
index 833b3ef..b71b541 100644
--- a/src/client/store/player.js
+++ b/src/client/store/player.js
@@ -16,7 +16,7 @@ export const PLAYER_SEEK = 'PLAYER_SEEK';
 export const PLAYER_END = 'PLAYER_END';
 export const PLAYER_STOP = 'PLAYER_STOP';
 export const PLAYER_SHOWTIME = 'PLAYER_SHOWTIME';
-export const PLAYER_STREAM = 'PLAYER_STREAM';
+export const PLAYER_TIMELINE = 'PLAYER_TIMELINE';
 
 export function loadVideoFromFile(url, name, type) {
     return { type: PLAYER_LOAD_FROM_FILE, payload: { url, name, type, source: 'file' } };
@@ -82,8 +82,8 @@ export function setShowtime(active) {
     return { type: PLAYER_SHOWTIME, payload: { active } };
 }
 
-export function setStreaming(active) {
-    return { type: PLAYER_STREAM, payload: { active } };
+export function setTimeline(currentTime, duration) {
+    return { type: PLAYER_TIMELINE, payload: { currentTime, duration } };
 }
 
 const initialState = {
@@ -99,7 +99,7 @@ const initialState = {
     fromServer: false,
     time: 0,
     showtime: false,
-    streaming: false,
+    currentTime: 0,
 };
 
 const inititalSubtitleState = {
@@ -216,8 +216,12 @@ export default function player(state = initialState, action) {
         case PLAYER_SHOWTIME:
             return { ...state, showtime: payload.active };
 
-        case PLAYER_STREAM:
-            return { ...state, streaming: payload.active };
+        case PLAYER_TIMELINE:
+            return {
+                ...state,
+                currentTime: payload.currentTime,
+                duration: payload.duration,
+            };
 
         case ROOM_LEAVE:
             return initialState;
diff --git a/src/client/store/room.js b/src/client/store/room.js
index 5eaf695..b719c4a 100644
--- a/src/client/store/room.js
+++ b/src/client/store/room.js
@@ -4,6 +4,7 @@ export const ROOM_ME = 'ROOM_ME';
 export const ROOM_USER_ADD = 'ROOM_USER_ADD';
 export const ROOM_USER_REMOVE = 'ROOM_USER_REMOVE';
 export const ROOM_USER_READY = 'ROOM_USER_READY';
+export const ROOM_USER_STREAMING = 'ROOM_USER_STREAMING';
 export const ROOM_LEAVE = 'ROOM_LEAVE';
 
 // ACTIONS
@@ -32,6 +33,10 @@ export function userReady(payload) {
     return { type: ROOM_USER_READY, payload };
 }
 
+export function userStreaming(id = null) {
+    return { type: ROOM_USER_STREAMING, payload: { id } };
+}
+
 export function leave() {
     return { type: ROOM_LEAVE };
 }
@@ -41,6 +46,7 @@ export function leave() {
 const initialState = {
     connected: false,
     me: null,
+    streaming: null,
     users: [],
 };
 
@@ -104,6 +110,12 @@ export default function room(state = initialState, action) {
                 users: state.users.map(userState => user(userState, action)),
             };
 
+        case ROOM_USER_STREAMING:
+            return {
+                ...state,
+                streaming: payload.id,
+            };
+
         case ROOM_LEAVE:
             return initialState;
 
diff --git a/src/events/PeerTimelineCodec.js b/src/events/PeerTimelineCodec.js
new file mode 100644
index 0000000..91b9ebd
--- /dev/null
+++ b/src/events/PeerTimelineCodec.js
@@ -0,0 +1,37 @@
+import { Codec, Int32Codec } from 'netcode/src/encoder/codec';
+
+export default class PeerTimelineCodec extends Codec {
+    constructor() {
+        super();
+
+        this.int32Codec = new Int32Codec();
+    }
+
+    getByteLength() {
+        return this.int32Codec.getByteLength() * 2;
+    }
+
+    encode(buffer, offset, data) {
+        const { currentTime, duration } = data;
+
+        // Seconds to milliseconds
+        this.int32Codec.encode(buffer, offset, currentTime * 1000);
+
+        offset += this.int32Codec.getByteLength();
+
+        // Seconds to milliseconds
+        this.int32Codec.encode(buffer, offset, duration * 1000);
+    }
+
+    decode(buffer, offset) {
+        // Milliseconds to seconds
+        const currentTime = this.int32Codec.decode(buffer, offset) / 1000;
+
+        offset += this.int32Codec.getByteLength();
+
+        // Milliseconds to seconds
+        const duration = this.int32Codec.decode(buffer, offset) / 1000;
+
+        return { currentTime, duration };
+    }
+}
diff --git a/src/events/index.js b/src/events/index.js
index b40ca7f..69fc0d7 100644
--- a/src/events/index.js
+++ b/src/events/index.js
@@ -1,17 +1,18 @@
 import Codec from 'netcode/src/encoder/codec/Codec';
 import Int8Codec from 'netcode/src/encoder/codec/Int8Codec';
-import LongStringCodec from 'netcode/src/encoder/codec/LongStringCodec';
 import FileVideoCodec from '@events/FileVideoCodec';
 import UrlVideoCodec from '@events/UrlVideoCodec';
 import UserReadyCodec from '@events/UserReadyCodec';
 import SeekCodec from '@events/SeekCodec';
 import PeerCodec from '@events/PeerCodec';
+import PeerTimelineCodec from '@events/PeerTimelineCodec';
 
 export default [
     ['user:me', new Int8Codec()],
     ['user:add', new Int8Codec()],
     ['user:remove', new Int8Codec()],
     ['user:ready', new UserReadyCodec()],
+    ['user:streaming', new Int8Codec()],
     ['control:play', new SeekCodec()],
     ['control:pause', new SeekCodec()],
     ['control:seek', new SeekCodec()],
@@ -23,4 +24,5 @@ export default [
     ['peer:offer', new PeerCodec()],
     ['peer:answer', new PeerCodec()],
     ['peer:candidate', new PeerCodec()],
+    ['peer:timeline', new PeerTimelineCodec()],
 ];
diff --git a/src/server/room/Room.js b/src/server/room/Room.js
index 73efcc7..0c1a08f 100644
--- a/src/server/room/Room.js
+++ b/src/server/room/Room.js
@@ -30,6 +30,7 @@ export default class Room {
         this.onPeerOffer = this.onPeerOffer.bind(this);
         this.onPeerAnswer = this.onPeerAnswer.bind(this);
         this.onPeerCandidate = this.onPeerCandidate.bind(this);
+        this.onPeerTimeline = this.onPeerTimeline.bind(this);
     }
 
     addClient(client) {
@@ -48,6 +49,7 @@ export default class Room {
         client.on('peer:offer', this.onPeerOffer);
         client.on('peer:answer', this.onPeerAnswer);
         client.on('peer:candidate', this.onPeerCandidate);
+        client.on('peer:timeline', this.onPeerTimeline);
     }
 
     removeClient(client) {
@@ -66,14 +68,12 @@ export default class Room {
         client.off('peer:offer', this.onPeerOffer);
         client.off('peer:answer', this.onPeerAnswer);
         client.off('peer:candidate', this.onPeerCandidate);
+        client.off('peer:timeline', this.onPeerTimeline);
     }
 
     createUser(client) {
         const user = new User(client.id);
 
-        this.send('user:add', user.id);
-        this.sumUp(client, user);
-
         this.users.set(client, user);
 
         user.on('ready', this.onUserReady);
@@ -81,6 +81,33 @@ export default class Room {
         if (this.video) {
             this.video.pause();
         }
+
+        // Send me my id.
+        client.send('user:me', user.id);
+
+        this.users.forEach((otherUser, otherClient) => {
+            if (user !== otherUser) {
+                // Tell other user that I'm here.
+                otherClient.send('user:add', user.id);
+
+                // Send me other user state.
+                client.send('user:add', otherUser.id);
+                client.send('user:ready', otherUser);
+
+                if (otherClient === this.distributor) {
+                    // Send me current distributor
+                    client.send('user:streaming', otherUser.id);
+                    client.send('peer:timeline', this.video.getTimeLine());
+                }
+            }
+        });
+
+        if (this.video) {
+            const { source, url, name } = this.video;
+
+            client.send(`video:${source}`, { url, name });
+            client.send('control:seek', this.video.currentTime);
+        }
     }
 
     removeUser(client) {
@@ -88,7 +115,7 @@ export default class Room {
 
         this.users.delete(client);
 
-        this.send('user:remove', user.id);
+        this.sendToAll('user:remove', user.id);
 
         user.off('ready', this.onUserReady);
 
@@ -98,27 +125,12 @@ export default class Room {
 
         if (this.distributor === client) {
             this.distributor = null;
+            this.sendToAll('user:streaming', 0);
         }
 
         this.emptyResolver.schedule();
     }
 
-    sumUp(client, user) {
-        client.send('user:me', user.id);
-
-        this.users.forEach(user => {
-            client.send('user:add', user.id);
-            client.send('user:ready', user);
-        });
-
-        if (this.video) {
-            const { source, url, name } = this.video;
-
-            client.send(`video:${source}`, { url, name });
-            client.send('control:seek', this.video.currentTime);
-        }
-    }
-
     onClientReady(data, client) {
         this.users.get(client).setReady(data.ready);
     }
@@ -166,9 +178,14 @@ export default class Room {
     }
 
     onPeerOffer(data, client) {
+        const user = this.users.get(client);
+
         if (!this.distributor) {
-            console.log('set distributor', client.id);
             this.distributor = client;
+
+            this.sendToAll('user:streaming', user.id);
+
+            console.info('Client %d is distributor.', this.distributor.id);
         }
 
         if (this.distributor === client) {
@@ -179,7 +196,6 @@ export default class Room {
                 return;
             }
 
-            const user = this.users.get(client);
             const { description } = data;
 
             target.send('peer:offer', { description, sender: user.id });
@@ -192,6 +208,8 @@ export default class Room {
             const { description } = data;
 
             this.distributor.send('peer:answer', { description, sender: user.id });
+
+            client.send('peer:timeline', this.video.getTimeLine());
         }
     }
 
@@ -213,6 +231,18 @@ export default class Room {
         target.send('peer:candidate', { description, sender: user.id });
     }
 
+    onPeerTimeline(data, client) {
+        if (!this.video || !this.distributor || client !== this.distributor) {
+            return;
+        }
+
+        const { currentTime, duration } = data;
+
+        this.video.setTimeline(currentTime, duration);
+
+        this.sendToOthers(this.distributor, 'peer:timeline', data);
+    }
+
     unloadVideo() {
         if (this.video) {
             this.video.off('play', this.onVideoPlay);
@@ -232,7 +262,7 @@ export default class Room {
 
         const { source, url, name } = video;
 
-        this.sendToOther(client, `video:${source}`, { url, name });
+        this.sendToOthers(client, `video:${source}`, { url, name });
 
         this.video = video;
 
@@ -242,7 +272,7 @@ export default class Room {
     onUserReady(event) {
         const user = event.detail;
 
-        this.send('user:ready', user);
+        this.sendToAll('user:ready', user);
 
         if (!user.ready) {
             this.video.pause();
@@ -250,19 +280,19 @@ export default class Room {
     }
 
     onVideoPlay() {
-        this.send('control:play', this.video.time);
+        this.sendToAll('control:play', this.video.currentTime);
     }
 
     onVideoPause() {
-        this.send('control:pause', this.video.time);
+        this.sendToAll('control:pause', this.video.currentTime);
     }
 
     onVideoSeek() {
-        this.send('control:seek', this.video.time);
+        this.sendToAll('control:seek', this.video.currentTime);
     }
 
     onVideoStop() {
-        this.send('control:stop');
+        this.sendToAll('control:stop');
     }
 
     getClientFromUserId(id) {
@@ -279,7 +309,7 @@ export default class Room {
      * @param {String} name
      * @param {Object} data
      */
-    send(name, data = undefined) {
+    sendToAll(name, data = undefined) {
         this.users.forEach((user, client) => client.send(name, data));
     }
 
@@ -290,9 +320,9 @@ export default class Room {
      * @param {String} name
      * @param {Object} data
      */
-    sendToOther(target, name, data = undefined) {
+    sendToOthers(target, name, data = undefined) {
         this.users.forEach((user, client) => {
-            if (user !== target && target !== client) {
+            if (user !== target && client !== target) {
                 client.send(name, data);
             }
         });
diff --git a/src/server/room/Video.js b/src/server/room/Video.js
index 2e9e7e5..e8b764b 100644
--- a/src/server/room/Video.js
+++ b/src/server/room/Video.js
@@ -8,67 +8,78 @@ export default class Video extends EventEmitter {
         this.url = url;
         this.name = name;
         this.playedAt = null;
-        this.at = null;
-        this.currentTime = 0;
+        this.playedTime = 0;
+        this.timelineCurrentTime = 0;
+        this.timelineDuration = 0;
     }
 
     get playing() {
         return this.playedAt !== null;
     }
 
-    get time() {
+    get currentTime() {
         if (this.playing) {
-            return this.currentTime + (Date.now() - this.playedAt) / 1000;
+            return this.playedTime + (Date.now() - this.playedAt) / 1000;
         }
 
-        return this.currentTime;
+        return this.playedTime;
     }
 
-    play(time = this.time) {
+    play(time = this.currentTime, now = Date.now()) {
         if (!this.playing) {
-            this.playedAt = Date.now();
-            this.currentTime = time;
+            this.playedAt = now;
+            this.playedTime = time;
             this.emit('play', time);
             console.warn('Video playing:', time);
         }
     }
 
-    pause(time = this.time) {
+    pause(time = this.currentTime) {
         if (this.playing) {
             this.playedAt = null;
-            this.currentTime = time;
+            this.playedTime = time;
             this.emit('pause', time);
             console.warn('Video paused:', time);
         }
     }
 
     end() {
-        if (this.playing || this.currentTime > 0) {
+        if (this.playing || this.playedTime > 0) {
             this.playedAt = null;
-            this.currentTime = this.time;
+            this.playedTime = 0;
             this.emit('end');
             console.warn('Video ended.');
         }
     }
 
     stop() {
-        if (this.playing || this.currentTime > 0) {
+        if (this.playing || this.playedTime > 0) {
             this.playedAt = null;
-            this.currentTime = 0;
+            this.playedTime = 0;
             this.emit('stop');
             console.warn('Video stopped.');
         }
     }
 
-    seek(time) {
-        if (time !== this.currentTime) {
-            if (this.playing) {
-                this.playedAt = Date.now();
-            }
-
-            this.currentTime = time;
-            this.emit('seek', time);
-            console.warn('Video seeked:', time);
+    seek(time, now = Date.now()) {
+        if (this.playing) {
+            this.playedAt = now;
         }
+
+        this.playedTime = time;
+        this.emit('seek', time);
+        console.warn('Video seeked:', time);
+    }
+
+    setTimeline(currentTime, duration) {
+        this.timelineCurrentTime = currentTime;
+        this.timelineDuration = duration;
+    }
+
+    getTimeLine() {
+        return {
+            currentTime: this.timelineCurrentTime,
+            duration: this.timelineDuration,
+        };
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
index a41d219..527fdc1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const resolve = {
@@ -9,12 +10,12 @@ const resolve = {
   }
 };
 
-const clientConfig = {
+const clientConfig = env => ({
   target: 'web',
   entry: './src/client/index.js',
   output: {
     filename: 'client.js',
-    path: `${__dirname}/build`,
+    path: path.resolve(__dirname, env.root || '.', 'build'),
   },
   module: {
     rules: [
@@ -49,14 +50,14 @@ const clientConfig = {
   plugins: [
     new HtmlWebpackPlugin({ template: './index.html' })
   ]
-};
+});
 
-const serverConfig = {
+const serverConfig = env => ({
   target: 'node',
   entry: './src/server/index.js',
   output: {
     filename: 'server.js',
-    path: `${__dirname}/bin`,
+    path: path.resolve(__dirname, env.root || '.', 'bin'),
   },
   module: {
     rules: [
@@ -73,6 +74,6 @@ const serverConfig = {
     ]
   },
   resolve,
-};
+});
 
-module.exports = [ serverConfig, clientConfig ];
+module.exports = env => [ serverConfig(env), clientConfig(env) ];

From 0e1e7a560f9ea9eeac2dfdcc26796c4b8c1a0276 Mon Sep 17 00:00:00 2001
From: Thomas Jarrand <thomas.jarrand@gmail.com>
Date: Fri, 30 Apr 2021 01:03:31 +0200
Subject: [PATCH 6/6] Test with ice servers

---
 .eslintrc.json                        |  3 +-
 src/client/components/Controls.js     |  2 +-
 src/client/components/Player.js       |  1 +
 src/client/components/Socket.js       | 16 +++++++--
 src/client/components/StreamButton.js | 24 ++++---------
 src/client/components/video/Video.js  |  9 ++---
 src/client/container.js               |  9 +----
 src/client/peer/AbstractPeer.js       | 27 ++++++++++-----
 src/client/peer/Distributor.js        | 12 +++----
 src/client/peer/PeerManager.js        | 19 ++++++----
 src/client/peer/Spectator.js          | 11 ++++--
 src/client/service/Api.js             |  4 +++
 src/client/service/DropHandler.js     | 27 +++++++--------
 src/client/store/player.js            | 17 +++++++++
 src/events/index.js                   |  1 +
 src/server/room/Room.js               | 50 ++++++++++++++++++---------
 webpack.config.js                     |  6 +++-
 17 files changed, 147 insertions(+), 91 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 95f0666..f85ea66 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -27,7 +27,8 @@
         }
     },
     "globals": {
-        "YT": "readonly"
+        "YT": "readonly",
+        "ICE_SERVERS": "readonly"
     },
     "rules": {
         "indent": [
diff --git a/src/client/components/Controls.js b/src/client/components/Controls.js
index 218bd66..e95671a 100644
--- a/src/client/components/Controls.js
+++ b/src/client/components/Controls.js
@@ -117,7 +117,7 @@ class Controls extends Component {
             <div className="player-controls">
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-stop" />} onClick={onStop} />
-                    {streamable ? <StreamButton disabled={!loaded} toggleStream={toggleStream} /> : null}
+                    {streamable ? <StreamButton disabled={!loaded} onClick={toggleStream} /> : null}
                 </div>
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-backward" onClick={onBackward} />} />
diff --git a/src/client/components/Player.js b/src/client/components/Player.js
index ad62494..5b8d52e 100644
--- a/src/client/components/Player.js
+++ b/src/client/components/Player.js
@@ -146,6 +146,7 @@ class Player extends Component {
             this.api.setTimeline(this.video.currentTime, this.video.duration);
         } else {
             this.peer.clear();
+            this.api.stopStreaming();
         }
     }
 
diff --git a/src/client/components/Socket.js b/src/client/components/Socket.js
index da8a33b..7bf2c93 100644
--- a/src/client/components/Socket.js
+++ b/src/client/components/Socket.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { get } from '@client/container';
 import { socketOpen, socketClose, me, userAdd, userRemove, userReady, userStreaming } from '@client/store/room';
-import { play, pause, seek, stop, loadVideoFromServer, setTimeline } from '@client/store/player';
+import { play, pause, seek, stop, loadVideoFromServer, setTimeline, unloadStream } from '@client/store/player';
 
 class Socket extends Component {
     static propTypes = {
@@ -29,6 +29,7 @@ class Socket extends Component {
         onControlStop: PropTypes.func.isRequired,
         onVideo: PropTypes.func.isRequired,
         setTimeline: PropTypes.func.isRequired,
+        unloadStream: PropTypes.func.isRequired,
     };
 
     static defaultProps = {
@@ -49,6 +50,7 @@ class Socket extends Component {
         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() {
@@ -76,6 +78,7 @@ class Socket extends Component {
         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() {
@@ -101,6 +104,7 @@ class Socket extends Component {
         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();
@@ -137,8 +141,8 @@ class Socket extends Component {
     }
 
     onPeerOffer(event) {
-        const { description } = event.detail;
-        this.peer.spectate(JSON.parse(description));
+        const { description, sender } = event.detail;
+        this.peer.spectate(JSON.parse(description), sender);
         this.props.onVideo('peer');
     }
 
@@ -157,6 +161,11 @@ class Socket extends Component {
         this.props.setTimeline(currentTime, duration);
     }
 
+    onPeerStop() {
+        this.props.unloadStream();
+        this.peer.clear();
+    }
+
     /**
      * On error
      *
@@ -194,6 +203,7 @@ export default connect(
         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
index de323fb..0af6cb9 100644
--- a/src/client/components/StreamButton.js
+++ b/src/client/components/StreamButton.js
@@ -6,41 +6,29 @@ import Button from '@client/components/Button';
 class StreamButton extends Component {
     static propTypes = {
         disabled: PropTypes.bool,
-        streaming: PropTypes.bool.isRequired,
-        toggleStream: PropTypes.func.isRequired,
+        active: PropTypes.bool.isRequired,
+        onClick: PropTypes.func.isRequired,
     };
 
     static defaultProps = {
         disabled: false,
     };
 
-    constructor(props) {
-        super(props);
-
-        this.toggleStream = this.toggleStream.bind(this);
-    }
-
-    toggleStream() {
-        const { streaming, toggleStream } = this.props;
-
-        toggleStream(!streaming);
-    }
-
     render() {
-        const { streaming, disabled } = this.props;
+        const { active, disabled, onClick } = this.props;
 
         return <Button
             disabled={disabled}
             label={<span className="icon-stream" />}
-            className={streaming ? 'active' : ''}
-            onClick={this.toggleStream}
+            className={active ? 'active' : ''}
+            onClick={onClick}
         />;
     }
 }
 
 export default connect(
     state => ({
-        streaming: state.room.streaming === state.room.me,
+        active: state.room.streaming === state.room.me,
     }),
 )(StreamButton);
 
diff --git a/src/client/components/video/Video.js b/src/client/components/video/Video.js
index 732bb58..1762365 100644
--- a/src/client/components/video/Video.js
+++ b/src/client/components/video/Video.js
@@ -139,7 +139,9 @@ 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);
         }
     }
@@ -159,11 +161,10 @@ export default class Video extends Component {
     }
 
     onCanPlayThrough() {
-        // console.log('onCanPlayThrough');
+        this.props.setLoaded(true);
     }
 
     onLoadedMetadata() {
-        // console.log('onLoadedMetadata', event);
     }
 
     onDurationChange() {
@@ -182,7 +183,7 @@ export default class Video extends Component {
         console.error(error);
     }
 
-    render(){
+    render() {
         const { src, preload, autoplay } = this.props;
 
         return (
diff --git a/src/client/container.js b/src/client/container.js
index e4d34b6..423d53e 100644
--- a/src/client/container.js
+++ b/src/client/container.js
@@ -21,14 +21,7 @@ const { hostname, port, protocol } = window.location;
 container.registerParameter('config:host', port ? `${hostname}:${parseInt(port, 10) + 1}` : `server.${hostname}`);
 container.registerParameter('config:protocol', protocol.replace('http', 'ws'));
 container.registerParameter('config:debug', process.env.NODE_ENV === 'development');
-container.registerParameter('config:ice-servers', undefined);
-/* container.registerParameter('config:ice-servers', [
-    {url:'stun:stun.l.google.com:19302'},
-    {url:'stun:stun1.l.google.com:19302'},
-    {url:'stun:stun2.l.google.com:19302'},
-    {url:'stun:stun3.l.google.com:19302'},
-    {url:'stun:stun4.l.google.com:19302'},
-]);*/
+container.registerParameter('config:ice-servers', ICE_SERVERS);
 
 // Redux store:
 container.registerCallback('store', createStore, ['config:debug']);
diff --git a/src/client/peer/AbstractPeer.js b/src/client/peer/AbstractPeer.js
index 3f0f060..7b3e315 100644
--- a/src/client/peer/AbstractPeer.js
+++ b/src/client/peer/AbstractPeer.js
@@ -7,10 +7,12 @@ export default class AbstractPeer extends EventEmitter {
         this.connection = new RTCPeerConnection({ iceServers });
 
         this.loadLocalDescription = this.loadLocalDescription.bind(this);
+        this.onStateChange = this.onStateChange.bind(this);
         this.onIceCandidate = this.onIceCandidate.bind(this);
         this.onIceStateChange = this.onIceStateChange.bind(this);
         this.onError = this.onError.bind(this);
 
+        this.connection.addEventListener('connectionstatechange', this.onStateChange);
         this.connection.addEventListener('icecandidate', this.onIceCandidate);
         this.connection.addEventListener('iceconnectionstatechange', this.onIceStateChange);
     }
@@ -31,6 +33,18 @@ export default class AbstractPeer extends EventEmitter {
         this.connection.setRemoteDescription(description).catch(this.onError);
     }
 
+    onStateChange() {
+        const { connectionState } = this.connection;
+
+        console.info('Peer connection status: ', connectionState);
+
+        switch(connectionState) {
+            case 'connected':
+                this.emit('ready');
+                break;
+        }
+    }
+
     onIceCandidate(event) {
         if (event.candidate) {
             this.emit('icecandidate', {
@@ -43,14 +57,7 @@ export default class AbstractPeer extends EventEmitter {
     onIceStateChange() {
         const { iceConnectionState } = this.connection;
 
-        switch (iceConnectionState) {
-            case 'connected':
-                this.emit('ready');
-                break;
-
-            default:
-                console.info('ICE connection status: ', iceConnectionState);
-        }
+        console.info('ICE connection status: ', iceConnectionState);
     }
 
     onError(error) {
@@ -59,5 +66,9 @@ export default class AbstractPeer extends EventEmitter {
 
     clear() {
         this.connection.close();
+
+        this.connection.removeEventListener('connectionstatechange', this.onStateChange);
+        this.connection.removeEventListener('icecandidate', this.onIceCandidate);
+        this.connection.removeEventListener('iceconnectionstatechange', this.onIceStateChange);
     }
 }
diff --git a/src/client/peer/Distributor.js b/src/client/peer/Distributor.js
index 8d486e1..b5266a8 100644
--- a/src/client/peer/Distributor.js
+++ b/src/client/peer/Distributor.js
@@ -6,13 +6,14 @@ export default class Distributor extends AbstractPeer {
 
         this.target = target;
         this.stream = null;
+        this.tracks = [];
 
         this.onLocalDescriptionLoaded = this.onLocalDescriptionLoaded.bind(this);
     }
 
     setStream(stream) {
         this.stream = stream;
-        this.stream.getTracks().forEach(track => this.connection.addTrack(track, this.stream));
+        this.tracks = this.stream.getTracks().map(track => this.connection.addTrack(track, this.stream));
 
         this.connection.createOffer({ offerToReceiveAudio: 1, offerToReceiveVideo: 1 })
             .then(this.loadLocalDescription)
@@ -29,14 +30,11 @@ export default class Distributor extends AbstractPeer {
 
     clear() {
         if (this.stream) {
-            this.stream.getTracks().forEach(track => {
-                this.connection.removeTrack(track, this.stream);
-                track.stop();
-            });
-
+            this.tracks.forEach(sender => this.connection.removeTrack(sender));
+            this.tracks.length = 0;
             this.stream = null;
         }
 
-        super.close();
+        super.clear();
     }
 }
diff --git a/src/client/peer/PeerManager.js b/src/client/peer/PeerManager.js
index d3dc675..9c841b2 100644
--- a/src/client/peer/PeerManager.js
+++ b/src/client/peer/PeerManager.js
@@ -33,7 +33,7 @@ export default class PeerManager extends EventEmitter {
         if (this.stream) {
             this.others.forEach(target => {
                 if (!this.distributors.has(target)) {
-                    this.createDistributor(target);
+                    setTimeout(() => this.createDistributor(target), 500);
                 }
             });
 
@@ -68,15 +68,16 @@ export default class PeerManager extends EventEmitter {
     removeDistributor(distributor) {
         distributor.removeEventListener('offer', this.onOffer);
         distributor.removeEventListener('icecandidate', this.onIceCandidate);
+        distributor.removeEventListener('ready', this.onReady);
         distributor.clear();
 
         this.distributors.delete(distributor.target);
     }
 
-    spectate(description) {
+    spectate(description, sender) {
         this.ensureIsFree();
 
-        this.spectator = new Spectator(this.iceServers);
+        this.spectator = new Spectator(sender, this.iceServers);
 
         this.spectator.addEventListener('answer', this.onAnswer);
         this.spectator.addEventListener('icecandidate', this.onIceCandidate);
@@ -139,13 +140,19 @@ export default class PeerManager extends EventEmitter {
         if (this.spectator !== null) {
             this.spectator.removeEventListener('answer', this.onAnswer);
             this.spectator.removeEventListener('icecandidate', this.onIceCandidate);
+            this.spectator.removeEventListener('stream', this.onStream);
+            this.spectator.removeEventListener('ready', this.onReady);
             this.spectator.clear();
             this.spectator = null;
         }
 
-        this.distributors.forEach(this.removeDistributor);
-        this.distributors.clear();
+        if (this.stream) {
+            this.distributors.forEach(this.removeDistributor);
+            this.distributors.clear();
 
-        this.stream = null;
+            this.stream.getTracks().forEach(track => track.stop());
+
+            this.stream = null;
+        }
     }
 }
diff --git a/src/client/peer/Spectator.js b/src/client/peer/Spectator.js
index a1ebb3d..fb71b8e 100644
--- a/src/client/peer/Spectator.js
+++ b/src/client/peer/Spectator.js
@@ -1,12 +1,14 @@
 import AbstractPeer from '@client/peer/AbstractPeer';
 
 export default class Spectator extends AbstractPeer {
-    constructor(iceServers) {
+    constructor(target, iceServers) {
         super(iceServers);
 
+        this.target = target;
         this.stream = null;
 
         this.onTrack = this.onTrack.bind(this);
+        this.onRemoveTrack = this.onRemoveTrack.bind(this);
         this.onLocalDescriptionLoaded = this.onLocalDescriptionLoaded.bind(this);
 
         this.connection.addEventListener('track', this.onTrack);
@@ -26,16 +28,21 @@ export default class Spectator extends AbstractPeer {
     onTrack(event) {
         if (!this.stream) {
             this.stream = event.streams[0];
+            this.stream.addEventListener('removetrack', this.onRemoveTrack);
             this.emit('stream');
         }
     }
 
+    onRemoveTrack() {
+    }
+
     clear() {
         if (this.stream) {
             this.stream.getTracks().forEach(track => track.stop());
+            this.stream.removeEventListener('removetrack', this.onRemoveTrack);
             this.stream = null;
         }
 
-        super.close();
+        super.clear();
     }
 }
diff --git a/src/client/service/Api.js b/src/client/service/Api.js
index 901380b..49ec205 100644
--- a/src/client/service/Api.js
+++ b/src/client/service/Api.js
@@ -78,4 +78,8 @@ export default class Api {
     newIceCandidate(description, target) {
         this.client.send('peer:candidate', { target, description: JSON.stringify(description.toJSON()) });
     }
+
+    stopStreaming() {
+        this.client.send('peer:stop');
+    }
 }
diff --git a/src/client/service/DropHandler.js b/src/client/service/DropHandler.js
index a19335d..c88cbbf 100644
--- a/src/client/service/DropHandler.js
+++ b/src/client/service/DropHandler.js
@@ -69,21 +69,17 @@ export default class DropHandler {
             case 'video/webm':
             case 'video/mp4':
             case 'video/quicktime':
+            case 'video/x-matroska':
                 this.handleVideo(file);
-                break;
+                return;
 
             case 'text/vtt':
                 this.handleSubtitle(file);
-                break;
+                return;
 
             case 'text/srt':
                 this.handleSrtSubtitle(file);
-                break;
-
-            default:
-                if (type) {
-                    console.info(`File type "${type}" not supported.`);
-                }
+                return;
         }
 
         const extension = this.getExtention(name);
@@ -91,25 +87,26 @@ export default class DropHandler {
         switch (extension) {
             case 'srt':
                 this.handleSrtSubtitle(file);
-                break;
+                return;
 
             case 'vtt':
                 this.handleSubtitle(file);
-                break;
+                return;
 
             case 'mkv':
+            case 'mp4':
+            case 'avi':
                 this.handleVideo(file);
-                break;
-
-            default:
-                console.info(`File extension "${extension}" not supported.`);
+                return;
         }
+
+        console.info(`File type "${type}" with extension "${extension}" not supported.`);
     }
 
     handleVideo(file) {
         const { player } = this.store.getState();
         const isFileFromServer = player.source === 'file' && player.fromServer;
-        const action = isFileFromServer ? completeVideoFromFile : loadVideoFromFile;
+        const action = isFileFromServer && file.name === player.name ? completeVideoFromFile : loadVideoFromFile;
 
         this.store.dispatch(
             action(URL.createObjectURL(file), file.name, file.size, file.type)
diff --git a/src/client/store/player.js b/src/client/store/player.js
index b71b541..09449da 100644
--- a/src/client/store/player.js
+++ b/src/client/store/player.js
@@ -17,6 +17,7 @@ export const PLAYER_END = 'PLAYER_END';
 export const PLAYER_STOP = 'PLAYER_STOP';
 export const PLAYER_SHOWTIME = 'PLAYER_SHOWTIME';
 export const PLAYER_TIMELINE = 'PLAYER_TIMELINE';
+export const PLAYER_UNLOAD_STREAM = 'PLAYER_UNLOAD_STREAM';
 
 export function loadVideoFromFile(url, name, type) {
     return { type: PLAYER_LOAD_FROM_FILE, payload: { url, name, type, source: 'file' } };
@@ -34,6 +35,10 @@ export function loadVideoFromServer(source, name, url = null) {
     return { type: PLAYER_LOAD_FROM_SERVER, payload: { source, name, url } };
 }
 
+export function unloadStream() {
+    return { type: PLAYER_UNLOAD_STREAM };
+}
+
 export function completeVideoFromFile(url, name, type = null) {
     return { type: PLAYER_COMPLETE_FROM_FILE, payload: { url, name, type } };
 }
@@ -173,6 +178,8 @@ export default function player(state = initialState, action) {
                 name: payload.name || state.name,
                 source: payload.source,
                 fromServer: true,
+                playing: false,
+                time: 0,
             };
 
         case PLAYER_COMPLETE_FROM_FILE:
@@ -183,6 +190,16 @@ export default function player(state = initialState, action) {
                 type: payload.type,
             };
 
+        case PLAYER_UNLOAD_STREAM:
+            return {
+                ...state,
+                url: null,
+                source: 'file',
+                fromServer: true,
+                playing: false,
+                time: 0,
+            };
+
         case PLAYER_SET_DURATION:
             return { ...state, duration: payload.duration };
 
diff --git a/src/events/index.js b/src/events/index.js
index 69fc0d7..8a3d375 100644
--- a/src/events/index.js
+++ b/src/events/index.js
@@ -25,4 +25,5 @@ export default [
     ['peer:answer', new PeerCodec()],
     ['peer:candidate', new PeerCodec()],
     ['peer:timeline', new PeerTimelineCodec()],
+    ['peer:stop', new Codec()],
 ];
diff --git a/src/server/room/Room.js b/src/server/room/Room.js
index 0c1a08f..0eb0618 100644
--- a/src/server/room/Room.js
+++ b/src/server/room/Room.js
@@ -31,6 +31,7 @@ export default class Room {
         this.onPeerAnswer = this.onPeerAnswer.bind(this);
         this.onPeerCandidate = this.onPeerCandidate.bind(this);
         this.onPeerTimeline = this.onPeerTimeline.bind(this);
+        this.onPeerStop = this.onPeerStop.bind(this);
     }
 
     addClient(client) {
@@ -50,6 +51,7 @@ export default class Room {
         client.on('peer:answer', this.onPeerAnswer);
         client.on('peer:candidate', this.onPeerCandidate);
         client.on('peer:timeline', this.onPeerTimeline);
+        client.on('peer:stop', this.onPeerStop);
     }
 
     removeClient(client) {
@@ -69,26 +71,32 @@ export default class Room {
         client.off('peer:answer', this.onPeerAnswer);
         client.off('peer:candidate', this.onPeerCandidate);
         client.off('peer:timeline', this.onPeerTimeline);
+        client.off('peer:stop', this.onPeerStop);
     }
 
     createUser(client) {
+        if (this.video) {
+            this.video.pause();
+        }
+
         const user = new User(client.id);
 
         this.users.set(client, user);
 
         user.on('ready', this.onUserReady);
 
-        if (this.video) {
-            this.video.pause();
-        }
-
         // Send me my id.
         client.send('user:me', user.id);
 
+        if (this.video) {
+            const { source, url, name } = this.video;
+
+            client.send(`video:${source}`, { url, name });
+            client.send('control:seek', this.video.currentTime);
+        }
+
         this.users.forEach((otherUser, otherClient) => {
             if (user !== otherUser) {
-                // Tell other user that I'm here.
-                otherClient.send('user:add', user.id);
 
                 // Send me other user state.
                 client.send('user:add', otherUser.id);
@@ -99,15 +107,11 @@ export default class Room {
                     client.send('user:streaming', otherUser.id);
                     client.send('peer:timeline', this.video.getTimeLine());
                 }
+
+                // Tell other user that I'm here.
+                otherClient.send('user:add', user.id);
             }
         });
-
-        if (this.video) {
-            const { source, url, name } = this.video;
-
-            client.send(`video:${source}`, { url, name });
-            client.send('control:seek', this.video.currentTime);
-        }
     }
 
     removeUser(client) {
@@ -124,8 +128,7 @@ export default class Room {
         }
 
         if (this.distributor === client) {
-            this.distributor = null;
-            this.sendToAll('user:streaming', 0);
+            this.onPeerStop(null, client);
         }
 
         this.emptyResolver.schedule();
@@ -243,6 +246,19 @@ export default class Room {
         this.sendToOthers(this.distributor, 'peer:timeline', data);
     }
 
+    onPeerStop(data, client) {
+        if (this.distributor === client) {
+            this.distributor = null;
+            this.video.setTimeline(0, 0);
+
+            this.sendToAll('user:streaming', 0);
+            this.sendToAll('peer:timeline', this.video.getTimeLine());
+            this.sendToOthers(client, 'peer:stop');
+
+            console.info('Streaming stoped.');
+        }
+    }
+
     unloadVideo() {
         if (this.video) {
             this.video.off('play', this.onVideoPlay);
@@ -260,12 +276,12 @@ export default class Room {
         video.on('seek', this.onVideoSeek);
         video.on('stop', this.onVideoStop);
 
+        this.video = video;
+
         const { source, url, name } = video;
 
         this.sendToOthers(client, `video:${source}`, { url, name });
 
-        this.video = video;
-
         console.info('Loaded video:', source, url, name);
     }
 
diff --git a/webpack.config.js b/webpack.config.js
index 527fdc1..e9ca9f6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const { DefinePlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const resolve = {
@@ -48,7 +49,10 @@ const clientConfig = env => ({
   },
   resolve,
   plugins: [
-    new HtmlWebpackPlugin({ template: './index.html' })
+    new HtmlWebpackPlugin({ template: './index.html' }),
+    new DefinePlugin({
+      ICE_SERVERS: env.iceServers || '{}',
+    }),
   ]
 });