From cc5c17a01ee2cb5901fa1f1970350ebfd519eb9b Mon Sep 17 00:00:00 2001 From: Jan Cernik Date: Thu, 16 Mar 2023 21:24:15 -0300 Subject: [PATCH] UX: Remove lazy-yt and include lazy-videos --- .gitignore | 2 +- plugins/discourse-lazy-videos/README.md | 12 ++ .../discourse/components/lazy-iframe.hbs | 11 ++ .../discourse/components/lazy-iframe.js | 14 ++ .../discourse/components/lazy-video.hbs | 51 +++++ .../discourse/components/lazy-video.js | 23 +++ .../javascripts/initializers/lazy-videos.js | 42 ++++ .../javascripts/lib/lazy-video-attributes.js | 15 ++ .../assets/stylesheets/lazy-videos.scss | 172 +++++++++++++++++ .../config/locales/server.en.yml | 3 + .../discourse-lazy-videos/config/settings.yml | 17 ++ .../lib/lazy-videos/lazy_tiktok.rb | 31 +++ .../lib/lazy-videos/lazy_vimeo.rb | 31 +++ .../lib/lazy-videos/lazy_youtube.rb | 37 ++++ plugins/discourse-lazy-videos/plugin.rb | 27 +++ plugins/lazy-yt/README.md | 3 - .../assets/javascripts/initializers/lazyYT.js | 33 ---- .../lazy-yt/assets/javascripts/lib/lazyYT.js | 179 ------------------ plugins/lazy-yt/assets/stylesheets/lazyYT.css | 127 ------------- .../assets/stylesheets/lazyYT_mobile.scss | 3 - plugins/lazy-yt/config/locales/server.en.yml | 3 - plugins/lazy-yt/config/settings.yml | 5 - plugins/lazy-yt/plugin.rb | 74 -------- 23 files changed, 487 insertions(+), 428 deletions(-) create mode 100644 plugins/discourse-lazy-videos/README.md create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js create mode 100644 plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js create mode 100644 plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss create mode 100644 plugins/discourse-lazy-videos/config/locales/server.en.yml create mode 100644 plugins/discourse-lazy-videos/config/settings.yml create mode 100644 plugins/discourse-lazy-videos/lib/lazy-videos/lazy_tiktok.rb create mode 100644 plugins/discourse-lazy-videos/lib/lazy-videos/lazy_vimeo.rb create mode 100644 plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb create mode 100644 plugins/discourse-lazy-videos/plugin.rb delete mode 100644 plugins/lazy-yt/README.md delete mode 100644 plugins/lazy-yt/assets/javascripts/initializers/lazyYT.js delete mode 100644 plugins/lazy-yt/assets/javascripts/lib/lazyYT.js delete mode 100644 plugins/lazy-yt/assets/stylesheets/lazyYT.css delete mode 100644 plugins/lazy-yt/assets/stylesheets/lazyYT_mobile.scss delete mode 100644 plugins/lazy-yt/config/locales/server.en.yml delete mode 100644 plugins/lazy-yt/config/settings.yml delete mode 100644 plugins/lazy-yt/plugin.rb diff --git a/.gitignore b/.gitignore index ad4ff4d929..0e726f326b 100644 --- a/.gitignore +++ b/.gitignore @@ -38,7 +38,7 @@ !/plugins/discourse-local-dates !/plugins/discourse-narrative-bot !/plugins/discourse-presence -!/plugins/lazy-yt/ +!/plugins/discourse-lazy-videos/ !/plugins/chat/ !/plugins/poll/ !/plugins/styleguide diff --git a/plugins/discourse-lazy-videos/README.md b/plugins/discourse-lazy-videos/README.md new file mode 100644 index 0000000000..47d4df6752 --- /dev/null +++ b/plugins/discourse-lazy-videos/README.md @@ -0,0 +1,12 @@ +## Discourse Lazy Videos + +Adds lazy loading support for embedded videos + +### Supported providers + + - YouTube + - Vimeo + +### Experimental + + - TikTok \ No newline at end of file diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs new file mode 100644 index 0000000000..d662c4787a --- /dev/null +++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs @@ -0,0 +1,11 @@ +{{#if @providerName}} + +{{/if}} \ No newline at end of file diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js new file mode 100644 index 0000000000..7c81303ea8 --- /dev/null +++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js @@ -0,0 +1,14 @@ +import Component from "@glimmer/component"; + +export default class LazyVideo extends Component { + get iframeSrc() { + switch (this.args.providerName) { + case "youtube": + return `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1`; + case "vimeo": + return `https://player.vimeo.com/video/${this.args.videoId}?autoplay=1`; + case "tiktok": + return `https://www.tiktok.com/embed/v2/${this.args.videoId}`; + } + } +} diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs new file mode 100644 index 0000000000..b3dba578c7 --- /dev/null +++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs @@ -0,0 +1,51 @@ +
+ {{#if this.isLoaded}} + + {{else}} +
+ +
+
+
+
+ + {{@videoAttributes.title}} + +
+
+ {{/if}} +
\ No newline at end of file diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js new file mode 100644 index 0000000000..375a5cabe5 --- /dev/null +++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js @@ -0,0 +1,23 @@ +import Component from "@glimmer/component"; +import { action } from "@ember/object"; +import { tracked } from "@glimmer/tracking"; + +export default class LazyVideo extends Component { + @tracked isLoaded = false; + + @action + loadEmbed() { + if (!this.isLoaded) { + this.isLoaded = true; + this.args.callback?.(); + } + } + + @action + onKeyPress(event) { + if (event.key === "Enter") { + event.preventDefault(); + this.loadEmbed(); + } + } +} diff --git a/plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js b/plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js new file mode 100644 index 0000000000..82a63306b4 --- /dev/null +++ b/plugins/discourse-lazy-videos/assets/javascripts/initializers/lazy-videos.js @@ -0,0 +1,42 @@ +import { withPluginApi } from "discourse/lib/plugin-api"; +import getVideoAttributes from "../lib/lazy-video-attributes"; +import { hbs } from "ember-cli-htmlbars"; + +function initLazyEmbed(api) { + api.decorateCookedElement( + (cooked, helper) => { + if (cooked.classList.contains("d-editor-preview")) { + return; + } + + const lazyContainers = cooked.querySelectorAll(".lazy-video-container"); + + lazyContainers.forEach((container) => { + const callback = () => { + const postId = cooked.closest("article")?.dataset?.postId; + if (postId) { + api.preventCloak(parseInt(postId, 10)); + } + }; + + const videoAttributes = getVideoAttributes(container); + const lazyVideo = helper.renderGlimmer( + "p.lazy-video-wrapper", + hbs``, + { param: videoAttributes, callback } + ); + + container.replaceWith(lazyVideo); + }); + }, + { onlyStream: true, id: "discourse-lazy-videos" } + ); +} + +export default { + name: "discourse-lazy-videos", + + initialize() { + withPluginApi("1.6.0", initLazyEmbed); + }, +}; diff --git a/plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js b/plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js new file mode 100644 index 0000000000..d794d20dd7 --- /dev/null +++ b/plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js @@ -0,0 +1,15 @@ +import { sanitize } from "discourse/lib/text"; + +export default function getVideoAttributes(cooked) { + if (!cooked.classList.contains("lazy-video-container")) { + return {}; + } + + const url = cooked.querySelector("a")?.getAttribute("href"); + const thumbnail = cooked.querySelector("img")?.getAttribute("src"); + const title = sanitize(cooked.dataset.videoTitle); + const providerName = cooked.dataset.providerName; + const id = sanitize(cooked.dataset.videoId); + + return { url, thumbnail, title, providerName, id }; +} diff --git a/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss b/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss new file mode 100644 index 0000000000..91c4f10a03 --- /dev/null +++ b/plugins/discourse-lazy-videos/assets/stylesheets/lazy-videos.scss @@ -0,0 +1,172 @@ +.lazy-video-container { + z-index: z("base"); + position: relative; + display: block; + height: 0; + padding: 0 0 56.25% 0; + background-color: #000; + margin-bottom: 12px; + + .video-thumbnail { + cursor: pointer; + + img { + object-fit: cover; + width: 100%; + } + + &:hover, + &:focus { + .icon { + transform: translate(-50%, -50%) scale(1.1); + } + } + + &:focus { + outline: 5px auto Highlight; + outline: 5px auto -webkit-focus-ring-color; + } + + &:active { + outline: 0px; + } + } + + .title-container { + position: absolute; + display: flex; + align-items: center; + top: 0; + z-index: 935; + width: 100%; + height: 60px; + overflow: hidden; + background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(255, 0, 0, 0)); + + .title-wrapper { + overflow: hidden; + padding-inline: 20px; + padding-block: 10px; + + .title-link { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #fff; + text-decoration: none; + font-size: 18px; + font-family: Arial, sans-serif; + + &:hover { + text-decoration: underline; + } + } + } + } + + iframe { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + } + + .icon { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + transition: 150ms; + + // Default play button + background: svg-uri( + "" + ); + width: 60px; + height: 60px; + + &.youtube-icon { + width: 68px; + height: 48px; + background: svg-uri( + "" + ); + } + + &.vimeo-icon { + width: 77px; + height: 44px; + background: svg-uri( + "" + ); + } + + &.tiktok-icon { + width: 58px; + height: 64px; + background: svg-uri( + " " + ); + } + } +} + +// TikTok iframe isn't fluid +.lazy-video-container.tiktok-onebox { + width: 332px; + height: 745px; + padding: 0; + + .video-thumbnail.tiktok img { + height: 745px; + } + + iframe { + min-width: 332px; + height: 742px; + background-color: #fff; + border-top: 3px solid #fff; + border-radius: 9px; + } +} + +// Temporary styles until we support chat + +.chat-message-content .lazy-video-container { + padding: 0; + margin-bottom: 0; + background-color: transparent; + object-fit: contain; + height: 175px; + text-overflow: ellipsis; + + &::before { + content: attr(data-provider-name) " | " attr(data-video-title); + text-transform: capitalize; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + height: 25px; + } + + a { + display: block; + height: 150px; + + img { + height: 100%; + pointer-events: none; + } + } +} + +.ytp-thumbnail-image { + max-height: 150px !important; + width: unset !important; + pointer-events: none !important; + display: block; +} diff --git a/plugins/discourse-lazy-videos/config/locales/server.en.yml b/plugins/discourse-lazy-videos/config/locales/server.en.yml new file mode 100644 index 0000000000..cff25e5b6e --- /dev/null +++ b/plugins/discourse-lazy-videos/config/locales/server.en.yml @@ -0,0 +1,3 @@ +en: + site_settings: + lazy_videos_enabled: "Enable the Lazy Videos plugin" \ No newline at end of file diff --git a/plugins/discourse-lazy-videos/config/settings.yml b/plugins/discourse-lazy-videos/config/settings.yml new file mode 100644 index 0000000000..bb629d770b --- /dev/null +++ b/plugins/discourse-lazy-videos/config/settings.yml @@ -0,0 +1,17 @@ +plugins: + lazy_videos_enabled: + default: true + client: true + hidden: false + lazy_youtube_enabled: + default: true + client: true + hidden: false + lazy_vimeo_enabled: + default: true + client: true + hidden: false + lazy_tiktok_enabled: + default: false + client: true + hidden: false \ No newline at end of file diff --git a/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_tiktok.rb b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_tiktok.rb new file mode 100644 index 0000000000..d667cce694 --- /dev/null +++ b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_tiktok.rb @@ -0,0 +1,31 @@ +# frozen_string_literal: true + +require "onebox" + +class Onebox::Engine::TiktokOnebox + include Onebox::Engine + alias_method :default_onebox_to_html, :to_html + + def to_html + if SiteSetting.lazy_videos_enabled && SiteSetting.lazy_tiktok_enabled && + oembed_data.embed_product_id + thumbnail_url = oembed_data.thumbnail_url + escaped_title = ERB::Util.html_escape(oembed_data.title) + + <<~HTML +
+ + + +
+ HTML + else + default_onebox_to_html + end + end +end diff --git a/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_vimeo.rb b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_vimeo.rb new file mode 100644 index 0000000000..5e983dd18e --- /dev/null +++ b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_vimeo.rb @@ -0,0 +1,31 @@ +# frozen_string_literal: true + +require "onebox" + +class Onebox::Engine::VimeoOnebox + include Onebox::Engine + alias_method :default_onebox_to_html, :to_html + + def to_html + if SiteSetting.lazy_videos_enabled && SiteSetting.lazy_vimeo_enabled + video_id = oembed_data[:video_id] + thumbnail_url = "https://vumbnail.com/#{oembed_data[:video_id]}.jpg" + escaped_title = ERB::Util.html_escape(og_data.title) + + <<~HTML +
+ + + +
+ HTML + else + default_onebox_to_html + end + end +end diff --git a/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb new file mode 100644 index 0000000000..49be27cb13 --- /dev/null +++ b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb @@ -0,0 +1,37 @@ +# frozen_string_literal: true + +require "onebox" + +class Onebox::Engine::YoutubeOnebox + include Onebox::Engine + alias_method :default_onebox_to_html, :to_html + + def to_html + if SiteSetting.lazy_videos_enabled && SiteSetting.lazy_youtube_enabled && video_id && + !params["list"] + result = parse_embed_response + result ||= get_opengraph.data + + thumbnail_url = "https://img.youtube.com/vi/#{video_id}/maxresdefault.jpg" + thumbnail_response = Net::HTTP.get_response(URI(thumbnail_url)) + thumbnail_url = result[:image] if !thumbnail_response.kind_of?(Net::HTTPSuccess) + + escaped_title = ERB::Util.html_escape(video_title) + + <<~HTML +
+ + + +
+ HTML + else + default_onebox_to_html + end + end +end diff --git a/plugins/discourse-lazy-videos/plugin.rb b/plugins/discourse-lazy-videos/plugin.rb new file mode 100644 index 0000000000..ee4428a10c --- /dev/null +++ b/plugins/discourse-lazy-videos/plugin.rb @@ -0,0 +1,27 @@ +# frozen_string_literal: true + +# name: discourse-lazy-videos +# about: Lazy loading for embedded videos +# version: 0.1 +# authors: Jan Cernik +# url: https://github.com/discourse/discourse-lazy-videos + +hide_plugin if self.respond_to?(:hide_plugin) +enabled_site_setting :lazy_videos_enabled + +register_asset "stylesheets/lazy-videos.scss" + +require_relative "lib/lazy-videos/lazy_youtube" +require_relative "lib/lazy-videos/lazy_vimeo" +require_relative "lib/lazy-videos/lazy_tiktok" + +after_initialize do + on(:reduce_cooked) do |fragment| + fragment + .css(".lazy-video-container a") + .each do |video| + href = video["href"] + video.inner_html += "

#{href}

" + end + end +end diff --git a/plugins/lazy-yt/README.md b/plugins/lazy-yt/README.md deleted file mode 100644 index 5f0e7d7e0d..0000000000 --- a/plugins/lazy-yt/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# lazy-yt - -Lazy load YouTube videos plugin for [Discourse](http://discourse.org), highly inspired by the [lazyYT](https://github.com/tylerpearson/lazyYT) jQuery plugin. diff --git a/plugins/lazy-yt/assets/javascripts/initializers/lazyYT.js b/plugins/lazy-yt/assets/javascripts/initializers/lazyYT.js deleted file mode 100644 index cbc4df3c68..0000000000 --- a/plugins/lazy-yt/assets/javascripts/initializers/lazyYT.js +++ /dev/null @@ -1,33 +0,0 @@ -import { withPluginApi } from "discourse/lib/plugin-api"; -import initLazyYt from "../lib/lazyYT"; - -export default { - name: "apply-lazyYT", - initialize() { - withPluginApi("0.1", (api) => { - initLazyYt($); - 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"), - 10 - ); - if (postId) { - api.preventCloak(postId); - } - }, - }); - }, - { id: "discourse-lazyyt" } - ); - }); - }, -}; diff --git a/plugins/lazy-yt/assets/javascripts/lib/lazyYT.js b/plugins/lazy-yt/assets/javascripts/lib/lazyYT.js deleted file mode 100644 index 467515e4ee..0000000000 --- a/plugins/lazy-yt/assets/javascripts/lib/lazyYT.js +++ /dev/null @@ -1,179 +0,0 @@ -/*! - * 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:
loading...
- * - * Note: Discourse has forked this from the original, beware when updating the file. - * - */ - -import escape from "discourse-common/lib/escape"; - -export default function initLazyYt($) { - "use strict"; - - function setUp($el, settings) { - let 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('
'); - - // Play button from YouTube (exactly as it is in YouTube) - innerHtml.push('
"); - innerHtml.push(""); - innerHtml.push( - '' - ); - innerHtml.push( - '' - ); - innerHtml.push(""); - innerHtml.push("
"); // end of .ytp-large-play-button - - innerHtml.push("
"); // end of .ytp-thumbnail - - // Video title (info bar) - innerHtml.push('
'); - innerHtml.push('
'); - innerHtml.push('
'); - innerHtml.push( - '' - ); - if (title === undefined || title === null || title === "") { - innerHtml.push("youtube.com/watch?v=" + escape(id)); - } else { - innerHtml.push(escape(title)); - } - innerHtml.push(""); - innerHtml.push("
"); // .html5-title - innerHtml.push("
"); // .html5-title-text-wrapper - innerHtml.push("
"); // end of Video title .html5-info-bar - - let prefetchedThumbnail = $el[0].querySelector(".ytp-thumbnail-image"); - - $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"; - } - - if (prefetchedThumbnail) { - $el.find(".ytp-thumbnail").append(prefetchedThumbnail); - } else { - // Fallback for old posts which were baked before the lazy-yt onebox prefetched a thumbnail - $el - .find(".ytp-thumbnail") - .append( - $( - [ - '', - ].join("") - ) - ); - } - - $thumb = $el - .find(".ytp-thumbnail") - .addClass("lazyYT-image-loaded") - .on("keypress click", function (e) { - // Only support Enter for keypress - if (e.type === "keypress" && e.keyCode !== 13) { - return; - } - e.preventDefault(); - - if ( - !$el.hasClass("lazyYT-video-loaded") && - $thumb.hasClass("lazyYT-image-loaded") - ) { - $el - .html( - '' - ) - .addClass("lazyYT-video-loaded"); - } - - if (settings.onPlay) { - settings.onPlay(e, $el); - } - }); - } - - $.fn.lazyYT = function (newSettings) { - let defaultSettings = { - default_ratio: "16:9", - callback: null, // TODO: execute callback if given - container_class: "lazyYT-container", - }; - let settings = Object.assign(defaultSettings, newSettings); - - return this.each(function () { - let $el = $(this).addClass(settings.container_class); - setUp($el, settings); - }); - }; -} diff --git a/plugins/lazy-yt/assets/stylesheets/lazyYT.css b/plugins/lazy-yt/assets/stylesheets/lazyYT.css deleted file mode 100644 index 848b57a11b..0000000000 --- a/plugins/lazy-yt/assets/stylesheets/lazyYT.css +++ /dev/null @@ -1,127 +0,0 @@ -/*! -* 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, 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: 0.9; - z-index: 935; -} - -.ytp-large-play-button-svg { - opacity: 0.9; - fill: #1f1f1f; -} - -.lazyYT-image-loaded:hover .ytp-large-play-button-svg, -.lazyYT-image-loaded:focus .ytp-large-play-button-svg, -.ytp-large-play-button:focus .ytp-large-play-button-svg { - opacity: 1; - fill: #cc181e; -} - -.ytp-thumbnail-image { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; -} diff --git a/plugins/lazy-yt/assets/stylesheets/lazyYT_mobile.scss b/plugins/lazy-yt/assets/stylesheets/lazyYT_mobile.scss deleted file mode 100644 index 149a8d9b84..0000000000 --- a/plugins/lazy-yt/assets/stylesheets/lazyYT_mobile.scss +++ /dev/null @@ -1,3 +0,0 @@ -.lazyYT { - max-width: 100%; -} diff --git a/plugins/lazy-yt/config/locales/server.en.yml b/plugins/lazy-yt/config/locales/server.en.yml deleted file mode 100644 index 1ac0bee45f..0000000000 --- a/plugins/lazy-yt/config/locales/server.en.yml +++ /dev/null @@ -1,3 +0,0 @@ -en: - site_settings: - lazy_yt_enabled: "Enable the LazyYT plugin" diff --git a/plugins/lazy-yt/config/settings.yml b/plugins/lazy-yt/config/settings.yml deleted file mode 100644 index cca346d5df..0000000000 --- a/plugins/lazy-yt/config/settings.yml +++ /dev/null @@ -1,5 +0,0 @@ -plugins: - lazy_yt_enabled: - default: true - client: false - hidden: true diff --git a/plugins/lazy-yt/plugin.rb b/plugins/lazy-yt/plugin.rb deleted file mode 100644 index 5fb481c041..0000000000 --- a/plugins/lazy-yt/plugin.rb +++ /dev/null @@ -1,74 +0,0 @@ -# frozen_string_literal: true - -# name: lazy-yt -# about: Uses the lazyYT plugin to lazy load Youtube videos -# version: 1.0.1 -# authors: Arpit Jalan -# url: https://github.com/discourse/discourse/tree/main/plugins/lazy-yt - -hide_plugin if self.respond_to?(:hide_plugin) -enabled_site_setting :lazy_yt_enabled - -require "onebox" - -# 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 SiteSetting.lazy_yt_enabled && video_id && !params["list"] - size_restricted = [params["width"], params["height"]].any? - video_width = (params["width"] && params["width"].to_i <= 695) ? params["width"] : 690 # embed width - video_height = (params["height"] && params["height"].to_i <= 500) ? params["height"] : 388 # embed height - size_tags = ["width=\"#{video_width}\"", "height=\"#{video_height}\""] - - result = parse_embed_response - result ||= get_opengraph.data - - thumbnail_url = result[:image] || "https://img.youtube.com/vi/#{video_id}/hqdefault.jpg" - - # Put in the LazyYT div instead of the iframe - escaped_title = ERB::Util.html_escape(video_title) - - <<~HTML -
- - - -
- HTML - 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 %{

https://#{uri.host}#{uri.path}

} - rescue URI::InvalidURIError - # remove any invalid/weird URIs - yt.remove - end - end - end -end