diff --git a/features/oembed.feature b/features/oembed.feature index 9cfb0691f..1efbce05a 100644 --- a/features/oembed.feature +++ b/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 diff --git a/features/step_definitions/oembed.rb b/features/step_definitions/oembed.rb index ade28cc3c..155503e48 100644 --- a/features/step_definitions/oembed.rb +++ b/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\"> ", + "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\"> ", + "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" => '', @@ -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\"> ", + "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\"> ", + "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" => '', @@ -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 diff --git a/public/images/video-overlay.png b/public/images/video-overlay.png new file mode 100644 index 000000000..dbeee2bb7 Binary files /dev/null and b/public/images/video-overlay.png differ diff --git a/public/javascripts/app/templates/status-message.handlebars b/public/javascripts/app/templates/status-message.handlebars index 584d3a281..a20dfac00 100644 --- a/public/javascripts/app/templates/status-message.handlebars +++ b/public/javascripts/app/templates/status-message.handlebars @@ -16,5 +16,16 @@
{{{text}}} - {{{o_embed_html}}} + {{#if o_embed_cache}} +
+ {{#if o_embed_cache.data.thumbnail_url}} +
+ +
+
+ {{else}} + {{{o_embed_html}}} + {{/if}} +
+ {{/if}}
diff --git a/public/javascripts/app/views/content_view.js b/public/javascripts/app/views/content_view.js index a7adb6092..d8cde6e45 100644 --- a/public/javascripts/app/views/content_view.js +++ b/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){ - if(!model.get("o_embed_cache")) { return ""; } - var data = model.get("o_embed_cache").data; - if(data.type == "photo") { - return ''; - } else { - return data.html || "" - } + embedHTML: function(){ + if(!this.model.get("o_embed_cache")) { return ""; } + var data = this.model.get("o_embed_cache").data; + if(data.type == "photo") { + return ''; + } else { + 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 ); } }); diff --git a/public/javascripts/app/views/stream_view.js b/public/javascripts/app/views/stream_view.js index b360f95f9..0c3b71d74 100644 --- a/public/javascripts/app/views/stream_view.js +++ b/public/javascripts/app/views/stream_view.js @@ -52,7 +52,7 @@ app.views.Stream = Backbone.View.extend({ return this; }, - + appendLoader: function(){ $("#paginate").html($("", { src : "/images/static-loader.png", diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 4e48ee7ea..7f7d5a155 100644 --- a/public/stylesheets/sass/application.sass +++ b/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