diff options
author | Steffen van Bergerem <svbergerem@online.de> | 2016-09-01 14:28:04 +0300 |
---|---|---|
committer | Benjamin Neff <benjamin@coding4coffee.ch> | 2016-09-04 04:55:09 +0300 |
commit | 4d51c0243252425179137b4c9633f0cc32b06760 (patch) | |
tree | 7a3768b0e983a4febd76e873833ca53b42c174e7 /app/assets | |
parent | 0514545fbaeaf79d01b2cd99831f28658cf2615b (diff) |
Add OpenGraph video support
closes #7043
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/app/helpers/open_graph.js | 12 | ||||
-rw-r--r-- | app/assets/javascripts/app/views/content_view.js | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/opengraph.scss | 35 | ||||
-rw-r--r-- | app/assets/templates/opengraph_tpl.jst.hbs | 12 |
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}} - |