tests/playback-ui.js

   1 /* global VNC_frame_data, VNC_frame_encoding */
   2
   3 import * as WebUtil from '../app/webutil.js';
   4 import RecordingPlayer from './playback.js';
   5
   6 let frames = null;
   7 let encoding = null;
   8
   9 function message(str) {
  10     const cell = document.getElementById('messages');
  11     cell.textContent += str + "\n";
  12     cell.scrollTop = cell.scrollHeight;
  13 }
  14
  15 function loadFile() {
  16     const fname = WebUtil.getQueryVar('data', null);
  17
  18     if (!fname) {
  19         return Promise.reject("Must specify data=FOO in query string.");
  20     }
  21
  22     message("Loading " + fname);
  23
  24     return new Promise((resolve, reject) => {
  25         const script = document.createElement("script");
  26         script.onload = resolve;
  27         script.onerror = reject;
  28         document.body.appendChild(script);
  29         script.src = "../recordings/" + fname;
  30     });
  31 }
  32
  33 function enableUI() {
  34     const iterations = WebUtil.getQueryVar('iterations', 3);
  35     document.getElementById('iterations').value = iterations;
  36
  37     const mode = WebUtil.getQueryVar('mode', 3);
  38     if (mode === 'realtime') {
  39         document.getElementById('mode2').checked = true;
  40     } else {
  41         document.getElementById('mode1').checked = true;
  42     }
  43
  44     message("VNC_frame_data.length: " + VNC_frame_data.length);
  45
  46     const startButton = document.getElementById('startButton');
  47     startButton.disabled = false;
  48     startButton.addEventListener('click', start);
  49
  50     frames = VNC_frame_data;
  51     // Only present in older recordings
  52     if (window.VNC_frame_encoding)
  53         encoding = VNC_frame_encoding;
  54 }
  55
  56 class IterationPlayer {
  57     constructor(iterations, frames, encoding) {
  58         this._iterations = iterations;
  59
  60         this._iteration = undefined;
  61         this._player = undefined;
  62
  63         this._start_time = undefined;
  64
  65         this._frames = frames;
  66         this._encoding = encoding;
  67
  68         this._state = 'running';
  69
  70         this.onfinish = () => {};
  71         this.oniterationfinish = () => {};
  72         this.rfbdisconnected = () => {};
  73     }
  74
  75     start(mode) {
  76         this._iteration = 0;
  77         this._start_time = (new Date()).getTime();
  78
  79         this._realtime = mode.startsWith('realtime');
  80         this._trafficMgmt = !mode.endsWith('-no-mgmt');
  81
  82         this._nextIteration();
  83     }
  84
  85     _nextIteration() {
  86         const player = new RecordingPlayer(this._frames, this._encoding, this._disconnected.bind(this));
  87         player.onfinish = this._iterationFinish.bind(this);
  88
  89         if (this._state !== 'running') { return; }
  90
  91         this._iteration++;
  92         if (this._iteration > this._iterations) {
  93             this._finish();
  94             return;
  95         }
  96
  97         player.run(this._realtime, this._trafficMgmt);
  98     }
  99
 100     _finish() {
 101         const endTime = (new Date()).getTime();
 102         const totalDuration = endTime - this._start_time;
 103
 104         const evt = new Event('finish');
 105         evt.duration = totalDuration;
 106         evt.iterations = this._iterations;
 107         this.onfinish(evt);
 108     }
 109
 110     _iterationFinish(duration) {
 111         const evt = new Event('iterationfinish');
 112         evt.duration = duration;
 113         evt.number = this._iteration;
 114         this.oniterationfinish(evt);
 115
 116         this._nextIteration();
 117     }
 118
 119     _disconnected(clean, frame) {
 120         if (!clean) {
 121             this._state = 'failed';
 122         }
 123
 124         const evt = new Event('rfbdisconnected');
 125         evt.clean = clean;
 126         evt.frame = frame;
 127         evt.iteration = this._iteration;
 128
 129         this.onrfbdisconnected(evt);
 130     }
 131 }
 132
 133 function start() {
 134     document.getElementById('startButton').value = "Running";
 135     document.getElementById('startButton').disabled = true;
 136
 137     const iterations = document.getElementById('iterations').value;
 138
 139     let mode;
 140
 141     if (document.getElementById('mode1').checked) {
 142         message(`Starting performance playback (fullspeed) [${iterations} iteration(s)]`);
 143         mode = 'perftest';
 144     } else {
 145         message(`Starting realtime playback [${iterations} iteration(s)]`);
 146         mode = 'realtime';
 147     }
 148
 149     const player = new IterationPlayer(iterations, frames, encoding);
 150     player.oniterationfinish = (evt) => {
 151         message(`Iteration ${evt.number} took ${evt.duration}ms`);
 152     };
 153     player.onrfbdisconnected = (evt) => {
 154         if (!evt.clean) {
 155             message(`noVNC sent disconnected during iteration ${evt.iteration} frame ${evt.frame}`);
 156         }
 157     };
 158     player.onfinish = (evt) => {
 159         const iterTime = parseInt(evt.duration / evt.iterations, 10);
 160         message(`${evt.iterations} iterations took ${evt.duration}ms (average ${iterTime}ms / iteration)`);
 161
 162         document.getElementById('startButton').disabled = false;
 163         document.getElementById('startButton').value = "Start";
 164     };
 165     player.start(mode);
 166 }
 167
 168 loadFile().then(enableUI).catch(e => message("Error loading recording: " + e));