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     return import(`../recordings/${fname}#nocache`);
  23 }
  24
  25 function enableUI(recording) {
  26     var iterations = WebUtil.getQueryVar('iterations', 3);
  27     document.getElementById('iterations').value = iterations;
  28
  29     var mode = WebUtil.getQueryVar('mode', 3);
  30     if (mode === 'realtime') {
  31         document.getElementById('mode2').checked = true;
  32     } else {
  33         document.getElementById('mode1').checked = true;
  34     }
  35
  36     message("VNC_frame_data.length: " + recording.VNC_frame_data.length);
  37
  38     const startButton = document.getElementById('startButton');
  39     startButton.disabled = false
  40     startButton.addEventListener('click', start);
  41
  42     frames = recording.VNC_frame_data;
  43     encoding = recording.VNC_frame_encoding;
  44 }
  45
  46 const notification = function (rfb, mesg, level, options) {
  47     document.getElementById('VNC_status').textContent = mesg;
  48 }
  49
  50 function IterationPlayer (iterations, frames, encoding) {
  51     this._iterations = iterations;
  52
  53     this._iteration = undefined;
  54     this._player = undefined;
  55
  56     this._start_time = undefined;
  57
  58     this._frames = frames;
  59     this._encoding = encoding;
  60
  61     this._state = 'running';
  62
  63     this.onfinish = function() {};
  64     this.oniterationfinish = function() {};
  65     this.rfbdisconnected = function() {};
  66     this.rfbnotification = function() {};
  67 }
  68
  69 IterationPlayer.prototype = {
  70     start: function (mode) {
  71         this._iteration = 0;
  72         this._start_time = (new Date()).getTime();
  73
  74         this._realtime = mode.startsWith('realtime');
  75         this._trafficMgmt = !mode.endsWith('-no-mgmt');
  76
  77         this._nextIteration();
  78     },
  79
  80     _nextIteration: function () {
  81         const player = new RecordingPlayer(this._frames, this._encoding, this._disconnected.bind(this), this._notification.bind(this));
  82         player.onfinish = this._iterationFinish.bind(this);
  83
  84         if (this._state !== 'running') { return; }
  85
  86         this._iteration++;
  87         if (this._iteration > this._iterations) {
  88             this._finish();
  89             return;
  90         }
  91
  92         player.run(this._realtime, this._trafficMgmt);
  93     },
  94
  95     _finish: function () {
  96         const endTime = (new Date()).getTime();
  97         const totalDuration = endTime - this._start_time;
  98
  99         const evt = new Event('finish');
 100         evt.duration = totalDuration;
 101         evt.iterations = this._iterations;
 102         this.onfinish(evt);
 103     },
 104
 105     _iterationFinish: function (duration) {
 106         const evt = new Event('iterationfinish');
 107         evt.duration = duration;
 108         evt.number = this._iteration;
 109         this.oniterationfinish(evt);
 110
 111         this._nextIteration();
 112     },
 113
 114     _disconnected: function (rfb, reason, frame) {
 115         if (reason) {
 116             this._state = 'failed';
 117         }
 118
 119         var evt = new Event('rfbdisconnected');
 120         evt.reason = reason;
 121         evt.frame = frame;
 122
 123         this.onrfbdisconnected(evt);
 124     },
 125
 126     _notification: function (rfb, msg, level, options) {
 127         var evt = new Event('rfbnotification');
 128         evt.message = msg;
 129         evt.level = level;
 130         evt.options = options;
 131
 132         this.onrfbnotification(evt);
 133     },
 134 };
 135
 136 function start() {
 137     document.getElementById('startButton').value = "Running";
 138     document.getElementById('startButton').disabled = true;
 139
 140     const iterations = document.getElementById('iterations').value;
 141
 142     var mode;
 143
 144     if (document.getElementById('mode1').checked) {
 145         message(`Starting performance playback (fullspeed) [${iterations} iteration(s)]`);
 146         mode = 'perftest';
 147     } else {
 148         message(`Starting realtime playback [${iterations} iteration(s)]`);
 149         mode = 'realtime';
 150     }
 151
 152     const player = new IterationPlayer(iterations, frames, encoding);
 153     player.oniterationfinish = function (evt) {
 154         message(`Iteration ${evt.number} took ${evt.duration}ms`);
 155     };
 156     player.onrfbdisconnected = function (evt) {
 157         if (evt.reason) {
 158             message(`noVNC sent disconnected during iteration ${evt.iteration} frame ${evt.frame}`);
 159         }
 160     };
 161     player.onrfbnotification = function (evt) {
 162         document.getElementById('VNC_status').textContent = evt.message;
 163     };
 164     player.onfinish = function (evt) {
 165         const iterTime = parseInt(evt.duration / evt.iterations, 10);
 166         message(`${evt.iterations} iterations took ${evt.duration}ms (average ${iterTime}ms / iteration)`);
 167
 168         document.getElementById('startButton').disabled = false;
 169         document.getElementById('startButton').value = "Start";
 170     };
 171     player.start(mode);
 172 }
 173
 174 loadFile().then(enableUI).catch(message);