Merge pull request #4 from herablog/feature-tags

v0.0.5.

lib/plugins/video.js

@@ -9,19 +9,55 @@ exports.default = function () {
 
   return {
     toAmpVideo: function toAmpVideo() {
+      var opts = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
       var selectors = ['video'];
       _this.$(selectors.join(',')).each(function (i, el) {
+        var classNameVagueVideo = 'amp-video__vague';
+        var sizeVagueVideo = opts.sizeVagueVideo || 200;
         var $el = _this.$(el);
         var $conainer = _this.$('<div>');
         var $ampVideo = _this.$('<amp-video>');
         var attr = $el.attr();
-        var html = $el.html();
-        // set attr
-        $ampVideo.attr(attr);
-        $ampVideo.html(html);
-        $conainer.append($ampVideo);
-        // replace
-        $el.replaceWith($conainer.html());
+        var width = attr.width;
+        var height = attr.height;
+        // set src
+        if (attr.src) {
+          $ampVideo.attr('src', attr.src);
+          // set sizes
+          if (width === '100%') {
+            $ampVideo.attr({ width: 100, height: 100, layout: 'responsive' }).addClass(classNameVagueVideo);
+          } else if (width && height) {
+            $ampVideo.attr({ width: parseInt(width, 10), height: parseInt(height, 10) });
+          } else if (width || height) {
+            var size = width && parseInt(width, 10) || height && parseInt(height, 10);
+            $ampVideo.attr({ width: size, height: size }).addClass(classNameVagueVideo);
+          } else {
+            $ampVideo.attr({ width: sizeVagueVideo, height: sizeVagueVideo }).addClass(classNameVagueVideo);
+          }
+          // set attributes
+          if (attr.poster) {
+            $ampVideo.attr('poster', attr.poster);
+          }
+          if (attr.hasOwnProperty('autoplay')) {
+            $ampVideo.attr('autoplay', '');
+          }
+          if (attr.hasOwnProperty('controls')) {
+            $ampVideo.attr('controls', '');
+          }
+          if (attr.hasOwnProperty('loop')) {
+            $ampVideo.attr('loop', '');
+          }
+          if (attr.hasOwnProperty('muted')) {
+            $ampVideo.attr('muted', '');
+          }
+          $ampVideo.append($el.html());
+          $conainer.append($ampVideo);
+          // replace <img> to <amp-video>
+          $el.replaceWith($conainer.html());
+        } else {
+          $el.remove();
+        }
       });
       return _this;
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-to-amp",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Transform the normal html to the amp html.",
   "main": "index.js",
   "scripts": {

src/plugins/video.js

@@ -1,21 +1,59 @@
 export default function () {
   return {
-    toAmpVideo: () => {
+    toAmpVideo: (opts = {}) => {
       const selectors = [
         'video'
       ];
       this.$(selectors.join(',')).each((i, el) => {
+        const classNameVagueVideo = 'amp-video__vague';
+        const sizeVagueVideo = opts.sizeVagueVideo || 200;
         const $el = this.$(el);
         const $conainer = this.$('<div>');
         const $ampVideo = this.$('<amp-video>');
         const attr = $el.attr();
-        const html = $el.html();
-        // set attr
-        $ampVideo.attr(attr);
-        $ampVideo.html(html);
-        $conainer.append($ampVideo);
-        // replace
-        $el.replaceWith($conainer.html());
+        const width = attr.width;
+        const height = attr.height;
+        // set src
+        if (attr.src) {
+          $ampVideo.attr('src', attr.src);
+          // set sizes
+          if (width === '100%') {
+            $ampVideo
+              .attr({ width: 100, height: 100, layout: 'responsive' })
+              .addClass(classNameVagueVideo);
+          } else if (width && height) {
+            $ampVideo.attr({ width: parseInt(width, 10), height: parseInt(height, 10) });
+          } else if (width || height) {
+            const size = (width && parseInt(width, 10)) || (height && parseInt(height, 10));
+            $ampVideo.attr({ width: size, height: size }).addClass(classNameVagueVideo);
+          } else {
+            $ampVideo
+              .attr({ width: sizeVagueVideo, height: sizeVagueVideo })
+              .addClass(classNameVagueVideo);
+          }
+          // set attributes
+          if (attr.poster) {
+            $ampVideo.attr('poster', attr.poster);
+          }
+          if (attr.hasOwnProperty('autoplay')) {
+            $ampVideo.attr('autoplay', '');
+          }
+          if (attr.hasOwnProperty('controls')) {
+            $ampVideo.attr('controls', '');
+          }
+          if (attr.hasOwnProperty('loop')) {
+            $ampVideo.attr('loop', '');
+          }
+          if (attr.hasOwnProperty('muted')) {
+            $ampVideo.attr('muted', '');
+          }
+          $ampVideo.append($el.html());
+          $conainer.append($ampVideo);
+          // replace <img> to <amp-video>
+          $el.replaceWith($conainer.html());
+        } else {
+          $el.remove();
+        }
       });
       return this;
     }

tests/plugins/video-test.js

@@ -2,9 +2,105 @@ import { expect } from 'chai';
 import ampBuilder from '../../src/amp-builder';
 
 describe('video', () => {
-  it('changes tag to audio.', () => {
-    const html = '<video src="a.mp4"><div fallback><p>Your browser does not support HTML5 video</p></div><source type="video/mpeg" src="foo.mp4"></video>';
-    const fixture = '<amp-video src="a.mp4"><div fallback=""><p>Your browser does not support HTML5 video</p></div><source type="video/mpeg" src="foo.mp4"></amp-video>';
+  it('changes tag to video.', () => {
+    const html = '<video src="a.mp4" width="100" height="100"><div fallback><p>Your browser does not support HTML5 video</p></div><source type="video/mpeg" src="foo.mp4"></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100"><div fallback=""><p>Your browser does not support HTML5 video</p></div><source type="video/mpeg" src="foo.mp4"></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('changes responsive element and add "amp-video__vague" class when the el has "100%" width.', () => {
+    const html = '<video src="a.mp4" width="100%" height="16"></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100" layout="responsive" class="amp-video__vague"></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the same sizes when the el has both width and height', () => {
+    const html = '<video src="a.mp4" width="16" height="16"></video>';
+    const fixture = '<amp-video src="a.mp4" width="16" height="16"></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the size and add "amp-video__vague" class when the el has either width or height', () => {
+    const html = '<video src="a.mp4" width="16"></video>';
+    const fixture = '<amp-video src="a.mp4" width="16" height="16" class="amp-video__vague"></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the sizes 200 and add "amp-video__vague" class when the el has neither width nor height', () => {
+    const html = '<video src="a.mp4"></video>';
+    const fixture = '<amp-video src="a.mp4" width="200" height="200" class="amp-video__vague"></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the sizes 300 and add "amp-video__vague" class when the el has neither width nor height', () => {
+    const html = '<video src="a.mp4"></video>';
+    const fixture = '<amp-video src="a.mp4" width="300" height="300" class="amp-video__vague"></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo({ sizeVagueVideo: 300 }).html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the autoplay attribute', () => {
+    const html = '<video src="a.mp4" width="100" height="100" autoplay></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100" autoplay></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the controls attribute', () => {
+    const html = '<video src="a.mp4" width="100" height="100" controls></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100" controls></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the loop attribute', () => {
+    const html = '<video src="a.mp4" width="100" height="100" loop></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100" loop></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the muted attribute', () => {
+    const html = '<video src="a.mp4" width="100" height="100" muted></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100" muted></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the autoplay attribute', () => {
+    const html = '<video src="a.mp4" width="100" height="100" autoplay></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100" autoplay></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('sets the poster attribute', () => {
+    const html = '<video src="a.mp4" width="100" height="100" poster="https://example.com/poster.jpeg"></video>';
+    const fixture = '<amp-video src="a.mp4" width="100" height="100" poster="https://example.com/poster.jpeg"></amp-video>';
+    const builder = ampBuilder(html);
+    const result = builder.toAmpVideo().html();
+    expect(result).to.equal(fixture);
+  });
+
+  it('removes the element when src attribute cant be found', () => {
+    const html = '<div><video width="100"></video></div>';
+    const fixture = '<div></div>';
     const builder = ampBuilder(html);
     const result = builder.toAmpVideo().html();
     expect(result).to.equal(fixture);