janusweb 1.5.37 → 1.5.41

package/css/janusweb.css

@@ -301,3 +301,6 @@ janus-overlay[hidden] {
   pointer-events: none;
   display: block !important;
 }
+fireboxroom {
+  display: none;
+}

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

@@ -42,15 +42,14 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
     this.defineAttribute('src', { type: 'string' });
     this.defineAttribute('sources', { type: 'object' });
     this.defineAttribute('previewpos', { type: 'vector3', default: V(-2, 0, -3) });
-    this.defineAttribute('hideconfirm', { type: 'boolean', default: false });
-    this.defineAttribute('hidereset', { type: 'boolean', default: false });
+    this.defineAttribute('hideconfirm', { type: 'boolean', default: true });
+    this.defineAttribute('hidereset', { type: 'boolean', default: true });
     this.selected = false;
   }
   create() {
     let tpl = '';
     if (this.sources) {
       let sources = (elation.utils.isString(this.sources) ? JSON.parse(this.sources) : this.sources);
-      console.log('HI YES', sources);
       if (sources.length > 1) {
         tpl += '<ui-tabs>';
         sources.forEach(source => {
@@ -68,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 src="https://demo.readyplayer.me/avatar" allow="camera"></iframe>
+            <iframe data-src="https://demo.readyplayer.me/avatar" allow="camera"></iframe>
           </ui-tab>
         </ui-tabs>
       `;
@@ -93,7 +92,7 @@ elation.elements.define('janus-avatar-picker', class extends elation.elements.ba
 
     // Observer watches for visibility events and hides the 3d avatar preview when the 2d ui disappears
     let threshold = [];
-    for (let i = 0; i < 100; i++) threshold.push(i / 100);
+    for (let i = 0; i < 100; i += 10) threshold.push(i / 100);
     let observer = new IntersectionObserver(ev => this.handleIntersectionChange(ev), { root: document, rootMargin: '0px', threshold: threshold });
     observer.observe(this);
     document.addEventListener('scroll', ev => this.handleScroll(ev));
@@ -107,7 +106,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>
       `;
     } else if (source.type == 'iframe') {
-      tpl = `<iframe src="${source.src}" allow="camera"></iframe>`;
+      tpl = `<iframe data-src="${source.src}" allow="camera"></iframe>`;
     }
     return tpl;
   }
@@ -178,9 +177,11 @@ this.appendChild(this.previewwindow);
   handleAvatarSelect(ev) {
     console.log('selected an avatar', ev.data);
     this.selected = ev.data;
-    this.showPreview(ev.data.url);
     if (this.elements.confirm) {
+      this.showPreview(ev.data.url);
       this.elements.confirm.disabled = false;
+    } else {
+      this.handleAvatarConfirm();
     }
     this.dispatchEvent(new CustomEvent("select", { detail: this.selected }));
   }
@@ -204,6 +205,21 @@ this.appendChild(this.previewwindow);
     } else if (!this.avatarpreview && intersections[0].isIntersecting) {
       this.showPreview();
     }
+    // If our iframe hasn't been loaded yet, set a timer to load it. Clear the time out if the element becomes hidden before it fires.
+    if (intersections[0].intersectionRatio > 0) {
+      if (this.iframevistimer) {
+        clearTimeout(this.iframevistimer);
+      }
+      this.iframevistimer = setTimeout(() => {
+        let iframe = this.querySelector('iframe[data-src]');
+        if (iframe && iframe.src != iframe.dataset.src) {
+          iframe.src = iframe.dataset.src;
+          delete iframe.dataset.src;
+        }
+      }, 50);
+    } else if (this.iframevistimer) {
+      clearTimeout(this.iframevistimer);
+    }
   }
   handleScroll(ev) {
     this.updatePreviewPosition();
@@ -229,7 +245,8 @@ this.appendChild(this.previewwindow);
 });
 elation.elements.define('janus-avatar-picker-item', class extends elation.elements.ui.item {
   create() {
-    elation.events.add(this, 'click', (ev) => { console.log('duh', this); this.click(ev) });
+    super.create();
+    //elation.events.add(this, 'click', (ev) => { console.log('duh', this); this.click(ev) });
     let item = this.value;
     let defaulticon = janus.ui.apps.default.apps.avatar.resolveFullURL('./images/default-avatar.jpg');
     this.elements = elation.elements.fromString(`

package/media/assets/webui/apps/buttons/buttons.json

@@ -6,7 +6,6 @@
     "./buttons.css"
   ],
   "scripts": [
-    "./share-min.js",
     "./buttons.js"
   ]
 }

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

@@ -2,4 +2,4 @@
 
 <janus-comms-userlist labelfont="{labelfont}"></janus-comms-userlist>
 <!-- janus-voip-client></janus-voip-client -->
-<janus-comms-chat></janus-comms-chat>
+<janus-comms-chat name="chat"></janus-comms-chat>

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

@@ -93,16 +93,17 @@ elation.elements.define('janus-comms-userlist', class extends elation.elements.u
     this.elements = elation.elements.fromTemplate('janus.comms.userlist', this);
     this.client = this.getClient();
     this.janusweb = this.client.janusweb;
+
     this.userlist_room = this.elements.userlist_room;
     this.userlist_online = this.elements.userlist_online;
     this.userlist_friends = this.elements.userlist_friends;
-
     this.usermarkers = {};
 
     elation.events.add(this.janusweb, 'room_load_start', (ev) => { this.updateRoom(ev.data); });
     elation.events.add(this.janusweb.network, 'janusweb_user_joined,janusweb_user_left,janusweb_user_disconnected', (ev) => this.updateUsers());
     setTimeout(() => {
       this.updateUsers();
+      this.updateRoom(room);
     }, 100);
   }
   getClient() {
@@ -121,6 +122,13 @@ elation.elements.define('janus-comms-userlist', class extends elation.elements.u
     this.userlist_room = this.userlist_room;
     this.userlist_online = this.userlist_online;
     this.userlist_friends = this.userlist_friends;
+    if (room.private) {
+      this.parentNode.elements.chat.open = false;
+      this.elements.userlist_details.open = false;
+    } else {
+      this.parentNode.elements.chat.open = true;
+      this.elements.userlist_details.open = true;
+    }
     this.updateUsers();
   }
   updateUsers() {
@@ -129,10 +137,12 @@ elation.elements.define('janus-comms-userlist', class extends elation.elements.u
     var users = Object.keys(remoteplayers);
     users.unshift(player.userid);
 
-    this.elements.roomusers.value = users.length;
-    
-    this.userlist_room.setItems(users);
-
+    if (this.elements.roomusers) {
+      this.elements.roomusers.value = users.length;
+    }
+    if (this.userlist_room) {
+      this.userlist_room.setItems(users);
+    }
     for (let k in remoteplayers) {
       let p = remoteplayers[k];
       if (this.usermarkers[k] && this.usermarkers[k].parent !== p.getProxyObject()) {
@@ -147,7 +157,6 @@ elation.elements.define('janus-comms-userlist', class extends elation.elements.u
         });
         this.usermarkers[k].start();
       } 
-
     }
   }
   setFont(fontname) {
@@ -207,6 +216,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
   }
   handleUserJoined(ev) {
     var data = ev.data;
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'join',
@@ -217,6 +227,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
   }
   handleUserLeft(ev) {
     var data = ev.data;
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'part',
@@ -227,6 +238,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
   }
   handleUserDisconnected(ev) {
     var data = ev.data;
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'disconnect',
@@ -237,6 +249,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
   }
   handleUserChat(ev) {
     var data = ev.data;
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'chat',
@@ -249,6 +262,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
   sendMessage(msg) {
     if (msg && msg.length > 0) {
       janus.network.send({'method': 'chat', data: msg});
+if (!this.elements.chatmessages) return;
       this.elements.chatmessages.add({
         timestamp: new Date().getTime(),
         type: 'selfchat',
@@ -260,6 +274,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
     }
   }
   handleClientPrint(msg) {
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'print',

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

@@ -1,9 +1,11 @@
-<details open>
-   <summary>Online Users (<ui-indicator name="roomusers" value="0"></ui-indicator>)</summary>
-      {?room.private}
-        <h3>Private Room</h3>
+{?room.private}
+<details name="userlist_details">
+        <summary>No online users</summary>
         <p>This room is marked as private.  You are not broadcasting your location while here - others can't see you, and you can't see them.</p>
-      {/room.private}
+</details>
+{:else}
+<details open name="userlist_details">
+   <summary>Online Users (<ui-indicator name="roomusers" value="0"></ui-indicator>)</summary>
       <ui-list name="userlist_room" emptycontent="No other users in this room"></ui-list>
       <!-- ui-tabs showcounts="true">
         <ui-tab name="roomusers" label="Room">
@@ -17,3 +19,4 @@
         </ui-tab>
       </ui-tabs -->
 </details>
+{/room.private}

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

@@ -96,7 +96,7 @@ this.debug.style.zIndex = '1000';
       this.style.top = (this.position[1] * 100) + '%';
     }
 
-    let janus = elation.component.fetch(this.queryParentSelector('[data-elation-component="janusweb.client"]'))
+    let janus = this.queryParentSelector('janusweb-client');
     if (janus) {
       janus.engine.systems.controls.addVirtualGamepad(this);
       this.hide();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "janusweb",
   "description": "Web client for JanusVR worlds",
-  "version": "1.5.37",
+  "version": "1.5.41",
   "main": "scripts/janusweb.js",
   "author": "James Baicoianu",
   "license": "MIT",

package/scripts/external/JanusFireboxParser.js

@@ -83,6 +83,7 @@ JanusFireboxParser.prototype.parseAssets = function(xml, baseurl, datapath) {
       flipy: n.flipy,
       reverse3d: n.reverse3d,
       tex_linear: n.tex_linear,
+      equi: n.equi,
     });
   });
   videoassets.forEach(function(n) { 

package/scripts/janusghost.js

@@ -238,15 +238,34 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
               //rotation: V(0, 180, 0),
               lighting: this.lighting,
               //cull_face: 'none'
+              opacity: 0.9999,
+              renderorder: this.renderorder || 100,
+              shader_chunk_replace: (this.lighting ? {
+                'color_fragment': 'color_fragment_discard_close',
+              } : {}),
             });
             this.face.start();
           } else {
             this.face = headid;
+            this.face.lighting = this.lighting;
+            this.face.opacity = 0.9999;
+            this.face.renderorder = this.renderorder || 100;
+            this.face.shader_chunk_replace = (this.lighting ? {
+              'color_fragment': 'color_fragment_discard_close',
+            } : {});
             this.head.appendChild(headid);
             this.face.start();
           }
-          this.head.pos = headpos.clone().multiplyScalar(this.scale.y);
+          if (scale) {
+            this.face.scale.fromArray(scale);
+            if (this.label) {
+              this.label.scale.fromArray(scale);
+              this.label.pos.multiply(this.label.scale);
+            }
+          }
+          this.head.pos = headpos.clone().multiply(this.face.scale);
           this.face.applyPosition(headpos.negate());
+
           if (this.remotevideo) {
             this.updateVideoScreen();
             this.face.addEventListener('load', (ev) => {
@@ -256,13 +275,7 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
           }
         }
         //this.head.properties.position.copy(headpos);
-        if (scale) {
-          this.face.scale.fromArray(scale);
-          if (this.label) {
-            this.label.scale.fromArray(scale);
-            this.label.pos.multiply(this.label.scale);
-          }
-        }
+
       }
     }
     this.setBody = function(bodyid, scale, pos) {
@@ -328,7 +341,7 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
             if (this.body.animationmixer) {
               this.cloneAnimations(animasset);
             }
-            this.body.setAnimation('idle');
+            //this.body.setAnimation('idle');
           }
         });
         animasset.load();
@@ -336,7 +349,7 @@ elation.require(['janusweb.janusbase', 'engine.things.leapmotion'], function() {
         if (this.body.animationmixer) {
           this.cloneAnimations(animasset);
         }
-        this.body.setAnimation('idle');
+        //this.body.setAnimation('idle');
       }
     }
     this.cloneAnimations = function(animasset) {

package/scripts/janusplayer.js

@@ -373,7 +373,6 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
       if (this.head) {
         this.head.objects['3d'].matrixWorld.extractBasis(v.view_xdir, v.view_ydir, v.view_zdir);
         v.head_pos.setFromMatrixPosition(this.head.objects['3d'].matrixWorld);
-        v.view_zdir.negate();
       }
 
       if (this.gaze && this.gaze.object) {
@@ -491,7 +490,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
               avatar_src: 'data:text/plain,' + encodeURIComponent(avatar),
               showlabel: false,
               //pos: V(0, -this.fatness, 0),
-              //rotation: V(0, 180, 0),
+              rotation: V(0, 180, 0),
               renderorder: 101,
             });
             this.ghost.orientation.set(0,1,0,0);
@@ -655,7 +654,7 @@ elation.require(['engine.things.player', 'janusweb.external.JanusVOIP', 'ui.butt
         avatar_src: 'data:text/plain,' + encodeURIComponent(avatar),
         showlabel: false,
         //pos: V(0, -this.fatness, 0),
-        //rotation: V(0, 180, 0),
+        rotation: V(0, 180, 0),
         renderorder: 101,
       });
 

package/scripts/room.js

@@ -306,6 +306,7 @@ elation.require([
         let equi = this.getAsset('image', this.skybox_equi);
         elation.events.add(equi, 'asset_load', ev => {
           this.skyboxtexture = ev.target._texture;
+          this.skyboxtexture.mapping = THREE.EquirectangularReflectionMapping;
           if (this.janus.currentroom === this) {
             this.skyboxobj.setTexture(this.skyboxtexture);
           }