janusweb 1.5.41 → 1.5.43

package/CHANGELOG

@@ -1,3 +1,26 @@
+JanusWeb 1.5.42
+===============
+- New Features
+  - TiltBrush / OpenBrush support via three-icosa
+  - VOIP "start call" button
+  - Synced avatar morphtargets over network
+  - New <outliner> built-in element
+  - Support for .hdr envmaps
+- Updates
+  - glTF optimizations: KTX2 textures, Meshopt compression
+  - VR controller improvements
+  - Scriptable player walk/run speeds
+  - Editor improvements
+  - Upgrade Three.js to r140
+- Bugfixes
+  - Handle localStorage permission rejection
+  - Fixed particle rates < 1 particle per frame
+  - Fixed toon shader for <room toon="true">
+  - Material fixes for emissive, clearcoat, transmission tint, etc
+  - Fixed FBX texture load path
+  - Update player gravity when flying is toggled
+
+
 JanusWeb 1.5
 ============
 - Threejs upgrade to r133

package/css/janusweb.css

@@ -263,7 +263,8 @@ janus-viewer section {
 janus-viewer ui-scrollindicator {
   text-align: center;
   position: absolute;
-  bottom: 5vh;
+  bottom: 2vh;
+  overflow: hidden;
 }
 janus-viewer ui-scrollindicator:after {
   border-left: 4px solid white;
@@ -271,6 +272,7 @@ janus-viewer ui-scrollindicator:after {
   width: 50px;
   height: 50px;
   transform: rotate(-45deg);
+  transform-origin: 0 5px;
   display: block;
   animation: scrollindicator-bounce 1s infinite;
   content: ' ';
@@ -301,6 +303,9 @@ janus-overlay[hidden] {
   pointer-events: none;
   display: block !important;
 }
-fireboxroom {
+janus-viewer room,
+janus-viewer assets,
+fireboxroom room,
+fireboxroom assets {
   display: none;
 }

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

@@ -202,16 +202,25 @@ elation.elements.define('janus-button-audio', class extends elation.elements.ui.
   init() {
     super.init();
     this.defineAttribute('muted', { type: 'boolean' });
+    janus.engine.systems.sound.getOutputChannel().then(c => this.output_main = c);
   }
   create() {
+    /*
     this.popupcontent = `
-      <ui-slider name="volume_env" label="Environment" min="0" max="1.2" value="1"></ui-slider>
-      <ui-slider name="volume_voip" label="Voice Chat" min="0" max="1.2" value="1"></ui-slider>
+      <ui-slider name="volume_env" label="Main Volume" min="0" max="150" value="100" snap="1"></ui-slider>
+      <ui-slider name="volume_voip" label="Voice Chat" min="0" max="150" value="100" snap="1"></ui-slider>
+    `;
+    */
+    this.popupcontent = `
+      <ui-slider name="volume_env" label="Main Volume" min="0" max="150" value="100" snap="1"></ui-slider>
     `;
     super.create();
     this.createPopup();
     this.hidePopup();
-    elation.events.add(this.popup.content.elements['volume_env'], 'change', (ev) => this.adjustEnvironmentVolume(ev.data));
+
+    console.log(this.popup.content);
+    elation.events.add(this.popup.content.querySelector('[name="volume_env"]'), 'change', (ev) => this.adjustEnvironmentVolume(ev.data));
+    //elation.events.add(this.popup.content.querySelector('[name="volume_voip"]'), 'change', (ev) => this.adjustVoipVolume(ev.data));
     //this.addEventListener('click', (ev) => this.handleClick(ev));
 
     let soundsystem = janus.engine.systems.sound;
@@ -226,10 +235,15 @@ elation.elements.define('janus-button-audio', class extends elation.elements.ui.
     elation.events.add(soundsystem, 'sound_enabled', (ev) => this.updateMuteState());
   }
   adjustEnvironmentVolume(volume) {
+    //console.log('adjust environment output', room.audionodes.gain.gain.value);
+    /*
     if (room.audionodes) {
       room.audionodes.gain.gain.value = volume;
       this.updateMuteState();
     }
+    */
+    console.log(volume);
+    janus.engine.systems.sound.reallistener.gain.gain.value = volume / 100;
   }
   adjustVOIPVolume(volume) {
     // TODO
@@ -243,46 +257,6 @@ elation.elements.define('janus-button-audio', class extends elation.elements.ui.
     this.muted = muted;
   }
 });
-elation.elements.define('janus-button-voip', class extends elation.elements.ui.popupbutton {
-  init() {
-    super.init();
-    this.defineAttribute('active', { type: 'boolean' });
-    this.defineAttribute('muted', { type: 'boolean' });
-  }
-  create() {
-    this.popupcontent = `<janus-voip-picker name="voipsettings"></janus-voip-picker>`;
-    super.create();
-    this.createPopup();
-    this.hidePopup();
-    elation.events.add(this.popup.content.elements['picker'], 'voip-picker-select', (ev) => this.hidePopup());
-    this.updateMuteState();
-//setInterval(() => this.updateMuteState(), 1000);
-  }
-  updateMuteState() {
-    //let muted = !(soundsystem.canPlaySound && soundsystem.enabled);
-    let voipclient = this.voipclient;
-    if (!this.voipclient) {
-      voipclient = document.querySelector('janus-voip-client');
-      this.voipclient = voipclient;
-      if (this.voipclient) {
-        elation.events.add(this.voipclient, 'init', ev => this.updateMuteState());
-      }
-    }
-    let muted = true;
-    if (voipclient) {
-      if (voipclient.localuser && !this.registeredEvents) {
-        elation.events.add(voipclient.localuser, 'mute', () => this.updateMuteState());
-        elation.events.add(voipclient.localuser, 'unmute', () => this.updateMuteState());
-        elation.events.add(voipclient.localuser, 'update', ev => this.updateMuteState());
-        this.registeredEvents = true;
-      }
-      if (voipclient.localuser && voipclient.localuser.stream && !voipclient.localuser.muted) {
-        muted = false;
-      }
-    }
-    if (this.muted != muted) this.muted = muted;
-  }
-});
 elation.elements.define('janus-button-share', class extends elation.elements.ui.button {
   init() {
     super.init();

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

@@ -1,5 +1,6 @@
 <details name="toggle" open aria-live="polite" role="log">
   <summary>Text Chat <ui-notificationbutton name="unread" count="0"></ui-notificationbutton></summary>
+  <janus-voip-client-callbutton></janus-voip-client-callbutton>
   <collection-indexed id="chatmessages" index="timestamp"></collection-indexed>
   <ui-list name="chatlist" collection="chatmessages" itemtemplate="janus.comms.chat_message" scrollable="1"></ui-list>
   <ui-input name="chatinput" placeholder="Press T for text chat"></ui-input>

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

@@ -1 +1 @@
-<span class="message {type}"><span class="userid">{userId}</span> {message}</span>
+<span class="message {type}"><span class="userid">{userId}</span> {?raw}{message|s}{:else}{message}{/raw}</span>

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

@@ -52,7 +52,7 @@ elation.elements.define('janus-comms-status', class extends elation.elements.bas
         this.state = 'disconnected';
       }
     }
-    this.elements = elation.elements.fromTemplate('janus.comms.status', this);
+    this.refresh();
 
     //elation.events.add(player._target, 'username_change', (ev) => this.handleUsernameChange(ev));
   }
@@ -222,6 +222,7 @@ if (!this.elements.chatmessages) return;
       type: 'join',
       userId: data.id,
       message: 'has joined ' + (data.room.title || data.room.url),
+      raw: false,
     });
     this.scrollToBottom();
   }
@@ -232,7 +233,8 @@ if (!this.elements.chatmessages) return;
       timestamp: new Date().getTime(),
       type: 'part',
       userId: data.id,
-      message: 'has left the room'
+      message: 'has left the room',
+      raw: false,
     });
     this.scrollToBottom();
   }
