Simulate time and XHR responses

Make the simulation run asynchronous so flash doesn't swallow exceptions in the ExternalInterface callback. Hook up mechanisms to advance the clock and simulate XHR responses for playlists and segments. Currently, segment responses are delivered as if the bandwidth at the current time was available for the entire transmission time, which is not correct.

@@ -57,7 +57,7 @@
                   After <input name=time0 class=time type=number value=0 min=0> seconds, 
                   After <input name=time0 class=time type=number value=0 min=0> seconds, 
                 </label>
                 </label>
                 <label>
                 <label>
-                  the link capacity is <input name=bandwidth0 class=bandwidth type=number value=100> bits per second
+                  the link capacity is <input name=bandwidth0 class=bandwidth type=number value=32768> bits per second
                 </label>
                 </label>
               </li>
               </li>
             </ol>
             </ol>

 (function(window, document) {
 (function(window, document) {
   'use strict';
   'use strict';
   var segmentDuration = 9, // seconds
   var segmentDuration = 9, // seconds
-      duration = segmentDuration * 100, // 100 segments
-
-      clock,
-      fakeXhr,
-      requests,
+      segmentCount = 100,
+      duration = segmentDuration * segmentCount,
+      propagationDelay = 1,
 
 
       runSimulation,
       runSimulation,
+      playlistResponse,
       player,
       player,
       runButton,
       runButton,
       parameters,
       parameters,
@@ -19,17 +18,16 @@
       displayTimeline;
       displayTimeline;
 
 
   // mock out the environment and dependencies
   // mock out the environment and dependencies
-  clock = sinon.useFakeTimers();
-  fakeXhr = sinon.useFakeXMLHttpRequest();
-  requests = [];
-  fakeXhr.onCreate = function(xhr) {
-    requests.push(xhr);
-  };
   videojs.options.flash.swf = '../../node_modules/video.js/dist/video-js/video-js.swf';
   videojs.options.flash.swf = '../../node_modules/video.js/dist/video-js/video-js.swf';
   videojs.Hls.SegmentParser = function() {
   videojs.Hls.SegmentParser = function() {
     this.getFlvHeader = function() {
     this.getFlvHeader = function() {
       return new Uint8Array([]);
       return new Uint8Array([]);
-    }
+    };
+    this.parseSegmentBinaryData = function() {};
+    this.flushTags = function() {};
+    this.tagsAvailable = function() {
+      return false;
+    };
   };
   };
 
 
   // a dynamic number of time-bandwidth pairs may be defined to drive the simulation
   // a dynamic number of time-bandwidth pairs may be defined to drive the simulation
@@ -70,20 +68,49 @@
     };
     };
   };
   };
 
 
+  // send a mock playlist response
+  playlistResponse = function(bitrate) {
+    var i = segmentCount,
+        response = '#EXTM3U\n';
+
+    while (i--) {
+      response += '#EXTINF:' + segmentDuration + ',\n';
+      response += bitrate + '-' + (segmentCount - i) + '\n';
+    }
+    response += '#EXT-X-ENDLIST\n';
+
+    return response;
+  };
+
   // run the simulation
   // run the simulation
-  runSimulation = function(options) {
+  runSimulation = function(options, done) {
     var results = [],
     var results = [],
         bandwidths = options.bandwidths,
         bandwidths = options.bandwidths,
         fixture = document.getElementById('fixture'),
         fixture = document.getElementById('fixture'),
+
+        realSetTimeout = window.setTimeout,
+        clock,
+        fakeXhr,
+        requests,
         video,
         video,
-        t,
-        i;
+        t = 0,
+        i = 0;
 
 
     // clean up the last run if necessary
     // clean up the last run if necessary
     if (player) {
     if (player) {
       player.dispose();
       player.dispose();
     };
     };
 
 
+
+    // mock out the environment
+    clock = sinon.useFakeTimers();
+    fakeXhr = sinon.useFakeXMLHttpRequest();
+    requests = [];
+    fakeXhr.onCreate = function(xhr) {
+      xhr.startTime = t;
+      requests.push(xhr);
+    };
+
     // initialize the HLS tech
     // initialize the HLS tech
     fixture.innerHTML = '';
     fixture.innerHTML = '';
     video = document.createElement('video');
     video = document.createElement('video');
@@ -95,22 +122,40 @@
         type: 'application/x-mpegurl'
         type: 'application/x-mpegurl'
       }]
       }]
     });
     });
