From 129610526db39f8560938327e16096c61256c14b Mon Sep 17 00:00:00 2001
From: Edward Kerstein <ekerstein@gmail.com>
Date: Mon, 16 Mar 2020 10:39:10 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20youtube=20video=20embeds?=
 =?UTF-8?q?=20not=20displaying=20in=20AMP=20pages=20(#11058)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/TryGhost/Ghost/issues/10972

- adds `amp-youtube` to the allowed AMP components list
- adjusts `{{amp_components}}` output to include the `amp-youtube` script if any iframes with youtube urls are detected in the AMP content

Co-authored-by: Joseph Coffland <joseph@cauldrondevelopment.com>
---
 .../apps/amp/lib/helpers/amp_components.js    |  9 +++++-
 .../apps/amp/lib/helpers/amp_content.js       |  7 ++--
 .../test/unit/apps/amp/amp_components_spec.js | 32 +++++++++++++++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/core/frontend/apps/amp/lib/helpers/amp_components.js b/core/frontend/apps/amp/lib/helpers/amp_components.js
index da1b69f452..ec9fa2504f 100644
--- a/core/frontend/apps/amp/lib/helpers/amp_components.js
+++ b/core/frontend/apps/amp/lib/helpers/amp_components.js
@@ -23,7 +23,14 @@ function ampComponents() {
         components.push('<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>');
     }
 
-    if (html.indexOf('<iframe') !== -1) {
+    let iframeCount = (html.match(/(<iframe)(.*?)(<\/iframe>)/gi) || []).length,
+        youtubeCount = (html.match(/(<iframe)(.*?)(youtu.be\/|youtube(-nocookie)?.com\/(v\/|.*u\/\w\/|embed\/|.*v=))(.*?)(<\/iframe>)/gi) || []).length;
+
+    if (youtubeCount) {
+        components.push('<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>');
+    }
+
+    if (iframeCount > youtubeCount) {
         components.push('<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>');
     }
 
diff --git a/core/frontend/apps/amp/lib/helpers/amp_content.js b/core/frontend/apps/amp/lib/helpers/amp_content.js
index 9a4e75e75c..aca05a8d54 100644
--- a/core/frontend/apps/amp/lib/helpers/amp_content.js
+++ b/core/frontend/apps/amp/lib/helpers/amp_content.js
@@ -36,8 +36,8 @@ allowedAMPTags = ['html', 'body', 'article', 'section', 'nav', 'aside', 'h1', 'h
     'table', 'caption', 'colgroup', 'col', 'tbody', 'thead', 'tfoot', 'tr', 'td',
     'th', 'button', 'noscript', 'acronym', 'center', 'dir', 'hgroup', 'listing',
     'multicol', 'nextid', 'nobr', 'spacer', 'strike', 'tt', 'xmp', 'amp-img',
-    'amp-video', 'amp-ad', 'amp-embed', 'amp-anim', 'amp-iframe', 'amp-pixel',
-    'amp-audio', 'O:P'];
+    'amp-video', 'amp-ad', 'amp-embed', 'amp-anim', 'amp-iframe', 'amp-youtube',
+    'amp-pixel', 'amp-audio', 'O:P'];
 
 allowedAMPAttributes = {
     '*': ['itemid', 'itemprop', 'itemref', 'itemscope', 'itemtype', 'accesskey', 'class', 'dir', 'draggable',
@@ -110,7 +110,8 @@ allowedAMPAttributes = {
     'amp-anim': ['media', 'noloading', 'alt', 'attribution', 'placeholder', 'src', 'srcset', 'width', 'height', 'layout'],
     'amp-audio': ['src', 'width', 'height', 'autoplay', 'loop', 'muted', 'controls'],
     'amp-iframe': ['src', 'srcdoc', 'width', 'height', 'layout', 'frameborder', 'allowfullscreen', 'allowtransparency',
-        'sandbox', 'referrerpolicy']
+        'sandbox', 'referrerpolicy'],
+    'amp-youtube': ['src', 'width', 'height', 'layout', 'frameborder', 'autoplay', 'loop', 'data-videoid', 'data-live-channelid']
 };
 
 function getAmperizeHTML(html, post) {
diff --git a/core/test/unit/apps/amp/amp_components_spec.js b/core/test/unit/apps/amp/amp_components_spec.js
index 3f3f4303b1..56c295b630 100644
--- a/core/test/unit/apps/amp/amp_components_spec.js
+++ b/core/test/unit/apps/amp/amp_components_spec.js
@@ -32,6 +32,38 @@ describe('{{amp_components}} helper', function () {
         rendered.should.match(/<script async custom-element="amp-iframe" src="https:\/\/cdn.ampproject.org\/v0\/amp-iframe-0.1.js"><\/script>/);
     });
 
+    it('adds script tag for a youtube embed', function () {
+        var post = {
+                html: '<iframe src="https://www.youtube.com/embed/zqNTltOGh5c" frameborder="0"></iframe>'
+            },
+            rendered;
+
+        rendered = ampComponentsHelper.call(
+            {relativeUrl: '/post/amp/', safeVersion: '0.3', context: ['amp', 'post'], post: post},
+            {data: {root: {context: ['amp', 'post']}}});
+
+        should.exist(rendered);
+        rendered.should.match(/<script async custom-element="amp-youtube" src="https:\/\/cdn.ampproject.org\/v0\/amp-youtube-0.1.js"><\/script>/);
+    });
+
+    it('adds scripts for youtube embeds and iframes', function () {
+        var post = {
+                html: `
+                    <iframe src="https://www.youtube.com/embed/zqNTltOGh5c" frameborder="0"></iframe>
+                    <iframe src="//giphy.com/embed/o0vwzuFwCGAFO" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+                `
+            },
+            rendered;
+
+        rendered = ampComponentsHelper.call(
+            {relativeUrl: '/post/amp/', safeVersion: '0.3', context: ['amp', 'post'], post: post},
+            {data: {root: {context: ['amp', 'post']}}});
+
+        should.exist(rendered);
+        rendered.should.match(/<script async custom-element="amp-youtube" src="https:\/\/cdn.ampproject.org\/v0\/amp-youtube-0.1.js"><\/script>/);
+        rendered.should.match(/<script async custom-element="amp-iframe" src="https:\/\/cdn.ampproject.org\/v0\/amp-iframe-0.1.js"><\/script>/);
+    });
+
     it('adds script tag for an audio tag', function () {
         var post = {
                 html: '<audio src="myaudiofile.mp3"/>'