FIX: Don't cloak videos once they begin playing

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -7,6 +7,7 @@ import { addToolbarCallback } from 'discourse/components/d-editor';
 import { addWidgetCleanCallback } from 'discourse/components/mount-widget';
 import { decorateWidget, changeSetting } from 'discourse/widgets/widget';
 import { onPageChange } from 'discourse/lib/page-tracker';
+import { preventCloak } from 'discourse/widgets/post-stream';
 
 class PluginApi {
   constructor(version, container) {
@@ -253,6 +254,20 @@ class PluginApi {
   changeWidgetSetting(widgetName, settingName, newValue) {
     changeSetting(widgetName, settingName, newValue);
   }
+
+  /**
+   * Prevents an element in the post stream from being cloaked.
+   * This is useful if you are using a plugin such as youtube
+   * and don't want the video removed once it has begun
+   * playing.
+   *
+   * ```javascript
+   * api.preventCloak(1234);
+   * ```
+   **/
+  preventCloak(postId) {
+    preventCloak(postId);
+  }
 }
 
 let _pluginv01;

app/assets/javascripts/discourse/widgets/post-stream.js.es6

@@ -6,10 +6,15 @@ import { addWidgetCleanCallback } from 'discourse/components/mount-widget';
 const CLOAKING_ENABLED = !window.inTestEnv;
 const DAY = 1000 * 60 * 60 * 24;
 
+const _dontCloak = {};
 let _cloaked = {};
 
+export function preventCloak(postId) {
+  _dontCloak[postId] = true;
+}
+
 export function cloak(post, component) {
-  if (!CLOAKING_ENABLED || _cloaked[post.id]) { return; }
+  if (!CLOAKING_ENABLED || _cloaked[post.id] || _dontCloak[post.id]) { return; }
 
   const $post = $(`#post_${post.post_number}`);
   _cloaked[post.id] = $post.height();

plugins/lazyYT/assets/javascripts/initializers/lazyYT.js.es6

@@ -4,7 +4,15 @@ export default {
   name: "apply-lazyYT",
   initialize() {
     withPluginApi('0.1', api => {
-      api.decorateCooked($elem => $('.lazyYT', $elem).lazyYT());
+      api.decorateCooked($elem => $('.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);
+          }
+        }
+      }));
     });
   }
 };

plugins/lazyYT/assets/javascripts/lazyYT.js

@@ -6,9 +6,12 @@
 * 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 ($) {
+(function ($) {
   'use strict';
 
   function setUp($el, settings) {
@@ -100,10 +103,15 @@
     .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);
+      }
     });
 
   }
@@ -122,4 +130,4 @@
     });
   };
 
-}(jQuery));
+})(jQuery);