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 32a128f5f..a20dfac00 100644 --- a/public/javascripts/app/templates/status-message.handlebars +++ b/public/javascripts/app/templates/status-message.handlebars @@ -19,9 +19,13 @@ {{#if o_embed_cache}}
{{#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