@@ -243,7 +245,8 @@ if (!this.elements.chatmessages) return;
       timestamp: new Date().getTime(),
       type: 'disconnect',
       userId: data.id,
-      message: 'has disconnected'
+      message: 'has disconnected',
+      raw: false,
     });
     this.scrollToBottom();
   }
@@ -254,8 +257,10 @@ if (!this.elements.chatmessages) return;
       timestamp: new Date().getTime(),
       type: 'chat',
       userId: data.userId,
-      message: data.message.data || data.message.message
+      message: data.message.data || data.message.message,
+      raw: false,
     });
+
     this.scrollToBottom();
     this.updateUnread(1);
   }
@@ -263,11 +268,12 @@ if (!this.elements.chatmessages) return;
     if (msg && msg.length > 0) {
       janus.network.send({'method': 'chat', data: msg});
 if (!this.elements.chatmessages) return;
-      this.elements.chatmessages.add({
+      let newmsg = this.elements.chatmessages.add({
         timestamp: new Date().getTime(),
         type: 'selfchat',
         userId: player.userid,
-        message: msg
+        message: msg,
+        raw: false,
       });
       this.elements.chatinput.value = '';
       this.scrollToBottom();
@@ -279,7 +285,8 @@ if (!this.elements.chatmessages) return;
       timestamp: new Date().getTime(),
       type: 'print',
       userId: 'room',
-      message: msg[0]
+      message: msg[0],
+      raw: false,
     });
     this.scrollToBottom();
   }

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:voip.janusxr.org:3478',
+            'turns:stream.janusxr.org:3478',
           ]
         },
       ]

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

