diff --git a/umap/static/umap/js/modules/sync/engine.js b/umap/static/umap/js/modules/sync/engine.js
index 05994544..62106352 100644
--- a/umap/static/umap/js/modules/sync/engine.js
+++ b/umap/static/umap/js/modules/sync/engine.js
@@ -146,9 +146,8 @@ export class SyncEngine {
updater.applyMessage(operation)
}
- getNumberOfConnectedPeers() {
- if (this.peers) return Object.keys(this.peers).length
- return 0
+ getPeers() {
+ return this.peers || {}
}
/**
diff --git a/umap/static/umap/js/modules/ui/bar.js b/umap/static/umap/js/modules/ui/bar.js
index 80202616..b929c8e5 100644
--- a/umap/static/umap/js/modules/ui/bar.js
+++ b/umap/static/umap/js/modules/ui/bar.js
@@ -2,6 +2,7 @@ import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
import { translate } from '../i18n.js'
import { WithTemplate } from '../utils.js'
import ContextMenu from './contextmenu.js'
+import * as Utils from '../utils.js'
const TOP_BAR_TEMPLATE = `
@@ -96,13 +97,16 @@ export class TopBar extends WithTemplate {
}
})
- const connectedPeers = this._umap.sync.getNumberOfConnectedPeers()
this.elements.peers.addEventListener('mouseover', () => {
- if (!connectedPeers) return
+ const connectedPeers = this._umap.sync.getPeers()
+ if (!Object.keys(connectedPeers).length) return
+ const ul = Utils.loadTemplate(
+ `
${Object.entries(connectedPeers)
+ .map(([id, name]) => `- ${name || translate('Anonymous')}
`)
+ .join('')}
`
+ )
this._umap.tooltip.open({
- content: translate('{connectedPeers} peer(s) currently connected to this map', {
- connectedPeers: connectedPeers,
- }),
+ content: ul,
anchor: this.elements.peers,
position: 'bottom',
delay: 500,
diff --git a/umap/static/umap/js/modules/ui/tooltip.js b/umap/static/umap/js/modules/ui/tooltip.js
index 579afc09..277eea73 100644
--- a/umap/static/umap/js/modules/ui/tooltip.js
+++ b/umap/static/umap/js/modules/ui/tooltip.js
@@ -21,7 +21,11 @@ export default class Tooltip extends Positioned {
open(opts) {
const showIt = () => {
- this.container.innerHTML = Utils.escapeHTML(opts.content)
+ if (opts.content.nodeType === 1) {
+ this.container.appendChild(opts.content)
+ } else {
+ this.container.innerHTML = Utils.escapeHTML(opts.content)
+ }
this.parent.classList.add('umap-tooltip')
this.openAt(opts)
}
diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js
index ab4d94fe..db75d79f 100644
--- a/umap/static/umap/js/modules/umap.js
+++ b/umap/static/umap/js/modules/umap.js
@@ -1351,7 +1351,7 @@ export default class Umap extends ServerStored {
numberOfConnectedPeers: () => {
Utils.eachElement('.connected-peers span', (el) => {
if (this.sync.websocketConnected) {
- el.textContent = this.sync.getNumberOfConnectedPeers()
+ el.textContent = Object.keys(this.sync.getPeers()).length
} else {
el.textContent = translate('Disconnected')
}