remove video embedding from stream.js, use embedder.js

config/assets.yml

@@ -17,6 +17,7 @@ javascripts:
     - public/javascripts/vendor/Mustache.js
     - public/javascripts/view.js
     - public/javascripts/stream.js
+    - public/javascripts/embedder.js
     - public/javascripts/application.js
     - public/javascripts/diaspora.js
     - public/javascripts/widgets/alert.js

public/javascripts/embedder.js

@@ -0,0 +1,70 @@
+/**
+ * Created by .
+ * User: dan
+ * Date: Jan 22, 2011
+ * Time: 10:37:19 PM
+ * To change this template use File | Settings | File Templates.
+ */
+
+
+var Embedder = {
+  services: {},
+  register: function(service, template) {
+    Embedder.services[service] = template;
+  },
+  render: function(service, views) {
+    var template = (typeof Embedder.services[service] === "string")
+        ? Embedder.services[service]
+        : Embedder.services.undefined;
+
+    return $.mustache(template, views);
+  },
+  embed: function($this) {
+    var service = $this.data("host"),
+      container = document.createElement("div"),
+      $container = $(container).attr("class", "video-container"),
+      $videoContainer = $this.parent().siblings("div.video-container");
+
+    if($videoContainer.length) {
+      $videoContainer.slideUp("fast", function() { $(this).detach(); });
+      return;
+    }
+
+    if ($("div.video-container").length) {
+      $("div.video-container").slideUp("fast", function() { $(this).detach(); });
+    }
+
+    $container.html(Embedder.render(service, $this.data()));
+
+    $container.hide()
+      .insertAfter($this.parent())
+      .slideDown('fast');
+
+    $this.click(function() {
+      $container.slideUp('fast', function() {
+        $(this).detach();
+      });
+    });
+  },
+  initialize: function() {
+    $(".stream").delegate("a.video-link", "click", Embedder.onVideoLinkClick);
+  },
+  onVideoLinkClick: function(evt) {
+    evt.preventDefault();
+    Embedder.embed($(this));
+  }
+};
+
+Embedder.register("youtube.com",
+    '<a href="//www.youtube.com/watch?v={{video-id}}" target="_blank">Watch this video on Youtube</a><br />' +
+    '<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/{{video-id}}"></iframe>');
+
+Embedder.register("vimeo.com",
+  '<a href="http://vimeo.com/{{video-id}}">Watch this video on Vimeo</a><br />' +
+  '<iframe class="vimeo-player" src="http://player.vimeo.com/video/{{video-id}}"></iframe>');
+
+Embedder.register("undefined", '<p>Unknown video type - {{host}}</p>');
+
+$(document).ready(function() {
+  Embedder.initialize();
+});

public/javascripts/stream.js

