From 98d1e2905518053e206d8ff2f493e20dab9239ed Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Mon, 5 Mar 2012 00:44:08 +0100 Subject: [PATCH 1/3] extracted oembed thumb stuff from #2941, also fixes oembed cukes --- features/oembed.feature | 2 ++ features/step_definitions/oembed.rb | 16 +++++++++++++++- .../app/templates/status-message.handlebars | 9 ++++++++- public/javascripts/app/views/stream_view.js | 18 ++++++++++++++++++ public/stylesheets/sass/application.sass | 5 +++++ 5 files changed, 48 insertions(+), 2 deletions(-) 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/javascripts/app/templates/status-message.handlebars b/public/javascripts/app/templates/status-message.handlebars index 584d3a281..32a128f5f 100644 --- a/public/javascripts/app/templates/status-message.handlebars +++ b/public/javascripts/app/templates/status-message.handlebars @@ -16,5 +16,12 @@
{{{text}}} - {{{o_embed_html}}} + {{#if o_embed_cache}} +
+ {{#if o_embed_cache.data.thumbnail_url}} + + {{/if}} + {{{o_embed_html}}} +
+ {{/if}}
diff --git a/public/javascripts/app/views/stream_view.js b/public/javascripts/app/views/stream_view.js index b360f95f9..5b13acd59 100644 --- a/public/javascripts/app/views/stream_view.js +++ b/public/javascripts/app/views/stream_view.js @@ -16,6 +16,7 @@ app.views.Stream = Backbone.View.extend({ setupEvents : function(){ this.stream.bind("fetched", this.removeLoader, this) + this.stream.bind("fetched", this.postRender, this) this.stream.bind("allPostsLoaded", this.unbindInfScroll, this) this.collection.bind("add", this.addPost, this); if(window.app.user()) { @@ -53,6 +54,23 @@ app.views.Stream = Backbone.View.extend({ return this; }, + postRender: function() { + var collElem = $(this.el).find('.collapsible'); + _.each(collElem, function(elem) { + var elem = $(elem), + oembed = elem.find('.oembed'), + thumb = oembed.find('.thumb'); + + if( thumb.length > 0 && oembed.is(':visible') ) { + thumb.click(function(){ + oembed.find('*').toggle(); + $(this).hide(); + }); + oembed.find('*').toggle(); + } + }); + }, + appendLoader: function(){ $("#paginate").html($("", { src : "/images/static-loader.png", diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 829491b67..89627f61d 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -1827,6 +1827,11 @@ ul#press_logos :size 12px :color #777 + .collapsible + .oembed .thumb + :display none + :cursor pointer + .conversation_participants :z-index 3 :background From 2976f7d7d1e0cbe48a4eefcdbea8e059841bebc8 Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Wed, 7 Mar 2012 00:52:26 +0100 Subject: [PATCH 2/3] added overlayed "play" icon to thumb, made the "loader" gif background for oembed container make videos autoplay after click --- public/images/video-overlay.png | Bin 0 -> 1932 bytes .../app/templates/status-message.handlebars | 8 +++-- public/javascripts/app/views/content_view.js | 33 ++++++++++++------ public/javascripts/app/views/stream_view.js | 10 ++---- public/stylesheets/sass/application.sass | 18 ++++++++-- 5 files changed, 47 insertions(+), 22 deletions(-) create mode 100644 public/images/video-overlay.png diff --git a/public/images/video-overlay.png b/public/images/video-overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..dbeee2bb77defbd63f82333d6859fc25610fa662 GIT binary patch literal 1932 zcmV;72Xpv|P)MzCV_|S* zE^l&Yo9;Xs000LINkl##d#%0qIp>~pt|wTmJ==^PS%(f3)qrt~h31W7-(%&)yiY2yrBycJ zW~@g}07%@eX0sT<9>Z$Nq=F(|PGb9|{6N0Q+?G33%=kB@B22PtKfzz~-d%q91Jm zLiof2EiefZ6G^0yBoYctqTd^Q%KuLS{YBY@PEq1{Vvd+cGqSWC!n%}Ep{0=_(gcMl zi$mU~{_#Zxp6Vifdw>Ncu8{h4oQ3m|w`kckmuVcqQT##rtO}*V-zL0Gn-88;;K{pW zP_n+pJxg1OD;RZ_XtFq!p7QKLo5n%>K>D2K!rv=i@6$v7D)7YJcumx~j1uGS!g5C5 zLi!Xu1t2ORDpEy-_B%ddE(I1at^IJ%me)@x@OYPeB-yYuGjzNf7tv`MElI#;OxT1_ z0TY>J?=LXQF!EX|X3_o3!3KfHigH-meLBq0aXsT-ffhO>6h=>zxP)Pr_z8R2E3c*W zCcHJzjvpuRNK!sUXDxakx1ts8SfUfr=xMMFOv0ux3rbYzH-Q~US{9s9S3T!LGuIaM zN~a&zp4dS8B9Q<+=-V9nPU3>CGnPTn7qt00T<2gF&M^9w5ovIB85N)>Jls`(nikcjb5|_U*dUu1-5z_%Qj6k<4mm9^&dbAvQY*6 zjjW=s%PuClBr1S=ER&w7;!h0XRZQ1O5SB4Bp+vX#UkFF%79jaYv%DOn!vS7_OVNhB z8{VXo_(^odtXQdJweXb5jc$SY4wB znb#$P4qxf>C{TTY?txK9ZNWyt=(SvbVrwi96R^@QLtZ5)(vgrNb%>l*-2;cbPJn+Q zC}8A-X7w>1#bMVg5z8ZQ`=1mO(otKHd7G9B+Zy8n^KKNBobZV$yo6UUZ8>{xJPPn3 zAv#jE3mGqL>>be#IYkIdG@ABwVxgDM)A`C`O#lDcX&AGf(0#vb9(S32#)_F5SMfsTVjIYxca)Dw=6c zxB+j(>5ZCDhA)w_vGPV!vQK7_3oCpC*I*7!CLysRW%L^hrK`M^v0o3=SKjCYa(rtK zN;2W<<};^8{UJj7M(DR83btuMXkyT_OS85laI0&D{eT^G`K z)aOyqJ<#Tr;BpqG6H-rYU{7~&8O2v*(J4MjR+zw>Gt$qx>8AZIe!z^5g^H-%YmeUs z*zdMmFub?)2&^N}|K^Mn0K7r(kQXi|+8eB62^D)V6IL*Z5sMW?q2v`D#WrK`K(@iU z!|xqM=;4>g7k0T5s~C0GJro*`zwT^G(1&w>kl*N`hhMDO5kLHzgdX3+npSBWu@*Td zoN^Lg!vUW3iZb@&EmAkp5_){!QFnZ|cDr6cYS*VSbGQlZl*mMp6zq_!`zv zFCfE>7Z4}GD-^PHB&sCn#0D%whB$!$$*1rhKI1Pp?2>kI>r!wI zF2-dz&F*NPJsAGN7x)H0!$T(8AttbC_+*zrlPFT6)9x@P {{#if o_embed_cache.data.thumbnail_url}} - - {{/if}} +
+ +
+
+ {{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 fe2b20a0d..12ae5e374 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 5b13acd59..7f456a274 100644 --- a/public/javascripts/app/views/stream_view.js +++ b/public/javascripts/app/views/stream_view.js @@ -61,13 +61,9 @@ app.views.Stream = Backbone.View.extend({ oembed = elem.find('.oembed'), thumb = oembed.find('.thumb'); - if( thumb.length > 0 && oembed.is(':visible') ) { - thumb.click(function(){ - oembed.find('*').toggle(); - $(this).hide(); - }); - oembed.find('*').toggle(); - } + if( thumb.length > 0 /*&& oembed.is(':visible')*/ ) { + thumb.show(); + } }); }, diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 89627f61d..b35cc7e87 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -1828,9 +1828,21 @@ ul#press_logos :color #777 .collapsible - .oembed .thumb - :display none - :cursor pointer + .oembed + :background url('/images/ajax-loader2.gif') no-repeat center center + + .thumb + :position relative + :display none + :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 From 7505670a2a5e78f628b8f9a39b60f231bbc9ef3f Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Fri, 9 Mar 2012 18:16:21 +0100 Subject: [PATCH 3/3] removed unnecessary js/css, since it works differently now --- public/javascripts/app/views/stream_view.js | 14 -------------- public/stylesheets/sass/application.sass | 1 - 2 files changed, 15 deletions(-) diff --git a/public/javascripts/app/views/stream_view.js b/public/javascripts/app/views/stream_view.js index 7f456a274..0c3b71d74 100644 --- a/public/javascripts/app/views/stream_view.js +++ b/public/javascripts/app/views/stream_view.js @@ -16,7 +16,6 @@ app.views.Stream = Backbone.View.extend({ setupEvents : function(){ this.stream.bind("fetched", this.removeLoader, this) - this.stream.bind("fetched", this.postRender, this) this.stream.bind("allPostsLoaded", this.unbindInfScroll, this) this.collection.bind("add", this.addPost, this); if(window.app.user()) { @@ -53,19 +52,6 @@ app.views.Stream = Backbone.View.extend({ return this; }, - - postRender: function() { - var collElem = $(this.el).find('.collapsible'); - _.each(collElem, function(elem) { - var elem = $(elem), - oembed = elem.find('.oembed'), - thumb = oembed.find('.thumb'); - - if( thumb.length > 0 /*&& oembed.is(':visible')*/ ) { - thumb.show(); - } - }); - }, appendLoader: function(){ $("#paginate").html($("", { diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index b35cc7e87..d96fa4a9d 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -1833,7 +1833,6 @@ ul#press_logos .thumb :position relative - :display none :cursor pointer .video-overlay