pmtiles-swarm 0.45.1 → 0.46.0

package/CHANGELOG.md

@@ -7,6 +7,60 @@
 ### 🐞 Bug fixes
 - _...Add new stuff here..._
 
+## 0.46.0
+### ✨ Features and improvements
+- **Each category endpoint on the public page is now offered the way it is used.** A `.torrent` is a
+  file, so it downloads. A preview is a page, so it opens. The rest are addresses that belong
+  somewhere else — a style, a torrent client, a feed reader — and following one here achieves
+  nothing, so TileJSON, magnet, RSS and the style URL copy instead.
+
+  The style URL is no longer printed. It is a TileJSON URL carrying a `.torrent` URL and a
+  percent-encoded magnet in its fragment, several hundred characters of it, and it was most of the
+  card — while being the one thing on the page nobody reads and everybody pastes. Every copy button
+  also carries its URL as a tooltip, since a browser on plain HTTP has no clipboard and a string
+  somebody can select beats a button that does nothing.
+
+### 🐞 Bug fixes
+
+## 0.45.4
+### ✨ Features and improvements
+
+### 🐞 Bug fixes
+- **URLs shown in the console name the public port, not the admin one.** The console is served by the
+  admin listener, so every address it handed out named that listener — a TileJSON URL on `:8091`, a
+  `.torrent` on `:8091`, a style URL carrying both. Those are exactly the addresses that get pasted
+  into a style, a torrent client or another node, and none of them can reach the admin port: it binds
+  to localhost by default and serves nothing public even when it does not.
+
+  Only the port is corrected, and only when it is the admin one. The host stays whatever the request
+  arrived as, so a node behind a proxy still names itself correctly without anyone setting
+  `publicUrl` — and `publicUrl` still wins outright where it is set.
+
+## 0.45.3
+### ✨ Features and improvements
+
+### 🐞 Bug fixes
+- **The Copy and Open buttons on the Categories tab no longer sit off the edge of the page.** Table
+  cells are `nowrap`, which is right for the archive list where a wrapped number is worse than a wide
+  column — but a category cell holds a style URL and a paragraph explaining it, so nothing could
+  wrap and the table grew past the window, carrying the buttons at its end out of reach. The
+  endpoints table lays out fixed now: the label and button columns keep their width and the URL takes
+  what is left.
+
+## 0.45.2
+### ✨ Features and improvements
+
+### 🐞 Bug fixes
+- **A peer's pieces bar now gets a row of its own on the Peers tab.** As a column it took most of the
+  table and left every other cell wrapping a word at a time — `WebT orrent 0.3. 0` down four lines —
+  while the bar itself was still too narrow to read. The figures go on one line and the bar spans the
+  table beneath them, labelled **pieces** rather than **Has**.
+- **A peer that describes itself with an object is no longer shown as `[object Object]`.** Engines
+  disagree about the shape: libtorrent sends a version string and a WebTorrent peer arrives as an
+  object, which went into the column unchanged — and that reads as a fault in this node rather than a
+  peer describing itself differently. Whatever the object carries that names it is used, and a dash
+  where nothing does.
+
 ## 0.45.1
 ### ✨ Features and improvements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmtiles-swarm",
-  "version": "0.45.1",
+  "version": "0.46.0",
   "description": "BitTorrent distribution for PMTiles map archives: create torrents, watch folders, publish and subscribe to RSS feeds, and seed through qBittorrent or an embedded client",
   "type": "module",
   "main": "src/index.js",

package/src/api.js

