version 0.1.1

client/data/window/index.css

@@ -58,15 +58,21 @@ body[data-mode="login"] #meeting {
 }
 body[data-count="1"] #meeting {
   grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+}
+body[data-count="2"] #meeting {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, 1fr);
 }
-body[data-count="2"] #meeting,
 body[data-count="3"] #meeting,
 body[data-count="4"] #meeting {
   grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
 }
 @media screen and (max-width: 600px) {
   body[data-count="2"] #meeting {
     grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(2, 1fr);
   }
   body[data-count="3"] video-view:first-child {
     grid-column-end: 3;
@@ -76,11 +82,13 @@ body[data-count="4"] #meeting {
 body[data-count="5"] #meeting,
 body[data-count="6"] #meeting {
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
 }
 @media screen and (max-width: 600px) {
   body[data-count="5"] #meeting,
   body[data-count="6"] #meeting {
     grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
   }
 }
 

client/data/window/index.js

@@ -4,6 +4,7 @@
 
 const args = new URLSearchParams(location.search);
 
+let meeting;
 // auto-fill
 if (args.has('channel-id')) {
   document.querySelector('#join [name=channel-id]').value = args.get('channel-id');
@@ -14,7 +15,7 @@ chrome.storage.local.get({
   'signaling-server': '',
   'signaling-token': ''
 }, prefs => {
-  const meeting = new Meeting(prefs['signaling-server'], prefs['signaling-token']);
+  meeting = new Meeting(prefs['signaling-server'], prefs['signaling-token']);
 
   document.getElementById('join').addEventListener('submit', async e => {
     e.preventDefault();
@@ -26,14 +27,18 @@ chrome.storage.local.get({
     const password = e.target.querySelector('input[type=password]').value;
     await meeting.password(password);
 
-    meeting.join(cid).then(() => {
+    meeting.join(cid, { // extra info
+      nickname: Math.random()
+    }).then(() => {
       document.title = 'Joined on channel #' + cid;
       history.pushState({}, '', '?channel-id=' + cid);
-      navigator.mediaDevices.getUserMedia(configuration.media).then(stream => {
+      return navigator.mediaDevices.getUserMedia(configuration.media).then(stream => {
         document.body.dataset.mode = 'joined';
         const me = document.getElementById('me');
         me.onloadedmetadata = () => me.play();
         me.srcObject = stream;
+      }).catch(e => {
+        throw Error('Cannot access to the user media: ' + e.message);
       });
     }).catch(e => {
       document.title = 'Meeting';

client/data/window/meeting/meeting.js

@@ -38,15 +38,17 @@ class Meeting {
     socket.onMessage.addListener(msg => {
       if (msg.method === 'whoami') {
         this.client(msg.sender).then(peer => {
+          peer.extra = msg.extra;
           this[INCLUDE](msg.sender, peer);
-
           socket.send({
-            method: 'whoami-reply'
+            method: 'whoami-reply',
+            extra: this.exta
           }, msg.sender);
         });
       }
       else if (msg.method === 'whoami-reply') {
         this.server(msg.sender).then(peer => {
+          peer.extra = msg.extra;
           this[INCLUDE](msg.sender, peer);
           peer.offer();
         });
@@ -181,9 +183,11 @@ class Meeting {
     });
   }
 
-  join(cid) {
+  join(cid, extra = {}) {
+    this.exta = extra;
     return this.socket.create(cid).then(() => this.socket.send({
-      method: 'whoami'
+      method: 'whoami',
+      extra
     }));
   }
 

client/data/window/meeting/peer.js

@@ -25,8 +25,16 @@ class Socket {
     return new Promise((resolve, reject) => {
       const socket = this.socket = new WebSocket(this.server.replace('[CHANNEL_ID]', cid));
       socket.onopen = () => {
-        resolve();
-        this.onConnectionStateChanged.emit('socket', 'ready');
+        setTimeout(() => {
+          if (socket.readyState === 1) {
+            resolve();
+            this.onConnectionStateChanged.emit('socket', 'ready');
+          }
+          else {
+            reject(Error('connection closed'));
+            this.onConnectionStateChanged.emit('socket', 'closed');
+          }
+        }, 500);
       };
       socket.onclose = () => {
         reject(Error('connection closed'));
@@ -43,8 +51,19 @@ class Socket {
           else {
             this.onMessage.emit(msg);
           }
-        }).catch(e => {
-          console.warn('cannot decrypt the encrypted message');
+        }).catch(() => {
+          try {
+            const j = JSON.parse(e.data);
+            if (j.error) {
+              alert(j.error);
+            }
+            else {
+              throw Error('message is not encrypted');
+            }
+          }
+          catch (e) {
+            console.warn('cannot decrypt the encrypted message');
+          }
         });
       };
     });

client/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "name": "Meeting",
   "description": "a secure peer-to-peer video and audio conference using WebRTC",
   "permissions": [