Initial commit

app/assets/javascripts/video_player.js.erb

@@ -0,0 +1,97 @@
+App.VideoPlayer = {
+  init: function(videoElement) {
+    // The source path for the video
+    var videoUrl = $(videoElement).attr("src");
+
+    // Replace the standard <video> element with the Clappr player
+    $(videoElement).replaceWith($("<div>", { id: "player" }));
+    var player = new Clappr.Player({
+      <%= "baseUrl: 'http://cdn.clappr.io/latest'," if Rails.env.test? %>
+      source: videoUrl, parentId: "#player", width: "100%",
+      focusElement: NotTypingSelectiveListenerElement(document), // Allows keyboard shortcuts to work even if the player itself isn't in focus
+      plugins: {
+        core: [ClapprMarkersPlugin, PlaybackRatePlugin]
+      },
+      markersPlugin: { markers: [] }
+    });
+
+    return player;
+  }
+}
+
+$(document).on("turbolinks:load", function() {
+  $("[data-behavior=video-player]").each(function(index, element) {
+    App.VideoPlayer.init(element);
+  });
+});
+
+// An implementation of SelectiveListenerElement which only listens when text areas are not in focus
+var NotTypingSelectiveListenerElement = function(element) {
+  var inputInFocus    = function() { return $('input:focus, textarea:focus, video:focus').length > 0; }
+  var noInputInFocus  = function() { return !inputInFocus(); }
+
+  return new SelectiveListenerElement(element, noInputInFocus);
+}
+
+// A helper class that maintains a collection of handlers for a given event and callback
+var HandlerCollection = function() {
+  this.handlers = [];
+
+  // Stores a handler for a given event and callback
+  this.store = function(eventName, originalCallback, handler) {
+    var item = {
+      eventName: eventName, 
+      callback: originalCallback,
+      handler: handler,
+    }
+    this.handlers.push(item);
+  }
+
+  // Finds a handler for a given event and callback
+  this.find = function(eventName, callback) {
+    var handler = null;
+    for (var i = 0; i < this.handlers.length; i++) {
+      var item = this.handlers[i];
+
+      if (item.eventName == eventName && item.callback == callback) {
+        handler = item.handler;
+      }
+    }
+    return handler;
+  }
+}
+
+// A helper class to allow a DOM element to be wrapped and selectively ignore events that are triggered on it
+var SelectiveListenerElement = function(element, shouldListenFn) {
+  // The element we are proxying
+  this.element = element;
+  // A function that determines if we should run any event callbacks or not
+  this.shouldRunCallbacks = shouldListenFn;
+  // Stores the functions to be called when an event listener needs to be removed
+  this.removeHandlers = new HandlerCollection();
+
+  this.addEventListener = function(eventName, callback, useCapture) {
+    // Create a new callback function that conditionally calls the original
+    var conditionalCallback = function() {
+      if (this.shouldRunCallbacks()) {
+        callback();
+      }
+    }.bind(this);
+
+    // Store the function to be called when removing the event listener
+    this.removeHandlers.store(eventName, callback, function() {
+      this.element.removeEventListener(eventName, conditionalCallback, useCapture);
+    }.bind(this));
+
+    // Attach an event listener to the same event with the conditional callback function
+    this.element.addEventListener(eventName, conditionalCallback, useCapture);
+  }
+
+  this.removeEventListener = function(eventName, callback, useCapture) {
+    var removeHandler = this.removeHandlers.find(eventName, callback);
+
+    if (removeHandler != null) {
+      removeHandler();
+    }
+  }
+}