ep_webrtc 2.5.45 → 2.5.46

package/AGENTS.md

@@ -37,12 +37,18 @@ ep_webrtc/
 
 ## Helpers used
 
-_None — `ep_plugin_helpers` is not a dependency. Adoption is part of the helpers-adoption sweep (Phase 4)._
+`ep_plugin_helpers` is a dependency. Adopted in the helpers-adoption sweep:
+
+- **`template()`** — `eejsBlock_mySettings` and `eejsBlock_styles` render their templates via the factory (plugin-qualified paths, e.g. `ep_webrtc/templates/settings.ejs`) instead of hand-rolled `eejs.require(...)`.
+- **`logger()`** — the pre-init fallback logger is a named log4js logger (`logger('ep_webrtc')`), later replaced by the per-plugin logger core supplies in `init_ep_webrtc`.
 
 
 ## Helpers NOT used
 
-_To be audited in the helpers-adoption sweep (Phase 4)._
+The plugin-specific server logic stays hand-rolled because the generic helpers don't fit:
+
+- **`settings()`** — `clientVars` does per-pad ICE-server sharding (HMAC) plus ephemeral TURN credential fetching (coturn / xirsys), and `loadSettings` does a custom `_.mergeWith` array-replace + `disabled` validation. The generic relay only passes settings through verbatim.
+- **`messageRelay()`** — `handleMessage` / `handleRTCMessage` route signalling messages P2P (broadcast vs. targeted unicast to a specific author) and meter STATS errors; the generic relay can't express that.
 
 
 ## Running tests locally

package/index.js

@@ -17,15 +17,13 @@
 const _ = require('lodash');
 const {Buffer} = require('buffer');
 const crypto = require('crypto');
-const eejs = require('ep_etherpad-lite/node/eejs/');
+const {template, logger: createLogger} = require('ep_plugin_helpers');
 const sessioninfos = require('ep_etherpad-lite/node/handler/PadMessageHandler').sessioninfos;
 const stats = require('ep_etherpad-lite/node/stats');
 const util = require('util');
 
-let logger = {};
-for (const level of ['debug', 'info', 'warn', 'error']) {
-  logger[level] = console[level].bind(console, 'ep_webrtc:');
-}
+// Overwritten with the per-plugin logger supplied by core in init_ep_webrtc.
+let logger = createLogger('ep_webrtc');
 
 const defaultSettings = {
   // The defaults here are overridden by the values in the `ep_webrtc` object from `settings.json`.
@@ -258,16 +256,14 @@ exports.init_ep_webrtc = async (hookName, {logger: l}) => {
 
 exports.setSocketIO = (hookName, {io}) => { socketio = io; };
 
-exports.eejsBlock_mySettings = (hookName, context) => {
-  context.content += eejs.require('./templates/settings.ejs', {
+exports.eejsBlock_mySettings = template('ep_webrtc/templates/settings.ejs', {
+  vars: () => ({
     audio_hard_disabled: settings.audio.disabled === 'hard',
     video_hard_disabled: settings.video.disabled === 'hard',
-  }, module);
-};
+  }),
+});
 
-exports.eejsBlock_styles = (hookName, context) => {
-  context.content += eejs.require('./templates/styles.html', {}, module);
-};
+exports.eejsBlock_styles = template('ep_webrtc/templates/styles.html');
 
 exports.loadSettings = async (hookName, {settings: {ep_webrtc: s = {}}}) => {
   settings = _.mergeWith({}, defaultSettings, s, (objV, srcV, key, obj, src) => {

package/package.json

@@ -5,7 +5,7 @@
     "url": "git@github.com:ether/ep_webrtc.git",
     "type": "git"
   },
-  "version": "2.5.45",
+  "version": "2.5.46",
   "description": "WebRTC based audio/video chat to Etherpad",
   "author": "John McLear <john@mclear.co.uk>",
   "contributors": [],
@@ -14,8 +14,10 @@
   },
   "dependencies": {
     "abort-controller": "^3.0.0",
+    "ep_plugin_helpers": "^0.6.7",
     "lodash": "^4.18.1",
-    "node-fetch": "^3.3.2"
+    "node-fetch": "^3.3.2",
+    "webrtc-adapter": "^9.0.5"
   },
   "funding": {
     "type": "individual",

package/static/css/styles.css

@@ -194,3 +194,19 @@
     margin-left: 5px;
   }
 }
+
+/*
+ * In-pad history mode (timeslider) renders the read-only pad inside an
+ * absolutely-positioned iframe — core's #history-frame-mount, inset:0,
+ * z-index:4 — that overlays #editorcontainerbox. #rtcbox is a normal
+ * in-flow child of that same container, so without this it paints
+ * *underneath* the history iframe and the live call appears to vanish the
+ * moment you start scrubbing history. The call never actually drops (the
+ * pad page stays alive in history mode); we just lift the video column
+ * above the overlay so it stays visible and usable while a reviewer scrubs
+ * through revisions and gives play-by-play commentary on the same call.
+ */
+body.history-mode #rtcbox {
+  position: relative;
+  z-index: 5;
+}

package/static/js/index.js

@@ -15,7 +15,7 @@
  */
 'use strict';
 
-require('./adapter');
+require('webrtc-adapter');
 const padcookie = require('ep_etherpad-lite/static/js/pad_cookie').padcookie;
 
 let enableDebugLogging = false;
@@ -507,6 +507,17 @@ exports.rtc = new class {
     });
     $(window).on('beforeunload', () => { this.hangupAll(); });
     $(window).on('unload', () => { this.hangupAll(); });
