cloudinary-video-player 1.6.2-edge.13

package/src/video-player.utils.js

@@ -0,0 +1,123 @@
+import videojs from 'video.js';
+import Utils from './utils';
+import defaults from './config/defaults';
+import {
+  CLOUDINARY_PARAMS,
+  DEFAULT_HLS_OPTIONS,
+  PLAYER_PARAMS,
+  FLUID_CLASS_NAME,
+  AUTO_PLAY_MODE
+} from './video-player.const';
+import { isString } from './utils/type-inference';
+
+export const addMetadataTrack = (videoJs, vttSource) => {
+  return videoJs.addRemoteTextTrack({
+    kind: 'metadata',
+    srclang: 'en',
+    src: vttSource,
+    default: true
+  }, true).track;
+};
+
+export const isLight = (opts) => {
+  return opts.class.indexOf('cld-video-player-skin-light') > -1 || opts.skin === 'light';
+};
+
+export const getResolveVideoElement = (elem) => {
+  if (isString(elem)) {
+    let id = elem;
+
+    // Adjust for jQuery ID syntax
+    if (id.indexOf('#') === 0) {
+      id = id.slice(1);
+    }
+
+    try {
+      elem = document.querySelector(`#${id}`) || videojs.getPlayer(id);
+    } catch (e) {
+      elem = null;
+    }
+
+    if (!elem) {
+      throw new Error(`Could not find element with id ${id}`);
+    }
+  }
+
+  if (!elem.tagName) {
+    throw new Error('Must specify either an element or an element id.');
+  } else if (elem.tagName !== 'VIDEO') {
+    throw new Error('Element is not a video tag.');
+  }
+
+  return elem;
+};
+
+
+export const normalizeAutoplay = (options) => {
+  const autoplayMode = options.autoplayMode;
+  if (autoplayMode) {
+    switch (autoplayMode) {
+      case AUTO_PLAY_MODE.ALWAYS:
+        options.autoplay = true;
+        break;
+      case AUTO_PLAY_MODE.ON_SCROLL:
+      case AUTO_PLAY_MODE.NEVER:
+      default:
+        options.autoplay = false;
+    }
+  }
+};
+
+export const extractOptions = (elem, options) => {
+  const elemOptions = Utils.normalizeAttributes(elem);
+
+  if (videojs.dom.hasClass(elem, FLUID_CLASS_NAME) || videojs.dom.hasClass(elem, 'vjs-fluid')) {
+    options.fluid = true;
+  }
+  // Default HLS options < Default options < Markup options < Player options
+  options = Utils.assign({}, DEFAULT_HLS_OPTIONS, defaults, elemOptions, options);
+
+  // In case of 'autoplay on scroll', we need to make sure normal HTML5 autoplay is off
+  normalizeAutoplay(options);
+
+  // VideoPlayer specific options
+  const playerOptions = Utils.sliceAndUnsetProperties(options, ...PLAYER_PARAMS);
+
+  // Cloudinary plugin specific options
+  playerOptions.cloudinary = Utils.sliceAndUnsetProperties(playerOptions, ...CLOUDINARY_PARAMS);
+
+  // Allow explicitly passing options to videojs using the `videojs` namespace, in order
+  // to avoid param name conflicts:
+  // VideoPlayer.new({ controls: true, videojs: { controls: false })
+  if (options.videojs) {
+    Utils.assign(options, options.videojs);
+    delete options.videojs;
+  }
+
+  return { playerOptions, videojsOptions: options };
+};
+
+export const overrideDefaultVideojsComponents = () => {
+  const Player = videojs.getComponent('Player');
+  let children = Player.prototype.options_.children;
+
+  // Add TitleBar as default
+  children.push('titleBar');
+  children.push('upcomingVideoOverlay');
+  children.push('recommendationsOverlay');
+
+  const ControlBar = videojs.getComponent('ControlBar');
+
+  if (ControlBar) {
+    children = ControlBar.prototype.options_.children;
+    // Add space instead of the progress control (which we deattached from the controlBar, and absolutely positioned it above it)
+    // Also add a blank div underneath the progress control to stop bubbling up pointer events.
+    children.splice(children.indexOf('progressControl'), 0, 'spacer', 'progressControlEventsBlocker');
+
+    // Add 'play-previous' and 'play-next' buttons around the 'play-toggle'
+    children.splice(children.indexOf('playToggle'), 1, 'playlistPreviousButton', 'JumpBackButton', 'playToggle', 'JumpForwardButton', 'playlistNextButton');
+
+    // Position the 'logo-button' button right next to 'fullscreenToggle'
+    children.splice(children.indexOf('fullscreenToggle'), 1, 'logoButton', 'fullscreenToggle');
+  }
+};

