mirror of
https://github.com/discourse/discourse.git
synced 2025-05-21 18:12:32 +08:00
Rename lazyYT plugin directory name to lazy-yt
This commit is contained in:
Arpit Jalan
3
plugins/lazy-yt/README.md
Normal file
3
plugins/lazy-yt/README.md
Normal file
@ -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.
|
||||
@ -0,0 +1,28 @@
|
||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
||||
|
||||
export default {
|
||||
name: "apply-lazyYT",
|
||||
initialize() {
|
||||
withPluginApi("0.1", api => {
|
||||
api.decorateCooked(
|
||||
$elem => {
|
||||
const iframes = $(".lazyYT", $elem);
|
||||
if (iframes.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(".lazyYT", $elem).lazyYT({
|
||||
onPlay(e, $el) {
|
||||
// don't cloak posts that have playing videos in them
|
||||
const postId = parseInt($el.closest("article").data("post-id"));
|
||||
if (postId) {
|
||||
api.preventCloak(postId);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
{ id: "discourse-lazyyt" }
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
133
plugins/lazy-yt/assets/javascripts/lazyYT.js
Normal file
133
plugins/lazy-yt/assets/javascripts/lazyYT.js
Normal file
@ -0,0 +1,133 @@
|
||||
/*!
|
||||
* lazyYT (lazy load YouTube videos)
|
||||
* v1.0.1 - 2014-12-30
|
||||
* (CC) This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
|
||||
* http://creativecommons.org/licenses/by-sa/4.0/
|
||||
* Contributors: https://github.com/tylerpearson/lazyYT/graphs/contributors || https://github.com/daugilas/lazyYT/graphs/contributors
|
||||
*
|
||||
* Usage: <div class="lazyYT" data-youtube-id="laknj093n" data-parameters="rel=0">loading...</div>
|
||||
*
|
||||
* Note: Discourse has forked this from the original, beware when updating the file.
|
||||
*
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
function setUp($el, settings) {
|
||||
var width = $el.data('width'),
|
||||
height = $el.data('height'),
|
||||
ratio = ($el.data('ratio')) ? $el.data('ratio') : settings.default_ratio,
|
||||
id = $el.data('youtube-id'),
|
||||
title = $el.data('youtube-title'),
|
||||
padding_bottom,
|
||||
innerHtml = [],
|
||||
$thumb,
|
||||
thumb_img,
|
||||
youtube_parameters = $el.data('parameters') || '';
|
||||
|
||||
ratio = ratio.split(":");
|
||||
|
||||
// width and height might override default_ratio value
|
||||
if (typeof width === 'number' && typeof height === 'number') {
|
||||
$el.width(width);
|
||||
padding_bottom = height + 'px';
|
||||
} else if (typeof width === 'number') {
|
||||
$el.width(width);
|
||||
padding_bottom = (width * ratio[1] / ratio[0]) + 'px';
|
||||
} else {
|
||||
width = $el.width();
|
||||
|
||||
// no width means that container is fluid and will be the size of its parent
|
||||
if (width === 0) {
|
||||
width = $el.parent().width();
|
||||
}
|
||||
|
||||
padding_bottom = (ratio[1] / ratio[0] * 100) + '%';
|
||||
}
|
||||
|
||||
//
|
||||
// This HTML will be placed inside 'lazyYT' container
|
||||
|
||||
innerHtml.push('<div class="ytp-thumbnail">');
|
||||
|
||||
// Play button from YouTube (exactly as it is in YouTube)
|
||||
innerHtml.push('<div class="ytp-large-play-button"');
|
||||
if (width <= 640) innerHtml.push(' style="transform: scale(0.563888888888889);"');
|
||||
innerHtml.push('>');
|
||||
innerHtml.push('<svg>');
|
||||
innerHtml.push('<path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg" d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z"></path>');
|
||||
innerHtml.push('<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="33.3,41.4 33.3,17.75 56,29.6"></polygon>');
|
||||
innerHtml.push('</svg>');
|
||||
innerHtml.push('</div>'); // end of .ytp-large-play-button
|
||||
|
||||
innerHtml.push('</div>'); // end of .ytp-thumbnail
|
||||
|
||||
// Video title (info bar)
|
||||
innerHtml.push('<div class="html5-info-bar">');
|
||||
innerHtml.push('<div class="html5-title">');
|
||||
innerHtml.push('<div class="html5-title-text-wrapper">');
|
||||
innerHtml.push('<a class="html5-title-text" target="_blank" tabindex="3100" href="https://www.youtube.com/watch?v=', id, '">');
|
||||
if (title === undefined || title === null || title === '') {
|
||||
innerHtml.push('youtube.com/watch?v=' + id);
|
||||
} else {
|
||||
innerHtml.push(title);
|
||||
}
|
||||
innerHtml.push('</a>');
|
||||
innerHtml.push('</div>'); // .html5-title
|
||||
innerHtml.push('</div>'); // .html5-title-text-wrapper
|
||||
innerHtml.push('</div>'); // end of Video title .html5-info-bar
|
||||
|
||||
$el.css({
|
||||
'padding-bottom': padding_bottom
|
||||
})
|
||||
.html(innerHtml.join(''));
|
||||
|
||||
if (width > 640) {
|
||||
thumb_img = 'maxresdefault.jpg';
|
||||
} else if (width > 480) {
|
||||
thumb_img = 'sddefault.jpg';
|
||||
} else if (width > 320) {
|
||||
thumb_img = 'hqdefault.jpg';
|
||||
} else if (width > 120) {
|
||||
thumb_img = 'mqdefault.jpg';
|
||||
} else if (width === 0) { // sometimes it fails on fluid layout
|
||||
thumb_img = 'hqdefault.jpg';
|
||||
} else {
|
||||
thumb_img = 'default.jpg';
|
||||
}
|
||||
|
||||
$thumb = $el.find('.ytp-thumbnail').css({
|
||||
'background-image': ['url(//img.youtube.com/vi/', id, '/', thumb_img, ')'].join('')
|
||||
})
|
||||
.addClass('lazyYT-image-loaded')
|
||||
.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!$el.hasClass('lazyYT-video-loaded') && $thumb.hasClass('lazyYT-image-loaded')) {
|
||||
$el.html('<iframe src="//www.youtube.com/embed/' + id + '?autoplay=1&' + youtube_parameters + '" frameborder="0" allowfullscreen></iframe>')
|
||||
.addClass('lazyYT-video-loaded');
|
||||
}
|
||||
|
||||
if (settings.onPlay) {
|
||||
settings.onPlay(e, $el);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$.fn.lazyYT = function (newSettings) {
|
||||
var defaultSettings = {
|
||||
default_ratio: '16:9',
|
||||
callback: null, // ToDO execute callback if given
|
||||
container_class: 'lazyYT-container'
|
||||
};
|
||||
var settings = $.extend(defaultSettings, newSettings);
|
||||
|
||||
return this.each(function () {
|
||||
var $el = $(this).addClass(settings.container_class);
|
||||
setUp($el, settings);
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
118
plugins/lazy-yt/assets/stylesheets/lazyYT.css
Normal file
118
plugins/lazy-yt/assets/stylesheets/lazyYT.css
Normal file
@ -0,0 +1,118 @@
|
||||
/*!
|
||||
* lazyYT (lazy load YouTube videos)
|
||||
* v1.0.1 - 2014-12-30
|
||||
* (CC) This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
|
||||
* http://creativecommons.org/licenses/by-sa/4.0/
|
||||
* Contributors: https://github.com/tylerpearson/lazyYT/graphs/contributors || https://github.com/daugilas/lazyYT/graphs/contributors
|
||||
*/
|
||||
|
||||
.lazyYT-container {
|
||||
position: relative;
|
||||
z-index: z("base");
|
||||
display: block;
|
||||
height: 0;
|
||||
padding: 0 0 56.25% 0;
|
||||
overflow: hidden;
|
||||
background-color: #000000;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.lazyYT-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Video Title (YouTube style)
|
||||
*/
|
||||
|
||||
.lazyYT-container .html5-info-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 935;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
-webkit-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
-moz-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.lazyYT-container .html5-title {
|
||||
padding-right: 6px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.lazyYT-container .html5-title-text-wrapper {
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lazyYT-container .html5-title-text {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.lazyYT-container .html5-title-text:hover {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
* Thumbnail
|
||||
*/
|
||||
|
||||
.ytp-thumbnail {
|
||||
padding-bottom: inherit;
|
||||
cursor: pointer;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/*
|
||||
* Play button (YouTube style)
|
||||
*/
|
||||
|
||||
.ytp-large-play-button {
|
||||
position: absolute;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
width: 86px !important;
|
||||
height: 60px !important;
|
||||
padding: 0 !important;
|
||||
margin: -29px 0 0 -42px !important;
|
||||
font-size: normal !important;
|
||||
font-weight: normal !important;
|
||||
line-height: 1 !important;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.ytp-large-play-button-svg {
|
||||
opacity: .9;
|
||||
fill: #1f1f1f;
|
||||
}
|
||||
|
||||
.lazyYT-image-loaded:hover .ytp-large-play-button-svg,
|
||||
.ytp-large-play-button:focus .ytp-large-play-button-svg {
|
||||
opacity: 1;
|
||||
fill: #cc181e;
|
||||
}
|
||||
3
plugins/lazy-yt/assets/stylesheets/lazyYT_mobile.scss
Normal file
3
plugins/lazy-yt/assets/stylesheets/lazyYT_mobile.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.lazyYT {
|
||||
max-width: 100%;
|
||||
}
|
||||
54
plugins/lazy-yt/plugin.rb
Normal file
54
plugins/lazy-yt/plugin.rb
Normal file
@ -0,0 +1,54 @@
|
||||
# frozen_string_literal: true
|
||||
|
||||
# name: lazyYT
|
||||
# about: Uses the lazyYT plugin to lazy load Youtube videos
|
||||
# version: 1.0.1
|
||||
# authors: Arpit Jalan
|
||||
# url: https://github.com/discourse/discourse/tree/master/plugins/lazy-yt
|
||||
|
||||
hide_plugin if self.respond_to?(:hide_plugin)
|
||||
|
||||
# javascript
|
||||
register_asset "javascripts/lazyYT.js"
|
||||
|
||||
# stylesheet
|
||||
register_asset "stylesheets/lazyYT.css"
|
||||
register_asset "stylesheets/lazyYT_mobile.scss", :mobile
|
||||
|
||||
# freedom patch YouTube Onebox
|
||||
class Onebox::Engine::YoutubeOnebox
|
||||
include Onebox::Engine
|
||||
alias_method :yt_onebox_to_html, :to_html
|
||||
|
||||
def to_html
|
||||
if video_id && !params['list']
|
||||
video_width = (params['width'] && params['width'].to_i <= 695) ? params['width'] : 480 # embed width
|
||||
video_height = (params['height'] && params['height'].to_i <= 500) ? params['height'] : 270 # embed height
|
||||
|
||||
# Put in the LazyYT div instead of the iframe
|
||||
escaped_title = ERB::Util.html_escape(video_title)
|
||||
"<div class=\"lazyYT\" data-youtube-id=\"#{video_id}\" data-youtube-title=\"#{escaped_title}\" data-width=\"#{video_width}\" data-height=\"#{video_height}\" data-parameters=\"#{embed_params}\"></div>"
|
||||
else
|
||||
yt_onebox_to_html
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
after_initialize do
|
||||
|
||||
on(:reduce_cooked) do |fragment|
|
||||
fragment.css(".lazyYT").each do |yt|
|
||||
begin
|
||||
youtube_id = yt["data-youtube-id"]
|
||||
parameters = yt["data-parameters"]
|
||||
uri = URI("https://www.youtube.com/embed/#{youtube_id}?autoplay=1&#{parameters}")
|
||||
yt.replace %{<p><a href="#{uri.to_s}">https://#{uri.host}#{uri.path}</a></p>}
|
||||
rescue URI::InvalidURIError
|
||||
# remove any invalid/weird URIs
|
||||
yt.remove
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
Reference in New Issue
Block a user