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

Fixes #56 - Updated support for embedded Youtube & Vimeo videos.

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))

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."
+}

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>

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>

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();
       });