@@ -317,8 +317,27 @@ export function createApp({
     // a torrent client handed the `torrent` link, another node syncing from
     // the feed -- silently gets something it cannot use.
     const configured = String(config.publicUrl ?? '').trim();
-    const base = configured || `${req.protocol}://${req.host}`;
-    return base.replace(/\/$/, '');
+    if (configured) return configured.replace(/\/$/, '');
+
+    // Never the admin port, whichever one the request came in on.
+    //
+    // The console lives on the admin listener, so every URL it showed named
+    // that listener — a TileJSON URL on :8091, a `.torrent` on :8091, a style
+    // URL carrying both. Those are the addresses people copy into a style, a
+    // torrent client or another node, and none of them can reach the admin
+    // port: it is bound to localhost by default and serves nothing public
+    // even when it is not. Half the addresses on a node pointing somewhere
+    // the other half do not is a confusion nobody should have to diagnose.
+    //
+    // The host is still whatever the request arrived as, so a node behind a
+    // proxy keeps naming itself correctly without anybody configuring
+    // `publicUrl`. Only the port is corrected, and only when it is the one
+    // port that is not for the public.
+    const host = onAdminPort(req)
+      ? String(req.host).replace(/:\d+$/, '') +
+        (config.port ? `:${config.port}` : '')
+      : req.host;
+    return `${req.protocol}://${host}`.replace(/\/$/, '');
   };
 
   /**

package/src/web/index.html

@@ -224,6 +224,15 @@
       }
       .tag.on { background: var(--accent); color: #fff; border-color: var(--accent); }
       #add-error { color: var(--bad); min-height: 1.2rem; }
+      /* Category endpoints. `th, td` is nowrap for the archive table, where a
+         wrapped number is worse than a wide one — but here the cell holds a
+         style URL and a paragraph explaining it, so nowrap pushed the table
+         wider than the window and took the Copy and Open buttons off the far
+         edge with it. Fixed layout keeps the two end columns where they are
+         and gives the middle whatever is left. */
+      #category-list table { table-layout: fixed; }
+      #category-list td { white-space: normal; }
+      #category-list code { word-break: break-all; }
       /* Separates what acts on one archive from what acts on all of them. */
       .bar-gap { flex: 1 1 1.5rem; min-width: 0.75rem; }
       .tabs {
@@ -252,6 +261,12 @@
         word-break: break-all;
       }
       .rows th { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
+      /* A peer's figures fit on one line once the bar is not competing with
+         them for width; the bar gets the whole table on the row below. */
+      .rows.peers td { white-space: nowrap; word-break: normal; }
+      .rows.peers tr.peerbar > td { border-bottom: 1px solid var(--line); }
+      .rows.peers tr.peerbar .piecerow { margin: 0; }
+      .rows.peers tr:not(.peerbar) > td { border-bottom: none; padding-bottom: 0.1rem; }
       [hidden] { display: none !important; }
 
       /* A radio or checkbox beside its own label.
@@ -1588,6 +1603,30 @@
        * @param {object} entry - What the detail endpoint already returned.
        * @returns {Promise<void>} - Resolves once rendered.
        */
+      /**
+       * What a peer says it is, as a string.
+       *
+       * Engines disagree about the shape: libtorrent sends a version string,
+       * and a WebTorrent peer arrives as an object. The object went through
+       * escapeHtml unchanged and the column read "[object Object]" — which
+       * looks like a fault in this node rather than a peer that described
+       * itself differently.
+       * @param {object} peer - One peer from the engine.
+       * @returns {string} - Something worth printing.
+       */
+      function clientOf(peer) {
+        const said = peer?.client;
+        if (typeof said === 'string' && said.trim()) return said;
+        if (said && typeof said === 'object') {
+          // Whatever it does carry, in the order most likely to name it.
+          for (const key of ['name', 'client', 'version', 'id', 'peerId']) {
+            const value = said[key];
+            if (typeof value === 'string' && value.trim()) return value;
+          }
+        }
+        return '—';
+      }
+
       async function fillPane(name, infoHash, entry) {
         const pane = document.querySelector(`[data-pane="${name}"]`);
         if (!pane) return;
@@ -1677,39 +1716,58 @@
               (peer) => !listed.has(peer.address),
             );
 
-            const rows = [...peers, ...extra].map((peer, index) => {
-              const address = peer.address ?? peer.ip ?? '—';
-              const have = bitfields.get(address);
-              return [
-                escapeHtml(address),
-                escapeHtml(peer.client ?? '—'),
-                escapeHtml(peer.kind ?? 'peer'),
-                escapeHtml(peer.connection ?? '—'),
-                have
-                  ? `<canvas class="piecebar thin" data-bar="peer-${index}"></canvas>`
-                  : '<span class="sub">not reported</span>',
-                peer.progress != null ? pct(peer.progress) : '—',
-                rate(peer.downloadSpeed ?? peer.dlSpeed),
-                rate(peer.uploadSpeed ?? peer.upSpeed),
-              ];
-            });
+            // Two rows a peer: the figures, then its pieces across the full
+            // width. As a column the bar took most of the table and left every
+            // other cell wrapping a word at a time -- "WebT orrent 0.3. 0" in
+            // four lines -- while the bar itself was still too narrow to read.
+            const columns = ['Address', 'Client', 'Kind', 'Conn', 'Progress', 'Down', 'Up'];
+            const body = [...peers, ...extra]
+              .map((peer, index) => {
+                const address = peer.address ?? peer.ip ?? '—';
+                const have = bitfields.get(address);
+                const cells = [
+                  escapeHtml(address),
+                  escapeHtml(clientOf(peer)),
+                  escapeHtml(peer.kind ?? 'peer'),
+                  escapeHtml(peer.connection ?? '—'),
+                  peer.progress != null ? pct(peer.progress) : '—',
+                  rate(peer.downloadSpeed ?? peer.dlSpeed),
+                  rate(peer.uploadSpeed ?? peer.upSpeed),
+                ];
+                return (
+                  `<tr>${cells.map((cell) => `<td>${cell}</td>`).join('')}</tr>` +
+                  `<tr class="peerbar"><td colspan="${columns.length}">
+                     <div class="piecerow">
+                       <span class="label">pieces</span>
+                       ${
+                         have
+                           ? `<canvas class="piecebar thin" data-bar="peer-${index}"></canvas>`
+                           : '<span class="sub">not reported</span>'
+                       }
+                       <span class="value">${peer.progress != null ? pct(peer.progress) : ''}</span>
+                     </div>
+                   </td></tr>`
+                );
+              })
+              .join('');
 
             pane.innerHTML =
-              table(
-                ['Address', 'Client', 'Kind', 'Conn', 'Has', 'Progress', 'Down', 'Up'],
-                rows,
-              ) +
+              (body === ''
+                ? '<div class="sub">Nothing to show.</div>'
+                : `<table class="rows peers"><thead><tr>${columns
+                    .map((header) => `<th>${escapeHtml(header)}</th>`)
+                    .join('')}</tr></thead><tbody>${body}</tbody></table>`) +
               (failed
                 ? `<div class="sub" style="margin-top:0.5rem">
                      The engine could not list peers: ${escapeHtml(failed)}
                    </div>`
                 : '') +
-              (rows.length > 0
+              (body !== ''
                 ? `<div class="sub" style="margin-top:0.5rem">
-                     <b>Has</b> is drawn the same way as the bars on General —
-                     a column covers many pieces and is only filled when all of
-                     them are held. <b>Progress</b> is the engine's own figure
-                     for the same peer, which is exact.
+                     Each peer's <b>pieces</b> bar is drawn the way the bars on
+                     General are — a column covers many pieces and is only
+                     filled when all of them are held. <b>Progress</b> is the
+                     engine's own figure for the same peer, which is exact.
                    </div>`
                 : '');
 

package/src/web/public.html

@@ -118,6 +118,19 @@
         gap: 0.35rem 0.9rem;
         font-size: 0.9rem;
       }
+      /* A copy button reads as a link's sibling, not as a form control. */
+      .copy {
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        background: none;
+        color: var(--muted);
+        font: inherit;
+        font-size: 0.74rem;
+        padding: 0 0.45rem;
+        cursor: pointer;
+      }
+      .copy:hover { color: var(--fg); border-color: var(--fg); }
+      .copy.done { border-color: currentColor; color: #3fb950; }
       .urls {
         margin-top: 0.7rem;
         display: grid;
@@ -390,30 +403,55 @@
             a.href = href;
             links.append(a);
           };
+          // What each endpoint is for decides how it is offered. A .torrent
+          // is a file to fetch, so it stays a link the browser downloads; a
+          // preview is a page to visit. The rest are addresses that belong
+          // somewhere else — a style, a torrent client, a feed reader — and
+          // following one here achieves nothing, so those copy.
+          const copy = (href, text) => {
+            const button = el('button', 'copy', text);
+            button.type = 'button';
+            const absolute = new URL(href, location.href).href;
+            // The URL either way: a browser on plain HTTP has no clipboard,
+            // and a tooltip somebody can select beats a button that does
+            // nothing.
+            button.title = absolute;
+            button.onclick = async () => {
+              try {
+                await navigator.clipboard.writeText(absolute);
+                button.classList.add('done');
+                button.textContent = 'copied';
+                setTimeout(() => {
+                  button.classList.remove('done');
+                  button.textContent = text;
+                }, 1200);
+              } catch {
+                button.textContent = 'copy failed — it is in the tooltip';
+              }
+            };
+            links.append(button);
+          };
+
           const ends = entry.endpoints;
-          if (ends.tileJson) add(ends.tileJson, 'TileJSON');
+          if (ends.tileJson) copy(ends.tileJson, 'TileJSON');
           // The newest build's preview, which is what "show me this
           // category" means.
           if (ends.preview) add(ends.preview, 'preview');
-          if (ends.torrent) add(ends.torrent, '.torrent');
-          if (ends.magnet) add(ends.magnet, 'magnet');
-          if (ends.feed) add(ends.feed, 'RSS');
-          card.append(links);
-
-          const urls = el('div', 'urls');
-          // The one worth copying: the TileJSON URL with the .torrent URL and
-          // the magnet in its fragment, which a plain client fetches over HTTP
-          // and a swarm-aware one joins directly.
-          if (ends.styleUrl) {
-            urls.append(
-              urlRow('style URL', new URL(ends.styleUrl, location.href).href),
-            );
-          } else if (ends.tileJson) {
-            urls.append(
-              urlRow('TileJSON', new URL(ends.tileJson, location.href).href),
-            );
+          // A file, so a link the browser saves rather than renders.
+          if (ends.torrent) {
+            const a = el('a', null, '.torrent');
+            a.href = ends.torrent;
+            a.download = '';
+            links.append(a);
           }
-          if (urls.childElementCount > 0) card.append(urls);
+          if (ends.magnet) copy(ends.magnet, 'magnet');
+          if (ends.feed) copy(ends.feed, 'RSS');
+          // The one worth copying and the one nobody wants to read: a TileJSON
+          // URL carrying the .torrent URL and a percent-encoded magnet in its
+          // fragment. Printed in full it was most of the card — several
+          // hundred characters of it — and it is never read, only pasted.
+          if (ends.styleUrl) copy(ends.styleUrl, 'style URL');
+          card.append(links);
 
           host.append(card);
         }