janusweb 1.5.51 → 1.5.52

package/css/janusweb.css

@@ -309,3 +309,10 @@ fireboxroom room,
 fireboxroom assets {
   display: none;
 }
+janus-ui-main ui-panel {
+  opacity: 1;
+}
+janus-ui-main.fadeout ui-panel {
+  opacity: 0;
+  transition: opacity 2s ease-out;
+}

package/media/assets/webui/apps/avatar/avatar.js

@@ -67,7 +67,7 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
             <ui-list name="avatar" selectable="1" collection="avatarlist" itemcomponent="janus-avatar-picker-item"></ui-list>
           </ui-tab>
           <ui-tab label="Ready Player Me">
-            <iframe data-src="https://demo.readyplayer.me/avatar" allow="camera"></iframe>
+            <iframe data-src="https://demo.readyplayer.me/avatar?frameApi" allow="camera"></iframe>
           </ui-tab>
         </ui-tabs>
       `;
@@ -226,20 +226,54 @@ this.appendChild(this.previewwindow);
   }
   handleWindowMessage(ev) {
     if (ev.origin.match(/https:\/\/.*\.readyplayer\.me/)) {
-      let avatarurl = ev.data;
-      let avatarstr = `
-<FireBoxRoom>
-  <assets>
-    <assetobject id="body" src="${avatarurl}" />
-    <assetobject id="avatar_animations" src="https://assets.metacade.com/james/readyplayerme/animations.glb" />
-  </assets>
-  <room>
-    <ghost body_id="body" bone_head="Head" morphtarget_mouth="mouthOpen" morphtarget_eyes="eyesClosed" />
-  </room>
-</FireBoxRoom>
-`;
-      player.setAvatar(avatarstr);
-      this.handleAvatarSelect({data: { url: 'data:text/plain,' + avatarstr } });
+      if (ev.data.indexOf('https:') == 0) {
+        // raw URL
+        let avatarurl = ev.data;
+        let avatarstr = `
+  <FireBoxRoom>
+    <assets>
+      <assetobject id="body" src="${avatarurl}" />
+      <assetobject id="avatar_animations" src="https://assets.metacade.com/james/readyplayerme/animations.glb" />
+    </assets>
+    <room>
+      <ghost body_id="body" bone_head="Head" morphtarget_mouth="mouthOpen" morphtarget_eyes="eyesClosed" />
+    </room>
+  </FireBoxRoom>
+  `;
+        player.setAvatar(avatarstr);
+        this.handleAvatarSelect({data: { url: 'data:text/plain,' + avatarstr } });
+      } else if (ev.data[0] == '{') {
+        // frame API
+        let apimsg = JSON.parse(ev.data);
+        let frame = this.querySelector('iframe'); // FIXME - hacky
+        if (apimsg.eventName == 'v1.frame.ready' && frame && frame.contentWindow) {
+           frame.contentWindow.postMessage(JSON.stringify({
+              target: 'readyplayerme',
+              type: 'subscribe',
+              eventName: 'v2.**'
+            }), '*');
+        } else if (apimsg.eventName == 'v2.avatar.exported') {
+          let avatarurl = apimsg.data.url;
+          let animurl = 'https://assets.metacade.com/james/readyplayerme/animations.glb';
+          if (apimsg.data.metadata.gender == 'female') {
+            animurl = 'https://assets.metacade.com/james/readyplayerme/animations-rpm-female.glb';
+          }
+          // TODO - select avatar pack based on metadata.gender
+          let avatarstr = `
+    <FireBoxRoom>
+      <assets>
+        <assetobject id="body" src="${avatarurl}" />
+        <assetobject id="avatar_animations" src="${animurl}" />
+      </assets>
+      <room>
+        <ghost body_id="body" bone_head="Head" morphtarget_mouth="mouthOpen" morphtarget_eyes="eyesClosed" />
+      </room>
+    </FireBoxRoom>
+    `;
+          player.setAvatar(avatarstr);
+          this.handleAvatarSelect({data: { url: 'data:text/plain,' + avatarstr } });
+        }
+      }
     }
   }
 });

package/media/assets/webui/apps/comms/comms.js

@@ -30,6 +30,7 @@ elation.elements.define('janus-comms-status', class extends elation.elements.bas
   }
   create() {
     this.player = player;
+    this.userid = player.getNetworkUsername();
     if (typeof room != 'undefined') {
       this.room = room;
     }
@@ -100,6 +101,7 @@ elation.elements.define('janus-comms-userlist', class extends elation.elements.u
     this.usermarkers = {};
 
     elation.events.add(this.janusweb, 'room_load_start', (ev) => { this.updateRoom(ev.data || ev.element); });
+    elation.events.add(this.janusweb, 'room_change', (ev) => { let newroom = this.janusweb.rooms[this.janusweb.getRoomId(ev.data)]; if (newroom) this.updateRoom(newroom); });
     elation.events.add(this.janusweb.network, 'janusweb_user_joined,janusweb_user_left,janusweb_user_disconnected', (ev) => this.updateUsers());
     setTimeout(() => {
       //this.updateUsers();
@@ -132,10 +134,16 @@ elation.elements.define('janus-comms-userlist', class extends elation.elements.u
       this.elements.userlist_details.open = true;
     }
     this.updateUsers();
+    elation.events.add(this.room, 'join', ev => {
+      setTimeout(() => {
+        this.updateUsers();
+      }, 1000);
+    });
+    elation.events.add(this.room, 'room_active', ev => { this.updateUsers(); });
   }
   updateUsers() {
     if (!janus.network) return;
-    var remoteplayers = janus.network.remoteplayers;
+    var remoteplayers = this.room.players;
     var users = Object.keys(remoteplayers);
     //users.unshift(player.userid);
 
@@ -213,6 +221,9 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
     // FIXME - first element with the current design is a <detail> element, but this is fragile if that changes
     this.elements[0].addEventListener('toggle', (ev) => this.elements.chatinput.focus());
     this.updateRoom(room);
+    if (window.innerWidth < 760) {
+      this.elements.toggle.open = false;
+    }
   }
   scrollToBottom() {
     setTimeout(() => {

package/media/assets/webui/apps/comms/external/naf-shim.js

@@ -150,7 +150,7 @@ console.log('occupants received', Object.keys(occupantList), Object.keys(this.co
           'credential': 'turn',
           'realm': 'turn',
           'urls': [
-            'turns:stream.janusxr.org:3478',
+            'turns:voip.janusxr.org:3478',
           ]
         },
       ]
@@ -166,6 +166,11 @@ console.log('occupants received', Object.keys(occupantList), Object.keys(this.co
     }
   }
   setRoom(roomId) {
-    this.adapter.setRoom(roomId);
+    this.connectedClients = {};
+    //this.adapter.disconnect();
+    if (roomId != this.adapter.room) {
+      this.adapter.setRoom(roomId);
+      this.adapter.reconnect();
+    }
   }
 }

package/media/assets/webui/apps/comms/status.html

@@ -10,10 +10,10 @@
     <span class="statuslabel">Disconnecting...</span>
   {/eq}
   {@eq key=state value="connecting"}
-    <span class="statuslabel">Connecting</span> <!-- to <strong name="serverlabel">{server._host}</strong>--> as <strong name="useridlabel">{player.userid}</strong>
+    <span class="statuslabel">Connecting</span> <!-- to <strong name="serverlabel">{server._host}</strong>--> as <strong name="useridlabel">{userid}</strong>
   {/eq}
   {@eq key=state value="connected"}
-    <span class="statuslabel">Connected</span> <!-- to <strong name="serverlabel">{server._host}</strong>--> as <strong name="useridlabel">{player.userid}</strong>
+    <span class="statuslabel">Connected</span> <!-- to <strong name="serverlabel">{server._host}</strong>--> as <strong name="useridlabel">{userid}</strong>
   {/eq}
 
 </span>

package/media/assets/webui/apps/comms/voip.css

@@ -1,5 +1,4 @@
 janus-voip-client {
-  border: 1px solid black;
   position: relative;
   max-width: 75vh;
   flex-wrap: wrap;
@@ -11,29 +10,55 @@ janus-voip-client-janus {
 janus-voip-localuser {
   display: block;
   bottom: 0px;
-  border: 2px solid black;
   padding: 0px;
-  box-shadow: 0 0 5px black;
   z-index: 10;
 }
+janus-voip-localuser:empty {
+  border: none;
+  box-shadow: none;
+}
 janus-voip-localuser video {
   max-width: 128px;
   height: 128px;
   display: block;
   margin: 1px 0 0 1px;
+  border: 1px solid #aaa;
+  border-radius: 50%;
+  box-shadow: 0 0 2px 2px white;
 }
 janus-voip-remoteuser {
   xdisplay: inline-block;
-  border: 2px solid black;
   position: relative;
   font-family: monospace;
   transition: transform 250ms ease;
   transform: scale(0, 0);
   min-width: 5em;
+  min-width: 32px;
+  min-height: 32px;
+  text-align: center;
+}
+janus-voip-remoteuser audio {
+  display: inline-block;
 }
 janus-voip-remoteuser video {
-  display: none;
-  max-width: 128px;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #aaa;
+  border-radius: 50%;
+  box-shadow: 0 0 2px 2px white;
+  display: inline-block;
+  background: url(images/mic-disabled.png);
+  background-size: contain;
+  background-position: center center;
+  transition: all 200ms ease-out;
+}
+janus-voip-remoteuser[hasaudio] video {
+  background: url(images/mic-enabled.png);
+  background-size: contain;
+  background-position: center center;
+}
+janus-voip-remoteuser[hasvideo] video {
+  width: 128px;
   height: 128px;
 }
 janus-voip-remoteuser video.active {
@@ -55,12 +80,13 @@ janus-voip-remoteuser h2 {
   text-shadow: 0 0 5px black;
   color: white;
   font-size: .8em;
+  margin-bottom: .5em;
 }
 janus-voip-remoteuser {
 }
 janus-voip-localuser[speaking],
 janus-voip-remoteuser[speaking] {
-  border: 2px solid #0f0;
+  xborder: 2px solid #0f0;
 }
 janus-voip-localuser ui-button {
   position: absolute;
@@ -76,7 +102,7 @@ janus-voip-localuser ui-button {
 janus-voip-remoteuser ui-button {
   font-size: 0;
   width: auto;
-  opacity: .5;
+  opacity: 0;
 }
 janus-voip-localuser ui-button:before,
 janus-voip-remoteuser ui-button:before {
@@ -200,3 +226,22 @@ janus-voip-client-incomingcall ui-button[action="reject"] {
 janus-voip-client-incomingcall ui-button[action="reject"]:hover {
   background: #a00;
 }
+ui-panel[top]:not([left]):not([right]):has(janus-voip-client[spatialized]) {
+  top: 0;
+  left: 0;
+}
+ui-panel[top]:has(janus-voip-client[spatialized])::after {
+  position: absolute;
+  width: 80vh;
+  height: 80vh;
+  display: block;
+  content: '';
+  left: calc(50vw - 40vh);
+  top: 10vh;
+  border: 2px solid rgba(128,128,128,.5);
+  border-radius: 50%;
+  pointer-events: none;
+}
+janus-voip-remoteuser[spatialized] {
+  position: absolute;
+}