diff --git a/public/js/Room.js b/public/js/Room.js index 46ae685e..ee76f37a 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -171,10 +171,11 @@ function initClient() { // HANDLE TOOLTIP // #################################################### -function setTippy(elem, content, placement) { +function setTippy(elem, content, placement, allowHTML = false) { tippy(document.getElementById(elem), { content: content, placement: placement, + allowHTML: allowHTML, }); } diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index d2cf1699..bc08db3c 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -190,7 +190,7 @@ class RoomClient { this.myVideoEl = null; this.myAudioEl = null; - this.debug = false; + this.showPeerInfo = false; this.videoProducerId = null; this.audioProducerId = null; @@ -1514,6 +1514,7 @@ class RoomClient { this.handleKO(ko.id); } this.handleDD(d.id, peer_id, !remotePeer); + this.popupPeerInfo(p.id, peer_info); this.setVideoAvatarImgName(i.id, peer_name); this.getId(i.id).style.display = 'block'; handleAspectRatio(); @@ -1668,11 +1669,12 @@ class RoomClient { // SET // #################################################### - setTippy(elem, content, placement) { + setTippy(elem, content, placement, allowHTML = false) { if (DetectRTC.isMobileDevice) return; tippy(this.getId(elem), { content: content, placement: placement, + allowHTML: allowHTML, }); } @@ -3651,25 +3653,33 @@ class RoomClient { } popupPeerInfo(id, peer_info) { - if (this.debug) { + if (this.showPeerInfo && !this.isMobileDevice) { this.setTippy( id, - JSON.stringify( - peer_info, - [ - 'peer_name', - 'peer_audio', - 'peer_video', - 'peer_hand', - 'is_mobile_device', - 'os_name', - 'os_version', - 'browser_name', - 'browser_version', - ], - 2, - ), + '
' +
+                    JSON.stringify(
+                        peer_info,
+                        [
+                            'peer_id',
+                            'peer_name',
+                            'peer_audio',
+                            'peer_video',
+                            'peer_screen',
+                            'peer_hand',
+                            'is_desktop_device',
+                            'is_mobile_device',
+                            'is_ipad_pro_device',
+                            'os_name',
+                            'os_version',
+                            'browser_name',
+                            'browser_version',
+                            //'user_agent',
+                        ],
+                        2,
+                    ) +
+                    '
',
                 'top-start',
+                true,
             );
         }
     }