Netflix Party: synchronize Netflix video playback

The server

// in-memory store of all the sessions
// the keys are the session IDs (strings)
// the values have the form: {
//   id: '84dba68dcea2952c',             // 8 random octets
//   lastActivity: new Date(),           // used to find old sessions to vacuum
//   lastKnownTime: 123,                 // milliseconds from the start of the video
//   lastKnownTimeUpdatedAt: new Date(), // when we last received a time update
//   state: 'playing' | 'paused',        // whether the video is playing or paused
//   videoId: 123                        // Netflix id the video
// }
var sessions = {};

The client

Playing and pausing

var pause = function() {
  uiEventsHappening += 1;
  $('.player-play-pause.pause').click();
  return delay(1)().then(hideControls).then(function() {
    uiEventsHappening -= 1;
  });
};

var play = function() {
  uiEventsHappening += 1;
  $('.player-play-pause.play').click();
  return delay(1)().then(hideControls).then(function() {
    uiEventsHappening -= 1;
  });
};

Hiding the playback controls

var hideControls = function() {
  uiEventsHappening += 1;
  var player = $('#netflix-player');
  var mouseX = 100; // relative to the document
  var mouseY = 100; // relative to the document
  var eventOptions = {
    'bubbles': true,
    'button': 0,
    'screenX': mouseX - $(window).scrollLeft(),
    'screenY': mouseY - $(window).scrollTop(),
    'clientX': mouseX - $(window).scrollLeft(),
    'clientY': mouseY - $(window).scrollTop(),
    'offsetX': mouseX - player.offset().left,
    'offsetY': mouseY - player.offset().top,
    'pageX': mouseX,
    'pageY': mouseY,
    'currentTarget': player[0]
  };
  player[0].dispatchEvent(new MouseEvent('mousemove', eventOptions));
  return delay(1)().then(function() {
    uiEventsHappening -= 1;
  });
};

Seeking in the video

var showControls = function() {
  uiEventsHappening += 1;
  var scrubber = $('#scrubber-component');
  var eventOptions = {
    'bubbles': true,
    'button': 0,
    'currentTarget': scrubber[0]
  };
  scrubber[0].dispatchEvent(new MouseEvent('mousemove', eventOptions));
  return delay(10)().then(function() {
    uiEventsHappening -= 1;
  });
};

var seek = function(milliseconds) {
  uiEventsHappening += 1;
  var eventOptions, scrubber;
  return showControls().then(function() {
    // compute the parameters for the mouse events
    scrubber = $('#scrubber-component');
    var factor = milliseconds / getDuration();
    var mouseX = scrubber.offset().left + Math.round(scrubber.width() * factor); // relative to the document
    var mouseY = scrubber.offset().top + scrubber.height() / 2;                  // relative to the document
    eventOptions = {
      'bubbles': true,
      'button': 0,
      'screenX': mouseX - $(window).scrollLeft(),
      'screenY': mouseY - $(window).scrollTop(),
      'clientX': mouseX - $(window).scrollLeft(),
      'clientY': mouseY - $(window).scrollTop(),
      'offsetX': mouseX - scrubber.offset().left,
      'offsetY': mouseY - scrubber.offset().top,
      'pageX': mouseX,
      'pageY': mouseY,
      'currentTarget': scrubber[0]
    };

    // make the "trickplay preview" show up
    scrubber[0].dispatchEvent(new MouseEvent('mouseover', eventOptions));
  }).then(delay(10)).then(function() {
    // simulate a click on the scrubber
    scrubber[0].dispatchEvent(new MouseEvent('mousedown', eventOptions));
    scrubber[0].dispatchEvent(new MouseEvent('mouseup', eventOptions));
    scrubber[0].dispatchEvent(new MouseEvent('mouseout', eventOptions));
  }).then(delay(1)).then(hideControls).then(function() {
    uiEventsHappening -= 1;
  });
};

1. Jiggle the mouse so the playback controls appear. Wait 10ms for the UI to respond. 1ms is apparently not enough.
2. Simulate the cursor hovering over the playback slider so the thumbnail preview appears, because apparently the playback slider doesn’t respond to input unless the preview is visible. Wait 10ms for the UI to respond.
3. Click on the playback slider (called a “scrubber control” in the minified Netflix code) at the appropriate position to seek the video.
4. Invoke the hideControls() magic from above.

Synchronization

var roundTripTimeRecent = [];
var roundTripTimeMedian = 0;
var localTimeMinusServerTimeRecent = [];
var localTimeMinusServerTimeMedian = 0;
var ajax = function(relativeUrl, method, data) {
  return new Promise(function(resolve, reject) {
    var startTime = (new Date()).getTime();
    $.ajax({
      url: 'https://www.netflixparty.com' + relativeUrl,
      method: method,
      data: method === 'POST' ? JSON.stringify(data) : data
    }).always(function(data, textStatus, jqXHR) {
      // calculate round trip time
      roundTripTimeRecent.push((new Date()).getTime() - startTime);
      if (roundTripTimeRecent.length > 10) {
        roundTripTimeRecent.splice(0, roundTripTimeRecent.length - 10);
      }
      var sorted = roundTripTimeRecent.concat().sort();
      roundTripTimeMedian = sorted[Math.floor(sorted.length / 2)];

      if (data.lastActivity !== undefined) {
        // calculate client-server time offset
        localTimeMinusServerTimeRecent.push((new Date()).getTime() - (new Date(data.lastActivity)).getTime());
        if (localTimeMinusServerTimeRecent.length > 10) {
          localTimeMinusServerTimeRecent.splice(0, localTimeMinusServerTimeRecent.length - 10);
        }
        sorted = localTimeMinusServerTimeRecent.concat().sort();
        localTimeMinusServerTimeMedian = sorted[Math.floor(sorted.length / 2)] - Math.round(roundTripTimeMedian / 2);
      }
    }).done(resolve).fail(reject);
  });
};

Conclusion