Merge pull request #2978 from Raven24/video-thumbnail

oembed video thumb [oh yeah]

features/oembed.feature

@@ -17,6 +17,8 @@ Feature: oembed
 
     And I follow "My Aspects"
     Then I should see a video player
+    And I should see a ".oembed" within ".post-content"
+    And I should see a "img" within ".oembed"
 
   Scenario: Post an unsecure video link
     Given I expand the publisher

features/step_definitions/oembed.rb

@@ -36,6 +36,9 @@ Given /^I have several oEmbed data in cache$/ do
 	            type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
 	            allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
           </object>",
+        "thumbnail_url" => "http://i2.ytimg.com/vi/M3r2XDceM6A/hqdefault.jpg",
+        "thumbnail_height" => 360,
+        "thumbnail_width" => 480,
       },
       "link_url" => "http://youtube.com/watch?v=M3r2XDceM6A&format=json",
       "oembed_get_request" => "http://www.youtube.com/oembed?format=json&frame=1&iframe=1&maxheight=420&maxwidth=420&url=http://youtube.com/watch?v=M3r2XDceM6A",
@@ -54,6 +57,9 @@ Given /^I have several oEmbed data in cache$/ do
 	            type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
 	            allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
           </object>",
+        "thumbnail_url" => "http://i2.ytimg.com/vi/M3r2XDceM6A/hqdefault.jpg",
+        "thumbnail_height" => 360,
+        "thumbnail_width" => 480,
       },
       "link_url" => "http://myrichtube.com/watch?v=M3r2XDceM6A&format=json",
       "discovery_data" => '<link rel="alternate" type="application/json+oembed" href="http://www.mytube.com/oembed?format=json&frame=1&iframe=1&maxheight=420&maxwidth=420&url=http://mytube.com/watch?v=M3r2XDceM6A" />',
@@ -75,6 +81,9 @@ Given /^I have several oEmbed data in cache$/ do
 	            type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
 	            allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
           </object>",
+        "thumbnail_url" => "http://i2.ytimg.com/vi/M3r2XDceM6A/hqdefault.jpg",
+        "thumbnail_height" => 360,
+        "thumbnail_width" => 480,
       },
       "link_url" => "http://yourichtube.com/watch?v=M3r2XDceM6A&format=json",
       "oembed_get_request" => "http://www.youtube.com/oembed?format=json&frame=1&iframe=1&maxheight=420&maxwidth=420&url=http://youtube.com/watch?v=M3r2XDceM6A",
@@ -93,6 +102,9 @@ Given /^I have several oEmbed data in cache$/ do
 	            type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
 	            allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
           </object>",
+        "thumbnail_url" => "http://i2.ytimg.com/vi/M3r2XDceM6A/hqdefault.jpg",
+        "thumbnail_height" => 360,
+        "thumbnail_width" => 480,
       },
       "link_url" => "http://mytube.com/watch?v=M3r2XDceM6A&format=json",
       "discovery_data" => '<link rel="alternate" type="application/json+oembed" href="http://www.mytube.com/oembed?format=json&frame=1&iframe=1&maxheight=420&maxwidth=420&url=http://mytube.com/watch?v=M3r2XDceM6A" />',
@@ -103,7 +115,9 @@ Given /^I have several oEmbed data in cache$/ do
     unless type=='unsupported'
       url = data['oembed_get_request'].split('?')[0]
       store_data = data['oembed_data'].merge('trusted_endpoint_url' => url)
-      OEmbedCache.new(:url => data['link_url'], :data => store_data.to_json);
+      oembed = OEmbedCache.new(:url => data['link_url']);
+      oembed.data = store_data
+      oembed.save!
     end
   end
 end

public/javascripts/app/templates/status-message.handlebars

@@ -16,5 +16,16 @@
 
 <div class="collapsible">
   {{{text}}}
-  {{{o_embed_html}}}
+  {{#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>

public/javascripts/app/views/content_view.js

@@ -1,20 +1,25 @@
 app.views.Content = app.views.StreamObject.extend({
+
+  events: {
+    "click .oembed .thumb": "showOembedContent"
+  },
+  
   presenter : function(){
     return _.extend(this.defaultPresenter(), {
       text : app.helpers.textFormatter(this.model),
-      o_embed_html : embedHTML(this.model),
+      o_embed_html : this.embedHTML(),
       largePhoto : this.largePhoto(),
       smallPhotos : this.smallPhotos()
-    })
+    });
+  },
 
-    function embedHTML(model){
+  embedHTML: function(){
-      if(!model.get("o_embed_cache")) { return ""; }
+    if(!this.model.get("o_embed_cache")) { return ""; }
-      var data = model.get("o_embed_cache").data;
+    var data = this.model.get("o_embed_cache").data;
-      if(data.type == "photo") {
+    if(data.type == "photo") {
-        return '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
+      return '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
-      } else {
+    } else {
-        return data.html || ""
+      return data.html || ""
-      }
     }
   },
 
@@ -28,6 +33,14 @@ app.views.Content = app.views.StreamObject.extend({
     var photos = this.model.get("photos")
     if(!photos || photos.length < 2) { return }
     return photos.slice(1,8)
+  },
+
+  showOembedContent: function() {
+    var oembed = $(this.el).find(".oembed");
+    var embedHTML = $( this.embedHTML() );
+    var paramSeparator = ( /\\?/.test(embedHTML.attr("href")) ) ? "&" : "?";
+    embedHTML.attr("src", embedHTML.attr("src") + paramSeparator + "autoplay=1");
+    oembed.html( embedHTML );
   }
 });
 

public/javascripts/app/views/stream_view.js

@@ -52,7 +52,7 @@ app.views.Stream = Backbone.View.extend({
 
     return this;
   },
-
+  
   appendLoader: function(){
     $("#paginate").html($("<img>", {
       src : "/images/static-loader.png",

public/stylesheets/sass/application.sass

@@ -1827,6 +1827,22 @@ ul#press_logos
       :size 12px
     :color #777
 
+  .collapsible
+    .oembed
+      :background url('/images/ajax-loader2.gif') no-repeat center center
+
+      .thumb
+        :position relative
+        :cursor pointer
+
+        .video-overlay
+          :background url('/images/video-overlay.png') no-repeat center center
+          :position absolute
+          :top 0
+          :left 0
+          :right 0
+          :bottom 0
+
 .conversation_participants
   :z-index 3
   :background