tests/playback-ui.js

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