+
     player.ready(function() {
     player.ready(function() {
+      // run next tick so that Flash doesn't swallow exceptions
+      realSetTimeout(function() {
         var master = '#EXTM3U\n' +
         var master = '#EXTM3U\n' +
               options.playlists.reduce(function(playlists, value) {
               options.playlists.reduce(function(playlists, value) {
                 return playlists +
                 return playlists +
                   '#EXT-X-STREAM-INF:' + value + '\n' +
                   '#EXT-X-STREAM-INF:' + value + '\n' +
-            value + '\n';
-        }, '');
-      requests.pop().respond(200, null, master);
-    });
+                  'playlist-' + value + '\n';
+              }, ''),
+            buffered = 0,
+            currentTime = 0;
+
+        // mock out buffered and currentTime
+        player.buffered = function() {
+          return videojs.createTimeRange(0, currentTime + buffered);
+        };
+        player.currentTime = function() {
+          return currentTime;
+        };
+
+        // respond to the playlist requests
+        requests.shift().respond(200, null, master);
+        requests[0].respond(200, null, playlistResponse(+requests[0].url.match(/\d+$/)));
+        requests.shift();
 
 
-    // bandwidth
         bandwidths.sort(function(left, right) {
         bandwidths.sort(function(left, right) {
           return left.time - right.time;
           return left.time - right.time;
         });
         });
 
 
-    for (t = i = 0; t < duration; t++) {
+        // advance time and collect simulation results
+        for (t = i = 0; t < duration; clock.tick(1 * 1000), t++) {
+
+          // determine the bandwidth value at this moment
           while (bandwidths[i + 1] && bandwidths[i + 1].time <= t) {
           while (bandwidths[i + 1] && bandwidths[i + 1].time <= t) {
             i++;
             i++;
           }
           }
@@ -118,12 +163,66 @@
             time: t,
             time: t,
             bandwidth: bandwidths[i].bandwidth
             bandwidth: bandwidths[i].bandwidth
           });
           });
+
+          // deliver responses if they're ready
+          requests = requests.reduce(function(remaining, request) {
+            var arrival = request.startTime + propagationDelay,
+                delivered = Math.max(0, bandwidths[i].bandwidth * (t - arrival)),
+                playlist = /playlist-\d+$/.test(request.url),
+                segmentSize = +request.url.match(/(\d+)-\d+$/)[1] * segmentDuration;
+
+            // playlist responses
+            if (playlist) {
+              // playlist responses have no trasmission time
+              if (t === arrival) {
+                request.respond(200, null, playlistResponse(+requests[0].url.match(/\d+$/)));
+                return remaining;
               }
               }
-    return results;
+              // the response has not arrived. re-enqueue it for later.
+              return remaining.concat(request);
+            }
+
+            // segment responses
+            if (delivered > segmentSize) {
+              // segment responses are delivered after the propagation
+              // delay and the transmission time have elapsed
+              buffered += segmentDuration;
+              request.status = 200;
+              request.response = new Uint8Array(segmentSize);
+              request.setResponseBody('');
+              return remaining;
+            } else {
+              if (t === arrival) {
+                // segment response headers arrive after the propogation delay
+                request.setResponseHeaders({
+                  'Content-Type': 'video/mp2t'
+                });
+              }
+              // the response has not arrived fully. re-enqueue it for
+              // later
+              return remaining.concat(request);
+            }
+          }, []);
+
+          // simulate playback
+          if (buffered > 0) {
+            buffered--;
+            currentTime++;
+          }
+          player.trigger('timeupdate');
+        }
+
+        // restore the environment
+        clock.restore();
+        fakeXhr.restore();
+
+        done(null, results);
+      }, 0);
+    });
   };
   };
   runButton = document.getElementById('run-simulation');
   runButton = document.getElementById('run-simulation');
   runButton.addEventListener('click', function() {
   runButton.addEventListener('click', function() {
-    displayTimeline(runSimulation(parameters()));
+    runSimulation(parameters(), displayTimeline);
   });
   });
 
 
   // render the timeline with d3
   // render the timeline with d3
@@ -145,7 +244,7 @@
     .append('g')
     .append('g')
       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
 
-    displayTimeline = function(bandwidth) {
+    displayTimeline = function(error, bandwidth) {
       var x = d3.scale.linear().range([0, width]),
       var x = d3.scale.linear().range([0, width]),
           y = d3.scale.linear().range([height, 0]),
           y = d3.scale.linear().range([height, 0]),
 
 
@@ -193,7 +292,6 @@
     };
     };
   })();
   })();
 
 
-
-  displayTimeline(runSimulation(parameters()));
+  runSimulation(parameters(), displayTimeline);
 
 
 })(window, document);
 })(window, document);