feat: add timeslider playback speed setting (#7541)

Add a core timeslider playback speed setting with an original-speed default, a realtime mode that uses revision timestamps, and frontend coverage for the new behavior.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: JohnMcLear

src/locales/en.json

@@ -171,6 +171,12 @@
   "timeslider.exportCurrent": "Export current version as:",
   "timeslider.version": "Version {{version}}",
   "timeslider.saved": "Saved {{month}} {{day}}, {{year}}",
+  "timeslider.settings.playbackSpeed": "Playback speed:",
+  "timeslider.settings.playbackSpeed.original": "Original speed",
+  "timeslider.settings.playbackSpeed.realtime": "Realtime",
+  "timeslider.settings.playbackSpeed.200ms": "200 ms",
+  "timeslider.settings.playbackSpeed.500ms": "500 ms",
+  "timeslider.settings.playbackSpeed.1000ms": "1000 ms",
 
   "timeslider.playPause": "Playback / Pause Pad Contents",
   "timeslider.backRevision":"Go back a revision in this Pad",

src/static/js/broadcast_slider.ts

@@ -43,6 +43,26 @@ const loadBroadcastSliderJS = (fireWhenAllScriptsAreLoaded) => {
     const slidercallbacks = [];
     const savedRevisions = [];
     let sliderPlaying = false;
+    let playbackSpeed = '100';
+
+    const getPlaybackDelay = () => {
+      if (playbackSpeed !== 'realtime') return Number(playbackSpeed);
+      const path = window.revisionInfo.getPath(getSliderPosition(), getSliderPosition() + 1);
+      if (path.status !== 'complete' || path.times.length === 0) return null;
+      const delay = Number(path.times[0]);
+      return Number.isFinite(delay) ? Math.max(0, delay) : null;
+    };
+
+    const scheduleNextPlaybackStep = () => {
+      const delay = getPlaybackDelay();
+      if (delay == null) {
+        setTimeout(() => {
+          if (sliderPlaying) scheduleNextPlaybackStep();
+        }, 100);
+        return;
+      }
+      setTimeout(playButtonUpdater, delay);
+    };
 
     const _callSliderCallbacks = (newval) => {
       sliderPos = newval;
@@ -180,7 +200,11 @@ const loadBroadcastSliderJS = (fireWhenAllScriptsAreLoaded) => {
         }
         setSliderPosition(getSliderPosition() + 1);
 
-        setTimeout(playButtonUpdater, 100);
+        if (playbackSpeed === 'realtime') {
+          scheduleNextPlaybackStep();
+        } else {
+          setTimeout(playButtonUpdater, getPlaybackDelay());
+        }
       }
     };
 
@@ -190,7 +214,11 @@ const loadBroadcastSliderJS = (fireWhenAllScriptsAreLoaded) => {
       if (!sliderPlaying) {
         if (getSliderPosition() === sliderLength) setSliderPosition(0);
         sliderPlaying = true;
-        playButtonUpdater();
+        if (playbackSpeed === 'realtime') {
+          scheduleNextPlaybackStep();
+        } else {
+          playButtonUpdater();
+        }
       } else {
         sliderPlaying = false;
       }
@@ -202,6 +230,10 @@ const loadBroadcastSliderJS = (fireWhenAllScriptsAreLoaded) => {
       setSliderPosition,
       getSliderLength,
       setSliderLength,
+      setPlaybackSpeed: (value) => {
+        playbackSpeed = value;
+      },
+      getPlaybackSpeed: () => playbackSpeed,
       isSliderActive: () => sliderActive,
       playpause,
       addSavedRevision,

src/static/js/timeslider.ts

@@ -34,6 +34,7 @@ const socketio = require('./socketio');
 import html10n from '../js/vendors/html10n'
 let token, padId, exportLinks, socket, changesetLoader, BroadcastSlider;
 let cp = '';
+const playbackSpeedCookie = 'timesliderPlaybackSpeed';
 
 const init = () => {
   padutils.setupGlobalExceptionHandler();
@@ -112,6 +113,7 @@ const fireWhenAllScriptsAreLoaded = [];
 const handleClientVars = (message) => {
   // save the client Vars
   window.clientVars = message.data;
+  cp = window.clientVars.cookiePrefix || '';
 
   if (window.clientVars.sessionRefreshInterval) {
     const ping =
@@ -172,6 +174,15 @@ const handleClientVars = (message) => {
   $('#viewfontmenu').on('change', function () {
     $('#innerdocbody').css('font-family', $(this).val() || '');
   });
+
+  const savedPlaybackSpeed = Cookies.get(`${cp}${playbackSpeedCookie}`) || '100';
+  $('#playbackspeed').val(savedPlaybackSpeed);
+  BroadcastSlider.setPlaybackSpeed(savedPlaybackSpeed);
+  $('#playbackspeed').on('change', function () {
+    const speed = String($(this).val() || '100');
+    Cookies.set(`${cp}${playbackSpeedCookie}`, speed);
+    BroadcastSlider.setPlaybackSpeed(speed);
+  });
 };
 
 exports.baseURL = '';

src/templates/timeslider.html

@@ -238,6 +238,16 @@ <h1 data-l10n-id="pad.settings.padSettings"></h1>
         <input type="checkbox" id="options-followContents" checked="checked">
         <label for="options-followContents" data-l10n-id="timeslider.followContents"></label>
       </p>
+      <p>
+        <label for="playbackspeed" data-l10n-id="timeslider.settings.playbackSpeed">Playback speed:</label>
+        <select id="playbackspeed">
+          <option value="100" data-l10n-id="timeslider.settings.playbackSpeed.original">Original speed</option>
+          <option value="realtime" data-l10n-id="timeslider.settings.playbackSpeed.realtime">Realtime</option>
+          <option value="200" data-l10n-id="timeslider.settings.playbackSpeed.200ms">200 ms</option>
+          <option value="500" data-l10n-id="timeslider.settings.playbackSpeed.500ms">500 ms</option>
+          <option value="1000" data-l10n-id="timeslider.settings.playbackSpeed.1000ms">1000 ms</option>
+        </select>
+      </p>
     </div></div>
   </div>
 </body>

src/tests/frontend-new/specs/timeslider_playback_speed.spec.ts

@@ -0,0 +1,108 @@
+import {expect, Page, test} from "@playwright/test";
+import {clearPadContent, goToNewPad, writeToPad} from "../helper/padHelper";
+
+test.describe('timeslider playback speed', function () {
+  test.describe.configure({mode: 'serial'});
+
+  test.beforeEach(async ({context}) => {
+    await context.clearCookies();
+  });
+
+  const waitForTimesliderReady = async (page: Page) => {
+    await page.waitForSelector('#timeslider-wrapper', {state: 'visible'});
+    await page.waitForFunction(() => {
+      return Boolean(document.querySelector('#playpause_button_icon')?.getAttribute('title'));
+    });
+  };
+
+  test('defaults to original speed with no cookies', async function ({page}) {
+    const padId = await goToNewPad(page);
+    await clearPadContent(page);
+    await writeToPad(page, 'One');
+    await page.waitForTimeout(1000);
+
+    await page.goto(`http://localhost:9001/p/${padId}/timeslider#0`);
+    await waitForTimesliderReady(page);
+
+    await expect.poll(async () => await page.evaluate(() => {
+      const select = document.querySelector('#playbackspeed') as HTMLSelectElement | null;
+      return {
+        value: select?.value,
+        firstOptionText: select?.options[0]?.text,
+        selectedText: select?.options[select.selectedIndex]?.text,
+      };
+    })).toEqual({
+      value: '100',
+      firstOptionText: 'Original speed',
+      selectedText: 'Original speed',
+    });
+  });
+
+  test('persists the selected playback speed', async function ({page}) {
+    const padId = await goToNewPad(page);
+    await clearPadContent(page);
+    await writeToPad(page, 'One');
+    await page.waitForTimeout(300);
+    await writeToPad(page, ' Two');
+    await page.waitForTimeout(1000);
+
+    await page.goto(`http://localhost:9001/p/${padId}/timeslider#1`);
+    await waitForTimesliderReady(page);
+
+    await page.evaluate(() => {
+      const select = document.querySelector('#playbackspeed') as HTMLSelectElement;
+      select.value = '500';
+      select.dispatchEvent(new Event('change', {bubbles: true}));
+    });
+
+    await expect.poll(async () => await page.evaluate(() => {
+      const select = document.querySelector('#playbackspeed') as HTMLSelectElement | null;
+      return {
+        controlValue: select?.value,
+      };
+    })).toEqual({controlValue: '500'});
+
+    await page.reload();
+    await waitForTimesliderReady(page);
+
+    await expect.poll(async () => await page.evaluate(() => {
+      const select = document.querySelector('#playbackspeed') as HTMLSelectElement | null;
+      return {
+        controlValue: select?.value,
+      };
+    })).toEqual({controlValue: '500'});
+  });
+
+  test('uses revision timestamps for realtime playback', async function ({page}) {
+    const padId = await goToNewPad(page);
+    await clearPadContent(page);
+    await writeToPad(page, 'A');
+    await page.waitForTimeout(1000);
+
+    await page.goto(`http://localhost:9001/p/${padId}/timeslider#0`);
+    await waitForTimesliderReady(page);
+
+    const scheduledDelays = await page.evaluate(() => {
+      (window as any).revisionInfo.getPath = () => ({
+        status: 'complete',
+        times: [1234],
+      });
+      const select = document.querySelector('#playbackspeed') as HTMLSelectElement;
+      select.value = 'realtime';
+      select.dispatchEvent(new Event('change', {bubbles: true}));
+      (window as any).__playbackTimeouts = [];
+      window.setTimeout = ((fn: TimerHandler, delay?: number, ...args: any[]) => {
+        (window as any).__playbackTimeouts.push({
+          delay,
+          name: typeof fn === 'function' ? fn.name : String(fn),
+        });
+        return 1 as any;
+      }) as typeof window.setTimeout;
+      (document.querySelector('#playpause_button_icon') as HTMLButtonElement).click();
+      return (window as any).__playbackTimeouts;
+    });
+
+    const scheduledDelay = scheduledDelays[0]?.delay;
+    expect(scheduledDelay).toBe(1234);
+  });
+});