Add OpenGraph video support

closes #7043

4 files changed, 48 insertions, 21 deletions

diff --git a/app/assets/javascripts/app/helpers/open_graph.js b/app/assets/javascripts/app/helpers/open_graph.js
deleted file mode 100644
index f106b681f..000000000
--- a/app/assets/javascripts/app/helpers/open_graph.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-
-(function(){
-  app.helpers.openGraph = {
-    html : function (open_graph_cache) {
-      if (!open_graph_cache) { return ""; }
-      return '<img src="' + open_graph_cache.image + '" />';
-    },
-  };
-})();
-// @license-end
-
diff --git a/app/assets/javascripts/app/views/content_view.js b/app/assets/javascripts/app/views/content_view.js
index 76fb62739..485fca01c 100644
--- a/app/assets/javascripts/app/views/content_view.js
+++ b/app/assets/javascripts/app/views/content_view.js
@@ -151,6 +151,10 @@ app.views.OEmbed = app.views.Base.extend({
 app.views.OpenGraph = app.views.Base.extend({
   templateName : "opengraph",
 
+  events: {
+    "click .video-overlay": "loadVideo"
+  },
+
   initialize: function() {
     this.truncateDescription();
   },
@@ -161,6 +165,12 @@ app.views.OpenGraph = app.views.Base.extend({
       var ogdesc = this.model.get('open_graph_cache');
       ogdesc.description = app.helpers.truncate(ogdesc.description, 250);
     }
+  },
+
+  loadVideo: function() {
+    this.$(".opengraph-container").html(
+      "<iframe src='" + this.$(".video-overlay").attr("data-video-url") + "' frameBorder=0 width='100%'></iframe>"
+    );
   }
 });
 
diff --git a/app/assets/stylesheets/opengraph.scss b/app/assets/stylesheets/opengraph.scss
index b0f877e4c..3e7bd5c02 100644
--- a/app/assets/stylesheets/opengraph.scss
+++ b/app/assets/stylesheets/opengraph.scss
@@ -10,20 +10,41 @@
   overflow: hidden;
   a {
     color: #000;
-    img {
-      margin: 5px 5px 5px 0px;
-      float: left;
-      max-width: 150px;
-      padding-right: 5px;
-    }
     .og-title {
-      margin-bottom: 5px;
       font-weight: bold;
     }
   }
   a:hover {
     color: $blue;
   }
+
+  .thumb {
+    float: left;
+    margin: 5px;
+    margin-left: 0;
+    max-width: 150px;
+    padding-right: 5px;
+
+    .video-overlay {
+      cursor: pointer;
+      height: 145px;
+      width: 145px;
+    }
+
+    .overlay {
+      background-color: rgba($black, .2);
+      background-image: image-url('buttons/playbtn.png');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 60px 60px;
+      display: inline-block;
+      height: 145px;
+      position: relative;
+      top: -145px;
+      width: 145px;
+    }
+  }
+
   .og-description {
     color: $text-grey;
   }
diff --git a/app/assets/templates/opengraph_tpl.jst.hbs b/app/assets/templates/opengraph_tpl.jst.hbs
index fd1a66853..57fe9fc76 100644
--- a/app/assets/templates/opengraph_tpl.jst.hbs
+++ b/app/assets/templates/opengraph_tpl.jst.hbs
@@ -1,12 +1,20 @@
 {{#unless o_embed_cache}}
   {{#if open_graph_cache}}
     <div class="opengraph-container">
+      <div class="thumb">
+        {{#if open_graph_cache.video_url }}
+          <div class="video-overlay" data-video-url="{{open_graph_cache.video_url}}">
+            <img src="{{open_graph_cache.image}}" />
+            <div class="overlay"></div>
+          </div>
+        {{else}}
+          <img src="{{open_graph_cache.image}}" />
+        {{/if}}
+      </div>
       <a href="{{open_graph_cache.url}}" target="_blank">
-        <img src="{{open_graph_cache.image}}" />
         <p class="og-title">{{open_graph_cache.title}}</p>
       </a>
       <p class="og-description">{{open_graph_cache.description}}</p>
     </div>
   {{/if}}
 {{/unless}}
-