tests/playback-ui.js

   1 /* global vncFrameData, vncFrameEncoding */
   2
   3 import * as WebUtil from '../app/webutil.js';
   4 import RecordingPlayer from './playback.js';
   5 import Base64 from '../core/base64.js';
   6
   7 let frames = 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("Loaded " + vncFrameData.length + " frames");
  45
  46     const startButton = document.getElementById('startButton');
  47     startButton.disabled = false;
  48     startButton.addEventListener('click', start);
  49
  50     message("Converting...");
  51
  52     frames = vncFrameData;
  53
  54     let encoding;
  55     // Only present in older recordings
  56     if (window.vncFrameEncoding) {
  57         encoding = vncFrameEncoding;
  58     } else {
  59         let frame = frames[0];
  60         let start = frame.indexOf('{', 1) + 1;
  61         if (frame.slice(start, start+4) === 'UkZC') {
  62             encoding = 'base64';
  63         } else {
  64             encoding = 'binary';
  65         }
  66     }
  67
  68     for (let i = 0;i < frames.length;i++) {
  69         let frame = frames[i];
  70
  71         if (frame === "EOF") {
  72             frames.splice(i);
  73             break;
  74         }
  75
  76         let dataIdx = frame.indexOf('{', 1) + 1;
  77
  78         let time = parseInt(frame.slice(1, dataIdx - 1));
  79
  80         let u8;
  81         if (encoding === 'base64') {
  82             u8 = Base64.decode(frame.slice(dataIdx));
  83         } else {
  84             u8 = new Uint8Array(frame.length - dataIdx);
  85             for (let j = 0; j < frame.length - dataIdx; j++) {
  86                 u8[j] = frame.charCodeAt(dataIdx + j);
  87             }
  88         }
  89
  90         frames[i] = { fromClient: frame[0] === '}',
  91                       timestamp: time,
  92                       data: u8 };
  93     }
  94
  95     message("Ready");
  96 }
  97
  98 class IterationPlayer {
  99     constructor(iterations, frames) {
 100         this._iterations = iterations;
 101
 102         this._iteration = undefined;
 103         this._player = undefined;
 104
 105         this._startTime = undefined;
 106
 107         this._frames = frames;
 108
 109         this._state = 'running';
 110
 111         this.onfinish = () => {};
 112         this.oniterationfinish = () => {};
 113         this.rfbdisconnected = () => {};
 114     }
 115
 116     start(realtime) {
 117         this._iteration = 0;
 118         this._startTime = (new Date()).getTime();
 119
 120         this._realtime = realtime;
 121
 122         this._nextIteration();
 123     }
 124
 125     _nextIteration() {
 126         const player = new RecordingPlayer(this._frames, this._disconnected.bind(this));
 127         player.onfinish = this._iterationFinish.bind(this);
 128
 129         if (this._state !== 'running') { return; }
 130
 131         this._iteration++;
 132         if (this._iteration > this._iterations) {
 133             this._finish();
 134             return;
 135         }
 136
 137         player.run(this._realtime, false);
 138     }
 139
 140     _finish() {
 141         const endTime = (new Date()).getTime();
 142         const totalDuration = endTime - this._startTime;
 143
 144         const evt = new CustomEvent('finish',
 145                                     { detail:
 146                                       { duration: totalDuration,
 147                                         iterations: this._iterations } } );
 148         this.onfinish(evt);
 149     }
 150
 151     _iterationFinish(duration) {
 152         const evt = new CustomEvent('iterationfinish',
 153                                     { detail:
 154                                       { duration: duration,
 155                                         number: this._iteration } } );
 156         this.oniterationfinish(evt);
 157
 158         this._nextIteration();
 159     }
 160
 161     _disconnected(clean, frame) {
 162         if (!clean) {
 163             this._state = 'failed';
 164         }
 165
 166         const evt = new CustomEvent('rfbdisconnected',
 167                                     { detail:
 168                                       { clean: clean,
 169                                         frame: frame,
 170                                         iteration: this._iteration } } );
 171         this.onrfbdisconnected(evt);
 172     }
 173 }
 174
 175 function start() {
 176     document.getElementById('startButton').value = "Running";
 177     document.getElementById('startButton').disabled = true;
 178
 179     const iterations = document.getElementById('iterations').value;
 180
 181     let realtime;
 182
 183     if (document.getElementById('mode1').checked) {
 184         message(`Starting performance playback (fullspeed) [${iterations} iteration(s)]`);
 185         realtime = false;
 186     } else {
 187         message(`Starting realtime playback [${iterations} iteration(s)]`);
 188         realtime = true;
 189     }
 190
 191     const player = new IterationPlayer(iterations, frames);
 192     player.oniterationfinish = (evt) => {
 193         message(`Iteration ${evt.detail.number} took ${evt.detail.duration}ms`);
 194     };
 195     player.onrfbdisconnected = (evt) => {
 196         if (!evt.detail.clean) {
 197             message(`noVNC sent disconnected during iteration ${evt.detail.iteration} frame ${evt.detail.frame}`);
 198         }
 199     };
 200     player.onfinish = (evt) => {
 201         const iterTime = parseInt(evt.detail.duration / evt.detail.iterations, 10);
 202         message(`${evt.detail.iterations} iterations took ${evt.detail.duration}ms (average ${iterTime}ms / iteration)`);
 203
 204         document.getElementById('startButton').disabled = false;
 205         document.getElementById('startButton').value = "Start";
 206     };
 207     player.start(realtime);
 208 }
 209
 210 loadFile().then(enableUI).catch(e => message("Error loading recording: " + e));