+    // Core fires userJoinOrUpdate only for *remote* users, so editing your own
+    // name (or colour) in the userlist never reaches the self-view tile. Watch
+    // the userlist's own name field and colour swatch and re-sync the local
+    // tile. Delegated so it survives the userlist re-rendering its controls;
+    // deferred a tick so it runs after core's notifyChangeName/renderMyUserInfo
+    // has updated pad.myUserInfo.
+    const refreshSelfView =
+        () => setTimeout(() => this.updatePeerNameAndColor(this.getUserFromId(this.getUserId())), 0);
+    $(document).on(
+        'change.ep_webrtc blur.ep_webrtc', '#myusernameedit', refreshSelfView);
+    $(document).on('click.ep_webrtc', '#mycolorpickersave', refreshSelfView);
     // Skip auto-activation when the host has no audio/video device the
     // browser can see. Bisecting against ether/ep_webrtc CI proved that
     // the OUTER pad's activate() chain — specifically when getUserMedia
@@ -823,6 +834,19 @@ exports.rtc = new class {
 
   getUserFromId(userId) {
     if (!this._pad || !this._pad.collabClient) return null;
+    // The local user is not part of collabClient's connected-users set, so
+    // resolve their own name/colour from the pad's author fields. Without this
+    // the self-view shows "unnamed" even when the user has a name, and it never
+    // reflects a name change the user makes in the userlist (core does not fire
+    // the userJoinOrUpdate hook for the local user — see postAceInit).
+    if (userId === this.getUserId()) {
+      const myInfo = this._pad.myUserInfo || {};
+      return {
+        userId,
+        name: (this._pad.getUserName && this._pad.getUserName()) || myInfo.name,
+        colorId: myInfo.colorId != null ? myInfo.colorId : clientVars.userColor,
+      };
+    }
     const result = this._pad.collabClient
         .getConnectedUsers()
         .filter((user) => user.userId === userId);

package/static/tests/frontend-new/specs/history_mode.spec.ts

@@ -0,0 +1,79 @@
+import {expect, test} from '@playwright/test';
+import {goToNewPadWithParams, installFakeGetUserMedia} from '../helper/utils';
+
+// Etherpad 3.2.x enters the timeslider "in-place" on the pad URL (pad_mode.ts):
+// it never reloads the page or drops the pad socket, so an active ep_webrtc
+// call keeps running. The catch is purely visual — core mounts the read-only
+// history view in an absolutely-positioned iframe (#history-frame-mount,
+// inset:0, z-index:4) that overlays #editorcontainerbox, where ep_webrtc's
+// #rtcbox lives. Without our `body.history-mode #rtcbox { z-index: 5 }` rule
+// the video column paints underneath that overlay and the call appears to
+// vanish the moment you scrub history. These tests prove the call stays
+// visible (and stacked above the overlay) in history mode and survives
+// exiting back to live editing.
+test.describe('ep_webrtc in history mode (timeslider)', () => {
+  // serial: the tests share one page and walk it through live -> history -> live.
+  test.describe.configure({mode: 'serial'});
+
+  let page: import('@playwright/test').Page;
+
+  test.beforeAll(async ({browser}) => {
+    test.setTimeout(60_000);
+    page = await browser.newPage();
+    await goToNewPadWithParams(page, {});
+    await installFakeGetUserMedia(page);
+    // Start the call explicitly (blocks until activation completes), then wait
+    // for the self-view <video> so we know the call is genuinely up.
+    await page.evaluate(() => (window as any).ep_webrtc.activate());
+    await page.waitForFunction(() => (window as any).$('#rtcbox').data('initialized'),
+        undefined, {timeout: 5000});
+    await page.waitForFunction(() => document.querySelectorAll('#rtcbox video').length >= 1,
+        undefined, {timeout: 5000});
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  test('entering history mode keeps the call visible and above the overlay', async () => {
+    // pad_mode.ts enters history in-place when a revision hash appears
+    // (hashchange listener). Use the canonical '#rev/N' form so enterHistory
+    // doesn't pushState a second entry — keeps the exit test's button the
+    // single deterministic way back to live mode.
+    await page.evaluate(() => { window.location.hash = '#rev/0'; });
+    await page.waitForSelector('body.history-mode', {timeout: 10_000});
+    await page.waitForSelector('#history-frame-mount iframe', {timeout: 10_000});
+
+    // The page never reloaded, so the call is still up: the self-view <video>
+    // is still in the DOM.
+    expect(await page.locator('#rtcbox video').count()).toBeGreaterThanOrEqual(1);
+
+    // Our rule applied: #rtcbox is lifted above the z-index:4 history overlay.
+    expect(await page.evaluate(
+        () => getComputedStyle(document.querySelector('#rtcbox')!).zIndex)).toBe('5');
+
+    // And it actually wins the stack: hit-testing the centre of the video tile
+    // lands inside #rtcbox, not the overlay iframe (#history-frame-mount).
+    const rtcboxIsOnTop = await page.evaluate(() => {
+      const tile = document.querySelector('#rtcbox .video-container') ||
+          document.querySelector('#rtcbox')!;
+      const r = tile.getBoundingClientRect();
+      const el = document.elementFromPoint(
+          Math.round(r.left + r.width / 2), Math.round(r.top + r.height / 2));
+      for (let n: Element | null = el; n; n = n.parentElement) {
+        if (n.id === 'rtcbox') return true;
+        if (n.id === 'history-frame-mount') return false;
+      }
+      return false;
+    });
+    expect(rtcboxIsOnTop).toBe(true);
+  });
+
+  test('exiting history mode leaves the call running', async () => {
+    // The history banner's "return to pad" button calls pad_mode's exitHistory().
+    await page.click('#history-banner-return');
+    await page.waitForFunction(() => !document.body.classList.contains('history-mode'),
+        undefined, {timeout: 10_000});
+    expect(await page.locator('#rtcbox video').count()).toBeGreaterThanOrEqual(1);
+  });
+});