package/test/adaptive-streaming.test.js

@@ -0,0 +1,38 @@
+describe('Adaptive streaming tests', () => {
+  beforeAll(async () => {
+    jest.setTimeout(35000);
+    await page.setViewport({ width: 1280, height: 800 });
+    await page.goto('http://localhost:3000/docs/adaptive-streaming.html', { waitUntil: 'load' });
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function () {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+            this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+  it('Should not throw an error when setting new hls source', async () => {
+    jest.setTimeout(35000);
+    await page.waitFor(1000);
+
+    // async function not working without being put inside a template string,
+    // See https://github.com/puppeteer/puppeteer/issues/1665
+    const error = await page.evaluate(`(async () => {
+      let error = null;
+      
+      // Get any error into error variable
+      playerHls.on('error', (e) => (error = e.Player.videojs.error()));
+      
+      // Set new hls source
+      playerHls.source('snow_horses', {sourceTypes: ['hls'], transformation: { streaming_profile: 'hd' }});
+      
+      // wait a second for error event
+      await new Promise(resolve=>setTimeout(resolve, 1000));
+      
+      // Return null or an error object
+      return JSON.stringify(error);
+    })()`);
+    expect(JSON.parse(error)).toEqual(null); // expect no error
+  });
+});

package/test/ads.test.js

@@ -0,0 +1,35 @@
+describe('Ads tests', () => {
+
+  beforeEach(async () => {
+    await page.setViewport({ width: 1280, height: 800 });
+    await page.goto('http://localhost:3000/vast-vpaid.html', { waitUntil: 'load' });
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function () {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+
+    await page.evaluate(() => (window.ev = []));
+    await page.evaluate(() => player.on('readyforpreroll', () => {
+      window.ev.push('preroll');
+    }));
+    await page.evaluate(() => player.on('readyforpostroll', () => {
+      window.ev.push('postroll');
+    }));
+  }, 10000);
+
+  it('event test', async () => {
+    jest.setTimeout(65000);
+    await page.waitForSelector('#player_ima-ad-container', {visible: true});
+    await page.waitFor(1000);
+    const duration = await page.evaluate(() => player.duration());
+    await page.waitFor(duration * 1000 + 1000);
+    const events = await page.evaluate(() => window.ev);
+    expect(events.includes('preroll')).toEqual(true);
+    expect(events.includes('postroll')).toEqual(true);
+  });
+
+});

package/test/analytics.test.js

@@ -0,0 +1,111 @@
+const RequestInterceptor = require('puppeteer-request-spy').RequestInterceptor;
+const RequestSpy = require('puppeteer-request-spy').RequestSpy;
+const URL = require('url').URL;
+
+describe('Analytics tests', () => {
+  let paramInterceptor = null;
+
+  beforeEach(async () => {
+    // parameter Interceptor
+    paramInterceptor = new RequestInterceptor((testee, keyword) => {
+      const urlObj = new URL(testee);
+      return urlObj.searchParams.get('ea') === keyword;
+    });
+    await page.setRequestInterception(true);
+    await page.setViewport({ width: 1280, height: 1800 });
+  }, 35000);
+
+  it('Analytics requests', async () => {
+    jest.setTimeout(35000);
+    const requestInterceptor = new RequestInterceptor((testee, keyword) => testee.startsWith(keyword));
+    const reqSpy = new RequestSpy('https://www.google-analytics.com/collect');
+    requestInterceptor.addSpy(reqSpy);
+    await page.on('request', requestInterceptor.intercept.bind(requestInterceptor));
+    await page.goto('http://localhost:3000/analytics.html', { waitUntil: 'load' });
+    await page.waitFor(1000);
+    expect(reqSpy.hasMatch()).toBe(true);
+  });
+
+  it('Test pause event', async () => {
+    jest.setTimeout(35000);
+    const puseSpy = new RequestSpy('Pause');
+    paramInterceptor.addSpy(puseSpy);
+    await page.on('request', paramInterceptor.intercept.bind(paramInterceptor));
+    await page.goto('http://localhost:3000/analytics.html', { waitUntil: 'load' });
+    await page.waitFor(1000);
+    await page.click('#player > div.vjs-control-bar > button.vjs-play-control');
+    expect(puseSpy.hasMatch()).toBe(true);
+  });
+
+  it('Test play event', async () => {
+    jest.setTimeout(35000);
+    const playSpy = new RequestSpy('Play');
+    paramInterceptor.addSpy(playSpy);
+    await page.on('request', paramInterceptor.intercept.bind(paramInterceptor));
+    await page.goto('http://localhost:3000/analytics.html', { waitUntil: 'load' });
+    await page.waitFor(1000);
+    await page.click('#player > div.vjs-control-bar > button.vjs-play-control');
+    await page.waitFor(500);
+    await page.click('#player > div.vjs-control-bar > button.vjs-play-control');
+    expect(playSpy.getMatchCount()).toBe(2);
+  });
+
+  it('Test volume event', async () => {
+    jest.setTimeout(35000);
+    const spy = new RequestSpy('Volume Change');
+    paramInterceptor.addSpy(spy);
+    await page.on('request', paramInterceptor.intercept.bind(paramInterceptor));
+    await page.goto('http://localhost:3000/analytics.html', { waitUntil: 'load' });
+    await page.waitFor(1000);
+    await page.click('#player > .vjs-control-bar > .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal > button');
+    expect(spy.hasMatch()).toBe(true);
+  });
+
+  it('Test percentage event', async () => {
+    jest.setTimeout(60000);
+    let fussyParamInterceptor = new RequestInterceptor((testee, keyword) => {
+      let urlObj = new URL(testee);
+      const event = urlObj.searchParams.get('ea');
+      return event !== null && event.includes(keyword);
+    });
+    const spy = new RequestSpy('Percents Played');
+    fussyParamInterceptor.addSpy(spy);
+    await page.on('request', fussyParamInterceptor.intercept.bind(fussyParamInterceptor));
+    await page.goto('http://localhost:3000/analytics.html', { waitUntil: 'load' });
+    await page.waitFor(1000);
+    const duration = await page.evaluate(() => player.duration());
+    await page.waitFor(duration * 1000 + 1000);
+    expect(spy.getMatchCount()).toBe(4);
+  });
+
+  it('Test seek', async () => {
+
+    jest.setTimeout(35000);
+    const fussyParamInterceptor = new RequestInterceptor((testee, keyword) => {
+      const urlObj = new URL(testee);
+      const event = urlObj.searchParams.get('ea');
+      return event !== null && event.includes(keyword);
+    });
+
+    const spy = new RequestSpy('Seek');
+    fussyParamInterceptor.addSpy(spy);
+    await page.on('request', fussyParamInterceptor.intercept.bind(fussyParamInterceptor));
+    await page.goto('http://localhost:3000/analytics.html', { waitUntil: 'load' });
+    await page.waitFor(1000);
+    await page.evaluate(() => player.currentTime(player.currentTime() + 10));
+    await page.waitFor(1000);
+    expect(spy.getMatchCount()).toBe(2);
+  });
+
+/*  it('Test full screen', async () => {
+    jest.setTimeout(35000);
+    let spy = new RequestSpy('Enter Fullscreen');
+    paramInterceptor.addSpy(spy);
+    await page.on('request', paramInterceptor.intercept.bind(paramInterceptor));
+    await page.goto('http://localhost:3000/analytics.html', { waitUntil: 'load' });
+    await page.waitFor(1000);
+    await page.click('#player > .vjs-control-bar > button.vjs-fullscreen-control.vjs-control.vjs-button');
+    await page.waitFor(500);
+    expect(spy.hasMatch()).toBe(true);
+  });*/
+});

package/test/api.test.js

@@ -0,0 +1,111 @@
+const url = 'http://localhost:3000/api.html';
+
+describe('API player tests ', () => {
+  try {
+    beforeEach(async () => {
+      await page.setViewport({ width: 1280, height: 1800 });
+      await page.goto(url, { waitUntil: 'load' });
+      await page.evaluate(() => {
+        Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+          get: function() {
+            return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+                this.readyState > 2);
+          }
+        });
+      });
+    }, 10000);
+
+    it('Test forward 10 seconds', async () => {
+      jest.setTimeout(35000);
+      await page.waitForFunction('player.videojs.readyState() === 4');
+      const time = await page.$eval(
+        '#player > .vjs-control-bar > .vjs-current-time.vjs-time-control.vjs-control > .vjs-current-time-display',
+        vt => Number(vt.textContent.replace('0:', '')));
+      await page.click('#vid-seek-plus');
+      await page.waitForFunction('player.videojs.readyState() === 4');
+      const newtime = await page.$eval(
+        '#player > .vjs-control-bar > .vjs-current-time.vjs-time-control.vjs-control > .vjs-current-time-display',
+        vt => Number(vt.textContent.replace('0:', '')));
+      expect(newtime).toBeGreaterThanOrEqual(time + 10);
+    });
+
+    it('Test back 10 seconds', async () => {
+      jest.setTimeout(35000);
+      await page.waitForFunction('player.videojs.readyState() === 4');
+      await page.click('#vid-seek-plus');
+      await page.waitForFunction('player.videojs.readyState() === 4');
+      await page.click('#vid-seek-minus');
+      await page.waitForFunction('player.videojs.readyState() === 4');
+      const newtime = await page.$eval(
+        '#player > .vjs-control-bar > .vjs-current-time.vjs-time-control.vjs-control > .vjs-current-time-display',
+        vt => Number(vt.textContent.replace('0:', '')));
+      expect(newtime).toEqual(0);
+    });
+
+    it('Test mute un-mute', async () => {
+      await page.waitFor(500);
+      await page.click('#vid-mute');
+      await page.waitFor(500);
+      expect(await page.$eval('#player_html5_api', v => v.muted)).toBe(true);
+      await page.click('#vid-unmute');
+      await page.waitFor(500);
+      expect(await page.$eval('#player_html5_api', v => v.muted)).toBe(false);
+    });
+
+    it('Test volume down', async () => {
+      await page.waitFor(500);
+      await page.click('#vid-unmute');
+      await page.waitFor(500);
+      let currentVol = await page.$eval('#player_html5_api', v => v.volume);
+      await page.click('#vid-volume-minus');
+      await page.waitFor(500);
+      expect(await page.$eval('#player_html5_api', v => v.volume)).toBe(currentVol - 0.1);
+    });
+
+    it('Test volume up', async () => {
+      await page.waitFor(500);
+      await page.click('#vid-unmute');
+      await page.waitFor(500);
+      const currentVol = await page.$eval('#player_html5_api', v => v.volume);
+      await page.click('#vid-volume-plus');
+      await page.waitFor(500);
+      expect(await page.$eval('#player_html5_api', v => v.volume)).toBe(currentVol + 0.1);
+    });
+
+    it('Test pause', async () => {
+      await page.waitFor(500);
+      await page.click('#vid-pause');
+      await page.waitFor(500);
+      expect(await page.$eval('#player video', el => el.playing)).toBe(false);
+    });
+
+    it('Test play', async () => {
+      await page.waitFor(500);
+      await page.click('#player > .vjs-control-bar > button.vjs-play-control.vjs-control');
+      await page.waitFor(500);
+      expect(await page.$eval('#player video', el => el.playing)).toBe(false);
+      await page.waitFor(500);
+      await page.click('#vid-play');
+      expect(await page.$eval('#player video', el => el.playing)).toBe(true);
+    });
+
+    it('Test stop', async () => {
+      await page.waitFor(500);
+      await page.click('#vid-stop');
+      await page.waitFor(500);
+      expect(await page.$eval('#player video', el => el.playing)).toBe(false);
+    });
+
+    it('Test hide controls', async () => {
+      await page.waitFor(500);
+      expect(await page.$eval('#player > .vjs-control-bar', p => p.offsetWidth)).toBeGreaterThan(0);
+      await page.click('#vid-toggle-controls');
+      await page.waitFor(500);
+      expect(await page.$eval('#player > .vjs-control-bar', p => p.offsetWidth)).toBe(0);
+    });
+
+  } catch (err) {
+    console.log(err);
+    browser.close();
+  }
+});

package/test/autoplay.scroll.test.js

@@ -0,0 +1,23 @@
+describe('Auto-play tests', () => {
+
+  beforeEach(async () => {
+    await page.setViewport({width: 1280, height: 800});
+    await page.goto('http://localhost:3000/autoplay-on-scroll.html', {waitUntil: 'load'});
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+
+  it('Test scroll', async () => {
+    const player = await page.$('#player_html5_api');
+    expect(await player.isIntersectingViewport()).toEqual(false);
+    await player.tap();
+    await page.waitFor(1000);
+    expect(await page.$eval('#player_html5_api', p => p.playing)).toEqual(true);
+  });
+});

package/test/basic-ui.test.js

@@ -0,0 +1,59 @@
+describe('basic player tests', () => {
+
+  beforeEach(async () => {
+    await page.setViewport({ width: 1280, height: 1300 });
+    await page.goto('http://localhost:3000/', { waitUntil: 'load' });
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+
+  it('video player should load', async () => {
+    await expect(await page.$eval('video', v => v.id)).toMatch('player_html5_api');
+  });
+
+  it('Video should play', async () => {
+    jest.setTimeout(35000);
+    await page.waitForSelector('.vjs-big-play-button');
+    await page.click('#player > button.vjs-big-play-button');
+    await page.waitFor(1000);
+    const playing = await page.$eval('#player video', el => el.playing);
+    await expect(playing).toBe(true);
+  });
+
+  it('Pause button test', async () => {
+    jest.setTimeout(35000);
+    await page.waitForSelector('.vjs-big-play-button');
+    await page.click('#player > button.vjs-big-play-button');
+    await page.waitForFunction('player.videojs.readyState() === 4');
+    await page.waitFor(1000);
+    const playing1 = await page.$eval('#player video', el => el.playing);
+    await expect(playing1).toBe(true);
+    await page.click('#player > .vjs-control-bar > button.vjs-play-control.vjs-control');
+    await page.waitFor(500);
+    const playing2 = await page.$eval('#player video', el => el.playing);
+    await expect(playing2).toBe(false);
+  });
+
+  it('Test mute', async () => {
+    await page.waitForSelector('.vjs-big-play-button');
+    await page.click('#player > button.vjs-big-play-button');
+    await page.waitFor(500);
+    expect(await page.$eval('#player video', v => v.muted)).toBe(true);
+    await page.click('#player > .vjs-control-bar > .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal > button');
+    expect(await page.$eval('#player video', v => v.muted)).toBe(false);
+  });
+
+  it('Test video time', async () => {
+    await page.waitForSelector('.vjs-big-play-button');
+    await page.click('#player > button.vjs-big-play-button');
+    await page.waitFor(2000);
+    const time = await page.$eval('#player > .vjs-control-bar > .vjs-current-time.vjs-time-control.vjs-control > .vjs-current-time-display', vt => Number(vt.textContent.replace(':', '')));
+    await page.waitFor(2000);
+    expect(await page.$eval('#player > .vjs-control-bar > .vjs-current-time.vjs-time-control.vjs-control > .vjs-current-time-display', vt => Number(vt.textContent.replace(':', '')))).toBeGreaterThan(time);
+  });
+});

package/test/colors.test.js

@@ -0,0 +1,58 @@
+describe('Colors api tests', () => {
+
+  beforeAll(async () => {
+    jest.setTimeout(35000);
+    await page.setViewport({width: 1280, height: 800});
+    await page.goto('http://localhost:3000/docs/colors.html', {waitUntil: 'load'});
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+
+  it('Test colors', async () => {
+    jest.setTimeout(35000);
+    await page.waitFor(1000);
+    const playersInf = await page.evaluate(() => players.map((p) => {
+      const op = {};
+      op[p.videojs.id_] = p.videojs.options_['data-cld-colors'];
+      return op;
+    }),
+    );
+
+    for (const player of playersInf) {
+      const id = Object.keys(player);
+      const opts = player[id];
+      const tooltipColor = rgb2hex(await page.$eval(`#${id} .vjs-time-tooltip`, e => getComputedStyle(e).color));
+      const progressColor = rgb2hex(await page.$eval(`#${id} .vjs-play-progress`, e => getComputedStyle(e).backgroundColor));
+      const titleBarColor = rgb2hex(await page.$eval(`#${id} .vjs-title-bar`, e => getComputedStyle(e).color));
+      const optColors = JSON.parse(opts);
+      expect(tooltipColor).toEqual(extendHex(optColors.base));
+      expect(progressColor).toEqual(extendHex(optColors.accent));
+      expect(titleBarColor).toEqual(extendHex(optColors.text));
+    }
+  });
+});
+
+function rgb2hex(rgb) {
+  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+
+  function hex(x) {
+    // eslint-disable-next-line radix
+    return ('0' + parseInt(x).toString(16)).slice(-2);
+  }
+
+  return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+}
+
+function extendHex(hex) {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+  return hex.startsWith('#') ? hex : '#' + hex;
+}

package/test/components.test.js

@@ -0,0 +1,21 @@
+describe('Components tests', () => {
+
+  beforeEach(async () => {
+    await page.setViewport({width: 1280, height: 800});
+    await page.goto('http://localhost:3000/components.html', {waitUntil: 'load'});
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+
+  it('Test components', async () => {
+    page.waitFor(1000);
+    expect(await page.$eval('.vjs-playlist-control.vjs-playlist-next-control', (b => b.tagName))).toEqual('BUTTON');
+    expect(await page.$eval('.vjs-playlist-control.vjs-playlist-previous-control', (b => b.tagName))).toEqual('BUTTON');
+  });
+});

package/test/custom-error.test.js

@@ -0,0 +1,24 @@
+describe('custom error tests', () => {
+
+  beforeAll(async () => {
+    jest.setTimeout(35000);
+    await page.setViewport({ width: 1280, height: 800 });
+    await page.goto('http://localhost:3000/docs/custom-cld-errors.html', { waitUntil: 'load' });
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+
+  it('Test error', async () => {
+    jest.setTimeout(35000);
+    await page.waitFor(1000);
+    // eslint-disable-next-line no-undef
+    const errorMsg = await page.evaluate(() => player.videojs.error_.message);
+    expect(errorMsg).toBe('My custom error message');
+  });
+});

package/test/fluid.test.js

@@ -0,0 +1,36 @@
+describe('Fluid tests', () => {
+
+  beforeEach(async () => {
+    await page.setViewport({width: 1280, height: 800});
+    await page.goto('http://localhost:3000/fluid.html', {waitUntil: 'load'});
+    await page.evaluate(() => {
+      Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
+        get: function() {
+          return !!(this.currentTime > 0 && !this.paused && !this.ended &&
+              this.readyState > 2);
+        }
+      });
+    });
+  }, 10000);
+
+  it('Test fluid change', async () => {
+    await page.waitFor(1000);
+    const origWidth = await page.$eval('#player_html5_api', p => p.clientWidth);
+    await page.setViewport({ width: 800, height: 800 });
+    await page.waitFor(1000);
+    const currWidth = await page.$eval('#player_html5_api', p => p.clientWidth);
+    expect(origWidth).toBeGreaterThan(currWidth);
+  });
+
+  it('Test no fluid change', async () => {
+    await page.waitFor(1000);
+    await page.click('#toggle-fluid');
+    await page.waitFor(500);
+    const origWidth = await page.$eval('#player_html5_api', p => p.clientWidth);
+    await page.setViewport({ width: 800, height: 800 });
+    await page.waitFor(1000);
+    const currWidth = await page.$eval('#player_html5_api', p => p.clientWidth);
+    expect(origWidth).toEqual(currWidth);
+  });
+
+});