From 2976f7d7d1e0cbe48a4eefcdbea8e059841bebc8 Mon Sep 17 00:00:00 2001
From: Florian Staudacher <florian_staudacher@yahoo.de>
Date: Wed, 7 Mar 2012 00:52:26 +0100
Subject: [PATCH] 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
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
SDq))d0000<MNUMnLSTYYD|Zb5

literal 0
HcmV?d00001

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}}
   <div class="oembed">
     {{#if o_embed_cache.data.thumbnail_url}}
-    <img src="{{o_embed_cache.data.thumbnail_url}}" class="thumb" />
-    {{/if}}
+    <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>
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 '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
-      } 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 '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
+    } 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