janusweb 1.5.39 → 1.5.42

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.js

@@ -243,46 +243,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/buttons/buttons.json

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

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.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,64 +216,77 @@ 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',
       userId: data.id,
       message: 'has joined ' + (data.room.title || data.room.url),
+      raw: false,
     });
     this.scrollToBottom();
   }
   handleUserLeft(ev) {
     var data = ev.data;
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'part',
       userId: data.id,
-      message: 'has left the room'
+      message: 'has left the room',
+      raw: false,
     });
     this.scrollToBottom();
   }
   handleUserDisconnected(ev) {
     var data = ev.data;
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       timestamp: new Date().getTime(),
       type: 'disconnect',
       userId: data.id,
-      message: 'has disconnected'
+      message: 'has disconnected',
+      raw: false,
     });
     this.scrollToBottom();
   }
   handleUserChat(ev) {
     var data = ev.data;
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       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);
   }
   sendMessage(msg) {
     if (msg && msg.length > 0) {
       janus.network.send({'method': 'chat', data: msg});
-      this.elements.chatmessages.add({
+if (!this.elements.chatmessages) return;
+      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();
     }
   }
   handleClientPrint(msg) {
+if (!this.elements.chatmessages) return;
     this.elements.chatmessages.add({
       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/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/comms/voip.css

@@ -171,3 +171,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;
     }
 
@@ -883,6 +918,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 +929,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 +943,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();
@@ -1121,6 +1161,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 +1216,131 @@ 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');
+    }
+  }
+});