Fix text tracks on IE/Edge.

IE/Edge don't accept cues that are out of time order.  So when we
reverse the order of cues for #848, the cues would be rejected.  Now
we sort the cues and only reverse the order of cues with equal times.

Change-Id: I860e1ea9694eb95ff2e74d9545c92373eb371686

lib/text/simple_text_displayer.js

@@ -99,11 +99,24 @@ shaka.text.SimpleTextDisplayer.prototype.append = function(cues) {
       textTrackCues.push(cue);
   }
 
-  // Push these to the browser in reverse order.  The browser will display cues
-  // with identical time ranges from the bottom up.  Feeding them in backwards
-  // means the first one parsed will be at the top, as you would expect.
-  // See https://github.com/google/shaka-player/issues/848 for more information.
-  textTrackCues.reverse().forEach(function(cue) {
+  // Sort the cues based on start/end times.  Make a copy of the array so
+  // we can get the index in the original ordering.  Out of order cues are
+  // rejected by IE/Edge.  See https://goo.gl/BirBy9
+  var sortedCues = textTrackCues.slice().sort(function(a, b) {
+    if (a.startTime != b.startTime)
+      return a.startTime - b.startTime;
+    else if (a.endTime != b.endTime)
+      return a.endTime - b.startTime;
+    else
+      // The browser will display cues with identical time ranges from the
+      // bottom up.  Reversing the order of equal cues means the first one
+      // parsed will be at the top, as you would expect.
+      // See https://github.com/google/shaka-player/issues/848 for more
+      // information.
+      return textTrackCues.indexOf(b) - textTrackCues.indexOf(a);
+  });
+
+  sortedCues.forEach(function(cue) {
     this.textTrack_.addCue(cue);
   }.bind(this));
 };

test/text/simple_text_displayer_unit.js

@@ -50,7 +50,22 @@ describe('SimpleTextDisplayer', function() {
   });
 
   describe('append', function() {
-    it('appends cues in reverse order', function() {
+    it('sorts cues before inserting', function() {
+      // See: https://goo.gl/BirBy9
+      verifyHelper(
+          [
+            {start: 10, end: 20, text: 'Test1'},
+            {start: 20, end: 30, text: 'Test2'},
+            {start: 30, end: 40, text: 'Test3'}
+          ],
+          [
+            new shaka.text.Cue(20, 30, 'Test2'),
+            new shaka.text.Cue(30, 40, 'Test3'),
+            new shaka.text.Cue(10, 20, 'Test1')
+          ]);
+    });
+
+    it('appends equal time cues in reverse order', function() {
       // Regression test for https://github.com/google/shaka-player/issues/848
       verifyHelper(
           [