Merge branch 'release/3.1.2'

README.md

@@ -90,7 +90,7 @@ inside an empty `<div>` element:
 Add `asciinema-player` to your `devDependencies`:
 
 ```bash
-npm install --save-dev [email protected].1
+npm install --save-dev [email protected].2
 ```
 
 Add empty `<div id="demo"></div>` element to your page to contain the player.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "asciinema-player",
   "description": "Web player for terminal session recordings.",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "author": "Marcin Kulik",
   "homepage": "https://github.com/asciinema/asciinema-player",
   "repository": {

src/buffer.js

@@ -27,7 +27,8 @@ function nullBuffer(feed) {
 function buffer(feed, bufferTime) {
   const queue = new Queue();
   const maxFrameTime = 1000.0 / 60;
-  let startTime;
+  let startWallTime;
+  let baseStreamTime;
   let stop = false;
   let prevElapsedStreamTime = -maxFrameTime;
 
@@ -37,30 +38,31 @@ function buffer(feed, bufferTime) {
       if (stop) return;
 
       for (const event of events) {
-        const elapsedStreamTime = (event[0] + bufferTime) * 1000;
+        const elapsedStreamTime = (event[0] - baseStreamTime + bufferTime) * 1000;
 
         if (elapsedStreamTime - prevElapsedStreamTime < maxFrameTime) {
           feed(event[2]);
           continue;
         }
 
-        prevElapsedStreamTime = elapsedStreamTime;
-        const elapsedWallTime = now() - startTime;
+        const elapsedWallTime = now() - startWallTime;
 
         if (elapsedStreamTime > elapsedWallTime) {
           await sleep(elapsedStreamTime - elapsedWallTime);
           if (stop) return;
         }
 
         feed(event[2]);
+        prevElapsedStreamTime = elapsedStreamTime;
       }
     }
   }, 0);
 
   return {
     pushEvent(event) {
-      if (startTime === undefined) {
-        startTime = now();
+      if (startWallTime === undefined) {
+        startWallTime = now();
+        baseStreamTime = event[0];
       }
 
       if (event[1] != 'o') return;
@@ -69,11 +71,12 @@ function buffer(feed, bufferTime) {
     },
 
     pushText(text) {
-      if (startTime === undefined) {
-        startTime = now();
+      if (startWallTime === undefined) {
+        startWallTime = now();
+        baseStreamTime = 0;
       }
 
-      const time = (now() - startTime) / 1000;
+      const time = (now() - startWallTime) / 1000;
       queue.push([time, 'o', text]);
     },
 

src/clock.js

@@ -0,0 +1,16 @@
+class Clock {
+  constructor(speed = 1.0) {
+    this.speed = speed;
+    this.startTime = performance.now();
+  }
+
+  getTime() {
+    return this.speed * (performance.now() - this.startTime) / 1000.0;
+  }
+
+  setTime(time) {
+    this.startTime = performance.now() - (time / this.speed) * 1000.0;
+  }
+}
+
+export default Clock;

src/components/Player.js

@@ -1,5 +1,6 @@
 import { createEffect, createMemo, Match, onCleanup, onMount, Switch } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
+import { debounce } from "../util";
 import Terminal from './Terminal';
 import ControlBar from './ControlBar';
 import LoaderOverlay from './LoaderOverlay';
@@ -96,14 +97,14 @@ export default props => {
   }
 
   const setupResizeObserver = () => {
-    resizeObserver = new ResizeObserver(_entries => {
+    resizeObserver = new ResizeObserver(debounce(_entries => {
       setState({
         containerW: wrapperRef.offsetWidth,
         containerH: wrapperRef.offsetHeight
       });
 
       wrapperRef.dispatchEvent(new CustomEvent('resize', {detail: {el: playerRef}}));
-    });
+    }, 10));
 
     resizeObserver.observe(wrapperRef);
   }

src/core.js

@@ -1,5 +1,6 @@
 import loadVt from "./vt/Cargo.toml";
 import { parseNpt } from "./util";
+import Clock from './clock';
 const vt = loadVt(); // trigger async loading of wasm
 
 
@@ -15,8 +16,8 @@ class Core {
     this.duration = null;
     this.cols = opts.cols;
     this.rows = opts.rows;
-    this.startTime = null;
     this.speed = opts.speed ?? 1.0;
+    this.clock = undefined;
     this.loop = opts.loop;
     this.idleTimeLimit = opts.idleTimeLimit;
     this.preload = opts.preload;
@@ -166,8 +167,8 @@ class Core {
   getCurrentTime() {
     if (typeof this.driver.getCurrentTime === 'function') {
       return this.driver.getCurrentTime();
-    } else if (this.startTime) {
-      return (this.now() - this.startTime) / 1000;
+    } else if (this.clock !== undefined) {
+      return this.clock.getTime();
     }
   }
 
@@ -205,7 +206,7 @@ class Core {
       this.driver.stop = stop;
     }
 
-    this.startTime = this.now();
+    this.clock = new Clock(this.speed);
     this.state = 'playing';
     this.dispatchEvent('play');
   }

src/driver/eventsource.js

@@ -1,8 +1,10 @@
 import getBuffer from '../buffer';
+import Clock from '../clock';
 
 function eventsource({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinish }) {
   let es;
   let buf;
+  let clock;
 
   function initBuffer() {
     if (buf !== undefined) buf.stop();
@@ -31,8 +33,10 @@ function eventsource({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinis
         if (e.cols !== undefined || e.width !== undefined) {
           initBuffer();
           reset(e.cols ?? e.width, e.rows ?? e.height);
+          clock = new Clock();
         } else {
           buf.pushEvent(e);
+          clock.setTime(e[0]);
         }
       });
 
@@ -46,6 +50,14 @@ function eventsource({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinis
     stop: () => {
       if (buf !== undefined) buf.stop();
       if (es !== undefined) es.close();
+    },
+
+    getCurrentTime: () => {
+      if (clock === undefined) {
+        return 0;
+      } else {
+        return clock.getTime();
+      }
     }
   }
 }

src/driver/websocket.js

@@ -1,10 +1,16 @@
 import getBuffer from '../buffer';
+import Clock from '../clock';
 
-function websocket({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinish }) {
+function exponentialDelay(attempt) {
+  return Math.min(500 * Math.pow(2, attempt), 5000);
+}
+
+function websocket({ url, bufferTime = 0, reconnectDelay = exponentialDelay }, { feed, reset, setWaiting, onFinish }) {
   const utfDecoder = new TextDecoder();
   let socket;
   let buf;
-  let reconnectDelay = 250;
+  let clock;
+  let reconnectAttempt = 0;
   let stop = false;
 
   function initBuffer() {
@@ -20,7 +26,7 @@ function websocket({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinish
       console.debug('websocket: opened');
       setWaiting(false);
       initBuffer();
-      reconnectDelay = 250;
+      reconnectAttempt = 0;
     }
 
     socket.onmessage = event => {
@@ -30,8 +36,10 @@ function websocket({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinish
         if (e.cols !== undefined || e.width !== undefined) {
           initBuffer();
           reset(e.cols ?? e.width, e.rows ?? e.height);
+          clock = new Clock();
         } else {
           buf.pushEvent(e);
+          clock.setTime(e[0]);
         }
       } else {
         buf.pushText(utfDecoder.decode(event.data));
@@ -43,10 +51,10 @@ function websocket({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinish
         console.debug('websocket: closed');
         onFinish();
       } else {
-        console.debug(`websocket: unclean close, reconnecting in ${reconnectDelay}...`);
+        const delay = reconnectDelay(reconnectAttempt++);
+        console.debug(`websocket: unclean close, reconnecting in ${delay}...`);
         setWaiting(true);
-        setTimeout(connect, reconnectDelay);
-        reconnectDelay = Math.min(reconnectDelay * 2, 5000);
+        setTimeout(connect, delay);
       }
     }
   }
@@ -60,6 +68,14 @@ function websocket({ url, bufferTime = 0 }, { feed, reset, setWaiting, onFinish
       stop = true;
       if (buf !== undefined) buf.stop();
       if (socket !== undefined) socket.close();
+    },
+
+    getCurrentTime: () => {
+      if (clock === undefined) {
+        return 0;
+      } else {
+        return clock.getTime();
+      }
     }
   }
 }

src/util.js

@@ -12,4 +12,13 @@ function parseNpt(time) {
   }
 }
 
-export { parseNpt };
+function debounce(f, delay) {
+  let timeout;
+
+  return function(...args) {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => f.apply(this, args), delay);
+  }
+}
+
+export { parseNpt, debounce };