diff --git a/.gitignore b/.gitignore index aa9d88e866e..c619451c8ea 100644 --- a/.gitignore +++ b/.gitignore @@ -44,6 +44,7 @@ log/ # Ignore plugins except for the bundled ones. /plugins/* !/plugins/emoji/ +!/plugins/lazyYT/ !/plugins/poll/ /plugins/*/auto_generated/ diff --git a/plugins/lazyYT/README.md b/plugins/lazyYT/README.md new file mode 100644 index 00000000000..430a205f762 --- /dev/null +++ b/plugins/lazyYT/README.md @@ -0,0 +1,3 @@ +# lazyYT + +Lazy load YouTube videos plugin for [Discourse](http://discourse.org), highly inspired by the [lazyYT](https://github.com/tylerpearson/lazyYT) jQuery plugin. \ No newline at end of file diff --git a/plugins/lazyYT/assets/javascripts/initializers/lazyYT.js.es6 b/plugins/lazyYT/assets/javascripts/initializers/lazyYT.js.es6 new file mode 100644 index 00000000000..0743a30c371 --- /dev/null +++ b/plugins/lazyYT/assets/javascripts/initializers/lazyYT.js.es6 @@ -0,0 +1,13 @@ +/** + Apply lazyYT when the app boots +**/ +import { decorateCooked } from 'discourse/lib/plugin-api'; + +export default { + name: "apply-lazyYT", + initialize: function(container) { + decorateCooked(container, function($elem) { + $('.lazyYT', $elem).lazyYT(); + }); + } +}; diff --git a/plugins/lazyYT/assets/javascripts/lazyYT.js b/plugins/lazyYT/assets/javascripts/lazyYT.js new file mode 100644 index 00000000000..747ea69229c --- /dev/null +++ b/plugins/lazyYT/assets/javascripts/lazyYT.js @@ -0,0 +1,59 @@ +/*! LazyYT (lazy load Youtube videos plugin) - v0.3.4 - 2014-06-30 +* Usage:
loading...
+* Copyright (c) 2014 Tyler Pearson; Licensed MIT */ + + +;(function ($) { + 'use strict'; + + function setUp($el) { + var width = $el.data('width'), + height = $el.data('height'), + ratio = $el.data('ratio'), + id = $el.data('youtube-id'), + aspectRatio = ['16', '9'], + paddingTop = 0, + youtubeParameters = $el.data('parameters') || ''; + + if (typeof width === 'undefined' || typeof height === 'undefined') { + height = 0; + width = '100%'; + aspectRatio = (ratio.split(":")[1] / ratio.split(":")[0]) * 100; + paddingTop = aspectRatio + '%'; + } + + $el.css({ + 'position': 'relative', + 'height': height, + 'width': width, + 'padding-top': paddingTop, + 'background': 'url(http://img.youtube.com/vi/' + id + '/hqdefault.jpg) center center no-repeat', + 'cursor': 'pointer', + 'background-size': 'cover' + }) + .html('

') + .addClass('lazyYT-image-loaded'); + + $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + id + '?v=2&alt=json', function (data) { + $('#lazyYT-title-' + id).text(data.entry.title.$t); + }); + + $el.on('click', function (e) { + e.preventDefault(); + if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) { + $el.html('') + .removeClass('lazyYT-image-loaded') + .addClass('lazyYT-video-loaded'); + } + }); + + } + + $.fn.lazyYT = function () { + return this.each(function () { + var $el = $(this).css('cursor', 'pointer'); + setUp($el); + }); + }; + +}(jQuery)); diff --git a/plugins/lazyYT/assets/stylesheets/lazyYT.css b/plugins/lazyYT/assets/stylesheets/lazyYT.css new file mode 100644 index 00000000000..3887aa6dd04 --- /dev/null +++ b/plugins/lazyYT/assets/stylesheets/lazyYT.css @@ -0,0 +1,34 @@ +/*! +* lazyyt +* v0.3.4 - 2014-06-30 +* Copyright (c) 2014 Tyler Pearson (http://tylerp.me); Licensed MIT %> +*/ + +.lazyYT-title { + z-index: 100!important; + color: #fff!important; + font-family: sans-serif!important; + font-size: 12px!important; + top: 10px!important; + left: 12px!important; + position: absolute!important; + margin: 0!important; + padding: 0!important; + line-height: 1!important; + font-style: normal!important; + font-weight: normal!important; +} + +.lazyYT-button { + margin: 0!important; + padding: 0!important; + width: 60px!important; + height: 41px!important; + z-index: 100!important; + position: absolute!important; + top: 50%!important; + margin-top: -22px!important; + left: 50%!important; + margin-left: -30px!important; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAApCAYAAABp50paAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABV9JREFUeNrcWk1IK1cUvrmZGBOjJvr6xKe+Slvroi6kK6GrUkSxO12IC6GgUFBcuOlC8GdRulERV3VRQV0IKhRU0NJupK3tpi1dCRaxffWHGjWZPJNnNJlMz9FzX+ZNkzylcxP1wMdMZiYz97vnu+ee+2Njmc0GyANwgANQDCgAuABOwGOAG6AAiuh+MV3Lo+fc9KyN3qGYvnEBSAA0QBTwAnBp+P0ccAxQ6bkw/T4HRABn9B+8F6f/ZiRktjJANaCSUE0kkVApoBDgAeQTIeM7dAKjAuiG6+b7wniKstgMv+2m5xMGslgZIUAAEAOcAv4GHAL+BDwDBNMRxvOPAZ8C3iUPOVNUiGaCfgOV3MZe9z5OlSDAUzxzQZXyC+BLwM+pCtMJGCTvCTJxOlpBxGpLVzF2ajqiMvyAzwDfGuXyPuALkmyY5KGZ5GVGri1duXRyVIyOPsA7gO9R/iIYtQLKiSy7Q6T+b2UkSN7vAT4U7QGDz9Mbtp/7SPySjh9gj8EpApeyh2/YoyicuhlvhuBkVU3n2jA/cBkJxyUVjBuipz2HEf0qYcKs5w1ify6DbFVVVbSrq0s9ODhQlpaWClRVdUtWUyqLE0cPEn5CXkhI8HC8ubk5ODw8XJBIJOJNTU2H/f39j/f29jxZDJI2Iowq9nJiLk1KZWWYqcKHOC9pa2t7c21tLdTR0XHgdDo1kng22rdGQaucU2YlraY1TRPJACrIXldXVzU/P+8YHR09rqysVIkwz1JWxjmNZqQRBimbBxdIvLyvr8+7uroabGxs9NP1bAS0fOmE09Q2SsxdX19fsbCw4BgcHNzzeDxhGrDItCJO2s52hiVIO3w+X+nIyEgxRPCjmpqaE8lp7VU/nCeTMASrTO++GrTDM8UQzStB4uHOzs5niqIkJLRrLIeTG2QkpVZtthu9Fgk6amtrn8zMzLgmJyePvV7vmcVl0kUuncfuhumkiIqenh7f4uJiAJKWMwuDmS4krdyxURKOYz0Qvd0NDQ1Ri9+tKIbh050Zx+q6fjg1NaWtr6/7SO5WvTuq0ABZuNyWY7L6ycnJ0dDQ0OXc3FxFJBKxW0w4opCEcmnYrDh4Vd3c3FS7u7t929vbj6ipWT3IuOREOFeeRQ/GQqGQf2xsLNDS0vIIyBbRdU2Cgl5K2pYD+SKpF1tbW0cDAwOu5eXlKkleNdqVpMMyk3eQaioJ6zCo8M/OzsZh6Fi0v79fYsi+ZNpzJByU6WHD4AEJ4QxpfHd392hiYuJyenq64vz8XGGvrlJIHSbix46lavc60xISVjc2NsK9vb0ukHKZYeIhG00I7WpeOirxQ3xnZwc99w90MaHx8fFAa2trMZAtYcl542wYOhbXoU7xox8BvmLJFTxLCRcWFkbb29tVv9+vrKyseOnj2SL6MqUEHAA+QcJ1gDl2PTcdldCexeKXCEq5GIrizOzvgC5OUTrI/rtua1ncYsl1nlzm7CjpCKcTld3vtaQbZVlY+SJoBR4wUeHIPUyykDBOwP8mZgTYw1pQQy755N2fsGlxurgO+JUmAxyGh/V7VgHmMjspNn0D+IEZZhOwDf/FrheOn7Lkdgexkm43vfB18rF8JuQGvYCD4DSUH69/B/gccJSqgG+z630euJb6Fv3JaSCfjpBm6McTFqWKNvbqPg6eIefXSbYXVAbc8PIH4EfA1+x620NGj2Cf7KMOG7cm4fi0hK5XUw0KiG1MeHQTHBZGVrFjJ0znuEXpjIItdnX7FHRPCeLeITPt4LmtBEWNiz1XYj7MxZJbmPIJpSy5pUlUXDrPxAzKiBBJN53vk9fE/q0okY4ZVBS7jaL+FWAA/y++OTUmOgsAAAAASUVORK5CYII=')!important; +} diff --git a/plugins/lazyYT/plugin.rb b/plugins/lazyYT/plugin.rb new file mode 100644 index 00000000000..46b413933b8 --- /dev/null +++ b/plugins/lazyYT/plugin.rb @@ -0,0 +1,28 @@ +# name: lazyYT +# about: Uses the lazyYT plugin to lazy load Youtube videos +# version: 0.1 +# authors: Arpit Jalan + +# javascript +register_asset "javascripts/lazyYT.js" + +# stylesheet +register_asset "stylesheets/lazyYT.css" + +# freedom patch YouTube Onebox +class Onebox::Engine::YoutubeOnebox + include Onebox::Engine + + def to_html + if video_id + # Avoid making HTTP requests if we are able to get the video ID from the + # URL. + html = "
" + else + # Fall back to making HTTP requests. + html = raw[:html] || "" + end + + rewrite_agnostic(append_params(html)) + end +end