@@ -11,8 +11,6 @@ var Stream = {
     $("abbr.timeago").timeago();
     $stream.not(".show").delegate("a.show_post_comments", "click", Stream.toggleComments);
 
-    /* In field labels */
-    $("label").inFieldLabels();
     // publisher textarea reset
     $publisher.find("textarea").bind("focus", function() {
       $(this).css('min-height','42px');
@@ -84,52 +82,6 @@ var Stream = {
       }
     });
 
-    $stream.delegate("a.video-link", "click", function(evt) {
-      evt.preventDefault();
-
-      var $this = $(this),
-        container = document.createElement("div"),
-        $container = $(container).attr("class", "video-container"),
-        $videoContainer = $this.siblings("div.video-container");
-
-      if ($videoContainer.length > 0) {
-        $videoContainer.slideUp('fast', function() {
-          $videoContainer.detach();
-        });
-        return;
-      }
-
-      if ($("div.video-container").length > 0) {
-        $("div.video-container").slideUp("fast", function() {
-          $(this).detach();
-        });
-      }
-
-      if ($this.data("host") === "youtube.com") {
-        $container.html(
-          '<a href="//www.youtube.com/watch?v=' + $this.data("video-id") + '" target="_blank">Watch this video on Youtube</a><br />' +
-            '<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id") + '"></iframe>'
-          );
-      } else if($this.data("host") === "vimeo.com"){
-        $container.html(
-            '<p><a href="http://vimeo.com/' + $this.data("video-id") + '">Watch this video on Vimeo</a></p>' +
-            '<iframe class="vimeo-player" src="http://player.vimeo.com/video/' + $this.data("video-id") + '"></iframe>'
-            );
-      } else {
-        $container.html('Invalid videotype <i>' + $this.data("host") + '</i> (ID: ' + $this.data("video-id") + ')');
-      }
-
-      $container.hide()
-        .insertAfter($this)
-        .slideDown('fast');
-
-      $this.click(function() {
-        $container.slideUp('fast', function() {
-          $(this).detach();
-        });
-      });
-    });
-
     $(".new_status_message").live('ajax:loading', function(data, json, xhr) {
       $("#photodropzone").find('li').remove();
       $("#publisher textarea").removeClass("with_attachments");

spec/javascripts/embedder-spec.js

@@ -0,0 +1,49 @@
+/**
+ * Created by .
+ * User: dan
+ * Date: Jan 22, 2011
+ * Time: 11:15:17 PM
+ * To change this template use File | Settings | File Templates.
+ */
+describe("Embedder", function() {
+  describe("services", function() {
+    it("is an object containing all the supported services", function() {
+      expect(typeof Embedder.services === "object").toBeTruthy();
+    });
+  });
+  describe("register", function() {
+    it("adds a service and it's template to Embedder.services", function() {
+      expect(typeof Embedder.services["ohaibbq"] === "undefined").toBeTruthy();
+      Embedder.register("ohaibbq", "sup guys");
+      expect(typeof Embedder.services["ohaibbq"] === "undefined").toBeFalsy();
+    });
+  });
+  describe("render", function() {
+    it("renders the specified mustache template", function() {
+      var template = Embedder.render("youtube.com", {"video-id": "asdf"});
+      expect(template.length > 0).toBeTruthy();
+      expect(typeof template === "string").toBeTruthy();
+    });
+    it("renders the 'undefined' template if the service is not found", function() {
+      var template = Embedder.render("yoimmafakeservice", {host: "yo"});
+      expect(template).toEqual(Embedder.render("undefined", {host: "yo"}));
+    });
+  });
+  describe("embed", function() {
+    beforeEach(function() {
+      $("#jasmine_content").html(
+        '<div class="stream">' +
+          '<a href="#video" class="video-link" data-host="youtube.com" data-video-id="asdf">' +
+            'spec video' +
+          '</a>' +
+        '</div>'
+      );
+    });
+
+    it("delegates '.stream a.video-link'", function() {
+      spyOn($.fn, "delegate");
+      Embedder.initialize();
+      expect($.fn.delegate).toHaveBeenCalledWith("a.video-link", "click", Embedder.onVideoLinkClick);
+    });
+  });
+});

spec/javascripts/support/jasmine.yml

@@ -16,6 +16,7 @@ src_files:
   - public/javascripts/vendor/jquery.tipsy.js
   - public/javascripts/vendor/jquery.infieldlabel.js
   - public/javascripts/vendor/jquery.autoresize.min.js
+  - public/javascripts/vendor/Mustache.js
   - public/javascripts/vendor/timeago.js
   - public/javascripts/vendor/facebox.js
   - public/javascripts/diaspora.js
@@ -24,6 +25,7 @@ src_files:
   - public/javascripts/aspect-edit.js
   - public/javascripts/aspect-contacts.js
   - public/javascripts/web-socket-receiver.js
+  - public/javascripts/embedder.js
   - public/javascripts/view.js
   - public/javascripts/stream.js
   - public/javascripts/validation.js