Merge pull request mozilla#65 from mozilla/support-embed-videos

Fixes mozilla#56 - Updated support for embedded Youtube & Vimeo videos.
royalgarter · Mar 23, 2015 · 14b33b6 · 14b33b6
2 parents b8b6206 + 2d5f59f
commit 14b33b6
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 8 deletions.
diff --git a/Readability.js b/Readability.js
@@ -96,7 +96,7 @@ Readability.prototype = {
     byline: /byline|author|dateline|writtenby/i,
     replaceFonts: /<(\/?)font[^>]*>/gi,
     normalize: /\s{2,}/g,
-    videos: /https?:\/\/(www\.)?(youtube|vimeo)\.com/i,
+    videos: /https?:\/\/(www\.)?(youtube|youtube-nocookie|player\.vimeo)\.com/i,
     nextLink: /(next|weiter|continue|>([^\|]|$)|»([^\|]|$))/i,
     prevLink: /(prev|earl|old|new|<|«)/i,
     whitespace: /^\s*$/,
@@ -370,7 +370,9 @@ Readability.prototype = {
       var imgCount = paragraph.getElementsByTagName('img').length;
       var embedCount = paragraph.getElementsByTagName('embed').length;
       var objectCount = paragraph.getElementsByTagName('object').length;
-      var totalCount = imgCount + embedCount + objectCount;
+      // At this point, nasty iframes have been removed, only remain embedded video ones.
+      var iframeCount = paragraph.getElementsByTagName('iframe').length;
+      var totalCount = imgCount + embedCount + objectCount + iframeCount;
 
       if (totalCount === 0 && !this._getInnerText(paragraph, false))
         paragraph.parentNode.removeChild(paragraph);
@@ -1416,15 +1418,14 @@ Readability.prototype = {
    * @return void
    **/
   _clean: function(e, tag) {
-    var isEmbed = (tag === 'object' || tag === 'embed');
+    var isEmbed = ["object", "embed", "iframe"].indexOf(tag) !== -1;
 
     this._forEachNode(e.getElementsByTagName(tag), function(element) {
       // Allow youtube and vimeo videos through as people usually want to see those.
       if (isEmbed) {
-        var attributeValues = "";
-        for (var i = 0, il = element.attributes.length; i < il; i += 1) {
-          attributeValues += element.attributes[i].value + '|';
-        }
+        var attributeValues = [].map.call(element.attributes, function(attr) {
+          return attr.value;
+        }).join("|");
 
         // First, check the elements attributes to see if any of them contain youtube or vimeo
         if (this.REGEXPS.videos.test(attributeValues))

diff --git a/test/test-pages/embedded-videos/expected-metadata.json b/test/test-pages/embedded-videos/expected-metadata.json
@@ -0,0 +1,5 @@
+{
+  "title": "Embedded videos test",
+  "byline": null,
+  "excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+}
diff --git a/test/test-pages/embedded-videos/expected.html b/test/test-pages/embedded-videos/expected.html
@@ -0,0 +1,36 @@
+<div id="readability-page-1" class="page">
+    <article>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+         <h2>Videos</h2>
+
+        <p>At root</p>
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/LtOGa5M8AuU"
+        frameborder="0"></iframe>
+        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LtOGa5M8AuU"
+        frameborder="0"></iframe>
+        <iframe src="https://player.vimeo.com/video/32246206?color=ffffff&title=0&byline=0&portrait=0"
+        width="500" height="281" frameborder="0"></iframe>
+        <p>In a paragraph</p>
+        <p>
+            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LtOGa5M8AuU"
+            frameborder="0"></iframe>
+        </p>
+        <p>In a div</p>
+        <p>
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/LtOGa5M8AuU"
+            frameborder="0"></iframe>
+        </p>
+         <h2>Foo</h2>
+
+        <p>Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </article>
+</div>
diff --git a/test/test-pages/embedded-videos/source.html b/test/test-pages/embedded-videos/source.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Embedded videos test</title>
+</head>
+<body>
+  <article>
+    <h1>Lorem</h1>
+    <div>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+    <h2>Videos</h2>
+    <p>At root</p>
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/LtOGa5M8AuU"
+            frameborder="0" allowfullscreen=""></iframe>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LtOGa5M8AuU"
+            frameborder="0" allowfullscreen=""></iframe>
+    <iframe src="https://player.vimeo.com/video/32246206?color=ffffff&title=0&byline=0&portrait=0"
+            width="500" height="281" frameborder="0"
+            webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
+    <p>In a paragraph</p>
+    <p><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LtOGa5M8AuU"
+               frameborder="0" allowfullscreen=""></iframe></p>
+    <p>In a div</p>
+    <div><iframe width="560" height="315" src="https://www.youtube.com/embed/LtOGa5M8AuU"
+                 frameborder="0" allowfullscreen=""></iframe></div>
+    <h2>Foo</h2>
+    <div>
+      Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+  </article>
+</body>
+</html>
diff --git a/test/test-readability.js b/test/test-readability.js
@@ -63,7 +63,7 @@ describe("Test page", function() {
         pathBase: "http://fakehost/test/"
       };
 
-      beforeEach(function() {
+      before(function() {
         doc = new JSDOMParser().parse(source);
         result = new Readability(uri, doc).parse();
       });