extract oembed view to seperate view

app/assets/javascripts/app/views/content_view.js

@@ -2,28 +2,17 @@
 app.views.Content = app.views.StreamObject.extend({
 
   events: {
-    "click .oembed .thumb": "showOembedContent",
     "click .expander": "expandPost"
   },
 
   presenter : function(){
     return _.extend(this.defaultPresenter(), {
       text : app.helpers.textFormatter(this.model.get("text"), this.model),
-      o_embed_html : this.embedHTML(),
       largePhoto : this.largePhoto(),
       smallPhotos : this.smallPhotos()
     });
   },
 
-  embedHTML: function(){
-    if(!this.model.get("o_embed_cache")) { return ""; }
-    var data = this.model.get("o_embed_cache").data;
-    if(data.type == "photo") {
-      return '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
-    } else {
-      return data.html || ""
-    }
-  },
 
   largePhoto : function() {
     var photos = this.model.get("photos")
@@ -37,13 +26,6 @@ app.views.Content = app.views.StreamObject.extend({
     return photos.slice(1,8)
   },
 
-  showOembedContent: function() {
-    var oembed = $(this.el).find(".oembed");
-    var insertHTML = $( this.embedHTML() );
-    var paramSeparator = ( /\?/.test(insertHTML.attr("src")) ) ? "&" : "?";
-    insertHTML.attr("src", insertHTML.attr("src") + paramSeparator + "autoplay=1");
-    oembed.html( insertHTML );
-  },
 
   expandPost: function(evt) {
     var el = $(this.el).find('.collapsible');
@@ -95,3 +77,34 @@ app.views.ActivityStreams__Photo = app.views.Content.extend({
   templateName : "activity-streams-photo"
 });
 
+app.views.OEmbed = app.views.Base.extend({
+  templateName : "oembed",
+  events : {
+    "click .oembed .thumb": "showOembedContent"
+  },
+
+  presenter:function () {
+    return _.extend(this.defaultPresenter(), {
+      o_embed_html:this.embedHTML()
+    })
+  },
+
+  embedHTML:function () {
+    if (!this.model.get("o_embed_cache")) {
+      return "";
+    }
+    var data = this.model.get("o_embed_cache").data;
+    if (data.type == "photo") {
+      return '<img src="' + data.url + '" width="' + data.width + '" height="' + data.height + '" />';
+    } else {
+      return data.html || ""
+    }
+  },
+
+  showOembedContent:function () {
+    var insertHTML = $(this.embedHTML());
+    var paramSeparator = ( /\?/.test(insertHTML.attr("src")) ) ? "&" : "?";
+    insertHTML.attr("src", insertHTML.attr("src") + paramSeparator + "autoplay=1");
+    this.$el.html(insertHTML);
+  },
+})

app/assets/javascripts/app/views/stream_post_views.js

@@ -6,7 +6,8 @@ app.views.StreamPost = app.views.Post.extend({
     ".feedback" : "feedbackView",
     ".likes" : "likesInfoView",
     ".comments" : "commentStreamView",
-    ".post-content" : "postContentView"
+    ".post-content" : "postContentView",
+    ".oembed" : "oEmbedView"
   },
 
   events: {
@@ -26,6 +27,7 @@ app.views.StreamPost = app.views.Post.extend({
 
     //subviews
     this.commentStreamView = new app.views.CommentStream({model : this.model});
+    this.oEmbedView = new app.views.OEmbed({model : this.model});
   },
 
 

app/assets/templates/oembed.jst.hbs

@@ -0,0 +1,10 @@
+{{#if o_embed_cache}}
+    {{#if o_embed_cache.data.thumbnail_url}}
+        <div class="thumb">
+            <img src="{{o_embed_cache.data.thumbnail_url}}" />
+            <div class="video-overlay"/>
+        </div>
+    {{else}}
+        {{{o_embed_html}}}
+    {{/if}}
+{{/if}}

app/assets/templates/status-message.jst.hbs

@@ -1,6 +1,5 @@
 {{#if largePhoto}}
   <div class="photo_attachments">
-
     <a href="#" class="stream-photo-link">
       {{#with largePhoto}}
         <img src="{{sizes.large}}" class="stream-photo big_stream_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
@@ -12,20 +11,10 @@
         <img src="{{sizes.small}}" class="stream-photo thumb_small" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
       </a>
     {{/each}}
+  </div>
 {{/if}}
 
 <div class="collapsible">
   {{{text}}}
-  {{#if o_embed_cache}}
-  <div class="oembed">
-    {{#if o_embed_cache.data.thumbnail_url}}
-    <div class="thumb">
-      <img src="{{o_embed_cache.data.thumbnail_url}}" />
-      <div class="video-overlay"></div>
-    </div>
-    {{else}}
-    {{{o_embed_html}}}
-    {{/if}}
-  </div>
-  {{/if}}
-</div>
+  <div class="oembed"></div>
+</div>

spec/javascripts/app/views/oembed_view_spec.js

@@ -0,0 +1,31 @@
+describe("app.views.OEmbed", function(){
+  beforeEach(function(){
+    this.statusMessage = factory.statusMessage({
+      "o_embed_cache":{
+        "data":{
+          "html":"some html"
+        }
+      }
+    })
+
+    this.view = new app.views.OEmbed({model : this.statusMessage})
+  })
+
+  describe("rendering", function(){
+    it("provides oembed html from the model response", function(){
+      this.view.render()
+      expect(this.view.$el.html()).toContain("some html")
+    })
+  })
+
+  describe("presenter", function(){
+    it("provides oembed html from the model", function(){
+      expect(this.view.presenter().o_embed_html).toContain("some html")
+    })
+
+    it("does not provide oembed html from the model response if none is present", function(){
+      this.statusMessage.set({"o_embed_cache" : null})
+      expect(this.view.presenter().o_embed_html).toBe("");
+    })
+  })
+})

spec/javascripts/app/views/stream_post_spec.js

@@ -65,15 +65,8 @@ describe("app.views.StreamPost", function(){
           }
         }})
 
-        var view = new app.views.Content({model : this.statusMessage});
-        expect(view.presenter().o_embed_html).toContain("some html")
-      })
-
-      it("does not provide oembed html from the model response if none is present", function(){
-        this.statusMessage.set({"o_embed_cache" : null})
-
-        var view = new app.views.Content({model : this.statusMessage});
-        expect(view.presenter().o_embed_html).toBe("");
+        var view = new app.views.StreamPost({model : this.statusMessage}).render();
+        expect(view.$el.html()).toContain("some html")
       })
     })