@@ -1,10 +1,13 @@
 janus-voip-client {
-  display: flex;
   border: 1px solid black;
   position: relative;
   max-width: 75vh;
   flex-wrap: wrap;
 }
+janus-voip-client-janus {
+  display: flex;
+  flex-direction: horizontal;
+}
 janus-voip-localuser {
   display: block;
   bottom: 0px;
@@ -20,7 +23,7 @@ janus-voip-localuser video {
   margin: 1px 0 0 1px;
 }
 janus-voip-remoteuser {
-  display: inline-block;
+  xdisplay: inline-block;
   border: 2px solid black;
   position: relative;
   font-family: monospace;
@@ -34,7 +37,7 @@ janus-voip-remoteuser video {
   height: 128px;
 }
 janus-voip-remoteuser video.active {
-  display: block;
+  display: inline-block;
 }
 janus-voip-remoteuser[active] {
   transform: scale(1, 1);
@@ -68,6 +71,7 @@ janus-voip-localuser ui-button {
   font-size: 0;
   width: auto;
   transition: opacity 100ms linear;
+  z-index: 100;
 }
 janus-voip-remoteuser ui-button {
   font-size: 0;
@@ -99,6 +103,11 @@ janus-voip-localuser ui-button.muted:before {
 }
 janus-voip-localuser:hover ui-button,
 janus-voip-remoteuser:hover ui-button {
+  display: block;
+  opacity: .6;
+}
+janus-voip-localuser ui-button:hover,
+janus-voip-remoteuser ui-button:hover {
   display: block;
   opacity: 1;
 }
@@ -171,3 +180,23 @@ janus-voip-picker .micselect {
 janus-voip-picker-mictest {
   margin-left: 5px;
 }
+janus-voip-client-incomingcall ui-flexpanel {
+  height: auto;
+}
+janus-voip-client-incomingcall janus-button-voip[action="accept"] {
+  background: #0a0;
+  border: 1px solid black;
+}
+janus-voip-client-incomingcall janus-button-voip[action="accept"]:hover {
+  background: #0d0;
+}
+janus-voip-client-incomingcall janus-button-voip[action="accept"][disabled] {
+  opacity: .3;
+}
+janus-voip-client-incomingcall ui-button[action="reject"] {
+  background: #800;
+  border: 1px solid black;
+}
+janus-voip-client-incomingcall ui-button[action="reject"]:hover {
+  background: #a00;
+}

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

@@ -38,6 +38,7 @@ elation.elements.define('janus-voip-client', class extends elation.elements.base
       this.inputstream = localStream;
     });
 
+    elation.events.add(janus.network, 'janusweb_user_chat', (ev) => this.handleUserChat(ev));
   }
   setRoom(newroom) {
     let roomid = newroom.voipid || newroom.id;
@@ -76,6 +77,28 @@ elation.elements.define('janus-voip-client', class extends elation.elements.base
     }
     this.currentroom = this.rooms[roomid];
   }
+  disconnect() {
+    if (this.currentroom) {
+      this.currentroom.disconnect();
+      this.currentroom = null;
+    }
+    this.localuser.setData(null);
+  }
+  handleUserChat(ev) {
+    console.log('got a chat', ev.data);
+    let msg = ev.data.message;
+    let m = msg.data.match(/📞 (.*$)/);
+    if (m) {
+      let chatmessages = document.querySelector('janus-comms-chat').elements.chatmessages,
+          chatlist = document.querySelector('janus-comms-chat').elements.chatlist;
+      if (chatmessages) {
+        let item = chatmessages.items[chatmessages.items.length - 1];
+        item.raw = true;
+        item.message = '<janus-voip-client-incomingcall>' + msg.data + '</janus-voip-client-incomingcall>';
+        chatlist.refresh();
+      }
+    }
+  }
 });
 elation.elements.define('janus-voip-client-janus', class extends elation.elements.base {
   create() {
@@ -125,6 +148,9 @@ elation.elements.define('janus-voip-client-janus', class extends elation.element
       sfu.adapter.setLocalMediaStream(localStream);
       sfu.dispatchEvent(new CustomEvent('voip-media-change', {detail: { stream: localStream }}));
     });
+    if (this.inputstream) {
+      sfu.adapter.setLocalMediaStream(this.inputstream);
+    }
 /*
     elation.events.add(janus._target, 'room_change', (ev) => {
       if (!sfu || !sfu.adapter) return;
@@ -192,7 +218,12 @@ console.log('leave room and remove all occupants', this.room);
     this.sfu.setClientId(ev.data);
   }
   setInputStream(stream) {
-    this.sfu.adapter.setLocalMediaStream(stream);
+    if (this.sfu) {
+      this.inputstream = stream;
+      this.sfu.adapter.setLocalMediaStream(stream);
+    } else {
+      this.connect();
+    }
   }
 });
 elation.elements.define('janus-voip-client-hifi', class extends elation.elements.base {
@@ -390,6 +421,10 @@ elation.elements.define('janus-voip-localuser', class extends elation.elements.b
     if (!data) {
       this.stream = false;
       elation.events.fire({type: 'update', element: this});
+      if (this.updateVolumeInterval) {
+        clearInterval(this.updateVolumeInterval);
+        this.updateVolumeInterval = false;
+      }
       return;
     }
 
@@ -410,7 +445,7 @@ elation.elements.define('janus-voip-localuser', class extends elation.elements.b
       video.srcObject = data;
       this.appendChild(video);
       video.muted = true;
-      video.play().then(() => console.log('playing', video));
+      video.play().then(() => console.log('playing', video)).catch(e => console.log('Failed to start video', e, video));
       this.video = video;
     }
 
@@ -520,6 +555,7 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
   }
   setUserData(data) {
     this.id = data.id;
+console.log('got a remote voip user', data);
 
     if (!this.label) {
       let label = document.createElement('h2');
@@ -586,11 +622,12 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
     if (!this.controlpanel) {
       this.controlpanel = elation.elements.create('ui-panel', { bottom: 1, append: this });
       this.mutebutton = elation.elements.create('ui-button', { label: 'Mute', name: "mutebutton", append: this.controlpanel });
-/*
-      this.volume = elation.elements.create('ui-slider', { name: "volume", min: 0, max: 2, value: this.video.volume, append: this.controlpanel });
+      this.volume = elation.elements.create('ui-slider', { name: "volume", min: 0, max: 200, value: this.video.volume * 100, append: this.controlpanel, snap: 1 });
 
       elation.events.add(this.volume, 'change', (ev) => {
-        remoteuser.setVolume(ev.data);
+        if (remoteuser) {
+          remoteuser.setVolume(ev.data / 100);
+        }
         this.muted = (ev.data == 0);
         if (this.muted && !this.mutebutton.hasclass('muted')) {
           this.mutebutton.addclass('muted');
@@ -598,7 +635,6 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
           this.mutebutton.removeclass('muted');
         }
       });
-*/
       elation.events.add(this.mutebutton, 'click', (ev) => {
 /*
         remoteuser.setVolume(0);
@@ -695,6 +731,7 @@ elation.elements.define('janus-voip-remoteuser', class extends elation.elements.
   }
   toggleMute() {
     this.muted = !this.muted;
+console.log('mute?', this.muted, this);
     let remoteuser = janus.network.remoteplayers[this.id];
     if (this.muted) {
       this.mutebutton.addclass('muted');
@@ -883,6 +920,10 @@ elation.elements.define('janus-voip-picker-audio', class extends elation.element
 
           this.webcamDisabledElement = elation.elements.create('option', {innerHTML: 'Disabled', value: 'none', append: cameras.select});
         }
+        let vidtrack = false;
+        if (this.stream) {
+          vidtrack = this.stream.getVideoTracks()[0]
+        }
         devices.forEach(d => {
           if (d.kind == 'audioinput') {
             elation.elements.create('option', {innerHTML: d.label, value: d.deviceId, append: inputs.select});
@@ -890,7 +931,11 @@ elation.elements.define('janus-voip-picker-audio', class extends elation.element
             if (d.deviceId == '') {
               hasWebcamPermission = false;
             } else {
-              elation.elements.create('option', {innerHTML: d.label, value: d.deviceId, append: cameras.select});
+              let option = elation.elements.create('option', {innerHTML: d.label, value: d.deviceId, append: cameras.select});
+              if (vidtrack && d.label == vidtrack.label) {
+                option.selected = true;
+                cameras.select.value = option.value;
+              }
             }
           } else if (outputs && d.kind == 'audiooutput') {
             elation.elements.create('option', {innerHTML: d.label, value: d.deviceId, append: outputs.select});
@@ -900,9 +945,6 @@ elation.elements.define('janus-voip-picker-audio', class extends elation.element
           if (hasWebcamPermission && this.elements.videoDevice.hidden ) {
             this.elements.webcamEnabled.hide();
             this.elements.videoDevice.show();
-            let option = this.elements.videoDevice.select.childNodes[0];
-            option.selected = true;
-            this.elements.videoDevice.select.value = option.value;
           } else {
             console.log('NO WEBCAM PERMISSION');
             this.elements.webcamEnabled.show();
@@ -937,12 +979,12 @@ elation.elements.define('janus-voip-picker-audio', class extends elation.element
 
     if (this.elements.inputDevice.value && this.elements.inputDevice.value != 'default') {
       console.log('input!', this.elements.inputDevice.value);
-      constraints.audio.deviceId = { exact: this.elements.inputDevice.value };
+      constraints.audio.deviceId = { ideal: this.elements.inputDevice.value };
     }
     if (this.elements.videoDevice && this.elements.videoDevice.value && this.elements.videoDevice.value != 'none') {
       console.log('video!', this.elements.videoDevice.value);
       constraints.video = {
-        deviceId: { exact: this.elements.videoDevice.value },
+        deviceId: { ideal: this.elements.videoDevice.value },
         height: 256,
         width: 256
       };
@@ -1121,6 +1163,7 @@ elation.elements.define('janus-voip-picker-mictest', class extends elation.eleme
         bufferLength = dataArray.length,
         analyser = this.analyser;;
 
+    if (!this.offsetParent) return;
     analyser.getByteFrequencyData(this.dataArray);
 
     ctx.fillStyle = "#000";
@@ -1175,3 +1218,139 @@ elation.elements.define('janus-voip-picker-videotest', class extends elation.ele
     }
   }
 });
+elation.elements.define('janus-button-voip', class extends elation.elements.ui.popupbutton {
+  init() {
+    super.init();
+    this.defineAttribute('active', { type: 'boolean' });
+    this.defineAttribute('muted', { type: 'boolean' });
+  }
+  create() {
+    this.popupcontent = `<janus-voip-picker name="voipsettings"></janus-voip-picker>`;
+    super.create();
+    //this.createPopup();
+    this.hidePopup();
+    this.updateMuteState();
+//setInterval(() => this.updateMuteState(), 1000);
+  }
+  updateMuteState() {
+    //let muted = !(soundsystem.canPlaySound && soundsystem.enabled);
+    let voipclient = this.voipclient;
+    if (!this.voipclient) {
+      voipclient = document.querySelector('janus-voip-client');
+      this.voipclient = voipclient;
+      if (this.voipclient) {
+        elation.events.add(this.voipclient, 'init', ev => this.updateMuteState());
+      }
+    }
+    let muted = true;
+    if (voipclient) {
+      if (voipclient.localuser && !this.registeredEvents) {
+        elation.events.add(voipclient.localuser, 'mute', () => this.updateMuteState());
+        elation.events.add(voipclient.localuser, 'unmute', () => this.updateMuteState());
+        elation.events.add(voipclient.localuser, 'update', ev => this.updateMuteState());
+        this.registeredEvents = true;
+      }
+      if (voipclient.localuser && voipclient.localuser.stream && !voipclient.localuser.muted) {
+        muted = false;
+      }
+    }
+    if (this.muted != muted) this.muted = muted;
+  }
+  createPopup() {
+    super.createPopup();
+    setTimeout(() => {
+      //elation.events.add(this.popup.content.querySelector('janus-voip-picker'), 'voip-picker-select', (ev) => this.hidePopup());
+      document.addEventListener('voip-picker-select', (ev) => { this.hidePopup(); });
+    }, 100);
+  }
+});
+elation.elements.define('janus-voip-client-callbutton', class extends elation.elements.janus.button.voip {
+  create() {
+    this.detached = true;
+    this.button = elation.elements.create('ui-button', {
+      append: this,
+      label: '📞',
+    });
+    this.button.addEventListener('click', ev => this.handleClick(ev));
+super.create();
+  }
+  isVoipActive(client) {
+    if (!client) client = document.querySelector('janus-voip-client');
+    return (client && client.localuser && client.localuser.stream);
+  }
+  handleClick(ev) {
+    if (!this.isVoipActive()) {
+      this.showPopup();
+    } else {
+/*
+      if (this.popup.parentNode === this) {
+        if (!elation.utils.isin(this.popup, ev.target)) {
+          this.hidePopup();
+        }
+      } else {
+        this.showPopup();
+      }
+*/
+    }
+    let chat = document.querySelector('janus-comms-chat');
+    chat.sendMessage('📞 ring ring');
+    if (!this.isVoipActive()) {
+    }
+  }
+});
+elation.elements.define('janus-voip-client-incomingcall', class extends elation.elements.base {
+  create() {
+    this.actions = elation.elements.create('ui-flexpanel', { append: this });
+    let active = this.isVoipActive();
+    this.acceptbutton = elation.elements.create('janus-button-voip', {
+      label: (active ? 'Call in Progress' : 'Accept'),
+      action: 'accept',
+      detached: true,
+      disabled: active,
+      append: this.actions
+    });
+    this.rejectbutton = elation.elements.create('ui-button', {
+      label: (active ? 'Hang Up' : 'Decline'),
+      action: 'reject',
+      append: this.actions
+    });
+
+    this.acceptbutton.addEventListener('click', ev => this.handleAccept(ev));
+    this.rejectbutton.addEventListener('click', ev => this.handleReject(ev));
+  }
+  isVoipActive(client) {
+    if (!client) client = document.querySelector('janus-voip-client');
+    return (client && client.localuser && client.localuser.stream);
+  }
+  handleAccept(ev) {
+    this.acceptbutton.disabled = true;
+    this.acceptbutton.label = 'Call in Progress';
+    this.rejectbutton.disabled = false;
+    this.rejectbutton.label = 'Hang Up';
+  }
+  handleReject(ev) {
+    let chat = document.querySelector('janus-comms-chat');
+    this.removeChild(this.actions);
+    //this.removeChild(this.rejectbutton);
+
+    let client = document.querySelector('janus-voip-client');
+    if (this.isVoipActive(client)) {
+      chat.sendMessage('👋 hanging up');
+      client.disconnect();
+      this.acceptbutton.disabled = false;
+      this.acceptbutton.label = 'Reconnect';
+      this.rejectbutton.label = 'Decline';
+      this.rejectbutton.disabled = true;
+    } else {
+      chat.sendMessage('❌ request declined');
+    }
+  }
+});
+elation.elements.define('janus-voip-client-none', class extends elation.elements.base {
+  create() {
+  }
+  connect() {
+  }
+  setInputStream(stream) {
+  }
+});

package/media/assets/webui/apps/editor/editor.css

@@ -21,6 +21,7 @@ janus-ui-editor-property-integer {
 .janus_editor ui-input>ui-label {
   padding: .2em;
   vertical-align: middle;
+  min-width: auto;
 }
 .janus_editor ui-input>input {
   width: 100%;